﻿/* ============================================================
   RESPONSIVE DESIGN — impresion_3d page
================================================================ */

* , *::before, *::after { box-sizing: border-box; }
img { max-width: 100%; height: auto; display: block; }

@media (max-width: 992px) {
  .top-header .inner { flex-wrap: wrap; gap: 12px; padding: 10px 16px; }
  .search-bar { order: 3; width: 100%; flex-wrap: wrap; gap: 6px; }
  .search-cat { width: 100%; }
  .search-input { flex: 1 1 auto; }

  .navbar .inner { flex-wrap: wrap; gap: 8px; padding: 0 16px; }
  .nav-links { flex-wrap: wrap; gap: 4px; }
  .nav-links a { font-size: 0.85rem; padding: 8px 10px; }
  .nav-search-btn { width: 100%; text-align: center; padding: 10px 0; }
  .nav-search-btn a { display: block; width: 100%; }

  .page-wrapper { padding: 0 16px; }
  .hero-banner { height: 340px; }
  .hero-overlay { padding: 30px 24px; }
  .hero-text h2 { font-size: 2.75rem; }
  .carousel-slide { height: 420px; }

  .footer-inner { grid-template-columns: repeat(2, 1fr); gap: 24px; padding: 32px 16px; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  .top-header .inner { flex-direction: column; align-items: stretch; padding: 10px 14px; }
  .logo { justify-content: center; width: auto; }
  .contact-info { margin-left: 0; }
  .search-bar { flex-direction: column; display: none !important; }
  .search-cat, .search-input, .search-btn { width: 100%; }

  .navbar .inner { flex-direction: column; align-items: center; justify-content: center; padding: 0 14px; }
  .nav-cat-btn { width: auto; align-self: center; border-radius: 0; text-align: center; padding: 12px 16px; }
  .nav-links { flex-direction: column; width: 100%; }
  .nav-links a { width: 100%; padding: 10px 16px; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 0.9rem; }
  .nav-search-btn { width: 100%; border-radius: 0; text-align: center; padding: 12px 16px; }
  .nav-search-btn a { display: block; width: 100%; }

  .breadcrumb { padding: 10px 14px; font-size: 0.8rem; flex-wrap: wrap; gap: 4px; }
  .section-header { padding: 20px 14px 16px; }
  .section-header h1 { font-size: 1.6rem; }
  .section-header p { font-size: 0.9rem; }

  .hero-banner { height: 280px; }
  .hero-text h2 { font-size: 2rem; }
  .hero-text p { font-size: 0.96rem; }
  .carousel-slide { height: 320px; }
  .slide-caption { padding: 16px 16px; }
  .carousel-btn { width: 52px; height: 52px; }
  .carousel-counter { top: 14px; right: 14px; }

  .footer-inner { grid-template-columns: 1fr; gap: 20px; padding: 24px 14px; }
  .footer-brand { grid-column: auto; }
  .copy-inner { flex-direction: column; gap: 12px; text-align: center; padding: 0 14px; }
  .social-links { justify-content: center; }

  .cookie-bar { flex-direction: column; gap: 10px; text-align: center; padding: 14px; }
  .cookie-actions { width: 100%; flex-wrap: wrap; justify-content: center; }
  .cookie-accept, .cookie-reject, .cookie-configure { width: 100%; max-width: 280px; }
}

@media (max-width: 480px) {
  .logo-text { font-size: 0.95rem; }
  .logo-icon img { width: 38px; height: 38px; }

  .hero-banner { height: 240px; }
  .hero-overlay { padding: 18px 16px; }
  .hero-text h2 { font-size: 1.7rem; }
  .carousel-slide { height: 240px; }
  .carousel-btn { width: 42px; height: 42px; }
  .carousel-dots { gap: 8px; }
  .slide-caption { padding: 14px 14px; }
  .cookie-bar { left: 12px; right: 12px; bottom: 12px; }
}
