/* ============================================================
   MANGALAGIRI MATTI — RESPONSIVE STYLES
   Breakpoints:
   xl  : 1280px
   lg  : 1024px
   md  :  768px
   sm  :  480px
   xs  :  360px
   ============================================================ */

/* ── XL — Large Desktop ───────────────────────────────────── */
@media (max-width: 1280px) {
  .products-grid {
    grid-template-columns: repeat(3, 1fr);
  }

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

  .footer-main {
    grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    gap: var(--space-xl);
  }
}

/* ── LG — Laptop / Small Desktop ─────────────────────────── */
@media (max-width: 1024px) {
  :root { --header-h: 70px; }

  .main-nav { display: none; }
  .hamburger { display: flex; }

  .hero-inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--space-xl);
  }

  .hero-content { order: 2; }
  .hero-visual  { order: 1; }

  .hero-desc    { margin: 0 auto var(--space-xl); }
  .hero-actions { justify-content: center; }
  .hero-stats   { justify-content: center; }

  .hero-logo-main { width: 220px; height: 220px; }
  .hero-ring      { width: 280px; height: 280px; }
  .hero-ring-2    { width: 330px; height: 330px; }

  .hero-float-left  { left: 0; }
  .hero-float-right { right: 0; }

  .categories-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .products-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-main {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }

  .cart-sidebar { width: 360px; }
}

/* ── MD — Tablet ──────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --header-h: 64px;
    --space-3xl: 64px;
    --space-2xl: 48px;
  }

  .announcement-bar { font-size: 0.72px; padding: 6px var(--space-md); height: 32px; }
  .site-header { top: 32px; }

  .container { padding: 0 var(--space-md); }

  /* Header */
  .btn-login,
  .btn-signup { display: none; }

  .mobile-nav-actions { display: flex; }

  /* Hero */
  .hero { min-height: auto; padding: calc(var(--header-h) + 32px + 40px) 0 60px; }

  .hero-logo-main { width: 180px; height: 180px; }
  .hero-ring      { width: 230px; height: 230px; }
  .hero-ring-2    { width: 270px; height: 270px; }

  .hero-float-left,
  .hero-float-right { display: none; }
  .hero-scroll      { display: none; }

  .hero-stats { gap: var(--space-lg); }

  /* Categories */
  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }

  /* Products */
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }

  .filter-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .filter-tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .filter-tab  { flex-shrink: 0; }

  /* Features */
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
  }

  /* Footer */
  .footer-main {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .footer-about { max-width: 100%; }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
    gap: var(--space-sm);
  }

  /* Cart Sidebar */
  .cart-sidebar { width: 100%; }

  /* Announcement */
  .announcement-bar { font-size: 0.72rem; padding: 6px var(--space-md); }
}

/* ── SM — Mobile ──────────────────────────────────────────── */
@media (max-width: 480px) {
  :root {
    --header-h: 60px;
    --space-3xl: 48px;
  }

  /* Brand */
  .brand-tagline { display: none; }
  .brand-name    { font-size: 1rem; }
  .brand-logo    { width: 42px; height: 42px; }

  /* Hero */
  .hero-actions { flex-direction: column; align-items: center; }
  .hero-actions .btn { width: 100%; max-width: 280px; justify-content: center; }

  .hero-stats { gap: var(--space-md); }
  .hero-stat .number { font-size: 1.3rem; }

  /* Categories */
  .categories-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }

  .category-card { padding: var(--space-lg) var(--space-sm); }
  .category-icon-wrap { width: 56px; height: 56px; font-size: 1.5rem; }
  .category-name { font-size: 0.85rem; }
  .category-desc { display: none; }

  /* Products */
  .products-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }

  .product-body { padding: var(--space-sm); }
  .product-name { font-size: 0.88rem; }
  .product-desc { display: none; }
  .product-price { font-size: 1rem; }

  .product-actions { grid-template-columns: 1fr; gap: 6px; }

  /* Features */
  .features-grid { grid-template-columns: 1fr; }

  /* Section header */
  .section-header { margin-bottom: var(--space-xl); }

  /* Toast */
  .toast-container { bottom: 16px; right: 16px; left: 16px; }
  .toast { max-width: 100%; }

  /* Back to top */
  .back-to-top { bottom: 70px; right: 16px; }
}

