/* =======================================
   LIFESTYLE POUCHES — Shared Article CSS
   ======================================= */
:root {
  --text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem);
  --text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem);
  --text-base: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1rem + 0.75vw, 1.5rem);
  --text-xl: clamp(1.5rem, 1.2rem + 1.25vw, 2.25rem);
  --text-2xl: clamp(2rem, 1.2rem + 2.5vw, 3.5rem);
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;
  --space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;
  --space-12:3rem;--space-16:4rem;--space-20:5rem;
  --radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.75rem;--radius-xl:1rem;--radius-full:9999px;
  --transition:180ms cubic-bezier(0.16,1,0.3,1);
  --font-display:'Zodiak','Georgia',serif;
  --font-body:'Work Sans','Helvetica Neue',sans-serif;
  --content-default:1080px;
}

:root,[data-theme="dark"]{
  --color-bg:#0d1210;--color-surface:#121a16;--color-surface-2:#162019;
  --color-surface-offset:#1a261e;--color-border:#1e2e24;
  --color-text:#e2eae4;--color-text-muted:#7a9082;--color-text-faint:#3d5044;
  --color-primary:#4ade80;--color-primary-hover:#22c55e;
  --color-primary-dim:rgba(74,222,128,0.10);
  --color-secondary:#f59e0b;--color-accent:#a78bfa;
  --shadow-sm:0 1px 3px rgba(0,0,0,.4);--shadow-md:0 4px 16px rgba(0,0,0,.5);
}
[data-theme="light"]{
  --color-bg:#f7faf8;--color-surface:#ffffff;--color-surface-2:#f0f5f2;
  --color-surface-offset:#e8f0eb;--color-border:#cdd8d0;
  --color-text:#111a13;--color-text-muted:#506058;--color-text-faint:#96aaa0;
  --color-primary:#16a34a;--color-primary-hover:#15803d;
  --color-primary-dim:rgba(22,163,74,0.08);
  --color-secondary:#d97706;--color-accent:#7c3aed;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth;scroll-padding-top:80px;}
body{min-height:100dvh;line-height:1.6;font-family:var(--font-body);font-size:var(--text-base);color:var(--color-text);background:var(--color-bg);}
img{display:block;max-width:100%;height:auto;}
h1,h2,h3,h4{text-wrap:balance;font-family:var(--font-display);line-height:1.15;}
p{text-wrap:pretty;max-width:72ch;}
a{color:var(--color-primary);text-underline-offset:3px;}
a:hover{color:var(--color-primary-hover);}
button{cursor:pointer;font:inherit;}
:focus-visible{outline:2px solid var(--color-primary);outline-offset:3px;}

/* HEADER */
.header{position:sticky;top:0;z-index:100;padding:var(--space-4) 0;
  background:rgba(13,18,16,.92);backdrop-filter:blur(20px);
  border-bottom:1px solid var(--color-border);}
[data-theme="light"] .header{background:rgba(247,250,248,.92);}
.container{width:100%;max-width:var(--content-default);margin-inline:auto;padding-inline:var(--space-6);}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);}
.logo{display:flex;align-items:center;gap:var(--space-3);text-decoration:none;}
.logo__text{font-family:var(--font-display);font-size:var(--text-lg);font-weight:700;color:var(--color-text);}
.logo__text span{color:var(--color-primary);}
.header__nav{display:flex;align-items:center;gap:var(--space-6);}
.header__nav a{font-size:var(--text-sm);font-weight:500;color:var(--color-text-muted);text-decoration:none;}
.header__nav a:hover{color:var(--color-text);}
.nav__cta{padding:var(--space-2) var(--space-5);background:var(--color-primary);color:#0d1210 !important;
  border-radius:var(--radius-full);font-weight:700;transition:all var(--transition);}
.nav__cta:hover{background:var(--color-primary-hover) !important;transform:translateY(-1px);}

/* ARTICLE LAYOUT */
.article-layout{padding-block:var(--space-12) var(--space-20);}
.article-grid{display:grid;grid-template-columns:1fr 320px;gap:var(--space-12);align-items:start;}
.article-main{min-width:0;}

/* ARTICLE META + TITLE */
.article-meta{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;margin-bottom:var(--space-6);}
.article-cat{display:inline-block;padding:3px 12px;background:var(--color-primary-dim);
  border:1px solid rgba(74,222,128,.25);border-radius:var(--radius-full);
  font-size:var(--text-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--color-primary);}
