@font-face {
    font-family: "Geist";
    src: url("../fonts/geist/Geist-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Geist";
    src: url("../fonts/geist/Geist-Medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Geist";
    src: url("../fonts/geist/Geist-SemiBold.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Geist";
    src: url("../fonts/geist/Geist-Bold.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Geist Mono";
    src: url("../fonts/geist/GeistMono-Regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Core palette — dark, calm, technical */
    --brand-charcoal: #0b0f14;   /* deepest background */
    --brand-surface: #151b23;    /* raised dark surface */
    --brand-soft-white: #f2f4f7; /* primary light text / light surface */
    --brand-gray: #9aa4b2;       /* muted text, borders */
    --brand-blue: #6c8cff;       /* electric blue — primary accent */
    --brand-violet: #8b7cff;     /* subtle violet — secondary accent */
    --brand-mint: #55d6be;       /* mint — sparing highlight */

    /* Semantic roles — used across the overrides below */
    --c-accent: var(--brand-blue);
    --c-accent-2: var(--brand-violet);
    --c-highlight: var(--brand-mint);
    --c-text: #1a2230;           /* dark text on light surfaces */
    --c-text-muted: var(--brand-gray);
    --c-surface: #ffffff;
    --c-surface-alt: #f4f6f9;
    --c-border: #e3e7ee;
    --c-border-strong: #d3d9e4;

    /* Old brand → new brand map (kept for reference and reuse) */
    --was-teal: var(--brand-blue);      /* #19bfd3 → electric blue */
    --was-red: var(--brand-violet);     /* #ee384e → violet accent  */
    --was-red-2: var(--brand-blue);     /* #ef4056 → electric blue  */
    --was-red-deep: var(--brand-violet);/* #d32f2f → violet accent  */
    --was-gray: var(--brand-gray);      /* #727272 → muted gray     */
}

body {
    font-family: "Vazirmatn", "Geist", system-ui, -apple-system, sans-serif !important;
    direction: rtl;
    background-color: var(--c-surface);
    color: var(--c-text);
}

h1, h2, h3, h4, h5, h6,
input, textarea {
    font-family: "Vazirmatn", "Geist", system-ui, sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--c-text);
}

a {
    color: var(--c-accent);
    transition: color 0.18s ease;
}

a:hover {
    color: var(--c-accent-2);
}

/* Muted body text — the old files leaned on #727272 everywhere */
.text-black {
    color: var(--c-text);
}

.c7,
.credit-description .credit-text,
.category-description .desc {
    color: var(--c-text-muted);
}

/* --------------------------------------------------------------------------
   2. Header & Nav
   -------------------------------------------------------------------------- */

.header {
    background-color: var(--c-surface);
}

header {
    background-color: var(--c-surface);
}

header .search {
    background-color: var(--c-surface-alt);
    border: 1px solid var(--c-border);
}

header .search .search-box span {
    color: var(--c-text-muted);
}

header .my-account {
    border: 1px solid var(--c-border-strong);
}

header .my-account .login,
header .my-account .register {
    color: var(--c-text);
}

header .basket i {
    color: var(--c-text);
}

.search-form .search-input {
    border-bottom: 1px solid var(--c-accent);
}

.search-form .search-input input {
    color: var(--c-text);
}

nav {
    background-color: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    box-shadow: 0 1px 0 rgba(11, 15, 20, 0.06), 0 2px 0 rgba(11, 15, 20, 0.03);
}

nav .categories {
    border-left: 2px solid var(--c-border);
}

nav .categories .category-title span {
    color: var(--c-text);
}

/* The old underline hovers were red — now they carry the accent */
nav .category-title:after {
    border-bottom: 2px solid var(--c-accent);
}

.menu .manu-item:after {
    border-bottom: 2px solid var(--c-accent);
}

.menu .manu-item a {
    color: var(--c-text-muted);
}

.menu .manu-item a:hover {
    color: var(--c-text);
}

/* Mega menu */
.categories .category-items {
    background-color: var(--c-surface-alt);
}

.categories .category-item {
    color: var(--c-text-muted);
}

.categories .category-item:hover,
.categories .category-item.active {
    background-color: var(--c-surface);
    color: var(--c-accent);
}

.category-submenu {
    background-color: var(--c-surface);
}

.submenu-list > a {
    color: var(--c-accent);
}

.submenu-item a {
    color: var(--c-text);
}

.submenu-item a:hover {
    color: var(--c-accent);
}

.submenu-item .parent span:before {
    border-right: 2px solid var(--c-accent);
}

/* Header dropdown / dashboard menu */
.header .dashboard-items a {
    color: var(--c-text);
}

.header .dashboard-items a:hover {
    background-color: var(--c-surface-alt);
}

.dashboard-items a.bell div span:last-child {
    background-color: var(--c-accent);
}

/* Basket count badge */
.header .basket .basket-count {
    background-color: var(--c-accent);
}

.basket:before {
    background-color: var(--c-accent);
}

/* --------------------------------------------------------------------------
   3. Buttons & CTAs
   Emphasis comes from color and weight — never from noise.
   -------------------------------------------------------------------------- */

.add-cart button {
    background-color: var(--c-accent);
    color: var(--brand-charcoal);
    transition: background-color 0.18s ease, color 0.18s ease;
}

.add-cart button:hover {
    background-color: var(--c-accent-2);
    color: var(--brand-charcoal);
}

.checkout-btn {
    background-color: var(--c-accent);
}

.checkout-btn a {
    color: var(--brand-charcoal);
}

.questions-send button.active {
    background-color: var(--c-accent);
    color: var(--brand-charcoal);
}

.call-form button {
    background-color: var(--c-accent);
    color: var(--brand-charcoal);
}

.views-send div:last-child button {
    border: 1px solid var(--c-accent);
    color: var(--c-accent);
}

.views-send div:last-child button:hover {
    background-color: var(--c-accent);
    color: var(--brand-charcoal);
}

.summary .more-attribute button {
    border: 1px solid var(--c-border-strong);
    color: var(--c-text);
}

.summary .more-attribute button:hover {
    border-color: var(--c-accent);
    color: var(--c-accent);
}

.profile .content .btn-cart {
    border: 1px solid var(--c-accent);
}

.profile .content .btn-cart button {
    color: var(--c-accent);
}

.address-head-btn,
.profile .address-head-btn {
    border: 1px solid var(--c-accent);
}

.profile .address-head-btn button {
    color: var(--c-accent);
}

/* Newsletter + generic gray buttons that had no active brand */
.newsletter-form button {
    background-color: var(--c-accent);
    color: var(--brand-charcoal);
}

/* --------------------------------------------------------------------------
   4. Product Cards
   The old "amazing" rail was a red gradient. Now it's blue → violet.
   -------------------------------------------------------------------------- */

.amazing {
    background: linear-gradient(225deg, var(--brand-charcoal), var(--c-accent) 55%, var(--c-accent-2));
}

.amazing .product-card {
    background-color: var(--c-surface);
}

.amazing .product-title h3 {
    color: var(--c-text-muted);
}

.amazing .price-final span {
    color: var(--c-text);
}

.amazing .price-no-discount span {
    color: var(--c-text-muted);
}

/* Discount pill — was red, now violet so it reads as accent not alarm */
.amazing .price-discount > span:first-child {
    background-color: var(--c-accent-2);
    color: var(--brand-charcoal);
}

.amazing .amazing-item:last-child .product-card i {
    border: 2px solid var(--c-accent);
    color: var(--c-accent);
}

.amazing .amazing-item:last-child .product-card span {
    color: var(--c-text-muted);
}

/* Best seller block */
.best-seller {
    border: 1px solid var(--c-border);
}

.best-seller .best-title i {
    color: var(--c-highlight);
}

.best-products .best-product-row {
    color: var(--c-accent);
}

.best-product .best-product-title {
    color: var(--c-text-muted);
}

.best-products a:not(:last-child) .best-product-title:before {
    background-color: var(--c-border);
}

.best-seller .swiper-button-next,
.best-seller .swiper-button-prev {
    border: 1px solid var(--c-border-strong);
}

.more-best-seller a {
    color: var(--c-accent);
}

/* Related block */
.related {
    border: 1px solid var(--c-border);
    box-shadow: 3px 3px 5px -1px rgba(11, 15, 20, 0.08);
}

.related-item:not(:last-child) {
    border-left: 1px solid var(--c-border);
}

.related .product-card {
    background-color: var(--c-surface);
}

.related .product-title h3 {
    color: var(--c-text-muted);
}

.related .price-final span {
    color: var(--c-text);
}

.related .price-no-discount span {
    color: var(--c-text-muted);
}

.related .price-discount > span:first-child {
    background-color: var(--c-accent-2);
    color: var(--brand-charcoal);
}

.related .related-item:last-child .product-card i {
    border: 2px solid var(--c-accent);
    color: var(--c-accent);
}

/* Category grid cards */
.page-category .categories-item {
    border-top: 1px solid var(--c-border);
}

.page-category .categories-item:nth-of-type(4n+1),
.page-category .categories-item:nth-of-type(4n+2),
.page-category .categories-item:nth-of-type(4n+3) {
    border-left: 1px solid var(--c-border);
}

.page-category .categories-item a {
    color: var(--c-text-muted);
}

.page-category .categories-item a h3 {
    color: var(--c-text);
}

.page-category .categories-item a .stock {
    color: var(--c-accent-2);
}

.page-category .categories-item a .discount {
    background-color: var(--c-accent-2);
    color: var(--brand-charcoal);
}

.page-category .categories-item a .final-price .price {
    color: var(--c-text);
}

/* Best-selling landing rail */
.bests-seller .best-item {
    border-left: 1px solid var(--c-border);
    border-bottom: 1px solid var(--c-border);
}

.bests-seller .best-item a {
    color: var(--c-text-muted);
}

.bests-seller .best-item a h3 {
    color: var(--c-text);
}

.bests-seller .best-item a .stock {
    color: var(--c-accent-2);
}

.bests-seller .best-item a .discount {
    background-color: var(--c-accent-2);
    color: var(--brand-charcoal);
}

.bests-seller .best-item a .final-price .price {
    color: var(--c-text);
}

.bests-seller .number-item {
    background-color: var(--c-accent);
    color: var(--brand-charcoal);
}

/* Base header pattern accents */
.base-title h1 {
    color: var(--c-accent-2);
    background-color: var(--c-surface);
}

.base-nav span {
    background: linear-gradient(90deg, var(--c-accent), rgba(255, 255, 255, 0));
}

.base-nav-body {
    background-color: var(--c-surface);
}

.base-nav-body .active {
    color: var(--c-accent-2);
}

.base-category span.active {
    border: 1px solid var(--c-accent);
    color: var(--c-accent);
    background: rgba(108, 140, 255, 0.08);
}

/* Favorites */
.favorites-product a {
    color: var(--c-text-muted);
}

.favorites-product .discount {
    background-color: var(--c-accent-2);
    color: var(--brand-charcoal);
}

/* --------------------------------------------------------------------------
   5. Cart
   -------------------------------------------------------------------------- */

#cart .cart-nav ul li {
    border-bottom: 3px solid var(--c-accent);
    color: var(--c-accent);
}

#cart .cart-nav ul li span:last-child {
    background-color: var(--c-accent);
    color: var(--brand-charcoal);
}

#cart .cart-nav div a:last-child {
    color: var(--c-text);
}

#cart .discount-total-cart {
    color: var(--c-accent-2);
}

