/* =========================================================
   Pure Naked — Index styles
   Navbar is now on TOP (not left) → remove left gutter
   ========================================================= */
:root{
  --pn-green:#185651;
  --pn-ink:#143f3d;
  --pn-bg:#f7f4ec;
  --pn-cream:#fbf9f2;
  --pn-stone:#e8e2cf;
  --pn-text:#23302f;
  --pn-accent:#f78e26;
  --sidebar-w:0px;              /* was 260px when navbar was a left sidebar */
  --content-w:1200px;           /* center content width */
}

html,body{height:100%}
body{
  margin:0;
  background:var(--pn-bg);
  color:var(--pn-text);
  font:16px/1.4 "Inter",system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif;
}

/* Page container — no bottom gap, no forced min-height */
.page{
  margin-left: 0;        /* was var(--sidebar-w) */
  /* min-height:100%; */ /* remove this */
  /* padding-bottom:48px; */ /* remove this gap maker */
}
@media (max-width:1023px){
  .page{ margin-left:0; }
}


/* ================== HERO ================== */
.hero{
  position:relative;
  display:block;
  overflow:hidden;
  border:1px solid var(--pn-stone);
  border-radius:16px;
  background:var(--pn-cream);
  margin:16px 24px 0;
}
@media (max-width:1023px){
  .hero{ margin:12px 12px 0; }
}
.hero .hero-media{display:block}
.hero .hero-banner{
  width:100%;
  height:auto;
  display:block;
  aspect-ratio: 1920/720;
  object-fit: cover;
}
.hero .hero-scrim{
  position:absolute;inset:0;
  background:linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.25) 35%, rgba(0,0,0,0) 65%);
  pointer-events:none;
}
.hero .hero-inner{
  position:absolute;inset:0;
  display:flex;align-items:center;
  padding:24px;
}
.hero .hero-copy{
  max-width:720px;
  color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.25);
}
.hero .hero-copy h1{
  margin:0 0 10px 0;
  font-size: clamp(26px, 3.2vw, 42px);
  line-height:1.05;
  font-weight:800;
}
.hero .hero-copy .sub{
  margin:0 0 14px 0;
  font-size: clamp(14px, 1.6vw, 18px);
  color:#eaf5f3;
}

