/* =====================================================
   Sneaker House Global Responsive Fix
   Makes all pages slightly zoomed out and cleaner
   Works for laptop, tablet, and phone
===================================================== */

html {
  font-size: 15px;
}

body {
  overflow-x: hidden;
}

/* Make sections slightly less huge */
.hero,
.stock-section,
.how-section,
.footer,
.section,
.page,
.main {
  padding-left: 5.5% !important;
  padding-right: 5.5% !important;
}

/* Navbar slightly smaller */
.navbar {
  min-height: 76px !important;
  height: auto !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.nav-logo img,
.logo img {
  width: 48px !important;
  height: 48px !important;
}

.nav-logo span,
.logo span {
  font-size: 23px !important;
}

/* Navbar buttons slightly smaller */
.login-btn,
.signup-btn,
.logout-btn,
.admin-btn,
.nav-btn,
.home-btn {
  padding: 10px 15px !important;
  font-size: 13px !important;
}

/* Hero fix */
.hero {
  min-height: auto !important;
  padding-top: 58px !important;
  padding-bottom: 70px !important;
  gap: 42px !important;
}

.hero h1 {
  font-size: clamp(58px, 8.5vw, 125px) !important;
}

.hero-text,
.hero p {
  font-size: 16px !important;
  line-height: 1.65 !important;
}

.hero-card {
  max-width: 520px;
  margin: 0 auto;
}

.hero-card img {
  height: 360px !important;
}

/* Big background text less aggressive */
.hero::before,
.hero::after,
.right::before {
  font-size: clamp(80px, 12vw, 150px) !important;
}

/* Brand strip */
.brand-strip {
  padding: 14px 0 !important;
  gap: 38px !important;
}

.brand-strip span {
  font-size: 24px !important;
}

/* Section spacing */
.stock-section,
.how-section {
  padding-top: 72px !important;
  padding-bottom: 72px !important;
}

.section-header {
  margin-bottom: 30px !important;
}

.section-header h2,
.section-head h2 {
  font-size: clamp(42px, 5.5vw, 72px) !important;
}

/* Product cards slightly smaller */
.product-grid,
.products-grid {
  gap: 22px !important;
}

.product-card {
  border-radius: 24px !important;
}

.product-image,
.image-wrap {
  height: 250px !important;
}

.product-info {
  padding: 20px !important;
}

.product-info h3 {
  font-size: 20px !important;
}

.product-description,
.description {
  font-size: 13.5px !important;
}

.price {
  font-size: 22px !important;
}

.size-list span {
  padding: 7px 10px !important;
  font-size: 12.5px !important;
}

.size-select {
  padding: 12px 14px !important;
}

.order-btn,
.details-btn,
.primary-btn,
.secondary-btn,
.hero-btn,
.submit-btn,
.refresh-btn {
  padding: 13px 18px !important;
  font-size: 14px !important;
}

/* Product details page */
.details-layout {
  gap: 34px !important;
}

.main-image-box {
  min-height: 540px !important;
}

.main-image-box img {
  min-height: 540px !important;
}

.info-panel {
  padding: 28px !important;
}

.product-title {
  font-size: clamp(40px, 4.5vw, 62px) !important;
}

.thumb {
  width: 78px !important;
  height: 78px !important;
}

.gallery {
  grid-template-columns: 78px 1fr !important;
}

/* Login / Signup page */
.form-box {
  max-width: 420px !important;
  padding: 32px !important;
}

.form-box h2 {
  font-size: 44px !important;
}

.input-group input,
.input-group textarea,
.input-group select {
  padding: 13px 15px !important;
}

/* Admin page */
.admin-layout {
  grid-template-columns: 250px 1fr !important;
}

.sidebar {
  padding: 24px !important;
}

.topbar h1 {
  font-size: clamp(40px, 4.5vw, 64px) !important;
}

.card {
  padding: 24px !important;
  border-radius: 24px !important;
}

.product-admin-card {
  grid-template-columns: 145px 1fr !important;
}

.product-main-img {
  width: 145px !important;
  height: 145px !important;
}

/* Laptop medium screens */
@media (max-width: 1200px) {
  html {
    font-size: 14.5px;
  }

  .product-grid,
  .products-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .hero {
    grid-template-columns: 1fr 0.9fr !important;
  }

  .hero-card img {
    height: 330px !important;
  }
}

/* Tablet */
@media (max-width: 980px) {
  html {
    font-size: 14px;
  }

  .hero {
    grid-template-columns: 1fr !important;
    padding-top: 48px !important;
    padding-bottom: 58px !important;
  }

  .hero h1 {
    font-size: clamp(56px, 13vw, 95px) !important;
  }

  .hero-card {
    transform: rotate(0deg) !important;
    width: 100%;
  }

  .hero-card img {
    height: 320px !important;
  }

  .details-layout {
    grid-template-columns: 1fr !important;
  }

  .gallery,
  .info-panel {
    position: static !important;
  }

  .main-image-box {
    min-height: 460px !important;
  }

  .main-image-box img {
    min-height: 460px !important;
  }

  .admin-layout {
    grid-template-columns: 1fr !important;
  }

  .sidebar {
    height: auto !important;
    position: relative !important;
  }
}

/* Phone */
@media (max-width: 620px) {
  html {
    font-size: 13.5px;
  }

  .navbar {
    padding-left: 5% !important;
    padding-right: 5% !important;
    gap: 10px !important;
  }

  .nav-actions {
    gap: 8px !important;
  }

  .nav-logo img,
  .logo img {
    width: 42px !important;
    height: 42px !important;
  }

  .hero,
  .stock-section,
  .how-section,
  .footer,
  .section,
  .page,
  .main {
    padding-left: 5% !important;
    padding-right: 5% !important;
  }

  .hero {
    padding-top: 42px !important;
    padding-bottom: 50px !important;
  }

  .hero h1 {
    font-size: 58px !important;
  }

  .hero-text,
  .hero p {
    font-size: 14.5px !important;
  }

  .hero-card img {
    height: 260px !important;
  }

  .brand-strip {
    justify-content: flex-start !important;
    overflow-x: auto !important;
    gap: 26px !important;
    padding-left: 18px !important;
  }

  .brand-strip span {
    font-size: 22px !important;
    flex-shrink: 0;
  }

  .stock-section,
  .how-section {
    padding-top: 56px !important;
    padding-bottom: 56px !important;
  }

  .section-header h2,
  .section-head h2 {
    font-size: 44px !important;
  }

  .product-grid,
  .products-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .product-image,
  .image-wrap {
    height: 235px !important;
  }

  .product-info {
    padding: 18px !important;
  }

  .card-buttons {
    grid-template-columns: 1fr !important;
  }

  .gallery {
    grid-template-columns: 1fr !important;
  }

  .thumb-list {
    flex-direction: row !important;
    overflow-x: auto !important;
    order: 2;
  }

  .thumb {
    width: 68px !important;
    height: 68px !important;
    flex: 0 0 auto;
  }

  .main-image-box {
    min-height: 340px !important;
    border-radius: 22px !important;
  }

  .main-image-box img {
    min-height: 340px !important;
  }

  .info-panel {
    padding: 22px !important;
  }

  .product-title {
    font-size: 42px !important;
  }

  .size-grid {
    grid-template-columns: 1fr !important;
  }

  .form-box {
    max-width: 100% !important;
    padding: 26px !important;
    border-radius: 24px !important;
  }

  .form-box h2 {
    font-size: 40px !important;
  }

  .product-admin-card {
    grid-template-columns: 1fr !important;
  }

  .product-main-img {
    width: 100% !important;
    height: 230px !important;
  }
}