.catalog-page { background: #edf1f6; }
.catalog-page .site-header { background: rgba(5, 16, 36, .96); }
.catalog-hero { min-height: 560px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(300px, .45fr); gap: 4rem; align-items: end; padding: 10.5rem clamp(1.25rem, 5.5vw, 6.5rem) 5rem; color: white; background: radial-gradient(circle at 80% 10%, rgba(30, 119, 255, .35), transparent 25%), linear-gradient(135deg, #06101f, #0b1f42); }
.catalog-hero h1 { max-width: 850px; margin: 0; font-size: clamp(3.4rem, 7vw, 7rem); line-height: .9; letter-spacing: -.065em; }
.catalog-hero > div > p:last-child { max-width: 720px; margin: 1.7rem 0 0; color: #afbed2; line-height: 1.7; font-size: 1.05rem; }
.catalog-hero aside { padding: 1.4rem; border: 1px solid rgba(255,255,255,.16); border-radius: 18px; background: rgba(255,255,255,.055); }
.catalog-hero aside p { color: #aab9cc; line-height: 1.55; }
.catalog-hero aside a { font-weight: 760; }
.catalog-hero aside a span { color: #65afff; margin-left: .5rem; }
.catalog-controls { position: relative; z-index: 3; display: grid; grid-template-columns: minmax(250px, 1fr) auto auto; gap: 1.2rem; align-items: end; margin: -2rem clamp(1.25rem, 5.5vw, 6.5rem) 0; padding: 1.2rem; border: 1px solid rgba(8,20,43,.1); border-radius: 18px; background: white; box-shadow: 0 18px 55px rgba(8,20,43,.12); }
.catalog-controls label { display: grid; gap: .4rem; }
.catalog-controls label span { color: #617086; font-size: .68rem; font-weight: 750; text-transform: uppercase; letter-spacing: .13em; }
.catalog-controls input { min-height: 47px; width: 100%; padding: 0 .9rem; border: 1px solid #cdd6e2; border-radius: 10px; outline: 0; }
.catalog-controls input:focus { border-color: #287fee; box-shadow: 0 0 0 3px rgba(40,127,238,.13); }
.catalog-filters { display: flex; gap: .4rem; overflow-x: auto; }
.catalog-filters button { flex: 0 0 auto; min-height: 43px; padding: 0 .85rem; border: 1px solid #ccd5e1; border-radius: 999px; color: #536174; background: white; cursor: pointer; font-size: .78rem; font-weight: 700; }
.catalog-filters button.is-active { color: white; border-color: #1769da; background: #1769da; }
#catalog-count { margin: 0 0 .75rem; color: #687589; white-space: nowrap; font-size: .75rem; font-weight: 700; }
.catalog-layout { display: grid; grid-template-columns: 220px minmax(0,1fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; padding: 5rem clamp(1.25rem, 5.5vw, 6.5rem) 7rem; }
.catalog-index { position: sticky; top: 105px; display: grid; border-top: 1px solid rgba(8,20,43,.15); }
.catalog-index > p { color: #758195; font-size: .65rem; text-transform: uppercase; letter-spacing: .14em; font-weight: 800; }
.catalog-index > a { display: flex; justify-content: space-between; gap: .7rem; padding: .85rem 0; border-bottom: 1px solid rgba(8,20,43,.12); color: #3f4a5a; font-size: .82rem; font-weight: 700; }
.catalog-index > a span { color: #8a97a9; }
.catalog-index .index-quote { justify-content: center; margin-top: 1rem; padding: .85rem; color: white; border: 0; border-radius: 999px; background: #1268e8; }
.catalog-sections { min-width: 0; }
.catalog-group { scroll-margin-top: 100px; margin-bottom: 6rem; }
.catalog-group[hidden] { display: none; }
.catalog-group > header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, .55fr); gap: 2rem; align-items: end; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(8,20,43,.15); }
.catalog-group > header > div { display: flex; gap: 1.1rem; align-items: baseline; }
.catalog-group > header span { color: #2674dd; font-size: .7rem; font-weight: 850; }
.catalog-group h2 { margin: 0; font-size: clamp(2.2rem, 4vw, 4.5rem); letter-spacing: -.055em; }
.catalog-group > header p { margin: 0; color: #637082; line-height: 1.65; }
.vertical-products { display: grid; }
.vertical-product { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(330px, 1.2fr); min-height: 360px; padding: 1.3rem 0; border-bottom: 1px solid rgba(8,20,43,.14); }
.vertical-product[hidden], .personalized-catalog-grid article[hidden] { display: none; }
.vertical-product > img { align-self: center; width: 100%; height: auto; min-height: 0; max-height: none; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; }
.product-visual { width: 100%; height: 100%; min-height: 330px; max-height: 390px; border-radius: 16px; }
.vertical-product-copy { display: flex; flex-direction: column; padding: 1rem clamp(1rem, 4vw, 3.5rem); }
.product-kicker { color: #2673d8; text-transform: uppercase; letter-spacing: .14em; font-size: .62rem; font-weight: 850; }
.vertical-product h3 { margin: auto 0 .7rem; font-size: clamp(1.7rem, 3vw, 3rem); letter-spacing: -.045em; }
.vertical-product p { margin: 0 0 1rem; color: #5f6b7b; line-height: 1.65; }
.vertical-product ul { display: flex; flex-wrap: wrap; gap: .45rem; list-style: none; padding: 0; margin: 0 0 1.2rem; }
.vertical-product li { padding: .35rem .6rem; border-radius: 999px; color: #405066; background: #dce5f0; font-size: .68rem; font-weight: 700; }
.vertical-product a { width: fit-content; font-weight: 780; border-bottom: 1px solid #9baec4; padding-bottom: .25rem; }
.vertical-product a span { margin-left: .5rem; color: #176ee7; }
.product-visual { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem; color: white; background: #0b1f42; isolation: isolate; }
.product-visual::before, .product-visual::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; }
.product-visual::before { width: 290px; height: 290px; top: -95px; right: -65px; border: 35px solid rgba(64,150,255,.25); }
.product-visual::after { width: 170px; height: 170px; bottom: -65px; left: -40px; background: rgba(13,103,234,.5); filter: blur(30px); }
.product-visual span { color: #83bbff; text-transform: uppercase; letter-spacing: .18em; font-size: .7rem; font-weight: 850; }
.product-visual strong { font-size: clamp(2.5rem, 5vw, 5rem); line-height: .9; letter-spacing: -.06em; }
.type-flags { background: #152951; }
.type-events { background: #23184b; }
.type-mail { background: #19374a; }
.type-stationery { background: #303d50; }
.type-books { background: #122f3b; }
.type-decals { background: #183b4c; }
.type-window { background: #0d4266; }
.type-vehicle { background: #212c4b; }
.type-floor { background: #174339; }
.type-light { background: #32215d; }
.type-plaque { background: #314052; }
.type-sidewalk { background: #1f3a57; }
.type-stands { background: #283160; }
.type-specialty { background: #402451; }
.type-hardware { background: #2d3d49; }
.type-routing { background: #173c52; }
.type-finishing { background: #193b45; }
.type-promo { background: #44305b; }
.type-traffic { background: #3d3521; }
.type-premium { background: #3d2952; }
.type-reorder { background: #1e4052; }
.personalized-catalog-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1rem; padding-top: 1.3rem; }
.personalized-catalog-grid article { min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding: 0; color: white; border-radius: 18px; background: linear-gradient(145deg, #0c1e3d, #174a91); }
.personalized-catalog-grid article > img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.personalized-card-copy { min-height: 245px; display: flex; flex-direction: column; padding: 1.5rem; }
.personalized-card-copy > span { color: #75b8ff; font-size: .68rem; font-weight: 850; }
.personalized-catalog-grid h3 { margin: auto 0 .7rem; font-size: 1.55rem; letter-spacing: -.035em; }
.personalized-catalog-grid p { margin: 0 0 1.1rem; color: #b7c7dc; line-height: 1.6; }
.personalized-catalog-grid a { width: fit-content; padding-bottom: .25rem; border-bottom: 1px solid rgba(255,255,255,.4); font-weight: 750; font-size: .82rem; }
.catalog-disclaimer { padding: clamp(1.6rem, 4vw, 3rem); color: white; border-radius: 22px; background: #08172f; }
.catalog-disclaimer strong { font-size: clamp(1.5rem, 3vw, 2.7rem); letter-spacing: -.04em; }
.catalog-disclaimer p { max-width: 780px; color: #a9b9ce; line-height: 1.65; }

@media (max-width: 980px) {
  .catalog-hero { grid-template-columns: 1fr; gap: 2rem; }
  .catalog-hero aside { max-width: 600px; }
  .catalog-controls { grid-template-columns: 1fr; align-items: stretch; }
  #catalog-count { margin: 0; }
  .catalog-layout { grid-template-columns: 1fr; }
  .catalog-index { position: static; grid-template-columns: repeat(3, 1fr); gap: .6rem; border: 0; }
  .catalog-index > p, .catalog-index .index-quote { grid-column: 1/-1; }
  .catalog-index > a:not(.index-quote) { padding: .8rem; border: 1px solid rgba(8,20,43,.13); border-radius: 10px; }
}

@media (max-width: 720px) {
  .catalog-hero { min-height: 510px; padding-top: 8.5rem; }
  .catalog-hero h1 { font-size: clamp(3rem, 15vw, 5rem); }
  .catalog-controls { margin-top: -1rem; }
  .catalog-group > header { grid-template-columns: 1fr; gap: .8rem; }
  .vertical-product { grid-template-columns: 1fr; }
  .vertical-product > img { min-height: 0; height: auto; aspect-ratio: 16 / 9; }
  .product-visual { min-height: 230px; height: auto; aspect-ratio: 16 / 10; }
  .vertical-product-copy { min-height: 360px; padding: 1.2rem .2rem 1.6rem; }
  .personalized-catalog-grid { grid-template-columns: 1fr; }
  .catalog-index { grid-template-columns: 1fr; }
  .catalog-index .index-quote { grid-column: auto; }
}