@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@500;600;700;800&display=swap');

/* ============================================================
   COMPARADORSILLAS.ES — Premium CSS
   Design: Stripe-inspired + Stitch design system enhancements
   Colors: Navy #1a4d8f + Amazon Orange #FF9900
   Fonts: Hanken Grotesk (headings) + Inter (body) + JetBrains Mono (mono)
   ============================================================ */

/* ===== Reset & Base ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* Brand Colors */
  --c-primary:#1a4d8f;
  --c-primary-dark:#0f3a6e;
  --c-primary-light:#2d6dbd;
  --c-primary-50:#eef4fb;
  --c-primary-100:#d6e4f4;
  --c-accent:#E8A838;
  --c-accent-dark:#D4952E;
  --c-accent-light:#F4D08A;
  --c-accent-50:#fdf6e9;

  /* Neutrals */
  --c-bg:#F7F8FA;
  --c-bg-card:#FFFFFF;
  --c-text:#0F172A;
  --c-text-muted:#475569;
  --c-text-subtle:#94A3B8;
  --c-border:#E2E8F0;
  --c-border-strong:#CBD5E1;

  /* Semantic */
  --c-success:#10B981;
  --c-success-light:#ECFDF5;
  --c-danger:#EF4444;
  --c-danger-light:#FEF2F2;
  --c-warning:#F59E0B;
  --c-star:#F5A623;

  /* Radii */
  --radius-sm:8px;
  --radius-md:10px;
  --radius-lg:16px;
  --radius-xl:20px;
  --radius-pill:9999px;

  /* Multi-layer Shadows (Stripe-style) */
  --shadow-xs:0 1px 2px rgba(0,0,0,.04);
  --shadow-sm:0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --shadow-md:0 4px 6px -1px rgba(0,0,0,.07),0 2px 4px -2px rgba(0,0,0,.05);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,.08),0 4px 6px -4px rgba(0,0,0,.05);
  --shadow-xl:0 20px 25px -5px rgba(0,0,0,.08),0 8px 10px -6px rgba(0,0,0,.04);
  --shadow-2xl:0 25px 50px -12px rgba(15,23,42,.18);
  --shadow-primary:0 4px 14px rgba(26,77,143,.25);
  --shadow-accent:0 4px 14px rgba(232,168,56,.3);

  /* Stitch: Amazon Orange CTA */
  --c-amazon:#FF9900;
  --c-amazon-dark:#E88B00;

  /* Typography */
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-heading:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --font-mono:'JetBrains Mono','SF Mono','Fira Code','Fira Mono',Menlo,monospace;

  /* Layout */
  --max-w:1200px;
  --transition:200ms cubic-bezier(.4,0,.2,1);
  --transition-slow:350ms cubic-bezier(.16,1,.3,1);
}

/* ===== Base Typography ===== */
html{
  font-size:16px;
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  font-family:var(--font-body);
  background:var(--c-bg);
  color:var(--c-text);
  line-height:1.6;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading);
  font-weight:700;
  line-height:1.25;
  letter-spacing:-0.025em;
  color:var(--c-text);
}

h1{font-weight:800;letter-spacing:-0.035em}
h2{font-weight:700;letter-spacing:-0.03em}
h3{font-weight:700;letter-spacing:-0.02em}
h4{font-weight:600;letter-spacing:-0.01em}

p{color:var(--c-text);line-height:1.7}

a{
  color:var(--c-primary);
  text-decoration:none;
  transition:color var(--transition);
}
a:hover{color:var(--c-primary-dark)}

img{max-width:100%;height:auto;display:block}

strong{font-weight:600}

::selection{
  background:var(--c-primary);
  color:#fff;
}

/* ===== Container ===== */
.container{
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 1.5rem;
}

/* ===== Section ===== */
.section{padding:4rem 0}
.section--alt{background:var(--c-bg)}

@media(max-width:768px){
  .section{padding:2.5rem 0}
}

/* ===== Navbar ===== */
.navbar{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,.85);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom:1px solid var(--c-border);
  transition:box-shadow var(--transition);
}
.navbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:64px;
}
.navbar__logo{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-weight:800;
  font-size:1.2rem;
  color:var(--c-primary);
  text-decoration:none;
  letter-spacing:-0.02em;
  transition:opacity var(--transition);
}
.navbar__logo:hover{opacity:.8}
.navbar__logo svg{width:32px;height:32px;flex-shrink:0}
.navbar__links{
  display:flex;
  align-items:center;
  gap:2rem;
  list-style:none;
}
.navbar__links a{
  color:var(--c-text);
  font-weight:500;
  font-size:.9rem;
  text-decoration:none;
  transition:color var(--transition);
  position:relative;
}
.navbar__links a::after{
  content:'';
  position:absolute;
  bottom:-4px;
  left:0;
  right:0;
  height:2px;
  background:var(--c-primary);
  border-radius:1px;
  transform:scaleX(0);
  transition:transform var(--transition);
}
.navbar__links a:hover{color:var(--c-primary)}
.navbar__links a:hover::after{transform:scaleX(1)}
.navbar__toggle{
  display:none;
  background:none;
  border:1px solid var(--c-border);
  border-radius:var(--radius-sm);
  font-size:1.25rem;
  cursor:pointer;
  color:var(--c-primary);
  padding:.25rem .5rem;
  line-height:1;
}

