.offers-section {
  margin-bottom: 50px;
  padding: 0 60px;
}

/* Breadcrumb — same treatment as the shipping page: side padding lined up
   with .offers-section, breathing room above, and a hairline rule below */
.offers-breadcrumb-wrap {
  padding: 0 60px;
}
.offers-breadcrumb-wrap .product-breadcrumb {
  padding: 18px 0 14px;
  border-bottom: 1px solid #e3e3e3;
}

.product-slider__track--grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.promo-banner {
  position: relative;
  /* 1379px wide in the 1440 frame, i.e. 30px clear of the edge — it reaches
     30px past the 60px padding of .offers-section on each side */
  width: calc(100% + 60px);
  height: 348px;
  margin: 40px -30px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

.promo-banner__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The 20% black scrim the Figma section carries over its image fill — it keeps
   the white text legible whatever the photo does */
.promo-banner__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0.2);
}

/* Per Figma: the blocks stack against the left edge, vertically centred inside
   60px padding. Title, subtitle, buttons and chips are all 24px apart, which is
   exactly the 228px the 348px banner leaves once the padding is taken off. */
.promo-banner__content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 60px;
  gap: 24px;
  color: #fff;
}

.promo-banner__text {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.promo-banner h1 {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-size: 40px;
  line-height: 48px;
  color: #ffffff;
}

.promo-banner p {
  font-size: 18px;
  color: #ffffff;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}

.promo-banner__buttons {
  display: flex;
  gap: 12px;
}

.btn {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 12px;
  width: 200px;
  height: 48px;
  border-radius: 8px;
  /* Label metrics are shared by both variants; without a size here the buttons
     fall back to the UA default of ~13.3px */
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
}

.btn-outline {
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
}

.btn-primary {
  border: none;
  background: #304d2c;
  color: #fff;
}

.promo-banner__categories {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.promo-banner__categories button {
  padding: 8px 16px;
  background: rgba(217, 217, 217, 0.5);
  border-radius: 6px;
}

/* Two lines: one of name, one of price. Both children stretch to the card so
   they have a width to truncate against - hugging their text would let them
   run past the card edge instead of ellipsing. */
.product-card__info {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  gap: 0;
}
.product-card__name {
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #ffffff;
  padding: 15px 15px 0;
  /* One line, then an ellipsis */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* One line of text, not split into spans */
.product-card__price {
  padding: 0 15px 10px;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  color: #ffffff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-offer {
  margin: 60px 0;
}

/* 550px left column — the width the title, description and the 200px button
   pair are all specced against; 360px made the buttons shrink to fit */
.hero-offer__top {
  display: grid;
  grid-template-columns: 550px minmax(0, 1fr);
  gap: 36px;
  align-items: stretch;
}

.hero-offer__left {
  display: flex;
  flex-direction: column;
  gap: 50px;
  height: 100%;
}

.hero-offer__cards {
  display: flex;
  gap: 40px;
}

/* Poppins/FontSize_1/Bold — 40/48, the same token the promo banner title uses */
.hero-offer__content h2 {
  font-family: "Poppins", sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 40px;
  line-height: 48px;
  color: #000000;
  margin-bottom: 24px;
}

/* Roboto 16/24 — the token is named Inter but resolves to Roboto, as elsewhere */
.hero-offer__content p {
  font-family: "Roboto", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #000000;
  margin-bottom: 24px;
}

.hero-offer__buttons {
  display: flex;
  gap: 14px;
}

/* No size override here — the 200x48 of the base .btn is what the mockup uses */

.btn-light {
  border: 1px solid #000000;
  background: white;
}

.btn-dark {
  background: #000000;
  color: white;
  border: none;
}

.btn-green {
  background: #304d2c;
  color: white;
  border: none;
}

.mini-card {
  position: relative;
  /* two across the 550px column with the 40px gap of .hero-offer__cards.
     min-width:0 lets them hold that half — as flex items they would otherwise
     floor at the width of their own nowrap label instead of truncating. */
  width: calc(50% - 20px);
  min-width: 0;
  height: 310px;
  display: flex;
  flex-direction: column;
  border-radius: 6px;
  overflow: hidden;
  background: #304d2c;
}

.mini-card img {
  width: 100%;
  /* leaves 84px for the info block below: 32 padding + 24 label + 28 title */
  height: 226px;
  object-fit: cover;
}

.mini-card__badge {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 24px;
  padding: 4px 8px;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  font-size: 11px;
  /* tucks into the card's own 6px corner, with the inner corner rounded */
  border-radius: 6px 0;
}

.mini-card__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 16px;
}
.mini-card__info small {
  font-family: "Roboto", sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #ffffff;
}

.mini-card__info h4 {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 28px;
  color: #ffffff;
  /* One 28px line, truncated — "Perfect for pasta & salad" is wider than the
     card, and wrapping it to two lines would overflow the 84px info block */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The photo takes its height from the left column beside it (528px on desktop:
   168 of title/description/buttons + 50 gap + 310 cards). Absolute positioning
   keeps the photo's own height out of the row calculation, so the column drives
   it at every width instead of a hardcoded number per breakpoint. */
.hero-offer__image {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 6px;
}

.hero-offer__image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.hero-offer__bottom {
  display: grid;
  /* same 550px as the top row — the deal card carries the same button pair */
  grid-template-columns: 550px minmax(0, 1fr);
  gap: 60px;
  margin-top: 60px;
}

.deal-card h2 {
  margin-bottom: 24px;
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-size: 40px;
  line-height: 48px;
  color: #000000;
}

.deal-card p {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #000000;
  margin-bottom: 24px;
}

.limited-offer {
  background: #304d2c;
  color: white;
  border-radius: 8px;
  padding: 24px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.limited-offer img {
  width: 72px;
  height: 72px;
  border-radius: 8px;
  object-fit: cover;
}

.limited-offer h4 {
  margin-bottom: 8px;
}

.limited-offer p {
  margin-bottom: 8px;
}

.limited-offer__tags {
  display: flex;
  gap: 8px;
  margin: 10px 0;
}

.limited-offer__tags span {
  background: rgba(255, 255, 255, 0.15);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.more-deals {
  margin-top: 60px;
  text-align: center;
}

.more-deals h2 {
  font-size: 44px;
  font-weight: 700;
  color: #304d2c;
  margin-bottom: 14px;
}

.more-deals p {
  color: #666;
  margin-bottom: 28px;
}

.more-deals__buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
}

/* Green outline and label here, unlike the black one in the hero and deal card */
.more-deals__buttons .btn-light {
  border-color: #304d2c;
  color: #304d2c;
}

@media (max-width: 1200px) {
  .product-slider__track--grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .product-slider__track--grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Two per row down to 360, not one: at 390 the 20px page padding and 20px gap
   put each card at 165px, which is the 163px of the mockup. */
@media (max-width: 480px) {
  .product-slider__track--grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* 165 photo + ~52 of name and price = the 217px card */
  .product-card__img-wrap {
    height: 165px;
  }

  /* The shared mobile rule pins this to 32px, which clips the two lines the
     offers card puts inside it */
  .product-card__info {
    height: auto;
  }

  .product-card__name {
    font-size: 10px;
    line-height: 13px;
    padding: 8px 10px 0;
  }

  .product-card__price {
    padding: 0 10px 8px;
    font-size: 12px;
    line-height: 20px;
  }
}

/* ===== TABLET =====
   The 550px left column no longer leaves the photo enough room, so both rows
   move to even halves. Everything else steps down from the desktop sizes. */
@media (max-width: 1024px) {
  .offers-section,
  .offers-breadcrumb-wrap {
    padding: 0 40px;
  }

  /* No breakout below desktop — the banner lines up with the section */
  .promo-banner {
    width: 100%;
    height: 280px;
    margin: 30px 0;
  }

  .promo-banner__content {
    padding: 40px;
  }

  .promo-banner h1 {
    font-size: 32px;
    line-height: 40px;
  }

  .hero-offer {
    margin: 40px 0;
  }

  /* minmax(0,...) rather than a bare 1fr: grid items floor at min-content, and
     the nowrap card labels would otherwise push the left column past half */
  .hero-offer__top,
  .hero-offer__bottom {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px;
  }

  .hero-offer__bottom {
    margin-top: 40px;
  }

  .hero-offer__left {
    gap: 30px;
  }

  .hero-offer__cards {
    gap: 20px;
  }

  /* Height follows the photo now, so the cards keep their proportions as the
     column narrows instead of staying 310px tall */
  .mini-card {
    width: calc(50% - 10px);
    height: auto;
  }

  .mini-card img {
    height: auto;
    aspect-ratio: 250 / 226;
  }

  .hero-offer__content h2,
  .deal-card h2,
  .more-deals h2 {
    font-size: 32px;
    line-height: 40px;
  }
}

/* ===== LARGE PHONES =====
   Both rows stay two-up as in the mockup - text and cards on the left, photo
   and green panel on the right - at sizes between the tablet tier and the
   390px frame below. */
@media (max-width: 600px) {
  .offers-section,
  .offers-breadcrumb-wrap {
    padding: 0 24px;
  }

  .promo-banner {
    height: 200px;
    margin: 24px 0;
  }

  /* The block hugs its widest child (the button row) and the title and text
     centre on that, which is how the mockup sits it left of centre */
  .promo-banner__content {
    width: fit-content;
    align-items: center;
    text-align: center;
    padding: 36px 33px;
    gap: 8px;
  }

  .promo-banner h1 {
    font-size: 24px;
    line-height: 28px;
  }

  .promo-banner__buttons .btn {
    width: 135px;
  }

  /* The category chips are not in the mobile mockup */
  .promo-banner__categories {
    display: none;
  }

  .hero-offer__top,
  .hero-offer__bottom {
    gap: 14px;
  }

  .hero-offer__bottom {
    margin-top: 32px;
  }

  .hero-offer__left {
    gap: 12px;
  }

  .hero-offer__content h2,
  .deal-card h2,
  .more-deals h2 {
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 8px;
  }

  .hero-offer__content p,
  .deal-card p {
    margin-bottom: 12px;
  }

  /* Buttons share the column rather than holding the 200px desktop width */
  .btn {
    width: auto;
    height: 36px;
    padding: 6px 12px;
  }

  .hero-offer__buttons {
    gap: 10px;
  }

  .hero-offer__buttons .btn {
    flex: 1;
    min-width: 0;
  }

  .hero-offer__cards {
    gap: 10px;
  }

  .mini-card {
    width: calc(50% - 5px);
  }

  .mini-card img {
    aspect-ratio: 122 / 133;
  }

  .mini-card__badge {
    height: 20px;
    font-size: 10px;
  }

  /* One line of label only — the subtitle is not in the mobile mockup */
  .mini-card__info {
    padding: 4px 8px;
  }

  .mini-card__info small {
    font-size: 14px;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .mini-card__info h4 {
    display: none;
  }

  .limited-offer {
    padding: 12px;
    gap: 12px;
  }

  .limited-offer img {
    width: 70px;
    height: 70px;
  }

  /* Tags are not in the mobile mockup either */
  .limited-offer__tags {
    display: none;
  }

  /* That hidden block was the only thing separating these two inline elements */
  .limited-offer span,
  .limited-offer small {
    display: block;
  }

  .more-deals {
    margin-top: 40px;
  }

  .more-deals p {
    margin-bottom: 20px;
  }

  .more-deals__buttons {
    gap: 20px;
  }

  .more-deals__buttons .btn {
    padding: 6px 16px;
  }
}

/* ===== THE 390px MOCKUP =====
   Still two columns. Anchored on the mini card photo, which is 79x87 there:
   that puts the columns at ~171px and the button pair at ~82px each, so the
   type and controls step down to suit. */
@media (max-width: 480px) {
  .offers-section,
  .offers-breadcrumb-wrap {
    padding: 0 20px;
  }

  .promo-banner {
    height: 130px;
    margin: 16px 0;
  }

  /* 40 padding + 20 title + 6 + 32 (two lines) + 6 + 24 buttons = the 130px */
  .promo-banner__content {
    padding: 20px;
    gap: 6px;
  }

  .promo-banner h1 {
    font-size: 16px;
    line-height: 20px;
  }

  .promo-banner p {
    font-size: 12px;
    line-height: 16px;
  }

  .promo-banner__buttons {
    gap: 8px;
  }

  .promo-banner__buttons .btn {
    width: 88px;
  }

  .hero-offer {
    margin: 20px 0;
  }

  .hero-offer__top,
  .hero-offer__bottom {
    gap: 10px;
  }

  .hero-offer__bottom {
    margin-top: 20px;
  }

  .hero-offer__left {
    gap: 8px;
  }

  .hero-offer__content h2,
  .deal-card h2,
  .more-deals h2 {
    font-size: 14px;
    line-height: 20px;
    margin-bottom: 6px;
  }

  .hero-offer__content p,
  .deal-card p,
  .more-deals p {
    font-size: 12px;
    line-height: 16px;
    margin-bottom: 8px;
  }

  .btn {
    height: 24px;
    padding: 4px 8px;
    font-size: 11px;
    line-height: 16px;
    border-radius: 4px;
  }

  .hero-offer__buttons {
    gap: 6px;
  }

  .hero-offer__cards {
    gap: 8px;
  }

  .mini-card {
    width: calc(50% - 4px);
    border-radius: 4px;
  }

  .mini-card img {
    aspect-ratio: 79 / 87;
  }

  .mini-card__badge {
    height: 14px;
    padding: 2px 6px;
    font-size: 9px;
    border-radius: 4px 0;
  }

  .mini-card__info {
    padding: 2px 6px;
  }

  .mini-card__info small {
    font-size: 11px;
    line-height: 14px;
  }

  .limited-offer {
    padding: 8px;
    gap: 8px;
  }

  .limited-offer img {
    width: 46px;
    height: 46px;
    border-radius: 4px;
  }

  /* Poppins here, Inter on the lines under it. The 8px line box is tighter than
     the 12px type it holds, which is how the card packs into its height. */
  .limited-offer h4 {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 12px;
    line-height: 8px;
    margin-bottom: 6px;
  }

  .limited-offer p,
  .limited-offer span {
    font-family: "Inter", sans-serif;
    font-weight: 400;
    font-size: 12px;
    line-height: 19px;
  }

  .limited-offer p {
    margin-bottom: 0;
  }

  .limited-offer small {
    font-size: 10px;
    line-height: 8px;
  }

  .more-deals {
    margin-top: 24px;
  }

  .more-deals__buttons {
    gap: 12px;
  }

  .more-deals__buttons .btn {
    padding: 4px 10px;
  }
}