/* ==========================================================
   HOME DESIGN 92 — responsive overrides
   Mobile-first base lives in style.css; this file only adds
   min-width breakpoints, never redefines mobile behavior.
   ========================================================== */

/* ---------- Tablet (600px+) ---------- */
@media (min-width: 600px) {
  .product-grid {
    grid-template-columns: 1fr 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

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

  .gallery-item.is-large {
    grid-column: span 2;
  }

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

/* ---------- Desktop (900px+) ---------- */
@media (min-width: 900px) {
  :root {
    --gutter: 24px;
    --section-pad: 100px;
  }

  .header-bar {
    height: 108px;
  }

  .hero {
    margin-top: -108px;
  }

  .logo-img {
    height: 66px;
  }

  .nav-desktop {
    display: block;
  }

  .social-icons {
    display: flex;
  }

  .nav-desktop ul {
    display: flex;
    align-items: center;
    gap: 32px;
  }

  .nav-desktop li {
    position: relative;
  }

  .nav-desktop > ul > li > a,
  .nav-dropdown-trigger {
    font-size: 14px;
    font-weight: 500;
    position: relative;
    padding: 8px 0;
  }

  .nav-desktop > ul > li > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 100%;
    bottom: 0;
    height: 1px;
    background: currentColor;
    transition: right 250ms ease;
  }

  .nav-desktop > ul > li > a:hover::after {
    right: 0;
  }

  .nav-dropdown-trigger {
    color: inherit;
  }

  .nav-caret {
    margin-top: 1px;
  }

  .has-dropdown .nav-dropdown {
    position: absolute;
    top: 100%;
    left: -16px;
    min-width: 200px;
    background: var(--white);
    color: var(--charcoal);
    box-shadow: 0 12px 24px rgba(23, 23, 22, 0.1);
    padding: 8px 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
  }

  .has-dropdown:hover .nav-dropdown,
  .has-dropdown.is-open .nav-dropdown {
    display: flex;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav-dropdown a {
    padding: 10px 16px;
    font-size: 14px;
  }

  .nav-dropdown a:hover {
    background: var(--ivory);
  }

  .search-panel-inner {
    padding: 16px var(--gutter);
  }

  .hamburger {
    display: none;
  }

  .mobile-menu {
    display: none;
  }

  .hero {
    height: 100vh;
  }

  .hero-content {
    max-width: 640px;
    padding-bottom: 96px;
  }

  .hero-eyebrow {
    font-size: 13px;
  }

  .hero-content h1 {
    font-size: 72px;
    max-width: 13ch;
  }

  .hero-content p {
    font-size: 18px;
  }

  .hero-dots {
    right: var(--gutter);
    bottom: 40px;
  }

  .section-head {
    margin-bottom: 48px;
  }

  .section-head h2 {
    font-size: 40px;
  }

  .section-head p {
    font-size: 16px;
  }

  .category-grid {
    grid-template-columns: 7fr 5fr;
  }

  .category-large {
    min-height: 640px;
  }

  .category-large .category-label {
    padding: 32px;
  }

  .category-large .category-name {
    font-size: 28px;
  }

  .category-small {
    flex-direction: row;
    flex: 1;
  }

  .category-small img {
    width: 40%;
    height: auto;
  }

  .category-small .category-label {
    justify-content: center;
  }

  .product-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .about-section .container {
    grid-template-columns: 7fr 5fr;
    align-items: stretch;
  }

  .about-image {
    order: 2;
  }

  .about-text {
    order: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .benefits-list {
    grid-template-columns: repeat(4, 1fr);
  }

  .benefit-item {
    border-top: none;
    border-left: 1px solid #e8e0d5;
    padding: 0 24px;
  }

  .benefit-item:first-child {
    padding-left: 0;
  }

  .benefit-item:last-child {
    border-bottom: none;
  }

  .gallery-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
  }

  .gallery-item.is-large {
    grid-column: span 2;
    grid-row: span 2;
  }

  .story-grid {
    gap: 16px;
  }

  .story-grid img {
    height: 320px;
  }

  .services-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .footer-grid {
    grid-template-columns: 2fr 1fr 1fr 1.4fr;
    gap: 24px;
  }

  .footer-newsletter form {
    flex-direction: row;
  }

  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* ---------- Wide desktop (1200px+) ---------- */
@media (min-width: 1200px) {
  .hero-content h1 {
    font-size: 80px;
  }
}


@media (max-width: 899px) {
  .has-dropdown { display: grid; grid-template-columns: minmax(0,1fr) auto; width: 100%; gap: 0; }
  .mobile-menu .has-dropdown > .nav-product-link { grid-column: 1; grid-row: 1; }
  .mobile-menu .has-dropdown > .nav-dropdown-trigger { grid-column: 2; grid-row: 1; width: auto; min-width: 54px; justify-content: center; padding: 18px; border-bottom: 1px solid #e8e0d5; }
  .mobile-menu .has-dropdown > .nav-dropdown { grid-column: 1 / -1; }
  .product-filters { grid-template-columns: repeat(2,minmax(0,1fr)); padding: 14px; }
  .filter-search { grid-column: 1 / -1; }
  .product-filters > .btn { grid-column: 1 / -1; }
  .product-detail { grid-template-columns: 1fr; gap: 24px; }
  .hero-inner-page { height: 58vh; min-height: 400px; }
}
@media (max-width: 520px) {
  .product-filters { grid-template-columns: 1fr 1fr; gap: 10px; }
  .filter-group label { font-size: 11px; }
  .product-filters .btn { width: 100%; }
  .product-detail-actions .btn { width: 100%; }
}


@media (max-width: 639px) {
  #about-stores .stores-grid { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  #about-stores .section-head h2 { font-size: clamp(1.5rem, 6vw, 1.95rem); }
  #about-stores .store-card { padding: 17px 16px; }
  #about-stores .store-card h3 { font-size: 1.02rem; }
}

@media (min-width: 640px) and (max-width: 900px) {
  #about-stores .stores-grid { gap: 15px; }
  #about-stores .store-card { padding: 17px; }
}