.site-header { color: #fff; background: transparent; }
.brand-bar { display: grid; place-items: center start; min-height: 185px; padding: 10px 20px; background: rgba(0, 0, 0, 0.7); }
.site-logo, .custom-logo-link { display: block; width: 310px; justify-self: start; }
.site-logo img, .custom-logo { width: 100%; max-height: 165px; object-fit: contain; }
.nav-bar { position: relative; z-index: 10; min-height: 40px; border-top: 3px solid #333; border-radius: 0 0 5px 5px; background: var(--nav); }
.site-nav { width: 100%; }
.menu, .sub-menu { list-style: none; margin: 0; padding: 0; }
.menu { display: flex; justify-content: center; flex-wrap: wrap; }
.menu li { position: relative; }
.menu a { display: flex; align-items: center; min-height: 40px; padding: 0 14px; color: #fff; text-decoration: none; text-transform: uppercase; font: 700 16px/1.2 var(--font-brand); }
.menu a:hover, .menu a:focus-visible, .current-menu-item > a, .current-menu-ancestor > a { color: #3598f6; }
.sub-menu { display: none; position: absolute; top: 100%; left: 0; z-index: 10; width: 190px; padding: 4px 0; border: 1px solid #1c1e21; background: var(--charcoal); box-shadow: 3px 3px 6px #0009; }
.menu li:hover > .sub-menu, .menu li:focus-within > .sub-menu { display: block; }
.sub-menu li { border-bottom: 1px dotted #565d66; }
.sub-menu li:last-child { border-bottom: 0; }
.sub-menu a { min-height: 36px; padding: 7px 10px; font-size: 13px; text-transform: none; }
.menu-toggle { display: none; min-height: 44px; padding: 8px 14px; border: 0; color: #fff; background: transparent; font: 700 15px var(--font-brand); text-transform: uppercase; }
.menu-toggle::before { content: ''; width: 18px; height: 12px; margin-right: 9px; border-block: 2px solid currentColor; background: linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat; }
.contact-strip { display: flex; justify-content: space-around; gap: 16px; padding: 10px 18px; background: transparent; font: 700 20px/1.35 var(--font-brand); text-transform: uppercase; }
.contact-strip a { color: #000; text-decoration: none; }
.marketing-banners { padding: 0 0 4px; background: transparent; text-align: center; }
.marketing-banners a { display: block; margin-bottom: 20px; }
.marketing-banners img { width: 100%; max-width: 960px; margin: auto; }
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0.7rem 1.1rem; border: 2px solid transparent; border-radius: 3px; background: var(--red); color: #fff; font-weight: 700; text-align: center; text-decoration: none; }
.button:hover { background: #96191d; color: #fff; }
.button-outline { color: var(--blue); border-color: currentColor; background: transparent; }
.button-outline:hover { color: var(--blue); background: var(--surface); }
.breadcrumbs { margin-bottom: 1rem; padding-block: 4px; border-block: 1px dotted var(--line); color: var(--muted); font-size: 14px; }
.unit-price { color: var(--red); font-weight: 700; }
.photo-empty, .empty-state { padding: 1rem; background: var(--surface); color: var(--muted); text-align: center; }
.category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.category-tile { display: flex; min-height: 120px; flex-direction: column; justify-content: space-between; padding: 20px; border-top: 4px solid var(--red); background: var(--surface); text-decoration: none; }
.category-tile h2 { margin-bottom: 12px; font: 400 23px/1.2 'BarberChop', var(--font-body); }
.social-links { display: flex; justify-content: center; gap: 60px; padding: 20px; background: #fff; }
.social-links img { width: 70px; height: 70px; object-fit: cover; }
.site-footer { padding: 24px 20px; background: var(--blue); color: #fff; font-size: 13px; }
.site-footer h2 { margin-bottom: 14px; color: #fff; font-size: 19px; }
.site-footer h3 { margin-bottom: 4px; color: #fff; font-size: 14px; }
.site-footer a { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 1.25fr 1fr 0.75fr; gap: 34px; }
.business-hours p { margin-bottom: 5px; }
.footer-logos { display: flex; align-items: center; gap: 24px; margin-top: 18px; }
.footer-links { list-style: none; margin: 0; padding: 0; }
.footer-links li { margin-bottom: 3px; }
@media (max-width: 800px) {
  .brand-bar { min-height: auto; padding: 16px; }
  .site-logo, .custom-logo-link { width: min(76vw, 310px); }
  .menu-toggle { display: inline-flex; align-items: center; }
  .site-nav { display: none; }
  .site-nav.is-open { display: block; }
  .menu { display: block; }
  .menu a { min-height: 44px; }
  .sub-menu { display: block; position: static; width: auto; margin-left: 16px; border: 0; box-shadow: none; }
  .contact-strip { flex-direction: column; align-items: center; gap: 4px; font-size: 15px; text-align: center; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
  .marketing-banners a { margin-bottom: 10px; }
  .social-links { gap: 24px; }
  .social-links img { width: 56px; height: 56px; }
  .footer-grid { grid-template-columns: 1fr; }
  .category-grid { grid-template-columns: 1fr; }
}
.menu-toggle[hidden] { display: none; }