.article-read,.article-date{font-size:var(--text-xs);color:var(--color-text-faint);}
.article-title{font-size:var(--text-2xl);font-weight:700;letter-spacing:-.02em;
  line-height:1.05;margin-bottom:var(--space-6);}
.article-subtitle{font-size:var(--text-lg);color:var(--color-text-muted);
  line-height:1.65;margin-bottom:var(--space-8);max-width:60ch;}

/* AFFILIATE BOX */
.affiliate-box{background:var(--color-surface);border:1px solid var(--color-border);
  border-left:3px solid var(--color-primary);border-radius:var(--radius-lg);
  padding:var(--space-5) var(--space-6);margin-bottom:var(--space-8);
  font-size:var(--text-sm);line-height:1.7;}
.affiliate-box a{font-weight:600;}
.disclosure{display:block;margin-top:var(--space-2);color:var(--color-text-faint);font-style:italic;}

/* BODY CONTENT */
.article-main h2{font-size:var(--text-xl);font-weight:600;letter-spacing:-.015em;
  margin-top:var(--space-10);margin-bottom:var(--space-4);}
.article-main h3{font-size:var(--text-lg);font-weight:600;margin-top:var(--space-8);margin-bottom:var(--space-3);}
.article-main p{font-size:var(--text-base);line-height:1.75;margin-bottom:var(--space-5);color:var(--color-text);}
.article-main ul,.article-main ol{margin:var(--space-4) 0 var(--space-6) var(--space-6);
  display:flex;flex-direction:column;gap:var(--space-2);}
.article-main li{font-size:var(--text-base);line-height:1.65;color:var(--color-text);}

/* PRODUCT RANKING CARDS */
.product-rank{display:flex;gap:var(--space-5);padding:var(--space-6);
  background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-xl);margin:var(--space-6) 0;
  transition:border-color .3s,box-shadow .3s;}
.product-rank:hover{border-color:var(--color-primary);box-shadow:0 0 20px rgba(74,222,128,.12);}
.rank-badge{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-family:var(--font-display);font-size:var(--text-lg);
  font-weight:700;flex-shrink:0;}
.rank-1{background:rgba(245,158,11,.15);color:var(--color-secondary);border:2px solid var(--color-secondary);}
.rank-2{background:rgba(74,222,128,.10);color:var(--color-primary);border:2px solid var(--color-primary);}
.rank-3{background:rgba(167,139,250,.10);color:var(--color-accent);border:2px solid var(--color-accent);}
.rank-content{flex:1;}
.rank-content h3{margin-top:0;font-size:var(--text-lg);}
.rank-content a{color:var(--color-primary);}
.rating{font-size:var(--text-sm);color:var(--color-secondary);margin:var(--space-2) 0 var(--space-3);}
.rating span{color:var(--color-text-muted);}
.pros-cons{font-size:var(--text-sm);color:var(--color-text-muted);
  display:flex;flex-direction:column;gap:var(--space-1);margin-top:var(--space-3);}