#cart .discount-total-cart svg {
    fill: var(--c-accent-2);
}

#cart .final-cart p:last-child,
#cart .total-cart p:last-child {
    color: var(--c-text);
}

.cart-sender i {
    color: var(--c-accent-2);
}

.cart-quantity {
    color: var(--c-accent) !important;
}

.cart-price .discount {
    color: var(--c-accent-2) !important;
}

.cart-price .discount svg {
    fill: var(--c-accent-2);
}

.cart-price .price svg {
    fill: var(--c-text-muted);
}

.price-not-discount {
    color: var(--c-text) !important;
}

/* Cart arrow animation color cue */
#cart .cart-nav div a .fa-arrow-right {
    color: var(--c-accent);
}

.cart-arrow-hide {
    color: var(--c-accent);
}

/* --------------------------------------------------------------------------
   6. Footer
   -------------------------------------------------------------------------- */

footer {
    border-top: 1px solid var(--c-border);
}

.footer-call span:not(:last-child):after {
    background-color: var(--c-border-strong);
}

.services a span:last-child {
    color: var(--c-text-muted);
}

.access a {
    color: var(--c-text-muted);
}

.access a:hover {
    color: var(--c-accent);
}

.access div h3 {
    color: var(--c-text);
}

.social-list svg {
    fill: var(--c-text-muted);
    transition: fill 0.18s ease;
}

