/* ============================================================================
   Voriq Agro — reset, elements, layout primitives, utilities
   Loads after tokens.css and before ui.css.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
}

body {
    margin: 0;
    background: var(--surface-page);
    color: var(--ink-1);
    font: 400 var(--fs-body)/var(--lh-body) var(--font-sans);
    font-synthesis-weight: none;
    -webkit-font-smoothing: antialiased;
    /* `overflow-x: hidden` is deliberately NOT set here. It hides layout bugs
       instead of fixing them; the responsive sweep must find real overflow. */
}

/* ---- headings ---------------------------------------------------------- */
h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 800;
    /* One family; the width axis is what separates a headline from a label. */
    font-variation-settings: 'wdth' var(--wdth-display);
    color: var(--ink-1);
    margin: 0 0 var(--s-4);
    text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
/* h4 drops back to normal width: the change of width is the signal that you have
   moved from section level down to component level. */
h4, h5, h6 {
    font: 700 var(--fs-h4)/var(--lh-h4) var(--font-sans);
    color: var(--ink-1);
    margin: 0 0 var(--s-3);
}

p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }

.lead { font-size: var(--fs-lead); line-height: var(--lh-lead); color: var(--ink-2); }
.small { font-size: var(--fs-small); line-height: var(--lh-small); }
.muted { color: var(--ink-muted); }
.strong { font-weight: 600; }

/* ---- links ------------------------------------------------------------- */
a {
    color: var(--olive-600);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}
a:hover { color: var(--olive-700); }

.link {
    color: var(--olive-600);
    font-weight: 500;
    background: none;
    border: 0;
    padding: 0;
    font-size: inherit;
    font-family: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.link:hover { color: var(--olive-700); }
.link--danger { color: var(--danger); }

/* ---- lists ------------------------------------------------------------- */
ul, ol { margin: 0 0 var(--s-4); padding-left: 1.15em; }
li { margin-bottom: var(--s-1); }

/* ---- media ------------------------------------------------------------- */
img, svg, video { max-width: 100%; height: auto; display: block; }

/* ---- forms: inherit type, never shrink ---------------------------------- */
input, select, textarea, button {
    font: inherit;
    color: inherit;
    margin: 0;
}
textarea { resize: vertical; }
:where(input, select, textarea) { min-width: 0; }
::placeholder { color: var(--ink-muted); opacity: 1; }

/* ---- tables ------------------------------------------------------------- */
table { border-collapse: collapse; width: 100%; }

code, kbd, samp, pre {
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
    font-size: .92em;
    /* Callback and webhook URLs are long unbroken strings; without this they
       push the page sideways on a phone. */
    overflow-wrap: anywhere;
}
pre { overflow-x: auto; }

hr { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--s-6) 0; }

address { font-style: normal; }

/* ---- focus -------------------------------------------------------------- */
:focus-visible {
    outline: 2px solid var(--olive-600);
    outline-offset: 3px;
    border-radius: var(--r-sm);
}
/* On the dark band the olive ring disappears, so it flips to cream. */
.footer :focus-visible,
.dabba-hero :focus-visible,
.topbar :focus-visible,
.on-ink :focus-visible { outline-color: var(--aisle-ghee); }

/* ---- layout primitives -------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.container--narrow { max-width: 760px; }

.section { padding-block: var(--section-y); }

.prose { max-width: var(--measure); }
.prose h2 { margin-top: var(--s-7); }
.prose h3 { margin-top: var(--s-6); }

/* A named divider, optionally carrying a label. */
.rule { border: 0; border-top: 1px solid var(--border-subtle); margin: var(--s-6) 0; }
.rule--strong { border-top-color: var(--border); }
.rule--accent { display: none; }

/* A small label above a block. Sentence case, condensed — never tracked-out capitals. */
.eyebrow {
    font: 600 var(--fs-eyebrow)/var(--lh-eyebrow) var(--font-sans);
    font-variation-settings: 'wdth' var(--wdth-chit);
    color: var(--olive-500);
    margin: 0 0 var(--s-2);
}

/* A section heading with a "more" link sitting on its baseline. */
.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-4);
    margin-bottom: var(--s-5);
    flex-wrap: wrap;
}
.section-head h2 { margin: 0; }

/* Hairline definition list, used on the product page, checkout and footer. */
.dl-spec { margin: 0; font-size: var(--fs-small); }
.dl-spec div {
    display: grid;
    grid-template-columns: minmax(0, 8.5em) minmax(0, 1fr);
    gap: var(--s-4);
    padding: var(--s-3) 0;
    border-top: 1px solid var(--border-subtle);
}
.dl-spec div:last-child { border-bottom: 1px solid var(--border-subtle); }
.dl-spec dt { color: var(--ink-muted); }
.dl-spec dd { margin: 0; overflow-wrap: anywhere; }

/* ---- grid helpers ------------------------------------------------------- */
.row-2, .row-3, .grid--2, .grid--3 { display: grid; gap: var(--s-4); }
.row-2, .grid--2 { grid-template-columns: 1fr; }
.row-3, .grid--3 { grid-template-columns: 1fr; }
@media (min-width: 720px) {
    .row-2, .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .row-3, .grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.split {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-4);
}
/* Every grid and flex child that holds text must be allowed to shrink, or a
   long product name pushes the page sideways at 320px. */
.row-2 > *, .row-3 > *, .grid--2 > *, .grid--3 > *, .split > * { min-width: 0; }

/* ---- utilities — a closed set, all prefixed ----------------------------- */
.u-sr-only, .sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}
.u-hidden { display: none !important; }
.u-center { text-align: center; }
.u-right { text-align: right; }
.u-nowrap { white-space: nowrap; }
.u-tnum { font-variant-numeric: tabular-nums; }
.mt { margin-top: var(--s-5); }
.mb { margin-bottom: var(--s-5); }

/* ---- skip links --------------------------------------------------------- */
.skip, .u-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--olive-600);
    color: var(--ink-on-dark);
    padding: var(--s-3) var(--s-4);
    border-radius: var(--r-sm);
    font-weight: 600;
}
.skip:focus, .u-skip:focus { left: var(--s-2); top: var(--s-2); }

/* ---- reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---- print -------------------------------------------------------------- */
@media print {
    .header, .footer, .assurance-rule, .minibar, .skip { display: none !important; }
    body { background: #fff; }
}