/* ==========================================================================
   CrysMed — Homepage Showcase (Offers / Specialists / Products)
   Rebuilt to match the client-approved "Offers, Drs, Products" reference —
   see new-designs/Offers  Drs Prducts - Final.png. Replaces the former
   "Hot deals near you" section (index.html #deals). Reuses sitewide tokens,
   .section__head/.eyebrow/.tab-row/.tag-selfpay/.btn from main.css.
   ========================================================================== */

.showcase-panel { margin-bottom: var(--sp-8); }
.showcase-panel:last-child { margin-bottom: 0; }
.showcase-panel:not(:last-child) { padding-bottom: var(--sp-5); border-bottom: 1px solid var(--line); }

/* Pill-style category tabs (visual variant of the shared .tab-row/.tab-item) */
.showcase-tabs {
  border-bottom: none;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
.showcase-tabs .tab-item {
  border: 1px solid var(--line-strong);
  border-radius: var(--r-full);
  padding: .5rem var(--sp-4);
  margin-bottom: 0;
}
.showcase-tabs .tab-item.is-active {
  background: var(--brand-700);
  border-color: var(--brand-700);
  color: var(--white);
}

.showcase-layout {
  display: flex;
  gap: var(--sp-5);
  align-items: stretch;
}

/* Offers panel: left column (title/desc/tabs/featured card, stacked as one
   flex item) fixed at 48% of the section width, 2% gap, right column (offer
   cards) at 50% — both columns top-aligned/stretched to the same height, per
   the client's exact math + flow spec (new-designs/homepage-layout-reference.jpg).
   The cards column stretches to match the left column's full stacked height
   (title+desc+tabs+featured card), not just the featured card alone. */
.showcase-layout--split, .showcase-layout--split-sm { gap: 1%; }
.showcase-layout--split .showcase-left-col { flex: 0 0 48%; display: flex; flex-direction: column; }
.showcase-layout--split .showcase-cards { flex: 0 0 50%; }
.showcase-left-col .feature-card { flex: 0 0 auto; width: 100%; min-height: 0; }
/* Specialist card fills the remaining left-col height (unlike the Offers
   card, which stays at natural content height) so it matches the stretched
   Doctors mini-card height instead of leaving dead space below it. */
.showcase-left-col .feature-card--specialist { flex: 1; }

/* Products panel: left column narrower (~one product card's width) so the
   promo tile reads as a compact banner, not a wide hero — per the client's
   correction to the shared split pattern (new-designs reference: promo tile
   is noticeably narrower than the Offers/Specialists featured cards). */
.showcase-layout--split-sm .showcase-left-col { flex: 0 0 32%; display: flex; flex-direction: column; }
.showcase-layout--split-sm .showcase-cards { flex: 0 0 66%; }
.showcase-left-col .promo-tile { flex: 1; width: 100%; min-height: 220px; }
.showcase-left-col .promo-tile__body { padding: var(--sp-4); gap: 4px; }
.showcase-left-col .promo-tile__body h3 { font-size: var(--fs-md); }
.showcase-left-col .promo-tile__body p { font-size: .6875rem; }

/* Title/subtitle use the same size as the Specialists panel's (unmodified
   .section__title/.section__sub) — only spacing below them stays compact. */
.showcase-left-col .section__head { margin-bottom: var(--sp-2); }
.showcase-left-col .showcase-tabs { margin-bottom: var(--sp-2); gap: var(--sp-2); }
.showcase-left-col .showcase-tabs .tab-item { padding: .375rem var(--sp-3); font-size: .6875rem; }

/* Shrink the featured card to the same size scale as the marketplace product
   card (backup #marketplace-preview .deal-card: var(--sp-4) body padding,
   fs-sm/fs-md font scale) so the panel height comes down — shared by every
   panel using the .showcase-left-col split layout (Offers, Specialists). */
.showcase-left-col .feature-card__body { padding: var(--sp-4); gap: 3px; }
.showcase-left-col .feature-card__tag { padding: 3px 9px; font-size: .625rem; margin-bottom: 2px; }
.showcase-left-col .feature-card__title { font-size: var(--fs-md); margin-bottom: var(--sp-1); }
.showcase-left-col .feature-card__meta { font-size: .6875rem; }
.feature-card--offer .feature-card__body { max-width: 260px; }
.feature-card--offer .feature-card__price { margin: var(--sp-1) 0 var(--sp-2); }
.feature-card--specialist .feature-card__body { max-width: 340px; }
.feature-card--specialist .feature-card__rating { font-size: .6875rem; margin-top: 0; }
.feature-card--specialist .feature-card__infobox { padding: var(--sp-1) var(--sp-2); margin: var(--sp-1) 0; }
.feature-card--specialist .feature-card__infobox span { font-size: .625rem; }
.feature-card--specialist .feature-card__infobox b { font-size: .75rem; }
/* "Book appointment" on this one hero card only (not the mini doctor cards below, which stay
   orange) follows the same gold used on the Featured Offer badge — client, 2026-09-04. */
.feature-card--specialist .btn-cta { background: var(--ref-gold-500); color: var(--brand-900); }
.feature-card--specialist .btn-cta:hover { background: #e6a000; }
.showcase-left-col .feature-card__price .now { font-size: var(--fs-md); }

/* ---- Featured card (offer / specialist variants share this shell) ---- */
.feature-card {
  position: relative;
  flex: 0 0 400px;
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: 340px;
  display: flex;
}
.feature-card__media { position: absolute; inset: 0; }
.feature-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feature-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, var(--accent-700) 0%, var(--accent-700) 46%, rgba(30, 136, 184, .55) 66%, rgba(30, 136, 184, 0) 88%);
}
.feature-card__body {
  position: relative;
  z-index: 1;
  padding: var(--sp-6) var(--sp-5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-1);
  max-width: 300px;
  color: var(--white);
}
.feature-card__tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  background: var(--white);
  color: var(--brand-900);
  font-size: .6875rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: var(--r-full);
  margin-bottom: var(--sp-2);
}
.feature-card__tag svg { width: 12px; height: 12px; }
.feature-card__badge-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--premium-500);
  color: var(--brand-900);
  margin-right: 6px;
}
.feature-card__badge-dot svg { width: 12px; height: 12px; }
.feature-card__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  margin: 0 0 var(--sp-2);
}
.feature-card__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .8125rem;
  opacity: .95;
}
.feature-card__meta + .feature-card__meta { margin-top: 2px; }
.feature-card__meta svg { width: 14px; height: 14px; flex-shrink: 0; }
.feature-card__rating { font-size: .8125rem; opacity: .95; margin-top: 2px; }
.feature-card__rating b { color: var(--premium-500); }
.feature-card__price { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); margin: var(--sp-3) 0 var(--sp-3); }
.feature-card__price .now { font-size: var(--fs-lg); font-weight: var(--fw-bold); }
.feature-card__price s { color: rgba(255, 255, 255, .65); font-size: .8125rem; font-weight: var(--fw-medium); }
.feature-card__price .tag-selfpay { background: transparent; border: 1px solid rgba(255, 255, 255, .55); }