.social-list a:hover svg {
    fill: var(--c-accent);
}

.newsletter h4 {
    color: var(--c-text-muted);
}

.copy-right {
    border-top: 1px solid var(--c-border);
    color: var(--c-text-muted);
}

.credit-icon-list {
    border: 1px solid var(--c-border);
}

/* --------------------------------------------------------------------------
   7. Forms
   Inputs share one focus treatment — a soft blue ring, nothing louder.
   -------------------------------------------------------------------------- */

.newsletter-form input {
    background-color: var(--c-surface-alt);
    color: var(--c-text);
}

.newsletter-form input::placeholder {
    color: var(--c-text-muted);
}

.newsletter-form input {
    caret-color: var(--c-accent);
}

.questions-send .questions-send-text textarea {
    border: 1px solid var(--c-border);
    caret-color: var(--c-accent);
}

.questions-send-text p {
    color: var(--c-text-muted);
}

.call-form input,
.call-form textarea {
    border: 1px solid var(--c-border);
}

.form-control:focus {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px rgba(108, 140, 255, 0.15);
}

.call-head div:nth-child(2) p a {
    color: var(--c-accent);
}

/* FAQ search + section accents */
.faq {
    background: linear-gradient(180deg, var(--c-surface-alt), rgba(255, 255, 255, 0));
}

.faq-category input {
    border: 1px solid var(--c-accent);
    caret-color: var(--c-accent);
}

.faq-header-icon i {
    color: var(--c-accent);
}

.faq-categories-icon {
    background-color: rgba(108, 140, 255, 0.08);
}

.faq-categories-icon i:after,
.faq-questions-relative .faq-categories-icon i {
    color: var(--c-accent);
}

.faq-questions-relative .accordion-button:not(.collapsed) {
    color: var(--c-accent);
}

/* Comment modal */
.comment-body button {
    background-color: var(--c-accent);
    color: var(--brand-charcoal);
}

.comment-body .strong i {
    color: var(--c-highlight);
}

.comment-body .light i {
    color: var(--c-accent-2);
}

.comment-body .strong-text span {
    border: 1px solid var(--c-highlight);
}

.comment-body .light-text span {
    border: 1px solid var(--c-accent-2);
}

/* Price range slider */
.price-field input[type=range]::-webkit-slider-thumb {
    background-color: var(--c-accent);
}

.price-field input[type=range]::-webkit-slider-runnable-track {
    background: var(--c-accent);
}

.price-filter-content input {
    color: var(--c-text-muted);
    caret-color: var(--c-accent);
}

/* Toggle switch */
.checked-input.show .circle {
    background-color: var(--c-accent);
}

/* --------------------------------------------------------------------------
   8. Profile
   -------------------------------------------------------------------------- */

.color-19 {
    color: var(--c-accent);
}

.color-3 {
    color: var(--c-text);
}

.profile .sidebar {
    border: 1px solid var(--c-border);
}

.profile .sidebar-head .fa-user-pen {
    color: var(--c-accent);
}

.profile .sidebar-body ul li {
    color: var(--c-text);
    border-top: 1px solid var(--c-border);
}

.profile .sidebar-body ul li:hover {
    background-color: var(--c-surface-alt);
}

.profile .sidebar-body ul li.active:before {
    background-color: var(--c-accent);
}

.profile .sidebar-body li .bell {
    background-color: var(--c-accent);
    color: var(--brand-charcoal);
}

.profile .content .my-orders {
    border: 1px solid var(--c-border);
}

.profile .content .my-orders h3:after {
    background-color: var(--c-accent);
}

.profile .content .related .price-final span {
    color: var(--c-text);
}

.profile-order-body ul li {
    color: var(--c-text-muted);
}

.profile-order-body ul li.active {
    color: var(--c-accent-2);
}

.profile-order-body ul li.active:before {
    background-color: var(--c-accent);
}

.profile-order-body li.active span:nth-child(2) {
    background-color: var(--c-accent);
    color: var(--brand-charcoal);
}

#main section[data-page="lists"] ul li.active {
    color: var(--c-accent-2);
}

#main section[data-page="lists"] ul li.active:before {
    background-color: var(--c-accent);
}

