/* ==========================================================================
   Dr. Pops — base styles
   Color system: :root sets --color-*; a section or block that has an override
   redefines the SAME custom property on its own element, so every child inherits
   it and unset overrides simply fall through to the parent value.
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-weight: var(--font-body-weight);
  font-size: var(--body-size);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
body.is-scroll-locked { overflow: hidden; }
img, video, svg, iframe { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; } /* the only !important: guarantees the HTML hidden attribute */

h1, h2, h3, h4, .h1, .h2, .h3, .heading {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-style: var(--font-heading-style);
  color: var(--color-heading);
  line-height: 1.08;
  letter-spacing: var(--heading-tracking);
  margin: 0 0 .5em;
  text-wrap: balance;
}
p { margin: 0 0 1em; }

:focus-visible { outline: 2px solid var(--color-heading); outline-offset: 3px; border-radius: 4px; }

.skip-link { position: absolute; left: -9999px; top: 0; z-index: 999; background: var(--color-heading); color: var(--color-bg); padding: .75rem 1rem; }
.skip-link:focus { left: 1rem; top: 1rem; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0;
}

/* ===== Layout ===== */
/* --edge = distance from the screen edge to the content edge; full-bleed carousels use it to line up with .page-width */
:root { --edge: max(var(--gutter, 48px), (100vw - var(--page-width)) / 2); }
@media (max-width: 989px) { :root { --edge: min(var(--gutter, 48px), 32px); } }
@media (max-width: 749px) { :root { --edge: var(--gutter-m, 20px); } }
/* One container for every section: same max width and the same side spacing everywhere */
.page-width { width: 100%; max-width: calc(var(--page-width) + var(--gutter, 48px) * 2); margin-inline: auto; padding-inline: var(--gutter, 48px); }
@media (max-width: 989px) { .page-width { padding-inline: min(var(--gutter, 48px), 32px); } }
@media (max-width: 749px) { .page-width { padding-inline: var(--gutter-m, 20px); } }
.section {
  position: relative;
  background: var(--section-bg, transparent);
  color: var(--color-text);
  padding-block: var(--pt, 64px) var(--pb, 64px);
}
@media (max-width: 749px) { .section { padding-block: var(--pt-m, 40px) var(--pb-m, 40px); } }
.section-head { text-align: center; max-width: 52rem; margin: 0 auto clamp(1.75rem, 4vw, 3rem); }
.section-head--left { text-align: left; margin-inline: 0; }
.eyebrow {
  display: inline-block; margin-bottom: .75rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--color-heading);
}
.section-title { font-size: var(--h-size, 44px); margin-bottom: .35em; }
@media (max-width: 749px) { .section-title { font-size: var(--h-size-m, 30px); } }
.subtitle { font-size: clamp(1rem, 1.3vw, 1.15rem); color: color-mix(in srgb, var(--color-text) 85%, transparent); margin: 0; }
.text-soft { color: color-mix(in srgb, var(--color-text) 78%, transparent); }
.rte > *:last-child { margin-bottom: 0; }
.rte ul { padding-left: 1.2em; }

/* ===== Highlighted heading words =====
   Style classes set variables; the nearest ancestor class wins (theme → section → block). */
