/* Fluid shell – works from ~320px to ultra-wide without layout blowouts */
.page-shell {
  width: min(100%, var(--container));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Prevent endless stretch on 2K/4K */
.site-main,
.hero__content,
.editorial__content {
  max-width: 100%;
}

/* Larger touch targets on coarse pointers */
@media (pointer: coarse) {
  .nav-link,
  .icon-btn,
  .size-btn,
  .color-swatch,
  .fit-option,
  .btn,
  .thumb-btn,
  .product-card__fav,
  .product-card__quick,
  .product-card__add,
  .qty-control button,
  .filter-chip,
  .stl-hotspot {
    min-height: 2.75rem;
  }

  .icon-btn,
  .product-card__fav {
    min-width: 2.75rem;
  }

  .color-swatch {
    width: 2rem;
    height: 2rem;
  }
}

/* Hover enhancements only when hover is available */
@media (hover: hover) and (pointer: fine) {
  .category-card:hover img {
    transform: scale(1.05);
  }
}

/* Ultra-wide breathing room without stretching content */
@media (min-width: 1800px) {
  :root {
    --container: 96rem;
    --gutter: clamp(2rem, 4vw, 4.5rem);
  }

  .hero__content {
    margin-left: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
  }
}

/* Very small phones */
@media (max-width: 360px) {
  .hero__title {
    font-size: clamp(2.4rem, 14vw, 3.2rem);
  }

  .logo__claim {
    letter-spacing: 0.16em;
  }

  .announcement {
    font-size: 0.62rem;
  }
}

/* Tablet landscape / small laptops */
@media (min-width: 761px) and (max-width: 1100px) {
  .product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .lookbook__layout,
  .community__layout {
    grid-template-columns: 1fr 1.1fr;
  }
}

/* Safe area for notched devices + sticky buy */
@supports (padding: max(0px)) {
  .sticky-buy {
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
  }
}

/* Shop filter overflow safety */
.shop-layout,
.active-filters,
.shop-filters,
.filter-chips {
  max-width: 100%;
}

/* Sale price presentation (admin-ready) */
.price-row {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.price-row__current {
  font-weight: 500;
}

.price-row__compare {
  color: var(--color-muted);
  text-decoration: line-through;
  font-size: 0.92em;
}

.price-row__badge {
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-brown);
}