/* BY sale banners v1.0.3. Font family inherits from the site; existing BF dates apply. */
.yk-sale-banner-new { display: none !important; }
.yk-sale-banner-original { display: contents; }
html.yurkas-bf-active .yk-sale-banner-new { display: block !important; }
html.yurkas-bf-active .yk-sale-banner-original { display: none !important; }
.yk-sale-catalog-slot { margin: 0 0 20px; }
.yk-sale-home-mobile { order: 2; width: 100%; margin-top: 24px; }
@media (min-width: 576px) {
  html.yurkas-bf-active .yk-sale-home-mobile { display: none !important; }
}
/* Do not apply "display:contents" to the legacy anchor itself. */
a.yk-sale-banner-original { display: flex; }
.yk-sale-banner-slot { width: 100%; min-width: 0; container-type: inline-size; }
.yk-sale-banner, .yk-sale-banner * { box-sizing: border-box; }
.yk-sale-banner {
  --yk-accent: #ffa800;
  position: relative; isolation: isolate; display: flex; flex-direction: column;
  width: 100%; min-width: 0; margin: 0; border-radius: 12px;
  background: linear-gradient(160deg, #6e6a66 0%, #3a3734 34%, #161514 62%, #0a0a0a 100%);
  color: #fff;
  text-align: left; font-size: 14px; line-height: 1.4;
}
.yk-sale-banner__art { position: absolute; z-index: -1; overflow: hidden; pointer-events: none; }
/* The site's .layout img { height:auto } must not override this photo box. */
.yk-sale-banner .yk-sale-banner__art > img.yk-sale-banner__photo {
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%; max-width: none; max-height: none;
  object-fit: cover; object-position: 8% 0;
}
.yk-sale-banner__top, .yk-sale-banner__copy, .yk-sale-banner__button { position: relative; z-index: 1; }
.yk-sale-banner__date { color: var(--yk-accent); font-size: 12px; font-weight: 800; letter-spacing: .5px; line-height: 1.25; text-transform: uppercase; }
.yk-sale-banner__discount { display: flex; flex-direction: column; align-items: flex-start; margin-top: 8px; }
.yk-sale-banner__discount > span { font-size: 16px; line-height: 1.1; font-weight: 800; text-transform: uppercase; color: #fff; }
.yk-sale-banner__discount > strong { font-size: 58px; line-height: 1; letter-spacing: -2px; font-weight: 900; color: var(--yk-accent); }
.yk-sale-banner__title { margin: 0; color: #fff; font-size: 24px; font-weight: 900; line-height: 1.15; }
.yk-sale-banner__flame { white-space: nowrap; }
.yk-sale-banner .yk-sale-banner__description { padding: 0; margin: 10px 0 0; color: #d6d6d6; font-size: 14px; font-weight: 600; line-height: 1.4; }
.yk-sale-banner .yk-sale-banner__description a { color: var(--yk-accent); font: inherit; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.yk-sale-banner a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 2px; }
.yk-sale-banner a:hover { filter: brightness(1.15); }
.yk-sale-banner .yk-sale-banner__button {
  align-self: flex-start; display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; min-height: 47px; max-width: calc(100% - 40px); padding: 10px 20px;
  margin: 26px 20px 20px; background: #f5f5f5; color: #1a1a1a; border-radius: 6px;
  font-size: 15px; font-weight: 800; line-height: 1.2; text-decoration: none;
}
.yk-sale-banner__button svg { flex: 0 0 18px; }
/* Flow layout keeps all copy and both links visible when the card is narrow. */
.yk-sale-banner--home { min-height: 510px; }
.yk-sale-banner--home .yk-sale-banner__art {
  left: 36%; top: 18px; width: 64%; height: 250px;
  mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
}
.yk-sale-banner--home .yk-sale-banner__photo,
.yk-sale-banner--stock .yk-sale-banner__photo {
  mask-image: linear-gradient(90deg, transparent 0%, #000 28%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 28%);
}
.yk-sale-banner--home .yk-sale-banner__top { min-height: 262px; padding: 22px 20px 16px; }
.yk-sale-banner--home .yk-sale-banner__copy { padding: 0 20px; flex: 1; }
.yk-sale-banner--stock { min-height: 582px; }
.yk-sale-banner--stock .yk-sale-banner__art {
  left: 35.3%; top: 20px; width: 64.7%; height: 300px;
  mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 60%, transparent 100%);
}
.yk-sale-banner--stock .yk-sale-banner__top { min-height: 360px; padding: 30px 32px 20px; }
.yk-sale-banner--stock .yk-sale-banner__copy { margin-top: auto; padding: 0 32px 32px; }
.yk-sale-banner--stock .yk-sale-banner__date { font-size: 13px; }
.yk-sale-banner--stock .yk-sale-banner__discount > span { font-size: 17px; }
.yk-sale-banner--stock .yk-sale-banner__discount > strong { font-size: 64px; }
.yk-sale-banner--stock .yk-sale-banner__title { font-size: 28px; }
.yk-sale-banner--stock .yk-sale-banner__description { margin-top: 14px; font-size: 15px; line-height: 1.45; }
/* This wrapper hosts a complete banner, not the legacy promo image.
   Keep its rounded clipping and suppress the legacy foreground overlay. */
.layout .promo-list__img.yk-sale-stock-slot {
  align-self: flex-start; height: auto; max-height: none; padding: 0;
  overflow: hidden; border-radius: 12px;
  background: none; transform: none; transition: none;
}
.layout .promo-list__img.yk-sale-stock-slot::after {
  content: none; display: none;
}
/* Mobile/tablet catalog banner: text has normal flow and never overlaps the photo. */
.yk-sale-banner--catalog { min-height: 260px; }
.yk-sale-banner--catalog .yk-sale-banner__art { right: 0; top: 0; width: 55%; height: 145px; border-radius: 0 12px 0 0; }
.yk-sale-banner--catalog .yk-sale-banner__photo {
  mask-image: linear-gradient(90deg, transparent 0%, #000 40%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 40%);
}
.yk-sale-banner--catalog .yk-sale-banner__top { min-height: 150px; padding: 18px 20px; }
.yk-sale-banner--catalog .yk-sale-banner__discount > strong { font-size: 54px; }
.yk-sale-banner--catalog .yk-sale-banner__copy { padding: 0 20px 20px; }
@supports (font-size: 1cqw) {
  .yk-sale-banner--home { min-height: 131.1cqw; }
  .yk-sale-banner--home .yk-sale-banner__art { top: 4.63cqw; height: 64.27cqw; }
  .yk-sale-banner--home .yk-sale-banner__top { min-height: 67.35cqw; padding: 5.66cqw 5.14cqw 4.11cqw; }
  .yk-sale-banner--home .yk-sale-banner__copy { padding: 0 5.14cqw; }
  .yk-sale-banner--home .yk-sale-banner__date { font-size: clamp(10px, 3.085cqw, 14px); }
  .yk-sale-banner--home .yk-sale-banner__discount > span { font-size: clamp(13px, 4.11cqw, 18px); }
  .yk-sale-banner--home .yk-sale-banner__discount > strong { font-size: clamp(44px, 14.91cqw, 70px); }
  .yk-sale-banner--home .yk-sale-banner__title { font-size: clamp(19px, 6.17cqw, 28px); }
  .yk-sale-banner--home .yk-sale-banner__description { font-size: clamp(12px, 3.6cqw, 16px); }
  .yk-sale-banner--home .yk-sale-banner__button { min-height: clamp(40px, 12.08cqw, 54px); font-size: clamp(13px, 3.86cqw, 17px); margin: 6.68cqw 5.14cqw 5.14cqw; padding: 3cqw 5.14cqw; }
  .yk-sale-banner--stock { min-height: 136.94cqw; }
  .yk-sale-banner--stock .yk-sale-banner__art { top: 4.71cqw; height: 70.59cqw; }
  .yk-sale-banner--stock .yk-sale-banner__top { min-height: 84.71cqw; padding: 7.06cqw 7.53cqw 4.71cqw; }
  .yk-sale-banner--stock .yk-sale-banner__copy { padding: 0 7.53cqw 7.53cqw; }
  .yk-sale-banner--stock .yk-sale-banner__date { font-size: clamp(10px, 3.06cqw, 15px); }
  .yk-sale-banner--stock .yk-sale-banner__discount > span { font-size: clamp(13px, 4cqw, 19px); }
  .yk-sale-banner--stock .yk-sale-banner__discount > strong { font-size: clamp(44px, 15.06cqw, 72px); }
  .yk-sale-banner--stock .yk-sale-banner__title { font-size: clamp(20px, 6.59cqw, 32px); }
  .yk-sale-banner--stock .yk-sale-banner__description { font-size: clamp(12px, 3.53cqw, 17px); }
}
@container (min-width: 860px) {
  .yk-sale-banner--catalog {
    min-height: 11.388cqw;
    background: linear-gradient(90deg, #0a0a0a 0%, #1c1b1a 42%, #57534f 78%, #8a8580 100%);
  }
  .yk-sale-banner--catalog .yk-sale-banner__art { width: 22.776cqw; height: 100%; border-radius: 0 12px 12px 0; }
  .yk-sale-banner--catalog .yk-sale-banner__top { position: static; min-height: 0; padding: 1.423cqw 2.847cqw 0; }
  .yk-sale-banner--catalog .yk-sale-banner__date { font-size: .996cqw; }
  .yk-sale-banner--catalog .yk-sale-banner__discount {
    position: absolute; left: 57.3cqw; top: 0; bottom: 0; margin: 0;
    flex-direction: row; align-items: center; gap: .854cqw;
  }
  .yk-sale-banner--catalog .yk-sale-banner__discount > span { width: 5.7cqw; font-size: 1.423cqw; text-align: right; }
  .yk-sale-banner--catalog .yk-sale-banner__discount > strong { font-size: 5.979cqw; letter-spacing: -.214cqw; }
  .yk-sale-banner--catalog .yk-sale-banner__copy { width: 55.16cqw; padding: .427cqw 0 1.423cqw 2.847cqw; }
  .yk-sale-banner--catalog .yk-sale-banner__title { font-size: 2.278cqw; }
  .yk-sale-banner--catalog .yk-sale-banner__description { margin-top: .569cqw; font-size: 1.068cqw; line-height: 1.4; }
}

/* Fill the native stretched Swiper slide, like the original new-promo-card.
   Each intermediate wrapper must pass the available height to the banner.
   The separate mobile banner keeps its content-driven height. */
.section-new__swiper-and-promo-wrapper .swiper-slide > .yk-sale-banner-new,
.swiper-slide > .yk-sale-banner-new > .yk-sale-banner-slot--home,
.swiper-slide > .yk-sale-banner-new > .yk-sale-banner-slot--home > .yk-sale-banner--home {
  height: 100%;
}