@media(max-width:768px){
  .navbar__links{
    display:none;
    position:absolute;
    top:64px;
    left:0;
    right:0;
    flex-direction:column;
    background:#fff;
    padding:1rem 1.5rem;
    border-bottom:1px solid var(--c-border);
    gap:1rem;
    box-shadow:var(--shadow-lg);
  }
  .navbar__links.is-open{display:flex}
  .navbar__links a::after{display:none}
  .navbar__toggle{display:block}
}

/* ===== Hero ===== */
.hero{
  background:linear-gradient(135deg,var(--c-primary) 0%,var(--c-primary-dark) 100%);
  color:#fff;
  padding:4.5rem 0 5.5rem;
  text-align:center;
  position:relative;
  overflow:hidden;
}
.hero::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background-image:
    radial-gradient(ellipse at top left,rgba(255,255,255,.08),transparent 50%),
    radial-gradient(ellipse at bottom right,rgba(232,168,56,.06),transparent 50%);
  pointer-events:none;
}
.hero::after{
  content:'';
  position:absolute;
  bottom:0;left:0;right:0;
  height:64px;
  background:var(--c-bg);
  clip-path:polygon(0 100%,100% 100%,100% 0,0 64px);
}
.hero .container{position:relative;z-index:1}
.hero__eyebrow{
  display:inline-block;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  padding:.4rem 1rem;
  border-radius:var(--radius-pill);
  font-size:.85rem;
  font-weight:500;
  margin-bottom:1.25rem;
  letter-spacing:.01em;
  color:rgba(255,255,255,.95);
  backdrop-filter:blur(8px);
}
.hero__title{
  font-size:clamp(1.8rem,4.5vw,3.2rem);
  font-weight:800;
  margin-bottom:1rem;
  letter-spacing:-0.035em;
  line-height:1.15;
  color:#fff;
}
.hero__subtitle{
  font-size:clamp(1rem,2vw,1.2rem);
  opacity:.85;
  max-width:620px;
  margin:0 auto 2.5rem;
  line-height:1.6;
  color:rgba(255,255,255,.9);
}
.hero__search{
  display:flex;
  max-width:520px;
  margin:0 auto;
  gap:.5rem;
  background:rgba(255,255,255,.1);
  padding:.4rem;
  border-radius:var(--radius-pill);
  border:1px solid rgba(255,255,255,.15);
}
.hero__search input{
  flex:1;
  padding:.75rem 1.25rem;
  border:none;
  border-radius:var(--radius-pill);
  font-size:1rem;
  font-family:inherit;
  outline:none;
  background:#fff;
  color:var(--c-text);
}
.hero__search input::placeholder{color:var(--c-text-subtle)}
.hero__search button{
  padding:.75rem 1.75rem;
  background:var(--c-accent);
  color:var(--c-primary-dark);
  border:none;
  border-radius:var(--radius-pill);
  font-weight:700;
  font-size:.9rem;
  cursor:pointer;
  transition:all var(--transition);
  white-space:nowrap;
}
.hero__search button:hover{
  background:var(--c-accent-dark);
  transform:translateY(-1px);
  box-shadow:var(--shadow-accent);
}
.hero__stats{
  display:flex;
  justify-content:center;
  gap:3rem;
  margin-top:3rem;
  flex-wrap:wrap;
}
.hero__stat{text-align:center}
.hero__stat-num{
  font-size:2rem;
  font-weight:800;
  letter-spacing:-0.03em;
  font-variant-numeric:tabular-nums;
  color:#fff;
}
.hero__stat-label{
  font-size:.85rem;
  opacity:.7;
  margin-top:.25rem;
  color:rgba(255,255,255,.8);
}

@media(max-width:640px){
  .hero__stats{gap:1.5rem}
  .hero__stat-num{font-size:1.5rem}
}

/* ===== Section Header ===== */
.section-header{
  text-align:center;
  margin-bottom:2.5rem;
}
.section-header__eyebrow{
  display:inline-block;
  color:var(--c-primary);
  font-weight:700;
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  margin-bottom:.6rem;
}
.section-header__title{
  font-size:clamp(1.5rem,3vw,2.25rem);
  margin-bottom:.75rem;
  font-weight:800;
  letter-spacing:-0.03em;
}
.section-header__subtitle{
  color:var(--c-text-muted);
  max-width:560px;
  margin:0 auto;
  font-size:1.05rem;
  line-height:1.6;
}