.hl-marker { --hl-bg: linear-gradient(var(--color-marker), var(--color-marker)); --hl-size: 100% .32em; --hl-pos: 0 90%; --hl-pad: 0 .06em; --hl-radius: 0; --hl-deco: none; }
.hl-pill { --hl-bg: linear-gradient(var(--color-marker), var(--color-marker)); --hl-size: 100% 100%; --hl-pos: 0 0; --hl-pad: 0 .2em; --hl-radius: .28em; --hl-deco: none; }
.hl-color { --hl-bg: none; --hl-pad: 0; --hl-deco: none; }
.hl-underline { --hl-bg: none; --hl-pad: 0; --hl-deco: underline; }
mark.hl {
  color: var(--color-highlight);
  background-color: transparent;
  background-image: var(--hl-bg, none);
  background-repeat: no-repeat;
  background-size: var(--hl-size, 100% .32em);
  background-position: var(--hl-pos, 0 90%);
  padding: var(--hl-pad, 0);
  border-radius: var(--hl-radius, 0);
  text-decoration: var(--hl-deco, none);
  text-decoration-color: var(--color-marker);
  text-decoration-thickness: .1em;
  text-underline-offset: .12em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ===== Icons ===== */
.icon { width: 1.25rem; height: 1.25rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon--filled { fill: currentColor; stroke: none; }
.stars { display: inline-flex; gap: .12rem; color: var(--color-star); }
.stars .icon { width: 1rem; height: 1rem; }
.stars .is-empty { opacity: .28; }

/* ===== Buttons ===== */
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 3.25rem; padding: 0 2rem;
  border: 1.5px solid var(--color-button-border);
  border-radius: var(--button-radius);
  background: var(--color-button-bg);
  color: var(--color-button-text);
  font-family: var(--font-body); font-weight: 700; font-size: 1rem; letter-spacing: .01em;
  text-decoration: none; text-align: center; line-height: 1.2;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .2s ease, box-shadow .25s ease;
}
.button:hover { background: var(--color-button-hover-bg); border-color: var(--color-button-hover-bg); color: var(--color-button-hover-text); }
.button:active { transform: translateY(1px); }
.button[disabled], .button[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.button--outline { background: transparent; color: var(--color-heading); border-color: currentColor; }
.button--outline:hover { background: var(--color-heading); color: var(--color-surface); border-color: var(--color-heading); }
.button--small { min-height: 2.6rem; padding: 0 1.25rem; font-size: .92rem; }
.button--full { width: 100%; }
.button.is-loading { position: relative; color: transparent; pointer-events: none; }
.button.is-loading::after {
  content: ""; position: absolute; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  border: 2px solid var(--color-button-text); border-right-color: transparent; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.link { font-weight: 700; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem 1rem; justify-content: center; margin-top: clamp(1.5rem, 3vw, 2.5rem); }

/* ===== Forms ===== */
.field {
  width: 100%; min-height: 3rem; padding: .75rem 1rem;
  border: 1.5px solid var(--color-border); border-radius: calc(var(--radius) * .6);
  background: var(--color-surface); color: var(--color-text);
}
.field:focus-visible { border-color: var(--color-heading); outline-offset: 1px; }
.qty { display: inline-flex; align-items: center; border: 1.5px solid var(--color-border); border-radius: 999px; background: var(--color-surface); }
.qty button { width: 2.6rem; height: 2.6rem; border: 0; background: none; display: grid; place-items: center; border-radius: 50%; color: var(--color-heading); }
.qty button:hover { background: color-mix(in srgb, var(--color-accent) 40%, transparent); }
.qty input { width: 2.6rem; border: 0; background: none; text-align: center; font-weight: 700; -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ===== Cards ===== */
.card-surface { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); }
.badge {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .28rem .7rem; border-radius: 999px;
  background: var(--color-accent); color: var(--color-heading);
  font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1.2;
}

/* ===== Price ===== */
.price { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .2rem .6rem; font-weight: 800; color: var(--color-heading); }
.price__compare { font-weight: 500; text-decoration: line-through; color: color-mix(in srgb, var(--color-text) 60%, transparent); font-size: .9em; }
.price__save { font-size: .75em; }

/* ===== Horizontal scroller shared by carousels ===== */
.scroller {
  display: grid; grid-auto-flow: column;
  gap: var(--gap, 1rem);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none;
  padding-block: .5rem; /* room for focus rings and tilt */
}
.scroller::-webkit-scrollbar { display: none; }
.scroller > * { scroll-snap-align: start; }
@media (prefers-reduced-motion: reduce) { .scroller { scroll-behavior: auto; } }
.carousel-nav { display: flex; align-items: center; justify-content: center; gap: .75rem; margin-top: 1.25rem; color: var(--color-controls); }
.round-button {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0;
  border-radius: 50%; border: 1.5px solid currentColor; background: transparent; color: inherit;
  transition: background-color .25s ease, color .25s ease;
}
.round-button:hover { background: var(--color-controls); color: var(--color-surface); }
.round-button[disabled] { opacity: .35; pointer-events: none; }
.dots { display: flex; gap: .1rem; }
.dots button { width: 1.6rem; height: 2.75rem; border: 0; padding: 0; background: none; display: grid; place-items: center; color: inherit; }
.dots button span { width: 7px; height: 7px; border-radius: 99px; background: currentColor; opacity: .3; transition: width .3s ease, opacity .3s ease, background-color .3s ease; }
.dots button[aria-current="true"] span { width: 22px; opacity: 1; background: var(--color-controls-active); }

/* ===== Basic grids used by fallback templates ===== */
.grid { display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.grid--products { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }

/* ===== Editor-only notices and demo content ===== */
.editor-notice {
  margin: 1rem auto 0; max-width: var(--page-width); padding: .75rem 1rem;
  border: 1.5px dashed currentColor; border-radius: 10px;
  font-size: .85rem; line-height: 1.45; background: color-mix(in srgb, var(--color-surface) 70%, transparent);
}
.demo-flag {
  position: absolute; top: .6rem; left: .6rem; z-index: 2;
  padding: .2rem .55rem; border-radius: 6px;
  background: #b42318; color: #fff; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.placeholder-media {
  display: grid; place-items: center; width: 100%; height: 100%; min-height: 8rem;
  background: repeating-linear-gradient(45deg, color-mix(in srgb, var(--color-heading) 6%, transparent) 0 12px, transparent 12px 24px), var(--color-surface);
  color: color-mix(in srgb, var(--color-heading) 70%, transparent);
  font-size: .82rem; font-weight: 700; text-align: center; padding: 1rem;
}

/* ===== Scroll reveal (activated by theme.js only) ===== */
html.reveal-on [data-reveal] {
  opacity: 0;
  translate: 0 var(--reveal-distance, 24px);
  transition: opacity var(--reveal-duration, 600ms) cubic-bezier(.22, .61, .36, 1), translate var(--reveal-duration, 600ms) cubic-bezier(.22, .61, .36, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
html.reveal-on [data-reveal].is-revealed { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { html.reveal-on [data-reveal] { opacity: 1; translate: none; transition: none; } }
@media print { html.reveal-on [data-reveal] { opacity: 1 !important; translate: none !important; } }
/* sections already on screen at load: CSS-only load-in (never hidden before paint) */
html.reveal-on [data-reveal-load] { animation: reveal-in var(--reveal-duration, 600ms) cubic-bezier(.22, .61, .36, 1) var(--reveal-delay, 0ms) both; }
@keyframes reveal-in { from { opacity: 0; translate: 0 var(--reveal-distance, 24px); } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { html.reveal-on [data-reveal-load] { animation: none; } }

/* custom-element sections must be blocks, otherwise their background color does not paint */
featured-product.section, ingredient-bars.section { display: block; }