* {
  box-sizing: border-box; 
}

/* Базовые стили для контейнера */
.container {
  padding: 0 10px; 
}

/* Стили для кнопок */
.button {
  width: calc(100% - 20px); 
  padding: 10px; 
  margin: 10px 0; 
  display: flex;
  justify-content: flex-start;
  align-items: center;
}


.button img {
  margin-right: 10px; 
  width: 30px; 
  height: 30px; 
}


@media only screen and (max-width: 768px) {
  .button {
    font-size: 16px; 
  }
}

/* Footer stacking on small screens */
@media only screen and (max-width: 900px) {
  .footer-contacts {
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
  }
  .footer-contacts .phones {
    justify-content: center;
    gap: 16px;
  }
}

/* Hide the site link if there's not enough space */
@media only screen and (max-width: 420px) {
  .site-link { display: none; }
}

@media only screen and (max-width: 900px) {
  footer .footer-line {
    gap: 20px;
  }
}



/* Preorder note text adjustments for mobile */
@media only screen and (max-width: 768px) {
  .preorder-note {
    font-size: 14px;
    line-height: 1.4;
    padding: 0 16px 16px;
    text-align: center;
  }
  .social-media {
    gap: 24px;
    margin: 20px 0 14px;
  }
  .social-media a img {
    width: 24px;
    height: 24px;
  }
  footer .footer-line {
    flex-direction: column;
    gap: 14px;
    padding: 12px;
  }
  footer .footer-item {
    align-items: center;
    text-align: center;
  }
  footer .phone-number { font-size: 15px; }
  footer .phone-desc { font-size: 12px; }
}

/* Hide site link if very narrow */


/* ===== Mobile social page tweaks ===== */

/* Larger readable note text on mobile */
@media only screen and (max-width: 768px) {
  .preorder-note {
    font-size: 18px;
    line-height: 1.55;
    padding: 0 24px 8px;
    margin: 8px auto 0;
    text-align: left;
  }
  .social-media {
    margin: 22px 0 6px;
    gap: 18px;
  }
  .social-media a img { width: 22px; height: 22px; }
}

/* Footer layout: three centered items with phone icons */
@media only screen and (max-width: 768px) {
  footer .footer-line {
    max-width: 100%;
    padding: 14px 18px 0;
    gap: 28px;
  }
  footer .footer-item {
    min-width: 140px;
  }
  footer .phone-number { font-size: 17px; }
  footer .phone-desc { font-size: 12px; }
  footer .footer-item.phone::before {
    content: "";
    display: block;
    width: 20px; height: 20px;
    margin-bottom: 6px;
    background-repeat: no-repeat;
    background-size: contain;
  }
  /* simple phone glyph using SVG data URI */
  footer .footer-item.phone::before {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.62 10.79a15.053 15.053 0 006.59 6.59l2.2-2.2a1 1 0 011.01-.24c1.12.37 2.33.57 3.58.57a1 1 0 011 1V20a1 1 0 01-1 1C10.85 21 3 13.15 3 3a1 1 0 011-1h3.5a1 1 0 011 1c0 1.25.2 2.46.57 3.58a1 1 0 01-.24 1.01l-2.21 2.2z' stroke='%23ffffff' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  }
}

/* Three-in-a-row on typical phones; stack if very narrow */
@media only screen and (max-width: 768px) {
  footer .footer-line { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
  footer .footer-item, footer .site-link { justify-self: center; }
}
@media only screen and (max-width: 430px) {
  footer .footer-line { grid-template-columns: 1fr; gap: 12px; }
  footer .site-link { } /* hide link if не помещается */
}

/* Two phone blocks in one row on mobile; site link below */
@media only screen and (max-width: 768px) {
  footer .footer-line {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    align-items: start;
    justify-items: center;
    gap: 16px 24px;
    padding: 12px 16px 0;
  }
  footer .footer-item { align-items: center; text-align: center; }
  footer .footer-item.phone { padding-left: 0; position: relative; }
  footer .footer-item.phone::before { position: static; margin-bottom: 4px; }
  footer .site-link { grid-column: 1 / -1; justify-self: center; }
}

@media only screen and (max-width: 768px) {
  .preorder-note { max-width: 400px; font-size: 16px; line-height: 1.5; padding: 0 10px 10px; margin-top: 8px; }
}