/* ── Header Top Bar — Deep Indigo ── */
.header-top {
    background: hsl(244, 63%, 26%);
}

.header-top .header-alert-news p {
    color: hsl(38, 95%, 88%);
    font-size: var(--fs-8);
}

.header-top .header-social-container .social-link {
    color: hsl(244, 40%, 75%);
}

.header-top .header-social-container .social-link:hover {
    color: hsl(38, 95%, 65%);
}

.header-top .header-top-actions a {
    color: hsl(244, 40%, 80%) !important;
}

.header-top .header-top-actions a:hover {
    color: hsl(38, 95%, 65%) !important;
}

.header-top .header-top-actions span {
    color: hsl(38, 95%, 72%) !important;
}

/* ── Header Main — subtle shadow ── */
.header-main {
    border-bottom: 2px solid hsl(244, 63%, 92%);
    box-shadow: 0 2px 14px hsla(244, 63%, 44%, 0.09);
}

/* ── Desktop Navigation — Indigo bg ── */
.desktop-navigation-menu {
    background: hsl(244, 63%, 44%);
}

.desktop-navigation-menu .menu-title {
    color: var(--white) !important;
    font-weight: var(--weight-500);
}

.desktop-navigation-menu .menu-title:hover {
    color: hsl(38, 95%, 80%) !important;
}

/* ── Search ── */
.search-btn:hover {
    color: hsl(244, 63%, 44%);
}

/* ── Banner Button — Amber Gold ── */
.banner-btn {
    background: hsl(38, 95%, 52%);
    color: hsl(240, 10%, 10%);
    font-weight: var(--weight-700);
}

.banner-btn:hover {
    background: hsl(244, 63%, 44%);
    color: var(--white);
}

/* ── Newsletter Button ── */
.btn-newsletter {
    background: hsl(244, 63%, 44%);
}

.btn-newsletter:hover {
    background: hsl(244, 63%, 30%);
}

/* ── Modal Close Button ── */
.modal-close-btn {
    background: hsl(244, 63%, 44%);
}

/* ── Sidebar title accent ── */
.sidebar-title {
    border-bottom: 2px solid hsl(244, 63%, 44%);
    color: hsl(244, 63%, 30%);
}

/* ── Category items ── */
.category-btn {
    color: hsl(244, 63%, 44%);
    font-weight: var(--weight-600);
}

.category-btn:hover {
    color: hsl(38, 95%, 40%);
}

/* ── Showcase panel title ── */
.showcase-panel-title {
    color: hsl(244, 63%, 30%);
    font-weight: var(--weight-700);
}