/* Title-row (title + %-off badge side by side, matching the mini cards' title-row pattern)
   and the off badge itself — shared shape across every hero card that uses them; each card
   variant below sets only its own accent color via currentColor. */
.feature-card__title-row { display: flex; align-items: flex-start; gap: var(--sp-2); margin: 0 0 var(--sp-2); }
.feature-card__title-row .feature-card__title { flex: 1; min-width: 0; margin: 0; }
.feature-card__off {
  flex: 0 0 auto;
  margin-top: 4px;
  background: transparent;
  border: 1px solid currentColor;
  font-size: .6875rem;
  font-weight: var(--fw-bold);
  padding: 2px 8px;
  border-radius: var(--r-sm);
  white-space: nowrap;
}

/* Featured offer card (the one big hero card only — not the mini offer cards below, which
   keep their own white-bg/red-outline discount style): client asked (2026-09-04) for the
   FEATURED OFFER badge and price to use a gold accent instead of white, since an all-white
   badge/text treatment washed out against bright photo areas and gave the card no "screen
   presence". Discount %/strikethrough price are placeholder round numbers — this card is
   static demo content, not wired to a real offer, client said any reasonable numbers are fine. */
.feature-card--offer .feature-card__tag { background: var(--ref-gold-500); color: var(--brand-900); }
.feature-card--offer .feature-card__price .now { color: var(--ref-gold-500); }
.feature-card--offer .feature-card__off { color: var(--ref-gold-500); }

