/* Base / reset / layout primitives  → Shopify: assets/base.css (keep Dawn's own) */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-height) + 1rem); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-cream); color: var(--color-text); font: 400 1rem/1.6 var(--font-body); -webkit-font-smoothing: antialiased; }
body.overflow-hidden { overflow: hidden; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-heading); font-weight: 400; line-height: 1.1; color: inherit; }
ul, ol.reset { margin: 0; padding: 0; list-style: none; }
.breadcrumbs ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--color-red); outline-offset: 3px; }
.color-scheme-red :focus-visible, .color-scheme-dark :focus-visible { outline-color: var(--color-yellow); }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-to-content-link { position: absolute; left: -9999px; top: .5rem; z-index: 300; padding: .75rem 1rem; background: var(--color-text); color: #fff; }
.skip-to-content-link:focus { left: .5rem; }

.page-width { width: 100%; max-width: calc(var(--page-width) + var(--page-gutter) * 2); margin-inline: auto; padding-inline: var(--page-gutter); }
.section-padding { padding-block: var(--section-padding); }

/* Section headings (Dawn: .title-wrapper-with-link / .title / .caption-with-letter-spacing) */
.title-wrapper { display: flex; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); flex-wrap: wrap; }
.title-wrapper--center { flex-direction: column; align-items: center; text-align: center; }
.title { font-size: clamp(1.85rem, 4.2vw, 3rem); }
.subtitle { margin-top: .75rem; max-width: 56ch; color: var(--color-text-muted); }
.color-scheme-red .subtitle, .color-scheme-dark .subtitle { color: rgba(246, 242, 233, .82); }
.caption-with-letter-spacing { display: block; margin-bottom: .75rem; font-size: .75rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--scheme-accent, var(--color-red)); }
.link-arrow { font-weight: 700; text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 2px; white-space: nowrap; }
.link-arrow:hover { color: var(--color-red); }

.icon { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Image placeholder — replace with {{ image | image_url | image_tag }}.
   --focal controls crop focus (→ Dawn image_picker focal point). */
.ph { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: var(--ratio, 4 / 5); overflow: hidden; border-radius: var(--radius); background:
  repeating-linear-gradient(135deg, transparent 0 14px, rgba(39, 33, 29, .045) 14px 15px), var(--ph-bg, var(--color-cream-dark)); color: rgba(39, 33, 29, .55); text-align: center; }
.ph::after { content: attr(data-ph); max-width: 22ch; padding: .6rem 1rem; border: 1.5px dashed currentColor; border-radius: var(--radius); font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.35; background: rgba(255, 255, 255, .55); }
.ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focal, 50% 50%); }
.ph:has(> img)::after { display: none; }

/* Real pack artwork shown unaltered except for choosing the front panel (reference only) */
.pack-crop { position: relative; width: 100%; overflow: hidden; aspect-ratio: 672 / 822; border-radius: var(--radius); background: var(--color-cream); }
.pack-crop img { position: absolute; width: 109.82%; max-width: none; left: -4.91%; top: -4.01%; }
.pack-crop--veg { aspect-ratio: 672 / 812; }
.pack-crop--veg img { top: 0; }

@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }