/* PrimePickDeals — full theme styles compiled from React/Tailwind source.
   Design tokens mirror src/index.css (HSL). */
:root{
  --background:210 40% 98%; --foreground:222 47% 11%;
  --card:0 0% 100%; --card-foreground:222 47% 11%;
  --popover:0 0% 100%; --popover-foreground:222 47% 11%;
  --primary:222 47% 11%; --primary-foreground:210 40% 98%;
  --secondary:210 40% 96%; --secondary-foreground:222 47% 11%;
  --muted:210 40% 96%; --muted-foreground:215 16% 47%;
  --accent:142 71% 45%; --accent-foreground:0 0% 100%;
  --accent-hover:142 71% 38%;
  --destructive:0 84% 60%; --destructive-foreground:210 40% 98%;
  --border:214 32% 91%; --input:214 32% 91%; --ring:142 71% 45%;
  --radius:0.75rem;
  --star:45 93% 47%; --success:142 71% 45%; --warning:38 92% 50%;
  --gradient-hero:linear-gradient(135deg, hsl(222 47% 11%) 0%, hsl(222 47% 20%) 100%);
  --shadow-card:0 1px 3px 0 rgb(0 0 0 / 0.05), 0 1px 2px -1px rgb(0 0 0 / 0.05);
  --shadow-elevated:0 10px 25px -5px rgb(0 0 0 / 0.08), 0 8px 10px -6px rgb(0 0 0 / 0.04);
}
@media (prefers-color-scheme: dark){
  :root{
    --background:222 47% 6%; --foreground:210 40% 98%;
    --card:222 47% 11%; --card-foreground:210 40% 98%;
    --primary:210 40% 98%; --primary-foreground:222 47% 11%;
    --secondary:217 33% 17%; --muted:217 33% 17%; --muted-foreground:215 20% 65%;
    --border:217 33% 17%; --input:217 33% 17%;
  }
}
.dark{
  --background:222 47% 6%; --foreground:210 40% 98%;
  --card:222 47% 11%; --border:217 33% 17%;
}

/* base */
*,*::before,*::after{box-sizing:border-box;border-color:hsl(var(--border))}
html{-webkit-text-size-adjust:100%;line-height:1.5}
body{margin:0;font-family:'Open Sans',system-ui,sans-serif;background:hsl(var(--background));color:hsl(var(--foreground));-webkit-font-smoothing:antialiased;line-height:1.6}
a{color:inherit;text-decoration:none}
a:hover{color:hsl(var(--accent))}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,h4,h5,h6{font-family:'Inter',system-ui,sans-serif;font-weight:700;letter-spacing:-0.02em;line-height:1.2;margin:0 0 .5em}
h1{font-size:clamp(2rem,5vw,3rem);font-weight:800}
h2{font-size:1.875rem}
h3{font-size:1.25rem}
p{margin:0 0 1em}

/* layout */
.container{width:100%;margin:0 auto;padding:0 1rem;max-width:1200px}
@media(min-width:640px){.container{padding:0 2rem}}

/* navbar */
.ppd-navbar{position:sticky;top:0;z-index:50;background:hsl(var(--card)/.95);backdrop-filter:blur(12px);border-bottom:1px solid hsl(var(--border))}
.ppd-navbar-inner{display:flex;align-items:center;justify-content:space-between;height:4rem}
.ppd-logo{font-family:'Inter',sans-serif;font-weight:800;font-size:1.25rem;color:hsl(var(--foreground))}
.ppd-logo .accent{color:hsl(var(--accent))}
.ppd-nav{display:none;gap:.25rem;align-items:center}
@media(min-width:1024px){.ppd-nav{display:flex}}
.ppd-nav a{padding:.5rem .75rem;font-size:.875rem;font-weight:500;border-radius:.375rem;transition:color .2s;color:hsl(var(--foreground))}
.ppd-nav a:hover,.ppd-nav a.current{color:hsl(var(--accent))}

