/* ============================================================
   Technosys Digital - Global Stylesheet
   Mobile-first, then enhanced at 768px / 1024px breakpoints.
   ============================================================ */

:root {
    --color-primary: #d35400;      /* Technosys orange — brand accent */
    --color-primary-dark: #a84300;
    --color-primary-light: #fdf3ec;
    --color-dark: #131921;         /* header background */
    --color-dark-2: #1c2733;       /* footer background */
    --color-text: #1a1d21;
    --color-muted: #6b7280;
    --color-border: #e5e7eb;
    --color-success: #17803d;
    --color-danger: #c0342a;
    --color-bg: #f6f7f9;
    --radius: 8px;
    --radius-sm: 5px;
    --container-width: 1240px;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08);
    --shadow-md: 0 4px 10px rgba(16, 24, 40, 0.08), 0 2px 4px rgba(16, 24, 40, 0.06);
    --shadow-lg: 0 12px 24px rgba(16, 24, 40, 0.12), 0 4px 8px rgba(16, 24, 40, 0.06);
    --transition: 150ms ease;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Inter', 'Segoe UI', Roboto, Arial, sans-serif;
    color: var(--color-text);
    line-height: 1.55;
    background: var(--color-bg);
    padding-bottom: 56px; /* space for mobile bottom nav */
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; }

a { text-decoration: none; color: inherit; transition: color var(--transition); }
ul { list-style: none; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }

:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 3px;
}

input, select, textarea {
    font-family: inherit;
    transition: border-color var(--transition), box-shadow var(--transition);
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(211, 84, 0, 0.15);
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 16px;
}

.skip-link {
    position: absolute; left: -999px; top: 0;
    background: #fff; padding: 8px 16px; z-index: 999;
}
.skip-link:focus { left: 8px; top: 8px; }

/* ---- Flash messages (legacy — most alerts now use SweetAlert2; a couple
   of static print-friendly contexts, like the invoice page, still use these) ---- */
