/*
 * CouponCodes Homepage Premium Typography Parity v3.2
 * Purpose: bring the custom CouponCodes homepage to the same readable,
 * premium typography/spacing scale used by the mature PromoCodes.Guru pages.
 * UI only. No routes, DB, affiliate, verification, scheduler or admin logic.
 */

/* ---------- HOME PAGE DESIGN TOKENS ---------- */
body.cc-home-page {
  --cc-home-max: 1500px;
  --cc-home-section-gap: 26px;
  --cc-home-card-pad: 22px;
  --cc-home-radius: 16px;
  --cc-home-line: #e1e8e5;
  --cc-home-shadow: 0 7px 24px rgba(7,31,59,.055);
  font-size: 16px;
  line-height: 1.55;
}
body.cc-home-page .cc-shell {
  width: min(calc(100% - 48px), var(--cc-home-max));
  max-width: var(--cc-home-max);
}
body.cc-home-page .cc-home > .cc-shell { margin-bottom: var(--cc-home-section-gap); }
body.cc-home-page .cc-card {
  border-color: var(--cc-home-line);
  border-radius: var(--cc-home-radius);
  box-shadow: var(--cc-home-shadow);
}

/* ---------- HEADER: match commercial page readability ---------- */
body.cc-home-page .cc-header-inner { height: 72px; gap: 24px; }
body.cc-home-page .cc-brand-name { font-size: 18px; }
body.cc-home-page .cc-brand-badge { font-size: 11px; padding: 5px 10px; }
body.cc-home-page .cc-nav { gap: 24px; }
body.cc-home-page .cc-nav a { font-size: 14px; font-weight: 700; }
body.cc-home-page .cc-header-search { width: 320px; height: 42px; }
body.cc-home-page .cc-header-search input { font-size: 13px; padding-inline: 11px; }
body.cc-home-page .cc-country { font-size: 12.5px; }
body.cc-home-page .cc-submit { height: 42px; font-size: 13px; padding-inline: 17px; }

/* ---------- HERO ---------- */
body.cc-home-page .cc-hero {
  grid-template-columns: minmax(390px,.68fr) minmax(0,1.32fr);
  gap: 38px;
  padding-top: 34px;
  margin-bottom: 28px !important;
}
body.cc-home-page .cc-hero-copy { padding: 16px 4px 16px 6px; }
body.cc-home-page .cc-hero-copy h1 {
  font-size: clamp(54px,4.4vw,72px);
  line-height: .96;
  letter-spacing: -.058em;
  margin-bottom: 20px;
}
body.cc-home-page .cc-hero-copy > p {
  font-size: 16px;
  line-height: 1.68;
  max-width: 590px;
}
body.cc-home-page .cc-benefits { margin-top: 26px; gap: 14px; max-width: 680px; }
body.cc-home-page .cc-benefits b { width: 30px; height: 30px; font-size: 13px; }
body.cc-home-page .cc-benefits strong { font-size: 12.5px; line-height: 1.25; }
body.cc-home-page .cc-benefits small { font-size: 10.5px; line-height: 1.35; margin-top: 3px; }
body.cc-home-page .cc-hero-carousel { height: 326px; border-radius: 18px; }
body.cc-home-page .cc-hero-details { padding: 34px 32px; }
body.cc-home-page .cc-hero-details h2 { font-size: 25px; line-height: 1.22; }
body.cc-home-page .cc-hero-details > p { font-size: 13px; line-height: 1.55; }
body.cc-home-page .cc-guru-pill { font-size: 11px; padding: 7px 10px; }
body.cc-home-page .cc-hero-price strong { font-size: 25px; }
body.cc-home-page .cc-hero-price del { font-size: 11.5px; }
body.cc-home-page .cc-hero-price span { font-size: 11px; }
body.cc-home-page .cc-rating { font-size: 11.5px; }

/* ---------- STATS ---------- */
body.cc-home-page .cc-stats { min-height: 82px; padding: 0 34px; }
body.cc-home-page .cc-stats > div { gap: 13px; }
body.cc-home-page .cc-stats i { width: 37px; height: 37px; font-size: 13px; }
body.cc-home-page .cc-stats strong { font-size: 19px; }
body.cc-home-page .cc-stats small { font-size: 11px; margin-top: 4px; }

