/* ORDER-149: 쿠팡특가 cards, the home section chips and the 15 home sections; / and /deals only. */
.deals-strip { margin-top: 2.5rem; }
.product-grid.deals-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.75rem 1rem; }

/* The card: Coupang's own thumbnail as is (square, white, contained), name, price, delivery. */
:is(.deals-grid, .deal-group-cards) .product-card img {
  padding: 0;
  background: #ffffff;
  border: 0;
  border-radius: 0;
  aspect-ratio: 1;
  object-fit: contain;
}
:is(.deals-grid, .deal-group-cards) .product-card h3 { margin-top: 0.625rem; font-size: 0.9375rem; font-weight: 400; }
:is(.deals-grid, .deal-group-cards) .card-price strong { font-size: 1.25rem; font-weight: 800; }
.deal-shipping { margin: 0.3rem 0 0; color: var(--storefront-muted); font-size: 0.8125rem; }
.deal-shipping.is-rocket { color: var(--rocket-blue); font-weight: 700; }

/* ORDER-IMAGE-01: the home card owns its space even when the image fails or is hidden. */
.home-deal-media { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 1; background: var(--storefront-chrome); }
.home-deal-fallback { padding: 0.5rem; color: var(--storefront-muted); font-size: 0.8125rem; text-align: center; }
:is(.deals-grid, .deal-group-cards) .home-deal-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
:is(.deals-grid, .deal-group-cards) .home-deal-media img[hidden] { display: none; }
/* Home 「카테고리」 row: one chip per section, each a jump to its section below. */
.deal-group-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; list-style: none; }
.deal-group-chips a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.45rem 1rem;
  color: var(--storefront-ink);
  background: var(--storefront-chrome);
  border: 1px solid var(--storefront-line);
  border-radius: 999rem;
  font-size: 0.875rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.deal-group-chips a:hover { border-color: var(--storefront-ink); }

/* The 15 sections: head line, colour banner on the left, up to 4 cards on the right. */
.deal-group { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--storefront-line); scroll-margin-top: 1rem; }
.deal-group-head { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; margin-bottom: 1rem; }
.deal-group-head h2 { margin: 0 0.25rem 0 0; font-size: 1.25rem; }
.hot-label { color: var(--brand-accent); font-size: 0.75rem; font-weight: 900; }
.deal-group-keywords { display: flex; flex-wrap: wrap; gap: 0.375rem; margin: 0; padding: 0; list-style: none; }
.deal-group-keywords a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.25rem 0.75rem;
  color: var(--storefront-text);
  border: 1px solid var(--storefront-line);
  border-radius: 999rem;
  font-size: 0.8125rem;
  text-decoration: none;
  white-space: nowrap;
}
.deal-group-keywords a:hover { color: var(--storefront-ink); border-color: var(--storefront-ink); }
.deal-group-more { display: inline-flex; align-items: center; margin-left: auto; color: var(--storefront-text); font-size: 0.8125rem; text-decoration: none; }
.deal-group-body { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; align-items: stretch; }
.deal-group-banner {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-height: 12rem;
  padding: 1.125rem;
  overflow: hidden;
  color: var(--storefront-ink);
  background: var(--storefront-tint);
  border-radius: 0.75rem;
  text-decoration: none;
}
.deal-group:nth-child(4n + 2) .deal-group-banner { background: #eef4ff; }
.deal-group:nth-child(4n + 3) .deal-group-banner { background: #edf8f0; }
.deal-group:nth-child(4n + 4) .deal-group-banner { background: #fff6dc; }
.deal-group-banner strong { font-size: 1.125rem; overflow-wrap: anywhere; }
.deal-group-banner span { color: var(--storefront-text); font-size: 0.8125rem; font-weight: 700; }
.deal-group-banner img { width: 100%; height: auto; margin-top: auto; aspect-ratio: 1; object-fit: cover; border-radius: 0.5rem; }
.deal-group-cards { display: grid; grid-column: 2 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.deal-group-empty { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; grid-column: 2 / -1; margin: 0; color: var(--storefront-text); font-size: 0.9375rem; }
.deal-group-empty a { color: var(--brand-accent); font-weight: 800; }

/* /deals title line: the white line of the home 쿠팡특가 heading, no picture. */
.deals-page-heading { margin-bottom: 1rem; }
.deals-page-heading h1 { margin: 0; font-size: 1.375rem; }
.deals-page-heading p { margin: 0; color: var(--storefront-muted); font-size: 0.8125rem; }
.deals-q-notice { margin: 0 0 1rem; color: var(--storefront-text); font-size: 0.9375rem; font-weight: 700; }

@media (max-width: 75rem) {
  .product-grid.deals-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Tablet and phone: the banner turns into a thin band above the cards. */
@media (max-width: 62rem) {
  .product-grid.deals-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .deal-group-body { display: block; }
  .deal-group-banner { flex-direction: row; align-items: baseline; justify-content: space-between; min-height: 0; margin-bottom: 0.75rem; padding: 0.625rem 0.875rem; border-radius: 0.5rem; }
  .deal-group-banner strong { font-size: 0.9375rem; }
  .deal-group-banner img { display: none; }
}

@media (max-width: 48rem) {
  .deals-strip { margin-top: 1.75rem; }
  .deals-page-heading > div { display: flex; }
  .deals-page-heading h1 { font-size: 1.125rem; }
  .product-grid.deals-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 0.75rem; }
  :is(.deals-grid, .deal-group-cards) .product-card h3 { font-size: 0.875rem; }
  :is(.deals-grid, .deal-group-cards) .card-price strong { font-size: 1.125rem; }
  .deal-group-chips { flex-wrap: nowrap; margin-inline: -1rem; padding: 0 1rem 0.25rem; overflow-x: auto; scrollbar-width: none; }
  /* Name and 「더 보기」 on the first line; HOT and the keywords scroll on the second. */
  .deal-group-head { gap: 0.5rem; }
  .deal-group-head::before { content: ""; order: 2; flex-basis: 100%; }
  .deal-group-more { order: 1; }
  .hot-label { order: 3; }
  .deal-group-keywords { flex: 1; flex-wrap: nowrap; order: 3; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .deal-group-cards { grid-auto-columns: calc((100% - 0.75rem) / 2); grid-auto-flow: column; grid-template-columns: none; gap: 0.75rem; overflow-x: auto; scroll-snap-type: x mandatory; }
  .deal-group-cards .product-card { scroll-snap-align: start; }
}