/* HEBERGRAPHICS · includes/styles.css · v2026.06.17-logo-size-v4 */
:root{
  --hg-black:#000000;
  --hg-red:#ff0000;
  --hg-white:#ffffff;
  --hg-gray:#9b9b9b;
  --hg-line:rgba(255,255,255,.14);
  --hg-red-line:rgba(255,0,0,.72);
  --hg-ease:cubic-bezier(.16,.84,.34,1);
}

.hg-header,.hg-header *,
.hg-footer,.hg-footer *{box-sizing:border-box}
.hg-header a,.hg-footer a{text-decoration:none;color:inherit}
.hg-header img,.hg-footer img{display:block;max-width:100%;height:auto}

.hg-header{
  position:relative;
  z-index:50;
  width:100%;
  background:#000;
  color:#fff;
  border-bottom:2px solid #f00;
  font-family:"Saira","Segoe UI",system-ui,sans-serif;
}

.hg-header__bar{
  min-height:78px;
  display:grid;
  grid-template-columns:minmax(150px,1fr) auto minmax(150px,1fr);
  align-items:center;
  gap:18px;
  padding:12px clamp(16px,4vw,46px);
}

.hg-brand{
  justify-self:center;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  transition:opacity .14s linear,transform .14s var(--hg-ease);
}
.hg-brand:hover{opacity:.92}
.hg-brand:active{transform:scale(.985)}
.hg-brand__logo,
.hg-brand_logo{
  display:block;
  width:min(340px,52vw) !important;
  max-width:340px !important;
  height:auto !important;
  max-height:50px !important;
  object-fit:contain !important;
}

.hg-header__social{
  justify-self:start;
  display:inline-flex;
  align-items:center;
  gap:9px;
  width:max-content;
  max-width:100%;
  color:#fff;
  font-size:13px;
  font-weight:800;
  letter-spacing:.025em;
  text-transform:uppercase;
  opacity:.88;
  transition:color .14s linear,opacity .14s linear;
}
.hg-header__social:hover{color:#f00;opacity:1}
.hg-header__social-mark{
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid #f00;
  color:#f00;
  font-size:16px;
  line-height:1;
}
.hg-header__social-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.hg-header__actions{
  justify-self:end;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}

.hg-catalog-btn,
.hg-wa-btn{
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:2px solid #f00;
  background:#000;
  color:#fff;
  cursor:pointer;
  user-select:none;
  transition:transform .12s var(--hg-ease),background-color .12s linear,color .12s linear,border-color .12s linear;
}
.hg-catalog-btn:active,.hg-wa-btn:active{transform:translateY(1px) scale(.985)}

.hg-catalog-btn{
  gap:10px;
  padding:0 20px 0 16px;
  font-family:"Saira Condensed",Impact,sans-serif;
  font-size:16px;
  font-weight:900;
  font-style:italic;
  letter-spacing:.055em;
  line-height:1;
  text-transform:uppercase;
  white-space:nowrap;
  clip-path:polygon(0 0,calc(100% - 13px) 0,100% 50%,calc(100% - 13px) 100%,0 100%,9px 50%);
}
.hg-catalog-btn__icon{
  width:0;
  height:0;
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
  border-left:10px solid currentColor;
}
.hg-catalog-btn:hover{
  background:#f00;
  color:#000;
  border-color:#f00;
}

.hg-wa-btn{
  width:44px;
  border-radius:14px;
}
.hg-wa-btn:hover{
  background:#f00;
  color:#000;
  border-color:#f00;
}
.hg-wa-btn__icon{width:20px;height:20px;display:block}

.page{flex:1 0 auto;width:100%}

.hg-footer{
  width:100%;
  background:#000;
  color:#fff;
  border-top:2px solid #f00;
  font-family:"Saira","Segoe UI",system-ui,sans-serif;
}
.hg-footer__inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:14px;
  padding:30px clamp(16px,4vw,46px) 24px;
}
.hg-footer__logo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:opacity .14s linear,transform .14s var(--hg-ease);
}
.hg-footer__logo:hover{opacity:.9}
.hg-footer__logo:active{transform:scale(.985)}
.hg-footer__img,
.hg-footer_img{
  display:block;
  width:min(190px,46vw) !important;
  max-width:190px !important;
  height:auto !important;
  max-height:76px !important;
  object-fit:contain !important;
}
.hg-footer__links{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:9px;
}
.hg-footer__links a{
  min-height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 13px;
  border:1px solid rgba(255,0,0,.65);
  color:#fff;
  font-size:13px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.hg-footer__links a:hover{background:#f00;color:#000;border-color:#f00}
.hg-footer__info{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:center;
  gap:8px 12px;
  color:#bcbcbc;
  font-size:14px;
  line-height:1.2;
}
.hg-footer__info a{color:#fff;font-weight:800}
.hg-footer__info a:hover{color:#f00}
.hg-footer__dot{width:4px;height:4px;border-radius:999px;background:#f00}
.hg-footer__copy{font-size:12px;color:#777;letter-spacing:.04em;text-transform:uppercase}

.hg-catalog-btn:focus-visible,
.hg-wa-btn:focus-visible,
.hg-brand:focus-visible,
.hg-header__social:focus-visible,
.hg-footer a:focus-visible{
  outline:3px solid #f00;
  outline-offset:4px;
}

@media (max-width:760px){
  .hg-header__bar{
    min-height:auto;
    grid-template-columns:1fr;
    gap:10px;
    padding:14px 12px 12px;
  }
  .hg-brand{order:1;width:100%}
  .hg-brand__logo,.hg-brand_logo{width:min(260px,78vw) !important;max-width:260px !important;max-height:40px !important;margin:0 auto}
  .hg-header__social{order:2;justify-self:center;max-width:100%;font-size:12px}
  .hg-header__actions{order:3;justify-self:stretch;width:100%;display:grid;grid-template-columns:1fr 44px;gap:8px}
  .hg-catalog-btn{width:100%;height:42px;font-size:14px;padding:0 15px}
  .hg-wa-btn{width:44px;height:42px;border-radius:12px}
}

@media (max-width:420px){
  .hg-brand__logo,.hg-brand_logo{width:min(220px,78vw) !important;max-width:220px !important;max-height:34px !important}
  .hg-header__social-mark{width:26px;height:26px}
  .hg-catalog-btn{font-size:13px;letter-spacing:.035em}
  .hg-footer__img,.hg-footer_img{width:min(160px,62vw) !important;max-width:160px !important;max-height:64px !important}
  .hg-footer__links{width:100%;display:grid;grid-template-columns:1fr;gap:8px}
  .hg-footer__links a{width:100%}
  .hg-footer__dot{display:none}
}