/* =========================================================================
   GulfRabit · Deals module
   ========================================================================= */
/* ---- The offer card ---------------------------------------------------
   A banner, not a page. It was 321px tall on a 360px phone — 40% of the
   viewport, above the fold, spent telling the customer that deals exist on
   the deals page. Now ~40% of that: the padding halves, the paragraph is one
   line, and the 49px numeral becomes a figure inside a sentence instead of a
   stacked block that cost two rows on its own.

   The title carries its Bangla at full size (.head-gr__bn--full), which is
   the one thing here allowed to add height: this shop's customers read
   Bangla first, and a headline is where that should show. */
.deals-hero {
  position: relative; overflow: hidden;
  border-radius: var(--radius-lg); border: 1px solid var(--border-hairline);
  background: var(--gr-gradient); color: #04222b;
  padding: clamp(1rem, 3.5vw, 2rem) clamp(1.15rem, 4vw, 2.25rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-2) var(--space-5);
}
.deals-hero__copy { min-width: 0; }
/* Tighter than the global h1 on both axes: a two-script headline set at the
   page's default 1.2 leading opens a visible gap between the English and the
   Bangla under it, and this card is the one place buying back that space. */
.deals-hero__title { color: #04222b; margin: .15rem 0 0; line-height: 1.12; }
.deals-hero__sub { color: #04333f; max-width: 46ch; margin-top: .35rem; }

/* One line, reading as a sentence: "5 products on offer". The number keeps
   the display face so it still lands as a figure, but at a size that sits in
   the line rather than standing above it. margin:0 because it is a <p> now —
   it used to be two divs, and the browser's own paragraph margins would put
   the height straight back. */
.deals-hero__stat { margin: 0; font-size: var(--fs-14); }
/* The word space between the figure and the label is not enough on its own:
   the display face carries almost no right side bearing and the label opens
   on a letterspaced capital, so "5 PRODUCTS" set as authored reads 5PRODUCTS. */
.deals-hero__num { font-family: var(--font-display); font-size: var(--fs-24); line-height: 1; margin-inline-end: .3em; }
.deals-hero__label { text-transform: uppercase; letter-spacing: .08em; }

/* Top-deal strip */
.top-deal {
  display: grid; grid-template-columns: 120px 1fr; gap: var(--space-4); align-items: center;
  padding: var(--space-4); border: 1px solid var(--border-hairline); border-radius: var(--radius-lg);
  background: var(--surface-raised);
}
.top-deal__media { aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-sunken); }
.top-deal__media img { width: 100%; height: 100%; object-fit: cover; }
.top-deal__pct { font-family: var(--font-display); font-size: var(--fs-31); color: var(--lime-ink); }

.deals-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin: var(--space-7) 0 var(--space-5); }