/* buttons */
.ppd-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.5rem;font-family:'Inter',sans-serif;font-weight:700;font-size:.875rem;border-radius:var(--radius);border:1px solid transparent;cursor:pointer;transition:all .2s;text-decoration:none}
.ppd-btn-cta{background:hsl(var(--accent));color:#fff}
.ppd-btn-cta:hover{background:hsl(var(--accent-hover));color:#fff;transform:translateY(-1px);box-shadow:var(--shadow-elevated)}
.ppd-btn-outline{background:transparent;border-color:hsl(var(--border));color:hsl(var(--foreground))}
.ppd-btn-outline:hover{background:hsl(var(--muted))}

/* hero */
.ppd-hero{background:var(--gradient-hero);color:hsl(var(--primary-foreground));padding:5rem 0;text-align:center}
.ppd-hero h1{color:#fff;margin-bottom:1rem}
.ppd-hero p{color:hsl(0 0% 100% / .8);font-size:1.125rem;max-width:42rem;margin:0 auto 2rem}

/* cards / grid */
.ppd-grid{display:grid;gap:1.5rem;grid-template-columns:repeat(1,1fr)}
@media(min-width:640px){.ppd-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1024px){.ppd-grid{grid-template-columns:repeat(3,1fr)}}
.ppd-grid.cols-4 > *{}@media(min-width:1024px){.ppd-grid.cols-4{grid-template-columns:repeat(4,1fr)}}

.ppd-card{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);box-shadow:var(--shadow-card);overflow:hidden;transition:box-shadow .3s, transform .3s;display:flex;flex-direction:column}
.ppd-card:hover{box-shadow:var(--shadow-elevated);transform:translateY(-2px)}
.ppd-card-img{position:relative;overflow:hidden}
.ppd-card-img img{width:100%;height:12rem;object-fit:cover;transition:transform .3s}
.ppd-card:hover .ppd-card-img img{transform:scale(1.05)}
.ppd-card-badge{position:absolute;top:.75rem;left:.75rem;background:hsl(var(--accent));color:#fff;font-size:.75rem;font-weight:700;padding:.35rem .65rem;border-radius:9999px}
.ppd-card-body{padding:1.25rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.ppd-card-cat{font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:hsl(var(--muted-foreground))}
.ppd-card-title{font-size:1.125rem;font-weight:700;color:hsl(var(--foreground));display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ppd-card-excerpt{font-size:.875rem;color:hsl(var(--muted-foreground));display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ppd-card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:auto;gap:.5rem;padding-top:.5rem}
.ppd-card-price{font-family:'Inter',sans-serif;font-weight:700;color:hsl(var(--foreground))}

/* rating */
.ppd-rating{display:inline-flex;align-items:center;gap:.125rem;color:hsl(var(--star));font-size:1.125rem;line-height:1}
.ppd-rating .star.empty{color:hsl(var(--border))}
.ppd-rating .star.half{background:linear-gradient(90deg,hsl(var(--star)) 50%,hsl(var(--border)) 50%);-webkit-background-clip:text;background-clip:text;color:transparent}
.ppd-rating-num{margin-left:.5rem;font-size:.875rem;font-weight:600;color:hsl(var(--muted-foreground))}

/* pros & cons */
.ppd-proscons{display:grid;gap:1.5rem;grid-template-columns:1fr;margin:2rem 0}
@media(min-width:768px){.ppd-proscons{grid-template-columns:1fr 1fr}}
.ppd-pros,.ppd-cons{padding:1.5rem;border-radius:var(--radius);border:1px solid hsl(var(--border));background:hsl(var(--card))}
.ppd-pros{border-left:4px solid hsl(var(--success))}
.ppd-cons{border-left:4px solid hsl(var(--destructive))}
.ppd-pros h3,.ppd-cons h3{margin-top:0}
.ppd-pros ul,.ppd-cons ul{list-style:none;padding:0;margin:0}
.ppd-pros li,.ppd-cons li{padding:.4rem 0 .4rem 1.5rem;position:relative;font-size:.95rem}
.ppd-pros li::before{content:"✓";position:absolute;left:0;color:hsl(var(--success));font-weight:700}
.ppd-cons li::before{content:"✗";position:absolute;left:0;color:hsl(var(--destructive));font-weight:700}

/* affiliate CTA box */
.ppd-cta-box{background:var(--gradient-hero);color:#fff;padding:2.5rem;border-radius:var(--radius);text-align:center;margin:2rem 0;box-shadow:var(--shadow-elevated)}
.ppd-cta-box h2{color:#fff}
.ppd-cta-box .ppd-btn-cta{margin-top:1rem;font-size:1rem;padding:1rem 2rem}

/* sections */
.ppd-section{padding:4rem 0}
.ppd-section-title{text-align:center;margin-bottom:2.5rem}
.ppd-section-title small{display:block;font-size:.875rem;font-weight:600;color:hsl(var(--accent));text-transform:uppercase;letter-spacing:.1em;margin-bottom:.5rem}

/* footer */
.ppd-footer{background:hsl(var(--primary));color:hsl(var(--primary-foreground));padding:3rem 0 1.5rem;margin-top:4rem}
.ppd-footer a{color:hsl(0 0% 100% / .8)}
.ppd-footer a:hover{color:hsl(var(--accent))}
.ppd-footer-cols{display:grid;grid-template-columns:1fr;gap:2rem}
@media(min-width:768px){.ppd-footer-cols{grid-template-columns:repeat(4,1fr)}}
.ppd-footer-bottom{border-top:1px solid hsl(0 0% 100% / .1);margin-top:2rem;padding-top:1.5rem;font-size:.875rem;text-align:center;color:hsl(0 0% 100% / .6)}

/* category grid */
.ppd-cat-card{background:hsl(var(--card));border:1px solid hsl(var(--border));border-radius:var(--radius);padding:2rem;text-align:center;transition:all .3s;box-shadow:var(--shadow-card)}
.ppd-cat-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-elevated);border-color:hsl(var(--accent))}
.ppd-cat-icon{font-size:2.5rem;margin-bottom:1rem}

/* newsletter */
.ppd-newsletter{background:hsl(var(--muted));padding:3rem;border-radius:var(--radius);text-align:center}
.ppd-newsletter form{display:flex;gap:.5rem;max-width:28rem;margin:1.5rem auto 0;flex-wrap:wrap;justify-content:center}
.ppd-newsletter input{flex:1;min-width:200px;padding:.75rem 1rem;border:1px solid hsl(var(--border));border-radius:var(--radius);font-size:1rem;background:hsl(var(--card))}

/* ad container */
.ad-container{margin:2rem 0;display:flex;justify-content:center}

/* utilities */
.text-center{text-align:center}
.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}
.gap-2{gap:.5rem}.gap-4{gap:1rem}
.mt-4{margin-top:1rem}.mt-8{margin-top:2rem}
.my-8{margin-top:2rem;margin-bottom:2rem}
.hidden{display:none}
@media(min-width:1024px){.lg\:flex{display:flex}.lg\:hidden{display:none}}

/* fade-in animation */
@keyframes ppd-fade-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ppd-fade-in{animation:ppd-fade-in .5s ease-out forwards}

/* breadcrumbs */
.ppd-breadcrumbs{font-size:.875rem;color:hsl(var(--muted-foreground));margin:1rem 0}
.ppd-breadcrumbs a:hover{color:hsl(var(--accent))}

/* prose for post content */
.ppd-prose{max-width:768px;margin:0 auto}
.ppd-prose h2{margin-top:2rem}
.ppd-prose ul,.ppd-prose ol{padding-left:1.5rem}
.ppd-prose blockquote{border-left:4px solid hsl(var(--accent));padding-left:1rem;color:hsl(var(--muted-foreground));font-style:italic;margin:1.5rem 0}

/* mobile menu */
.ppd-menu-toggle{display:inline-flex;background:none;border:0;padding:.5rem;cursor:pointer}
@media(min-width:1024px){.ppd-menu-toggle{display:none}}
.ppd-mobile-menu{display:none;background:hsl(var(--card));border-top:1px solid hsl(var(--border));padding:1rem}
.ppd-mobile-menu.open{display:block}
.ppd-mobile-menu a{display:block;padding:.75rem 0;border-bottom:1px solid hsl(var(--border));font-size:.875rem;font-weight:500}