/* --- MOBILE HERO: stacked layout so content fits --- */
@media (max-width: 640px){
  .hero .hero-inner{
    position:static;
    padding:12px;
    background:#ffffff;
  }
  .hero .hero-scrim{ display:none; }
  .hero .hero-copy{
    color:var(--pn-green);
    text-shadow:none;
    max-width:none;
  }
  .hero .hero-copy h1{
    font-size: clamp(22px, 6.4vw, 28px);
    margin-bottom:8px;
  }
  .hero .hero-copy .sub{
    font-size: 14px;
    color:#3a5856;
    margin-bottom:10px;
  }
  .hero .proof{ background:#f0f5f4; }
  .hero .hero-banner{
    aspect-ratio: 16/10;
  }
}

/* hero pills */
.hero .hero-pills{
  display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px 0;
}
.hero .hero-pills .hpill{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;border-radius:999px;border:1px solid var(--pn-stone);
  background:#fff;color:var(--pn-green);text-decoration:none;font-weight:700;font-size:13px;
}
.hero .hero-pills .hpill.is-active{ background:var(--pn-green); color:#fff; border-color:var(--pn-green); }

/* CTAs */
.cta-row{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  gap:8px;border-radius:12px;padding:10px 14px;border:1px solid transparent;
  font-weight:800;text-decoration:none;cursor:pointer;transition:.18s ease;
}
.btn:hover{ transform:translateY(-1px) }
.btn:active{ transform:translateY(0) }
.btn-primary{ background:var(--pn-green); color:#fff; border-color:var(--pn-green); }
.btn-ghost{ background:#fff; color:var(--pn-green); border-color:var(--pn-stone); }
.btn-small{ padding:8px 12px; border-radius:10px; font-size:14px }

/* Proof row */
.proof-row{ display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:12px }
.proof{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.85);
  color:var(--pn-green);font-weight:700
}
.ub-score .num{font-weight:900}

/* Bigger Ubuntu mark when hero data-cat=body-care */
.ub-mark{width:22px;height:22px;display:inline-block}
.hero[data-cat="body-care"] .ub-mark{width:36px;height:36px}

/* ================== SECTIONS ================== */
.section{
  padding:40px 24px;
  border-top:1px solid var(--pn-stone);
}

/* CENTER all section content */
.section > .section-head,
.section > .pill-row,
.section > .cat-grid,
.section > .chooser-actions,
.section > .prod-grid,
.section > .result-grid,
.section > .pick,
.section > .blog-grid,
.section > .trust-explain,
.section > .reviews-grid,
.section > .trust-strip,
.section > .email-capture,
.section > .final-cta,
.section > .empty{
  max-width: var(--content-w);
  margin-left: auto;
  margin-right: auto;
}

.section--tight{padding-top:24px;padding-bottom:24px}
.section-head{margin:0 auto 18px}
.section-head h2{margin:0 0 6px;font-size:28px;line-height:1.1;color:var(--pn-ink)}
.section-head p{margin:0;color:#577a77}

/* Category chooser */
.pill-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.pill{
  padding:8px 12px;border-radius:999px;border:1px solid var(--pn-stone);
  background:#fff;font-weight:700;color:var(--pn-green);cursor:pointer
}
.pill.is-active{background:var(--pn-green);color:#fff;border-color:var(--pn-green)}

/* Category grid */
.cat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:1200px){ .cat-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:820px){ .cat-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .cat-grid{grid-template-columns:1fr} }

.cat-card{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  border:1px solid var(--pn-stone);border-radius:16px;background:#fff;text-decoration:none;color:inherit
}
.cat-card .cat-img{width:100%;height:160px;object-fit:cover;display:block;background:#ddd}
.cat-card .cat-body{padding:12px}
.cat-card h3{margin:0 0 4px;font-size:18px;color:var(--pn-ink)}
.cat-card p{margin:0 0 10px;color:#4d6664;font-size:14px}
.cat-card .chip-row{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.cat-card .chip{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:999px;background:#f0f5f4;color:var(--pn-green);font-weight:700;font-size:12px}
.cat-card .cta-link{color:var(--pn-accent);font-weight:800}

/* Hide filtered cards */
.is-hidden{display:none!important}
.chooser-actions{margin-top:10px}

/* Top products grid */
.prod-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media (max-width:1200px){ .prod-grid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:820px){ .prod-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .prod-grid{grid-template-columns:1fr} }
.prod-card{border:1px solid var(--pn-stone);border-radius:16px;background:#fff;overflow:hidden;display:flex;flex-direction:column}
.prod-media img{width:100%;height:220px;object-fit:cover;background:#eee;display:block}
.prod-body{padding:12px;display:flex;flex-direction:column;gap:8px}
.prod-title{margin:0;font-size:16px}
.prod-title a{color:var(--pn-ink);text-decoration:none;font-weight:800}
.prod-meta{display:flex;align-items:center;justify-content:space-between}
.price{font-weight:900;color:var(--pn-green)}
.prod-cta{display:flex;gap:8px;margin-top:4px}

/* Results grid */
.result-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:900px){ .result-grid{grid-template-columns:1fr} }
.result-card{
  position:relative;border:1px solid var(--pn-stone);border-radius:16px;overflow:hidden;min-height:200px;
  background:linear-gradient(140deg,#fff 0%,#f4faf8 100%);
  display:flex;align-items:flex-end
}
.result-body{padding:14px}
.result-body h3{margin:0 0 6px 0;color:var(--pn-ink)}
.result-body p{margin:0 0 8px 0;color:#4d6664}
.cta-link{color:var(--pn-accent);font-weight:800;text-decoration:none}

/* Editor's pick */
.pick{display:grid;grid-template-columns:360px 1fr;gap:16px;border:1px solid var(--pn-stone);border-radius:16px;background:#fff;overflow:hidden}
@media (max-width:900px){ .pick{grid-template-columns:1fr} }
.pick-media img{width:100%;height:100%;object-fit:cover;background:#eee;display:block}
.pick-body{padding:16px}
.eyebrow{font-size:12px;color:#5b716f;text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}

/* Blog */
.blog-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:900px){ .blog-grid{grid-template-columns:1fr} }
.blog-card{border:1px solid var(--pn-stone);border-radius:16px;background:#fff;overflow:hidden;display:flex;flex-direction:column}
.blog-media img{width:100%;height:200px;object-fit:cover;background:#eee;display:block}
.blog-body{padding:12px}
.blog-title{margin:0 0 6px}
.blog-title a{text-decoration:none;color:var(--pn-ink);font-weight:900}
.blog-date{color:#6c8482;font-size:12px}

/* Ubuntu explainer */
.trust-explain{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:900px){ .trust-explain{grid-template-columns:1fr} }
.tcard{border:1px solid var(--pn-stone);border-radius:14px;background:#fff;padding:12px}

/* Reviews */
.reviews-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
@media (max-width:900px){ .reviews-grid{grid-template-columns:1fr} }
.review-card{border:1px solid var(--pn-stone);border-radius:16px;background:#fff;overflow:hidden;display:flex;flex-direction:column}
.review-top{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--pn-stone)}
.rmedia img{width:100%;height:200px;object-fit:cover;background:#eee;display:block}
.rbody{padding:12px}
.rprod a{font-weight:900;color:var(--pn-ink);text-decoration:none}
.rmeta{color:#6c8482;font-size:12px}

/* Trust strip */
.trust-strip{
  display:flex;gap:18px;flex-wrap:wrap;align-items:center;justify-content:center;
  padding:10px;border:1px dashed var(--pn-stone);border-radius:14px;background:#fff
}
.trust-strip li{list-style:none;font-weight:800;color:var(--pn-ink)}

/* Email capture */
.email-capture{
  display:grid;grid-template-columns:1fr 380px;gap:18px;border:1px solid var(--pn-stone);border-radius:16px;background:#fff;padding:14px
}
@media (max-width:900px){ .email-capture{grid-template-columns:1fr} }
.email-copy h3{margin:0 0 6px 0}
.email-copy p{margin:0;color:#4d6664}
.email-form{display:flex;flex-direction:column;gap:8px}
.email-form input{
  padding:10px 12px;border:1px solid var(--pn-stone);border-radius:12px;font:inherit
}
.fine{font-size:12px;color:#6c8482}

/* FAQ */
.faq details{border:1px solid var(--pn-stone);border-radius:12px;background:#fff;padding:10px;margin-bottom:10px}
.faq summary{cursor:pointer;font-weight:900;color:var(--pn-ink)}

/* Final CTA */
.final-cta{
  display:flex;align-items:center;justify-content:space-between;gap:18px;border:1px solid var(--pn-stone);
  border-radius:16px;background:#fff;padding:14px;max-width:var(--content-w);margin:0 auto;
}
@media (max-width:900px){ .final-cta{flex-direction:column;align-items:flex-start} }
.final-copy h3{margin:0 0 6px}

/* Empty state */
.empty{border:1px dashed var(--pn-stone);border-radius:14px;background:#fff;padding:20px;text-align:center;color:#6c8482}

/* ================== STAR VISUAL ================== */
.ub-stars{--pct:0%;position:relative;display:inline-block;line-height:1;letter-spacing:1px;font-weight:800}
.ub-stars .ub-stars__base{color:#e6e6e6}
.ub-stars .ub-stars__fill{position:absolute;left:0;top:0;white-space:nowrap;overflow:hidden;color:#f6b400}
.ub-stars.sm{font-size:12px}
.ub-stars.md{font-size:16px}
.ub-stars.lg{font-size:20px}


/* === HERO fine-tuning === */

/* 1) Slightly reduce top padding so heading sits higher */
.hero .hero-inner { padding-top: 12px; }

/* 2) Pin pills at ~20% from the top of the hero and keep above scrim */
.hero { position: relative; }
.hero .hero-pills {
  position: absolute;
  top: 20%;
  left: clamp(18px, 2.2vw, 28px);
  transform: translateY(-50%);   /* centers the row around the 20% line */
  margin: 0;                     /* ignore normal flow spacing */
  z-index: 3;                    /* ensure above image/scrim */
  gap: 8px;
}

/* Pill look from your screenshot (kept, just ensuring hover/active pop) */
.hero .hero-pills .hpill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--pn-stone);
  background: #fff; color: var(--pn-green);
  font-weight: 700; font-size: 13px;
  box-shadow: 0 1px 0 rgba(0,0,0,.06);
}
.hero .hero-pills .hpill.is-active {
  background: var(--pn-green); color: #fff; border-color: var(--pn-green);
}

/* 3) Keep copy block compact under the pills */
.hero .hero-copy h1 { margin-top: 8px; }
.hero .hero-copy .sub { margin-top: 6px; }

/* 4) Mobile: anchor slightly lower so it doesn't collide with text */
@media (max-width: 640px){
  .hero .hero-pills {
    position: absolute;           /* still pinned on mobile hero */
    top: 22%;
    left: 12px;
    transform: translateY(-50%);
  }
  .hero .hero-inner { padding-top: 8px; }
}

/* halve the mobile space between navbar and hero */
@media (max-width:1023px){
  .page{                /* was 60px in your layout */
    margin-top: 30px !important;
  }
  .hero{                /* was 12px top margin */
    margin-top: 6px !important;
  }
}
/* ===== Sticky footer helpers (order-safe) ===== */
html, body { height: 100%; }
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
}
main.page { flex: 1 0 auto; }

/* Footer sits flush at the bottom, no white strip */
.pn-footer {
  margin-top: auto;
}
.pn-footer > *:last-child { margin-bottom: 0; }

/* Guard against device safe-area adding phantom space (iOS) */
@supports (padding: env(safe-area-inset-bottom)) {
  body { padding-bottom: env(safe-area-inset-bottom); }
}
.mb-28 { margin-bottom: 28px; }

.center-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0 16px;
  box-sizing: border-box;
}
.center-box {
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
@media (max-width: 640px) {
  .center-box { max-width: 100%; } /* ensure no squeeze/overflow on small screens */
}
.center-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0 16px;
  box-sizing: border-box;
}
.center-box {
  max-width: 900px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
}
@media (max-width: 640px) {
  .center-box { max-width: 100%; } /* ensure no squeeze/overflow on small screens */
}
.center-wrap {
  width: 100%;
  display: grid;            /* grid = simple centering */
  place-items: center;      /* centers both axes */
  padding: 0 16px;
  box-sizing: border-box;
}
.center-box {
  width: min(900px, 100%);
  margin: 0 auto;
  text-align: center;
}

/* Hardening: make typical elements inside center properly on mobile */
.center-box > * { margin-left: auto; margin-right: auto; }
.center-box img,
.center-box picture,
.center-box svg {
  display: block;
  max-width: 100%;
  height: auto;
  margin-inline: auto;      /* prevents off-center images */
}

/* If the included file has floats, kill them on small screens */
@media (max-width: 640px){
  .center-box * { float: none !important; }
}