/* CRASHED STORE: centered collection frame. Loaded AFTER responsive navigation.
   Keep heading, filters, counter and product cards on the same center line. */
.shop > h2,
.shop > .shop-description,
.shop > .shop-filters,
.shop > .filter-count-row,
.shop > #productsGrid {
  width: 100%;
  max-width: 1440px;
  margin-left: auto;
  margin-right: auto;
}
.shop::after { max-width: 1440px; margin-left: auto; margin-right: auto; }
.shop > .shop-filters { margin-top: 36px; }
.shop > .filter-count-row { margin-top: 18px; }
.shop > #productsGrid { margin-top: 24px; }
/* Four balanced desktop columns, but no stretched fifth-card oddities. */
@media (min-width: 1150px) {
  .shop > #productsGrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
  .shop > #productsGrid { justify-content: center; }
}
@media (max-width: 700px) {
  .shop > .shop-filters { margin-top: 26px; }
  .shop > #productsGrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shop > .filter-count-row { justify-content: flex-end; }
}
/* A little more legibility without introducing extra decorations. */
.shop .filter-hint { color: #9c9c9c; }
.light-mode .shop .filter-hint { color: #555; }
.shop .shop-piece:focus-within { border-color: #777; }
@media (prefers-reduced-motion: reduce) {
  .shop .shop-piece, .shop .product-photo { transition: none !important; }
}

/* SHOP ALL typography + clean filter refinement — 2026-11-02
   Presentation only. Product and filter functionality is unchanged. */
.shop > h2 {
  font-size: clamp(45px, 3.75vw, 56px);
  line-height: 1.06;
  font-weight: 800;
  letter-spacing: -.045em;
  margin-bottom: 15px;
}
.shop > .shop-description {
  font-size: 15.5px;
  line-height: 1.65;
}

/* Subtle separation and consistent inset spacing. */
.shop > .shop-filters {
  padding: 27px 27px 23px;
  border: 1px solid #303030;
  border-radius: 18px;
  background: linear-gradient(180deg, #161616 0%, #121212 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}
.shop .filter-topline {
  align-items: center;
  margin-bottom: 21px;
}
.shop .filter-heading {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .135em;
  color: #fafafa;
}
.shop .filters-reset {
  min-height: 36px;
  padding-inline: 17px;
  color: #c8c8c8;
  border-color: #373737;
  background: #1b1b1b;
  letter-spacing: .075em;
}
.shop .filters-reset:disabled {
  opacity: .5;
}
.shop .filter-fields {
  column-gap: 17px;
  row-gap: 17px;
}
.shop .filter-field {
  gap: 9px;
}
.shop .filter-field label,
.shop .filter-field .filter-label {
  color: #b0b0b0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
}
.shop .filter-field select,
.shop .filter-field input {
  height: 47px;
  padding-inline: 14px;
  border-radius: 10px;
  border-color: #393939;
  background-color: #1a1a1a;
  font-size: 12.5px;
  color: #f7f7f7;
}
.shop .filter-field select {
  padding-right: 32px;
  background-position: right 13px center;
}
.shop .filter-field select:hover,
.shop .filter-field input:hover {
  border-color: #676767;
  background-color: #202020;
}
.shop .filter-field select:focus-visible,
.shop .filter-field input:focus-visible {
  outline: 2px solid #e9e9e9;
  outline-offset: 2px;
  border-color: #929292;
}
.shop .filter-price-fields {
  gap: 9px;
}
.shop .filter-hint {
  margin-top: 16px;
  color: #9c9c9c;
  font-size: 11.5px;
}

/* The same refined panel and inputs in light mode. */
.light-mode .shop > .shop-filters {
  background: linear-gradient(180deg, #fff 0%, #fafafa 100%);
  border-color: #d6d6d6;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}
.light-mode .shop .filter-heading { color: #151515; }
.light-mode .shop .filter-field label,
.light-mode .shop .filter-field .filter-label { color: #555; }
.light-mode .shop .filter-field select,
.light-mode .shop .filter-field input {
  background-color: #fff;
  color: #111;
  border-color: #c8c8c8;
}
.light-mode .shop .filter-field select:hover,
.light-mode .shop .filter-field input:hover {
  background-color: #f8f8f8;
  border-color: #888;
}
.light-mode .shop .filter-field select:focus-visible,
.light-mode .shop .filter-field input:focus-visible {
  outline-color: #333;
}
.light-mode .shop .filters-reset {
  color: #484848;
  background-color: #f6f6f6;
  border-color: #d1d1d1;
}
.light-mode .shop .filter-hint { color: #666; }

@media (max-width: 700px) {
  .shop > h2 { font-size: clamp(38px, 8vw, 44px); }
  .shop > .shop-filters { padding: 22px 18px 19px; }
  .shop .filter-fields { gap: 15px 11px; }
  .shop .filter-field select,
  .shop .filter-field input { height: 45px; font-size: 12px; }
  .shop .filter-topline { margin-bottom: 18px; }
  .shop .filters-reset { min-height: 34px; font-size: 10px; }
}
@media (max-width: 410px) {
  .shop .filter-fields > .filter-field:nth-child(5),
  .shop .filter-fields > .filter-field:nth-child(6) { grid-column: 1 / -1; }
  .shop .filter-heading { font-size: 11px; }
  .shop > .shop-filters { padding-inline: 15px; }
}