/* MAK Store v3.5 incremental styles.
   This file is intentionally loaded before custom.css, so merchant overrides remain untouched. */

:root{
  --mak-black:#12152E;
  --mak-secondary:#30386F;
  --mak-primary:#A1DAF7;
  --mak-primary-400:#D7F0FF;
  --mak-grey-dark:#4F4F4F;
  --mak-grey-light:#E3E3E3;
  --mak-error:#B7181E;
  --mak-green:#065F46;
}

/* Dynamic header/footer contacts */
.topbar__inner{
  gap:52px;
}
.topbar__link{
  min-width:0;
}
.topbar__link span{
  white-space:nowrap;
}
.mak-topbar-icon{
  width:17px;
  height:17px;
  flex:0 0 17px;
}
.desktop-nav{
  gap:36px;
}

.mobile-menu__contacts{
  padding-top:22px;
  flex-direction:row;
  align-items:center;
  gap:12px;
}
.mobile-menu__contacts a{
  width:40px;
  height:40px;
  display:grid;
  place-items:center;
  border-radius:10px;
  background:var(--mak-black);
  transition:background-color .2s ease,transform .2s ease;
}
.mobile-menu__contacts a:hover,
.mobile-menu__contacts a:focus{
  background:var(--mak-secondary);
  transform:translateY(-1px);
}
.mobile-menu__contacts img{
  width:19px;
  height:19px;
  object-fit:contain;
}

.footer-socials{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
}
.footer-socials a{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:8px;
  background:rgba(255,255,255,.08);
  transition:background-color .2s ease,transform .2s ease;
}
.footer-socials a:hover,
.footer-socials a:focus{
  background:var(--mak-secondary);
  transform:translateY(-1px);
}
.footer-socials a img{
  width:18px;
  height:18px;
}
.footer-contacts a{
  display:flex;
  align-items:center;
  gap:10px;
}
.footer-contacts .mak-footer-contact-text{
  display:inline !important;
  width:auto;
  height:auto;
  border:0;
  border-radius:0;
  font-size:13px;
}
.mak-footer-contact-icon{
  width:18px;
  height:18px;
  flex:0 0 18px;
}