/* ---------- SECTION HEADINGS ---------- */
body.cc-home-page .cc-section-head { min-height: 38px; margin-bottom: 16px; }
body.cc-home-page .cc-section-head h2 { font-size: 22px; line-height: 1.2; }
body.cc-home-page .cc-section-head a { font-size: 12px; }
body.cc-home-page .cc-heading-inline > span { font-size: 10.5px; padding: 5px 8px; }
body.cc-home-page .cc-section-head > div > small { font-size: 11px; margin-top: 5px; }

/* ---------- CATEGORIES ---------- */
body.cc-home-page .cc-categories { padding: 22px; }
body.cc-home-page .cc-category-grid { gap: 12px; }
body.cc-home-page .cc-category { min-height: 146px; padding: 14px 10px; border-radius: 13px; }
body.cc-home-page .cc-category-icon { height: 70px; font-size: 42px; }
body.cc-home-page .cc-category strong { font-size: 13px; line-height: 1.3; }
body.cc-home-page .cc-category small { font-size: 10.5px; margin-top: 7px; }

/* ---------- TOP DEALS ---------- */
body.cc-home-page .cc-top-grid {
  grid-template-columns: minmax(0,4.35fr) minmax(300px,.95fr);
  gap: 20px;
  align-items: start;
}
body.cc-home-page .cc-top-panel { padding: 22px 20px 20px; }
body.cc-home-page .cc-deal-grid { gap: 13px; align-items: stretch; }
body.cc-home-page .cc-deal-card { min-height: 392px; padding: 13px; border-radius: 13px; }
body.cc-home-page .cc-card-badges { height: 22px; }
body.cc-home-page .cc-card-badges span { font-size: 9.5px; padding: 4px 6px; }
body.cc-home-page .cc-deal-image { height: 138px; margin: 6px 0 10px; }
body.cc-home-page .cc-deal-card h3 { font-size: 14px; line-height: 1.38; min-height: 54px; }
body.cc-home-page .cc-deal-card > p { font-size: 12px; line-height: 1.5; min-height: 43px; }
body.cc-home-page .cc-store-name { font-size: 11px; margin-top: 6px; }
body.cc-home-page .cc-score-line { font-size: 11px; margin-top: 10px; }
body.cc-home-page .cc-score-line em { font-size: 9.5px; padding: 4px 6px; }
body.cc-home-page .cc-price { margin: 9px 0; gap: 8px; }
body.cc-home-page .cc-price strong { font-size: 18px; }
body.cc-home-page .cc-price del { font-size: 10.5px; }
body.cc-home-page .cc-view-btn { height: 39px; font-size: 12px; border-radius: 8px; }

/* ---------- MOST SEARCHED ---------- */
body.cc-home-page .cc-trending { padding: 20px 18px 15px; border-radius: 16px; }
body.cc-home-page .cc-trending h2 { font-size: 16px; margin-bottom: 9px; }
body.cc-home-page .cc-trend-row {
  grid-template-columns: 31px 34px minmax(0,1fr) 16px;
  min-height: 56px;
  padding: 8px 0;
}
body.cc-home-page .cc-trend-row > b { font-size: 11px; }
body.cc-home-page .cc-trend-row > span { font-size: 15px; }
body.cc-home-page .cc-trend-row strong { font-size: 12.5px; }
body.cc-home-page .cc-trend-row small { font-size: 10px; margin-top: 3px; }
body.cc-home-page .cc-trend-all { font-size: 10.5px; padding-top: 9px; }

/* ---------- NEWEST + BLOG ---------- */
body.cc-home-page .cc-middle-grid { grid-template-columns: minmax(0,3.9fr) minmax(320px,1.15fr); gap: 20px; }
body.cc-home-page .cc-newest-panel,
body.cc-home-page .cc-blog-panel { padding: 22px; }
body.cc-home-page .cc-tabs { gap: 8px; margin: -1px 0 16px; }
body.cc-home-page .cc-tabs span { padding: 7px 11px; font-size: 10.5px; }
body.cc-home-page .cc-offer-grid { gap: 14px; }
body.cc-home-page .cc-offer-card { min-height: 280px; padding: 15px; border-radius: 13px; }
body.cc-home-page .cc-store-line > span { width: 34px; height: 34px; font-size: 11px; }
body.cc-home-page .cc-store-line strong { font-size: 12px; }
body.cc-home-page .cc-store-line small { font-size: 10px; }
body.cc-home-page .cc-offer-main { grid-template-columns: 52px minmax(0,1fr); gap: 11px; margin: 15px 0 5px; }
body.cc-home-page .cc-offer-main > b { min-height: 52px; font-size: 10.5px; }
body.cc-home-page .cc-offer-main h3 { font-size: 13px; line-height: 1.42; }
body.cc-home-page .cc-offer-card .cc-price strong { font-size: 17px; }
body.cc-home-page .cc-offer-card .cc-score-line { font-size: 10px; }
body.cc-home-page .cc-offer-actions a { height: 37px; font-size: 11.5px; }
body.cc-home-page .cc-blog-panel .cc-section-head h2 { font-size: 20px; max-width: 240px; }
body.cc-home-page .cc-blog-item { grid-template-columns: 92px minmax(0,1fr); gap: 13px; padding: 11px 0; }
body.cc-home-page .cc-blog-thumb { height: 62px; font-size: 27px; }
body.cc-home-page .cc-blog-item strong { font-size: 12.5px; line-height: 1.4; }
body.cc-home-page .cc-blog-item small { font-size: 10px; margin-top: 5px; }
body.cc-home-page .cc-blog-empty { font-size: 13px; }

