/* =====================================================================
   Rastogi Book World — Storefront styles
   Modern clean e-commerce UI · Mobile-first · Responsive
   ===================================================================== */

:root {
    /* ---- Flipkart-inspired palette ---- */
    --brand:        #002B41;   /* Flipkart blue */
    --brand-dark:   #1c5fd6;
    --brand-light:  #e7f0ff;
    --accent:       #ff9f00;   /* ADD TO CART yellow */
    --accent-dark:  #f39500;
    --buy:          #fb641b;   /* BUY NOW orange */
    --buy-dark:     #e2570f;
    --success:      #388e3c;   /* rating / discount green */
    --rating:       #388e3c;
    --danger:       #ff6161;
    --warning:      #ff9f00;
    --ink:          #212121;
    --muted:        #878787;
    --line:         #e0e0e0;
    --bg:           #f1f3f6;   /* Flipkart page grey */
    --card:         #ffffff;
    --footer:       #172337;   /* Flipkart footer navy */
    --radius:       4px;
    --radius-sm:    3px;
    --shadow:       0 1px 2px rgba(0,0,0,.08);
    --shadow-md:    0 4px 14px rgba(0,0,0,.14);
    --maxw:         1520px;    /* wide, modern full-width feel */
    --font:         "Roboto", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--font);
    color: var(--ink);
    background: var(--bg);
    line-height: 1.55;
    font-size: 16px;
}