/* ── Deal Section ── */
.deal-badge {
    display: inline-block;
    background: hsl(38, 95%, 52%);
    color: hsl(240, 10%, 10%);
    padding: 4px 14px;
    border-radius: 20px;
    font-size: var(--fs-9);
    font-weight: var(--weight-700);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.deal-new-price {
    color: hsl(244, 63%, 44%);
    font-size: var(--fs-1);
    font-weight: var(--weight-700);
}

.deal-progress-fill {
    background: linear-gradient(90deg,
            hsl(38, 95%, 52%) 0%,
            hsl(244, 63%, 50%) 100%);
    border-radius: 4px;
}

.deal-progress-track {
    background: hsl(244, 63%, 92%);
}

.deal-countdown-label {
    color: hsl(244, 63%, 40%);
    font-size: var(--fs-8);
    font-weight: var(--weight-600);
}

.countdown-box {
    background: hsl(244, 63%, 44%);
    color: var(--white);
    border-radius: var(--border-radius-sm);
    padding: 8px 14px;
    text-align: center;
    min-width: 56px;
}

.countdown-box span {
    font-size: var(--fs-3);
    font-weight: var(--weight-700);
    display: block;
}

.countdown-box small {
    font-size: var(--fs-11);
    color: hsl(244, 30%, 80%);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* countdown flex */
.deal-countdown {
    display: flex;
    gap: 10px;
    margin: 10px 0 16px;
}

/* ── Product Cards ── */
.product-card-category {
    color: hsl(244, 63%, 44%);
}

.product-card:hover {
    box-shadow: 0 10px 32px hsla(244, 63%, 44%, 0.16);
    border-color: hsl(244, 63%, 85%);
}

/* ── Add to Cart Button ── */
.btn-add-cart {
    background: hsl(244, 63%, 44%);
}

.btn-add-cart:hover {
    background: hsl(38, 95%, 40%);
    color: hsl(240, 10%, 10%);
}

/* ── Wishlist Button ── */
.btn-wishlist:hover,
.btn-wishlist.active {
    background: hsl(38, 95%, 90%);
    color: hsl(38, 95%, 35%);
}

/* ── Sale Badge ── */
.badge-sale {
    background: hsl(38, 95%, 52%);
    color: hsl(240, 10%, 10%);
    font-weight: var(--weight-700);
}

/* ── Star Ratings ── */
.showcase-rating ion-icon[name="star"],
.sidebar-product-rating ion-icon[name="star"],
.deal-rating ion-icon[name="star"] {
    color: hsl(38, 95%, 52%);
}

/* ── Primary Action Button ── */
.btn-primary {
    background: hsl(244, 63%, 44%);
}

.btn-primary:hover {
    background: hsl(244, 63%, 28%);
}

/* ── Auth Pages ── */
.auth-footer a {
    color: hsl(244, 63%, 44%);
}

.auth-footer a:hover {
    color: hsl(38, 95%, 40%);
}

/* ── Product Detail ── */
.product-detail-price .current-price {
    color: hsl(244, 63%, 44%);
}

/* ── Cart Summary Total ── */
.summary-row.total {
    color: hsl(244, 63%, 30%);
    border-top: 2px solid hsl(244, 63%, 44%);
}

/* ── Coupon button ── */
.coupon-form button:hover {
    background: hsl(38, 95%, 50%);
    color: hsl(240, 10%, 10%);
}

/* ── Checkout step bubble ── */
.checkout-card h3 span {
    background: hsl(244, 63%, 44%);
}

/* ── Blog ── */
.blog-category {
    color: hsl(244, 63%, 44%);
    font-size: var(--fs-9);
    font-weight: var(--weight-600);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.blog-title a:hover {
    color: hsl(244, 63%, 44%);
}

/* ── Footer ── */
.footer-category-title,
.nav-title {
    color: hsl(244, 63%, 44%);
}

.footer-nav-link:hover,
.footer-category-link:hover {
    color: hsl(38, 95%, 38%);
}

/* ── Mobile nav ── */
.menu-top .menu-title {
    color: hsl(244, 63%, 44%);
}

.mobile-bottom-navigation .count {
    background: hsl(38, 95%, 52%);
    color: hsl(240, 10%, 10%);
}

/* ── Scrollbar ── */
body::-webkit-scrollbar-thumb {
    background: hsl(244, 30%, 75%);
}

body::-webkit-scrollbar-thumb:hover {
    background: hsl(244, 63%, 44%);
}

/* ── Payment icon ── */
.payment-icon {
    color: hsl(244, 63%, 44%);
}

/* ── Radio accent ── */
.payment-method-label input[type="radio"] {
    accent-color: hsl(244, 63%, 44%);
}

/* ── Flash states ── */
.flash-info {
    border-left-color: hsl(244, 63%, 60%);
    background: hsl(244, 63%, 97%);
    color: hsl(244, 63%, 30%);
}

/* ── Sidebar product price ── */
.sidebar-product-price .price {
    color: hsl(244, 63%, 44%);
    font-weight: var(--weight-700);
}

/* ── Price (general) ── */
.price {
    color: hsl(244, 63%, 40%);
    font-weight: var(--weight-700);
}

/* ── Page Hero gradient ── */
.page-hero {
    background: linear-gradient(135deg,
            hsl(244, 63%, 97%) 0%,
            hsl(38, 95%, 96%) 100%) !important;
}

/* ── Services section ── */
.service-name {
    color: hsl(240, 10%, 10%);
    font-weight: var(--weight-600);
    font-size: var(--fs-7);
}

.service-sub {
    color: var(--sonic-silver);
    font-size: var(--fs-9);
}

/* ── TrendMart Logo Text Fallback ── */
.header-logo-text {
    font-size: var(--fs-3);
    font-weight: var(--weight-700);
    background: linear-gradient(90deg, hsl(244, 63%, 44%), hsl(38, 95%, 52%));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.5px;
}