/* ===== Product Grid ===== */
.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
}
@media(max-width:1024px){
  .grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .grid{grid-template-columns:1fr}
}

/* ===== Product Card ===== */
.product-card{
  background:var(--c-bg-card);
  border:1px solid var(--c-border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-xs);
  transition:transform var(--transition-slow),box-shadow var(--transition-slow),border-color var(--transition);
  display:flex;
  flex-direction:column;
}
.product-card:hover{
  transform:translateY(-4px);
  box-shadow:var(--shadow-xl);
  border-color:var(--c-border-strong);
}
.product-card__img{
  width:100%;
  height:220px;
  object-fit:cover;
  background:var(--c-bg);
  border-bottom:1px solid var(--c-border);
}
.product-card__badge{
  position:absolute;
  top:.75rem;
  left:.75rem;
  background:var(--c-accent);
  color:var(--c-primary-dark);
  padding:.25rem .6rem;
  border-radius:var(--radius-pill);
  font-size:.75rem;
  font-weight:800;
  box-shadow:var(--shadow-sm);
  z-index:1;
}
.product-card__body{
  padding:1.25rem;
  flex:1;
  display:flex;
  flex-direction:column;
}
.product-card__brand{
  font-size:.75rem;
  color:var(--c-text-subtle);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:.4rem;
}
.product-card__title{
  font-size:1.05rem;
  font-weight:700;
  margin-bottom:.5rem;
  color:var(--c-text);
  text-decoration:none;
  line-height:1.4;
  transition:color var(--transition);
  letter-spacing:-0.01em;
}
a.product-card__title:hover{color:var(--c-primary)}
.product-card__rating{
  display:flex;
  align-items:center;
  gap:.4rem;
  margin-bottom:.75rem;
}
.stars{
  color:var(--c-star);
  font-size:.9rem;
  letter-spacing:1px;
  line-height:1;
}
.rating-text{
  font-size:.8rem;
  color:var(--c-text-muted);
  font-weight:500;
}
.product-card__price{
  font-size:1.4rem;
  font-weight:800;
  color:var(--c-primary);
  margin-bottom:.5rem;
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.02em;
}
.product-card__specs{
  font-size:.82rem;
  color:var(--c-text-muted);
  margin-bottom:1rem;
  line-height:1.6;
  list-style:none;
}
.product-card__specs li{
  padding-left:1.2em;
  position:relative;
  margin-bottom:.25rem;
}
.product-card__specs li::before{
  content:'✓';
  position:absolute;
  left:0;
  color:var(--c-success);
  font-weight:700;
}
.product-card__actions{
  display:flex;
  gap:.5rem;
  margin-top:auto;
}

/* ===== Buttons ===== */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  padding:.7rem 1.25rem;
  border-radius:var(--radius-md);
  font-weight:600;
  font-size:.9rem;
  font-family:inherit;
  cursor:pointer;
  transition:all var(--transition);
  border:none;
  text-decoration:none;
  line-height:1.4;
  white-space:nowrap;
}
.btn--primary{
  background:var(--c-primary);
  color:#fff;
  box-shadow:var(--shadow-sm);
}
.btn--primary:hover{
  background:var(--c-primary-dark);
  transform:translateY(-1px);
  box-shadow:var(--shadow-primary);
  color:#fff;
}
.btn--primary:active{transform:translateY(0)}
.btn--primary:disabled{
  opacity:.5;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}
.btn--accent{
  background:var(--c-accent);
  color:var(--c-primary-dark);
  font-weight:700;
  box-shadow:var(--shadow-sm);
}
.btn--accent:hover{
  background:var(--c-accent-dark);
  transform:translateY(-1px);
  box-shadow:var(--shadow-accent);
  color:var(--c-primary-dark);
}
.btn--accent:active{transform:translateY(0)}

/* Stitch: Amazon Orange CTA button */
.btn--amazon{
  background:#FF9900;
  color:#0F172A;
  font-weight:700;
  box-shadow:var(--shadow-sm);
}
.btn--amazon:hover{
  background:#E88B00;
  color:#0F172A;
  transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(255,153,0,.3);
}
.btn--amazon:active{transform:translateY(0)}
.btn--outline{
  background:transparent;
  border:1.5px solid var(--c-border-strong);
  color:var(--c-primary);
}
.btn--outline:hover{
  background:var(--c-primary);
  border-color:var(--c-primary);
  color:#fff;
  transform:translateY(-1px);
}
.btn--sm{
  padding:.5rem .9rem;
  font-size:.82rem;
}
.btn--lg{
  padding:.9rem 2rem;
  font-size:1.05rem;
}
.btn--block{
  width:100%;
}

