/* ============================================================
   BestDealz International — Class A/B/C Landing + Deals + Ranking
   Sprint 5. Designed to feel native to the homepage:
   - Blue #003c8c + orange #f08c00
   - Same dx-products grid, same product card partial
   ============================================================ */

/* ── Class landing hero (per-class colour theming) ────────── */
.cl-hero{
  position:relative;
  padding:46px 0 38px;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.cl-hero::before{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 90% 30%, rgba(255,255,255,.08) 0%, transparent 60%),
    radial-gradient(circle at 10% 80%, rgba(255,255,255,.06) 0%, transparent 50%);
  pointer-events:none;
}
.cl-hero.a{ background:linear-gradient(135deg,#15803d 0%,#166534 60%,#14532d 100%); color:#fff; }
.cl-hero.b{ background:linear-gradient(135deg,#1e40af 0%,#1e3a8a 60%,#172554 100%); color:#fff; }
.cl-hero.c{ background:linear-gradient(135deg,#d97700 0%,#b45309 60%,#92400e 100%); color:#fff; }

.cl-hero .bd-container{ position:relative; z-index:1; }
.cl-hero-grid{
  display:grid;
  grid-template-columns: 1.25fr 1fr;
  gap:38px;
  align-items:center;
}
.cl-class-badge{
  display:inline-block;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.28);
  color:#fff;
  font-weight:900; font-size:11.5px;
  letter-spacing:1.2px;
  padding:5px 13px;
  border-radius:5px;
  margin-bottom:14px;
}
.cl-hero h1{
  font-size:42px;
  font-weight:900;
  line-height:1.08;
  letter-spacing:-.02em;
  margin:0 0 14px;
  color:#fff;
}
.cl-hero h1 .accent{ color:#ffd479; }
.cl-hero .lede{
  font-size:16px;
  color:rgba(255,255,255,.88);
  line-height:1.55;
  margin:0 0 22px;
  max-width:540px;
}
.cl-hero-stats{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
  max-width:520px;
}
.cl-hero-stat{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  border-radius:8px;
  padding:14px;
  text-align:center;
}
.cl-hero-stat .n{
  font-size:22px; font-weight:900; color:#fff; line-height:1;
}
.cl-hero-stat .l{
  font-size:11px; color:rgba(255,255,255,.7);
  text-transform:uppercase; letter-spacing:.5px;
  margin-top:4px;
}

.cl-hero-cta{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--bd-orange); color:#fff;
  padding:13px 26px; border-radius:6px;
  font-weight:700; font-size:14px; text-decoration:none;
  transition:background .15s, transform .1s;
  margin-right:8px;
}
.cl-hero-cta:hover{ background:#d97700; }
.cl-hero-cta-ghost{
  display:inline-flex; align-items:center; gap:6px;
  background:rgba(255,255,255,.08); color:#fff;
  border:1px solid rgba(255,255,255,.3);
  padding:13px 26px; border-radius:6px;
  font-weight:700; font-size:14px; text-decoration:none;
}
.cl-hero-cta-ghost:hover{ background:rgba(255,255,255,.16); }

.cl-hero-visual{
  position:relative; height:260px;
  display:flex; align-items:center; justify-content:center;
}
.cl-hero-icon{
  width:200px; height:200px;
  background:rgba(255,255,255,.08);
  border:2px solid rgba(255,255,255,.18);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.cl-hero-icon svg{
  width:96px; height:96px;
  color:rgba(255,255,255,.95);
}
.cl-hero-icon::after{
  content:''; position:absolute; inset:-12px;
  border-radius:50%;
  border:2px dashed rgba(255,255,255,.2);
  animation:cl-spin 30s linear infinite;
}
@keyframes cl-spin{ to{ transform:rotate(360deg); } }

/* ── Promise strip ───────────────────────────────────────── */
.cl-promise{
  background:#fff;
  border-bottom:1px solid var(--line);
  padding:18px 0;
}
.cl-promise-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:18px;
}
.cl-promise-item{
  display:flex; gap:10px; align-items:flex-start;
  font-size:12.5px;
}
.cl-promise-item .ic{
  flex-shrink:0;
  width:36px; height:36px;
  background:#fff8ee;
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
}
.cl-promise-item .ic svg{ width:18px; height:18px; color:var(--bd-orange); }
.cl-promise-item strong{
  display:block;
  font-size:13px;
  color:var(--ink-900);
  font-weight:700;
  margin-bottom:1px;
}
.cl-promise-item span{ color:var(--ink-700); line-height:1.45; }

/* ── Section heads ───────────────────────────────────────── */
.cl-sec-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:18px; flex-wrap:wrap;
  margin:32px 0 16px;
}
.cl-sec-head h2{
  font-size:22px; font-weight:800; color:var(--ink-900);
  margin:0 0 4px; letter-spacing:-.01em;
}
.cl-sec-head h2 .accent{ color:var(--bd-orange); }
.cl-sec-head .sub{
  font-size:13px; color:var(--ink-500); margin:0;
}
.cl-sec-head .view-all{
  font-size:13px; font-weight:700; color:var(--bd-orange); text-decoration:none;
  display:inline-flex; align-items:center; gap:4px;
  white-space:nowrap;
}
.cl-sec-head .view-all:hover{ text-decoration:underline; }

/* ── Industry/category tile rail ───────────────────────── */
.cl-cat-rail{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:12px;
  margin-bottom:24px;
}
.cl-cat-tile{
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:18px 14px;
  text-align:center;
  text-decoration:none;
  color:var(--ink-700);
  transition:transform .15s, box-shadow .15s, border-color .15s;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.cl-cat-tile:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 14px rgba(0,0,0,.06);
  border-color:var(--bd-orange);
}
.cl-cat-tile .ic{
  width:50px; height:50px;
  background:linear-gradient(135deg, #fff8ee, #ffe6c4);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.cl-cat-tile .ic svg{ width:24px; height:24px; color:var(--bd-orange); }
.cl-cat-tile h4{
  font-size:13px; font-weight:700; color:var(--ink-900); margin:0;
}
.cl-cat-tile .count{
  font-size:11px; color:var(--ink-500);
}

/* ── How class works step ─────────────────────────────── */
.cl-steps{
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:22px;
  margin:28px 0;
}
.cl-steps h3{
  font-size:17px; font-weight:800; color:var(--ink-900);
  margin:0 0 16px; text-align:center;
}
.cl-steps-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
}
.cl-step{
  text-align:center;
  padding:14px;
}
.cl-step .n{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px;
  background:linear-gradient(135deg, var(--bd-blue), var(--bd-orange));
  color:#fff;
  font-size:16px; font-weight:900;
  border-radius:50%; margin-bottom:10px;
}
.cl-step h4{
  font-size:13.5px; font-weight:700; color:var(--ink-900);
  margin:0 0 4px;
}
.cl-step p{
  font-size:12px; color:var(--ink-700);
  line-height:1.5; margin:0;
}

/* ── Today's Deals ─────────────────────────────────────── */
.dl-hero{
  background:linear-gradient(135deg,#dc2626 0%, #b91c1c 50%, #7f1d1d 100%);
  color:#fff;
  padding:42px 0;
  border-bottom:4px solid var(--bd-orange);
  position:relative;
  overflow:hidden;
}
.dl-hero::before{
  content:'';
  position:absolute;
  top:-50%; right:-10%;
  width:400px; height:400px;
  background:radial-gradient(circle, rgba(255,212,121,.18) 0%, transparent 70%);
}
.dl-hero .bd-container{ position:relative; z-index:1; }
.dl-hero-grid{
  display:grid;
  grid-template-columns:1.4fr 1fr;
  gap:30px;
  align-items:center;
}
.dl-hero h1{
  font-size:42px; font-weight:900;
  letter-spacing:-.02em; line-height:1.08;
  margin:0 0 12px;
}
.dl-hero h1 .accent{ color:#ffd479; }
.dl-hero .lede{
  font-size:16px; color:rgba(255,255,255,.88);
  line-height:1.55; margin:0 0 18px;
  max-width:520px;
}
.dl-flash{
  display:inline-flex; align-items:center; gap:6px;
  background:#fbbf24; color:#7c2d12;
  font-weight:900; font-size:12.5px;
  padding:6px 14px; border-radius:999px;
  letter-spacing:.5px; text-transform:uppercase;
  margin-bottom:14px;
}
.dl-flash svg{ width:12px; height:12px; }
.dl-countdown{
  display:flex; gap:6px; flex-wrap:wrap;
  margin-top:6px;
}
.dl-countdown-box{
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.2);
  border-radius:8px;
  padding:10px 14px;
  min-width:66px;
  text-align:center;
}
.dl-countdown-box .n{
  font-size:22px; font-weight:900; color:#fff;
  line-height:1; font-variant-numeric:tabular-nums;
}
.dl-countdown-box .l{
  font-size:10px; color:rgba(255,255,255,.65);
  text-transform:uppercase; letter-spacing:.5px;
  margin-top:4px;
}

.dl-stats-card{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  border-radius:12px;
  padding:22px;
  backdrop-filter:blur(4px);
}
.dl-stats-card .row{
  display:flex; justify-content:space-between;
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,.1);
  font-size:13.5px;
}
.dl-stats-card .row:last-child{ border-bottom:0; }
.dl-stats-card .row .label{ color:rgba(255,255,255,.75); }
.dl-stats-card .row .val{ color:#fff; font-weight:700; }
.dl-stats-card .row .val .pct{ color:#ffd479; }

/* ── Deals filter chips ───────────────────────────────── */
.dl-chips{
  display:flex; gap:8px; flex-wrap:wrap;
  margin-bottom:20px;
}
.dl-chip{
  background:#fff;
  border:1px solid var(--line);
  color:var(--ink-700);
  font-size:12.5px; font-weight:600;
  padding:8px 16px;
  border-radius:999px;
  cursor:pointer;
  transition:background .15s, border-color .15s, color .15s;
  text-decoration:none;
}
.dl-chip:hover{ border-color:var(--bd-orange); color:var(--bd-orange); }
.dl-chip.active{
  background:var(--bd-orange);
  border-color:var(--bd-orange);
  color:#fff;
}
.dl-chip .badge{
  display:inline-block;
  background:rgba(0,0,0,.18);
  font-size:11px; font-weight:700;
  padding:1px 7px; border-radius:999px;
  margin-left:4px;
}
.dl-chip.active .badge{ background:rgba(255,255,255,.25); }

/* ── Discount banner above product ───────────────────── */
.dl-discount-strip{
  background:#fef3c7;
  border-left:3px solid #f59e0b;
  color:#92400e;
  padding:10px 14px;
  border-radius:6px;
  font-size:13px; font-weight:600;
  margin-bottom:18px;
  display:flex; align-items:center; gap:8px;
}
.dl-discount-strip svg{ width:16px; height:16px; }

/* ── Top Ranking ──────────────────────────────────────── */
.tr-hero{
  background:linear-gradient(135deg, var(--bd-blue), #001e5c);
  color:#fff;
  padding:42px 0 36px;
  border-bottom:4px solid var(--bd-orange);
  position:relative;
  overflow:hidden;
}
.tr-hero::before{
  content:'🏆';
  position:absolute;
  top:50%; right:8%; transform:translateY(-50%);
  font-size:280px;
  opacity:.06;
  filter:grayscale(1);
}
.tr-hero .bd-container{ position:relative; z-index:1; }
.tr-hero h1{
  font-size:36px; font-weight:900;
  letter-spacing:-.02em; line-height:1.1;
  margin:0 0 10px;
}
.tr-hero h1 .accent{ color:#ffd479; }
.tr-hero .lede{
  font-size:15.5px; color:rgba(255,255,255,.88);
  max-width:680px; line-height:1.55;
  margin:0 0 18px;
}
.tr-hero-tabs{
  display:flex; gap:6px; flex-wrap:wrap;
  margin-top:10px;
}
.tr-hero-tabs a{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  color:#fff;
  font-size:13px; font-weight:600;
  padding:8px 18px; border-radius:999px;
  text-decoration:none;
}
.tr-hero-tabs a:hover{ background:rgba(255,255,255,.16); }
.tr-hero-tabs a.active{
  background:var(--bd-orange);
  border-color:var(--bd-orange);
}

/* ── Ranked product list (numbered) ──────────────────── */
.tr-ranked{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:14px;
  margin-bottom:28px;
}
.tr-ranked-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px;
  display:flex; gap:14px; align-items:center;
  text-decoration:none;
  transition:transform .15s, box-shadow .15s, border-color .15s;
  position:relative;
  overflow:hidden;
}
.tr-ranked-card:hover{
  transform:translateY(-2px);
  border-color:var(--bd-orange);
  box-shadow:0 4px 14px rgba(0,0,0,.06);
}
.tr-rank-num{
  flex-shrink:0;
  width:38px; height:38px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:900;
  color:#fff;
  background:linear-gradient(135deg, #9ca3af, #6b7280);
}
.tr-ranked-card.gold .tr-rank-num{
  background:linear-gradient(135deg, #fbbf24, #d97706);
  box-shadow:0 0 12px rgba(251,191,36,.4);
}
.tr-ranked-card.silver .tr-rank-num{
  background:linear-gradient(135deg, #d1d5db, #9ca3af);
}
.tr-ranked-card.bronze .tr-rank-num{
  background:linear-gradient(135deg, #f97316, #c2410c);
}
.tr-ranked-thumb{
  width:72px; height:72px;
  border-radius:6px;
  border:1px solid var(--line);
  object-fit:cover;
  flex-shrink:0;
  background:#fafafa;
}
.tr-ranked-info{ flex:1; min-width:0; }
.tr-ranked-info h4{
  font-size:13.5px; font-weight:600; color:var(--ink-900);
  margin:0 0 4px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; line-height:1.35;
}
.tr-ranked-info .meta{
  font-size:11.5px; color:var(--ink-500);
  display:flex; gap:8px; flex-wrap:wrap; align-items:center;
}
.tr-ranked-info .meta .stars{ color:#fbbf24; font-weight:700; }
.tr-ranked-info .price{
  margin-top:6px;
  font-size:15px; font-weight:800; color:var(--bd-orange);
}
.tr-ranked-info .price .from{
  font-size:11px; color:var(--ink-500); font-weight:500;
}

/* ── Category-of-ranking strip ───────────────────────── */
.tr-cat-strip{
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:18px 22px;
  margin-bottom:24px;
}
.tr-cat-strip h3{
  font-size:15px; font-weight:800;
  color:var(--ink-900); margin:0 0 12px;
}
.tr-cat-strip-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  gap:10px;
}
.tr-cat-link{
  display:flex; justify-content:space-between; align-items:center;
  background:#fafafa;
  border-radius:6px;
  padding:9px 12px;
  font-size:12.5px;
  color:var(--ink-700);
  text-decoration:none;
  transition:background .15s, color .15s;
}
.tr-cat-link:hover{
  background:#fff8ee; color:var(--bd-orange);
}
.tr-cat-link .n{
  font-size:11px; color:var(--ink-500); font-weight:700;
}

/* ── Promo banner inside class page ──────────────────── */
.cl-promo{
  background:linear-gradient(135deg, var(--bd-blue), #001e5c);
  color:#fff;
  border-radius:12px;
  padding:30px 32px;
  margin:28px 0;
  display:flex; gap:22px; align-items:center; flex-wrap:wrap;
}
.cl-promo .info{ flex:1; min-width:240px; }
.cl-promo h3{
  font-size:20px; font-weight:900;
  margin:0 0 6px;
}
.cl-promo h3 .accent{ color:#ffd479; }
.cl-promo p{
  font-size:14px; color:rgba(255,255,255,.85);
  margin:0; max-width:600px; line-height:1.5;
}
.cl-promo .actions{ display:flex; gap:8px; flex-wrap:wrap; }
.cl-promo .actions a{
  background:var(--bd-orange); color:#fff;
  padding:11px 22px; border-radius:6px;
  font-size:13.5px; font-weight:700; text-decoration:none;
}
.cl-promo .actions a.ghost{
  background:transparent; border:1px solid rgba(255,255,255,.4);
}
.cl-promo .actions a:hover{ filter:brightness(1.1); }

/* ── Trust mini row ──────────────────────────────────── */
.cl-trust-row{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:14px;
  margin:28px 0;
}
.cl-trust-tile{
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:18px;
  text-align:center;
}
.cl-trust-tile .ic{
  width:42px; height:42px;
  margin:0 auto 10px;
  background:#fff8ee;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
}
.cl-trust-tile .ic svg{ width:20px; height:20px; color:var(--bd-orange); }
.cl-trust-tile h4{
  font-size:13.5px; font-weight:800; color:var(--ink-900);
  margin:0 0 4px;
}
.cl-trust-tile p{
  font-size:12px; color:var(--ink-700);
  margin:0; line-height:1.5;
}

/* ── Mobile responsive ─────────────────────────────────── */
@media (max-width:900px){
  .cl-hero-grid{ grid-template-columns:1fr; }
  .cl-hero-visual{ display:none; }
  .cl-hero h1{ font-size:32px; }
  .cl-promise-grid{ grid-template-columns:repeat(2, 1fr); }
  .cl-steps-grid{ grid-template-columns:repeat(2, 1fr); }
  .cl-trust-row{ grid-template-columns:repeat(2, 1fr); }
  .dl-hero-grid{ grid-template-columns:1fr; }
  .dl-hero h1{ font-size:30px; }
  .tr-hero h1{ font-size:28px; }
  .tr-ranked{ grid-template-columns:1fr; }
  .cl-promo{ padding:22px; }
}
@media (max-width:600px){
  .cl-hero{ padding:30px 0; }
  .cl-hero h1{ font-size:24px; }
  .cl-hero .lede{ font-size:14px; }
  .cl-hero-stats{ grid-template-columns:repeat(3, 1fr); gap:8px; }
  .cl-hero-stat{ padding:10px; }
  .cl-hero-stat .n{ font-size:18px; }
  .cl-hero-cta, .cl-hero-cta-ghost{ width:100%; justify-content:center; margin-bottom:6px; }
  .cl-promise-grid{ grid-template-columns:1fr; }
  .cl-steps-grid{ grid-template-columns:1fr; }
  .cl-trust-row{ grid-template-columns:1fr; }
  .cl-sec-head{ flex-direction:column; align-items:flex-start; }
  .dl-hero{ padding:30px 0; }
  .dl-hero h1{ font-size:24px; }
  .dl-countdown-box{ min-width:54px; padding:8px 10px; }
  .dl-countdown-box .n{ font-size:18px; }
  .tr-hero h1{ font-size:22px; }
  .tr-hero-tabs a{ padding:7px 14px; font-size:12px; }
  .tr-ranked-card{ padding:10px; }
  .tr-ranked-thumb{ width:60px; height:60px; }
  .cl-promo{ flex-direction:column; align-items:flex-start; }
  .cl-promo .actions{ width:100%; }
  .cl-promo .actions a{ flex:1; text-align:center; }
}