/* Contact page */
.mak-contact-page{
  min-height:680px;
  padding:28px 0 70px;
  background:#EFFAFF;
}
.mak-breadcrumbs{
  display:flex;
  align-items:center;
  gap:9px;
  margin-bottom:34px;
  color:#656B78;
  font-size:14px;
}
.mak-breadcrumbs a{
  color:inherit;
  transition:color .2s ease;
}
.mak-breadcrumbs a:last-child,
.mak-breadcrumbs a:hover{
  color:var(--mak-black);
}
.mak-contact-layout{
  display:flex;
  align-items:flex-start;
  gap:28px;
}
.mak-contact-main{
  flex:1 1 auto;
  min-width:0;
}
.mak-contact-heading{
  max-width:720px;
  margin-bottom:28px;
}
.mak-contact-kicker{
  display:inline-flex;
  margin-bottom:8px;
  color:var(--mak-secondary);
  font-size:14px;
  font-weight:500;
}
.mak-contact-heading h1{
  margin:0 0 12px;
  color:var(--mak-black);
  font-size:40px;
  line-height:1.08;
  font-weight:500;
}
.mak-contact-heading p{
  margin:0;
  color:var(--mak-grey-dark);
  font-size:16px;
  line-height:1.55;
}
.mak-contact-info{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-bottom:22px;
}
.mak-contact-info__card{
  flex:1 1 210px;
  min-height:86px;
  padding:16px 18px;
  display:flex;
  align-items:center;
  gap:13px;
  border:1px solid rgba(18,21,46,.08);
  border-radius:14px;
  background:#fff;
  color:var(--mak-black);
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
a.mak-contact-info__card:hover{
  border-color:var(--mak-primary);
  box-shadow:0 10px 28px rgba(18,21,46,.08);
  transform:translateY(-2px);
  color:var(--mak-black);
}
.mak-contact-info__card--address{
  flex-basis:100%;
}
.mak-contact-info__icon{
  width:42px;
  height:42px;
  flex:0 0 42px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--mak-primary-400);
  color:var(--mak-secondary);
  font-size:18px;
}
.mak-contact-info__card>span:last-child{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:3px;
}
.mak-contact-info__card small{
  color:#7A7F89;
  font-size:11px;
}
.mak-contact-info__card strong{
  overflow-wrap:anywhere;
  font-size:14px;
  font-weight:500;
}
.mak-contact-form-card{
  padding:28px;
  border-radius:16px;
  background:#fff;
}
.mak-contact-form-card__head{
  margin-bottom:22px;
}
.mak-contact-form-card__head h2{
  margin:0 0 6px;
  font-size:28px;
  line-height:1.15;
  font-weight:500;
}
.mak-contact-form-card__head p{
  margin:0;
  color:var(--mak-grey-dark);
  font-size:14px;
}
.mak-contact-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
}
.mak-contact-form-grid label{
  display:flex;
  flex-direction:column;
  gap:7px;
  margin:0;
  color:var(--mak-black);
  font-size:14px;
  font-weight:400;
}
.mak-contact-form-grid label>span{
  display:inline-flex;
  align-items:center;
  gap:4px;
}
.mak-contact-form-grid em{
  color:var(--mak-error);
  font-style:normal;
}
.mak-contact-form-grid input,
.mak-contact-form-grid textarea{
  width:100%;
  min-height:52px;
  padding:13px 16px;
  border:1px solid #D4D8DD;
  border-radius:12px;
  outline:0;
  background:#fff;
  color:var(--mak-black);
  font-size:16px;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.mak-contact-form-grid textarea{
  min-height:150px;
  resize:vertical;
}
.mak-contact-form-grid input:focus,
.mak-contact-form-grid textarea:focus{
  border-color:var(--mak-secondary);
  box-shadow:0 0 0 3px rgba(48,56,111,.09);
}
.mak-contact-message{
  grid-column:1/-1;
}
.mak-contact-field--error input,
.mak-contact-field--error textarea{
  border-color:var(--mak-error);
  box-shadow:0 0 0 3px rgba(183,24,30,.07);
}
.mak-contact-error{
  color:var(--mak-error);
  font-size:12px;
  line-height:1.35;
}
.mak-contact-error--general{
  margin-bottom:16px;
  padding:12px 14px;
  border-radius:10px;
  background:rgba(183,24,30,.07);
}
.mak-contact-success{
  margin-bottom:16px;
  padding:12px 14px;
  border-radius:10px;
  background:rgba(6,95,70,.08);
  color:var(--mak-green);
  font-size:14px;
}
.mak-contact-submit{
  min-width:210px;
  margin-top:20px;
}
.mak-contact-map-card{
  flex:0 0 390px;
  overflow:hidden;
  border-radius:16px;
  background:#fff;
}
.mak-contact-map{
  position:relative;
  height:420px;
  overflow:hidden;
  background:var(--mak-grey-light);
}
.mak-contact-map iframe{
  width:100%;
  height:100%;
  border:0;
}
.mak-contact-map__logo{
  position:absolute;
  left:18px;
  bottom:18px;
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  border:4px solid #fff;
  border-radius:50%;
  background:#fff;
  box-shadow:0 7px 24px rgba(18,21,46,.18);
  pointer-events:none;
}
.mak-contact-map__logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:50%;
}
.mak-contact-map-card__body{
  padding:18px 20px 22px;
  display:flex;
  flex-direction:column;
  gap:4px;
}
.mak-contact-map-card__body span{
  color:#727783;
  font-size:11px;
}
.mak-contact-map-card__body strong{
  font-size:16px;
  font-weight:500;
}
.mak-contact-map-card__body p{
  margin:0;
  color:var(--mak-grey-dark);
  font-size:14px;
}

@media (max-width:1000px){
  .desktop-nav{gap:24px}
  .mak-contact-layout{flex-direction:column}
  .mak-contact-map-card{width:100%;flex-basis:auto}
  .mak-contact-map{height:350px}
}
@media (max-width:820px){
  .mak-contact-page{padding-top:20px}
  .mak-breadcrumbs{margin-bottom:24px}
  .mak-contact-heading h1{font-size:34px}
}
@media (max-width:600px){
  .mak-contact-page{padding:18px 0 46px}
  .mak-contact-heading h1{font-size:30px}
  .mak-contact-heading p{font-size:14px}
  .mak-contact-info{gap:10px}
  .mak-contact-info__card{flex-basis:100%;min-height:76px;padding:13px 14px}
  .mak-contact-form-card{padding:20px 16px}
  .mak-contact-form-card__head h2{font-size:24px}
  .mak-contact-form-grid{grid-template-columns:1fr;gap:14px}
  .mak-contact-message{grid-column:auto}
  .mak-contact-submit{width:100%}
  .mak-contact-map{height:300px}
  .mak-contact-map-card__body{padding:16px}
}