/* ===== Filters ===== */
.filters{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  align-items:center;
  background:#fff;
  padding:1.25rem 1.5rem;
  border-radius:var(--radius-lg);
  border:1px solid var(--c-border);
  box-shadow:var(--shadow-sm);
  margin-bottom:2rem;
}
.filters__group{
  display:flex;
  align-items:center;
  gap:.5rem;
}
.filters__label{
  font-weight:600;
  font-size:.85rem;
  color:var(--c-text-muted);
  white-space:nowrap;
}
.filters__select,
.filters__input{
  padding:.5rem .75rem;
  border:1px solid var(--c-border);
  border-radius:var(--radius-sm);
  font-size:.85rem;
  font-family:inherit;
  background:#fff;
  color:var(--c-text);
  outline:none;
  transition:border-color var(--transition),box-shadow var(--transition);
}
.filters__select:hover,
.filters__input:hover{border-color:var(--c-border-strong)}
.filters__select:focus,
.filters__input:focus{
  border-color:var(--c-primary);
  box-shadow:0 0 0 3px rgba(26,77,143,.1);
}
.filters__price{
  display:flex;
  align-items:center;
  gap:.25rem;
}
.filters__price span{
  color:var(--c-text-muted);
  font-size:.85rem;
  font-variant-numeric:tabular-nums;
  font-weight:600;
}
.filters__input[type="range"]{
  -webkit-appearance:none;
  appearance:none;
  height:4px;
  background:var(--c-border);
  border:none;
  border-radius:2px;
  padding:0;
  cursor:pointer;
}
.filters__input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--c-primary);
  border:2px solid #fff;
  box-shadow:var(--shadow-sm);
  cursor:pointer;
}
.filters__input[type="range"]::-moz-range-thumb{
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--c-primary);
  border:2px solid #fff;
  box-shadow:var(--shadow-sm);
  cursor:pointer;
}

/* ===== Comparison Table ===== */
.comparison-box{
  background:#fff;
  border-radius:var(--radius-lg);
  border:1px solid var(--c-border);
  box-shadow:var(--shadow-md);
  overflow:hidden;
  margin-bottom:2rem;
}
.comparison-box__header{
  background:linear-gradient(135deg,var(--c-primary),var(--c-primary-dark));
  color:#fff;
  padding:1rem 1.5rem;
  font-weight:700;
  font-size:1.05rem;
  letter-spacing:-0.01em;
}
.comparison-table{
  width:100%;
  border-collapse:collapse;
  font-size:.9rem;
}
.comparison-table th,
.comparison-table td{
  padding:.85rem 1rem;
  text-align:left;
  border-bottom:1px solid var(--c-border);
  vertical-align:top;
}
.comparison-table th{
  background:var(--c-bg);
  font-weight:700;
  color:var(--c-text);
  white-space:nowrap;
  font-size:.85rem;
  letter-spacing:-0.005em;
}
.comparison-table tbody tr{
  transition:background var(--transition);
}
.comparison-table tbody tr:hover{
  background:var(--c-primary-50);
}
.comparison-table tbody tr:last-child td{
  border-bottom:none;
}
.comparison-table .best{
  background:var(--c-success-light);
  font-weight:700;
  color:#047857;
}
.comparison-table .price-cell{
  font-weight:800;
  color:var(--c-primary);
  font-variant-numeric:tabular-nums;
}

/* ===== Article / Blog ===== */
.article{
  max-width:740px;
  margin:0 auto;
}
.article__meta{
  display:flex;
  align-items:center;
  gap:1rem;
  margin-bottom:1.5rem;
  color:var(--c-text-subtle);
  font-size:.85rem;
  font-weight:500;
}
.article__meta span{
  display:flex;
  align-items:center;
  gap:.3rem;
}
.article__content h2{
  font-size:1.6rem;
  margin:2.5rem 0 .75rem;
  font-weight:700;
  letter-spacing:-0.03em;
}
.article__content h3{
  font-size:1.25rem;
  margin:2rem 0 .5rem;
  font-weight:600;
  letter-spacing:-0.02em;
}
.article__content p{
  margin-bottom:1rem;
  color:var(--c-text);
  line-height:1.75;
}
.article__content ul,
.article__content ol{
  margin:1rem 0 1rem 1.5rem;
}
.article__content li{
  margin-bottom:.5rem;
  line-height:1.7;
}
.article__content a{
  color:var(--c-primary);
  text-decoration:underline;
  text-decoration-color:rgba(26,77,143,.3);
  text-underline-offset:2px;
  transition:text-decoration-color var(--transition);
}
.article__content a:hover{
  text-decoration-color:var(--c-primary);
}
.article__content blockquote{
  border-left:3px solid var(--c-primary);
  padding:.75rem 1.25rem;
  margin:1.5rem 0;
  background:var(--c-primary-50);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  color:var(--c-text-muted);
  font-style:italic;
}
.callout{
  background:linear-gradient(135deg,var(--c-primary-50),var(--c-primary-100));
  border:1px solid var(--c-primary-100);
  border-radius:var(--radius-lg);
  padding:1.25rem 1.5rem;
  margin:1.5rem 0;
}
.callout__title{
  font-weight:700;
  color:var(--c-primary);
  margin-bottom:.5rem;
  font-size:1.05rem;
}

