/* ==========================================================================
   Fahavi Computers - Deals page (extends fahavi-shop.css)
   Scoped to body.fahavi-deals (custom class - WP emits no `page-deals`).
   ========================================================================== */

/* ------------------------------------------------- wide content container */
/* One wide column shared by hero, breadcrumb, pills, catalog, pagination.   */
body.fahavi-deals .ct-container-full[data-vertical-spacing],
body.fahavi-deals .ct-container[data-vertical-spacing] {
  max-width: none;
  width: min(100% - clamp(32px, 4vw, 64px), 1800px);
  margin-inline: auto;
  padding-top: 10px; padding-bottom: 24px;
}
/* WordPress's constrained layout caps every child at content-size AND
   centres it - both must be overridden (same gotcha as the homepage). */
body.fahavi-deals .entry-content.is-layout-constrained > *,
body.fahavi-deals .entry-content > * {
  max-width: none; width: auto; margin-inline: 0;
}
body.fahavi-deals .entry-content { padding-inline: 0; }

/* ------------------------------------------------------------- banner */
.fh-dhero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(70% 120% at 85% 20%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(105deg, #C81E1E 0%, #E02424 55%, #EF3B2D 100%);
  border-radius: 16px; color: #fff; margin-bottom: 14px;
}
/* subtle dotted texture, right side only, fading toward the copy */
.fh-dhero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.22) 1.3px, transparent 1.3px);
  background-size: 17px 17px;
  -webkit-mask-image: linear-gradient(90deg, transparent 42%, rgba(0,0,0,.85) 72%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 42%, rgba(0,0,0,.85) 72%, #000 100%);
  border-radius: inherit;
}
.fh-dhero__inner {
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: clamp(14px, 2vw, 28px);
  padding: clamp(20px, 2.4vw, 30px) clamp(18px, 2.4vw, 34px);
  flex-wrap: wrap;
}
.fh-dhero__flame {
  width: 54px; height: 54px; border-radius: 16px; flex: none;
  background: rgba(255,255,255,.16); display: grid; place-items: center;
}
.fh-dhero__flame svg { width: 30px; height: 30px; color: #fff; stroke-width: 2.2; }
.fh-dhero__copy h1 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 800; color: #fff; margin: 0 0 4px; letter-spacing: -.015em; }
.fh-dhero__copy p { font-size: 13.5px; color: #FFE0DB; margin: 0; }
.fh-dhero__points { display: flex; gap: clamp(10px, 1.6vw, 22px); margin-left: auto; flex-wrap: wrap; }
.fh-dhero__points span { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; color: #FFEAE6; }
.fh-dhero__points svg { width: 15px; height: 15px; color: #FFD9D0; }
@media (max-width: 900px) {
  .fh-dhero__points { margin-left: 0; }
  .fh-dhero::after { background-size: 20px 20px; -webkit-mask-image: linear-gradient(90deg, transparent 60%, #000 100%); mask-image: linear-gradient(90deg, transparent 60%, #000 100%); }
}
@media (max-width: 560px) {
  .fh-dhero__flame { display: none; }
  .fh-dhero::after { display: none; }
}

.fh-crumbs--deals { margin: 0 0 12px; }

/* -------------------------------------------------- responsive grid ladder */
/* Sidebar stays 250px (from fahavi-shop.css); the product area takes all
   remaining width. Columns: 5 / 4 / 3 / 2 / 1 - MUST mirror cols() in
   fahavi-deals.php so rows-per-page math matches what renders. */
body.fahavi-deals .fh-shop__main ul.products {
  gap: clamp(12px, 1vw, 20px);
}
@media (min-width: 1700px) {
  body.fahavi-deals .fh-shop__main ul.products { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (min-width: 1360px) and (max-width: 1699px) {
  body.fahavi-deals .fh-shop__main ul.products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 900px) and (max-width: 1359px) {
  body.fahavi-deals .fh-shop__main ul.products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 560px) and (max-width: 899px) {
  body.fahavi-deals .fh-shop__main ul.products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 559px) {
  body.fahavi-deals .fh-shop__main ul.products { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------- toolbar */
body.fahavi-deals .fh-shoptool { padding: 8px 12px; margin-bottom: 14px; }
body.fahavi-deals .fh-shoptool--bare { justify-content: flex-end; }
body.fahavi-deals .fh-shoptool--bare .fh-shoptool__right { margin-left: 0; }

/* -------------------------------------------------------- deal pricing */
.fh-card__pct {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  font-size: 11.5px; font-weight: 800; line-height: 1; color: #fff;
  padding: 6px 9px; border-radius: 14px; background: var(--fh-red);
  letter-spacing: .01em;
}
.fh-card--deal .fh-card__wish { top: 44px; }

.fh-card__pricing--deal { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; }
.fh-card__pricing--deal .fh-card__was { font-size: .78rem; }
.fh-card__price--sale { color: var(--fh-red); font-size: clamp(1.15rem, 1.2vw, 1.3rem); }
.fh-card__pricing--deal .fh-card__save { color: var(--fh-red); font-weight: 700; }

/* sort select on deals toolbar */
#fh-dsort {
  padding: 9px 30px 9px 12px; border: 1px solid var(--fh-border); border-radius: 9px;
  font-size: 13px; font-family: inherit; color: var(--fh-ink); background: #fff; cursor: pointer;
}