/* Desktop composition; mobile v31 remains the baseline. */
.header-caption{display:none}
#app:focus{outline:none}
@media(min-width:900px){
  :root{--desktop-width:1280px}
  .shell,.catalog-search,.hero{width:min(var(--desktop-width),calc(100% - 80px))}
  .site-header{height:76px;padding-inline:max(40px,calc((100% - var(--desktop-width))/2));justify-content:space-between}
  .brand-word{font-size:1.75rem}
  .header-caption{display:flex;align-items:center;gap:16px;color:#b7b1a5;font-size:.875rem}
  .header-caption span{color:#705c35}
  .catalog-search{margin-top:24px;height:54px;border-radius:14px}
  .catalog-search input{font-size:1rem}
  .hero{margin-top:18px;height:340px!important;aspect-ratio:auto;border-radius:20px}
  .hero-reference{object-position:61% 44%}
  .hero-content{width:52%;padding:36px 44px}
  .hero-kicker{font-size:.75rem;margin-bottom:12px}
  .hero-content h1{font-size:3.5rem;line-height:.96;letter-spacing:-.045em}
  .hero-description{max-width:340px;font-size:1rem;line-height:1.45;margin-top:16px}
  .hero-brands{margin-top:20px;gap:9px}
  .hero-brands span{width:34px;height:34px}
  .hero-brands img{width:20px;height:20px}
  .catalog{padding-top:30px;padding-bottom:56px}
  .section-heading{margin-bottom:20px}
  .section-heading h2{font-size:2rem}
  .catalog-all{font-size:.875rem}
  .catalog-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
  .catalog-card{min-height:174px;padding:24px 14px 19px;gap:16px;border-radius:18px;background-color:#131310}
  .catalog-icon{width:72px;height:72px;border-radius:19px;transition:transform .2s ease}
  .catalog-icon img{width:42px;height:42px}
  .catalog-name{min-height:26px;font-size:1rem;line-height:1.3}
  .catalog-card:nth-child(9),.catalog-card:nth-child(10){grid-column:auto}
  .catalog-search:focus-within{border-color:var(--tl-gold);box-shadow:0 0 0 3px rgba(232,184,79,.1)}
}
@media(min-width:900px) and (max-width:1099px){
  .catalog-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .catalog-card:nth-child(9){grid-column:2}.catalog-card:nth-child(10){grid-column:3}
  .hero-content{padding:30px}.hero-content h1{font-size:3rem}
}
@media(min-width:1600px){
  :root{--desktop-width:1440px}
  .hero{height:360px!important}
  .hero-content{padding-left:52px}
  .hero-content h1{font-size:3.85rem}
  .catalog-card{min-height:190px;padding-top:28px}
  .catalog-icon{width:80px;height:80px;border-radius:21px}
  .catalog-icon img{width:46px;height:46px}
}
@media(min-width:900px) and (hover:hover){
  .catalog-card:hover{transform:translateY(-4px);border-color:rgba(232,184,79,.55);box-shadow:0 12px 26px rgba(0,0,0,.3)}
  .catalog-card:hover .catalog-icon{transform:translateY(-2px) scale(1.04)}
  .catalog-card:hover .card-preview{opacity:.5}
}