/* ---------- LOWER GRIDS ---------- */
body.cc-home-page .cc-lower-grid { gap: 20px; }
body.cc-home-page .cc-popular-panel,
body.cc-home-page .cc-voted-panel { padding: 21px 22px; }
body.cc-home-page .cc-popular-grid { gap: 14px; }
body.cc-home-page .cc-pop-title { height: 62px; gap: 10px; }
body.cc-home-page .cc-pop-title img,
body.cc-home-page .cc-pop-title > span { width: 70px; height: 52px; }
body.cc-home-page .cc-pop-title strong { font-size: 12px; line-height: 1.35; }
body.cc-home-page .cc-popular-card .cc-price strong { font-size: 17px; }
body.cc-home-page .cc-popular-card > small { font-size: 10.5px; }
body.cc-home-page .cc-popular-card > a { height: 37px; font-size: 11.5px; }
body.cc-home-page .cc-voted-row { min-height: 66px; gap: 11px; padding: 9px 0; }
body.cc-home-page .cc-voted-row > b { font-size: 12px; }
body.cc-home-page .cc-voted-row strong { font-size: 12px; line-height: 1.35; }
body.cc-home-page .cc-voted-row small { font-size: 10px; }
body.cc-home-page .cc-voted-row > span { font-size: 9.5px; }
body.cc-home-page .cc-voted-row > em { font-size: 11.5px; }

/* ---------- NEWSLETTER ---------- */
body.cc-home-page .cc-newsletter {
  min-height: 108px;
  grid-template-columns: 54px minmax(245px,.8fr) minmax(420px,1.65fr) minmax(145px,.45fr);
  gap: 22px;
  padding: 21px 28px;
}
body.cc-home-page .cc-newsletter h2 { font-size: 19px; }
body.cc-home-page .cc-newsletter p { font-size: 12px; line-height: 1.55; }
body.cc-home-page .cc-newsletter input { height: 44px; font-size: 12.5px; }
body.cc-home-page .cc-newsletter button { height: 44px; font-size: 11.5px; }
body.cc-home-page .cc-newsletter form small { top: 49px; font-size: 9.5px; }
body.cc-home-page .cc-news-points { font-size: 10.5px; gap: 5px; }

/* ---------- TRUST / VERIFIED ---------- */
body.cc-home-page .cc-trust-strip { min-height: 82px; padding: 16px 22px; gap: 18px; }
body.cc-home-page .cc-trust-strip strong { font-size: 11.5px; line-height: 1.3; }
body.cc-home-page .cc-trust-strip small { font-size: 10px; }
body.cc-home-page .cc-trust-strip b { width: 31px; height: 31px; font-size: 12px; }
body.cc-home-page .cc-verified { min-height: 174px; padding: 28px 40px; gap: 32px; }
body.cc-home-page .cc-verified > div:first-child > small { font-size: 10.5px; }
body.cc-home-page .cc-verified h2 { font-size: 31px; }
body.cc-home-page .cc-verified h2 span { font-size: 15px; }
body.cc-home-page .cc-verified p { font-size: 11.5px; line-height: 1.55; max-width: 340px; }
body.cc-home-page .cc-verified-features { gap: 18px 30px; }
body.cc-home-page .cc-verified-features b { width: 31px; height: 31px; font-size: 11px; }
body.cc-home-page .cc-verified-features strong { font-size: 11.5px; }
body.cc-home-page .cc-verified-features small { font-size: 9.5px; }