.profile .lists-body ul li.active:before {
    background-color: var(--c-accent);
}

.profile .lists-body li.active {
    color: var(--c-accent-2);
}

.delivered-list-footer a {
    color: var(--c-accent);
}

.delivered-list .fa-circle-check {
    color: var(--c-highlight);
}

.profile .notification-list .img {
    background-color: var(--c-accent);
}

.profile .comments-product-list .fa-plus {
    color: var(--c-highlight);
}

.profile .delivered-page .step-1 p:last-child a {
    color: var(--c-accent);
}

/* --------------------------------------------------------------------------
   9. Active / Hover States
   These small cues carried the old brand. They carry the new one now.
   -------------------------------------------------------------------------- */

.nav-link.active {
    border-bottom: 3px solid var(--c-accent) !important;
    color: var(--c-accent) !important;
}

.nav-pills .nav-link {
    color: var(--c-text-muted);
}

.more-lest {
    color: var(--c-accent);
}

.more-lest:hover {
    color: var(--c-accent-2);
}

/* Small accent dots and rings */
.circle-6 {
    background-color: var(--c-accent);
}

.color-2e {
    color: var(--c-highlight);
}

.bg-4c {
    background-color: var(--c-highlight);
}

/* Breadcrumb + generic muted links */
.breadcrumb a,
.breadcrumb li span {
    color: var(--c-text-muted);
}

/* Single product accents */
.summary .brand a,
.summary .category a,
.single-product .category a span:first-child {
    color: var(--c-accent);
}

.summary .product-seller div:first-child span {
    color: var(--c-accent);
}

.summary .comment-number span:last-child {
    color: var(--c-accent);
}

.summary .send-time span svg {
    fill: var(--c-text-muted);
}

/* Star ratings — keep warm but align highlight to mint where structural */
.fa-solid.fa-star,
.fa-solid.fa-star-half {
    color: #f5b544;
}

/* Views sort active state */
.views-sort .active p {
    color: var(--c-accent-2);
}

/* Save-question / help cues */
.questions-content article .save-question,
.questions-content article .fa-question {
    color: var(--c-accent);
}

/* Brand pages */
.brand-icon i {
    color: var(--c-accent);
}

.product-seller .icon i {
    color: var(--c-accent);
}

.product-seller ul li {
    border: 1px dotted var(--c-accent);
    background-color: rgba(108, 140, 255, 0.08);
}

.product-seller ul li:after {
    background-color: var(--c-accent);
    color: var(--brand-charcoal);
}

.brand_info .brand_img {
    border: 1px dashed var(--c-accent);
}

.search_brand .input-search {
    background-color: var(--c-accent);
    color: var(--brand-charcoal);
}

.search_brand .input-search::placeholder {
    color: var(--brand-charcoal);
}

.search_brand .btn-searchBrand:focus ~ .input-search,
.search_brand .input-search:focus {
    border-bottom: 1px solid var(--c-accent);
}

/* Search results */
.search-result .result-item {
    border: 1px solid var(--c-border);
}

.search-result .category-text i {
    color: var(--c-text-muted);
}

/* Display mobile menu */
.display-mobile-menu {
    background-color: var(--c-surface);
    border-top: 1px solid var(--c-border);
}

.display-mobile-menu a {
    color: var(--c-text-muted);
}

.display-mobile-menu a.active span {
    color: var(--c-text);
}

.display-mobile-menu a.position-relative span.position-absolute {
    background-color: var(--c-accent);
    color: var(--brand-charcoal);
}

.display-mobile-menu a svg {
    fill: var(--c-highlight);
}

.parent-menu li.active a {
    color: var(--c-accent-2);
}

/* Mobile menu links */
.mobile-menu .all-list a,
.submenu-list > a {
    color: var(--c-accent);
}

/* History chips */
.desktop .history .down div span {
    color: var(--c-text);
}

/* Status pills */
.t-success {
    background-color: var(--c-highlight);
    color: var(--brand-charcoal);
}

.t-danger {
    background-color: var(--c-accent-2);
    color: var(--brand-charcoal);
}

/* --------------------------------------------------------------------------
   10. Scrollbar
   -------------------------------------------------------------------------- */

::-webkit-scrollbar-thumb {
    background: var(--c-accent);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--c-accent-2);
}

