/* ============================================================
   responsive.css — breakpoints & mobile behaviour
   ============================================================ */

@media (max-width: 1199.98px) {
  .container-pv { max-width: 100%; }
}

@media (max-width: 991.98px) {
  /* App shell: collapsible sidebar */
  .app-sidebar { transform: translateX(-100%); }
  .app-sidebar.open { transform: translateX(0); }
  .app-main { margin-left: 0; }
  .app-topbar .menu-toggle { display: inline-flex; }
  .app-topbar .topbar-search { display: none; }
}

@media (max-width: 767.98px) {
  body { font-size: 14px; }
  .section-pad { padding: 40px 0; }
  .pv-header .pv-search { display: none; }
  /* keep the menu accessible on mobile as a horizontal scroll bar */
  .pv-catnav { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .pv-catnav::-webkit-scrollbar { display: none; }
  .pv-catnav .nav { flex-wrap: nowrap; justify-content: flex-start; }
  .pv-catnav .nav-link { white-space: nowrap; padding: .7rem .8rem; }
  .pv-catnav .mega-panel { display: none; } /* mega dropdown hidden on touch; link still navigates */
  .sec-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .auth-aside { display: none; }
  .steps .step { font-size: 11px; }
  .steps .step .dot { width: 30px; height: 30px; }
  .app-content { padding: 18px 14px 50px; }
  .pv-table-wrap { overflow-x: auto; }
  .pv-table { min-width: 640px; }
  .pv-footer { text-align: center; }
  .pv-footer .social { justify-content: center; display: flex; }
}

@media (max-width: 575.98px) {
  .stat-card .val { font-size: 24px; }
  .gallery-main { font-size: 60px; }
  .pv-toast-wrap { left: 14px; right: 14px; bottom: 14px; }
  .pv-toast { min-width: auto; }
}

/* ============================================================
   MOBILE RESPONSIVE — header drawer, nav, sections (Shilpakala)
   ============================================================ */
.pv-mobile-toggle { display: none; background: none; border: 0; font-size: 24px; line-height: 1; color: var(--pv-primary); cursor: pointer; padding: 4px 8px; }

@media (max-width: 991px) {
  /* Top utility bar: drop the long tagline, keep contact links compact */
  .pv-topbar .container-pv > span:first-child { display: none; }
  .pv-topbar .container-pv { justify-content: center; font-size: 12px; }
  .pv-topbar a { white-space: nowrap; }

  /* Header row: hamburger | logo | icons */
  .pv-header-main { display: flex !important; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; }
  .pv-header-left { display: flex; align-items: center; }
  .pv-header-left .pv-call { display: none; }
  .pv-mobile-toggle { display: inline-flex; }
  .pv-header-center { flex: 1; text-align: center; }
  .pv-logo-img { max-height: 42px; }
  .pv-header-right { gap: 14px; }

  /* Primary nav becomes a vertical drawer toggled by the hamburger */
  .pv-catnav { display: none; background: #fff; border-top: 1px solid var(--pv-border); }
  .pv-catnav.pv-open { display: block; }
  .pv-catnav .container-pv { padding: 0; }
  .pv-catnav ul.nav { flex-direction: column; align-items: stretch; }
  .pv-catnav .nav-item { width: 100%; border-bottom: 1px solid var(--pv-border); }
  .pv-catnav .nav-link { padding: 13px 18px; display: block; }

  /* Mega dropdown: inline accordion on mobile */
  .pv-catnav .mega-wrap .mega-panel { position: static !important; opacity: 1 !important; visibility: visible !important; transform: none !important; box-shadow: none !important; display: none; padding: 0 18px 12px; min-width: 0; width: 100%; }
  .pv-catnav .mega-wrap.pv-open .mega-panel { display: block; }
  .pv-catnav .mega-panel .row { display: block; }
  .pv-catnav .mega-panel [class*="col-"] { width: 100%; max-width: 100%; flex: 0 0 100%; margin-bottom: 10px; }
  .pv-catnav .mega-panel a { display: block; padding: 6px 0; }

  /* Sections: reduce padding, stack rows */
  .section-pad { padding: 40px 0; }
  .container-pv { padding-left: 16px; padding-right: 16px; }
  .pv-header-banner img, .pv-hero-banner img { height: auto; }
}

@media (max-width: 767px) {
  h1, .display-1, .display-2 { font-size: 30px !important; }
  h2 { font-size: 24px !important; }
  .pv-header-right .pv-icon-link[title="Search"], .pv-header-right .pv-icon-link[title="Wishlist"] { display: none; } /* keep account + cart */
  /* Cart / checkout / account already stack via their own 900px queries */
  .pv-crumb-banner { padding: 34px 0 28px; }
  .pv-crumb-title { font-size: 26px; }
  /* Footer columns stack (Bootstrap handles most; ensure spacing) */
  .pv-footer .row > [class*="col-"] { margin-bottom: 18px; }
}

@media (max-width: 575px) {
  /* Product grid: 2 up already via col-6; make cards comfortable */
  .product-card .body { padding: 12px 12px 14px; }
  .product-card .title { font-size: 14px; }
  .pv-topbar { font-size: 11px; }
  /* Footer: stack price above the action buttons so the cart/view icons never
     overlap the price on narrow 2-up cards. */
  .product-card .body > .d-flex.align-items-end.justify-content-between {
    flex-direction: column; align-items: stretch !important; gap: 8px;
  }
  .product-card .body > .d-flex.align-items-end.justify-content-between > .d-flex.gap-1 {
    justify-content: flex-start;
  }
  .product-card .price { font-size: 16px; }
  .product-card .price .old { display: inline-block; }
}

/* ===== Hero slider — responsive ===== */
@media (max-width: 991px) {
  .hero-lux { min-height: 62vh; }
  .hero-slide { align-items: center; }
  .hero-content { max-width: 100%; margin: 0 12px; padding: 26px 24px; }
  .hero-content h1 { font-size: clamp(28px, 8vw, 40px); margin: 10px 0 12px; }
  .hero-content p { font-size: 15px; }
  .hero-content .eyebrow { font-size: 12px; }
  .hero-icon { display: none !important; }
  .hero-arrow { width: 40px; height: 40px; }
  .hero-content .btn-lg { padding: 12px 20px; font-size: 15px; }
}
@media (max-width: 575px) {
  .hero-lux { min-height: 56vh; }
  .hero-content .btn-lg { display: block; width: 100%; margin-bottom: 10px; text-align: center; }
}
/* Full-width banner hero image scales */
.pv-hero-banner img { width: 100%; height: auto; display: block; }

/* ===== Mobile top-bar contact: keep phone + WhatsApp reachable ===== */
@media (max-width: 991px) {
  .pv-topbar .container-pv > span:last-child { display: flex !important; gap: 14px; }
  .pv-topbar a[href^="mailto"] { display: none; } /* email too long on small screens; keep phone + bulk */
}
@media (max-width: 575px) {
  .pv-topbar { font-size: 11px; padding: 4px 0; }
  .pv-topbar a[href="/bulk-order-registration"] span, .pv-topbar a[href*="bulk-order"] { }
}