/* Featured product card (products panel) — same hero pattern as the offer card above. Client,
   2026-09-04: feature one real-feeling product (name/price/rating/delivery) instead of only
   generic marketing copy; numbers mirror the "Digital Blood Pressure Monitor" mini card below
   since this tile is static demo content too. Off badge and "Explore marketplace" button use
   the same gold as the Featured Offer card (corrected same day, 2026-09-04) — the mini product
   cards below keep their own orange off-badge/Add-to-cart styling, unaffected. */
.promo-tile__body .feature-card__off { color: var(--ref-gold-500); }
.promo-tile__body .feature-card__price .now { color: var(--ref-gold-500); }
.promo-tile__body .btn-cta { background: var(--ref-gold-500); color: var(--brand-900); }
.promo-tile__body .btn-cta:hover { background: #e6a000; }
.feature-card__infobox {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
  margin: var(--sp-2) 0 var(--sp-3);
}
.feature-card__infobox svg { width: 16px; height: 16px; flex-shrink: 0; }
.feature-card__infobox span { display: block; font-size: .6875rem; opacity: .9; }
.feature-card__infobox b { display: block; font-size: .8125rem; font-weight: var(--fw-bold); }
.feature-card .btn-white { align-self: flex-start; background: var(--white); color: var(--brand-900); }
.feature-card .btn-white:hover { background: var(--surface); }
.feature-card .btn-cta { align-self: flex-start; }

/* Specialist card: Earliest-appointment box and Book appointment button sit
   inline in one row instead of stacked (per user correction, 2026-08-24). */
.feature-card__actions { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-2); }
.feature-card__actions .feature-card__infobox { margin: 0; flex: 1; min-width: 0; }
.feature-card__actions .btn-cta { align-self: center; flex: 0 0 auto; }

/* ---- Promo tile (products panel) ---- */
.promo-tile {
  position: relative;
  flex: 0 0 260px;
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: 340px;
  display: flex;
}
.promo-tile__media { position: absolute; inset: 0; }
.promo-tile__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.promo-tile__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, var(--accent-700) 0%, var(--accent-700) 58%, rgba(30, 136, 184, .6) 78%, rgba(30, 136, 184, .25) 100%);
}
.promo-tile__body {
  position: relative;
  z-index: 1;
  padding: var(--sp-6) var(--sp-5);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-2);
  color: var(--white);
}
.promo-tile__body h3 { font-size: var(--fs-lg); font-weight: var(--fw-bold); line-height: var(--lh-tight); margin: 0; }
.promo-tile__body p { font-size: .8125rem; line-height: var(--lh-relaxed); opacity: .95; margin: 0; }
.promo-tile__body .btn { align-self: flex-start; margin-top: var(--sp-1); }

/* ---- Card rows ---- */
.showcase-cards {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: var(--sp-3);
}
.showcase-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.showcase-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); }
.showcase-cards--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* Offers panel's mini-card empty state — 2026-10-06, real-offers-only replacement for Fallback
   Mode's mockups (see home.html). Sits in place of .showcase-cards when there are zero real
   offers, so it takes the same flex slot next to the featured card. */
.mini-cards-empty {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--sp-2);
  padding: var(--sp-5) var(--sp-4);
  border: 1px dashed var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface-100);
}
.mini-cards-empty__icon { color: var(--ink-400); }
.mini-cards-empty__icon svg { width: 28px; height: 28px; }
.mini-cards-empty p { font-size: .8125rem; color: var(--ink-500); }

.mini-offer-card__title, .mini-doc-card__name, .product-card__title { margin: 0; }

.mini-offer-card, .mini-doc-card, .product-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .15s var(--ease), border-color .15s var(--ease);
}
.mini-offer-card:hover, .mini-doc-card:hover, .product-card:hover {
  box-shadow: var(--shadow-hover);
  border-color: var(--line-strong);
}