/* ===== Product Detail Page ===== */
.product-detail{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2.5rem;
  margin-bottom:2rem;
  align-items:start;
}
@media(max-width:768px){
  .product-detail{grid-template-columns:1fr;gap:1.5rem}
}
.product-detail__img{
  width:100%;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  background:var(--c-bg);
  border:1px solid var(--c-border);
}
.product-detail__brand{
  font-size:.8rem;
  color:var(--c-text-subtle);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:.5rem;
}
.product-detail__title{
  font-size:clamp(1.5rem,3vw,2.1rem);
  margin-bottom:1rem;
  font-weight:800;
  letter-spacing:-0.035em;
  line-height:1.2;
}
.product-detail__rating{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin-bottom:1.5rem;
}
.product-detail__price{
  font-size:2rem;
  font-weight:800;
  color:#1a4d8f;
  margin-bottom:.5rem;
  font-variant-numeric:tabular-nums;
  letter-spacing:-0.03em;
}
.product-detail__price-old{
  font-size:1.1rem;
  color:var(--c-text-subtle);
  text-decoration:line-through;
  margin-left:.5rem;
  font-weight:500;
}
.product-detail__cta{
  margin:1.5rem 0;
}
.product-detail__cta .btn{
  font-size:1.05rem;
  padding:.9rem 2rem;
}

/* ===== Specs Table ===== */
.specs-table{
  width:100%;
  border-collapse:collapse;
  margin:1.5rem 0;
  font-size:.9rem;
}
.specs-table th,
.specs-table td{
  padding:.75rem 1.25rem;
  text-align:left;
  border-bottom:1px solid var(--c-border);
}
.specs-table th{
  background:#1a365d;
  font-weight:600;
  width:45%;
  color:#fff;
  font-size:12px;
  font-family:var(--font-mono);
  text-transform:uppercase;
  letter-spacing:0.05em;
}
.specs-table td{
  font-weight:500;
  color:var(--c-text);
}
.specs-table tbody tr:hover{
  background:var(--c-primary-50);
}
.specs-table tbody tr:last-child td,
.specs-table tbody tr:last-child th{
  border-bottom:none;
}

/* ===== Pros & Cons ===== */
.pros-cons{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1.5rem;
  margin:2rem 0;
}
@media(max-width:768px){
  .pros-cons{grid-template-columns:1fr}
}
.pros-cons__col{
  background:#fff;
  border:1px solid var(--c-border);
  border-radius:var(--radius-lg);
  padding:1.5rem;
  box-shadow:var(--shadow-sm);
}
.pros-cons__col h3{
  display:flex;
  align-items:center;
  gap:.5rem;
  margin-bottom:1rem;
  font-size:1.1rem;
  font-weight:700;
}
.pros-cons__col ul{list-style:none}
.pros-cons__col li{
  padding:.5rem 0;
  font-size:.92rem;
  position:relative;
  padding-left:1.5rem;
  line-height:1.6;
}
.pros-cons__pros li::before{
  content:'✓';
  position:absolute;
  left:0;
  color:var(--c-success);
  font-weight:700;
}
.pros-cons__cons li::before{
  content:'✗';
  position:absolute;
  left:0;
  color:var(--c-danger);
  font-weight:700;
}

/* Stitch: Pros/Cons semantic backgrounds */
.pros-cons__pros{
  background:#e6f4ea;
  border-left:4px solid #059669;
}
.pros-cons__cons{
  background:#fce8e6;
  border-left:4px solid #DC2626;
}

