.catalogue-page { background: #f7fbfd; }
.catalogue-page main { overflow: hidden; }
.catalogue-hero {
  min-height: min(900px, 100dvh);
  max-width: 1600px;
  margin: 0 auto;
  padding: clamp(7.5rem, 13vh, 10rem) var(--gutter) clamp(4rem, 7vw, 7rem);
  display: grid;
  grid-template-columns: minmax(320px, .8fr) minmax(0, 1.2fr);
  gap: clamp(2.5rem, 7vw, 8rem);
  align-items: center;
}
.catalogue-hero-copy { max-width: 620px; }
.catalogue-hero-copy h1 { font-size: clamp(3.6rem, 6.4vw, 7.4rem); }
.catalogue-hero-copy > p:last-child { max-width: 48ch; color: var(--ink-soft); font-size: clamp(1rem, 1.3vw, 1.2rem); }
.back-link { display: inline-flex; min-height: 44px; align-items: center; margin-bottom: 2rem; color: var(--ink-soft); font-weight: 680; }
.catalogue-hero-image { position: relative; min-height: min(68vh, 680px); overflow: hidden; border-radius: 28px 8px 28px 28px; box-shadow: var(--shadow); }
.catalogue-hero-image img { width: 100%; height: 100%; min-height: inherit; object-fit: cover; }
.catalogue-count { position: absolute; right: 1.25rem; bottom: 1.25rem; display: grid; padding: 1rem 1.15rem; border: 1px solid rgba(255,255,255,.72); border-radius: 14px; background: rgba(255,255,255,.84); backdrop-filter: blur(14px); }
.catalogue-count strong { color: var(--accent); font-family: var(--display); font-size: 2rem; line-height: 1; }
.catalogue-count span { color: var(--ink-soft); font-size: .76rem; }

.catalogue-browser { max-width: 1600px; margin: 0 auto; padding: clamp(4rem, 8vw, 8rem) var(--gutter); }
.catalogue-toolbar { display: grid; grid-template-columns: minmax(260px, .55fr) minmax(0, 1.45fr); gap: 2rem; align-items: end; padding-bottom: 2rem; border-bottom: 1px solid var(--line); }
.catalogue-toolbar h2 { font-size: clamp(3rem, 5vw, 5.5rem); }
.catalogue-filters { display: flex; justify-content: flex-end; gap: .55rem; overflow-x: auto; scrollbar-width: thin; }
.catalogue-filter { min-height: 46px; padding: .65rem .9rem; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.64); color: var(--ink-soft); font-weight: 700; white-space: nowrap; cursor: pointer; transition: color 160ms var(--ease), background-color 160ms var(--ease), border-color 160ms var(--ease), transform 160ms var(--ease); }
.catalogue-filter span { margin-left: .35rem; color: currentColor; font-size: .72rem; font-variant-numeric: tabular-nums; opacity: .7; }
.catalogue-filter:hover, .catalogue-filter.is-active { border-color: var(--accent); background: var(--accent); color: #fff; }
.catalogue-filter:active { transform: scale(.97); }

.catalogue-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; margin-top: 2.5rem; background: var(--line); border: 1px solid var(--line); }
.catalogue-card { min-width: 0; background: #fff; transition: opacity 240ms var(--ease), transform 240ms var(--ease); }
.catalogue-card[hidden] { display: none; }
.frame-visual { --frame: #24333a; --lens: rgba(214,237,247,.32); position: relative; min-height: 270px; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 68% 22%, #fff 0 12%, transparent 35%), linear-gradient(145deg, #edf7fb, #fdfbf6); }
.catalogue-card figure.frame-visual { margin: 0; }
.catalogue-card figure.frame-visual::before,
.catalogue-card figure.frame-visual::after { display: none; }
.catalogue-card figure.frame-visual img { width: 100%; height: 100%; min-height: 270px; object-fit: cover; transition: transform 420ms var(--ease), filter 220ms var(--ease); }
.frame-visual::before, .frame-visual::after { content: ""; position: absolute; top: 50%; width: 31%; height: 31%; border: clamp(5px, .55vw, 9px) solid var(--frame); background: var(--lens); box-shadow: inset 0 0 0 1px rgba(255,255,255,.42), 0 12px 25px rgba(23,62,78,.1); transform: translateY(-50%); }
.frame-visual::before { left: 17%; }
.frame-visual::after { right: 17%; }
.frame-visual > span { position: relative; z-index: 1; width: 8%; border-top: clamp(4px, .45vw, 7px) solid var(--frame); }
.frame-visual > span::before, .frame-visual > span::after { content: ""; position: absolute; top: -4px; width: 52px; border-top: 4px solid var(--frame); opacity: .85; }
.frame-visual > span::before { right: calc(100% + 132px); transform: rotate(8deg); transform-origin: right; }
.frame-visual > span::after { left: calc(100% + 132px); transform: rotate(-8deg); transform-origin: left; }
.shape-round::before, .shape-round::after { border-radius: 50%; }
.shape-oval::before, .shape-oval::after { height: 27%; border-radius: 50%; }
.shape-square::before, .shape-square::after { border-radius: 18%; }
.shape-soft::before, .shape-soft::after { height: 27%; border-radius: 32% 32% 42% 42%; }
.shape-bold::before, .shape-bold::after { width: 32%; height: 34%; border-width: 11px; border-radius: 20%; }
.shape-cat::before { border-radius: 42% 18% 48% 30%; transform: translateY(-50%) skewY(8deg); }
.shape-cat::after { border-radius: 18% 42% 30% 48%; transform: translateY(-50%) skewY(-8deg); }
.shape-geo::before, .shape-geo::after { border-radius: 12% 34% 18% 36%; transform: translateY(-50%) rotate(-4deg); }
.shape-geo::after { border-radius: 34% 12% 36% 18%; transform: translateY(-50%) rotate(4deg); }
.shape-brow::before, .shape-brow::after { height: 27%; border-width: 9px 4px 4px; border-radius: 22% 22% 48% 48%; }
.shape-aviator::before, .shape-aviator::after { height: 36%; border-width: 5px; border-radius: 48% 48% 55% 55%; }
.shape-aviator > span::after { box-shadow: -98px -12px 0 -1px var(--frame); }
.tone-black { --frame: #151a1d; }
.tone-ink { --frame: #26343b; }
.tone-blue { --frame: #126e9d; }
.tone-rose { --frame: #a86572; }
.tone-wine { --frame: #703b4b; }
.tone-brown { --frame: #725442; }
.tone-gold { --frame: #9d7b43; }
.tone-clear { --frame: rgba(150,179,190,.68); }
.tone-tortoise { --frame: #6f4a31; }
.lenses-dark { --lens: rgba(27,44,51,.74); }
.lenses-warm { --lens: rgba(111,76,51,.58); }
.frame-meta { padding: 1.4rem 1.5rem 1.65rem; }
.frame-meta > span { color: var(--accent); font-size: .7rem; font-weight: 780; letter-spacing: .12em; text-transform: uppercase; }
.frame-meta h3 { margin: .35rem 0 .45rem; font-size: clamp(1.45rem, 2vw, 2rem); letter-spacing: -.035em; }
.frame-meta p { min-height: 3.2em; margin: 0 0 1.2rem; color: var(--ink-soft); }
.frame-meta a { display: inline-flex; min-height: 44px; align-items: center; color: var(--ink); font-weight: 720; text-decoration-thickness: 1px; }
.catalogue-price { display:block; margin:-.45rem 0 .65rem; color:var(--ink); font-size:1rem; }
.catalogue-empty { grid-column:1 / -1; padding:clamp(3rem,8vw,7rem); text-align:center; background:#fff; }
.catalogue-empty h3 { margin:0 0 .6rem; font-size:clamp(1.8rem,3vw,2.8rem); }
.catalogue-empty p { margin:0 auto; max-width:48ch; color:var(--ink-soft); }
.catalogue-card:hover .frame-visual { filter: saturate(1.05); }
.catalogue-card:hover figure.frame-visual img { transform: scale(1.025); }
.catalogue-card:hover .frame-visual::before, .catalogue-card:hover .frame-visual::after { transform: translateY(-53%); }
.catalogue-card:hover .shape-cat::before { transform: translateY(-53%) skewY(8deg); }
.catalogue-card:hover .shape-cat::after { transform: translateY(-53%) skewY(-8deg); }
.catalogue-card:hover .shape-geo::before { transform: translateY(-53%) rotate(-4deg); }
.catalogue-card:hover .shape-geo::after { transform: translateY(-53%) rotate(4deg); }

.catalogue-close { max-width: calc(1600px - var(--gutter) * 2); margin: 0 auto var(--gutter); padding: clamp(3rem, 7vw, 7rem); border-radius: 28px; background: #075c88; color: #fff; }
.catalogue-close .eyebrow { color: rgba(255,255,255,.72); }
.catalogue-close h2 { max-width: 11ch; }
.catalogue-close > p:not(.eyebrow) { max-width: 52ch; color: rgba(255,255,255,.78); }
.catalogue-close > div { display: flex; align-items: center; gap: 1.25rem; margin-top: 2rem; }
.catalogue-close .button { border-color: #fff; background: #fff; color: #075c88; }
.catalogue-close .text-link { color: #fff; }

@media (max-width: 980px) {
  .catalogue-hero { grid-template-columns: .8fr 1.2fr; }
  .catalogue-toolbar { grid-template-columns: 1fr; }
  .catalogue-filters { justify-content: flex-start; }
  .catalogue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .catalogue-hero { min-height: auto; grid-template-columns: 1fr; gap: 2rem; padding-top: 7rem; }
  .catalogue-hero-copy h1 { font-size: clamp(3.2rem, 15vw, 4.7rem); }
  .catalogue-hero-image { min-height: 360px; }
  .catalogue-browser { padding-inline: 0; }
  .catalogue-toolbar { padding-inline: var(--gutter); }
  .catalogue-filters { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); padding-bottom: .45rem; }
  .catalogue-grid { grid-template-columns: 1fr; border-inline: 0; }
  .frame-visual { min-height: 250px; }
  .catalogue-close { margin-inline: .55rem; padding: 2.2rem 1.4rem 2.6rem; }
  .catalogue-close > div { align-items: stretch; flex-direction: column; }
  .catalogue-close .button, .catalogue-close .text-link { width: 100%; justify-content: center; min-height: 50px; }
  .catalogue-footer { padding-inline: var(--gutter); }
}
@media (prefers-reduced-motion: reduce) {
  .catalogue-card, .frame-visual::before, .frame-visual::after { transition: none; }
}