.flash { padding: 10px 16px; margin: 12px 0; border-radius: var(--radius); }
.flash-error { background: #fdecea; color: var(--color-danger); }
.flash-success { background: #e6f4ea; color: var(--color-success); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header { background: var(--color-dark); color: #fff; position: sticky; top: 0; z-index: 120; box-shadow: var(--shadow-md); }

.header-top__inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    flex-wrap: wrap;
}

.logo {
    color: #fff;
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.mobile-menu-toggle {
    background: none; border: none; width: 32px; height: 24px;
    display: flex; flex-direction: column; justify-content: space-between;
}
.mobile-menu-toggle span { display: block; height: 3px; background: #fff; border-radius: 2px; }

.search-form {
    position: relative;
    flex: 1 1 auto;
    order: 3;
    width: 100%;
    display: flex;
}
.search-input {
    flex: 1;
    padding: 11px 14px;
    border: 1px solid transparent;
    border-radius: var(--radius) 0 0 var(--radius);
    font-size: 0.95rem;
    font-family: inherit;
    transition: box-shadow var(--transition);
}
.search-input:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(211, 84, 0, 0.35);
}
.search-submit {
    background: var(--color-primary);
    color: #fff;
    border: none;
    padding: 0 18px;
    border-radius: 0 var(--radius) var(--radius) 0;
    transition: background var(--transition);
}
.search-submit:hover { background: var(--color-primary-dark); }
.search-suggestions {
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: #fff;
    color: var(--color-text);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow-lg);
    z-index: 50;
    max-height: 400px;
    overflow-y: auto;
}
.search-suggestions a {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--color-border);
    transition: background var(--transition);
}
.search-suggestions a img { width: 36px; height: 36px; object-fit: cover; border-radius: 4px; }
.search-suggestions a:hover { background: #f5f5f5; }

.header-actions {
    display: flex;
    gap: 18px;
    margin-left: auto;
}
.header-action {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fff;
    font-size: 0.75rem;
}
.header-action__icon { font-size: 1.2rem; }
.header-action__badge {
    position: absolute; top: -6px; right: -10px;
    background: var(--color-primary);
    color: #fff;
    font-size: 0.65rem;
    padding: 1px 5px;
    border-radius: 10px;
    min-width: 16px;
    text-align: center;
}

/* ---- Category nav bar ---- */
.category-nav { background: #232f3e; }
.category-nav__list {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
}
.category-nav__list::-webkit-scrollbar { display: none; }
.category-nav__item { position: relative; flex: 0 0 auto; }
.category-nav__item > a {
    display: block;
    color: #fff;
    padding: 10px 14px;
    font-size: 0.85rem;
    white-space: nowrap;
}
.category-nav__item:hover > a,
.category-nav__item > a:focus { background: rgba(255,255,255,0.1); }

.category-dropdown {
    display: none;
    position: absolute;
    top: 100%; left: 0;
    background: #fff;
    color: var(--color-text);
    min-width: 220px;
    box-shadow: var(--shadow-lg);
    border-radius: 0 0 var(--radius) var(--radius);
    z-index: 40;
}
.category-nav__item.has-dropdown:hover .category-dropdown { display: block; }
.category-dropdown li a { display: block; padding: 8px 14px; }
.category-dropdown li a:hover { background: #f5f5f5; }

/* ---- Mobile slide-in menu ---- */
.mobile-menu {
    position: fixed; top: 0; left: -280px; bottom: 0; width: 280px;
    background: #fff; z-index: 200;
    transition: left 0.25s ease;
    overflow-y: auto;
}
.mobile-menu.is-open { left: 0; }
.mobile-menu__header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px; background: var(--color-dark); color: #fff;
}
.mobile-menu__header button { background: none; border: none; color: #fff; font-size: 1.4rem; }
.mobile-menu__list li a { display: block; padding: 14px 16px; border-bottom: 1px solid var(--color-border); }

.mobile-menu-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 190;
}

/* ============================================================
   HERO CAROUSEL
   ============================================================ */
.hero-carousel { position: relative; overflow: hidden; background: #ddd; }
.hero-carousel__track { display: flex; transition: none; }
.hero-slide { min-width: 100%; display: none; }
.hero-slide.is-active { display: block; }
.hero-slide img { width: 100%; height: 220px; object-fit: cover; }
.hero-slide__caption {
    position: absolute; bottom: 20px; left: 20px;
    color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,0.6);
}
.hero-carousel__nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    background: rgba(0,0,0,0.4); color: #fff; border: none;
    width: 34px; height: 34px; border-radius: 50%;
    display: none;
}
.hero-carousel__nav--prev { left: 12px; }
.hero-carousel__nav--next { right: 12px; }
.hero-carousel__dots {
    position: absolute; bottom: 8px; left: 0; right: 0;
    display: flex; justify-content: center; gap: 6px;
}
.hero-carousel__dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: rgba(255,255,255,0.6); border: none;
}
.hero-carousel__dot.is-active { background: #fff; }

/* ============================================================
   CATEGORY TILES
   ============================================================ */
.category-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 20px 0;
}
.category-tile {
    background: #fff;
    border-radius: var(--radius);
    padding: 14px 8px;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 500;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.category-tile:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
    border-color: transparent;
    color: var(--color-primary);
}
.category-tile__icon { display: block; font-size: 1.6rem; margin-bottom: 6px; }

/* ============================================================
   PRODUCT RAILS & CARDS
   ============================================================ */
.product-rail { margin: 28px 0; }
.product-rail__header {
    display: flex; justify-content: space-between; align-items: baseline;
    margin-bottom: 12px;
}
.product-rail__header h2 { font-size: 1.15rem; }
.see-all { color: var(--color-primary); font-size: 0.85rem; white-space: nowrap; }

.product-rail__track {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
}