/* ===== FAQ Accordion ===== */
.faq-item{
  background:#fff;
  border:1px solid var(--c-border);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-xs);
  margin-bottom:.75rem;
  overflow:hidden;
  transition:box-shadow var(--transition);
}
.faq-item[open]{
  box-shadow:var(--shadow-sm);
  border-color:var(--c-border-strong);
}
.faq-item__summary{
  padding:1.1rem 1.5rem;
  font-weight:600;
  font-size:.95rem;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  list-style:none;
  color:var(--c-text);
  transition:background var(--transition);
}
.faq-item__summary:hover{background:var(--c-bg)}
.faq-item__summary::-webkit-details-marker{display:none}
.faq-item__summary::after{
  content:'▾';
  color:var(--c-primary);
  font-size:1rem;
  transition:transform var(--transition);
  flex-shrink:0;
  margin-left:1rem;
}
.faq-item[open] .faq-item__summary::after{
  transform:rotate(180deg);
}
.faq-item__content{
  padding:0 1.5rem 1.25rem;
  color:var(--c-text-muted);
  font-size:.92rem;
  line-height:1.7;
}
.faq-item__content p{margin-bottom:.5rem}
.faq-item__content p:last-child{margin-bottom:0}

/* ===== Newsletter ===== */
.newsletter{
  background:linear-gradient(135deg,var(--c-primary) 0%,var(--c-primary-dark) 100%);
  color:#fff;
  border-radius:var(--radius-xl);
  padding:3rem 2.5rem;
  text-align:center;
  margin:2rem 0;
  position:relative;
  overflow:hidden;
}
.newsletter::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background-image:radial-gradient(ellipse at top right,rgba(232,168,56,.08),transparent 60%);
  pointer-events:none;
}
.newsletter > *{position:relative;z-index:1}
.newsletter__title{
  font-size:1.6rem;
  margin-bottom:.5rem;
  font-weight:800;
  letter-spacing:-0.03em;
  color:#fff;
}
.newsletter__subtitle{
  opacity:.85;
  margin-bottom:1.5rem;
  font-size:.95rem;
  color:rgba(255,255,255,.9);
}
.newsletter__form{
  display:flex;
  max-width:420px;
  margin:0 auto;
  gap:.5rem;
}
.newsletter__form input{
  flex:1;
  padding:.75rem 1.25rem;
  border:none;
  border-radius:var(--radius-pill);
  outline:none;
  font-size:.95rem;
  font-family:inherit;
  background:#fff;
  color:var(--c-text);
}
.newsletter__form input::placeholder{color:var(--c-text-subtle)}
.newsletter__form button{
  padding:.75rem 1.5rem;
  background:var(--c-accent);
  color:var(--c-primary-dark);
  border:none;
  border-radius:var(--radius-pill);
  font-weight:700;
  font-size:.9rem;
  cursor:pointer;
  transition:all var(--transition);
  font-family:inherit;
  white-space:nowrap;
}
.newsletter__form button:hover{
  background:var(--c-accent-dark);
  transform:translateY(-1px);
  box-shadow:var(--shadow-accent);
}

@media(max-width:640px){
  .newsletter{padding:2rem 1.5rem}
  .newsletter__form{flex-direction:column;gap:.75rem}
  .newsletter__form button{width:100%}
}

/* ===== Breadcrumb ===== */
.breadcrumb{
  display:flex;
  align-items:center;
  gap:.5rem;
  font-size:.85rem;
  color:var(--c-text-subtle);
  margin-bottom:1.5rem;
  flex-wrap:wrap;
}
.breadcrumb a{
  color:var(--c-primary);
  font-weight:500;
  transition:color var(--transition);
}
.breadcrumb a:hover{color:var(--c-primary-dark)}
.breadcrumb span{color:var(--c-text-subtle)}