/* ---------- HOME FOOTER: same readable scale as commercial pages ---------- */
body.cc-home-page .cc-footer { padding: 44px 0 24px; }
body.cc-home-page .cc-footer-grid { gap: 40px; }
body.cc-home-page .cc-footer-brand strong { font-size: 17px; }
body.cc-home-page .cc-footer p { font-size: 12px; line-height: 1.65; }
body.cc-home-page .cc-footer small { font-size: 10px; }
body.cc-home-page .cc-footer h3 { font-size: 12px; margin-bottom: 11px; }
body.cc-home-page .cc-footer a:not(.cc-footer-brand) { font-size: 12px; margin: 5px 0; }
body.cc-home-page .cc-footer-subscribe { padding: 18px; }
body.cc-home-page .cc-footer-subscribe p { font-size: 11px; }
body.cc-home-page .cc-footer-subscribe input { height: 40px; font-size: 11.5px; }
body.cc-home-page .cc-footer-subscribe button { height: 40px; font-size: 10.5px; }
body.cc-home-page .cc-footer-subscribe small { font-size: 9.5px; }

/* ---------- LAPTOP / 1366-1599: DO NOT SHRINK TO 7px/8px ---------- */
@media (max-width: 1599px) and (min-width: 1200px) {
  body.cc-home-page { --cc-home-max: 1420px; --cc-home-section-gap: 24px; }
  body.cc-home-page .cc-shell { width: min(calc(100% - 40px), var(--cc-home-max)); }
  body.cc-home-page .cc-header-inner { height: 70px; }
  body.cc-home-page .cc-nav { gap: 20px; }
  body.cc-home-page .cc-nav a { font-size: 13px; }
  body.cc-home-page .cc-header-search { width: 265px; }
  body.cc-home-page .cc-header-search input { font-size: 12px; }
  body.cc-home-page .cc-brand-badge { font-size: 10px; }
  body.cc-home-page .cc-hero { grid-template-columns: minmax(345px,.66fr) minmax(0,1.34fr); gap: 30px; padding-top: 28px; }
  body.cc-home-page .cc-hero-copy h1 { font-size: clamp(50px,4.25vw,64px); }
  body.cc-home-page .cc-hero-copy > p { font-size: 14px; }
  body.cc-home-page .cc-benefits strong { font-size: 11px; }
  body.cc-home-page .cc-benefits small { font-size: 9.5px; }
  body.cc-home-page .cc-hero-carousel { height: 304px; }
  body.cc-home-page .cc-hero-details h2 { font-size: 22px; }
  body.cc-home-page .cc-hero-details > p { font-size: 12px; }
  body.cc-home-page .cc-hero-price strong { font-size: 22px; }
  body.cc-home-page .cc-section-head h2 { font-size: 20px; }
  body.cc-home-page .cc-section-head a { font-size: 11px; }
  body.cc-home-page .cc-category { min-height: 136px; }
  body.cc-home-page .cc-category-icon { height: 64px; font-size: 38px; }
  body.cc-home-page .cc-category strong { font-size: 11.5px; }
  body.cc-home-page .cc-category small { font-size: 9.5px; }
  body.cc-home-page .cc-deal-card { min-height: 365px; padding: 11px; }
  body.cc-home-page .cc-deal-image { height: 122px; }
  body.cc-home-page .cc-deal-card h3 { font-size: 12px; min-height: 48px; }
  body.cc-home-page .cc-deal-card > p { font-size: 10.5px; min-height: 40px; }
  body.cc-home-page .cc-store-name { font-size: 9.5px; }
  body.cc-home-page .cc-score-line { font-size: 9.5px; }
  body.cc-home-page .cc-price strong { font-size: 16px; }
  body.cc-home-page .cc-view-btn { height: 35px; font-size: 10.5px; }
  body.cc-home-page .cc-trending h2 { font-size: 14.5px; }
  body.cc-home-page .cc-trend-row strong { font-size: 11px; }
  body.cc-home-page .cc-trend-row small { font-size: 9px; }
  body.cc-home-page .cc-tabs span { font-size: 9.5px; }
  body.cc-home-page .cc-store-line strong { font-size: 10.5px; }
  body.cc-home-page .cc-store-line small { font-size: 9px; }
  body.cc-home-page .cc-offer-main h3 { font-size: 11.5px; }
  body.cc-home-page .cc-offer-main > b { font-size: 9.5px; }
  body.cc-home-page .cc-offer-actions a { font-size: 10px; }
  body.cc-home-page .cc-blog-item strong { font-size: 11px; }
  body.cc-home-page .cc-blog-item small { font-size: 9px; }
  body.cc-home-page .cc-pop-title strong { font-size: 10.5px; }
  body.cc-home-page .cc-voted-row strong { font-size: 10.5px; }
  body.cc-home-page .cc-voted-row small { font-size: 9px; }
  body.cc-home-page .cc-newsletter h2 { font-size: 17px; }
  body.cc-home-page .cc-newsletter p { font-size: 10.5px; }
  body.cc-home-page .cc-news-points { font-size: 9.5px; }
  body.cc-home-page .cc-trust-strip strong { font-size: 10.5px; }
  body.cc-home-page .cc-trust-strip small { font-size: 9px; }
  body.cc-home-page .cc-verified-features strong { font-size: 10.5px; }
  body.cc-home-page .cc-verified-features small { font-size: 9px; }
  body.cc-home-page .cc-footer p { font-size: 11px; }
  body.cc-home-page .cc-footer a:not(.cc-footer-brand) { font-size: 11px; }
}

