.offers-carousel {
  padding: clamp(8px, 1vw, 14px) 0 clamp(68px, 8vw, 108px);
  overflow: hidden;
  background: var(--jaroni-white);
}

.offers-carousel[hidden] { display: none; }

.offers-carousel__header {
  max-width: 760px;
  margin: 0 auto clamp(34px, 4vw, 50px);
  text-align: center;
}

.offers-carousel__eyebrow {
  display: inline-block;
  margin-bottom: var(--space-10);
  color: #c92126;
  font-size: var(--text-section-eyebrow);
  font-weight: var(--font-extrabold);
  letter-spacing: .12em;
  line-height: 1.15;
  text-transform: uppercase;
}

.offers-carousel__title {
  margin: 0;
  color: var(--color-heading);
  font-size: var(--text-section-title);
  font-weight: var(--font-extrabold);
  letter-spacing: -.04em;
  line-height: 1.12;
}

.offers-carousel__lead {
  margin: var(--space-7) 0 0;
  color: var(--color-text-secondary);
  font-size: .94rem;
  line-height: 1.55;
}

.offers-carousel__status { margin: 0; color: var(--color-text-status); font-size: var(--text-86); text-align: center; }
.offers-carousel__status[hidden] { display: none; }
.offers-carousel__content { position: relative; }
.offers-carousel__main { min-width: 0; }
.offers-carousel__carousel { position: relative; width: calc(100% - 188px); margin-inline: auto; }

.offers-carousel__ad { display: none; }

.offers-carousel__viewport {
  width: 100%;
  padding: var(--space-3) var(--space-4) var(--space-8);
  overflow: hidden;
  touch-action: pan-y;
}

.offers-carousel__viewport.is-dragging { cursor: grabbing; }
.offers-carousel__viewport:focus-visible { outline: 2px solid rgba(255, 194, 14, .62); outline-offset: 5px; border-radius: var(--radius-8); }

.offers-carousel__track {
  --offers-gap: 22px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--offers-card-width, 260px);
  align-items: stretch;
  column-gap: var(--offers-gap);
  will-change: transform;
  transition: transform .56s cubic-bezier(.22, .7, .25, 1);
}

