/* Shop all / collection page (UI-03). Look A's tokens and the shared footer come from style.css.
   Desktop only for now (D-42): the narrow-window rule below only keeps the grid from breaking. */

.shop .review-switch { bottom: 12px; }
.shop .crumbs { display: flex; gap: 8px; padding-top: 28px; font-size: 13px; color: var(--muted); }
.shop .crumbs a { color: var(--muted); text-decoration: none; }
.shop .crumbs a:hover { color: var(--ink); text-decoration: underline; }
.shop .shop-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: 14px 0 28px; }
.shop .shop-head h1 { font-size: 48px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.05; }
.shop .shop-head p { margin-top: 10px; font-size: 17px; color: var(--muted); }

/* Filters and sort stay in reach under the header while the grid scrolls */
.shop .toolbar {
  position: sticky; top: 64px; z-index: 20;   /* flush under the scrolled header's hairline (64px, D-106) */
  display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0;
  background: rgba(255, 255, 255, 0.92); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.shop .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.shop .chip-filter { height: 44px; padding: 0 18px; border: 1px solid var(--field-line); border-radius: 999px; background: var(--surface); color: var(--ink); font-size: 15px; font-weight: 600; }
.shop .chip-filter:hover { border-color: var(--control-line); }
.shop .chip-filter[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-dark); }
.shop .toolbar-right { display: flex; align-items: center; gap: 20px; }
.shop .count { font-size: 15px; color: var(--muted); white-space: nowrap; }
.shop .sort { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; }
.shop .sort select {
  height: 44px; padding: 0 40px 0 16px; border: 1px solid var(--control-line); border-radius: 999px; background-color: var(--surface);
  font-size: 15px; -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2312342A' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center;
}

/* Product tiles: starting price, minimum order and colors available (D-34) */
.shop .grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 20px; margin: 32px 0 0; padding: 0; list-style: none; }
.shop .tile { display: flex; flex-direction: column; min-width: 0; }
.shop .tile-link { display: flex; flex-direction: column; gap: 3px; color: var(--ink); text-decoration: none; }
.shop .tile-img { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 1; margin-bottom: 14px; overflow: hidden; border-radius: var(--radius-m); background: var(--stage); }
.shop .tile-img img { width: 100%; height: 100%; object-fit: contain; }
.shop .tile-img img.is-tall { height: 86%; }
.shop .tile-img svg { width: 80%; }
/* The polo tile is a torso crop of the photo, so the polo is the subject */
.shop .tile-img.is-polo { display: block; }
.shop .tile-img .tile-polo { position: absolute; left: -42.86%; top: -78.6%; width: 171.4%; height: auto; max-width: none; }
.shop .tile-name { font-size: 18px; font-weight: 700; letter-spacing: -0.015em; }
.shop .tile-link:hover .tile-name { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.shop .tile-price { font-size: 16px; font-weight: 600; }
.shop .tile-min { font-size: 14px; color: var(--muted); }
.shop .swatches-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 10px; }
.shop .sw-group { display: flex; gap: 2px; margin-left: -4px; }
.shop .sw { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; padding: 0; background: transparent; border: 0; border-radius: 50%; }
.shop .sw span { width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16); }
.shop .sw[aria-pressed="true"] span { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16), 0 0 0 2px var(--surface), 0 0 0 3.5px var(--ink); }
.shop .sw-label { font-size: 13px; font-weight: 600; }
.shop .sw-more { font-weight: 400; color: var(--muted); }

.shop .ask { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 96px; padding: 40px 48px; border-radius: var(--radius-l); background: var(--stage); }
.shop .ask h2 { font-size: 28px; font-weight: 700; letter-spacing: -0.025em; }
.shop .ask p { max-width: 44em; margin-top: 6px; font-size: 16px; color: var(--muted); }

@media (max-width: 1100px) { .shop .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }