:root{--ink:#101828;--muted:#667085;--line:#e6e8ee;--bg:#f7f8fa;--card:#fff;--red:#e11d48;--red2:#be123c;--green:#087443}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial}
a{color:inherit;text-decoration:none}
.wrap{max-width:1180px;margin:auto;padding:0 22px}
.notice{height:34px;background:#111827;color:#fff;display:grid;place-items:center;font-size:12px}

header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.nav{height:72px;display:flex;align-items:center;gap:28px}
.brand{font-size:27px;font-weight:950;letter-spacing:-1.5px}
.brand span{color:var(--red)}
nav{display:flex;gap:20px;font-weight:750;font-size:14px}
nav a:hover,.heading>a,.links a:hover{color:var(--red)}
.search{margin-left:auto;border:1px solid #d9dde6;border-radius:11px;height:42px;display:flex;align-items:center;padding:0 11px;width:280px;background:#fafafa}
.search input{border:0;outline:0;background:transparent;width:100%;padding-left:7px}
.hamb{display:none;background:none;border:0;font-size:24px}

.hero{background:linear-gradient(135deg,#101828,#2b0b19 65%,#4a061b);color:#fff;padding:70px 0}
.hero-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:50px;align-items:center}
.eyebrow{color:#fb7185;font-size:12px;font-weight:900;letter-spacing:1.5px}
.hero h1{font-size:clamp(42px,6vw,70px);line-height:1;letter-spacing:-3px;margin:14px 0 20px}
.hero p{font-size:18px;color:#d0d5dd;max-width:620px}
.actions{display:flex;gap:10px;margin-top:28px;flex-wrap:wrap}
.primary,.secondary{display:inline-flex;justify-content:center;align-items:center;border-radius:11px;padding:12px 18px;font-weight:850}
.primary{background:var(--red);color:#fff}
.primary:hover{background:var(--red2)}
.secondary{background:#fff;color:#111827}
.full{width:100%;margin-top:16px}
.hero-deal{background:#fff;color:var(--ink);border-radius:23px;padding:23px;box-shadow:0 25px 70px #0005}
.pill{background:#ffe4e6;color:#9f1239;font-size:11px;font-weight:900;padding:6px 9px;border-radius:7px}
.bigemoji{text-align:center;font-size:75px;padding:20px}
.hero-deal h3{margin:0;font-size:18px}
.hero-price{font-size:30px;font-weight:950;margin-top:8px}
.hero-price s{font-size:13px;color:#98a2b3;margin-left:7px}
.save{color:var(--green);font-size:13px}
.hero-deal small{display:block;color:#98a2b3;margin-top:10px}

section{padding:52px 0}
.white{background:#fff}
.heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:22px}
.heading h2{margin:0;font-size:28px;letter-spacing:-1px}
.heading p{margin:4px 0 0;color:var(--muted)}
.heading>a{font-weight:850}

.products{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.product{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:.18s}
.product:hover{transform:translateY(-3px);box-shadow:0 12px 30px #10182812}

.pic{
  height:175px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#f8fafc,#e9eef5);
  font-size:68px;
  border-bottom:1px solid #edf0f3;
  text-shadow:0 6px 18px rgba(0,0,0,.08);
}

.body{
  padding:16px;
  display:flex;
  flex-direction:column;
  min-height:278px;
}

.tag{font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:#98a2b3;font-weight:850}
.body h3{font-size:16px;line-height:1.3;margin:7px 0}
.rating{font-size:13px}

.price{
  font-size:22px;
  font-weight:950;
  margin:10px 0;
  margin-top:auto;
}

.price s{font-size:12px;color:#98a2b3;font-weight:500;margin-left:5px}
.check{display:block;background:var(--red);color:#fff;text-align:center;padding:10px;border-radius:9px;font-weight:850}

.categories{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.categories a{background:#fff;border:1px solid var(--line);border-radius:15px;padding:20px 10px;text-align:center;font-size:27px}
.categories b{display:block;font-size:13px;margin-top:8px}
.categories a:hover{border-color:#fda4af;background:#fff7f8}

.guides{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.guides article{border:1px solid var(--line);border-radius:18px;padding:23px}
.guides i{font-style:normal;font-size:29px}
.guides h3{margin:12px 0 5px}
.guides p{color:var(--muted);margin:0 0 13px}
.guides a{color:var(--red);font-weight:850}

.newsletter{background:#111827;color:#fff;border-radius:23px;padding:34px;display:flex;justify-content:space-between;align-items:center;gap:25px}
.newsletter h2{margin:0}
.newsletter p{color:#cbd5e1;margin:4px 0 0}
.newsletter form{display:flex;gap:8px}
.newsletter input{height:44px;border:0;border-radius:9px;padding:0 12px;min-width:240px}
.newsletter button{border:0;border-radius:9px;background:var(--red);color:#fff;font-weight:850;padding:0 16px}

.disclosure{background:#fff1f2;border-top:1px solid #fecdd3;border-bottom:1px solid #fecdd3;padding:17px 0;font-size:13px;color:#4a1820}

.footer{padding-top:35px;padding-bottom:20px;display:flex;justify-content:space-between}
.footer p{color:var(--muted);margin:5px 0}
.links{display:flex;gap:18px;align-items:center;font-size:13px;color:var(--muted)}
.copyright{padding-bottom:30px;color:#98a2b3;font-size:12px}

@media(max-width:900px){
  nav{display:none}
  .search{width:230px}
  .hamb{display:block}
  .hero-grid{grid-template-columns:1fr}
  .products{grid-template-columns:repeat(2,1fr)}
  .categories{grid-template-columns:repeat(3,1fr)}
}

@media(max-width:600px){
  .search{display:none}
  .hero{padding:50px 0}
  .hero h1{letter-spacing:-2px}
  .products,.guides{grid-template-columns:1fr}
  .categories{grid-template-columns:repeat(2,1fr)}
  .newsletter{display:block}
  .newsletter form{margin-top:18px}
  .newsletter input{width:100%;min-width:0}
  .footer{display:block}
  .links{margin-top:20px;flex-wrap:wrap}
}

/* Buying guide header */

.site-header{
  background:#fff;
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  z-index:10;
}

.site-header .container{
  max-width:1320px;
  height:72px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  align-items:center;
  gap:32px;
}

.site-header .logo{
  font-size:30px;
  font-weight:900;
  color:var(--ink);
  text-decoration:none;
  letter-spacing:-1.5px;
}

.site-header .logo span{
  color:var(--red);
}

.site-header nav{
  display:flex;
  align-items:center;
  gap:28px;
}

.site-header nav a{
  color:var(--ink);
  text-decoration:none;
  font-weight:800;
}

.site-header nav a:hover{
  color:var(--red);
}

@media(max-width:700px){
  .site-header .container{
    height:auto;
    padding:16px 20px;
    flex-direction:column;
    align-items:flex-start;
    gap:12px;
  }

  .site-header nav{
    gap:16px;
    flex-wrap:wrap;
  }
}
/* Savings display */

.savings {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 8px;
  min-height: 28px;
  font-size: 14px;
}

.save-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #e8f7ee;
  color: #137333;
  border: 1px solid #b7e2c5;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.save-amount {
  font-weight: 700;
  white-space: nowrap;
}