/* ── XS — Very Small Mobile ───────────────────────────────── */
@media (max-width: 360px) {
  .products-grid { grid-template-columns: 1fr; }

  .categories-grid { grid-template-columns: repeat(2, 1fr); }

  .hero-logo-main { width: 150px; height: 150px; }
}

/* ── Landscape Mobile ─────────────────────────────────────── */
@media (max-width: 768px) and (orientation: landscape) {
  .hero {
    min-height: auto;
    padding: calc(var(--header-h) + 20px) 0 40px;
  }

  .hero-inner { gap: var(--space-lg); }
  .hero-logo-main { width: 140px; height: 140px; }
}

/* ── Print ────────────────────────────────────────────────── */
@media print {
  .site-header,
  .site-footer,
  .cart-sidebar,
  .cart-overlay,
  .back-to-top,
  .toast-container { display: none !important; }

  body { background: #fff; }
  .hero { min-height: auto; padding: 20px 0; }
}

/* ============================================================
   SHOP PAGE — RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
  .shop-layout {
    grid-template-columns: 240px 1fr;
    gap: var(--space-lg);
  }
}

@media (max-width: 768px) {
  .shop-layout {
    grid-template-columns: 1fr;
  }

  .shop-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 300px;
    z-index: 900;
    transform: translateX(-100%);
    transition: transform var(--transition-mid);
    border-radius: 0;
    overflow-y: auto;
  }

  .shop-sidebar.open {
    transform: translateX(0);
  }

  .mobile-filter-btn { display: flex; }

  .shop-toolbar { flex-wrap: wrap; }

  .products-grid.list-view .product-card {
    flex-direction: column;
    max-height: none;
  }

  .products-grid.list-view .product-img-wrap {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
  }

  .products-grid.list-view .product-actions {
    flex-direction: row;
    min-width: auto;
    padding: var(--space-sm) var(--space-md) var(--space-md);
  }
}

@media (max-width: 480px) {
  .shop-hero { padding: calc(var(--header-h) + var(--space-xl)) 0 var(--space-xl); }
  .shop-toolbar-right { width: 100%; justify-content: space-between; }
  .pagination { gap: 4px; }
  .page-btn { width: 34px; height: 34px; font-size: 0.8rem; }
}

/* ============================================================
   PRODUCT DETAIL PAGE — RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
  .product-detail-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
  }

  .product-gallery { position: static; }
}

@media (max-width: 768px) {
  .product-detail-section {
    padding: calc(var(--header-h) + var(--space-lg)) 0 var(--space-2xl);
  }

  .product-detail-grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .product-gallery { position: static; }

  .product-specs { grid-template-columns: 1fr 1fr; }

  .product-cta { grid-template-columns: 1fr 1fr; }

  .reviews-summary { flex-direction: column; gap: var(--space-lg); }

  .product-tabs { overflow-x: auto; }
  .product-tab-btn { white-space: nowrap; padding: 10px 18px; }
}

@media (max-width: 480px) {
  .product-info-price { font-size: 1.6rem; }
  .product-specs { grid-template-columns: 1fr; }
  .product-cta { grid-template-columns: 1fr; }
  .gallery-thumbs { gap: 6px; }
  .gallery-thumb { width: 56px; height: 56px; }
}

/* ============================================================
   AUTH PAGES — RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
  .auth-visual { padding: var(--space-2xl) var(--space-xl); }
  .auth-form-panel { padding: var(--space-2xl) var(--space-xl); }
}

@media (max-width: 768px) {
  .auth-page {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .auth-visual {
    padding: var(--space-xl) var(--space-lg);
    min-height: 280px;
  }

  .auth-visual-logo { width: 80px; height: 80px; margin-bottom: var(--space-md); }
  .auth-visual h2   { font-size: 1.4rem; }
  .auth-visual p    { display: none; }
  .auth-visual-features { display: none; }

  .auth-form-panel {
    padding: var(--space-xl) var(--space-lg);
    justify-content: flex-start;
  }

  .auth-form-wrap { max-width: 100%; }
}

@media (max-width: 480px) {
  .auth-visual { min-height: 200px; }
  .auth-visual-logo { width: 64px; height: 64px; }
  .auth-visual h2 { font-size: 1.2rem; }

  .form-input { padding: 11px 14px 11px 40px; font-size: 0.88rem; }
  .auth-submit-btn { padding: 13px; font-size: 0.95rem; }

  .otp-inputs { gap: 6px; }
  .otp-input  { width: 44px; height: 48px; font-size: 1.1rem; }
}

/* ============================================================
   CART PAGE — RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
  .cart-layout {
    grid-template-columns: 1fr 300px;
    gap: var(--space-lg);
  }
}

@media (max-width: 768px) {
  .cart-layout {
    grid-template-columns: 1fr;
  }

  .order-summary-card {
    position: static;
  }

  .cart-table-head { display: none; }

  .cart-row {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
    padding: var(--space-md);
    position: relative;
  }

  .cart-product-cell { grid-column: 1; }

  .cart-price-cell,
  .cart-qty-cell,
  .cart-subtotal-cell {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.88rem;
  }

  .cart-price-cell::before    { content: 'Price:';    color: var(--text-muted); font-size: 0.78rem; }
  .cart-qty-cell::before      { content: 'Quantity:'; color: var(--text-muted); font-size: 0.78rem; }
  .cart-subtotal-cell::before { content: 'Subtotal:'; color: var(--text-muted); font-size: 0.78rem; }

  .cart-remove-btn {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
  }

  .cart-table-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .coupon-input { width: 100%; }
  .cart-coupon-form { width: 100%; }
}

@media (max-width: 480px) {
  .cart-page-section {
    padding: calc(var(--header-h) + var(--space-lg)) 0 var(--space-2xl);
  }

  .cart-product-img,
  .cart-product-img-placeholder { width: 64px; height: 64px; }

  .cart-product-name { font-size: 0.88rem; }

  .summary-total-row .value { font-size: 1.3rem; }
}

/* ============================================================
   CHECKOUT PAGE — RESPONSIVE
   ============================================================ */

@media (max-width: 1024px) {
  .checkout-layout {
    grid-template-columns: 1fr 320px;
    gap: var(--space-lg);
  }

  .step-connector { width: 50px; }
}

@media (max-width: 768px) {
  .checkout-section {
    padding: calc(var(--header-h) + var(--space-lg)) 0 var(--space-2xl);
  }

  .checkout-layout {
    grid-template-columns: 1fr;
  }

  .checkout-summary-card { position: static; order: -1; }

  .checkout-steps { gap: 0; }
  .step-label     { display: none; }
  .step-connector { width: 40px; }

  .form-grid-2 { grid-template-columns: 1fr; }
  .form-grid-3 { grid-template-columns: 1fr 1fr; }

  .confirm-actions { flex-direction: column; align-items: center; }
  .confirm-actions .btn { width: 100%; max-width: 300px; justify-content: center; }
}

@media (max-width: 480px) {
  .form-grid-3 { grid-template-columns: 1fr; }

  .checkout-card-body { padding: var(--space-md); }

  .confirm-order-id .order-id-value { font-size: 1.4rem; }
  .confirm-title { font-size: 1.5rem; }

  .payment-option { padding: var(--space-md); }
}