/* === Nailak Cuticle & Nail Oil — CLEAN CONSOLIDATED CSS === */

/* Brand tokens */
:root{
  --brand-green: #2f5e3f;
  --brand-green-2: #3d7d52;
  --brand-gold: #e9a923;
  --brand-gold-2: #f8c84a;
  --btn-text-light: #ffffff;
  --btn-text-dark: #1b1b1b;
}

.nko-container{max-width:1060px;margin:0 auto;padding:0 18px}
.nko-section{margin:48px 0}
.nko-grid{display:grid;gap:20px}
.nko-muted{color:var(--secondary)}
.nko-eyebrow{font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;color:var(--secondary)}
.nko-h1{font-size:clamp(32px,5vw,48px);line-height:1.08;margin:10px 0 12px;font-weight:800}
.nko-lead{font-size:1.05rem;line-height:1.6;color:var(--secondary)}
.nko-card,
.nko-feature,
.nko-ingredients{
  background:var(--entry);
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  padding:18px;
  transition:background .25s ease,color .25s ease, border-color .25s ease;
}

/* Light/Dark tune for cards/text */
body.dark .nko-card,
body.dark .nko-feature,
body.dark .nko-ingredients{background:#1c2a1e;border-color:#2f5e3f}
body.dark .nko-lead,
body.dark .nko-muted{color:#d7e8d5}

/* HERO */
.nko-hero{position:relative;overflow:hidden;border-radius:22px}
.nko-hero img{width:100%;height:340px;object-fit:cover;display:block;filter:saturate(1.05)}
.nko-hero .nko-hero-box{
  position:absolute;inset:auto 0 0 0;padding:20px 22px 24px;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.35) 60%,rgba(0,0,0,.6) 100%);
  color:#fff;
}
.nko-hero .nko-h1{color:#fff}
.nko-hero .nko-lead{color:#e9f5eb}
body.dark .nko-hero-box{
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.45) 70%,rgba(0,0,0,.7) 100%);
}

/* === H2 / H3 styles (SEO-friendly & distinct) === */
.nko-h2{
  position:relative;
  font-size:clamp(1.6rem,2.4vw,2rem);
  line-height:1.25;
  font-weight:800;
  margin:0 0 1rem;
  color:var(--primary);
  letter-spacing:-0.01em;
}
.nko-h2::after{
  content:"";
  position:absolute;left:0;bottom:-6px;
  width:56px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--brand-gold-2),#7bb661);opacity:.85;
}
body.dark .nko-h2{color:#f7f7f7}
body.dark .nko-h2::after{background:linear-gradient(90deg,var(--brand-gold-2),#a3d17c)}

.nko-h3{
  font-size:clamp(1.125rem,1.9vw,1.25rem);
  line-height:1.3;
  font-weight:700;
  color:var(--primary);
  margin:.25rem 0 .75rem;
}

/* MEDIA ROW — each image has its own wrapper so mobile stacks properly */
.nko-media-row{
  display:flex;flex-wrap:wrap;justify-content:center;gap:20px;margin-top:10px;
}
.nko-media-item{
  flex:0 0 auto;border-radius:16px;overflow:hidden;text-align:center;
}
.nko-media-item img{
  width:100%;max-width:300px;border-radius:16px;object-fit:cover;
  background:#fff;transition:transform .25s ease;
}
.nko-media-item img:hover{transform:scale(1.02)}

/* BENEFITS GRID */
.nko-features{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.nko-feature .f-ttl{font-weight:800;margin-bottom:6px}

/* VIDEO */
.nko-video{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden}
.nko-video iframe{position:absolute;inset:0;width:100%;height:100%}

/* INGREDIENTS + CTA */
.nko-ingredients{background:linear-gradient(180deg,#f9faf9,#ffffff)}
.nko-ingredients ul{margin:10px 0 0 18px}
.nko-cta{display:grid;grid-template-columns:1.2fr .8fr;gap:20px;align-items:center}
.nko-cta img{width:100%;border-radius:16px;object-fit:contain;background:#fff}
.nko-center{text-align:center}

/* TWO-COL helper */
.nko-two{display:grid;gap:20px;grid-template-columns:1.1fr .9fr}

/* RESPONSIVE */
@media (max-width:980px){.nko-features{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){
  .nko-cta{grid-template-columns:1fr;gap:16px}
  .nko-hero img{height:300px}
  .nko-two{grid-template-columns:1fr}
}
@media (max-width:640px){
  .nko-hero{border-radius:18px}
  .nko-hero img{height:auto;aspect-ratio:16/9}
  .nko-hero .nko-hero-box{position:static;background:none;color:inherit;padding:14px 0 0}
  .nko-hero .nko-lead{color:var(--secondary)}
  /* media images stack vertically and centered */
  .nko-media-row{flex-direction:column;align-items:center}
  .nko-media-item img{max-width:92%}
}
@media (max-width:560px){
  .nko-hero img{aspect-ratio:16/10}
  .nko-features{grid-template-columns:1fr}
}

/* Stop theme's fade script from hiding content */
.nko-container, .nko-container section{
  opacity:1!important;transform:none!important;transition:none!important;visibility:visible!important;
}
.anchor{scroll-margin-top:80px}

/* === BUTTON — premium, high-contrast, theme-safe === */
.nko-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-weight:700;padding:12px 26px;border-radius:30px;
  background:var(--brand-green);border:1px solid var(--brand-green);
  color:var(--btn-text-light) !important;text-decoration:none;letter-spacing:.2px;
  box-shadow:0 3px 8px rgba(0,0,0,.18);transition:all .25s ease;
}
/* lock text color against theme link rules */
.nko-btn:link, .nko-btn:visited, .nko-btn:active{color:var(--btn-text-light) !important}
.nko-btn:hover{
  background:var(--brand-green-2);border-color:var(--brand-green-2);
  color:var(--btn-text-light) !important;box-shadow:0 6px 14px rgba(47,94,63,.25);
  transform:translateY(-1px);
}
.nko-btn:focus-visible{outline:3px solid rgba(120,200,150,.6);outline-offset:3px}

/* Dark theme variant */
body.dark .nko-btn{
  background:linear-gradient(135deg,var(--brand-gold-2),var(--brand-gold));
  border:1px solid var(--brand-gold);
  color:var(--btn-text-dark) !important;
  box-shadow:0 3px 10px rgba(249,214,120,.25);
}
body.dark .nko-btn:hover{
  background:linear-gradient(135deg,#ffd971,#ecb44a);
  color:var(--btn-text-dark) !important;
  box-shadow:0 5px 16px rgba(249,214,120,.35);
}