/* Visual polish for the approved home page. Kept separate from the initial layout. */
.brand { gap: 0; }
.brand-logo { display: block; width: 216px; height: auto; }
.header-main { height: 76px; gap: 30px; }
.site-search { height: 44px; background: #f5f5f6; border: 1px solid #e4e5e7; transition: border-color .18s ease; }
.site-search:focus-within { border-color: var(--red); }
.site-search input { padding-inline: 18px; }
.site-search input::placeholder { color: #74777b; }
.site-search button { width: 108px; }
.header-actions { gap: 10px; }
.text-action { min-height: 44px; gap: 8px; padding: 8px 6px; transition: color .18s ease; }
.text-action:hover { color: var(--red); }
.action-icon, .action-icon-wrap { width: 21px; height: 21px; flex: none; }
.action-icon { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.action-icon-wrap { position: relative; display: inline-flex; }
.header-actions .count { position: absolute; top: -7px; right: -9px; min-width: 17px; height: 17px; padding: 0 2px; border: 2px solid #fff; box-sizing: border-box; font-size: 10px; }
.nav-inner { height: 58px; gap: 20px; }
.catalog-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 164px; padding: 10px 16px; }
.catalog-icon { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.catalog-toggle[aria-expanded="true"] { background: #b81118; }
.nav-links { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: center; gap: 8px; flex: 1; width: auto; overflow: visible; }
.nav-links a { position: relative; display: grid; place-items: center; min-height: 42px; padding: 4px; text-align: center; }
.nav-links a:after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 2px; height: 2px; background: var(--red); transform: scaleX(0); transition: transform .18s ease; }
.nav-links a:hover:after, .nav-links a:focus-visible:after { transform: scaleX(1); }
.hero { height: clamp(444px, 29vw, 570px); background-image: url('assets/hero-v10.webp'); background-size: cover; background-position: center center; }
.hero:before { background: linear-gradient(112deg, #000000b8 0%, #000000a1 22%, #00000070 40%, #0000001a 68%, transparent 86%); }
.hero h1, .hero p { text-shadow: 0 2px 12px #0009; }
.hero-content { padding-top: 76px; }
@media (min-width: 561px) and (max-width: 1150px) {
  .hero { background-position: right center; }
  .hero p { max-width: 295px; }
  .hero .desktop-break { display: none; }
}
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 18px 24px; }
.atlas-photo { background-image: url('assets/products.webp'); }
.category-grid { gap: 10px; }
.category-card { height: 186px; border: 1px solid #ececec; background: #fff; }
.category-card:before { background: linear-gradient(180deg, #fff 0%, #fffe 22%, #ffffff12 55%, transparent 78%); }
.category-card strong { top: 12px; left: 11px; font-size: 17px; line-height: 1.05; text-shadow: 0 1px 0 #fff9; }
.category-card .category-arrow { top: 61px; left: 11px; line-height: 1; }
.product-card { border-color: #e2e2e2; }
.section-link { white-space: nowrap; }
.product-body { padding: 12px; }
.product-meta { display: block; min-height: 14px; margin: 0 0 6px; color: #9a2025; font-size: 10px; font-weight: 800; letter-spacing: normal; text-transform: uppercase; }
.product-body h3 { min-height: 0; font-size: 15px; line-height: 1.24; }
.product-desc { color: #61656a; min-height: 35px; margin: 7px 0 12px; }
.product-actions { margin-top: auto; }
.promo-wholesale { background-image: url('assets/wholesale.webp'); }
.promo-marketplace { background-image: url('assets/marketplace.webp'); }
.promo-marketplace:before { background: linear-gradient(90deg, #fffffff5 0%, #ffffffdb 40%, #ffffff18 82%); }
.bottom-banner { background-image: url('assets/banner.webp'); }
.site-footer { background: #fafafa; border-top: 0; }
.footer-grid { display: grid; grid-template-columns: 1.45fr 1fr 1fr 1fr; gap: 30px; padding-block: 46px 38px; }
.footer-brand { transform: none; }
.footer-brand .brand-logo { width: 198px; }
.footer-brand-block p { max-width: 270px; margin: 16px 0 0; color: #62666a; font-size: 14px; line-height: 1.5; }
.site-footer .footer-column { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; font-size: 14px; font-weight: 400; }
.footer-column h2 { margin: 0 0 6px; font-size: 16px; line-height: 1.2; }
.footer-column a { color: #4e5155; }
.footer-column a:hover, .footer-bottom a:hover { color: var(--red); }
.footer-column p { max-width: 240px; margin: 0; color: #74777b; line-height: 1.45; }
.footer-column .footer-phone { color: #161616; font-size: 18px; font-weight: 750; white-space: nowrap; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding-block: 18px 26px; border-top: 1px solid #dedfe0; color: #74777b; font-size: 12px; }
@media (max-width: 1250px) {
  .category-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .category-card { height: 195px; }
  .nav-links { display: none; }
}
@media (max-width: 1000px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .header-main { height: auto; flex-wrap: wrap; gap: 10px 18px; padding-block: 10px; }
  .brand { order: 0; }
  .header-actions { order: 1; }
  .site-search { order: 2; flex-basis: 100%; max-width: none; }
}
@media (max-width: 800px) {
  .brand-logo { width: 203px; }
  .nav-links { display: none; }
  .catalog-toggle { min-width: 0; }
  .hero-content { padding-top: 72px; }
  .promo-marketplace:before { background: linear-gradient(90deg, #fffffff9 0%, #fffffff0 44%, #ffffff22 90%); }
}
@media (max-width: 560px) {
  .header-main { column-gap: 8px; }
  .brand-logo { width: 172px; }
  .header-actions { gap: 8px; }
  .text-action { min-width: 28px; justify-content: center; padding: 4px 0; }
  .action-icon { width: 20px; height: 20px; }
  .site-search { height: 42px; }
  .site-search input { padding-inline: 13px; font-size: 14px; }
  .site-search button { width: 82px; }
  .nav-inner { gap: 8px; }
  .catalog-toggle { padding-inline: 12px; font-size: 13px; }
  .hero { height: 445px; background-image: url('assets/hero-v10-mobile.webp'); background-size: cover; background-position: center 48%; }
  .hero:before { background: linear-gradient(112deg, #000000ad 0%, #00000082 47%, #00000026 82%, #0000000d 100%); }
  .hero-content { padding-top: 66px; }
  .hero h1 { font-size: clamp(44px, 13vw, 51px); }
  .hero p:not(.eyebrow) { margin: 20px 0 24px; font-size: 15px; }
  .hero-actions { align-items: flex-start; flex-direction: column; gap: 17px; }
  .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .category-card { height: 170px; }
  .category-card strong { font-size: 15px; }
  .category-card:last-child { grid-column: 1 / -1; height: 144px; }
  .category-card:last-child .atlas-photo { inset: 0 0 0 auto; width: 53%; }
  .category-card:last-child:before { background: linear-gradient(90deg, #fff 0%, #fffffff0 37%, #ffffff00 78%); }
  .category-card:last-child .category-arrow { top: 70px; }
  .product-image { height: 155px; }
  .product-body { padding: 9px; }
  .product-meta { font-size: 9px; }
  .product-body h3 { font-size: 13px; }
  .product-desc { min-height: 44px; font-size: 11px; }
  .promo { background-size: cover; }
  .promo-wholesale { background-image: url('assets/wholesale-mobile.webp'); }
  .promo-marketplace { background-image: url('assets/marketplace-mobile.webp'); }
  .promo-marketplace strong { font-size: 28px; line-height: 1; max-width: 300px; }
  .promo-marketplace .promo-content { padding: 19px; }
  .bottom-banner { background-image: url('assets/banner-mobile.webp'); }
  .footer-grid { gap: 30px 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); padding-block: 34px 30px; }
  .footer-brand-block { grid-column: 1 / -1; }
  .footer-brand .brand-logo { width: 183px; }
  .footer-brand-block p { margin-top: 10px; }
  .site-footer .footer-column { gap: 10px; font-size: 12px; }
  .footer-column h2 { font-size: 14px; }
  .footer-column:last-child { grid-column: 1 / -1; }
  .footer-column .footer-phone { font-size: 18px; }
}