/* ===== Footer ===== */
.footer{
  background:#0F172A;
  color:#94A3B8;
  padding:3.5rem 0 1.5rem;
  margin-top:3rem;
}
.footer__grid{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:2rem;
  margin-bottom:2rem;
}
@media(max-width:768px){
  .footer__grid{grid-template-columns:1fr 1fr;gap:1.5rem}
}
@media(max-width:480px){
  .footer__grid{grid-template-columns:1fr;gap:1.5rem}
}
.footer__brand{
  font-size:1.2rem;
  font-weight:800;
  color:#fff;
  margin-bottom:.75rem;
  letter-spacing:-0.02em;
}
.footer__desc{
  font-size:.85rem;
  line-height:1.7;
  margin-bottom:1rem;
  color:#94A3B8;
  max-width:300px;
}
.footer h4{
  color:#fff;
  margin-bottom:.75rem;
  font-size:.95rem;
  font-weight:600;
  letter-spacing:-0.005em;
}
.footer__links{list-style:none}
.footer__links li{margin-bottom:.5rem}
.footer__links a{
  color:#94A3B8;
  font-size:.85rem;
  text-decoration:none;
  transition:color var(--transition);
}
.footer__links a:hover{color:#fff}
.footer__bottom{
  text-align:center;
  padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:.8rem;
  color:#64748B;
}
.footer__bottom p{color:#64748B;line-height:1.6}

/* ===== Badges & Tags ===== */
.badge{
  display:inline-flex;
  align-items:center;
  padding:.2rem .6rem;
  border-radius:var(--radius-pill);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.01em;
  line-height:1.4;
}
.badge--best{
  background:var(--c-success);
  color:#fff;
}
.badge--new{
  background:var(--c-accent);
  color:var(--c-primary-dark);
}
.badge--deal{
  background:var(--c-danger);
  color:#fff;
}

.tag{
  display:inline-block;
  padding:3px 10px;
  background:#F1F4F9;
  border:1px solid var(--c-border);
  border-radius:var(--radius-pill);
  font-family:var(--font-mono);
  font-size:11px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:#475569;
  margin:.2rem;
  cursor:pointer;
  transition:all var(--transition);
}
.tag:hover{
  border-color:var(--c-border-strong);
  color:var(--c-text);
}
.tag--active{
  background:var(--c-primary);
  border-color:var(--c-primary);
  color:#fff;
}

/* ===== Utility Classes ===== */
.text-center{text-align:center}
.mt-1{margin-top:.5rem}
.mt-2{margin-top:1rem}
.mt-3{margin-top:1.5rem}
.mt-4{margin-top:2rem}
.mb-1{margin-bottom:.5rem}
.mb-2{margin-bottom:1rem}
.mb-3{margin-bottom:1.5rem}
.mb-4{margin-bottom:2rem}
.hidden{display:none}

/* ===== Scrollbar (WebKit) ===== */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--c-bg)}
::-webkit-scrollbar-thumb{
  background:var(--c-border-strong);
  border-radius:5px;
  border:2px solid var(--c-bg);
}
::-webkit-scrollbar-thumb:hover{background:var(--c-text-subtle)}

/* ===== Focus Visible ===== */
:focus-visible{
  outline:2px solid var(--c-primary);
  outline-offset:2px;
}

/* ===== Print ===== */
@media print{
  .navbar,.footer,.newsletter,.hero__search,.filters,.mobile-nav{display:none}
  body{background:#fff}
  .section{padding:1rem 0}
}

/* ============================================================
   STITCH DESIGN SYSTEM ENHANCEMENTS
   ============================================================ */

/* ===== Rating Bars (horizontal bar charts) ===== */
.rating-bar{
  height:8px;
  background:#E2E8F0;
  border-radius:4px;
  overflow:hidden;
}
.rating-bar__fill{
  height:100%;
  background:#1a4d8f;
  border-radius:4px;
  transition:width .3s ease;
}

/* ===== Thumbnail Gallery ===== */
.gallery-thumbs{
  display:flex;
  gap:8px;
  margin-top:12px;
  flex-wrap:wrap;
}
.gallery-thumbs img{
  width:64px;
  height:64px;
  object-fit:cover;
  border-radius:8px;
  border:2px solid transparent;
  cursor:pointer;
  transition:border-color var(--transition);
}
.gallery-thumbs img:hover{border-color:var(--c-border-strong)}
.gallery-thumbs img.active{
  border-color:#1a4d8f;
}

/* ===== Mobile Bottom Nav ===== */
@media(max-width:768px){
  .mobile-nav{
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    background:#fff;
    border-top:1px solid #E2E8F0;
    padding:8px 16px;
    display:flex;
    justify-content:space-around;
    z-index:100;
    box-shadow:0 -4px 12px rgba(0,0,0,.06);
  }
  .mobile-nav a{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:2px;
    font-size:11px;
    font-weight:500;
    color:var(--c-text-muted);
    text-decoration:none;
    padding:4px 12px;
    border-radius:var(--radius-sm);
    transition:color var(--transition);
  }
  .mobile-nav a:active,
  .mobile-nav a.active{
    color:var(--c-primary);
  }
  /* Avoid content being hidden behind fixed nav */
  body{padding-bottom:64px}
}

/* ============================================
   SKETCH VARIANT: Compare-first layout
   ============================================ */

/* Hero compact - aligned left, not centered */
.hero--compact{
  background:linear-gradient(135deg,var(--c-primary) 0%,var(--c-primary-dark) 100%);
  color:#fff;
  padding:3.5rem 0 3.5rem;
  position:relative;
  overflow:hidden;
}
.hero--compact::after{
  content:'';position:absolute;bottom:0;left:0;right:0;height:60px;
  background:var(--c-bg);clip-path:polygon(0 100%,100% 100%,100% 0,0 60px);
}
.hero--compact .container{
  display:grid;grid-template-columns:1fr auto;gap:2rem;align-items:center;
}
.hero__left{max-width:640px}
.hero__left h1{
  font-family:var(--font-heading);font-size:clamp(1.6rem,3.5vw,2.5rem);
  font-weight:800;letter-spacing:-.03em;margin-bottom:.75rem;line-height:1.15;
}
.hero__left .hero__subtitle{
  font-size:1rem;opacity:.85;margin-bottom:1.25rem;max-width:520px;
}
.hero__left .hero__search{
  display:flex;max-width:480px;gap:.5rem;margin-bottom:.75rem;
}
.hero__left .hero__search input{
  flex:1;padding:.8rem 1.1rem;border:none;border-radius:var(--radius-md);
  font-size:.95rem;outline:none;
}
.hero__left .hero__search button{
  padding:.8rem 1.4rem;background:var(--c-amazon);color:#0F172A;border:none;
  border-radius:var(--radius-md);font-weight:700;cursor:pointer;font-size:.9rem;
}
.hero__left .hero__search button:hover{background:var(--c-amazon-dark)}
.hero__left .hero__stats{
  font-size:.82rem;opacity:.7;letter-spacing:.02em;
  font-family:var(--font-mono);
}
.hero__right{
  display:flex;flex-direction:column;gap:1rem;justify-self:end;
}
.hero__medal{
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);
  border-radius:var(--radius-lg);padding:1.1rem 1.4rem;text-align:center;
  min-width:160px;
}
.hero__medal-label{
  font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;
  opacity:.7;margin-bottom:.3rem;font-family:var(--font-mono);
}
.hero__medal-value{
  font-size:1.3rem;font-weight:800;color:var(--c-accent);
}
.hero__medal-sub{
  font-size:.75rem;opacity:.6;margin-top:.2rem;
}
@media(max-width:768px){
  .hero--compact .container{grid-template-columns:1fr}
  .hero__right{flex-direction:row;justify-self:start;gap:.75rem}
  .hero__medal{min-width:140px;padding:.8rem 1rem}
}

