.catalog-header {
  justify-content: space-between;
  border-bottom: var(--stroke-thin) solid var(--line);
}

.catalog-header .gn-nav__link[aria-current] {
  text-decoration: underline;
  text-decoration-color: var(--brand);
  text-decoration-thickness: var(--stroke);
  text-underline-offset: var(--space-2);
}

.catalog-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-6);
  padding: var(--space-7) 0;
}

.catalog-hero h1 {
  margin: 0;
  max-width: 10ch;
}

.catalog-hero .lead {
  max-width: 32ch;
  margin: var(--space-5) 0 0;
  color: var(--ink-soft);
}

.catalog-hero__collage {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  min-width: 0;
}

.catalog-hero__photo {
  width: min(55%, 224px);
  --gn-tilt: var(--tilt-left);
}

.catalog-hero__photo + .catalog-hero__photo {
  --gn-tilt: var(--tilt-right);
  margin: var(--space-6) 0 0 calc(-1 * var(--space-3));
}

.catalog-hero__photo .gn-photo__img {
  aspect-ratio: 1;
}

.catalog-list {
  scroll-margin-top: var(--space-4);
}

.catalog-filter-panel {
  padding: var(--space-4) 0 var(--space-6);
  border-top: var(--stroke-thin) dashed var(--ink);
}

.catalog-filter-panel__summary { display: none; }

.catalog-filters {
  display: grid;
}

.catalog-filters__row {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr);
  align-items: start;
  gap: var(--space-2);
  padding: var(--space-3) 0;
}

.catalog-filters__row + .catalog-filters__row { border-top: 1px solid var(--line); }

.catalog-filters__label {
  padding-top: var(--space-1);
}

.catalog-filters__options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.catalog-filters__reset { margin-left: var(--space-1); }

.catalog-filters .gn-chip[aria-current] {
  background: var(--ink);
  color: var(--paper);
  box-shadow: none;
}

.catalog-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-7) var(--space-5);
}

.catalog-card {
  min-width: 0;
  scroll-margin-top: var(--space-4);
}

.catalog-card__image,
.find-gallery__slide .gn-photo__img {
  aspect-ratio: 4 / 5;
}

.catalog-card__photo-link { display: block; }
.find-gallery__enlarge { cursor: zoom-in; }
.catalog-card__photo-link:focus-visible, .find-gallery__enlarge:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.catalog-card__image img[hidden] { display: none; }
.catalog-card__gallery .gn-gift__badge { pointer-events: none; }

.gallery-arrow {
  position: absolute;
  z-index: 1;
  top: 50%;
  translate: 0 -50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: var(--stroke-thin) solid var(--ink);
  border-radius: var(--radius-full);
  box-shadow: var(--pop-sm);
  background: var(--card);
  color: var(--ink);
  font: 800 20px/1 var(--font-sans);
  cursor: pointer;
}

.gallery-arrow[hidden] { display: none; }
.gallery-arrow--previous { left: var(--space-2); }
.gallery-arrow--next { right: var(--space-2); }
.gallery-arrow:hover { background: var(--pink-soft); }
.gallery-arrow:focus-visible { outline: none; box-shadow: var(--focus-ring); }

@media (hover: hover) and (pointer: fine) {
  .catalog-card:not(:hover):not(:focus-within) .gallery-arrow,
  .find-gallery__photos:not(:hover):not(:focus-within) .gallery-arrow { opacity: 0; }
}

.gallery-status {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.catalog-card__description {
  margin: 0 0 var(--space-2);
  font-size: 15px;
  line-height: 1.45;
}

.catalog-card__budget {
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
}

.catalog-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  margin-top: var(--space-7);
}

.catalog-empty {
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--pink-soft);
}

.catalog-empty p {
  margin: 0 0 var(--space-4);
}

.catalog-back {
  margin: var(--space-5) 0 var(--space-6);
}

.find-detail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: "gallery copy" "gallery shops";
  align-items: start;
  align-content: start;
  grid-template-rows: auto 1fr;
  gap: var(--space-5) var(--space-7);
}

.find-detail__copy { grid-area: copy; }
.find-gallery { grid-area: gallery; min-width: 0; }
.find-detail__shops { grid-area: shops; }

.find-detail h1 {
  margin: var(--space-2) 0 var(--space-4);
  overflow-wrap: anywhere;
}

.find-detail__budget {
  margin: 0;
  color: var(--ink-soft);
}