/* Offer mini-cards */
/* 2026-10-28: 3:2, the same shape as every other offer-image box on the site, so the provider's 1200x800 cover
   shows whole (4:3 cut its sides). Was: aspect-ratio: 4 / 3 */
.mini-offer-card__media { position: relative; aspect-ratio: 3 / 2; background: var(--surface); }
.mini-offer-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini-offer-card__cat {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  background: var(--brand-tint-strong);
  color: var(--brand-900);
  font-size: .625rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--r-sm);
}
.mini-offer-card__body { padding: var(--sp-4); display: flex; flex-direction: column; flex: 1; gap: 3px; justify-content: space-between; }
.mini-offer-card .btn-block { margin-top: 0; }
.mini-offer-card .btn-outline-brand { color: var(--accent-700); border-color: var(--accent-700); }
.mini-offer-card .btn-outline-brand:hover { background: var(--accent-tint); border-color: var(--accent-700); }

.mini-offer-card__title-row { display: flex; align-items: flex-start; gap: var(--sp-2); }
.mini-offer-card__title {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--ink-900);
  line-height: var(--lh-snug);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mini-offer-card__off {
  flex: 0 0 auto;
  margin-top: 1px;
  background: transparent;
  border: 1px solid var(--danger);
  color: var(--danger);
  font-size: .5625rem;
  font-weight: var(--fw-bold);
  white-space: nowrap;
  padding: 2px 6px;
  border-radius: var(--r-sm);
}