.pros{color:var(--color-primary);}
.cons{color:#f87171;}
.coming-soon{font-size:var(--text-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:rgba(167,139,250,.12);color:var(--color-accent);
  padding:2px 8px;border-radius:var(--radius-full);}
.product-cta{display:inline-flex;align-items:center;gap:var(--space-2);
  margin-top:var(--space-4);padding:var(--space-3) var(--space-6);
  background:var(--color-primary);color:#0d1210 !important;text-decoration:none;
  border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:700;
  transition:all var(--transition);}
.product-cta:hover{background:var(--color-primary-hover);transform:translateY(-1px);}

/* NEWSLETTER INLINE */
.newsletter-inline{background:var(--color-surface-offset);border:1px solid var(--color-border);
  border-radius:var(--radius-xl);padding:var(--space-8);margin-top:var(--space-10);}
.newsletter-inline h3{font-size:var(--text-xl);margin-bottom:var(--space-3);}
.newsletter-inline p{color:var(--color-text-muted);margin-bottom:var(--space-5);}
.inline-form{display:flex;gap:var(--space-3);}
.inline-form input{flex:1;padding:var(--space-3) var(--space-5);background:var(--color-bg);
  border:1px solid var(--color-border);border-radius:var(--radius-full);
  font-size:var(--text-sm);font-family:var(--font-body);color:var(--color-text);}
.inline-form input:focus{outline:none;border-color:var(--color-primary);}
.inline-form input::placeholder{color:var(--color-text-faint);}
.inline-form button{padding:var(--space-3) var(--space-6);background:var(--color-primary);
  color:#0d1210;border:none;border-radius:var(--radius-full);
  font-size:var(--text-sm);font-weight:700;cursor:pointer;white-space:nowrap;
  transition:all var(--transition);}
.inline-form button:hover{background:var(--color-primary-hover);}

/* SIDEBAR */
.article-sidebar{position:sticky;top:90px;display:flex;flex-direction:column;gap:var(--space-5);}
.sidebar-card{background:var(--color-surface);border:1px solid var(--color-border);
  border-radius:var(--radius-xl);padding:var(--space-5);}
.sidebar-card__title{font-size:var(--text-xs);font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--color-text-faint);margin-bottom:var(--space-4);}
.toc{list-style:none;display:flex;flex-direction:column;gap:var(--space-2);}
.toc a{font-size:var(--text-sm);color:var(--color-text-muted);text-decoration:none;}
.toc a:hover{color:var(--color-primary);}
.sidebar-affiliate{border-left:2px solid var(--color-primary);}
.sidebar-product__name{font-family:var(--font-display);font-size:var(--text-lg);font-weight:600;margin-bottom:var(--space-1);}
.sidebar-product__brand{font-size:var(--text-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--color-text-muted);margin-bottom:var(--space-2);}
.sidebar-product__rating{color:var(--color-secondary);font-size:var(--text-sm);margin-bottom:var(--space-4);}
.sidebar-btn{display:block;text-align:center;padding:var(--space-3);
  background:var(--color-primary-dim);border:1px solid rgba(74,222,128,.3);
  border-radius:var(--radius-full);font-size:var(--text-sm);font-weight:700;
  color:var(--color-primary);text-decoration:none;transition:all var(--transition);}
.sidebar-btn:hover{background:var(--color-primary);color:#0d1210;}
.related-links{list-style:none;display:flex;flex-direction:column;gap:var(--space-3);}
.related-links a{font-size:var(--text-sm);color:var(--color-text-muted);text-decoration:none;line-height:1.4;}
.related-links a:hover{color:var(--color-primary);}

/* FOOTER */
.footer{background:var(--color-surface);border-top:1px solid var(--color-border);padding:var(--space-10) 0;}
.footer__inner{display:flex;flex-direction:column;gap:var(--space-3);}
.footer__inner p{font-size:var(--text-xs);color:var(--color-text-faint);}
.footer__inner a{color:var(--color-primary);}

/* RESPONSIVE */
@media(max-width:860px){
  .article-grid{grid-template-columns:1fr;}
  .article-sidebar{position:static;}
}
@media(max-width:560px){
  .inline-form{flex-direction:column;}
}
/* Mobile nav burger */
.nav__burger{display:none;flex-direction:column;justify-content:center;align-items:center;width:40px;height:40px;background:none;border:none;cursor:pointer;gap:5px;padding:4px;color:var(--color-text);}
.nav__burger span{display:block;width:22px;height:2px;background:currentColor;border-radius:2px;transition:transform .25s,opacity .25s;}
.nav__burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav__burger.open span:nth-child(2){opacity:0;}
.nav__burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mobile-nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--color-surface);border-bottom:1px solid var(--color-border);padding:1rem 1.5rem 1.5rem;flex-direction:column;gap:.5rem;z-index:999;}
.mobile-nav.open{display:flex;}
.mobile-nav a{font-size:1rem;font-weight:500;color:var(--color-text-muted);padding:.75rem 0;border-bottom:1px solid var(--color-border);text-decoration:none;}
.mobile-nav a:hover{color:var(--color-primary);}
.mobile-nav a:last-child{border-bottom:none;}
.mobile-nav .nav__cta{margin-top:.75rem;display:inline-block;padding:.75rem 1.25rem;background:var(--color-primary);color:#0d1210 !important;border-radius:9999px;font-weight:700;text-align:center;border-bottom:none !important;}
@media(max-width:760px){
  .nav__burger{display:flex;}
  .header__nav a:not(.nav__cta){display:none;}
}