.product-card {
    position: relative;
    flex: 0 0 160px;
    scroll-snap-align: start;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.product-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
    border-color: transparent;
}
.product-card__image-link {
    display: block; background: #fafafa;
    height: 156px; /* fixed height on the CONTAINER, not just the <img> — so a
    broken/missing image (which some browsers size to its alt text instead of
    the intended box) can never collapse this area and overlap the badge/heart
    sitting above it */
    overflow: hidden;
}
.product-card__image { width: 100%; height: 140px; object-fit: contain; padding: 8px; }
.product-card__body { padding: 8px 10px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.product-card__brand { font-size: 0.7rem; color: var(--color-muted); text-transform: uppercase; }
.product-card__name {
    font-size: 0.85rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.4em;
}
.product-card__rating { font-size: 0.75rem; color: var(--color-muted); display: flex; gap: 4px; align-items: center; }
.stars {
    display: inline-block;
    font-size: 0.8rem;
}
.stars::before { content: "★★★★★"; background: linear-gradient(90deg, gold calc(var(--rating,0) / 5 * 100%), #ccc calc(var(--rating,0) / 5 * 100%)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.product-card__price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.price-current { font-weight: 700; font-size: 0.95rem; }
.price-original { text-decoration: line-through; color: var(--color-muted); font-size: 0.75rem; }
.price-discount { color: var(--color-success); font-size: 0.75rem; font-weight: 600; }
.product-card__stock { font-size: 0.7rem; }
.product-card__stock.in-stock { color: var(--color-success); }
.product-card__stock.out-of-stock { color: var(--color-danger); }
.product-card__actions { display: flex; gap: 6px; margin-top: auto; }

.badge {
    position: absolute; top: 8px; left: 8px;
    background: var(--color-primary); color: #fff;
    font-size: 0.65rem; padding: 2px 6px; border-radius: 3px; z-index: 2;
}
.wishlist-toggle {
    position: absolute; top: 6px; right: 6px;
    background: rgba(255,255,255,0.85); border: none;
    width: 26px; height: 26px; border-radius: 50%;
    z-index: 2; font-size: 0.9rem;
}
.wishlist-toggle.is-active { color: var(--color-primary); }

.btn {
    border: none; border-radius: var(--radius);
    padding: 8px 10px; font-size: 0.78rem; font-weight: 600; flex: 1;
    text-align: center;
    transition: background var(--transition), box-shadow var(--transition), transform var(--transition), border-color var(--transition);
    cursor: pointer;
}
.btn-outline { background: #fff; border: 1px solid var(--color-primary); color: var(--color-primary); }
.btn-outline:hover { background: var(--color-primary-light); }
.btn-primary { background: var(--color-primary); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--color-primary-dark); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* ---- Brand rail ---- */
.brand-rail__track { display: flex; gap: 10px; overflow-x: auto; }
.brand-tile {
    flex: 0 0 130px;
    background: #fff; border-radius: var(--radius);
    padding: 16px 10px; text-align: center;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border);
    display: flex; flex-direction: column; gap: 4px;
    font-size: 0.8rem;
    transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.brand-tile:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: transparent; color: var(--color-primary); }
.brand-tile span { color: var(--color-muted); font-size: 0.7rem; }

/* ---- Reviews ---- */
.reviews-rail__track { display: flex; gap: 12px; overflow-x: auto; }
.review-card {
    flex: 0 0 240px;
    background: #fff; border-radius: var(--radius);
    padding: 14px; box-shadow: var(--shadow-sm);
    font-size: 0.85rem;
}
.review-card__stars { margin-bottom: 6px; }
.review-card__stars::before {
    content: "★★★★★";
    background: linear-gradient(90deg, gold calc(var(--rating,0) / 5 * 100%), #ccc calc(var(--rating,0) / 5 * 100%));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.review-card__meta { display: block; margin-top: 8px; color: var(--color-muted); font-size: 0.75rem; }

/* ---- Service promo strip ---- */
.service-promo { display: flex; flex-direction: column; gap: 12px; margin: 24px auto; }
.service-promo__item {
    background: #fff; border-radius: var(--radius);
    padding: 16px; display: flex; align-items: center; gap: 12px;
    box-shadow: var(--shadow-sm);
    flex-wrap: wrap;
}
.service-promo__icon { font-size: 1.6rem; }
.service-promo__item p { font-size: 0.8rem; color: var(--color-muted); }
.service-promo__item .btn { flex: none; margin-left: auto; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background: var(--color-dark-2); color: #cfd8e3; margin-top: 20px; }
.footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 30px 16px;
}
.footer-col h3, .footer-col h4 { color: #fff; margin-bottom: 10px; }
.footer-col ul li { margin-bottom: 6px; font-size: 0.85rem; }
.footer-col p { font-size: 0.85rem; margin-bottom: 4px; }
.footer-bottom { text-align: center; padding: 14px 16px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 0.8rem; }
.footer-credit { margin-top: 6px; font-size: 0.75rem; opacity: 0.85; }
.footer-credit a { color: var(--color-primary); font-weight: 600; }

/* ============================================================
   MOBILE BOTTOM NAV (hidden on desktop)
   ============================================================ */
.mobile-bottom-nav {
    position: fixed; bottom: 0; left: 0; right: 0;
    display: flex;
    background: #fff;
    border-top: 1px solid var(--color-border);
    z-index: 100;
}
.mobile-bottom-nav__item {
    flex: 1; text-align: center; padding: 8px 0; font-size: 0.65rem;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.mobile-bottom-nav__item span { font-size: 1.1rem; }

/* ============================================================
   CATALOGUE LISTING PAGES (category / brand / search)
   ============================================================ */
.breadcrumb {
    display: flex; flex-wrap: wrap; gap: 6px;
    font-size: 0.8rem; color: var(--color-muted);
    margin: 14px 0 6px;
}
.breadcrumb a { color: var(--color-primary); }

.listing-header {
    display: flex; justify-content: space-between; align-items: baseline;
    flex-wrap: wrap; gap: 8px; margin-bottom: 10px;
}
.listing-header h1 { font-size: 1.3rem; }
.listing-count { font-size: 0.85rem; color: var(--color-muted); }

.listing-toolbar {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 14px; flex-wrap: wrap; gap: 10px;
}
.sort-form { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; }
.sort-form select { padding: 6px 8px; border-radius: var(--radius); border: 1px solid var(--color-border); }

.listing-layout { display: flex; gap: 20px; align-items: flex-start; }

/* ---- Filter sidebar ---- */
.filter-sidebar {
    flex: 0 0 240px;
    background: #fff;
    border-radius: var(--radius);
    padding: 16px;
    box-shadow: var(--shadow-sm);
}
.filter-sidebar__header { display: none; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.filter-sidebar__close { background: none; border: none; font-size: 1.4rem; }

.filter-group { border: none; border-bottom: 1px solid var(--color-border); padding-bottom: 12px; margin-bottom: 12px; }
.filter-group legend { font-weight: 600; font-size: 0.85rem; margin-bottom: 8px; }
.filter-checkbox { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; margin-bottom: 6px; }
.filter-count { color: var(--color-muted); }
.filter-price-inputs { display: flex; align-items: center; gap: 6px; }
.filter-price-inputs input { width: 70px; padding: 6px; border: 1px solid var(--color-border); border-radius: 4px; }
.filter-form__actions { display: flex; gap: 8px; margin-top: 10px; }

.listing-toolbar__filter-btn { display: inline-flex; }

/* ---- Product grid (listing pages use a wrapping grid, not a rail) ---- */
.listing-grid-wrap { flex: 1; min-width: 0; }
.product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}
.product-grid .product-card { flex: none; width: 100%; }
.listing-empty { padding: 40px 0; text-align: center; color: var(--color-muted); }

/* ---- Pagination ---- */
.pagination { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 24px 0; }
.pagination__link {
    padding: 6px 12px; border: 1px solid var(--color-border); border-radius: 4px;
    font-size: 0.85rem; background: #fff;
}
.pagination__link.is-active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.pagination__ellipsis { padding: 6px 4px; color: var(--color-muted); }

/* ---- Mobile filter drawer ---- */
@media (max-width: 767px) {
    .filter-sidebar {
        position: fixed; top: 0; right: -100%; bottom: 0; width: 85%; max-width: 320px;
        z-index: 210; overflow-y: auto; border-radius: 0;
        transition: right 0.25s ease;
    }
    .filter-sidebar.is-open { right: 0; }
    .filter-sidebar__header { display: flex; }
    .filter-sidebar-overlay.is-open { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 200; }
}

/* ============================================================
   PRODUCT DETAIL PAGE
   ============================================================ */
.product-detail { display: flex; flex-direction: column; gap: 20px; margin: 16px 0; }

.product-gallery__main {
    background: #fafafa; border-radius: var(--radius);
    display: flex; align-items: center; justify-content: center;
    position: relative; cursor: zoom-in; overflow: hidden;
    min-height: 320px; /* same reasoning as .product-card__image-link — reserves
    space even if the image is missing/broken, so nothing else on the page shifts */
}
.product-gallery__main img { max-height: 320px; object-fit: contain; padding: 16px; }
.product-gallery__zoom-hint {
    position: absolute; bottom: 8px; right: 8px;
    background: rgba(0,0,0,0.6); color: #fff; font-size: 0.7rem;
    padding: 2px 8px; border-radius: 4px;
}
.product-gallery__thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; }
.gallery-thumb {
    flex: 0 0 60px; height: 60px; border: 2px solid transparent;
    border-radius: 4px; background: #fafafa; padding: 2px;
}
.gallery-thumb.is-active { border-color: var(--color-primary); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: contain; }

.image-zoom-modal {
    position: fixed; inset: 0; background: rgba(0,0,0,0.85);
    z-index: 300; display: flex; align-items: center; justify-content: center;
}
/* Same fix as .compare-bar above — this rule's unconditional `display: flex`
   otherwise defeats the `hidden` attribute set in the page markup and by
   main.js, which would leave this full-screen overlay visible from page
   load onward. */
.image-zoom-modal[hidden] {
    display: none;
}
.image-zoom-modal img { max-width: 92%; max-height: 92%; object-fit: contain; }
.image-zoom-modal__close {
    position: absolute; top: 16px; right: 20px;
    background: none; border: none; color: #fff; font-size: 2rem;
}

.product-info__brand { color: var(--color-primary); font-size: 0.85rem; text-transform: uppercase; }
.product-info__title { font-size: 1.3rem; margin: 6px 0; }
.product-info__model { color: var(--color-muted); font-size: 0.85rem; margin-bottom: 8px; }
.product-info__rating { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; margin-bottom: 8px; }
.product-info__rating a { color: var(--color-primary); }
.product-info__no-rating { color: var(--color-muted); font-size: 0.85rem; margin-bottom: 8px; }

.product-info__price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 10px 0 2px; }
.price-current-lg { font-size: 1.6rem; font-weight: 700; }
.product-info__tax-note { font-size: 0.75rem; color: var(--color-muted); margin-bottom: 8px; }
.product-info__emi { font-size: 0.85rem; background: #fff8e6; padding: 8px 10px; border-radius: 4px; margin-bottom: 10px; }
.product-info__stock { font-weight: 600; margin-bottom: 10px; }
.product-info__stock.in-stock { color: var(--color-success); }
.product-info__stock.out-of-stock { color: var(--color-danger); }
.product-info__meta p { font-size: 0.85rem; margin-bottom: 4px; }

.product-info__actions { display: flex; gap: 10px; margin: 16px 0 10px; }
.btn-lg { padding: 12px 16px; font-size: 0.95rem; flex: 1; }

.product-info__secondary-actions { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.link-action { background: none; border: none; color: var(--color-primary); font-size: 0.85rem; display: flex; align-items: center; gap: 6px; }
.wishlist-toggle-detail.is-active { color: var(--color-danger); font-weight: 600; }
.compare-checkbox-label { cursor: pointer; }

.product-section { margin: 30px 0; }
.product-section h2 { font-size: 1.15rem; margin-bottom: 12px; }
.spec-group-title { font-size: 0.95rem; margin: 14px 0 6px; color: var(--color-muted); }
.spec-table { width: 100%; border-collapse: collapse; margin-bottom: 10px; }
.spec-table tr { border-bottom: 1px solid var(--color-border); }
.spec-table th, .spec-table td { text-align: left; padding: 8px 6px; font-size: 0.85rem; }
.spec-table th { width: 40%; color: var(--color-muted); font-weight: 500; }

/* ---- Review form + full review cards ---- */
.review-form { display: flex; flex-direction: column; gap: 10px; max-width: 480px; margin-bottom: 20px; }
.review-form__rating { display: flex; gap: 10px; border: none; font-size: 0.85rem; flex-wrap: wrap; }
.review-form__rating legend { width: 100%; font-weight: 600; margin-bottom: 4px; }
.review-form input[type="text"], .review-form textarea {
    padding: 8px; border: 1px solid var(--color-border); border-radius: var(--radius); font: inherit;
}
.review-card--full { flex: none; margin-bottom: 12px; }
.reviews-list { display: flex; flex-direction: column; gap: 10px; }

/* ============================================================
   COMPARE PAGE
   ============================================================ */
.compare-checkbox-card {
    position: absolute; top: 40px; right: 6px; z-index: 2;
    background: rgba(255,255,255,0.9); font-size: 0.65rem;
    padding: 2px 6px; border-radius: 4px; display: flex; align-items: center; gap: 4px;
}
.compare-table-wrap { overflow-x: auto; margin: 16px 0; }
.compare-table { border-collapse: collapse; width: 100%; min-width: 600px; background: #fff; }
.compare-table th, .compare-table td { border: 1px solid var(--color-border); padding: 10px; font-size: 0.85rem; text-align: left; vertical-align: top; }
.compare-table__label-col { width: 160px; }
.compare-table thead th { position: relative; text-align: center; }
.compare-table thead img { max-height: 100px; margin: 0 auto 6px; }
.compare-table__name { display: block; font-weight: 600; }
.compare-remove { position: absolute; top: 4px; right: 8px; color: var(--color-danger); font-size: 1.1rem; }
.compare-spec-group { color: var(--color-muted); font-size: 0.7rem; }

.compare-bar {
    position: fixed; bottom: 56px; left: 0; right: 0;
    background: var(--color-dark); color: #fff;
    padding: 10px 16px; display: flex; align-items: center; justify-content: center; gap: 14px;
    font-size: 0.85rem; z-index: 150;
}
/* The rule above's `display: flex` otherwise ties in specificity with the
   browser's built-in `[hidden] { display: none }` rule and — being an
   author stylesheet loaded after the UA stylesheet — wins the tie, which
   silently defeats the `hidden` attribute JS sets when the compare list is
   empty. This override restores correct hiding. */
.compare-bar[hidden] {
    display: none;
}
.btn-sm { padding: 6px 12px; font-size: 0.8rem; flex: none; }

/* ============================================================
   CART PAGE
   ============================================================ */
.cart-layout { display: flex; flex-direction: column-reverse; gap: 20px; margin: 16px 0 60px; }
.cart-items-col { flex: 1; }
.cart-summary-col { flex: 0 0 auto; }

.cart-line {
    display: grid; grid-template-columns: 70px 1fr auto;
    gap: 12px; background: #fff; border-radius: var(--radius);
    padding: 12px; margin-bottom: 10px; box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    align-items: start;
}
.cart-line__image img { width: 70px; height: 70px; object-fit: contain; }
.cart-line__name { font-size: 0.9rem; font-weight: 600; display: block; margin-bottom: 4px; }
.cart-line__price { color: var(--color-muted); font-size: 0.85rem; margin-bottom: 6px; }
.cart-line__warning { color: var(--color-danger); font-size: 0.75rem; margin-bottom: 6px; }
.cart-line__controls { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cart-line__total { font-weight: 700; font-size: 0.9rem; white-space: nowrap; }
.cart-line--saved { opacity: 0.9; }

.saved-for-later__heading { margin: 24px 0 10px; font-size: 1.05rem; }

.qty-stepper { display: flex; align-items: center; border: 1px solid var(--color-border); border-radius: 4px; }
.qty-stepper button { background: #f5f5f5; border: none; width: 28px; height: 28px; font-size: 1rem; }
.qty-input { width: 40px; text-align: center; border: none; border-left: 1px solid var(--color-border); border-right: 1px solid var(--color-border); height: 28px; }

.order-summary-box { background: #fff; border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-sm); position: sticky; top: 12px; }
.order-summary-box h2 { font-size: 1.05rem; margin-bottom: 12px; }
.order-summary-rows { margin: 10px 0; }
.order-summary-row { display: flex; justify-content: space-between; padding: 6px 0; font-size: 0.88rem; border-bottom: 1px solid var(--color-border); }
.order-summary-row--total { font-weight: 700; font-size: 1rem; border-bottom: none; }
.free-delivery-note { font-size: 0.78rem; color: var(--color-success); margin-bottom: 10px; }
.checkout-btn { display: block; text-align: center; width: 100%; margin-top: 10px; }
.checkout-btn.is-disabled { pointer-events: none; opacity: 0.5; }

.coupon-form { display: flex; gap: 8px; margin-bottom: 4px; }
.coupon-form input { flex: 1; padding: 8px; border: 1px solid var(--color-border); border-radius: 4px; }
.coupon-message { font-size: 0.78rem; min-height: 1em; margin-bottom: 8px; }
.coupon-message--error { color: var(--color-danger); }

/* ============================================================
   CHECKOUT & CONFIRMATION PAGES
   ============================================================ */
.checkout-layout { display: flex; flex-direction: column-reverse; gap: 20px; margin: 16px 0 60px; }
.checkout-main-col { flex: 1; display: flex; flex-direction: column; gap: 20px; }
.checkout-step { background: #fff; border-radius: var(--radius); padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,0.06); }
.checkout-step h2 { font-size: 1rem; margin-bottom: 12px; }
.checkout-guest-note { font-size: 0.82rem; background: #fff8e6; padding: 8px 10px; border-radius: 4px; margin-bottom: 12px; }
.checkout-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.checkout-fields input, .checkout-fields select, .checkout-fields textarea {
    padding: 10px; border: 1px solid var(--color-border); border-radius: 4px; font: inherit; width: 100%;
}
.checkout-fields label { font-size: 0.85rem; font-weight: 600; display: flex; flex-direction: column; gap: 4px; }
.checkout-fields .span-2 { grid-column: 1 / -1; }

.checkout-review-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 8px; }
.checkout-review-line { display: flex; align-items: center; gap: 10px; font-size: 0.85rem; }
.checkout-review-line img { width: 40px; height: 40px; object-fit: contain; background: #fafafa; border-radius: 4px; }
.checkout-review-line__name { flex: 1; }

.payment-option { display: block; padding: 10px; border: 1px solid var(--color-border); border-radius: 4px; margin-bottom: 8px; font-size: 0.88rem; }
.payment-option--disabled { color: var(--color-muted); }
.checkout-recalc-note { font-size: 0.72rem; color: var(--color-muted); margin: 8px 0; }

.order-confirmation { background: #fff; border-radius: var(--radius); padding: 24px; margin: 20px 0; box-shadow: var(--shadow-sm); }
.order-confirmation h1 { font-size: 1.3rem; color: var(--color-success); margin-bottom: 10px; }
.order-confirmation__number { font-size: 1rem; margin-bottom: 10px; }
.order-confirmation h2 { font-size: 1rem; margin: 16px 0 8px; }

/* ============================================================
   AUTH PAGES (login/register/forgot/reset)
   ============================================================ */
.auth-page { display: flex; justify-content: center; padding: 30px 16px 60px; }
.auth-card { background: #fff; border-radius: var(--radius); padding: 24px; max-width: 420px; width: 100%; box-shadow: var(--shadow-sm); }
.auth-card h1 { font-size: 1.3rem; margin-bottom: 16px; }
.auth-form { display: flex; flex-direction: column; gap: 12px; }
.auth-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; font-weight: 600; }
.auth-form input, .auth-form select, .auth-form textarea {
    padding: 10px; border: 1px solid var(--color-border); border-radius: var(--radius); font: inherit; font-weight: 400;
}
.auth-form input:disabled { background: #f5f5f5; color: var(--color-muted); }
.auth-alt-link { margin-top: 14px; font-size: 0.85rem; text-align: center; }
.auth-alt-link a { color: var(--color-primary); }
.auth-form--inline { max-width: 420px; margin-bottom: 10px; }

/* ============================================================
   ACCOUNT AREA (dashboard, profile, addresses, orders)
   ============================================================ */
.account-layout { display: flex; flex-direction: column; gap: 20px; margin: 16px 0 60px; }
.account-sidebar { flex: 0 0 200px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.account-sidebar ul { padding: 8px 0; }
.account-sidebar a { display: flex; align-items: center; gap: 8px; padding: 10px 16px; font-size: 0.88rem; }
.account-sidebar a.is-active { background: #fff3ea; color: var(--color-primary); font-weight: 600; }
.account-sidebar__logout { color: var(--color-danger) !important; }
.account-main { flex: 1; min-width: 0; }
.account-summary-line { color: var(--color-muted); font-size: 0.85rem; margin-bottom: 16px; }

.account-dashboard-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0 28px; }
.account-tile { background: #fff; border-radius: var(--radius); padding: 16px; text-align: center; box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); transition: box-shadow var(--transition), transform var(--transition); }
.account-tile:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.account-tile strong { display: block; font-size: 1.3rem; color: var(--color-primary); }
.account-tile span { font-size: 0.78rem; color: var(--color-muted); }

.account-section { background: #fff; border-radius: var(--radius); padding: 16px; margin-bottom: 20px; box-shadow: var(--shadow-sm); }
.account-section h2 { font-size: 1rem; margin-bottom: 12px; }

.order-list { display: flex; flex-direction: column; gap: 8px; }
.order-list__row {
    display: flex; justify-content: space-between; align-items: center; gap: 10px;
    background: #fff; border-radius: var(--radius); padding: 12px 14px;
    box-shadow: var(--shadow-sm); font-size: 0.85rem; flex-wrap: wrap;
}
.order-list__number { font-weight: 600; }
.order-list__date { color: var(--color-muted); }
.order-list__total { font-weight: 700; }

.order-status-pill { padding: 3px 10px; border-radius: 12px; font-size: 0.72rem; font-weight: 600; background: #eee; }
.order-status-pill--placed, .order-status-pill--payment_confirmed, .order-status-pill--processing { background: #fff3cd; color: #806000; }
.order-status-pill--packed, .order-status-pill--shipped, .order-status-pill--out_for_delivery { background: #cfe2ff; color: #084298; }
.order-status-pill--delivered { background: #d1e7dd; color: #0f5132; }
.order-status-pill--cancelled, .order-status-pill--refunded { background: #f8d7da; color: #842029; }
.order-status-pill--return_requested { background: #e2d9f3; color: #4a2f7a; }
.order-status-pill--requested { background: #fff3cd; color: #806000; }
.order-status-pill--confirmed, .order-status-pill--active { background: #cfe2ff; color: #084298; }
.order-status-pill--in_progress { background: #cfe2ff; color: #084298; }
.order-status-pill--completed { background: #d1e7dd; color: #0f5132; }
.order-status-pill--expired { background: #f8d7da; color: #842029; }

.status-timeline { display: flex; flex-direction: column; gap: 12px; }
.status-timeline li { border-left: 3px solid var(--color-primary); padding-left: 12px; font-size: 0.85rem; }
.status-timeline li span { display: block; color: var(--color-muted); font-size: 0.75rem; }

.address-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.address-card { background: #fff; border-radius: var(--radius); padding: 14px; box-shadow: var(--shadow-sm); position: relative; font-size: 0.85rem; }
.address-card.is-default { border: 2px solid var(--color-primary); }
.address-type-tag { display: inline-block; background: #f0f0f0; padding: 1px 8px; border-radius: 10px; font-size: 0.7rem; margin: 4px 0; }
.address-card__actions { display: flex; gap: 14px; margin-top: 10px; }
.link-action--danger { color: var(--color-danger); }
.inline-form { display: inline; }
.address-form { margin-top: 10px; }
.address-form__actions { display: flex; gap: 10px; margin-top: 6px; }

.return-form { display: flex; flex-direction: column; gap: 8px; max-width: 420px; }
.return-form textarea { padding: 8px; border: 1px solid var(--color-border); border-radius: var(--radius); font: inherit; }

/* ============================================================
   PAYMENT PAGE (Razorpay)
   ============================================================ */
.payment-card { text-align: center; }
.payment-card p { margin-bottom: 14px; }
.payment-status-msg { font-size: 0.85rem; color: var(--color-muted); min-height: 1.2em; margin-top: 10px; }
.payment-cancel-note { font-size: 0.78rem; color: var(--color-muted); margin-top: 20px; }

/* ============================================================
   SERVICES & AMC
   ============================================================ */
.service-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 12px; }
.service-card { background: #fff; border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow-sm); border: 1px solid var(--color-border); display: flex; flex-direction: column; gap: 8px; transition: box-shadow var(--transition), transform var(--transition); }
.service-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.service-card h3 { font-size: 0.95rem; }
.service-card p { font-size: 0.82rem; color: var(--color-muted); flex: 1; }
.amc-callout { margin: 24px 0; }

.amc-plans-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 16px 0; }
.amc-plan-card { background: #fff; border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow-sm); text-align: center; transition: box-shadow var(--transition), transform var(--transition); }
.amc-plan-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.amc-plan-card h3 { margin-bottom: 8px; color: var(--color-primary); }
.amc-plan-card p { font-size: 0.82rem; color: var(--color-muted); }
.amc-plan-card--highlight { border: 2px solid var(--color-primary); }

/* ============================================================
   RESPONSIVE BREAKPOINTS
   ============================================================ */

/* Tablet and up */
@media (min-width: 768px) {
    body { padding-bottom: 0; }
    .mobile-bottom-nav { display: none; }
    .mobile-menu-toggle { display: none; }

    .header-top__inner { flex-wrap: nowrap; }
    .search-form { order: 0; width: auto; }

    .category-tiles { grid-template-columns: repeat(5, 1fr); }

    .product-card { flex: 0 0 200px; }
    .hero-slide img { height: 320px; }
    .hero-carousel__nav { display: block; }

    .footer-grid { grid-template-columns: repeat(4, 1fr); }
    .service-promo { flex-direction: row; }
    .service-promo__item { flex: 1; }

    .product-grid { grid-template-columns: repeat(3, 1fr); }
    .listing-toolbar__filter-btn { display: none; }

    .product-detail { flex-direction: row; gap: 30px; }
    .product-gallery { flex: 0 0 380px; }
    .product-info { flex: 1; }
    .compare-bar { bottom: 0; }

    .cart-layout, .checkout-layout { flex-direction: row; align-items: flex-start; }
    .cart-summary-col, .checkout-summary-col { flex: 0 0 320px; }

    .account-layout { flex-direction: row; align-items: flex-start; }
    .address-grid { grid-template-columns: repeat(2, 1fr); }
    .checkout-fields { grid-template-columns: 1fr 1fr 1fr; }
    .service-grid { grid-template-columns: repeat(3, 1fr); }
    .amc-plans-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Desktop */
@media (min-width: 1024px) {
    .category-tiles { grid-template-columns: repeat(5, 1fr); }
    .product-card { flex: 0 0 220px; }
    .hero-slide img { height: 400px; }
    .product-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Small phones: avoid horizontal overflow on tight screens */
@media (max-width: 360px) {
    .product-card { flex: 0 0 140px; }
    .logo { font-size: 1.05rem; }
}