/**
 * SOLMAZ CERAMICS — Responsive refinements
 * Most breakpoints live in main.css.
 * This file only adds mobile shop filter-sheet polish and overflow fixes.
 */

/* Prevent horizontal bleed on narrow viewports */
html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

img,
svg,
video,
iframe {
  max-width: 100%;
}

.site-header,
.site-main,
.site-footer,
.bottom-nav {
  max-width: 100vw;
}

/* ---------- Mobile shop filter sheet refinements ---------- */
@media (max-width: 768px) {
  .filters-panel {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .filters-panel.open {
    padding-top: 1rem;
  }

  .filters-panel .filters-sheet-head,
  .filters-panel > h3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--white);
    padding-bottom: 0.75rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--border);
  }

  /* Dimmed backdrop when filter sheet is open */
  body.filters-open::before,
  .filters-backdrop {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(31, 26, 23, 0.42);
    z-index: calc(var(--z-sheet) - 1);
  }

  .filters-backdrop {
    display: none;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
  }

  .filters-backdrop.open,
  body.filters-open .filters-backdrop {
    display: block;
  }

  /* Keep product grids from overflowing card chrome */
  .product-card,
  .product-card-media,
  .cart-table,
  .account-content {
    max-width: 100%;
  }

  .shop-toolbar .form-control {
    min-width: 0;
    width: 100%;
  }

  /* Safe area for bottom nav + filter sheet */
  .filters-panel.open {
    padding-bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  }
}

@media (max-width: 360px) {
  .filters-panel {
    max-height: min(88vh, 560px);
  }

  .header-actions .icon-btn {
    width: 36px;
    height: 36px;
  }
}

/* Large desktop: slight container breathing room only */
@media (min-width: 1280px) {
  .container {
    padding-inline: clamp(1rem, 2vw, 1.5rem);
  }
}