::-webkit-scrollbar-thumb:horizontal {
    background: var(--c-accent);
}

::-webkit-scrollbar-track {
    background: var(--c-surface-alt);
}













/* ==========================================================================
   header-nav-cart.patch.css — Project Ascend rebrand, refinement layer
   Append to the END of brand-override.css.

   Most retail headers shout. This one steps back — softer surfaces,
   quieter borders, one accent doing the pointing.

   Scope: header, search, account, cart badge, cart dropdown, nav, mega menu.
   Pure CSS. No SCSS. RTL untouched. Tokens inherited from the parent file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Header shell
   The old header read as generic retail. This narrows the shadow,
   softens the border, and lets the surface breathe.
   -------------------------------------------------------------------------- */

.header {
    background-color: var(--c-surface);
}

header {
    background-color: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    box-shadow: 0 1px 2px rgba(26, 34, 48, 0.03);
}

/* A touch more air around the top row — premium comes from spacing, not noise */
.header .logo {
    width: 8.5rem;
}

/* --------------------------------------------------------------------------
   2. Search box
   Soft alt-surface, subtle border, a blue focus ring — nothing louder.
   -------------------------------------------------------------------------- */

header .search {
    background-color: var(--c-surface-alt);
    border: 1px solid var(--c-border);
    border-radius: 0.6rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

header .search:focus-within {
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px rgba(108, 140, 255, 0.15);
}

header .search .search-box span {
    color: var(--c-text-muted);
}

/* Search dropdown surface + input caret */
header .search-form {
    border: 1px solid var(--c-border);
    box-shadow: 0 8px 24px rgba(26, 34, 48, 0.08);
}

.search-form .search-input {
    border-bottom: 1px solid var(--c-accent);
}

.search-form .search-input input {
    color: var(--c-text);
    caret-color: var(--c-accent);
}

.search-form .search-input input::placeholder {
    color: var(--c-text-muted);
}

/* --------------------------------------------------------------------------
   3. Login / Register button
   Less boxy. Softer border, tighter type, calm hover.
   -------------------------------------------------------------------------- */

header .my-account {
    border: 1px solid var(--c-border);
    border-radius: 0.6rem;
    transition: border-color 0.18s ease, background-color 0.18s ease;
}

header .my-account:hover {
    border-color: var(--c-accent);
    background-color: rgba(108, 140, 255, 0.04);
}

header .my-account .login,
header .my-account .register {
    color: var(--c-text);
    font-weight: 500;
    letter-spacing: -0.01em;
}

header .my-account span {
    color: var(--c-text-muted);
}

/* --------------------------------------------------------------------------
   4. Cart badge
   The count sat on the cart like a retail alarm. Now it's a small,
   clean accent mark — smaller radius, brand blue, no shout.
   -------------------------------------------------------------------------- */

.header .basket i {
    color: var(--c-text);
}

.header .basket .basket-count {
    background-color: var(--c-accent);
    border: 2px solid var(--c-surface);
    border-radius: 0.5rem;
}

.header .basket .basket-count span {
    color: var(--c-surface);
    font-weight: 600;
}

/* Soft hover wash behind the basket icon */
.basket:before {
    background-color: var(--c-accent);
    opacity: 0.06;
}

/* --------------------------------------------------------------------------
   5. Cart dropdown (.min-basket)
   The open cart looked plain and detached from the rest of the page.
   This ties it back — softer surface, clearer type, one accent CTA.
   -------------------------------------------------------------------------- */

.min-basket {
    border: 1px solid var(--c-border);
    border-radius: 0.8rem;
    box-shadow: 0 12px 32px rgba(26, 34, 48, 0.12);
}

/* Header row of the dropdown — "۱ کالا" */
.min-basket .cart-title p,
.min-basket .cart-title span {
    color: var(--c-text);
}

/* Item dividers — quieter than the old gray */
.min-basket .cart-item:not(:last-child) {
    border-bottom: 1px solid var(--c-border);
}

/* Product name */
.min-basket .cart-content .cart-body h3 {
    color: var(--c-text);
}

/* Meta lines — code, small details */
.min-basket .cart-content .cart-body div {
    color: var(--c-text-muted);
}

/* Quantity control — softer frame, accent numerals */
.min-basket .cart-quantity {
    border: 1px solid var(--c-border);
    border-radius: 0.6rem;
    box-shadow: none;
    color: var(--c-accent) !important;
}

.min-basket .cart-quantity span i {
    color: var(--c-accent);
}

/* Discount line — reads as accent, not alarm */
.min-basket .cart-price .discount {
    color: var(--c-accent-2) !important;
}

.min-basket .cart-price .discount svg {
    fill: var(--c-accent-2);
}

/* Price typography — the number that matters stays dark and firm */
.min-basket .cart-price .price {
    color: var(--c-text);
}

.min-basket .cart-price .price svg {
    fill: var(--c-text-muted);
}

.min-basket .price-not-discount {
    color: var(--c-text) !important;
}

/* Footer divider above the CTA */
.min-basket .cart-btn {
    border-top: 1px solid var(--c-border);
}

/* Payable-amount label + figure */
.min-basket .cart-btn .cart-price p {
    color: var(--c-text-muted);
}

.min-basket .cart-btn .cart-price p:last-child {
    color: var(--c-text);
}

.min-basket .cart-btn .cart-price p:last-child svg {
    fill: var(--c-text-muted);
}

/* Checkout CTA — one accent button, calm on hover */
.min-basket .checkout-btn {
    background-color: var(--c-accent);
    border-radius: 0.6rem;
    transition: background-color 0.18s ease;
}

.min-basket .checkout-btn:hover {
    background-color: var(--c-accent-2);
}

.min-basket .checkout-btn a {
    color: var(--c-surface);
    font-weight: 600;
}

/* Trash / small icons inside the dropdown */
.min-basket svg {
    fill: var(--c-text-muted);
}

/* Scrollbar inside the item list — match the softened tone */
.min-basket .cart-items::-webkit-scrollbar-thumb {
    background: var(--c-border);
}

.min-basket .cart-items::-webkit-scrollbar-track {
    background: var(--c-surface-alt);
}

/* --------------------------------------------------------------------------
   6. Nav links
   Muted by default. Blue on hover. The underline carries the accent —
   never the old red.
   -------------------------------------------------------------------------- */

nav {
    background-color: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    box-shadow: 0 1px 2px rgba(26, 34, 48, 0.03);
}

/* Menu item links */
.menu .manu-item a {
    color: var(--c-text-muted);
    transition: color 0.18s ease;
}

.menu .manu-item a:hover {
    color: var(--c-accent);
}

/* Underline reveal on hover — accent, not red */
.menu .manu-item:after {
    border-bottom: 2px solid var(--c-accent);
}

/* Categories trigger */
nav .categories {
    border-left: 2px solid var(--c-border);
}

nav .categories .category-title span {
    color: var(--c-text);
    transition: color 0.18s ease;
}

nav .categories .category-title:hover span {
    color: var(--c-accent);
}

nav .category-title:after {
    border-bottom: 2px solid var(--c-accent);
}

/* --------------------------------------------------------------------------
   7. Mega menu
   Softer sidebar surface. Active and hover states point with the accent,
   so the eye knows where it is without a loud color.
   -------------------------------------------------------------------------- */

/* Left category rail */
.categories .category-items {
    background-color: var(--c-surface-alt);
}

.categories .category-item {
    color: var(--c-text-muted);
    transition: color 0.18s ease, background-color 0.18s ease;
}

.categories .category-item:hover,
.categories .category-item.active {
    background-color: var(--c-surface);
    color: var(--c-accent);
}

/* Right submenu panel */
.category-submenu {
    background-color: var(--c-surface);
}

.submenu-list > a {
    color: var(--c-accent);
}

.submenu-item a {
    color: var(--c-text);
    transition: color 0.18s ease;
}

.submenu-item a:hover {
    color: var(--c-accent);
}

/* Small marker before parent labels */
.submenu-item .parent span:before {
    border-right: 2px solid var(--c-accent);
}

/* Dim backdrop behind the open mega menu — calmer than the old black */
.categories .category:before {
    background-color: rgba(26, 34, 48, 0.4);
}










/* ==========================================================================
   search-nav-polish.patch.css — Project Ascend rebrand, refinement layer 3
   Append to the END of brand-override.css.

   Most retail navs push. This one steps back — quieter type, more air,
   one accent that points instead of shouts.

   Scope: search box, nav typography, nav spacing, nav hover/active states.
   Pure CSS. No SCSS. RTL untouched. Tokens inherited from the parent file.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Search box
   The old box read as pure utility. This gives it room to breathe —
   softer radius, more padding, a placeholder that recedes, a calm focus ring.
   -------------------------------------------------------------------------- */

header .search {
    /* More air inside. Premium comes from spacing, not decoration. */
    padding: 0.65rem 1rem;
    background-color: var(--c-surface-alt);
    border: 1px solid var(--c-border);
    border-radius: 0.75rem;
    /* Animate both cues together so focus feels smooth, not sudden. */
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

header .search:hover {
    /* A quiet hint before focus — the border warms toward the accent. */
    border-color: var(--c-border-strong, var(--c-accent));
}

header .search:focus-within {
    /* One accent ring on focus. Nothing louder. */
    background-color: var(--c-surface);
    border-color: var(--c-accent);
    box-shadow: 0 0 0 3px rgba(108, 140, 255, 0.15);
}

/* Placeholder text recedes — it guides, it doesn't compete. */
header .search .search-box span,
header .search input::placeholder {
    color: var(--c-text-muted);
    font-weight: 400;
    letter-spacing: -0.005em;
}

/* Typed text stays firm and readable; caret carries the accent. */
header .search input {
    color: var(--c-text);
    caret-color: var(--c-accent);
    font-weight: 500;
}

/* Search icon aligns with muted text, brightens on focus. */
header .search .search-box i,
header .search i {
    color: var(--c-text-muted);
    transition: color 0.2s ease;
}

header .search:focus-within i {
    color: var(--c-accent);
}

/* --------------------------------------------------------------------------
   2. Nav typography & spacing
   Retail navs cram links together. This adds space and tightens the type,
   so each item reads as deliberate — not a list of links racing the edge.
   -------------------------------------------------------------------------- */

.menu {
    /* Even rhythm between items. Consistent gaps do the ordering work. */
    gap: 0.35rem;
}

.menu .manu-item {
    /* Give each item its own breathing room instead of a tight run. */
    padding: 0.5rem 0.9rem;
}

.menu .manu-item a {
    color: var(--c-text-muted);
    font-weight: 500;
    /* Slight negative tracking reads as considered, not cramped. */
    letter-spacing: -0.01em;
    /* Animate color and offset together for a clean hover. */
    transition: color 0.2s ease;
}

/* Categories trigger shares the same weight and tracking as the links. */
nav .categories .category-title span {
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* --------------------------------------------------------------------------
   3. Nav hover & active polish
   The reveal was abrupt and the active mark was vague. This grows the
   underline from the center, points with the accent, and keeps active
   distinct from hover — one blue, one violet.
   -------------------------------------------------------------------------- */

/* Base underline — hidden, centered, ready to grow. */
.menu .manu-item:after {
    content: "";
    display: block;
    height: 2px;
    width: 0;
    margin-top: 0.35rem;
    /* Grow from the middle out, not from one edge. */
    margin-inline: auto;
    background-color: var(--c-accent);
    border: 0; /* replaces the old hard border-bottom reveal */
    transition: width 0.22s ease;
}

/* Hover → link warms to the accent, underline extends. */
.menu .manu-item:hover a {
    color: var(--c-accent);
}

.menu .manu-item:hover:after {
    width: 100%;
}

/* Active → violet, so the current page reads apart from a hover. */
.menu .manu-item.active a {
    color: var(--c-accent-2);
    font-weight: 600;
}

.menu .manu-item.active:after {
    width: 100%;
    background-color: var(--c-accent-2);
}

/* Categories trigger — same logic, same restraint. */
nav .categories .category-title:hover span {
    color: var(--c-accent);
}

nav .category-title:after {
    height: 2px;
    background-color: var(--c-accent);
    border: 0;
    transition: width 0.22s ease;
}

/* Keyboard focus gets the same clarity as hover — accessible by default. */
.menu .manu-item a:focus-visible {
    color: var(--c-accent);
    outline: 2px solid rgba(108, 140, 255, 0.35);
    outline-offset: 3px;
    border-radius: 0.25rem;
}
.summary .product-price .price p:first-child span:last-child {
    background-color: var(--c-accent-2);
    color: var(--brand-charcoal);
}