.find-detail__badge { margin: 0 0 var(--space-3); }

.find-detail__story {
  margin: var(--space-5) 0 0;
  border-top: var(--stroke-thin) dashed var(--ink);
}

.find-detail__story h2, .find-brand__text {
  margin: var(--space-4) 0 var(--space-2);
}

.find-detail__shops {
  padding-top: var(--space-4);
  border-top: var(--stroke-thin) solid var(--line);
}

.find-detail__shops h2 { margin: 0 0 var(--space-3); }
.find-detail__shops .small { color: var(--ink-soft); }

.find-detail__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
  margin: 0;
}

.find-detail__buttons li { max-width: 100%; }
.shop-button { max-width: 100%; white-space: normal; text-align: center; }
.find-detail__marketplace { margin-top: var(--space-4); }
.find-detail__socials { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-4); }

.find-gallery__photos { position: relative; display: grid; gap: var(--space-4); }
.find-gallery__photos[data-gallery-swipe], .photo-viewer img { touch-action: pan-y pinch-zoom; }
.find-gallery__slide[hidden] { display: none; }

.find-gallery__enlarge { display: block; width: 100%; height: 100%; }

.photo-viewer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: var(--space-6);
  border: 0;
  background: var(--ink);
  color: var(--paper);
}

.photo-viewer[open] {
  display: grid;
  grid-template: auto minmax(0, 1fr) / auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-4);
}

body:has(.photo-viewer[open]) { overflow: hidden; }
.photo-viewer__header { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; }
.photo-viewer img { grid-row: 2; grid-column: 2; width: 100%; height: 100%; object-fit: contain; }
.photo-viewer__previous { grid-row: 2; grid-column: 1; }
.photo-viewer__next { grid-row: 2; grid-column: 3; }
.photo-viewer [hidden] { display: none; }

@media (max-width: 600px) {
  .photo-viewer { padding: var(--space-3); }
  .photo-viewer[open] { grid-template: auto minmax(0, 1fr) auto / 1fr 1fr; }
  .photo-viewer img { grid-column: 1 / -1; }
  .photo-viewer__previous { grid-row: 3; justify-self: start; }
  .photo-viewer__next { grid-row: 3; grid-column: 2; justify-self: end; }
}

.find-gallery__thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.find-gallery__thumbs a {
  display: block;
  overflow: hidden;
  width: 76px;
  aspect-ratio: 1;
  border: var(--stroke-thin) solid transparent;
  border-radius: var(--radius-sm);
  background: var(--lilac-soft);
}

.find-gallery__thumbs a[aria-current] { border-color: var(--blue); }
.find-gallery__thumbs a:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.find-gallery__thumbs img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (max-width: 890px) {
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .catalog-hero .hero { font-size: 40px; line-height: 46px; }
  .find-detail { column-gap: var(--space-5); }
}

@media (max-width: 600px) {
  .gn-page { padding: 0 var(--space-4); }
  .catalog-header { padding: var(--space-4) 0; }
  .catalog-header .gn-nav { width: auto; }
  .gn-logo { font-size: 19px; }
  .catalog-hero { grid-template-columns: 1fr; gap: var(--space-3); padding: var(--space-6) 0; }
  .catalog-hero .lead { margin-top: var(--space-4); }
  .catalog-hero__collage { max-width: 320px; justify-self: center; }
  .catalog-grid { gap: var(--space-6) var(--space-3); }
  .catalog-filter-panel { padding-bottom: var(--space-5); }
  .catalog-filter-panel__summary { display: inline-flex; cursor: pointer; list-style: none; }
  .catalog-filter-panel__summary::-webkit-details-marker { display: none; }
  .catalog-filter-panel[open] .catalog-filter-panel__chevron { transform: rotate(180deg); }
  .catalog-filter-panel[open] .catalog-filters { margin-top: var(--space-3); }
  .catalog-filters__row { grid-template-columns: minmax(0, 1fr); }
  .catalog-card .gn-gift__foot { flex-wrap: wrap; }
  .catalog-card .gn-gift__badge { top: var(--space-2); left: var(--space-2); }
  .find-detail {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "copy" "gallery" "shops";
  }
  .find-detail h1 { font-size: 28px; line-height: 34px; }
}

@media (max-width: 350px) {
  .catalog-grid { grid-template-columns: minmax(0, 1fr); }
}