/* ==========================================================================
   Nocortico Comfort Repair — theme styles
   Base resets, typography, keyframes, hover/interaction states, and the
   responsive (desktop/mobile) toggles. Layout itself stays as inline styles
   on the markup so the design renders 1:1 with the approved demo.
   ========================================================================== */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: #FAF6EF;
  color: #3B3A34;
  font-family: 'Nunito Sans', system-ui, sans-serif;
  font-size: 16px;
  line-height: 22px;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
  color: #667361;
}
p { margin: 0; }
a { color: #3B3A34; text-decoration: none; }
a:hover { color: #C97B5A; }
img { max-width: 100%; }
::selection { background: rgba(224, 180, 109, .4); }
section[id], header[id] { scroll-margin-top: 88px; }

/* ---- native accordions (FAQ + Sastav) ---- */
summary::-webkit-details-marker { display: none; }
details[open] .faq-plus { transform: rotate(45deg); }
details[open] .faq-item { border-color: rgba(201, 123, 90, .35); }
details[open].faq-item { border-color: rgba(201, 123, 90, .45); box-shadow: 0 18px 40px -28px rgba(201, 123, 90, .45); }
details[open] .sastav-plus { transform: rotate(45deg); }
.sastav-ic-minus { display: none; }
details[open] .sastav-ic-plus { display: none; }
details[open] .sastav-ic-minus { display: inline; }
details[open] .ing-plus { transform: rotate(45deg); }

input[type=range]:focus-visible { outline: 2px solid #C97B5A; outline-offset: 3px; }
.marq-row::-webkit-scrollbar { display: none; }

/* ---- empty image placeholders (swap for real <img> when photos arrive) ---- */
.nc-slot {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px;
  background: #ECE3D3;
  color: #9C9484;
  font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 700;
}
.nc-slot--circle { border-radius: 999px; }

/* ==========================================================================
   Interaction / hover states (replace the demo's style-hover attributes)
   ========================================================================== */
.nc-cta { transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.nc-cta:hover { transform: translateY(-2px); background: #B5674A; }
.nc-ghost { transition: color .2s ease; }
.nc-ghost:hover { color: #C97B5A; }
.nc-icon-btn { transition: border-color .2s ease, color .2s ease; }
.nc-icon-btn:hover { border-color: rgba(201, 123, 90, .5); color: #C97B5A; }
.nc-usp-card { transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.nc-usp-card:hover { transform: translateY(-4px); box-shadow: 0 28px 54px -36px rgba(59, 58, 52, .5); border-color: rgba(201, 123, 90, .3); }

/* dark footer links hover to gold */
.nc-dark a:hover { color: #E0B46D; }
.nc-footer-social a { transition: border-color .2s ease, color .2s ease, transform .2s ease; }
.nc-footer-social a:hover { border-color: #E0B46D; color: #E0B46D; transform: translateY(-2px); }

/* ---- ingredient map (desktop) hover reveal — pure CSS ---- */
.nc-ing-extra {
  overflow: hidden;
  font-size: 13px;
  line-height: 18px;
  color: #8A6B54;
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  transition: max-height .3s ease, opacity .25s ease, margin-top .25s ease;
}
.nc-ing:hover .nc-ing-extra { max-height: 90px; opacity: 1; margin-top: 8px; }
.nc-ing-pill { transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.nc-ing:hover .nc-ing-pill {
  border-color: rgba(201, 123, 90, .6);
  box-shadow: 0 18px 34px -20px rgba(201, 123, 90, .5);
  transform: translateY(-1px);
}
.nc-ing:hover svg path { stroke: #C97B5A; stroke-width: 2.4; }
.nc-ing:hover svg circle { fill: #C97B5A; }

/* ---- scroll-to-top ---- */
.nc-top {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity .3s ease, transform .3s ease, background .2s ease, color .2s ease;
}
.nc-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.nc-top:hover { background: #C97B5A; color: #FAF6EF; }

/* ---- mobile drawer ---- */
.nc-drawer-bd { opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; }
.nc-drawer { transform: translateX(100%); transition: transform .32s cubic-bezier(.4, 0, .2, 1); }
.nc-drawer-wrap.open .nc-drawer-bd { opacity: 1; visibility: visible; }
.nc-drawer-wrap.open .nc-drawer { transform: translateX(0); }

/* ==========================================================================
   Responsive: show/hide desktop vs mobile branches + per-breakpoint tweaks
   Breakpoint mirrors the demo's 820px container switch.
   ========================================================================== */
.nc-m, .nc-mf { display: none; }

@media (max-width: 820px) {
  .nc-d { display: none !important; }
  .nc-m { display: block; }
  .nc-mf { display: flex; }

  .nc-hero-cta { flex-direction: column; }
  .nc-hero-cta .nc-cta,
  .nc-hero-cta .nc-ghost { width: 100%; }

  .nc-usp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  .nc-sastav-head { text-align: left !important; }
  .nc-sastav-head h2,
  .nc-sastav-head p { margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; }

  .nc-faq-aside { position: static !important; }

  .nc-footer-cols { text-align: center !important; }
  .nc-footer-brand { margin-left: auto !important; margin-right: auto !important; }
  .nc-footer-social { justify-content: center !important; }
  .nc-footer-list { align-items: center !important; }
  .nc-footer-bottom { justify-content: center !important; }
  .nc-footer-closing { text-align: center; }
  .nc-footer-cols .nc-cta { width: 100%; justify-content: center; }
  .nc-prod-title { white-space: nowrap; font-size: min(6.6vw, 30px) !important; letter-spacing: -0.02em; }
}