/* ============================================
   Artharogyam - Responsive Styles
   ============================================ */

/* Tablet */
@media (max-width: 991.98px) {
  :root {
    --header-h: 64px;
  }

  .page-wrapper { padding-top: var(--header-h); }

  .navbar-brand img { width: 42px; height: 42px; }

  .site-header > .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }

  .navbar-brand { order: 1; }
  .mobile-brand-name { order: 2; }
  .navbar-toggler {
    order: 3;
    margin-left: auto;
    flex-shrink: 0;
  }
  .navbar-collapse { order: 4; flex-basis: 100%; }

  .mega-dropdown .dropdown-menu {
    min-width: 100%;
    box-shadow: none;
    padding: 0.5rem 0;
  }

  .nav-cta {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
  }

  .stats-section {
    margin-top: -2rem;
    padding: 2rem 0;
  }

  .stat-number { font-size: 2rem; }

  .hero-section {
    height: min(520px, calc(100vh - var(--header-h)));
    min-height: 380px;
  }

  .hero-products-row { margin-top: 0.5rem; }

  .hero-swiper .swiper-button-next,
  .hero-swiper .swiper-button-prev { width: 40px; height: 40px; }

  .hero-content h1 { font-size: 1.75rem; }

  .section-block { padding: 3.5rem 0; }

  .about-badge {
    bottom: 10px;
    right: 10px;
    padding: 0.875rem;
  }

  .about-badge .years { font-size: 1.5rem; }

  .plan-card.featured {
    transform: none;
    margin-bottom: 1rem;
  }

  .plan-card.featured:hover { transform: translateY(-6px); }

  .contact-form-wrap,
  .form-card { padding: 1.5rem; }

  .footer-brand { margin-bottom: 2rem; }

  .newsletter-form { flex-direction: column; }

  .newsletter-form button { width: 100%; }
}

/* Mobile */
@media (max-width: 767.98px) {
  :root {
    --header-h: 60px;
  }

  .top-bar { display: none !important; }

  .page-wrapper { padding-top: var(--header-h); }

  .page-breadcrumb { padding: 2rem 0 1.5rem; }

  /* Header — menu icon always visible on load */
  .site-header-wrap {
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.1);
  }

  .site-header {
    background: #ffffff;
    min-height: 56px;
  }

  .site-header > .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: 56px;
  }

  .navbar-brand {
    order: 1;
    margin-right: 0.5rem;
    padding-right: 0;
  }

  .mobile-brand-name {
    order: 2;
    flex: 1;
    min-width: 0;
  }

  .navbar-toggler {
    order: 3;
    margin-left: auto;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    border: 1px solid rgba(38, 93, 102, 0.2);
    border-radius: 8px;
    background: #fff;
    padding: 6px 10px;
  }

  .navbar-toggler .navbar-toggler-icon {
    width: 1.35em;
    height: 1.35em;
  }

  .navbar-collapse {
    order: 4;
    flex-basis: 100%;
  }

  .hero-section {
    height: auto;
    min-height: calc(100vh - var(--header-h));
    max-height: none;
  }

  .hero-slide-content {
    padding: 0.75rem 1.25rem 2.25rem;
  }

  .home-page .hero-section .hero-slide-content.container {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }

  .hero-products-row {
    gap: 10px;
    margin-top: 1rem;
  }

  .hero-prod img { width: 72px; height: 72px; }
  .hero-prod.featured img { width: 86px; height: 86px; }

  .hero-logo-big { width: min(160px, 55%); }

  .hero-content p { font-size: 0.9375rem; }

  .hero-swiper .swiper-button-next,
  .hero-swiper .swiper-button-prev { display: none; }

  .stats-section {
    margin-top: 0;
    border-radius: 0;
  }

  .stat-item { padding: 0.75rem 0.5rem; }

  .stat-number { font-size: 1.75rem; }

  .stat-icon { font-size: 1.5rem; }

  .section-block { padding: 2.5rem 0; }

  .product-card-footer { flex-direction: column; }

  .testimonial-card { padding: 1.5rem; }

  .event-card .event-img img { height: 160px; }

  .download-card { flex-direction: column; text-align: center; }

  .calculator-result .result-amount { font-size: 2rem; }

  .legal-content { padding: 1.5rem; }

  .cta-section { padding: 2.5rem 0; }

  .back-to-top {
    bottom: 20px;
    right: 20px;
    width: 42px;
    height: 42px;
  }

  .product-detail-price { font-size: 1.5rem; }

  .mv-card { padding: 1.75rem 1.25rem; }

  .gallery-item { aspect-ratio: 1; }
}

/* Small mobile */
@media (max-width: 575.98px) {
  .btn-brand,
  .btn-outline-brand {
    padding: 10px 20px;
    font-size: 0.875rem;
  }

  .hero-content .d-flex { flex-direction: column; }

  .hero-content .d-flex .btn { width: 100%; text-align: center; justify-content: center; }

  .hero-brand-row img { width: 48px; height: 48px; }

  .hero-brand-text strong { font-size: 0.75rem; }

  .hero-slide-title { font-size: 1.5rem; }

  .hero-cta-group { flex-direction: column; }
  .hero-cta-group .btn { width: 100%; justify-content: center; }

  .hero-prod img { width: 60px; height: 60px; }
  .hero-prod.featured img { width: 72px; height: 72px; }

  .contact-info-card { margin-bottom: 1.5rem; }

  .whatsapp-float {
    bottom: 80px;
    right: 20px;
    width: 50px;
    height: 50px;
    font-size: 1.5rem;
  }

  .hero-glass { padding: 1.5rem; }

  .hero-swiper .swiper-button-next,
  .hero-swiper .swiper-button-prev { display: none; }

  .trust-bar .row > div { margin-bottom: 0.5rem; }

  .contact-cta-banner { padding: 2.5rem 1.25rem; }

  .tree-row { gap: 1rem; flex-wrap: wrap; }
}

/* Large screens */
@media (min-width: 1400px) {
  .container { max-width: 1200px; }
}

/* Print */
@media print {
  .site-header-wrap,
  .site-footer,
  .back-to-top,
  #preloader,
  .cta-section { display: none !important; }

  .page-wrapper { padding-top: 0; }

  body { background: white; }
}
