/** Shopify CDN: Minification failed

Line 16:13 Expected identifier but found whitespace
Line 16:15 Unexpected "{"
Line 16:25 Expected ":"
Line 17:15 Expected identifier but found whitespace
Line 17:17 Unexpected "{"
Line 17:27 Expected ":"
Line 18:17 Expected identifier but found whitespace
Line 18:19 Unexpected "{"
Line 18:29 Expected ":"

**/
/* SYA Nutrivita - Minimal Shopify OS 2.0 Theme */
:root{
  --color-bg: {{ settings.color_background }};
  --color-text: {{ settings.color_text }};
  --color-accent: {{ settings.color_accent }};
  --color-muted: rgba(0,0,0,.6);
  --page-width: 1200px;
  --radius: 14px;
}
*{ box-sizing: border-box; }
html, body{ margin:0; padding:0; }
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: var(--color-bg);
  color: var(--color-text);
  line-height: 1.5;
}
a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: underline; }
img{ max-width: 100%; height: auto; display: block; }

.page-width{ max-width: var(--page-width); margin: 0 auto; padding: 0 18px; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* Header */
.header{
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--color-bg) 92%, white 8%);
  border-bottom: 1px solid rgba(0,0,0,.08);
  backdrop-filter: blur(6px);
}
.header__inner{
  display:flex; align-items:center; justify-content:space-between;
  gap: 14px; padding: 14px 0;
}
.brand{ display:flex; align-items:center; gap:10px; font-weight: 750; letter-spacing:.2px; }
.brand__mark{ display:flex; align-items:center; }
.brand__mark img, .brand__mark svg{ display:block; border-radius: 10px; color: var(--color-accent); }
.brand__text{ white-space: nowrap; }

.brand img{ width: 38px; height: 38px; border-radius: 10px; }
.nav{ display:flex; gap: 14px; flex-wrap: wrap; align-items:center; }
.nav a{ padding: 8px 10px; border-radius: 10px; }
.nav a:hover{ background: rgba(0,0,0,.05); text-decoration:none; }

.header__actions{ display:flex; align-items:center; gap: 10px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.12);
  background: white;
  color: var(--color-text);
  gap: 8px;
}
.btn--primary{
  border-color: color-mix(in srgb, var(--color-accent) 70%, black 30%);
  background: var(--color-accent);
  color: white;
  text-decoration: none;
}
.btn:hover{ text-decoration:none; filter: brightness(.98); }

/* Hero */
.hero{
  padding: 44px 0 18px;
}
.hero__grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 26px;
  align-items: center;
}
.hero__card{
  border-radius: var(--radius);
  border: 1px solid rgba(0,0,0,.10);
  background: color-mix(in srgb, var(--color-bg) 92%, white 8%);
  overflow:hidden;
}
.hero__content{ padding: 30px; }
.kicker{ color: var(--color-accent); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; }
h1{ margin: 10px 0 8px; font-size: clamp(28px, 4vw, 46px); line-height: 1.05; }
.lead{ margin: 0 0 18px; color: color-mix(in srgb, var(--color-text) 75%, transparent); font-size: 16px; }
.hero__media{ height: 100%; min-height: 280px; }
.hero__media img{ width: 100%; height: 100%; object-fit: cover; }

/* Sections */
.section{ padding: 26px 0; }
.section__title{ font-size: 22px; margin: 0 0 14px; }
.muted{ color: color-mix(in srgb, var(--color-text) 65%, transparent); }

/* Product grid */
.grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 980px){
  .hero__grid{ grid-template-columns: 1fr; }
  .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
  .grid{ grid-template-columns: 1fr; }
}
/* 3-up grid helper */
.grid--3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px){ .grid--3{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px){ .grid--3{ grid-template-columns: 1fr; } }

.card{
  border: 1px solid rgba(0,0,0,.10);
  border-radius: var(--radius);
  overflow:hidden;
  background: white;
}
.card__body{ padding: 12px; }
.price{ font-weight: 750; }

/* Footer */
.footer{
  margin-top: 30px;
  border-top: 1px solid rgba(0,0,0,.10);
  padding: 26px 0;
}
.footer__grid{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 18px;
}
@media (max-width: 980px){ .footer__grid{ grid-template-columns: 1fr; } }
.input{
  width: 100%;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.18);
  outline: none;
}
.stack{ display:flex; flex-direction: column; gap: 10px; }