/* Filter bar - horizontal chips */
.filter-bar{
  background:#fff;border-bottom:2px solid var(--c-border);
  padding:.75rem 0;position:sticky;top:64px;z-index:50;
}
.filter-bar__inner{
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
}
.filter-bar__label{
  font-size:.75rem;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--c-text-muted);margin-right:.25rem;
  font-family:var(--font-mono);
}
.chip{
  padding:.4rem .9rem;border:1px solid var(--c-border);border-radius:9999px;
  font-size:.82rem;font-weight:600;color:var(--c-text-muted);
  background:#fff;cursor:pointer;transition:all .2s;white-space:nowrap;
}
.chip:hover{border-color:var(--c-primary);color:var(--c-primary)}
.chip--active{
  background:var(--c-primary);color:#fff;border-color:var(--c-primary);
}

/* Comparison table - featured */
.compare-table-wrap{
  overflow-x:auto;border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);margin:1.5rem 0;
}
.compare-table{
  width:100%;border-collapse:collapse;font-size:.88rem;
  min-width:680px;
}
.compare-table thead th{
  background:#1a365d;color:#fff;padding:.7rem .8rem;text-align:left;
  font-family:var(--font-mono);font-size:.7rem;font-weight:500;
  text-transform:uppercase;letter-spacing:.06em;white-space:nowrap;
}
.compare-table tbody tr:nth-child(even){background:var(--c-bg)}
.compare-table tbody tr:hover{background:#eef2f7}
.compare-table td{
  padding:.6rem .8rem;border-bottom:1px solid var(--c-border);
}
.compare-table__product{font-weight:700;color:var(--c-primary)}
.compare-table__price{
  font-weight:800;color:var(--c-primary);
  font-variant-numeric:tabular-nums;
}
.compare-table__mono{font-family:var(--font-mono);font-size:.82rem}
.compare-table__best{background:#e6f4ea;font-weight:700;color:#059669}

/* Trust features - asymmetric layout */
.trust-features{
  display:grid;grid-template-columns:2fr 1fr;gap:1.5rem;
  margin:2rem 0;
}
@media(max-width:768px){.trust-features{grid-template-columns:1fr}}
.trust-feature--large{
  background:#fff;border-radius:var(--radius-md);padding:1.5rem;
  box-shadow:var(--shadow-sm);border-left:4px solid var(--c-primary);
}
.trust-feature--large h3{font-size:1.15rem;margin-bottom:.5rem;color:var(--c-primary)}
.trust-feature--large p{font-size:.92rem;color:var(--c-text-muted);line-height:1.6}
.trust-feature--small{
  background:var(--c-bg);border-radius:var(--radius-md);padding:1.25rem;
  display:flex;flex-direction:column;justify-content:center;
}
.trust-feature--small h3{font-size:1rem;margin-bottom:.3rem;color:var(--c-primary)}
.trust-feature--small p{font-size:.85rem;color:var(--c-text-muted)}

/* Footer heading fix */
.footer__heading{
  color:#fff;margin-bottom:.75rem;font-size:.95rem;font-weight:700;
}