/* ==========================================================================
   Taj Store storefront
   ========================================================================== */

:root {
    --primary: #4F46E5;
    --primary-600: #4338CA;
    --primary-50: #EEF2FF;
    --primary-100: #E0E7FF;
    --secondary: #7C3AED;
    --accent: #F59E0B;
    --success: #10B981;
    --danger: #EF4444;
    --dark: #0F172A;
    --ink: #1E293B;
    --muted: #64748B;
    --border: #E2E8F0;
    --light: #F8FAFC;
    --surface: #FFFFFF;
    --radius-sm: 6px;
    --radius: 10px;
    --radius-lg: 14px;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --shadow: 0 3px 12px rgba(15, 23, 42, .08);
    --shadow-lg: 0 10px 28px rgba(15, 23, 42, .12);
    --header-h: 58px;

    /* Older page styles reference these names */
    --primary-color: var(--primary);
    --secondary-color: var(--secondary);

    --bs-primary: #4F46E5;
    --bs-primary-rgb: 79, 70, 229;
    --bs-link-color: #4F46E5;
    --bs-link-hover-color: #4338CA;
    --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --bs-body-color: #1E293B;
    --bs-border-color: #E2E8F0;
}

html { scroll-behavior: smooth; font-size: 14px; }

body {
    font-family: var(--bs-body-font-family);
    font-size: 1.04rem;
    line-height: 1.5;
    background: var(--light);
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main.site-main { flex: 1 0 auto; }

a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-600); }
img { max-width: 100%; }
h1, h2, h3, h4, h5, h6 { color: var(--dark); font-weight: 700; letter-spacing: -.01em; }

.container { max-width: 1280px; }

/* ---------- Bootstrap theme alignment ---------- */
.btn { border-radius: 8px; font-weight: 600; padding: .45rem .95rem; font-size: 1.07rem; transition: all .2s ease; }
.btn-lg { padding: .5rem 1.1rem; font-size: 1.07rem; border-radius: 9px; }
.btn-sm { padding: .28rem .65rem; border-radius: 6px; font-size: .96rem; }
.btn-primary { background: var(--primary); border-color: var(--primary); }
.btn-primary:hover, .btn-primary:focus { background: var(--primary-600); border-color: var(--primary-600); }
.btn-outline-primary { color: var(--primary); border-color: var(--primary); }
.btn-outline-primary:hover { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-dark { background: var(--dark); border-color: var(--dark); }
.text-primary { color: var(--primary) !important; }
.bg-primary { background-color: var(--primary) !important; }
.badge.bg-primary { background: var(--primary-50) !important; color: var(--primary); }

.form-control, .form-select {
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: .42rem .75rem;
    font-size: 1rem;
}
.form-select { padding-inline-end: 2.25rem; }
.form-control:focus, .form-select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(79, 70, 229, .12);
}
.form-control-lg { padding: .5rem .85rem; font-size: 1.05rem; }
.form-label { font-weight: 600; font-size: .94rem; color: var(--ink); margin-bottom: .25rem; }
.form-check-input:checked { background-color: var(--primary); border-color: var(--primary); }