/* ---------- TABLET ---------- */
@media (max-width: 1199px) {
  body.cc-home-page .cc-shell { width: min(calc(100% - 34px), 1040px); }
  body.cc-home-page .cc-hero-copy > p { font-size: 15px; }
  body.cc-home-page .cc-benefits strong { font-size: 11.5px; }
  body.cc-home-page .cc-benefits small { font-size: 9.5px; }
  body.cc-home-page .cc-section-head h2 { font-size: 20px; }
  body.cc-home-page .cc-category strong { font-size: 12px; }
  body.cc-home-page .cc-category small { font-size: 10px; }
  body.cc-home-page .cc-trend-row strong { font-size: 11.5px; }
  body.cc-home-page .cc-trend-row small { font-size: 9.5px; }
  body.cc-home-page .cc-footer p,
  body.cc-home-page .cc-footer a:not(.cc-footer-brand) { font-size: 11.5px; }
}

/* ---------- MOBILE ---------- */
@media (max-width: 767px) {
  body.cc-home-page { font-size: 15px; --cc-home-section-gap: 18px; }
  body.cc-home-page .cc-shell { width: min(calc(100% - 28px), 720px); }
  body.cc-home-page .cc-brand-name { font-size: 15px; }
  body.cc-home-page .cc-hero-copy h1 { font-size: clamp(40px,12vw,54px); }
  body.cc-home-page .cc-hero-copy > p { font-size: 14px; }
  body.cc-home-page .cc-benefits strong { font-size: 11px; }
  body.cc-home-page .cc-benefits small { font-size: 9.5px; }
  body.cc-home-page .cc-section-head h2 { font-size: 18px; }
  body.cc-home-page .cc-section-head a { font-size: 10.5px; }
  body.cc-home-page .cc-category strong { font-size: 12px; }
  body.cc-home-page .cc-category small { font-size: 10px; }
  body.cc-home-page .cc-deal-card h3 { font-size: 12px; }
  body.cc-home-page .cc-deal-card > p { font-size: 10.5px; }
  body.cc-home-page .cc-store-name { font-size: 9.5px; }
  body.cc-home-page .cc-price strong { font-size: 16px; }
  body.cc-home-page .cc-view-btn { font-size: 10.5px; }
  body.cc-home-page .cc-tabs span { font-size: 9.5px; }
  body.cc-home-page .cc-offer-main h3 { font-size: 11.5px; }
  body.cc-home-page .cc-offer-actions a { font-size: 10px; }
  body.cc-home-page .cc-blog-item strong { font-size: 11.5px; }
  body.cc-home-page .cc-blog-item small { font-size: 9.5px; }
  body.cc-home-page .cc-newsletter p { font-size: 11px; }
  body.cc-home-page .cc-trust-strip strong { font-size: 10.5px; }
  body.cc-home-page .cc-trust-strip small { font-size: 9px; }
  body.cc-home-page .cc-verified p { font-size: 11px; }
  body.cc-home-page .cc-verified-features strong { font-size: 10.5px; }
  body.cc-home-page .cc-verified-features small { font-size: 9px; }
  body.cc-home-page .cc-footer p,
  body.cc-home-page .cc-footer a:not(.cc-footer-brand) { font-size: 11.5px; }
  body.cc-home-page .cc-footer h3 { font-size: 12px; }
}