img { max-width: 100%; display: block; height: auto; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

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

.skip-link {
    position: absolute; left: -999px; top: 0; background: var(--brand); color: #fff;
    padding: 8px 14px; z-index: 1000;
}
.skip-link:focus { left: 8px; top: 8px; }

/* =====================================================================
   Z-INDEX SCALE (kept consistent to avoid stacking conflicts)
     200  sticky site header (desktop)      260  header dropdown submenus
     600  sticky header (mobile)            610  mobile nav drawer
     450  mobile nav backdrop
     710  filter backdrop (mobile)          720  filter drawer  (above header)
    1000  skip-link (keyboard focus only)
   ===================================================================== */

/* ---- Top announcement bar ---------------------------------------- */
.topbar { background: var(--ink); color: #cfd6e4; font-size: 13px; }
.topbar-inner { display: flex; justify-content: space-between; align-items: center; gap: 14px; height: 34px; background: #833028; }
.topbar-contact { opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar-links { display: flex; align-items: center; gap: clamp(12px, 1.4vw, 22px); margin-left: auto; flex-shrink: 0; }
.topbar-link { color: #fff; display: inline-flex; align-items: center; gap: 6px; font-weight: 500; text-decoration: none; }
/* Quick links that only surface once the search row drops them. */
.topbar-sm-only, .topbar-xs-only { display: none; }
.topbar-link:hover { color: #fff; opacity: .85; text-decoration: none; }
.topbar-cart-badge {
    background: var(--accent); color: #fff; border-radius: 999px; font-size: 11px;
    min-width: 17px; height: 17px; padding: 0 5px; display: inline-flex;
    align-items: center; justify-content: center; font-weight: 700;
}

/* ---- Header (Flipkart-style blue bar) ----------------------------- */
.site-header { background: var(--brand); box-shadow: var(--shadow); position: sticky; top: 0; z-index: 200; }
.header-inner { display: flex; align-items: center; gap: 14px; height: 56px; }

.logo { display: flex; flex-direction: column; justify-content: center; flex-shrink: 0; text-decoration: none; line-height: 1; }
.logo:hover { text-decoration: none; }
.logo-img { height: 42px; width: auto; max-width: 200px; object-fit: contain; display: block; }
.logo-has-img { justify-content: center; }
.logo-text { font-weight: 700; font-style: italic; font-size: 20px; color: #fff; white-space: nowrap; letter-spacing: .2px; }
.logo-sub { font-size: 11px; font-style: italic; color: #f0f2f5; display: flex; align-items: center; gap: 3px; margin-top: 1px; }
.logo-plus { color: #ffe500; font-weight: 500; }
.logo-sub .fa-star { color: #ffe500; font-size: 9px; }

.search-form { flex: 1 1 220px; min-width: 180px; display: flex; align-items: center; max-width: 560px; background: #fff; border-radius: 3px; overflow: hidden; height: 38px; }
.search-form button {
    background: #fff; border: none; color: var(--brand); padding: 0 12px 0 14px;
    cursor: pointer; font-size: 16px; height: 100%; display: flex; align-items: center; order: 0;
}
.search-form input {
    flex: 1; border: none; padding: 0 12px 0 4px; font-size: 14px; outline: none; height: 100%; background: transparent; color: var(--ink);
}
.search-form input::placeholder { color: #a5a5a5; }

.header-actions { display: flex; align-items: center; gap: clamp(10px, 1.15vw, 20px); flex-shrink: 0; }
.header-link { color: #fff; font-size: clamp(12.5px, .85vw, 14.5px); font-weight: 500; display: flex; align-items: center; gap: 6px; position: relative; white-space: nowrap; }
.header-link:hover { color: #fff; text-decoration: none; opacity: .9; }
.header-login {
    background: #fff; color: var(--brand); font-size: clamp(12.5px, .85vw, 14.5px); font-weight: 600;
    padding: 7px clamp(12px, 1.3vw, 24px); border-radius: 3px; display: flex; align-items: center; gap: 7px; white-space: nowrap;
}
.header-login:hover { text-decoration: none; color: var(--brand); }
.cart-badge {
    background: var(--accent); color: #fff; border-radius: 999px; font-size: 11px;
    min-width: 18px; height: 18px; padding: 0 5px; display: inline-flex;
    align-items: center; justify-content: center; font-weight: 700;
    position: absolute; top: -8px; right: -12px;
}
.cart-link { position: relative; padding-right: 7px; }   /* room for the count so it never sits on the word */

.hamburger { display: none; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; padding: 6px; }
.hamburger span { width: 22px; height: 2px; background: #fff; border-radius: 2px; transition: .2s; }

/* ---- Main nav (white Flipkart-style category bar) ----------------- */
.main-nav { background: #fff; box-shadow: var(--shadow); }
.main-nav a { color: var(--ink); text-decoration: none; }
/* One row, always: items never wrap — type and padding scale with the
   viewport so the whole menu fits the bar instead of spilling onto line 2. */
.main-nav .menu { list-style: none; display: flex; flex-wrap: nowrap; gap: 0; margin: 0; padding: 0; }
.main-nav .menu li { position: relative; }
.main-nav .menu > li { flex: 0 0 auto; }
.main-nav .menu > li > a {
    display: flex; align-items: center; gap: clamp(3px, .3vw, 6px);
    padding: 12px clamp(6px, .66vw, 15px);
    font-size: clamp(11.5px, .94vw, 13.5px);
    font-weight: 600; white-space: nowrap; color: var(--ink);
}
.main-nav .menu > li > a:hover { color: var(--brand); }
.menu-caret { background: none; border: none; color: inherit; cursor: pointer; padding: 0; margin: 0; font-size: 11px; line-height: 1; display: inline-flex; }

/* Submenus */
.main-nav .submenu {
    list-style: none; margin: 0; padding: 6px 0; position: absolute; top: 100%; left: 0;
    min-width: 214px; background: #fff; border-radius: 0 0 10px 10px; box-shadow: var(--shadow-md);
    border-top: 3px solid var(--brand-dark); opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .15s, transform .15s, visibility .15s; z-index: 260;
}
.main-nav .submenu a {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 16px; font-size: 14px; font-weight: 500; color: var(--ink); white-space: nowrap;
}
.main-nav .submenu a:hover { background: var(--brand-light); color: var(--brand-dark); }
.main-nav .submenu .menu-caret { color: var(--muted); transform: rotate(-90deg); }
.main-nav .submenu .submenu { top: -9px; left: 100%; border-radius: 10px; border-top: none; }

/* Desktop: reveal on hover */
@media (min-width: 1200px) {
    .main-nav .menu li:hover > .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
}

/* ---- Page wrapper ------------------------------------------------- */
.page { padding: 12px 16px 40px; min-height: 60vh; }

/* ---- Flash messages ---------------------------------------------- */
.flash { padding: 12px 16px; border-radius: var(--radius-sm); margin-bottom: 14px; font-size: 14px; border: 1px solid transparent; }
.flash-success { background: #e6f7ee; color: #0f7a41; border-color: #b7e6cd; }
.flash-error   { background: #fdeaea; color: #b32020; border-color: #f5c3c3; }
.flash-info    { background: var(--brand-light); color: var(--brand-dark); border-color: #cadcfb; }

/* ---- Buttons (Flipkart-style) ------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--brand); color: #fff; border: none; border-radius: var(--radius-sm);
    padding: 12px 22px; font-size: 14px; font-weight: 600; cursor: pointer; letter-spacing: .3px;
    text-decoration: none; transition: background .15s, box-shadow .15s, transform .05s; line-height: 1;
    text-transform: uppercase; box-shadow: 0 1px 2px rgba(0,0,0,.12);
}
.btn:hover { background: var(--brand-dark); text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-accent { background: var(--accent); color: #fff; }        /* ADD TO CART (yellow) */
.btn-accent:hover { background: var(--accent-dark); }
.btn-buy { background: var(--buy); color: #fff; }              /* BUY NOW (orange) */
.btn-buy:hover { background: var(--buy-dark); }
.btn-outline { background: #fff; color: var(--brand); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.btn-outline:hover { background: #fff; border-color: var(--brand); }
.btn-block { width: 100%; }
.btn-sm { padding: 9px 14px; font-size: 12px; }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: none; text-transform: none; }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* ---- Hero / banners ---------------------------------------------- */
.hero { margin-bottom: 12px; }
.hero-slider { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.hero-slide { display: none; position: relative; aspect-ratio: 1600 / 400; background: #e7ecf3; }
.hero-slide.active { display: block; }
/* Banner is locked to a 4:1 box. Upload 1600x400 (4:1) → full image, no crop. */
.hero-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-caption {
    position: absolute; left: 0; top: 0; bottom: 0; display: flex; flex-direction: column;
    justify-content: center; padding: 0 8%; max-width: 560px;
    background: linear-gradient(90deg, rgba(0,0,0,.55), rgba(0,0,0,0)); color: #fff;
}
.hero-caption h2 { font-size: 32px; margin: 0 0 8px; }
.hero-caption p { font-size: 17px; margin: 0 0 18px; }
.hero-dots { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; }
.hero-dots button { width: 10px; height: 10px; border-radius: 50%; border: none; background: rgba(255,255,255,.6); cursor: pointer; }
.hero-dots button.active { background: #fff; }

/* ---- Section headings (Flipkart white blocks) -------------------- */
.section { margin: 0 0 12px; }
.section-head { display: flex; align-items: center; justify-content: space-between; background: #fff; padding: 14px 18px; border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 10px; }
.section-head h2 { font-size: 20px; margin: 0; font-weight: 600; }
.section-head a { font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }

/* ---- Category strip (Flipkart circle + title) -------------------- */
.cat-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 0; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 8px; }
.cat-card {
    background: #fff; padding: 8px 6px; text-align: center; color: var(--ink);
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    min-width: 0;   /* allow the grid column to shrink so the circle never overflows */
}
.cat-card:hover { text-decoration: none; }
.cat-circle {
    /* fluid: fills the column but never grows past 82px → responsive, no overflow */
    width: 100%; max-width: 82px; aspect-ratio: 1 / 1; border-radius: 50%; overflow: hidden;
    background: #f1f3f6; border: 1px solid var(--line);
    display: flex; align-items: center; justify-content: center;
    transition: transform .15s, box-shadow .15s;
}
.cat-circle img { width: 100%; height: 100%; object-fit: cover; }
.cat-initial { font-size: 30px; font-weight: 700; color: var(--brand); }
.cat-card:hover .cat-circle { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.cat-title { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.3; max-width: 100%; overflow-wrap: break-word; word-break: break-word; }
.cat-card:hover .cat-title { color: var(--brand); }

/* ---- Shop by School ---------------------------------------------- */
.school-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; }
.school-card {
    background: var(--card); border-radius: var(--radius); padding: 18px 10px; text-align: center;
    box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s; color: var(--ink);
    display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.school-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); text-decoration: none; }
.school-logo {
    width: 70px; height: 70px; border-radius: 50%; background: var(--brand-light);
    display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 6px;
}
.school-logo img { width: 100%; height: 100%; object-fit: contain; }
.school-logo i { font-size: 30px; color: var(--brand); }
.school-name { font-size: 13px; font-weight: 700; display: block; line-height: 1.3; }

.school-header { display: flex; align-items: center; gap: 20px; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; }
.school-header-logo { width: 96px; height: 96px; border-radius: 16px; background: var(--brand-light); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.school-header-logo img { width: 100%; height: 100%; object-fit: contain; }
.school-header-logo i { font-size: 46px; color: var(--brand); }

.class-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.class-card {
    background: var(--card); border-radius: var(--radius); padding: 22px 12px; text-align: center;
    box-shadow: var(--shadow); transition: transform .15s, box-shadow .15s; color: var(--ink);
    display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.class-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); text-decoration: none; }
.class-icon { width: 54px; height: 54px; border-radius: 50%; background: var(--brand-light); color: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 24px; margin-bottom: 6px; }
.class-name { font-size: 15px; font-weight: 700; }

.set-banner {
    display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
    background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff;
    border-radius: var(--radius); padding: 24px; margin-top: 6px;
}
.set-banner-action { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.set-total { font-size: 15px; }
.set-total strong { font-size: 20px; }

.set-contents { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.set-item { display: flex; align-items: center; gap: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px; }
.set-item img { width: 56px; height: 56px; object-fit: contain; border: 1px solid var(--line); border-radius: 6px; background: #fff; flex-shrink: 0; }
.set-item-name { font-weight: 600; font-size: 14px; }
@media (max-width: 560px) { .set-contents { grid-template-columns: 1fr; } }

/* ---- Product grid & cards (Flipkart tiles) ------------------------ */
.product-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.product-card {
    background: var(--card); overflow: hidden;
    display: flex; flex-direction: column; position: relative;
    border-right: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0;
    transition: box-shadow .18s; padding: 6px;
}
.product-card:hover { box-shadow: 0 0 14px rgba(0,0,0,.14); z-index: 2; }
.product-thumb { position: relative; aspect-ratio: 1 / 1; background: #fff; overflow: hidden; }
.product-thumb img { width: 100%; height: 100%; object-fit: contain; padding: 12px; }
.badge-discount {
    position: absolute; top: 8px; left: 8px; background: var(--success); color: #fff;
    font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 3px;
}
.wish-btn {
    position: absolute; top: 8px; right: 8px; background: rgba(255,255,255,.95);
    border: 1px solid var(--line); width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
    font-size: 14px; color: var(--muted); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow);
}
.wish-btn.active { color: #ff4d6d; border-color: #ffccd5; }

.product-body { padding: 10px 10px 14px; display: flex; flex-direction: column; flex: 1; }
.product-cat { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
.product-name {
    font-size: 14px; font-weight: 400; color: var(--ink); margin: 4px 0 6px; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 38px;
}
.product-name:hover { color: var(--brand); }

/* Flipkart green rating pill */
.rating-pill { display: inline-flex; align-items: center; gap: 3px; background: var(--rating); color: #fff; font-size: 11px; font-weight: 700; padding: 1px 5px; border-radius: 3px; }
.rating-pill .fa-star { font-size: 8px; }
.product-rating { font-size: 12px; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.product-rating .count { color: var(--muted); font-weight: 600; font-size: 12px; }

.price-row { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: auto; margin-bottom: 10px; }
.price-now { font-size: 16px; font-weight: 600; color: var(--ink); }
.price-mrp { font-size: 13px; color: var(--muted); text-decoration: line-through; }
.price-off { font-size: 13px; color: var(--success); font-weight: 600; }
.stars { letter-spacing: 1px; color: var(--rating); }
.stock-out { color: var(--danger); font-size: 12px; font-weight: 600; }
.card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.card-actions .btn { padding: 9px 4px; white-space: nowrap; font-size: 12px; }

/* responsive columns */
@media (max-width: 1200px) { .product-grid { grid-template-columns: repeat(4, 1fr); } }

/* ---- Product detail ---------------------------------------------- */
.product-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; background: var(--card); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow); }
.gallery-main { border: 1px solid var(--line); border-radius: var(--radius-sm); aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.gallery-main img { width: 100%; height: 100%; object-fit: contain; padding: 16px; }
.gallery-thumbs { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.gallery-thumbs img { width: 66px; height: 66px; object-fit: contain; border: 1.5px solid var(--line); border-radius: 8px; cursor: pointer; padding: 4px; }
.gallery-thumbs img.active { border-color: var(--brand); }
.detail-title { font-size: 26px; margin: 0 0 8px; }
.detail-meta { color: var(--muted); font-size: 14px; margin-bottom: 12px; }
.detail-price { display: flex; align-items: baseline; gap: 12px; margin: 16px 0; }
.detail-price .price-now { font-size: 30px; }
.detail-price .badge-discount { position: static; }
.qty-selector { display: flex; align-items: center; gap: 0; border: 1.5px solid var(--line); border-radius: var(--radius-sm); width: max-content; overflow: hidden; }
.qty-selector button { background: #f3f4f6; border: none; width: 40px; height: 42px; font-size: 20px; cursor: pointer; }
.qty-selector input { width: 54px; height: 42px; text-align: center; border: none; border-left: 1px solid var(--line); border-right: 1px solid var(--line); font-size: 16px; }
.detail-actions { display: flex; gap: 12px; margin: 20px 0; flex-wrap: wrap; }
.detail-info-list { list-style: none; padding: 0; margin: 18px 0; border-top: 1px solid var(--line); }
.detail-info-list li { display: flex; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.detail-info-list li strong { width: 140px; color: var(--muted); font-weight: 600; }
.tabs { margin-top: 30px; }
.tab-nav { display: flex; gap: 6px; border-bottom: 2px solid var(--line); }
.tab-nav button { background: none; border: none; padding: 12px 18px; font-size: 15px; font-weight: 600; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; margin-bottom: -2px; }
.tab-nav button.active { color: var(--brand); border-bottom-color: var(--brand); }
.tab-panel { display: none; padding: 18px 2px; }
.tab-panel.active { display: block; }

/* ---- Reviews ------------------------------------------------------ */
.review { border-bottom: 1px solid var(--line); padding: 14px 0; }
.review-head { display: flex; justify-content: space-between; align-items: center; }
.review-author { font-weight: 700; font-size: 14px; }
.review-date { color: var(--muted); font-size: 12px; }
.review-stars { color: var(--warning); }

/* ---- Layout with sidebar (listing pages) ------------------------- */
.listing { display: grid; grid-template-columns: 250px 1fr; gap: 24px; }
.sidebar { background: var(--card); border-radius: var(--radius); padding: 18px; box-shadow: var(--shadow); align-self: start; }
/* Mobile filter drawer close bar + backdrop (hidden on desktop) */
.filter-close { display: none; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; margin: -18px -18px 14px; border-bottom: 1px solid var(--line); background: var(--brand); color: #fff; font-weight: 700; position: sticky; top: 0; z-index: 1; }
.filter-close button { background: rgba(255,255,255,.2); border: none; color: #fff; width: 30px; height: 30px; border-radius: 8px; font-size: 16px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.filter-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 710; }
.filter-backdrop.show { display: block; }
.filter-group { margin-bottom: 20px; }
.filter-group h4 { font-size: 14px; margin: 0 0 10px; }
.filter-group ul { list-style: none; padding: 0; margin: 0; }
.filter-group li { margin-bottom: 7px; }
.filter-group label { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.price-inputs { display: flex; gap: 8px; align-items: center; }
.price-inputs input { width: 100%; padding: 8px; border: 1px solid var(--line); border-radius: 6px; }
.listing-toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.listing-toolbar select { padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 14px; }

/* ---- Cart --------------------------------------------------------- */
.cart-layout { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
.cart-items { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.cart-row { display: grid; grid-template-columns: 90px 1fr auto; gap: 14px; padding: 16px; border-bottom: 1px solid var(--line); align-items: center; }
.cart-row:last-child { border-bottom: none; }
.cart-row img { width: 90px; height: 90px; object-fit: contain; border: 1px solid var(--line); border-radius: 8px; }
.cart-row .name { font-weight: 600; font-size: 15px; }
.cart-row .meta { color: var(--muted); font-size: 13px; }
.summary { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; position: sticky; top: 90px; }
.summary h3 { margin: 0 0 14px; font-size: 18px; }
.summary-row { display: flex; justify-content: space-between; padding: 7px 0; font-size: 15px; }
.summary-row.total { border-top: 1px solid var(--line); margin-top: 8px; padding-top: 12px; font-size: 19px; font-weight: 800; }
.coupon-box { display: flex; gap: 8px; margin: 14px 0; }
.coupon-box input { flex: 1; padding: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm); }

/* ---- Forms -------------------------------------------------------- */
.form-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px; max-width: 460px; margin: 20px auto; }
.form-card.wide { max-width: 760px; }
.form-card h1 { font-size: 24px; margin: 0 0 6px; }
.form-sub { color: var(--muted); margin: 0 0 20px; font-size: 14px; }
.form-group { margin-bottom: 16px; }
.form-group label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.form-group input, .form-group select, .form-group textarea {
    width: 100%; padding: 11px 13px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
    font-size: 15px; font-family: inherit; outline: none; background: #fff;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { border-color: var(--brand); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-error { color: var(--danger); font-size: 13px; margin-top: 4px; }
.form-foot { text-align: center; margin-top: 16px; font-size: 14px; color: var(--muted); }

/* ---- Checkout ----------------------------------------------------- */
.checkout-layout { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; }
.pay-options { display: flex; flex-direction: column; gap: 10px; }
.pay-option { display: flex; gap: 12px; align-items: flex-start; border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 14px; cursor: pointer; }
.pay-option.selected { border-color: var(--brand); background: var(--brand-light); }
.pay-option input { margin-top: 3px; }
.pay-option .pay-title { font-weight: 600; }
.pay-option .pay-desc { font-size: 13px; color: var(--muted); }

/* ---- Account dashboard ------------------------------------------- */
.account-layout { display: grid; grid-template-columns: 230px 1fr; gap: 24px; align-items: start; }
.account-nav { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.account-nav a { display: block; padding: 13px 18px; color: var(--ink); font-size: 14px; font-weight: 600; border-bottom: 1px solid var(--line); }
.account-nav a:hover, .account-nav a.active { background: var(--brand-light); color: var(--brand); text-decoration: none; }
.panel { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; }

/* ---- Tables ------------------------------------------------------- */
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; font-size: 14px; }
table.data th, table.data td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--line); }
table.data th { background: #f8fafc; font-weight: 700; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
table.data tbody tr:hover { background: #fafbfc; }

.status-pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.status-pending    { background: #fff3d6; color: #9a6a00; }
.status-confirmed  { background: var(--brand-light); color: var(--brand-dark); }
.status-processing { background: #e7e0ff; color: #5b34c9; }
.status-shipped    { background: #d7f0ff; color: #0b6ea8; }
.status-delivered  { background: #e6f7ee; color: #0f7a41; }
.status-cancelled  { background: #fdeaea; color: #b32020; }
.status-paid       { background: #e6f7ee; color: #0f7a41; }
.status-failed     { background: #fdeaea; color: #b32020; }

/* ---- Empty state -------------------------------------------------- */
.empty-state { text-align: center; padding: 60px 20px; }
.empty-state .icon { font-size: 54px; margin-bottom: 12px; }
.empty-state h2 { margin: 0 0 8px; }
.empty-state p { color: var(--muted); margin: 0 0 18px; }

/* ---- Pagination --------------------------------------------------- */
.pagination { display: flex; gap: 6px; justify-content: center; margin-top: 28px; flex-wrap: wrap; }
.pagination a, .pagination span {
    min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--line); border-radius: var(--radius-sm); background: #fff; color: var(--ink);
    font-weight: 600; padding: 0 10px;
}
.pagination a:hover { background: var(--brand-light); text-decoration: none; }
.pagination .current { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ---- Breadcrumb --------------------------------------------------- */
.breadcrumb { font-size: 13px; color: var(--muted); margin-bottom: 16px; }
.breadcrumb a { color: var(--muted); }
.breadcrumb a:hover { color: var(--brand); }

/* ---- Footer ------------------------------------------------------- */
.site-footer { background: var(--footer); color: #aeb7c6; margin-top: 24px; font-size: 14px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 30px; padding: 40px 16px 26px; }
.footer-col h3 { color: #fff; font-size: 18px; margin: 0 0 10px; }
.footer-col h4 { color: #878787; font-size: 12px; margin: 0 0 12px; text-transform: uppercase; letter-spacing: .5px; }
.footer-col ul { list-style: none; padding: 0; margin: 0; }
.footer-col li { margin-bottom: 8px; }
.footer-col a { color: #aeb7c6; }
.footer-col a:hover { color: #fff; }
.footer-contact { line-height: 1.9; }
.footer-bottom { border-top: 1px solid #1f2937; }
.footer-bottom .container { display: flex; justify-content: space-between; padding: 16px; flex-wrap: wrap; gap: 8px; }
.footer-bottom p { margin: 0; font-size: 13px; }

/* =====================================================================
   RESPONSIVE  — Tablet & Mobile
   ===================================================================== */
@media (max-width: 1024px) {
    .product-grid { grid-template-columns: repeat(3, 1fr); }
    .cat-grid { grid-template-columns: repeat(6, 1fr); }
    .school-grid { grid-template-columns: repeat(4, 1fr); }
    .class-grid { grid-template-columns: repeat(4, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 860px) {
    .listing { grid-template-columns: 1fr; }
    /* Filter drawer must sit ABOVE the sticky header (z 600) */
    .sidebar { position: fixed; left: -300px; top: 0; bottom: 0; width: 280px; z-index: 720; border-radius: 0; transition: left .25s; overflow-y: auto; padding-top: 0; }
    .sidebar.open { left: 0; box-shadow: var(--shadow-md); }
    .filter-close { display: flex; }
    .cart-layout, .checkout-layout { grid-template-columns: 1fr; }
    .account-layout { grid-template-columns: 1fr; }
    .product-detail { grid-template-columns: 1fr; gap: 20px; }
    .summary { position: static; }
}

/* Below 1200px the 13-item bar can no longer hold one honest line, so the
   menu becomes the slide-in drawer instead of shrinking into unreadable type
   or spilling onto a second row. The header row itself stays desktop until 768. */
@media (max-width: 1199px) {
    .topbar-sm-only { display: inline-flex; }
    .hamburger { display: flex; order: -1; }   /* stays at the far left of the row */
    /* Wishlist and Help step aside first so the search box keeps its room;
       both stay one tap away in the drawer and the footer. */
    .header-hide-sm { display: none; }
    /* Raise the header above the backdrop so the drawer (its child) stays
       clickable — otherwise the body-level backdrop paints over it. */
    .site-header { z-index: 600; }
    .main-nav { position: fixed; left: -290px; top: 0; bottom: 0; width: 280px; background: #fff; z-index: 610; transition: left .25s; overflow-y: auto; box-shadow: var(--shadow-md); -webkit-overflow-scrolling: touch; }
    .main-nav.open { left: 0; }
    .main-nav .menu { flex-direction: column; flex-wrap: nowrap; gap: 0; }
    .main-nav .menu li { position: static; }
    .main-nav .menu > li > a,
    .main-nav .submenu a { color: var(--ink); border-bottom: 1px solid var(--line); padding: 13px 18px; display: flex; font-size: 14px; gap: 6px; }
    .main-nav .menu > li > a:hover,
    .main-nav .submenu a:hover { background: var(--brand-light); }
    /* Accordion submenus: hidden until the parent row is toggled open */
    .main-nav .submenu { position: static; opacity: 1; visibility: visible; transform: none;
        box-shadow: none; border: none; border-radius: 0; min-width: 0; padding: 0; background: #f7f9fc;
        max-height: 0; overflow: hidden; transition: max-height .25s ease; }
    .main-nav li.open > .submenu { max-height: 1500px; }
    .main-nav .submenu a { padding-left: 34px; font-weight: 500; }
    .main-nav .submenu .submenu a { padding-left: 50px; }
    .main-nav .submenu .menu-caret { transform: none; }
    .menu-caret { margin-left: auto; padding: 12px 16px; color: inherit; }
    .main-nav .submenu .menu-caret { color: var(--muted); }
    .nav-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 450; }
    .nav-backdrop.show { display: block; }
}

@media (max-width: 768px) {
    .topbar-hide-sm { display: none; }
    .header-inner { flex-wrap: wrap; height: auto; padding: 8px 14px; gap: 10px; }  /* gutter so the cart never touches the screen edge */
    .logo { order: 2; }
    .logo-sub { display: none; }
    .logo-img { height: 34px; max-width: 150px; }
    .header-actions { order: 3; margin-left: auto; gap: 16px; }
    .header-link span:not(.cart-badge) { display: none; }   /* icons only on mobile — but the cart count stays visible */
    .header-hide-sm { display: none; }
    .header-login { padding: 6px 14px; }
    .header-login span { display: inline; }
    .search-form { order: 4; flex-basis: 100%; max-width: 100%; }
    .cart-badge { top: -6px; right: -10px; }
    .hero-caption h2 { font-size: 22px; }
    .hero-caption p { font-size: 14px; }
    .footer-grid { grid-template-columns: 1fr 1fr; padding: 30px 16px 20px; }
    .form-row { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
    body { font-size: 14px; }
    /* Narrow phones: the logo, account and cart earn the row; Track Order
       is a tap away in the menu drawer. */
    .header-hide-xs { display: none; }
    .topbar-xs-only { display: inline-flex; }
    .topbar-links .tl-label { display: none; }   /* icons only; the phone keeps its number */
    .topbar-links { gap: 15px; }
    .logo-img { max-width: 130px; }
    .header-actions { gap: 13px; }
    .header-login { padding: 6px 12px; }
    .topbar-contact { display: none; }
    .topbar-inner { justify-content: flex-end; }
    .product-grid { grid-template-columns: repeat(2, 1fr); gap: 0; }
    .cat-grid { grid-template-columns: repeat(4, 1fr); padding: 14px 6px; column-gap: 4px; }
    .cat-card { padding: 6px 3px; gap: 7px; }
    .cat-title { font-size: 12px; }
    .cat-initial { font-size: 24px; }
    .school-grid { grid-template-columns: repeat(3, 1fr); }
    .class-grid { grid-template-columns: repeat(3, 1fr); }
    .school-header { flex-direction: column; text-align: center; }
    .section-head h2 { font-size: 19px; }
    .price-now { font-size: 16px; }
    .cart-row { grid-template-columns: 70px 1fr; }
    .cart-row img { width: 70px; height: 70px; }
    .cart-row .cart-line-total { grid-column: 2; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom .container { flex-direction: column; text-align: center; }
    .detail-title { font-size: 21px; }
    .topbar-contact { display: none; }
    .card-actions { grid-template-columns: 1fr; }   /* stack Add/Buy on small phones */
}

/* ---- Utilities ---------------------------------------------------- */
.text-muted { color: var(--muted); }
.text-center { text-align: center; }
.mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; }
.mb-2 { margin-bottom: 16px; }
.hidden { display: none !important; }
.badge-soft { background: var(--brand-light); color: var(--brand-dark); font-size: 12px; padding: 3px 9px; border-radius: 6px; font-weight: 600; }

/* ---- Roboto (bundled locally — Flipkart-style typography) --------- */
@font-face{font-family:"Roboto";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/roboto-400.woff2") format("woff2");}
@font-face{font-family:"Roboto";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/roboto-500.woff2") format("woff2");}
@font-face{font-family:"Roboto";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/roboto-700.woff2") format("woff2");}