.alert { border-radius: var(--radius); border: 1px solid transparent; }
.card { border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.modal-content { border: 0; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.breadcrumb { font-size: 1.02rem; margin-bottom: 0; }
.nav-tabs { border-bottom: 1px solid var(--border); }
.nav-tabs .nav-link { color: var(--muted); font-weight: 600; border: 0; border-bottom: 2px solid transparent; padding: .6rem 1rem; }
.nav-tabs .nav-link.active, .nav-tabs .nav-link:hover { color: var(--primary); border-bottom-color: var(--primary); background: transparent; }

/* ==========================================================================
   Header
   ========================================================================== */

.topbar {
    background: var(--dark);
    color: #CBD5E1;
    font-size: .93rem;
}
.topbar .container { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 30px; }
.topbar a { color: #E2E8F0; }
.topbar a:hover { color: #fff; }
.topbar__links { display: flex; gap: 1.25rem; }
.topbar__promo i { color: var(--accent); margin-inline-end: .35rem; }

.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--border);
}
.site-header.is-scrolled { box-shadow: var(--shadow); }

.header-main {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-height: var(--header-h);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 800;
    font-size: 1.3rem;
    color: var(--dark);
    letter-spacing: -.03em;
    flex-shrink: 0;
}
.brand:hover { color: var(--dark); }
.brand__mark {
    width: 30px; height: 30px;
    border-radius: 8px;
    display: grid; place-items: center;
    color: #fff;
    font-size: 1.05rem;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    box-shadow: 0 4px 10px rgba(79, 70, 229, .3);
}
.brand__name span { color: var(--primary); }
.brand__logo { height: 44px; width: auto; display: block; }

.header-search { flex: 1; max-width: 560px; position: relative; }
.header-search form {
    display: flex;
    align-items: center;
    background: var(--light);
    border: 1px solid var(--border);
    border-radius: 999px;
    transition: border-color .2s, box-shadow .2s, background .2s;
}
.header-search form:focus-within { background: #fff; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(79, 70, 229, .12); }
.header-search__icon { padding-inline-start: .9rem; color: var(--muted); font-size: .99rem; }
.header-search input {
    flex: 1; min-width: 0;
    border: 0; background: transparent; outline: none;
    padding: .45rem .65rem;
    font-size: 1.05rem;
}
.header-search button {
    border: 0;
    background: var(--primary);
    color: #fff;
    font-weight: 600;
    font-size: .99rem;
    padding: .35rem 1rem;
    margin: 3px;
    border-radius: 999px;
    transition: background .2s;
}
.header-search button:hover { background: var(--primary-600); }

.search-results {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-start: 0; inset-inline-end: 0;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    max-height: 420px;
    overflow-y: auto;
    display: none;
    z-index: 1050;
}
.search-results.is-open { display: block; }
.search-results a {
    display: flex; align-items: center; gap: .85rem;
    padding: .65rem 1rem;
    color: var(--ink);
    border-bottom: 1px solid var(--light);
}
.search-results a:hover, .search-results a.is-active { background: var(--primary-50); }
.search-results img { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; background: var(--light); }
.search-results__title { font-weight: 600; font-size: 1.05rem; line-height: 1.3; }
.search-results__meta { font-size: .91rem; color: var(--muted); }
.search-results__price { margin-inline-start: auto; font-weight: 700; color: var(--primary); white-space: nowrap; }
.search-results__empty { padding: 1.25rem; text-align: center; color: var(--muted); font-size: 1.05rem; }
.search-results__all { display: block; text-align: center; padding: .75rem; font-weight: 600; font-size: 1.02rem; }

.header-actions { display: flex; align-items: center; gap: .35rem; margin-inline-start: auto; }
.header-action {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: .3rem .55rem;
    border-radius: 8px;
    color: var(--ink);
    font-size: .82rem;
    font-weight: 600;
    background: none;
    border: 0;
}
.header-action i { font-size: 1.13rem; }
.header-action:hover { color: var(--primary); background: var(--primary-50); }
.header-action .count {
    position: absolute;
    top: 0; inset-inline-end: 4px;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: .72rem;
    line-height: 14px;
    text-align: center;
    border: 2px solid #fff;
}
.header-action .count:empty, .header-action .count[data-count="0"] { display: none; }

.account-menu .dropdown-menu {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: .5rem;
    min-width: 220px;
    margin-top: .5rem !important;
}
.account-menu .dropdown-item { border-radius: 8px; padding: .55rem .8rem; font-size: 1.05rem; }
.account-menu .dropdown-item i { width: 20px; color: var(--muted); }
.account-menu .dropdown-item:hover { background: var(--primary-50); color: var(--primary); }
.account-menu .dropdown-header { font-size: .93rem; }

.menu-toggle {
    display: none;
    border: 0;
    background: var(--light);
    width: 36px; height: 36px;
    border-radius: 8px;
    font-size: 1.17rem;
    color: var(--ink);
}

/* Primary navigation */
.main-nav { border-top: 1px solid var(--border); }
.main-nav .container { display: flex; align-items: center; gap: .25rem; }
.main-nav__link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .55rem .75rem;
    color: var(--ink);
    font-size: 1.03rem;
    font-weight: 500;
    position: relative;
    white-space: nowrap;
}
.main-nav__link i { color: var(--muted); font-size: .99rem; }
.main-nav__link:hover, .main-nav__link.active { color: var(--primary); }
.main-nav__link:hover i, .main-nav__link.active i { color: var(--primary); }
.main-nav__link.active::after {
    content: '';
    position: absolute;
    inset-inline-start: .75rem; inset-inline-end: .75rem; bottom: -1px;
    height: 2px;
    background: var(--primary);
    border-radius: 2px;
}
.main-nav__link--deal { color: var(--danger); }
.main-nav__link--deal i { color: var(--danger); }
.main-nav__right { margin-inline-start: auto; display: flex; }

.cat-menu { position: relative; }
.cat-menu__btn {
    display: inline-flex; align-items: center; gap: .55rem;
    background: var(--primary);
    color: #fff;
    border: 0;
    font-weight: 600;
    font-size: .99rem;
    padding: .4rem .85rem;
    border-radius: 8px;
    margin: .3rem 0;
    margin-inline-end: .6rem;
}
.cat-menu__btn:hover { background: var(--primary-600); color: #fff; }
.cat-menu__panel {
    position: absolute;
    top: calc(100% + 2px);
    inset-inline-start: 0;
    width: min(660px, 90vw);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 1rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .25rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: all .18s ease;
    z-index: 1040;
}
.cat-menu:hover .cat-menu__panel, .cat-menu:focus-within .cat-menu__panel { opacity: 1; visibility: visible; transform: translateY(0); }
.cat-menu__item {
    display: flex; align-items: center; gap: .7rem;
    padding: .55rem .7rem;
    border-radius: 10px;
    color: var(--ink);
}
.cat-menu__item:hover { background: var(--primary-50); color: var(--primary); }
.cat-menu__icon {
    width: 30px; height: 30px; flex-shrink: 0;
    border-radius: 8px;
    display: grid; place-items: center;
    font-size: .99rem;
    background: var(--primary-50);
    color: var(--primary);
}
.cat-menu__name { font-weight: 600; font-size: 1.02rem; line-height: 1.2; }
.cat-menu__count { font-size: .87rem; color: var(--muted); }
.cat-menu__all { grid-column: 1 / -1; text-align: center; padding: .6rem; margin-top: .25rem; border-top: 1px solid var(--border); font-weight: 600; font-size: 1.02rem; }

/* Mobile offcanvas menu */
.mobile-menu { max-width: 320px; }
.mobile-menu .offcanvas-header { border-bottom: 1px solid var(--border); }
.mobile-menu__section { padding: .75rem 0; border-bottom: 1px solid var(--border); }
.mobile-menu__title { font-size: .84rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; padding: 0 1rem .4rem; }
.mobile-menu__link { display: flex; align-items: center; gap: .8rem; padding: .6rem 1rem; color: var(--ink); font-weight: 500; }
.mobile-menu__link i { width: 20px; text-align: center; color: var(--muted); }
.mobile-menu__link:hover, .mobile-menu__link.active { background: var(--primary-50); color: var(--primary); }

/* ==========================================================================
   Layout helpers
   ========================================================================== */

.section { padding: 1.5rem 0; }
.section--tight { padding: .75rem 0; }
.section--white { background: #fff; }
.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .75rem;
    flex-wrap: wrap;
}
.section-title { font-size: 1.2rem; font-weight: 800; margin: 0; }
.section-subtitle { color: var(--muted); margin: .1rem 0 0; font-size: .95rem; }
.link-more { font-weight: 600; font-size: .99rem; white-space: nowrap; }
.link-more i { transition: transform .2s; margin-inline-start: .25rem; }
.link-more:hover i { transform: translateX(3px); }

.surface {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1rem;
    box-shadow: var(--shadow-sm);
}
.surface + .surface { margin-top: .85rem; }
.surface__title { font-size: 1.05rem; font-weight: 700; margin-bottom: .75rem; display: flex; align-items: center; gap: .5rem; }
.surface__title i { color: var(--primary); }

/* Page hero */
.page-hero {
    position: relative;
    overflow: hidden;
    color: #fff;
    padding: 1.1rem 0 1rem;
    background: radial-gradient(1200px 300px at 85% -40%, rgba(255,255,255,.18), transparent 60%), linear-gradient(120deg, var(--primary) 0%, var(--secondary) 100%);
}
.page-hero--deals { background: radial-gradient(1200px 300px at 85% -40%, rgba(255,255,255,.2), transparent 60%), linear-gradient(120deg, #DC2626, #F97316); }
.page-hero--new { background: radial-gradient(1200px 300px at 85% -40%, rgba(255,255,255,.2), transparent 60%), linear-gradient(120deg, #059669, #10B981); }
.page-hero--dark { background: radial-gradient(1200px 300px at 85% -40%, rgba(255,255,255,.12), transparent 60%), linear-gradient(120deg, #0F172A, #334155); }
.page-hero__title { color: #fff; font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 800; margin: 0; display: flex; align-items: center; gap: .6rem; }
.page-hero__title i { opacity: .9; font-size: .85em; }
.page-hero__subtitle { margin: .25rem 0 0; opacity: .9; font-size: .98rem; max-width: 600px; }
.page-hero__crumbs { margin-bottom: .35rem; }
.page-hero__crumbs a, .page-hero__crumbs .breadcrumb-item.active { color: rgba(255,255,255,.85); }
.page-hero__crumbs .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.6); }

/* ==========================================================================
   Product cards
   ========================================================================== */

.p-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
}
@media (min-width: 576px) { .p-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 768px) { .p-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; } }
@media (min-width: 992px) { .p-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .p-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); } .p-grid--dense { grid-template-columns: repeat(8, minmax(0, 1fr)); } }

/* Homepage rows: show whole rows only, whatever the column count */
@media (max-width: 575.98px) { .p-grid--1row > :nth-child(n+5), .p-grid--2row > :nth-child(n+7) { display: none; } }
@media (min-width: 576px) and (max-width: 767.98px) { .p-grid--1row > :nth-child(n+4), .p-grid--2row > :nth-child(n+7) { display: none; } }
@media (min-width: 768px) and (max-width: 991.98px) { .p-grid--1row > :nth-child(n+5), .p-grid--2row > :nth-child(n+9) { display: none; } }
@media (min-width: 992px) and (max-width: 1199.98px) { .p-grid--1row > :nth-child(n+7), .p-grid--2row > :nth-child(n+13) { display: none; } }

.p-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.p-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: transparent; }
.p-card__media { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--light); overflow: hidden; }
.p-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.p-card:hover .p-card__media img { transform: scale(1.05); }
.p-card__badges { position: absolute; top: .5rem; inset-inline-start: .5rem; display: flex; flex-direction: column; gap: .25rem; align-items: flex-start; }
.badge-pill { font-size: .76rem; font-weight: 700; padding: .18rem .45rem; border-radius: 999px; letter-spacing: .02em; color: #fff; }
.badge-pill--sale { background: var(--danger); }
.badge-pill--new { background: var(--success); }
.badge-pill--hot { background: var(--accent); }
.badge-pill--muted { background: var(--muted); }
.p-card__wish {
    position: absolute;
    top: .45rem; inset-inline-end: .45rem;
    width: 30px; height: 30px;
    font-size: .99rem;
    border-radius: 50%;
    border: 0;
    background: rgba(255,255,255,.95);
    color: var(--ink);
    box-shadow: var(--shadow-sm);
    display: grid; place-items: center;
    opacity: 0;
    transform: scale(.85);
    transition: all .2s ease;
}
.p-card:hover .p-card__wish, .p-card__wish:focus { opacity: 1; transform: scale(1); }
.p-card__wish:hover { color: var(--danger); }
.p-card__body { padding: .45rem .55rem .55rem; display: flex; flex-direction: column; gap: .15rem; flex: 1; }
.p-card__store { font-size: .8rem; color: var(--muted); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-card__store:hover { color: var(--primary); }
.p-card__store i { font-size: .82rem; margin-inline-end: .15rem; }
.p-card__title {
    color: var(--dark);
    font-weight: 600;
    font-size: .94rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}
.p-card__title:hover { color: var(--primary); }
.p-card__rating { min-height: 1rem; display: flex; align-items: center; gap: .25rem; }
.p-card__foot { margin-top: auto; padding-top: .15rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }

.stars { color: var(--accent); font-size: .84rem; letter-spacing: 1px; }
.stars-count { color: var(--muted); font-size: .82rem; }

.price { display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap; }
.price__now { font-size: 1.07rem; font-weight: 800; color: var(--dark); }
.price__was { font-size: .82rem; color: var(--muted); text-decoration: line-through; }

.btn-add {
    width: 28px; height: 28px; flex-shrink: 0;
    font-size: .9rem;
    border-radius: 8px;
    border: 0;
    background: var(--primary-50);
    color: var(--primary);
    display: grid; place-items: center;
    transition: all .2s ease;
}
.btn-add:hover { background: var(--primary); color: #fff; }
.btn-add:disabled { opacity: .45; pointer-events: none; }
.btn-add.is-added { background: var(--success); color: #fff; }

/* ==========================================================================
   Homepage
   ========================================================================== */

.hero { padding: .75rem 0 0; }
.hero__grid { display: grid; grid-template-columns: 2fr 1fr; gap: .75rem; }.hero__main {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    color: #fff;
    padding: clamp(1.1rem, 2.5vw, 1.75rem);
    min-height: 210px;
    display: flex; flex-direction: column; justify-content: center;
    background: radial-gradient(600px 300px at 90% 10%, rgba(255,255,255,.18), transparent 60%), linear-gradient(120deg, #312E81 0%, var(--primary) 50%, var(--secondary) 100%);
}
.hero__main::after {
    content: '';
    position: absolute;
    inset-inline-end: -60px; bottom: -60px;
    width: 200px; height: 200px;
    border-radius: 50%;
    border: 32px solid rgba(255,255,255,.08);
}
.hero__eyebrow { display: inline-flex; align-items: center; gap: .4rem; background: rgba(255,255,255,.15); padding: .2rem .6rem; border-radius: 999px; font-size: .82rem; font-weight: 600; width: fit-content; margin-bottom: .5rem; }
.hero__title { color: #fff; font-size: clamp(1.35rem, 2.4vw, 1.85rem); font-weight: 800; line-height: 1.15; margin-bottom: .45rem; max-width: 480px; letter-spacing: -.02em; }
.hero__text { font-size: 1rem; opacity: .9; max-width: 440px; margin-bottom: .9rem; }
.hero__actions { display: flex; gap: .5rem; flex-wrap: wrap; position: relative; z-index: 1; }
.hero__actions .btn-lg { padding: .45rem 1rem; font-size: 1.03rem; border-radius: 8px; }
.btn-light-solid { background: #fff; color: var(--primary); border: 0; }
.btn-light-solid:hover { background: #F1F5F9; color: var(--primary-600); }
.btn-ghost-light { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.35); }
.btn-ghost-light:hover { background: rgba(255,255,255,.22); color: #fff; }
.hero__stats { display: flex; gap: 1.25rem; margin-top: 1rem; position: relative; z-index: 1; }
.hero__stat strong { display: block; font-size: 1.05rem; font-weight: 800; }
.hero__stat span { font-size: .8rem; opacity: .8; }

.hero__side { display: grid; grid-template-rows: 1fr 1fr; gap: .75rem; }
.promo-tile {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-lg);
    padding: .85rem 1rem;
    display: flex; flex-direction: column; justify-content: flex-end;
    min-height: 95px;
    color: var(--dark);
}
.promo-tile--amber { background: linear-gradient(135deg, #FEF3C7, #FDE68A); }
.promo-tile--green { background: linear-gradient(135deg, #D1FAE5, #A7F3D0); }
.promo-tile__icon { position: absolute; inset-inline-end: .85rem; top: .75rem; font-size: 1.9rem; opacity: .2; }
.promo-tile__label { font-size: .76rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; opacity: .7; }
.promo-tile__title { font-size: 1.02rem; font-weight: 800; margin: .1rem 0 .3rem; }
.promo-tile__link { font-weight: 700; color: var(--dark); font-size: .93rem; }
.promo-tile__link:hover { color: var(--primary); }

.perks { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
.perk { display: flex; align-items: center; gap: .6rem; padding: .5rem .75rem; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); }
.perk__icon { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--primary-50); color: var(--primary); font-size: .95rem; flex-shrink: 0; }
.perk strong { display: block; font-size: .93rem; color: var(--dark); line-height: 1.25; }
.perk span { font-size: .8rem; color: var(--muted); }

.cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: .55rem; }
.cat-card {
    display: flex; flex-direction: column; align-items: center; text-align: center; gap: .3rem;
    padding: .6rem .45rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--ink);
    transition: all .2s ease;
}
.cat-card:hover { border-color: var(--primary); color: var(--primary); transform: translateY(-3px); box-shadow: var(--shadow); }
.cat-card__icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: .95rem; background: var(--primary-50); color: var(--primary); transition: all .2s; }
.cat-card:hover .cat-card__icon { background: var(--primary); color: #fff; }
.cat-card__name { font-weight: 600; font-size: .88rem; line-height: 1.2; }
.cat-card__count { font-size: .76rem; color: var(--muted); }

.deal-strip {
    border-radius: var(--radius-lg);
    padding: .85rem;
    background: linear-gradient(120deg, #FFF1F2, #FFF7ED);
    border: 1px solid #FED7AA;
}
/* Homepage spotlight: featured + top selling panels */
.spotlight { display: grid; grid-template-columns: 1fr; gap: .75rem; }
@media (min-width: 992px) { .spotlight { grid-template-columns: 5fr 2fr; } .spotlight--single { grid-template-columns: 1fr; } }
.spot-panel { min-width: 0; padding: .85rem; border-radius: var(--radius-lg); border: 1px solid var(--border); background: #fff; }
.spot-panel--featured { background: linear-gradient(180deg, var(--primary-50) 0%, #fff 60%); border-color: var(--primary-100); }
.spot-panel--top { background: linear-gradient(180deg, #FFF3DD 0%, #fff 60%); border-color: #F9E0B3; }
.spot-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: .7rem; }
.spot-panel__title { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: 1.15rem; font-weight: 800; }
.spot-panel__icon { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-size: .85rem; color: #fff; background: var(--primary); }
.spot-panel--top .spot-panel__icon { background: linear-gradient(135deg, #F97316, #EF4444); }
.spot-panel__sub { margin: .15rem 0 0; color: var(--muted); font-size: .88rem; }
.spot-panel__more { flex-shrink: 0; font-size: .9rem; font-weight: 700; white-space: nowrap; }
.spot-panel__more i { font-size: .7em; margin-inline-start: .2rem; }
.spot-panel--top .spot-panel__more { color: #C2410C; }

.spot-tiles { display: grid; gap: .6rem; }
.spot-tiles--featured { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.spot-tiles--featured > :nth-child(n+6) { display: none; }
.spot-tiles--top { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (min-width: 992px) {
    .spot-tiles--top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .spot-tiles--top > :nth-child(n+3) { display: none; }
    .spotlight--single .spot-tiles--top { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .spotlight--single .spot-tiles--top > :nth-child(n+3) { display: flex; }
}
@media (max-width: 767.98px) {
    .spot-tiles { grid-auto-flow: column; grid-template-columns: none !important; grid-auto-columns: 40%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 2px; }
    .spot-tiles::-webkit-scrollbar { display: none; }
    .spot-tiles > * { display: flex !important; scroll-snap-align: start; }
}

.p-tile { display: flex; flex-direction: column; gap: .2rem; min-width: 0; color: var(--ink); }
.p-tile:hover { color: var(--ink); }
.p-tile__media { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius); background: #fff; border: 1px solid var(--border); }
.p-tile__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.p-tile:hover .p-tile__media img { transform: scale(1.06); }
.p-tile__off { position: absolute; inset-inline-start: .4rem; top: .4rem; padding: .12rem .4rem; border-radius: 999px; background: var(--danger); color: #fff; font-size: .74rem; font-weight: 700; }
.p-tile__title { margin-top: .25rem; font-size: .86rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-tile:hover .p-tile__title { color: var(--primary); }
.p-tile__price { font-size: 1.05rem; font-weight: 800; color: var(--dark); line-height: 1.2; }
.p-tile__price s { margin-inline-start: .3rem; font-size: .78rem; font-weight: 500; color: var(--muted); }
.p-tile__meta { font-size: .78rem; color: var(--muted); }
.p-tile__meta .fa-star { color: #F59E0B; }
.p-tile__meta--hot { color: #C2410C; font-weight: 600; }

.countdown { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; color: var(--dark); }
.countdown__box { background: var(--dark); color: #fff; border-radius: 6px; padding: .2rem .4rem; min-width: 30px; font-size: .99rem; text-align: center; font-variant-numeric: tabular-nums; }
.countdown__sep { color: var(--danger); }
.page-hero .countdown { color: #fff; }
.page-hero .countdown__box { background: rgba(0,0,0,.25); }
.page-hero .countdown__sep { color: #fff; }

.store-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .75rem; }
.store-card {
    display: block;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    color: var(--ink);
    transition: all .25s ease;
}
.store-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); color: var(--ink); border-color: transparent; }
.store-card__cover { height: 44px; background: linear-gradient(120deg, var(--primary), var(--secondary)); background-size: cover; background-position: center; }
.store-card__body { padding: 0 .75rem .7rem; text-align: center; }
.store-card__logo {
    width: 44px; height: 44px;
    margin: -22px auto .35rem;
    border-radius: 11px;
    border: 3px solid #fff;
    background: var(--dark);
    color: #fff;
    display: grid; place-items: center;
    font-weight: 800; font-size: .95rem;
    box-shadow: var(--shadow);
    overflow: hidden;
}
.store-card__name { font-size: 1.02rem; font-weight: 700; margin-bottom: .1rem; color: var(--dark); }
.store-card__logo img { width: 100%; height: 100%; object-fit: cover; }
.store-card__plan { font-size: .8rem; color: var(--muted); }
.store-card__stats { display: flex; justify-content: center; gap: 1rem; margin-top: .5rem; padding-top: .5rem; border-top: 1px solid var(--border); }
.store-card__stats strong { display: block; font-size: .98rem; color: var(--dark); }
.store-card__stats span { font-size: .76rem; color: var(--muted); }

.newsletter {
    border-radius: var(--radius-lg);
    padding: clamp(1rem, 2.5vw, 1.4rem);
    background: radial-gradient(600px 240px at 100% 0, rgba(255,255,255,.12), transparent 60%), linear-gradient(120deg, var(--dark), #1E1B4B);
    color: #fff;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 1.5rem;
    align-items: center;
}
.newsletter h2 { color: #fff; font-weight: 800; font-size: clamp(1.1rem, 1.8vw, 1.3rem); margin-bottom: .25rem; }
.newsletter p { color: #CBD5E1; margin: 0; }
.newsletter form { display: flex; gap: .4rem; background: rgba(255,255,255,.08); padding: .3rem; border-radius: 10px; border: 1px solid rgba(255,255,255,.15); }
.newsletter input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: #fff; padding: .45rem .75rem; }
.newsletter input::placeholder { color: #94A3B8; }

/* ==========================================================================
   Toolbar / filters on listing pages
   ========================================================================== */

.list-toolbar {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .5rem .8rem;
    margin-bottom: 1rem;
}
.list-toolbar__count { color: var(--muted); font-size: .99rem; }
.list-toolbar__count strong { color: var(--dark); }
.list-toolbar .form-select { width: auto; padding-top: .3rem; padding-bottom: .3rem; font-size: .98rem; }

.chip-row { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.chip {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .3rem .75rem;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--border);
    font-size: .93rem;
    font-weight: 500;
    color: var(--ink);
}
.chip:hover, .chip.active, .btn-check:checked + .chip { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-check:focus-visible + .chip { box-shadow: 0 0 0 3px var(--primary-100); }
label.chip { cursor: pointer; }

.empty-state { text-align: center; padding: 1.75rem 1rem; background: #fff; border: 1px dashed var(--border); border-radius: var(--radius-lg); }
.empty-state__icon { width: 52px; height: 52px; margin: 0 auto .7rem; border-radius: 50%; display: grid; place-items: center; background: var(--primary-50); color: var(--primary); font-size: 1.6rem; }
.empty-state h3 { font-size: 1.1rem; margin-bottom: .4rem; }
.empty-state p { color: var(--muted); margin-bottom: 1.1rem; }

/* ==========================================================================
   Product page
   ========================================================================== */

.pdp { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 600px); gap: 1.5rem; align-items: start; }
.pdp-gallery { position: sticky; top: calc(var(--header-h) + 60px); }
.pdp-gallery__main { aspect-ratio: 1 / 1; border-radius: var(--radius-lg); overflow: hidden; background: #fff; border: 1px solid var(--border); }
.pdp-gallery__main img { width: 100%; height: 100%; object-fit: cover; }
.pdp-gallery__thumbs { display: flex; gap: .45rem; margin-top: .6rem; flex-wrap: wrap; }
.pdp-gallery__thumb { width: 52px; height: 52px; border-radius: 8px; overflow: hidden; border: 2px solid var(--border); padding: 0; background: #fff; cursor: pointer; }
.pdp-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }
.pdp-gallery__thumb.active, .pdp-gallery__thumb:hover { border-color: var(--primary); }
.pdp-info__store { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .65rem; background: var(--primary-50); color: var(--primary); border-radius: 999px; font-size: .91rem; font-weight: 600; }
.pdp-info__title { font-size: clamp(1.2rem, 1.8vw, 1.45rem); font-weight: 800; margin: .5rem 0 .3rem; line-height: 1.25; }
.pdp-info__rating { display: flex; align-items: center; gap: .4rem; color: var(--muted); font-size: .99rem; }
.pdp-info__rating .stars { font-size: .99rem; }
.pdp-price { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin: .6rem 0; padding: .4rem .7rem; background: var(--light); border-radius: var(--radius); }
.pdp-price__now { font-size: 1.4rem; font-weight: 800; color: var(--dark); }
.pdp-price__was { font-size: 1.11rem; color: var(--muted); text-decoration: line-through; }
.pdp-price__save { background: #FEE2E2; color: #B91C1C; font-weight: 700; font-size: .87rem; padding: .2rem .5rem; border-radius: 999px; }
.pdp-desc { color: var(--muted); line-height: 1.7; }
.pdp-label { font-weight: 700; font-size: .98rem; margin-bottom: .4rem; display: block; }
.variant-list { display: flex; flex-wrap: wrap; gap: .4rem; }
.variant-chip { border: 1.5px solid var(--border); background: #fff; border-radius: 8px; padding: .35rem .75rem; font-size: .96rem; font-weight: 500; cursor: pointer; transition: all .15s; }
.variant-chip:hover { border-color: var(--primary); }
.variant-chip.selected { border-color: var(--primary); background: var(--primary-50); color: var(--primary); }
.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--border); border-radius: 8px; overflow: hidden; background: #fff; }
.qty button { width: 34px; height: 38px; border: 0; background: transparent; color: var(--ink); font-size: .99rem; }
.qty button:hover { background: var(--light); color: var(--primary); }
.qty input { width: 44px; height: 38px; border: 0; text-align: center; font-weight: 700; outline: none; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.qty--sm button { width: 28px; height: 30px; }
.qty--sm input { width: 36px; height: 30px; font-size: .99rem; }
.pdp-buy { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin: .85rem 0; }
.pdp-buy .btn { height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; }
.pdp-buy .btn-primary { flex: 1; min-width: 160px; }
.pdp-assure { display: flex; flex-wrap: wrap; gap: .4rem; }
.pdp-assure div { display: inline-flex; align-items: center; gap: .35rem; padding: .25rem .6rem; border: 1px solid var(--border); border-radius: 999px; font-size: .8rem; color: var(--muted); background: #fff; white-space: nowrap; }
.pdp-assure i { font-size: .82rem; color: var(--primary); }
.review-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.review-side { display: flex; flex-direction: column; gap: .75rem; }
.review-summary { display: flex; align-items: center; gap: .75rem; }
.review-summary__score { font-size: 2.2rem; font-weight: 800; line-height: 1; color: var(--dark); }
.review-box { display: block; padding: .8rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--light); }
.star-input { display: inline-flex; flex-direction: row-reverse; gap: .15rem; }
.star-input input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.star-input label { font-size: 1.45rem; color: #D6D3D1; cursor: pointer; transition: color .15s, transform .15s; }
.star-input label:hover { transform: scale(1.1); }
.star-input label:hover, .star-input label:hover ~ label, .star-input input:checked ~ label { color: #F59E0B; }
.star-input input:focus-visible + label { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 4px; }
@media (max-width: 767.98px) { .review-layout { grid-template-columns: 1fr; } }
.pdp-meta { margin-top: 1.1rem; font-size: .98rem; color: var(--muted); }
.pdp-meta dt { color: var(--ink); font-weight: 600; }
.tag { display: inline-block; background: var(--light); border: 1px solid var(--border); border-radius: 999px; padding: .15rem .6rem; font-size: .91rem; margin: 0 0 .25rem; margin-inline-end: .25rem; color: var(--ink); }
.review { display: flex; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--border); }
.review:last-of-type { border-bottom: 0; }
.review.is-hidden { display: none; }
.review__body { flex: 1 1 auto; min-width: 0; }
.review__photos { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.review__photo { width: 72px; height: 72px; padding: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--light); cursor: zoom-in; }
.review__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.review__photo:hover img { transform: scale(1.06); }
.review__reply { margin-top: .6rem; padding: .55rem .75rem; border-inline-start: 3px solid var(--primary); background: var(--light); border-radius: 6px; font-size: .95rem; }
.review__reply p { color: var(--ink); margin-top: .2rem; }
.review-filters { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .4rem; }
.review-chip { border: 1px solid var(--border); background: #fff; color: var(--ink); border-radius: 999px; padding: .2rem .7rem; font-size: .9rem; }
.review-chip .fa-star, .review-bar .fa-star { color: #F59E0B; font-size: .8em; }
.review-chip:hover { border-color: var(--primary); }
.review-chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.review-chip.active .fa-star { color: #fff; }
.review-bars { display: flex; flex-direction: column; gap: .2rem; }
.review-bar { display: grid; grid-template-columns: 2.4rem 1fr 2rem; align-items: center; gap: .5rem; padding: .1rem .3rem; border: 0; border-radius: 6px; background: none; font-size: .88rem; color: var(--ink); text-align: start; }
.review-bar:not(:disabled):hover, .review-bar.active { background: var(--light); }
.review-bar:disabled { opacity: .55; }
.review-bar__track { height: 7px; border-radius: 999px; background: var(--border); overflow: hidden; }
.review-bar__track span { display: block; height: 100%; background: #F59E0B; border-radius: inherit; }
.review-bar__count { color: var(--muted); text-align: end; }
.review-photos__list { display: flex; flex-wrap: wrap; gap: .4rem; }
.review-photos__list:not(:empty) { margin-bottom: .4rem; }
.review-photos__item { position: relative; width: 56px; height: 56px; border-radius: 8px; overflow: hidden; border: 1px solid var(--border); }
.review-photos__item img { width: 100%; height: 100%; object-fit: cover; }
.review-photos__remove { position: absolute; top: 2px; inset-inline-end: 2px; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .65); color: #fff; font-size: .7rem; line-height: 20px; }
.review-photos__add { display: flex; align-items: center; justify-content: center; gap: .45rem; width: 100%; padding: .45rem; border: 1px dashed var(--border); border-radius: var(--radius); background: #fff; color: var(--muted); font-size: .9rem; cursor: pointer; }
.review-photos__add:hover, .review-photos__add:focus-within { border-color: var(--primary); color: var(--primary); }
.review-viewer { position: relative; background: #111; border: 0; min-height: 200px; display: grid; place-items: center; }
.review-viewer img { max-width: 100%; max-height: 80vh; object-fit: contain; }
.review-viewer__close, .review-viewer__nav { position: absolute; z-index: 2; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(17, 17, 17, .7); color: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.review-viewer__close:hover, .review-viewer__nav:hover { background: #111; }
.review-viewer__close { top: .6rem; inset-inline-end: .6rem; }
.review-viewer__nav { top: 50%; transform: translateY(-50%); }
.review-viewer__nav--prev { inset-inline-start: .6rem; }
.review-viewer__nav--next { inset-inline-end: .6rem; }
.review__avatar { width: 34px; height: 34px; font-size: .99rem; border-radius: 50%; background: var(--primary-50); color: var(--primary); display: grid; place-items: center; font-weight: 700; flex-shrink: 0; }

/* ==========================================================================
   Cart & checkout
   ========================================================================== */

.cart-layout { display: grid; grid-template-columns: 1fr 310px; gap: 1rem; align-items: start; }
.cart-line { display: grid; grid-template-columns: 64px 1fr auto auto auto; gap: .8rem; align-items: center; padding: .75rem 0; border-bottom: 1px solid var(--border); }
.cart-line:last-child { border-bottom: 0; }
.cart-line__img { width: 64px; height: 64px; border-radius: 8px; object-fit: cover; background: var(--light); border: 1px solid var(--border); }
.cart-line__title { font-weight: 600; font-size: 1.05rem; color: var(--dark); display: block; line-height: 1.3; }
.cart-line__title:hover { color: var(--primary); }
.cart-line__meta { font-size: .89rem; color: var(--muted); margin-top: .2rem; }
.cart-line__total { font-weight: 800; font-size: 1.07rem; min-width: 76px; text-align: end; color: var(--dark); }
.cart-line__remove { border: 0; background: transparent; color: var(--muted); width: 30px; height: 30px; border-radius: 8px; font-size: .99rem; }
.cart-line__remove:hover { background: #FEE2E2; color: var(--danger); }

.summary { position: sticky; top: calc(var(--header-h) + 60px); }
.summary__row { display: flex; justify-content: space-between; padding: .4rem 0; font-size: 1.03rem; color: var(--muted); }
.summary__row strong, .summary__row span:last-child { color: var(--ink); }
.summary__row--discount span:last-child { color: var(--success); font-weight: 600; }
.summary__total { display: flex; justify-content: space-between; align-items: baseline; padding-top: .75rem; margin-top: .4rem; border-top: 1px dashed var(--border); font-weight: 800; font-size: 1.1rem; color: var(--dark); }
.summary__note { font-size: .89rem; color: var(--muted); display: flex; align-items: center; gap: .4rem; justify-content: center; margin-top: .75rem; }
.ship-progress { background: var(--primary-50); border-radius: 8px; padding: .6rem .8rem; font-size: .93rem; margin-bottom: .75rem; color: var(--primary-600); }
.ship-progress .progress { height: 6px; margin-top: .5rem; background: #fff; }
.ship-progress .progress-bar { background: var(--primary); }
.summary-item { display: flex; gap: .6rem; align-items: center; padding: .45rem 0; font-size: 1rem; }
.summary-item img { width: 42px; height: 42px; border-radius: 8px; object-fit: cover; border: 1px solid var(--border); }
.summary-item__qty { position: relative; }
.summary-item__qty span { position: absolute; top: -6px; inset-inline-end: -6px; background: var(--muted); color: #fff; font-size: .72rem; font-weight: 700; min-width: 18px; height: 18px; border-radius: 999px; display: grid; place-items: center; }

.checkout-steps { display: flex; align-items: center; gap: .4rem; margin-bottom: 1.1rem; font-size: .96rem; flex-wrap: wrap; }
.checkout-steps span { display: inline-flex; align-items: center; gap: .4rem; color: var(--muted); font-weight: 600; }
.checkout-steps span b { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--border); color: var(--muted); font-size: .87rem; }
.checkout-steps span.done b, .checkout-steps span.current b { background: var(--primary); color: #fff; }
.checkout-steps span.current { color: var(--dark); }
.checkout-steps i { color: var(--border); font-size: .82rem; }

.pay-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.pay-option { display: flex; align-items: center; gap: .6rem; border: 1.5px solid var(--border); border-radius: 8px; padding: .55rem .7rem; cursor: pointer; margin-bottom: 0; font-size: 1rem; line-height: 1.3; transition: all .15s; }
.pay-option:hover { border-color: var(--primary); }
.pay-option:has(input:checked) { border-color: var(--primary); background: var(--primary-50); }
.pay-option input { accent-color: var(--primary); width: 16px; height: 16px; }
.pay-option i { font-size: 1.17rem; color: var(--primary); width: 20px; text-align: center; }
.pay-option small { display: block; color: var(--muted); font-size: .86rem; }

/* ==========================================================================
   Auth pages
   ========================================================================== */

.auth-wrap { padding: 1.5rem 0; }
.auth-card { max-width: 380px; margin: 0 auto; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 1.3rem; }
.auth-card--wide { max-width: 500px; }
.auth-card__icon { width: 40px; height: 40px; border-radius: 11px; margin: 0 auto .55rem; display: grid; place-items: center; background: var(--primary-50); color: var(--primary); font-size: 1.15rem; }
.auth-card h1 { font-size: 1.2rem; text-align: center; margin-bottom: .2rem; }
.auth-card__sub { text-align: center; color: var(--muted); font-size: .96rem; margin-bottom: 1rem; }
.auth-card__foot { text-align: center; margin-top: .9rem; padding-top: .75rem; border-top: 1px solid var(--border); color: var(--muted); font-size: 1rem; }
.input-icon { position: relative; }
.input-icon > i { position: absolute; inset-inline-start: .85rem; top: 50%; transform: translateY(-50%); color: var(--muted); font-size: .99rem; pointer-events: none; }
.input-icon .form-control { padding-inline-start: 2.2rem; }

/* Success page */
.success-mark { width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 50%; display: grid; place-items: center; background: #D1FAE5; color: var(--success); font-size: 1.7rem; animation: pop .45s ease-out; }
@keyframes pop { from { transform: scale(.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Order timeline (track page) */
.timeline { position: relative; padding: .5rem 0; }
.timeline-item { position: relative; padding-inline-start: 46px; padding-bottom: 1.25rem; }
.timeline-item::before { content: ''; position: absolute; inset-inline-start: 15px; top: 32px; bottom: 0; width: 2px; background: var(--border); }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item:last-child::before { display: none; }
.timeline-icon { position: absolute; inset-inline-start: 0; top: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-size: .93rem; background: var(--light); border: 2px solid var(--border); color: var(--muted); }
.timeline-item.completed .timeline-icon { background: var(--success); border-color: var(--success); color: #fff; }
.timeline-item.completed::before { background: var(--success); }
.timeline-item.active .timeline-icon { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 0 0 4px var(--primary-50); }
.timeline-item.cancelled .timeline-icon { background: var(--danger); border-color: var(--danger); color: #fff; }

/* Gift cards */
.giftcard-preview { position: relative; overflow: hidden; min-height: 150px; padding: 1rem; border-radius: var(--radius-lg); color: #fff; box-shadow: var(--shadow-lg); display: flex; flex-direction: column; transition: background .3s; }
.giftcard-preview::after { content: ''; position: absolute; width: 260px; height: 260px; inset-inline-end: -80px; bottom: -120px; border-radius: 50%; background: rgba(255,255,255,.12); }
.giftcard-preview__amount { font-size: 1.9rem; font-weight: 800; margin-top: auto; letter-spacing: -.02em; }
.giftcard-preview__message { opacity: .9; max-width: 80%; overflow-wrap: anywhere; }
.giftcard-preview__to { font-size: .99rem; opacity: .8; margin-top: .25rem; }
.giftcard-design { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: .6rem .4rem; border-radius: var(--radius); color: #fff; font-size: .89rem; font-weight: 600; cursor: pointer; border: 3px solid transparent; opacity: .8; transition: all .15s; }
.giftcard-design i { font-size: 1.13rem; }
.giftcard-design:hover { opacity: 1; }
.btn-check:checked + .giftcard-design { opacity: 1; border-color: var(--ink); box-shadow: var(--shadow); }
.btn-check:focus-visible + .giftcard-design { outline: 3px solid var(--primary-100); }
.steps-list { list-style: none; counter-reset: step; padding: 0; margin: 0; }
.steps-list li { counter-increment: step; position: relative; padding-inline-start: 2.2rem; margin-bottom: .75rem; }
.steps-list li:last-child { margin-bottom: 0; }
.steps-list li::before { content: counter(step); position: absolute; inset-inline-start: 0; top: 0; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-50); color: var(--primary); font-weight: 700; font-size: .87rem; }
.steps-list strong { display: block; font-size: 1.03rem; }
.steps-list span { font-size: .91rem; color: var(--muted); }

/* Membership plans */
.plan-card { position: relative; overflow: hidden; height: 100%; display: flex; flex-direction: column; padding: 1.1rem 1rem; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); transition: transform .2s, box-shadow .2s; }
.plan-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.plan-card.is-featured { border: 2px solid var(--primary); box-shadow: var(--shadow); }
.plan-card__ribbon { position: absolute; top: 1rem; inset-inline-end: 1rem; background: var(--primary); color: #fff; font-size: .84rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: .3rem .7rem; border-radius: 999px; }
.plan-card__name { font-size: 1.17rem; font-weight: 700; color: var(--primary); margin-bottom: .5rem; }
.plan-card__price { font-size: 1.8rem; font-weight: 800; color: var(--dark); letter-spacing: -.02em; line-height: 1.1; }
.plan-card__price small { font-size: .99rem; font-weight: 500; color: var(--muted); letter-spacing: 0; }
.plan-card__trial { display: inline-block; margin: .75rem 0; padding: .25rem .65rem; border-radius: 999px; background: var(--primary-50); color: var(--primary); font-size: .89rem; font-weight: 600; align-self: flex-start; }
.plan-card__features { list-style: none; padding: 0; margin: .4rem 0 1.2rem; }
.plan-card__features li { display: flex; gap: .55rem; padding: .4rem 0; border-bottom: 1px solid var(--border); font-size: .99rem; }
.plan-card__features li:last-child { border-bottom: 0; }
.plan-card__features i { color: var(--success); margin-top: .2rem; }

/* Compare */
.compare-table th, .compare-table td { padding: .65rem .8rem; vertical-align: top; min-width: 180px; font-size: 1.03rem; border-color: var(--border); }
.compare-table .compare-table__label { min-width: 120px; width: 135px; background: var(--light); color: var(--muted); font-size: .99rem; font-weight: 600; position: sticky; inset-inline-start: 0; z-index: 1; }
.compare-table tbody tr:hover td { background: #FCFCFF; }
.compare-product { position: relative; }
.compare-product img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius); border: 1px solid var(--border); margin-bottom: .75rem; }
.compare-product__title { display: block; color: var(--ink); font-weight: 600; font-size: 1.03rem; line-height: 1.35; }
.compare-product__title:hover { color: var(--primary); }
.compare-product__remove { position: absolute; top: .5rem; inset-inline-end: .5rem; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--muted); box-shadow: var(--shadow); z-index: 2; }
.compare-product__remove:hover { color: var(--danger); }

/* Account */
.stat-tile { display: flex; align-items: center; gap: .7rem; height: 100%; padding: .75rem .9rem; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); color: var(--ink); transition: border-color .2s, box-shadow .2s; }
a.stat-tile:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); color: var(--ink); }
.stat-tile__icon { width: 36px; height: 36px; flex-shrink: 0; border-radius: 9px; font-size: 1.05rem; display: grid; place-items: center; background: var(--primary-50); color: var(--primary); }
.stat-tile__value { display: block; font-size: 1.13rem; font-weight: 800; line-height: 1.2; }
.stat-tile__label { display: block; font-size: .87rem; color: var(--muted); }
.order-row { display: grid; grid-template-columns: 1fr auto auto auto auto; align-items: center; gap: .8rem; padding: .65rem .85rem; font-size: 1.03rem; border: 1px solid var(--border); border-radius: var(--radius); transition: border-color .2s; }
.order-row:hover { border-color: var(--primary); }
.avatar-circle { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: #fff; font-weight: 700; font-size: 1.17rem; }
.min-w-0 { min-width: 0; }
.address-box { padding: .75rem; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: .6rem; font-size: 1.03rem; }
.address-box:last-child { margin-bottom: 0; }
.address-box.is-default { border-color: var(--success); background: #F0FDF4; }
.my-review { display: flex; gap: .85rem; padding: .85rem 0; border-top: 1px solid var(--border); }
.my-review:first-child { border-top: 0; padding-top: 0; }
.my-review__product img { width: 64px; height: 64px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); background: var(--light); }
.my-review__body { flex: 1 1 auto; min-width: 0; }
.my-review .review__photo { display: block; }
.to-review { padding: .75rem; margin-bottom: 1rem; border-radius: var(--radius); background: var(--primary-50); }
.to-review__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
.to-review__item { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: .55rem; align-items: center; padding: .45rem; border-radius: 8px; background: #fff; border: 1px solid var(--border); color: var(--ink); text-decoration: none; transition: border-color .2s; }
.to-review__item:hover { border-color: var(--primary); }
.to-review__item img { grid-row: span 2; width: 44px; height: 44px; object-fit: cover; border-radius: 6px; }
.to-review__title { font-size: .88rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.to-review__cta { font-size: .8rem; color: var(--primary); }
@media (max-width: 767.98px) {
    .order-row { grid-template-columns: 1fr auto; gap: .5rem 1rem; }
}

/* Inner pages: narrower content, tighter gutters and spacing */
:is(.page-cart, .page-checkout, .page-account, .page-support, .page-giftcards, .page-track, .page-return, .page-order-success, .page-subscriptions, .page-sell) .site-main .container { max-width: 1100px; }
.plan-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.plan-pick__price { font-weight: 800; color: var(--dark); white-space: nowrap; }
.plan-pick__price small { display: inline; font-weight: 500; }
@media (max-width: 575.98px) { .plan-pick { grid-template-columns: 1fr; } }
.site-main > .container.py-4 { padding-top: 1.1rem !important; padding-bottom: 1.1rem !important; }
.site-main > .container.py-5 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
.site-main h1.h3 { font-size: 1.35rem; }
.site-main h1.h3.mb-4 { margin-bottom: .85rem !important; }
.site-main .row.g-4 { --bs-gutter-x: 1rem; --bs-gutter-y: 1rem; }
.site-main .row.g-3 { --bs-gutter-x: .85rem; --bs-gutter-y: .7rem; }
.site-main .surface.mb-4, .site-main .giftcard-preview.mb-4 { margin-bottom: .85rem !important; }
.site-main .surface .row.mb-4 { margin-bottom: 1rem !important; }
.site-main .surface .btn-lg.mt-4 { margin-top: 1rem !important; }
.page-product .site-main .mt-5 { margin-top: 1.5rem !important; }
.site-main .display-6 { font-size: 1.75rem; }
.site-main .accordion-button { padding-top: .65rem; padding-bottom: .65rem; font-size: .98rem; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer { background: var(--dark); color: #94A3B8; margin-top: 2rem; font-size: .95rem; }
.footer-perks { border-bottom: 1px solid rgba(255,255,255,.08); }
.footer-perks .container { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; padding-top: .85rem; padding-bottom: .85rem; }
.footer-perk { display: flex; align-items: center; gap: .65rem; }
.footer-perk i { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: rgba(255,255,255,.06); color: #A5B4FC; font-size: 1.05rem; flex-shrink: 0; }
.footer-perk strong { display: block; color: #fff; font-size: .98rem; }
.footer-perk span { font-size: .87rem; }
.footer-main { padding: 1.5rem 0 1rem; }
.footer-brand .brand { color: #fff; background: #fff; padding: .35rem .75rem; border-radius: 10px; }
.footer-brand p { margin: .75rem 0 1rem; max-width: 300px; line-height: 1.6; }
.footer-title { color: #fff; font-size: 1.03rem; font-weight: 700; margin-bottom: .75rem; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .45rem; }
.footer-links a { color: #94A3B8; transition: color .15s; }
.footer-links a:hover { color: #fff; }
.socials { display: flex; gap: .4rem; }
.socials a { width: 32px; height: 32px; border-radius: 8px; font-size: .99rem; display: grid; place-items: center; background: rgba(255,255,255,.06); color: #E2E8F0; transition: all .2s; }
.socials a:hover { background: var(--primary); color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.08); padding: .85rem 0; font-size: .91rem; }
.footer-bottom .container { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.payments { display: flex; gap: .5rem; font-size: 1.3rem; color: #CBD5E1; }

/* Store opened as its own shop */
.shop-brand { display: inline-flex; align-items: center; gap: .6rem; min-width: 0; color: var(--dark); font-weight: 800; font-size: 1.25rem; letter-spacing: -.01em; }
.shop-brand:hover { color: var(--dark); }
.shop-brand__logo { width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius); overflow: hidden; display: grid; place-items: center; background: var(--primary); color: #fff; font-size: .95rem; font-weight: 800; }
.shop-brand__logo img { width: 100%; height: 100%; object-fit: cover; background: #fff; }
.shop-brand__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.shop-nav .main-nav__link { font-weight: 600; }
.shop-nav .dropdown-menu { border-radius: var(--radius); box-shadow: var(--shadow); border-color: var(--border); }
.shop-footer { margin-top: 2rem; }
.shop-brand--footer { color: #fff; }
.shop-brand--footer:hover { color: #fff; }
.shop-footer__blurb { margin: .75rem 0; max-width: 340px; line-height: 1.6; }
.shop-footer__contact { list-style: none; padding: 0; margin: 0; }
.shop-footer__contact li { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.shop-footer__contact i { width: 16px; color: #A5B4FC; }
.shop-footer__powered { font-size: .87rem; }
.shop-footer__powered a { color: #E2E8F0; font-weight: 600; }
.shop-footer__powered a:hover { color: #fff; }
@media (max-width: 991.98px) {
    .shop-brand { font-size: 1.1rem; }
    .shop-brand__logo { width: 34px; height: 34px; }
    .shop-brand__name { max-width: 160px; }
}

/* Toasts */
.toast-stack { position: fixed; inset-inline-end: 1rem; bottom: 1rem; z-index: 2000; display: flex; flex-direction: column; gap: .5rem; }
.toast-msg {
    display: flex; align-items: center; gap: .75rem;
    min-width: 230px; max-width: 320px;
    background: var(--dark);
    color: #fff;
    padding: .6rem .85rem;
    border-radius: 9px;
    box-shadow: var(--shadow-lg);
    font-size: .99rem;
    animation: toast-in .25s ease-out;
}
.toast-msg i { font-size: 1.1rem; }
.toast-msg--success i { color: #34D399; }
.toast-msg--error i { color: #F87171; }
.toast-msg a { color: #A5B4FC; font-weight: 600; margin-inline-start: auto; white-space: nowrap; }
.toast-msg.is-leaving { opacity: 0; transform: translateY(8px); transition: all .2s ease; }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

.back-to-top {
    position: fixed; inset-inline-start: 1rem; bottom: 1rem;
    width: 36px; height: 36px;
    border-radius: 9px;
    border: 0;
    background: #fff;
    color: var(--ink);
    box-shadow: var(--shadow);
    opacity: 0; visibility: hidden;
    transition: all .2s;
    z-index: 1500;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; }
.back-to-top:hover { background: var(--primary); color: #fff; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1199.98px) {
    .header-action span.label { display: none; }
    .header-action { padding: .45rem .55rem; }
}

@media (max-width: 991.98px) {
    :root { --header-h: 54px; }
    .topbar__links { display: none; }
    .topbar .container { justify-content: center; }
    .main-nav { display: none; }
    .menu-toggle { display: grid; place-items: center; }
    .header-main { gap: .6rem; flex-wrap: wrap; padding: .5rem 0; }
    .brand { font-size: 1.15rem; }
    .brand__mark { width: 28px; height: 28px; }
    .brand__logo { height: 38px; }
    .header-search { order: 3; flex-basis: 100%; max-width: none; }
    .header-search button { padding: .5rem .9rem; }
    .header-search button span { display: none; }
    .hero__grid { grid-template-columns: 1fr; }
    .hero__side { grid-template-rows: none; grid-template-columns: 1fr 1fr; }
    .perks { grid-template-columns: repeat(2, 1fr); }
    .pdp { grid-template-columns: 1fr; gap: 1.1rem; }
    .pdp-gallery { max-width: 300px; width: 100%; margin-inline: auto; }
    .pdp-gallery { position: static; }
    .cart-layout { grid-template-columns: 1fr; }
    .summary { position: static; }
    .newsletter { grid-template-columns: 1fr; }
    .footer-perks .container { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767.98px) {
    .section { padding: 1.1rem 0; }
    .section-title { font-size: 1.1rem; }
    .p-card__wish { opacity: 1; transform: none; width: 28px; height: 28px; }
    .hero__main { min-height: 0; }
    .hero__stats { gap: 1rem; }
    .hero__side { grid-template-columns: 1fr 1fr; }
    .promo-tile { min-height: 85px; }
    .cat-grid { grid-template-columns: repeat(4, 1fr); gap: .45rem; }
    .cat-card { padding: .5rem .3rem; }
    .cat-card__icon { width: 30px; height: 30px; font-size: .9rem; }
    .cat-card__name { font-size: .82rem; }
    .cat-card__count { display: none; }
    .cart-line { grid-template-columns: 60px 1fr auto; grid-template-areas: "img info remove" "img qty total"; row-gap: .5rem; }
    .cart-line__img { grid-area: img; width: 60px; height: 60px; }
    .cart-line__info { grid-area: info; }
    .cart-line .qty { grid-area: qty; justify-self: start; }
    .cart-line__total { grid-area: total; }
    .cart-line__remove { grid-area: remove; justify-self: end; }
    .surface { padding: .9rem; border-radius: var(--radius); }
    .pay-options { grid-template-columns: 1fr; }
    .auth-card { padding: 1.25rem 1rem; }
    .footer-perks .container { grid-template-columns: 1fr 1fr; }
    .footer-bottom .container { justify-content: center; text-align: center; }
}

@media (max-width: 479.98px) {
    .perks { grid-template-columns: 1fr 1fr; }
    .perk span { display: none; }
    .cat-grid { grid-template-columns: repeat(3, 1fr); }
    .hero__side { grid-template-columns: 1fr; }
    .header-action { padding: .5rem; }
    .brand__name { display: none; }
    .footer-perks .container { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Marketplace themes. Only on marketplace pages without a seller design, so seller colours stay their own.
   The colours come from marketplaceThemeStyles() (backend/includes/marketplace-themes.php).
   ========================================================================== */

.theme-mp .form-control:focus, .theme-mp .form-select:focus,
.theme-mp .header-search form:focus-within { box-shadow: 0 0 0 3px rgba(var(--mp-primary-rgb), .12); }
.theme-mp .form-check-input:focus { border-color: var(--mp-primary-200); box-shadow: 0 0 0 3px rgba(var(--mp-primary-rgb), .15); }
.theme-mp .brand__mark { box-shadow: 0 4px 10px rgba(var(--mp-primary-rgb), .3); }
.theme-mp .topbar { color: var(--mp-on-dark); }
.theme-mp .topbar a, .theme-mp .socials a, .theme-mp .shop-footer__powered a { color: var(--mp-on-dark-strong); }
.theme-mp .topbar__promo i { color: var(--mp-on-dark-accent); }
.theme-mp .hero__main { background: radial-gradient(600px 300px at 90% 10%, rgba(255,255,255,.16), transparent 60%), linear-gradient(120deg, var(--mp-hero-deep) 0%, var(--primary) 50%, var(--secondary) 100%); }
.theme-mp .page-hero--dark { background: radial-gradient(1200px 300px at 85% -40%, rgba(255,255,255,.12), transparent 60%), linear-gradient(120deg, var(--dark), color-mix(in srgb, var(--dark), #fff 18%)); }
.theme-mp .btn-light-solid:hover { background: var(--primary-50); }
.theme-mp .newsletter { background: radial-gradient(600px 240px at 100% 0, rgba(var(--mp-secondary-rgb), .35), transparent 60%), linear-gradient(120deg, var(--dark), var(--mp-band-end)); }
.theme-mp .newsletter p, .theme-mp .payments { color: var(--mp-on-dark); }
.theme-mp .newsletter input::placeholder { color: var(--mp-on-dark-muted); }
.theme-mp .site-footer, .theme-mp .footer-links a { color: var(--mp-on-dark-muted); }
.theme-mp .footer-links a:hover { color: #fff; }
.theme-mp .footer-perk i, .theme-mp .shop-footer__contact i, .theme-mp .toast-msg a { color: var(--mp-on-dark-accent); }
.topbar__end { display: flex; align-items: center; gap: 1.25rem; }
.theme-switch { display: flex; align-items: center; gap: .3rem; padding-inline-start: 1.25rem; border-inline-start: 1px solid rgba(255,255,255,.15); }
.theme-switch__label { opacity: .75; margin-inline-end: .15rem; }
.topbar .theme-switch__option { display: inline-flex; align-items: center; gap: .4rem; padding: .15rem .55rem; padding-inline-start: .2rem; border-radius: 999px; font-size: .82rem; color: inherit; opacity: .8; transition: background .15s, opacity .15s; }
.topbar .theme-switch__option:hover { opacity: 1; background: rgba(255,255,255,.08); color: #fff; }
.topbar .theme-switch__option.is-active { opacity: 1; background: rgba(255,255,255,.14); color: #fff; font-weight: 600; }
.theme-switch__dot { width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(135deg, var(--dot-a) 0 50%, var(--dot-b) 50% 100%); box-shadow: 0 0 0 1.5px rgba(255,255,255,.55); flex-shrink: 0; }
.theme-switch__option.is-active .theme-switch__dot { box-shadow: 0 0 0 2px #fff; }
@media (max-width: 991.98px) {
    .topbar .container { justify-content: space-between; }
    .topbar__promo { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .theme-switch { padding-inline-start: 0; border: 0; gap: .15rem; flex-shrink: 0; }
    .theme-switch__name { display: none; }
    .topbar .theme-switch__option { padding: .25rem; }
}
.theme-preview-bar { background: var(--primary); color: #fff; font-size: .82rem; text-align: center; padding: 7px 12px; }
.theme-preview-bar a { color: #fff; font-weight: 700; text-decoration: underline; margin-inline-start: 10px; }

/* Language switcher */
.lang-switch { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; font-weight: 600; white-space: nowrap; }
.header-action--lang i { font-size: 1.05rem; }

/* Currency picker */
.currency-switch__toggle { display: inline-flex; align-items: center; gap: .3rem; padding: 0; border: 0; background: none; color: inherit; font-size: .9rem; font-weight: 600; white-space: nowrap; }
.currency-switch__toggle::after { content: '\f107'; font: 900 .7rem 'Font Awesome 6 Free'; opacity: .7; }
.currency-switch__symbol { display: inline-block; min-width: 1.4em; text-align: center; font-weight: 700; }
.header-action--currency { border: 0; background: none; }
.header-action--currency .currency-switch__symbol { font-size: 1.05rem; line-height: 1; }
.currency-switch .dropdown-menu { min-width: 220px; z-index: 1060; }
.currency-switch .dropdown-menu .currency-switch__item { display: flex; align-items: center; gap: .5rem; color: var(--ink); font-size: .9rem; }
.currency-switch .dropdown-menu .currency-switch__item:hover { background: var(--primary-50); color: var(--primary); }
.currency-switch .dropdown-menu .currency-switch__item.active { background: var(--primary); color: #fff; }
.currency-switch__item .currency-switch__symbol { min-width: 2.4em; }
.currency-switch__item small { margin-inline-start: auto; opacity: .65; font-weight: 600; }
.currency-chips { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; padding: .6rem 1rem; }
.currency-chips > i { width: 20px; text-align: center; color: var(--muted); margin-inline-end: .4rem; }
.currency-chips__chip { padding: .2rem .6rem; border: 1px solid var(--line, #E5E7EB); border-radius: 999px; font-size: .82rem; font-weight: 600; color: var(--ink); }
.currency-chips__chip.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.summary__note--currency { display: flex; gap: .5rem; align-items: flex-start; text-align: start; line-height: 1.45; }
.summary__note--currency i { margin-top: .2rem; }

/* Right-to-left (Arabic) */
[dir="rtl"] body { font-family: 'Tajawal', var(--bs-body-font-family); }
/* Spaced-out letters break the joined Arabic script */
[dir="rtl"] body * { letter-spacing: normal !important; }
[dir="rtl"] :is(.fa-arrow-right, .fa-arrow-left, .fa-chevron-right, .fa-chevron-left, .fa-angle-right, .fa-angle-left,
    .fa-arrow-right-long, .fa-arrow-left-long, .fa-right-from-bracket, .fa-right-to-bracket, .fa-arrow-up-right-from-square) { transform: scaleX(-1); }
[dir="rtl"] .link-more:hover i { transform: scaleX(-1) translateX(3px); }
/* Product names are often English: let their own text set the direction so punctuation stays in place */
[dir="rtl"] :is(.pdp-info__title, .p-card__title, .p-tile__title, .cart-line__title, .compare-product__title, .search-results__title,
    .mcard__title, .store-flyout__ptitle, .prod-spot__title, .breadcrumb-item.active, .shop-brand__name) { unicode-bidi: plaintext; text-align: right; }
[dir="rtl"] :is(input[type="email"], input[type="tel"], input[type="url"], input[type="password"]) { direction: ltr; text-align: end; }