.mini-offer-card__info { display: flex; flex-direction: column; gap: 2px; }
.mini-offer-card__meta, .mini-offer-card__avail {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini-offer-card__meta { font-size: .6875rem; color: var(--ink-500); }
.mini-offer-card__avail { font-size: .6875rem; color: var(--brand-700); font-weight: var(--fw-medium); }
/* Card itself stays exactly the client-approved size — a real offer's price can run longer than
   the reference's own round demo numbers (e.g. "AED 523.95" vs. "AED 349") once VAT is added, so
   this row shrinks its own text just enough to always fit on one line instead of clipping the
   Self-pay tag. Fixed 2026-09-02, project lead's own call: dimensions untouchable, price text is
   what flexes. */
.mini-offer-card__price { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.mini-offer-card__price .now { font-size: .75rem; font-weight: var(--fw-bold); color: var(--ink-900); flex-shrink: 0; }
.mini-offer-card__price s {
  font-size: .625rem; color: var(--ink-300);
  overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.mini-offer-card__price .tag-selfpay {
  background: var(--white);
  color: var(--accent-700);
  border: 1px solid var(--accent-700);
  font-size: .5rem;
  padding: 1px 4px;
  flex-shrink: 0;
}

/* Doctor mini-cards */
.mini-doc-card__media { aspect-ratio: 1 / 1; background: var(--surface); }
.mini-doc-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini-doc-card__body { padding: var(--sp-4); display: flex; flex-direction: column; flex: 1; gap: 3px; justify-content: space-between; }
.mini-doc-card__spec, .mini-doc-card__rating {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mini-doc-card__name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--ink-900);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mini-doc-card__spec { font-size: .75rem; color: var(--ink-500); }
.mini-doc-card__rating {
    font-size: .55rem;
    color: var(--ink-700);
}
.mini-doc-card__rating b { color: #e5a223; }
.mini-doc-card__earliest { font-size: .6875rem; color: var(--ink-500); }
.mini-doc-card__earliest b { display: block; color: var(--accent-700); font-weight: var(--fw-bold); font-size: .8125rem; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-doc-card .btn-block { margin-top: 0; }
/* Matches the "Explore offer" button theme from the offers section above — solid orange CTA
   instead of the teal outline (client, 2026-09-04; corrected from an earlier gold attempt). */
.mini-doc-card .btn-outline-brand { background: var(--cta-orange, var(--danger)); color: var(--white); border-color: var(--cta-orange, var(--danger)); }
.mini-doc-card .btn-outline-brand:hover { background: var(--cta-orange-hover, #c94f08); border-color: var(--cta-orange-hover, #c94f08); }

/* Product mini-cards */
.product-card__media { position: relative; aspect-ratio: 4 / 3; background: var(--surface); }
.product-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-card__badge {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  color: var(--brand-900);
  font-size: .5625rem;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: var(--r-sm);
  background: var(--brand-tint-strong);
}
.product-card__body { padding: var(--sp-4); display: flex; flex-direction: column; flex: 1; gap: 3px; justify-content: space-between; }
/* Badge stacks above the title (not beside it) — at this card's width
   (~144px) a side-by-side badge leaves too little room for the title to
   fit its full text within 3 lines, per the client's requirement that the
   name never truncate. */
.product-card__title-row { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.product-card__title {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--ink-900);
  line-height: var(--lh-snug);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Discount tag — same treatment as .mini-offer-card__off in "Offers made
   for your wellbeing", reused here so both showcase panels share one
   visual language for percentage-off badges. */
.product-card__off {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--danger);
  color: var(--danger);
  font-size: .5625rem;
  font-weight: var(--fw-bold);
  white-space: nowrap;
  padding: 2px 6px;
  border-radius: var(--r-sm);
}
.product-card__rating {
  font-size: .6875rem;
  color: var(--ink-500);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-card__rating b { color: #e5a223; }
/* Delivery info — same label/value treatment as .mini-doc-card__earliest
   in "Meet trusted specialists" (small label, bold value below). */
.product-card__delivery { font-size: .6875rem; color: var(--ink-500); }
.product-card__delivery b {
  display: block;
  color: var(--accent-700);
  font-weight: var(--fw-bold);
  font-size: .8125rem;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.product-card__price { display: flex; align-items: baseline; gap: var(--sp-2); white-space: nowrap; }
.product-card__price .now { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--ink-900); }
.product-card__price s { font-size: .75rem; color: var(--ink-300); }
.product-card .btn-cta {
  width: 100%;
  padding: .25rem var(--sp-3);
  gap: var(--sp-1);
  margin-top: 6px;
}

/* Shared button variants used across the showcase panels */
.btn-outline-brand { background: var(--white); color: var(--brand-900); border-color: var(--line-strong); }
.btn-outline-brand:hover { border-color: var(--brand-700); }
.btn-cta { background: var(--cta-orange, var(--danger)); color: var(--white); }
.btn-cta:hover { background: var(--cta-orange-hover, #c94f08); }

/* 2026-10-19 client change — "Offers made for your wellbeing": the featured card is gone; title + subtitle on
   the left and the tabs on the right of one row, then 4 offer cards across the full width (4 per row, like the
   reference; 5 was tried the same day). The 12px gap
   (--sp-3) matches the client's spacing reference (cobone.com deal grid: 12px across and down at every width).
   Tabs keep the exact small pill size they had in the old left column. Phones/tablets: mobile-home.css. */
.showcase-panel--row4 .section__head { margin-bottom: var(--sp-4); }
.showcase-panel--row4 .showcase-tabs { flex-wrap: nowrap; gap: var(--sp-2); margin-bottom: 0; }
.showcase-panel--row4 .showcase-tabs .tab-item { padding: .375rem var(--sp-3); font-size: .6875rem; }
/* Hold every photo to the card's 3:2 box (4:3 until 2026-10-28). Without this an uploaded cover in another shape
   (e.g. a tall one) grows its box past it and, in a single row, stretches all the cards to its height. */
.showcase-panel--row4 .mini-offer-card__media { overflow: hidden; }
/* 2026-10-19 client: card text "in a rush, compressed". The sizes below were set for the old ~194px cards; at 4 per
   row the card is ~295px (1366px screen), so the text grows into it: price 12 -> 16px (the strongest line after the
   title), info lines 11 -> 12.5px, Self-pay tag 8 -> 10px, OFF badge 9 -> 11px, button 33 -> 40px tall. And the body
   reads in 3 groups instead of 7px everywhere: title, 8px, provider + availability (4px apart), 14px, price, 14px,
   button. Price + button sit at the bottom so they line up across the row. Desktop PCs only: phones and touch
   tablets keep the compact app-style card from mobile-home.css. */
@media (min-width: 1367px), (min-width: 1024px) and (hover: hover), (min-width: 1024px) and (pointer: fine) {
  .showcase-panel--row4 .mini-offer-card__body { gap: 0; justify-content: flex-start; padding: var(--sp-4) var(--sp-4) 18px; }
  .showcase-panel--row4 .mini-offer-card__title-row { gap: 10px; }
  .showcase-panel--row4 .mini-offer-card__title { font-size: .9375rem; line-height: 1.35; }
  .showcase-panel--row4 .mini-offer-card__off { font-size: .6875rem; padding: 3px 7px; margin-top: 0; }
  .showcase-panel--row4 .mini-offer-card__info { gap: var(--sp-1); margin-top: var(--sp-2); }
  .showcase-panel--row4 :is(.mini-offer-card__meta, .mini-offer-card__avail) { font-size: .78125rem; line-height: 1.45; }
  .showcase-panel--row4 .mini-offer-card__price { margin-top: auto; padding-top: 14px; gap: var(--sp-2); }
  .showcase-panel--row4 .mini-offer-card__price .now { font-size: 1rem; }
  .showcase-panel--row4 .mini-offer-card__price s { font-size: .75rem; }
  .showcase-panel--row4 .mini-offer-card__price .tag-selfpay { font-size: .625rem; padding: 2px 6px; }
  .showcase-panel--row4 .mini-offer-card .btn-block { margin-top: 14px; min-height: 40px; font-size: .8125rem; }
  /* 2026-10-25: the price row is hidden (client change, home.html), so the button now takes the price's place at the
     bottom (margin-top:auto) — keeps the buttons in one line across the row. Was only the price row's margin-top:auto. */
  .showcase-panel--row4 .mini-offer-card .btn-block { margin-top: auto; }
  .showcase-panel--row4 .mini-offer-card__info { margin-bottom: 14px; }
}

@media (min-width: 1024px) {
  /* Stays 4 across on every desktop width (the shared .showcase-cards--4 drops to 2 below 1180px, and uses an 8px gap) */
  .showcase-panel--row4 .showcase-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
}

/* 2026-10-25 client change — "Everyday health essentials": the big Featured Product tile is hidden (home.html), so
   the panel stacks: title + subtitle on the left and the tabs on the right of one row, then the 4 product cards across
   the full width, 4 per row on every desktop width (the shared .showcase-cards--4 would drop to 2 below 1180px).
   Same 12px gap as the Offers panel above. Phones/tablets keep their swipe row from mobile-home.css. */
.showcase-panel--products-full .showcase-layout--split { flex-direction: column; gap: 0; }
.showcase-panel--products-full .showcase-layout--split .showcase-left-col {
  flex: 0 0 auto;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--sp-2) var(--sp-4);
  margin-bottom: var(--sp-4);
}
.showcase-panel--products-full .showcase-left-col .section__head,
.showcase-panel--products-full .showcase-left-col .showcase-tabs { margin-bottom: 0; }
.showcase-panel--products-full .showcase-layout--split .showcase-cards { flex: 0 0 auto; width: 100%; }
@media (min-width: 1024px) {
  .showcase-panel--products-full .showcase-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
}

@media (max-width: 1180px) {
  .showcase-cards--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .showcase-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .showcase-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 980px) {
  .showcase-layout { flex-direction: column; }
  .feature-card, .promo-tile { flex-basis: auto; min-height: 280px; }
  .showcase-layout--split .showcase-left-col, .showcase-layout--split .showcase-cards,
  .showcase-layout--split-sm .showcase-left-col, .showcase-layout--split-sm .showcase-cards { flex-basis: auto; }
}

/* Phone widths: featured card stacks full-width above a horizontal swipe
   carousel of cards — same pattern as .deal-grid's mobile treatment. */
@media (max-width: 640px) {
  .showcase-cards {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: var(--sp-4);
    padding-bottom: var(--sp-2);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .showcase-cards::-webkit-scrollbar { display: none; }
  .showcase-cards > * {
    flex: 0 0 78%;
    min-width: 0;
    scroll-snap-align: start;
  }
  .feature-card, .promo-tile { min-height: 260px; }
  .feature-card__body, .promo-tile__body { max-width: none; padding: var(--sp-5) var(--sp-4); }
}