.offers-carousel__track > .product-card { width: 100%; }
.offers-carousel .product-card--offer .product-card__discount { color: #a7191e; border: 1px solid rgba(227, 30, 36, .12); background: #fff0f0; }
.offers-carousel .product-card--offer .product-card__price { color: #b61d22; }

.offers-carousel__arrow {
  position: absolute;
  z-index: 5;
  top: 50%;
  display: grid;
  width: 44px;
  height: 60px;
  padding: 0;
  place-items: center;
  color: #56615b;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  transform: translateY(-50%);
  transition: color var(--duration-fast) ease, opacity var(--duration-fast) ease, transform var(--duration-fast) ease;
}

.offers-carousel__arrow:hover:not(:disabled) {
  color: var(--jaroni-green);
  background: transparent;
  box-shadow: none;
  transform: translateY(-50%) scale(1.08);
}

.offers-carousel__arrow:focus-visible { outline: 2px solid rgba(0, 166, 81, .34); outline-offset: 3px; }
.offers-carousel__arrow:disabled { cursor: default; opacity: .26; }
.offers-carousel__arrow--previous { left: -76px; }
.offers-carousel__arrow--next { right: -76px; }
.offers-carousel__arrow svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.offers-carousel.is-static .offers-carousel__arrow { visibility: hidden; }

.offers-carousel__position {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (min-width: 1500px) {
  .offers-carousel > .container { width: min(calc(100% - 32px), 1760px); }
  .offers-carousel__content {
    display: grid;
    grid-template-columns: clamp(180px, 12vw, 230px) minmax(0, 1fr) clamp(180px, 12vw, 230px);
    align-items: stretch;
    gap: clamp(20px, 1.5vw, 28px);
  }
  .offers-carousel__ad {
    position: relative;
    display: grid;
    min-height: 520px;
    overflow: hidden;
    color: #17201b;
    border: 1px solid #e4e9e6;
    border-radius: var(--radius-16);
    background: var(--jaroni-white);
    box-shadow: 0 16px 38px rgba(9, 31, 19, .07);
    isolation: isolate;
    text-decoration: none;
  }
  .offers-carousel__ad::before {
    position: absolute;
    inset: 0 0 auto;
    z-index: 3;
    height: 5px;
    background: linear-gradient(90deg, var(--jaroni-green), var(--jaroni-yellow), var(--jaroni-red));
    content: "";
  }
  .offers-carousel__ad-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-28) var(--space-18);
    text-align: center;
    background:
      radial-gradient(circle at 50% 22%, rgba(255, 194, 14, .15), transparent 32%),
      linear-gradient(155deg, var(--jaroni-white) 8%, #f4faf6 100%);
    transition: opacity .25s ease;
  }
  .offers-carousel__ad--right .offers-carousel__ad-placeholder {
    background:
      radial-gradient(circle at 50% 22%, rgba(227, 30, 36, .11), transparent 32%),
      linear-gradient(155deg, var(--jaroni-white) 8%, #fff9f5 100%);
  }
  .offers-carousel__ad-placeholder small {
    margin-bottom: 13px;
    color: var(--color-green-readable);
    font-size: var(--text-68);
    font-weight: var(--font-weight-850);
    letter-spacing: .14em;
    text-transform: uppercase;
  }
  .offers-carousel__ad-placeholder strong {
    max-width: 145px;
    font-size: clamp(1.12rem, 1.35vw, 1.42rem);
    line-height: 1.15;
  }
  .offers-carousel__ad-placeholder span {
    max-width: 145px;
    margin-top: var(--space-11);
    color: var(--color-text-secondary);
    font-size: var(--text-76);
    line-height: 1.5;
  }
  .offers-carousel__ad-image {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    opacity: 0;
    transition: opacity .28s ease, transform .35s ease;
  }
  .offers-carousel__ad.is-loaded .offers-carousel__ad-image { opacity: 1; }
  .offers-carousel__ad.is-loaded .offers-carousel__ad-placeholder { opacity: 0; }
  .offers-carousel__ad:hover .offers-carousel__ad-image { transform: scale(1.025); }
  .offers-carousel__ad:hover { border-color: rgba(0, 141, 69, .24); }
  .offers-carousel__ad:focus-visible { outline: 3px solid rgba(255, 194, 14, .62); outline-offset: 4px; }
  .offers-carousel__carousel {
    align-self: center;
    width: calc(100% - 188px);
  }
}

@media (max-width: 1100px) {
  .offers-carousel__carousel { width: calc(100% - 152px); }
  .offers-carousel__arrow--previous { left: -62px; }
  .offers-carousel__arrow--next { right: -62px; }
}

@media (max-width: 768px) {
  .offers-carousel__carousel { width: calc(100% - 116px); }
  .offers-carousel__arrow { width: 36px; height: 54px; }
  .offers-carousel__arrow--previous { left: -52px; }
  .offers-carousel__arrow--next { right: -52px; }
  .offers-carousel__arrow svg { width: 21px; height: 21px; }
  .offers-carousel__track { --offers-gap: 18px; }
}

@media (max-width: 560px) {
  .offers-carousel { padding-top: var(--space-14); padding-bottom: 72px; }
  .offers-carousel__header { margin-bottom: var(--space-30); }
  .offers-carousel__lead { font-size: var(--text-85); }
  .offers-carousel__carousel { width: calc(100% - 88px); }
  .offers-carousel__arrow { width: 32px; height: 48px; }
  .offers-carousel__arrow--previous { left: -40px; }
  .offers-carousel__arrow--next { right: -40px; }
  .offers-carousel__arrow svg { width: 19px; height: 19px; }
  .offers-carousel__viewport { padding-right: var(--space-3); padding-left: var(--space-3); }
  .offers-carousel__track { --offers-gap: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .offers-carousel__track, .offers-carousel__arrow, .offers-carousel__ad-image { transition: none; }
}