/* Материалы кампании «Чёрная пятница 2026». */
@font-face {
  font-family: "Graphik Promo";
  src: url("fonts/Graphik-Medium-Web.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

html:has(body.has-black-friday),
body.has-black-friday { min-width: 0; }

.bf-strip { background: #fff; }

.bf-strip__link {
  display: block;
  padding: var(--space-1);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  font-family: "Graphik Promo", "Graphik", sans-serif;
  font-weight: 500;
}

.bf-strip__content {
  display: grid;
  grid-template-columns: 170px minmax(0, 1fr) 45px 145px 114px;
  align-items: center;
  gap: var(--space-7);
  height: 64px;
  padding: 0 var(--space-4);
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: #000;
  pointer-events: none;
}

.bf-strip__link:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; }
.bf-strip__link img { display: block; max-width: 100%; height: auto; }
.bf-strip__brand { position: relative; display: block; width: 170px; height: 58px; }
.bf-strip__brand img { position: absolute; }
.bf-strip__flower { width: 64px; left: 0; top: 0; }
.bf-strip__label { width: 100px; left: 30px; top: 3px; }
.bf-strip__peace { width: 40px; right: 0; bottom: 0; }
.bf-strip__offer { min-width: 0; color: #fff; font-size: 22px; line-height: 1.15; }
.bf-strip__discount, .bf-strip__gifts { white-space: nowrap; }
.bf-strip__button { display: grid; place-items: center; height: 40px; border-radius: var(--radius-sm); background: #fff; color: #000; font-size: 14px; white-space: nowrap; }
.bf-strip__decor { position: relative; display: block; height: 62px; align-self: end; }
.bf-strip__decor img { position: absolute; }
.bf-strip__gamepad { width: 80px; left: 0; top: 0; }
.bf-strip__bubbles { width: 66px; right: 0; top: 14px; }

.bf-strip__content--timed { grid-template-columns: 170px minmax(0, 1fr) 45px 185px 145px 114px; }
.bf-strip__timer { display: block; color: #fff; white-space: nowrap; font-size: 22px; line-height: 1.1; font-variant-numeric: tabular-nums; }

.has-black-friday .progress { position: sticky; margin-top: -4px; }
.gift-heading .preview-eyebrow { text-transform: none; letter-spacing: 0; }
.phone-gate-form .bf-form-note { margin: var(--space-3) 0 0; color: #fff; font-size: 13px; line-height: 1.4; }

@media (min-width: 701px) and (max-width: 1000px) {
  .bf-strip__content { grid-template-columns: 170px minmax(0, 1fr) 36px 128px 80px; gap: var(--space-4); padding: 0 var(--space-3); }
  .bf-strip__offer { font-size: 18px; }
}

@media (min-width: 701px) and (max-width: 1200px) {
  .bf-strip__content--timed { grid-template-columns: minmax(0, 1fr) 36px 160px 128px; gap: var(--space-4); padding: 0 var(--space-3); }
  .bf-strip__content--timed .bf-strip__brand, .bf-strip__content--timed .bf-strip__decor { display: none; }
  .bf-strip__content--timed .bf-strip__offer, .bf-strip__content--timed .bf-strip__timer { font-size: 18px; }
}

@media (max-width: 700px) {
  .bf-strip__content { height: 48px; grid-template-columns: minmax(0, 1fr) 32px 128px; gap: var(--space-3); padding: 0 var(--space-3); border-radius: var(--radius-md); }
  .bf-strip__brand, .bf-strip__decor { display: none !important; }
  .bf-strip__offer { font-size: 14px; line-height: 1.05; }
  .bf-strip__gifts { display: block; }
  .bf-strip__button { height: 34px; font-size: 13px; }
  .bf-strip__timer { display: none; }
  .has-black-friday .progress { top: 55px; }
}

@media (max-width: 380px) {
  .bf-strip__content { grid-template-columns: minmax(0, 1fr) 26px 112px; gap: var(--space-2); padding: 0 var(--space-2); }
  .bf-strip__offer, .bf-strip__button { font-size: 12px; }
}

.bf-result-banner {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  align-items: center;
  gap: var(--space-9);
  min-height: 416px;
  margin-top: var(--space-9);
  padding: var(--space-9);
  border-radius: var(--radius-lg);
  background: #000;
  color: #fff;
  font-family: var(--font-sans);
  text-decoration: none;
}

.bf-result-banner > * { pointer-events: none; }
.bf-result-banner__art { display: block; width: 340px; max-width: 100%; height: auto; }
.bf-result-banner__copy { min-width: 0; }
.bf-result-banner__copy h2 { margin: 0; color: #fff; font-size: 32px; font-weight: 600; line-height: 1.15; letter-spacing: -.03em; }
.bf-result-banner__copy p { margin: var(--space-6) 0 0; color: #fff; font-size: 16px; font-weight: 400; line-height: 1.5; }
.bf-result-banner__button { display: inline-flex; justify-content: center; align-items: center; width: min(260px, 100%); min-height: 56px; margin-top: var(--space-8); padding: var(--space-4) var(--space-6); border-radius: var(--radius-md); background: var(--blue); color: #fff; font-size: 16px; font-weight: 600; line-height: 1.2; }
.bf-result-banner:hover .bf-result-banner__button { background: var(--color-primary-hover); }
.bf-result-banner:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; }

@media (min-width: 761px) and (max-width: 1100px) {
  .bf-result-banner { grid-template-columns: 280px minmax(0, 1fr); gap: var(--space-7); padding: var(--space-7); }
  .bf-result-banner__copy h2 { font-size: 28px; }
}

@media (max-width: 760px) {
  .bf-result-banner { grid-template-columns: minmax(0, 1fr); min-height: 0; gap: var(--space-6); padding: var(--space-6); }
  .bf-result-banner__art { width: min(240px, 100%); justify-self: center; }
  .bf-result-banner__copy h2 { font-size: 24px; }
  .bf-result-banner__copy p { margin-top: var(--space-5); font-size: 14px; }
  .bf-result-banner__button { width: 100%; margin-top: var(--space-6); }
}