/* ==========================================================================
   Responsive breakpoints: 1440 / 1200 / 992 / 768 / 576 / 480 / 360
   ========================================================================== */

@media (max-width: 1440px) {
    .container { max-width: 1140px; }
}

@media (max-width: 1200px) {
    .container { max-width: 960px; }
    .footer-grid { grid-template-columns: 1.4fr repeat(2, 1fr); }
    .design-grid.grid-asymmetric { grid-template-columns: repeat(4, 1fr); }
    .design-grid.grid-asymmetric .design-card:nth-child(1) { grid-column: span 2; }
    .design-grid.grid-asymmetric .design-card:nth-child(4) { grid-column: span 2; }
}

@media (max-width: 992px) {
    .container { max-width: 720px; }
    .main-nav { display: none; }
    .mobile-menu-toggle { display: flex; }
    .hero-inner { grid-template-columns: 1fr; }
    .hero-visual { height: 320px; order: -1; }
    .design-detail { grid-template-columns: 1fr; gap: 32px; }
    .design-gallery { position: static; }
    .steps-grid { grid-template-columns: repeat(2, 1fr); }
    .footer-grid { grid-template-columns: 1fr 1fr; padding: 48px 0 24px; }
    .form-row { grid-template-columns: 1fr; }
    .odmp-products { gap: 12px; }
    .attr-group-head { grid-template-columns: 1fr; }
    .attr-option-row { grid-template-columns: 1fr 44px auto; }
}

@media (max-width: 768px) {
    .container { max-width: 100%; padding: 0 18px; }
    .topbar-inner span:first-child { display: none; }
    .logo img { height: var(--logo-height-mobile, 32px); }
    .logo-text { font-size: 1.2rem; }
    .section { padding: 48px 0; }
    .design-grid, .design-grid.grid-asymmetric { grid-template-columns: repeat(2, 1fr); }
    .design-grid.grid-asymmetric .design-card { grid-column: span 1 !important; }
    .product-grid { grid-template-columns: repeat(2, 1fr); }
    .cta-band { flex-direction: column; text-align: center; padding: 40px 24px; }
    .filters-bar { flex-direction: column; align-items: stretch; }
    .filters-group { justify-content: flex-start; }
    .steps-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
    .footer-grid { grid-template-columns: 1fr; gap: 28px; padding: 40px 0 16px; }
    .modal { padding: 24px; }

    /* App-style mobile shell: hide the promo topbar and duplicate header
       icons now that the bottom tab bar carries primary navigation. */
    .topbar { display: none; }
    .header-actions .account-btn, .header-actions .basket-btn { display: none; }
    .app-tabbar { display: flex; }
    body { padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px)); }

    .product-select-card { flex-wrap: wrap; }
    .add-to-quote-btn { width: 100%; }
}

@media (max-width: 576px) {
    .hero { padding: 32px 0 24px; }
    .hero-actions { flex-direction: column; }
    .hero-actions .btn { width: 100%; }
    .hero-stats { justify-content: space-between; gap: 12px; }
    .design-grid, .design-grid.grid-asymmetric, .product-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .steps-grid { grid-template-columns: 1fr; }
    .testimonial-grid { grid-template-columns: 1fr; }
    .section-head-row { flex-direction: column; align-items: flex-start; }
    .odmp-hub { gap: 20px; }
    .search-form { flex-direction: column; border-radius: var(--radius-md); }
    .search-form button { padding: 14px; border-radius: var(--radius-sm); }
    .form-card { padding: 24px 18px; }
    .newsletter-form { flex-direction: column; }
}

@media (max-width: 480px) {
    h1 { font-size: 1.8rem; }
    .design-grid, .design-grid.grid-asymmetric, .product-grid { grid-template-columns: 1fr 1fr; }
    .basket-item-row { flex-wrap: wrap; }
    .gallery-thumbs img { width: 60px; height: 60px; }
}

@media (max-width: 360px) {
    .container { padding: 0 14px; }
    .btn { padding: 12px 20px; font-size: 0.88rem; }
}