@charset "UTF-8";
/* Подарочные сертификаты: тёмная секция, отступы 160 / 240 / 200 (сверху на неё наезжает панель прайса).
   Одна сетка на все брейкпоинты:
   — телефон: вступление, под ним плашка (выбор суммы в ряд, карта, примечание); кнопка — в той же ячейке,
     что и плашка, прижата к её низу (у плашки снизу запас под кнопку), поля кнопки 18;
   — md: две колонки — слева вступление сверху и кнопка снизу, справа плашка;
   — xl: слева вступление (456) и кнопка группой по центру колонки (между ними 48), в плашке выбор суммы
     столбиком слева, карта справа (до 480: на 1280 плашка уже макета — карта сжимается), примечание снизу.
   Кнопка — прямоугольник r 8 (56 / 56 / 64), hover — белая, как у клубной карты.
   Сумма: 4% → выбрана 8% + рамка 8%, текст зелёный; hover — 8%. */
.gift-certificates {
  display: grid;
  grid-template-areas: "intro" "panel";
  row-gap: 2.5rem;
  padding-block: 10rem;
  color: var(--color-white);
  background-color: var(--color-black);
  padding-inline: 0.875rem;
}
@media (min-width: 768px) {
  .gift-certificates {
    padding-inline: 1.375rem;
  }
}
@media (min-width: 1280px) {
  .gift-certificates {
    padding-inline: 1.75rem;
  }
}
@media (min-width: 768px) {
  .gift-certificates {
    grid-template-areas: "intro panel" "button panel";
    grid-template-rows: 1fr auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 0.5rem;
    row-gap: 2rem;
    padding-block: 15rem;
  }
}
@media (min-width: 1280px) {
  .gift-certificates {
    grid-template-areas: ". panel" "intro panel" "button panel" ". panel";
    grid-template-rows: 1fr auto auto 1fr;
    row-gap: 0;
    padding-block: 12.5rem;
  }
}
.gift-certificates__intro {
  display: flex;
  flex-direction: column;
  grid-area: intro;
  gap: 1rem;
}
@media (min-width: 1280px) {
  .gift-certificates__intro {
    gap: 1.5rem;
    width: 28.5rem;
  }
}
.gift-certificates__title {
  font-family: var(--font-heading);
  font-weight: 800;
  text-transform: uppercase;
  font-size: 3rem;
  line-height: 0.96;
}
@media (min-width: 768px) {
  .gift-certificates__title {
    font-size: 3.5rem;
    line-height: 0.92;
  }
}
@media (min-width: 1280px) {
  .gift-certificates__title {
    font-size: 4rem;
    line-height: 0.94;
  }
}
.gift-certificates__text {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.4;
}
@media (min-width: 1280px) {
  .gift-certificates__text {
    font-size: 1rem;
    line-height: 1.48;
  }
}
.gift-certificates__text {
  color: var(--color-white-40);
}
.gift-certificates__panel {
  display: flex;
  flex-direction: column;
  grid-area: panel;
  gap: 2rem;
  align-items: center;
  padding: 1rem 1rem 6.5rem;
  background-color: var(--color-white-4);
  border-radius: var(--radius-16);
}
@media (min-width: 768px) {
  .gift-certificates__panel {
    gap: 1.625rem;
    padding-bottom: 1rem;
    border-radius: var(--radius-24);
  }
}
@media (min-width: 1280px) {
  .gift-certificates__panel {
    display: grid;
    grid-template-areas: "amounts card" "note note";
    grid-template-columns: 7.5rem minmax(0, 30rem);
    justify-content: space-between;
    column-gap: 1rem;
    row-gap: 1.5rem;
    padding: 2rem;
  }
}
.gift-certificates__amounts {
  display: flex;
  grid-area: amounts;
  gap: 0.25rem;
  align-self: stretch;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}
@media (min-width: 1280px) {
  .gift-certificates__amounts {
    flex-direction: column;
    gap: 0.5rem;
    align-self: center;
  }
}
.gift-certificates__legend {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.gift-certificates__amount {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  cursor: pointer;
}
@media (min-width: 1280px) {
  .gift-certificates__amount {
    flex: none;
    width: 7.5rem;
  }
}
.gift-certificates__radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.gift-certificates__amount-text {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1.1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  color: var(--color-white);
  text-align: center;
  background-color: var(--gift-certificates-amount-background, var(--color-white-4));
  border: 1px solid transparent;
  border-radius: var(--radius-6);
  transition: color var(--transition-duration) var(--transition-ease), background-color var(--transition-duration) var(--transition-ease);
}
@media (min-width: 1280px) {
  .gift-certificates__amount-text {
    height: 4rem;
    border-radius: var(--radius-8);
  }
}
@media (hover: hover) {
  .gift-certificates__amount:hover {
    --gift-certificates-amount-background: var(--color-white-8);
  }
}
.gift-certificates__radio:checked + .gift-certificates__amount-text {
  color: var(--color-green);
  background-color: var(--color-white-8);
  border-color: var(--color-white-8);
}
.gift-certificates__radio:focus-visible + .gift-certificates__amount-text {
  outline: 0.125rem solid var(--color-blue);
  outline-offset: 0.125rem;
}
.gift-certificates__card {
  grid-area: card;
  max-width: 20.375rem;
}
@media (min-width: 1280px) {
  .gift-certificates__card {
    max-width: none;
  }
}
.gift-certificates__note {
  font-family: var(--font-text);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.4;
  grid-area: note;
  color: var(--color-white-40);
  text-align: center;
  text-wrap: balance;
}
.gift-certificates__button {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: 0.875rem;
  line-height: 1.4;
}
@media (min-width: 1280px) {
  .gift-certificates__button {
    font-size: 1rem;
    line-height: 1.48;
  }
}
.gift-certificates__button {
  display: flex;
  grid-area: panel;
  align-items: center;
  align-self: end;
  justify-content: center;
  height: 3.5rem;
  padding-inline: 1.5rem;
  margin: 0 1.125rem 1rem;
  color: var(--color-black);
  background-color: var(--color-green);
  border-radius: var(--radius-8);
  transition: background-color var(--transition-duration) var(--transition-ease);
}
@media (min-width: 768px) {
  .gift-certificates__button {
    grid-area: button;
    justify-self: start;
    margin: 0;
  }
}
@media (min-width: 1280px) {
  .gift-certificates__button {
    align-self: start;
    height: 4rem;
    padding-inline: 2rem;
    margin-top: 3rem;
  }
}
@media (hover: hover) {
  .gift-certificates__button:hover {
    background-color: var(--color-white);
  }
}
.gift-certificates__button:focus-visible {
  background-color: var(--color-white);
}