/* Qure MI funnel — Black Friday 2026 layer (Matt's Monday priority 1, 2 Nov 2026).
   Design: "1 + 2 combined" from the Black Friday prototype (artifact MQCcsBMZY84qZzbtUCvraD). Marko, 2 Nov: the
   modern shapes of the Qure Shop prototype, but the colouring of the first version (charcoal, chrome, orange)
   and it has to pop: Magda's chrome pill with a moving reflection, a charcoal offer card with a drifting chrome
   rim, solid orange chips. No timer (Matt), no claim that the offer ends (option D), prices untouched.
   Everything hangs off body.bf-on, which black-friday.js removes after END. */

@property --bf-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

.bf-on {
  --bf-ink: #212428;
  --bf-ink-2: #2e3136;
  --bf-orange: #ff5429;
  --bf-orange-hi: #ff7a54;             /* orange on charcoal */
  --bf-grad: linear-gradient(135deg, #ff6a3d 0%, #ff4e22 55%, #ff8566 100%);
  --bf-rim: conic-gradient(from var(--bf-angle), #f4f5f6, #8e9196 18%, #fdfdfd 32%, #a3a6ab 50%, #eef0f1 64%, #85888d 80%, #f4f5f6);
}

/* ---- Magda's chrome pill (Figma 5257:6517) with a light sweeping across it ---- */
.bf-chrome {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center;
  height: 28px; padding: 0 16px; border-radius: 60px;
  background: url(black-friday/chrome-pill.webp) center / 100% 100% no-repeat;
  color: var(--bf-ink, #212428); font-size: 12.5px; line-height: 1; font-weight: 600; letter-spacing: 1.6px;
  text-shadow: 0 0 2.5px rgba(255, 255, 255, .8); white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
.bf-chrome::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .95) 46%, rgba(255, 255, 255, .2) 54%, transparent 66%) -160% 0 / 55% 100% no-repeat;
  mix-blend-mode: screen; animation: bf-glint 3.6s cubic-bezier(.4, 0, .2, 1) infinite;
}
@keyframes bf-glint { 0%, 50% { background-position: -160% 0; } 100% { background-position: 260% 0; } }

/* ---- the offer card: one slim charcoal line with a drifting chrome rim ---- */
.bf-band {
  position: relative; display: flex; align-items: center; gap: 12px;
  padding: 9px 14px 9px 10px; min-height: 52px; border-radius: 999px; text-align: left; color: #fff;
  border: 1.5px solid transparent;
  background:
    radial-gradient(120% 220% at 0% 0%, #3a3e44 0%, var(--bf-ink) 55%) padding-box,
    var(--bf-rim) border-box;
  box-shadow: 0 8px 22px rgba(33, 36, 40, .20);
  font-family: var(--base-font-family, "TT Commons", sans-serif);
  animation: bf-rim 9s linear infinite;
}
@keyframes bf-rim { to { --bf-angle: 360deg; } }
.bf-band .bf-chrome { flex: none; height: 26px; padding: 0 13px; font-size: 11.5px; }
.bf-band__l1 { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: 15.5px; line-height: 1.2; font-weight: 600; white-space: nowrap; }
.bf-band__l1 svg { width: 12px; height: 12px; padding: 3px; border-radius: 50%; background: var(--bf-grad); color: #fff; box-sizing: content-box; flex: none; }
.bf-band__amt { margin-left: auto; display: inline-flex; align-items: baseline; gap: 6px; flex: none; white-space: nowrap; }
.bf-band__amt span { font-size: 12.5px; color: #b9bcc1; }
.bf-band__amt b { font-size: 20px; line-height: 1; font-weight: 600; color: var(--bf-orange-hi); font-variant-numeric: tabular-nums; }
.bf-band__amt[hidden] { display: none; }
@media (max-width: 420px) {
  .bf-band { gap: 9px; padding: 8px 12px 8px 8px; }
  .bf-band .bf-chrome { padding: 0 10px; font-size: 10.5px; letter-spacing: 1.2px; }
  .bf-band__l1 { font-size: 14.5px; }
  .bf-band__amt span { display: none; }
  .bf-band__amt b { font-size: 18px; }
}

/* ---- buy box ---- */
#purchase-form .bf-band { margin: 4px 0 26px; }
#purchase-form .bf-band--in-step { margin: 26px 0 0; }
.bf-applied-line {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; padding: 4px 10px 4px 8px; border-radius: 999px;
  background: var(--bf-grad); color: #fff; font-size: 12.5px; line-height: 1.2; font-weight: 600; width: max-content; max-width: 100%;
  box-shadow: 0 3px 10px rgba(255, 78, 34, .28);
}
.bf-applied-line svg { width: 12px; height: 12px; flex: none; }

/* ---- cart drawer: the offer card takes the reservation strip's place ---- */
.bf-on .qcart__demand { display: none; }
.qcart .bf-band { margin: 2px 0 14px; }
.bf-item-tag {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; padding: 4px 10px 4px 8px; border-radius: 999px;
  background: var(--bf-grad); color: #fff; font-size: 12px; font-weight: 600; width: max-content;
}
.bf-item-tag svg { width: 12px; height: 12px; }
/* savings rows: the orange gradient pill from the first version */
.bf-save-tag {
  display: inline-flex; align-items: center; height: 24px; padding: 0 12px; border-radius: 999px;
  background: var(--bf-grad); color: #fff; font-size: 13px; line-height: 1; font-weight: 600; white-space: nowrap;
}
.bf-on .qcart__row--savings b { color: var(--bf-orange); font-weight: 600; font-size: 17px; }

/* ---- upsell and downsell cards ---- */
.bf-band--up { margin: 0 0 16px; }
.up-pcard .bf-band--up { margin: 14px 0 14px; }

/* ---- checkout ---- */
.co2-right .bf-band { margin: 0 0 22px; }
.bf-co-chip {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; padding: 4px 10px 4px 8px; border-radius: 999px;
  background: var(--bf-grad); color: #fff; font-size: 12px; line-height: 1.2; font-weight: 600;
}
.bf-co-chip svg { width: 12px; height: 12px; }
.bf-on .co2-savings { letter-spacing: 0; }
.bf-on .co2-savings svg { display: none; }
.bf-on .co2-savings .bf-save-tag { text-transform: none; }
.bf-on .co2-savings b { color: var(--bf-orange); font-size: 15px; }
@media (max-width: 899px) { .co2-right .bf-band { margin: 12px 16px; } }


/* ---- phones: the strip under the navigation bar, above the photos ---- */
.bf-strip { display: none; }
@media (max-width: 991px) {
  .bf-strip {
    position: relative; display: flex; align-items: center; gap: 10px;
    margin: 0; padding: 10px 16px; min-height: 52px;
    background: radial-gradient(140% 220% at 0% 0%, #3a3e44 0%, #212428 60%);
    color: #fff; text-decoration: none; font-family: var(--base-font-family, "TT Commons", sans-serif);
  }
  .bf-strip::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, #8e9196, #fdfdfd 30%, #a3a6ab 55%, #f4f5f6 80%, #8e9196); }
  .bf-strip .bf-chrome { height: 26px; padding: 0 13px; font-size: 11.5px; flex: none; }
  .bf-strip__t { flex: 1; min-width: 0; font-size: 15px; line-height: 1.2; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bf-strip__amt b { color: #ff7a54; font-weight: 600; }
  .bf-strip__amt[hidden] { display: none; }
  .bf-strip__go { width: 18px; height: 18px; flex: none; color: #ff7a54; animation: bf-nudge 2.4s ease-in-out infinite; }
  @keyframes bf-nudge { 0%, 60%, 100% { transform: translateY(0); } 75% { transform: translateY(3px); } }
}
@media (max-width: 360px) { .bf-strip__t { font-size: 14px; } }

@media (prefers-reduced-motion: reduce) {
  .bf-chrome::after, .bf-band, .bf-strip__go { animation: none; }
}