/* geist-switch 2026-10-17: font and weights mapped by scratchpad/switch-to-geist.py */
/* Alda site layer: the content pages (about, contact, stores, FAQ, care, policies, recipes,
   search, 404), the shared footer, the search overlay, photograph-pending placeholders,
   newsletter and notify-me forms, and the product-page additions.
   Loaded everywhere through commerce.css (@import). Tokens come from commerce.css (--ac-*) and
   home.css (--r-*, --hm-gut). Red is an accent only: marks and hover text, never a surface and never
   a focus ring (focus is ink - see "focus: Option C" at the end). Surfaces are cream, panel or ink. */

.sf-vh { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* the plain ink ring: cards and tiles keep it (it follows their radius); the other kinds of control replace it below */
.pg-page :is(a, button, select, textarea, summary):focus-visible,
.pg-page input:not(.sf-form input, .pg-search input, .nt-form input, .srch-bar input):focus-visible { outline: 2px solid var(--ac-ink); outline-offset: 3px; }
.ic, svg.go { width: 1em; height: 1em; flex: none; }

/* ---------------------------------------------------------------- page frame */
.pg-page { font-size: 16px; }
.pg { display: block; }
.pg :where(h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote, address) { margin: 0; }
.pg :where(ul, ol) { padding: 0; list-style: none; }
.pg :where(a) { color: inherit; text-decoration: none; }
.pg-hero { padding: 5vh 0 4vh; }
.pg-hero.is-center { text-align: center; }
.pg-hero.is-center .pg-crumb { justify-content: center; }
.pg-hero.is-center .pg-dek { margin-left: auto; margin-right: auto; }
.pg-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55em; margin-bottom: 4.5vh; font-size: 0.8em; color: var(--ac-muted); }
.pg-crumb a { transition: color 0.2s; }
.pg-crumb a:hover { color: var(--ac-ink); }
.pg-crumb .sep { opacity: 0.45; }
.pg-crumb [aria-current] { color: var(--ac-ink); }
.pg-hero .hm-eyebrow { margin-bottom: 1.6em; }
.pg-title { font-size: clamp(44px, 6.2vw, 104px); font-weight: 550; letter-spacing: -0.045em; line-height: 0.96; max-width: 14em; }
.pg-title.is-xl { font-size: clamp(56px, 10vw, 176px); letter-spacing: -0.055em; line-height: 0.9; }
.pg-title.is-rc { font-size: clamp(40px, 4.6vw, 76px); }
.pg-hero.is-center .pg-title { margin: 0 auto; }
.pg-dek { margin-top: 1.4em; max-width: 36em; font-size: clamp(17px, 1.3vw, 21px); line-height: 1.55; color: var(--ac-muted); }
.pg-updated { margin-top: 1.4em; font-size: 0.8em; color: var(--ac-muted); }
.pg-sec { padding: 11vh 0; }
.pg-sec-tight { padding: 3vh 0 9vh; }
.pg-sec-head { margin-bottom: 5.5vh; }
.pg-sec-head .hm-eyebrow { margin-bottom: 1.2em; }
.pg-sec-head.is-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 2em; flex-wrap: wrap; }
.pg-sec-head.is-row .hm-eyebrow { margin-bottom: 1em; }

/* links, pills, chips, search fields */
.pg-link { display: inline-flex; align-items: center; gap: 0.6em; font-size: 0.95em; font-weight: 550; color: var(--ac-ink); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; padding-bottom: 0.2em; transition: background-size 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), color 0.2s; }
.pg-link .ic { width: 0.85em; height: 0.85em; transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.pg-link:hover { background-size: 100% 1px; }
.pg-link:hover .ic { transform: translateX(4px); }
.is-dark .pg-link { color: var(--ac-bg); }
.pg-pill { display: inline-flex; align-items: center; gap: 0.55em; padding: 0.62em 1.15em; border-radius: 100px; border: 1px solid var(--ac-line); background: transparent; color: var(--ac-ink); font: inherit; font-size: 0.86em; cursor: pointer; transition: background 0.25s, color 0.25s, border-color 0.25s; }
.pg-pill .ic { width: 0.85em; height: 0.85em; transition: transform 0.3s; }
.pg-pill:hover { background: var(--ac-ink); border-color: var(--ac-ink); color: var(--ac-bg); }
.pg-pill:hover .ic { transform: translateX(3px); }
.pg-a-links { display: flex; flex-wrap: wrap; gap: 0.5em; margin-top: 1.1em; }
.pg-chips { display: flex; gap: 0.45em; overflow-x: auto; scrollbar-width: none; padding: 0.2em 0; }
.pg-chips::-webkit-scrollbar { display: none; }
.pg-chips button { flex: none; padding: 0.62em 1.2em; border-radius: 100px; border: 1px solid var(--ac-line); background: transparent; color: var(--ac-ink); font: inherit; font-size: 0.88em; cursor: pointer; transition: background 0.25s, color 0.25s, border-color 0.25s; }
.pg-chips button:hover { border-color: var(--ac-ink); }
.pg-chips button.is-on { background: var(--ac-ink); border-color: var(--ac-ink); color: var(--ac-bg); }
.pg-search { position: relative; display: flex; align-items: center; gap: 0.7em; margin: 0; padding: 0 1.1em; height: 3.2em; border-radius: 100px; border: 1px solid var(--ac-line); background: var(--ac-panel); font-weight: 500; transition: border-color 0.25s, background 0.25s; }
.pg-select { display: block; margin: 0; font-weight: 500; }
.pg-search:focus-within { border-color: var(--ac-ink); background: var(--alda-paper); }
.pg-search .ic { width: 1.1em; height: 1.1em; color: var(--ac-muted); }
.pg-search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 1em; color: var(--ac-ink); }
.pg-search input::placeholder { color: var(--ac-muted); }
.pg-search.is-lg { max-width: 34em; height: 3.8em; margin: 4.5vh auto 0; font-size: 1.05em; }
.pg-search.is-xl { height: auto; padding: 0 0 0.25em; border: 0; border-bottom: 1px solid var(--ac-ink); border-radius: 0; background: transparent; margin-top: 3vh; }
.pg-search.is-xl:focus-within { background: transparent; }
.pg-search.is-xl .ic { width: 1.6em; height: 1.6em; }
.pg-search.is-xl input { font-size: clamp(26px, 3.2vw, 52px); letter-spacing: -0.03em; padding: 0.25em 0; }
.pg-select select { appearance: none; height: 3.2em; padding: 0 2.6em 0 1.2em; border-radius: 100px; border: 1px solid var(--ac-line); background: var(--ac-panel) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23222' stroke-width='1.4'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") right 1em center / 0.9em no-repeat; font: inherit; font-size: 0.95em; color: var(--ac-ink); cursor: pointer; }

/* ---------------------------------------------------------------- about */
.pg-hero.is-about { padding-bottom: 8vh; }
.pg-statement { margin-top: 6vh; max-width: 21em; font-size: clamp(22px, 2.7vw, 46px); font-weight: 400; line-height: 1.22; letter-spacing: -0.02em; }
.pg-statement .w { display: inline-block; }
.pg-band { padding-bottom: 4vh; }
.pg-band-frame { aspect-ratio: 21 / 9; border-radius: var(--r-xl); }
.pg-split { display: grid; grid-template-columns: 5fr 6fr; gap: 7vw; align-items: start; }
.pg-split .hm-h { margin-top: 0.4em; }
.pg-prose p { font-size: 1.08em; line-height: 1.72; color: var(--ac-muted); margin-bottom: 1.1em; max-width: 34em; }
.pg-prose .hm-actions { margin-top: 2.2em; }
.pg-numbers { padding-top: 2vh; }
.pg-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ac-ink); }
.pg-stat { padding: 3.6vh 2vw 4vh 0; border-right: 1px solid var(--ac-line-soft); }
.pg-stat + .pg-stat { padding-left: 2vw; }
.pg-stat:last-child { border-right: 0; }
.pg-stat-n { display: block; font-size: clamp(56px, 6.8vw, 116px); font-weight: 550; letter-spacing: -0.055em; line-height: 1; font-variant-numeric: tabular-nums; }
.pg-stat-l { display: block; margin-top: 1em; max-width: 13em; font-size: 0.92em; line-height: 1.45; color: var(--ac-muted); }
.pg-glen { padding: 13vh 0; }
.pg-glen-grid { display: grid; grid-template-columns: 5fr 6fr; gap: 7vw; align-items: center; }
.pg-glen-art { aspect-ratio: 4 / 5; border-radius: var(--r-xl); }
.pg-quote { margin: 1em 0 0.8em; font-size: clamp(26px, 2.9vw, 50px); font-weight: 400; line-height: 1.18; letter-spacing: -0.025em; }
.pg-quote { position: relative; }
.pg-quote::before { content: "\201C"; position: absolute; left: -0.62em; top: -0.02em; color: var(--ac-red); }
.pg-glen-art img { object-position: 64% 50%; }
.pg-cite { font-size: 0.72em; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.6; margin-bottom: 3vh; }
.pg-glen .hm-p { max-width: 32em; }
.pg-princs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4vw; }
.pg-princ { padding: 3.6vh 0 0; border-top: 1px solid var(--ac-ink); }
.pg-princ .ic { width: 2em; height: 2em; margin-bottom: 2.4vh; }
.pg-princ h3 { font-size: 1.35em; font-weight: 550; letter-spacing: -0.02em; margin-bottom: 0.6em; }
.pg-princ p { font-size: 0.97em; line-height: 1.65; color: var(--ac-muted); max-width: 26em; }
.pg-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6vw; }
.pg-cat { position: relative; display: block; border-radius: var(--r-lg); overflow: hidden; background: var(--ac-panel); border: 1px solid var(--ac-line-soft); transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.3s; }
.pg-cat-art { aspect-ratio: 4 / 3; overflow: hidden; }
.pg-cat-art img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1); }
/* the About cards turn through their products (home.js, data-turn): the pictures stack and cross-fade; the card's own
   lift-and-zoom on hover is kept */
.pg-cat-art[data-turn] { position: relative; background: #f5f5f0; }
.pg-cat-art[data-turn] img { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s ease, transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1); }
.pg-cat-art[data-turn] img.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .pg-cat-art[data-turn] img { transition: none; } }
.pg-cat-body { position: relative; padding: 1.5em 3.6em 1.7em 1.5em; }
.pg-cat-body h3 { font-size: 1.5em; font-weight: 550; letter-spacing: -0.03em; }
.pg-cat-body p { margin-top: 0.5em; font-size: 0.9em; line-height: 1.5; color: var(--ac-muted); }
.pg-cat .go, .pg-cta .go, .pg-chan .go, .pg-pol .go { position: absolute; width: 1.1em; height: 1.1em; transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.pg-cat .go { right: 1.5em; top: 1.8em; }
.pg-cat:hover { transform: translateY(-6px); border-color: var(--ac-line); }
.pg-cat:hover .pg-cat-art img { transform: scale(1.05); }
.pg-cat:hover .go, .pg-cta:hover .go, .pg-chan:hover .go, .pg-pol:hover .go { transform: translateX(5px); }
.pg-ctas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.6vw; }
.pg-cta { position: relative; display: flex; flex-direction: column; gap: 0.4em; padding: 2.2em 2em; border-radius: var(--r-lg); border: 1px solid var(--ac-line); transition: background 0.35s, color 0.35s, border-color 0.35s; }
.pg-cta .ic { width: 1.6em; height: 1.6em; margin-bottom: 3vh; }
.pg-cta .t { font-size: 1.4em; font-weight: 550; letter-spacing: -0.02em; }
.pg-cta .d { font-size: 0.9em; color: var(--ac-muted); transition: color 0.35s; }
.pg-cta .go { right: 2em; top: 2.2em; }
.pg-cta:hover { background: var(--ac-red); border-color: var(--ac-red); color: #fff; }
.pg-cta:hover .d { color: rgba(245, 246, 238, 0.66); }

/* ---------------------------------------------------------------- contact */
.pg-chans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2vw; }
.pg-chan { position: relative; display: flex; flex-direction: column; min-height: 17em; padding: 1.8em 1.7em 1.7em; border-radius: var(--r-lg); background: var(--ac-panel); border: 1px solid var(--ac-line-soft); transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1), border-color 0.3s, background 0.3s; }
.pg-chan:hover { transform: translateY(-6px); border-color: var(--ac-ink); background: var(--alda-paper); }
.pg-chan-hit { position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.pg-chan-ic { display: grid; place-items: center; width: 2.8em; height: 2.8em; border-radius: 100px; border: 1px solid var(--ac-line); transition: background 0.3s, color 0.3s, border-color 0.3s; }
.pg-chan-ic .ic { width: 1.15em; height: 1.15em; }
.pg-chan:hover .pg-chan-ic { background: var(--ac-red); border-color: var(--ac-red); color: #fff; }
.pg-chan-k { margin-top: auto; padding-top: 4vh; font-size: 0.72em; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ac-muted); }
.pg-chan-v { margin-top: 0.45em; font-size: clamp(18px, 1.45vw, 23px); font-weight: 550; letter-spacing: -0.02em; white-space: nowrap; }
@media (max-width: 1359px) { .pg-chans { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pg-chan { min-height: 13.5em; } .pg-chan-v { font-size: clamp(20px, 2vw, 26px); } }
.pg-chan-m { margin-top: 0.4em; font-size: 0.84em; color: var(--ac-muted); }
.pg-chan .go { right: 1.6em; top: 1.9em; }
.pg-copy { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 0.45em; padding: 0.3em 0.75em; margin-left: -0.2em; border-radius: 100px; border: 1px solid var(--ac-line); background: transparent; font: inherit; font-size: 0.95em; color: var(--ac-ink); cursor: pointer; transition: background 0.25s, color 0.25s; }
.pg-copy:hover { background: var(--ac-red); color: #fff; }
.pg-copy.is-done { background: var(--ac-ink); color: var(--ac-bg); }
.pg-contact { display: grid; grid-template-columns: 7fr 4fr; gap: 6vw; align-items: start; }
.pg-form { display: grid; grid-template-columns: 1fr 1fr; gap: 3vh 2.2vw; }
.pg-field { display: flex; flex-direction: column; gap: 0.5em; }
.pg-field.is-wide, .pg-form .is-wide { grid-column: 1 / -1; }
.pg-field label { display: block; margin: 0; font-size: 0.8em; font-weight: 500; letter-spacing: 0.02em; color: var(--ac-muted); }
.pg-field label small { opacity: 0.7; margin-left: 0.3em; }
.pg-field :is(input, select, textarea) { width: 100%; padding: 0.75em 0; border: 0; border-bottom: 1px solid var(--ac-line); border-radius: 0; background: transparent; font: inherit; font-size: 1.05em; color: var(--ac-ink); outline: 0; transition: border-color 0.25s; }
.pg-field select { appearance: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23222' stroke-width='1.4'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E") right 0.2em center / 0.9em no-repeat; cursor: pointer; }
.pg-field textarea { resize: vertical; min-height: 8em; line-height: 1.5; }
.pg-field :is(input, select, textarea):focus { border-bottom-color: var(--ac-ink); }
.pg-field.is-invalid :is(input, textarea) { border-bottom-color: var(--ac-red); }
.pg-form-foot { display: flex; align-items: center; gap: 1.6em; flex-wrap: wrap; margin-top: 1vh; }
.pg-form-note { max-width: 24em; font-size: 0.8em; line-height: 1.5; color: var(--ac-muted); }
.pg-form-msg { min-height: 1.2em; font-size: 0.9em; }
.pg-form-msg.is-error::before { content: ""; display: inline-block; width: 0.45em; height: 0.45em; border-radius: 100px; background: var(--ac-red); margin-right: 0.6em; vertical-align: 0.1em; }
.pg-side { display: flex; flex-direction: column; gap: 1.4em; position: sticky; top: calc(var(--sn-height, 88px) + 28px); }
.pg-card { padding: 1.9em; border-radius: var(--r-lg); background: var(--ac-panel); border: 1px solid var(--ac-line-soft); }
.pg-card h3 { font-size: 0.72em; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 550; color: var(--ac-muted); margin-bottom: 1.4em; }
.pg-dl > div { padding: 0.9em 0; border-top: 1px solid var(--ac-line-soft); }
.pg-dl dt { font-size: 0.84em; color: var(--ac-muted); }
.pg-dl dd { margin-top: 0.25em; font-size: 1.12em; font-weight: 550; }
.pg-dl dd small { display: block; margin-top: 0.3em; font-size: 0.72em; font-weight: 500; color: var(--ac-muted); }
.pg-dl a:hover { color: var(--ac-red); }
.pg-office address { font-style: normal; font-size: 1.05em; line-height: 1.55; margin-bottom: 1.1em; }
.pg-map { margin-top: 1.6em; aspect-ratio: 4 / 3; border-radius: var(--r-md); overflow: hidden; background: #e9eae2; }
.pg-map iframe, .pg-stores-map iframe { display: block; width: 100%; height: 100%; border: 0; filter: grayscale(1) contrast(1.02) brightness(1.02); transition: filter 0.6s; }
.pg-map:hover iframe, .pg-stores-map:hover iframe { filter: grayscale(0.2); }
.pg-qs { border-top: 1px solid var(--ac-line-soft); }

/* ---------------------------------------------------------------- questions (FAQ, contact) */
.pg-q { border-bottom: 1px solid var(--ac-line-soft); }
.pg-q summary { list-style: none; display: grid; grid-template-columns: 1fr auto; gap: 1.4em; align-items: center; padding: 1.35em 0; font-size: 1.08em; cursor: pointer; transition: color 0.2s; }
.pg-q summary::-webkit-details-marker { display: none; }
.pg-q summary:hover { color: var(--ac-red); }
.pg-q summary i { position: relative; width: 2.1em; height: 2.1em; border-radius: 100px; border: 1px solid var(--ac-line); transition: background 0.3s, border-color 0.3s, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.pg-q summary i::before, .pg-q summary i::after { content: ""; position: absolute; left: 50%; top: 50%; width: 0.8em; height: 1.2px; background: currentColor; transform: translate(-50%, -50%); transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1); }
.pg-q summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.pg-q[open] summary i { background: var(--ac-ink); border-color: var(--ac-ink); color: var(--ac-bg); transform: rotate(180deg); }
.pg-q[open] summary i::after { transform: translate(-50%, -50%) rotate(0); }
.pg-a { overflow: hidden; }
.pg-a > div { padding: 0 3.4em 1.6em 0; }
.pg-a p { font-size: 0.98em; line-height: 1.7; color: var(--ac-muted); max-width: 42em; }
.pg-a p.pg-a-links { margin-top: 1.1em; }
.pg-faq { display: grid; grid-template-columns: minmax(0, 1fr) 21em; gap: 5vw; align-items: start; margin-top: 4vh; }
.pg-faq-group { scroll-margin-top: calc(var(--sn-height, 88px) + 90px); margin-bottom: 7vh; }
.pg-faq-group[hidden] { display: none; }
.pg-faq-h { display: flex; align-items: center; gap: 0.7em; font-size: 1.55em; font-weight: 550; letter-spacing: -0.02em; padding-bottom: 1em; border-bottom: 1px solid var(--ac-ink); }
.pg-faq-h small { display: grid; place-items: center; min-width: 1.9em; height: 1.9em; padding: 0 0.4em; border-radius: 100px; background: var(--ac-panel); border: 1px solid var(--ac-line-soft); font-size: 0.5em; font-weight: 500; color: var(--ac-muted); }
.pg-q mark { background: rgba(232, 0, 42, 0.12); color: inherit; border-radius: 3px; padding: 0 0.1em; }
.pg-faq-empty { padding: 5vh 0; font-size: 1.1em; }
.pg-faq-empty a { text-decoration: underline; text-underline-offset: 0.2em; }
.pg-faq-list .pg-chips { margin-bottom: 4vh; }
[data-faq-topics] { position: sticky; top: calc(var(--sn-height, 88px) + 16px); z-index: 5; padding: 0.6em 0; background: var(--ac-bg); }
.pg-help { position: sticky; top: calc(var(--sn-height, 88px) + 90px); display: flex; flex-direction: column; padding: 2.1em 1.9em 1.4em; border-radius: var(--r-xl); background: var(--ac-ink); color: var(--ac-bg); }
.pg-help .hm-eyebrow { color: rgba(245, 246, 238, 0.6); }
.pg-help-h { margin: 0.7em 0 0.4em; font-size: 1.7em; font-weight: 550; letter-spacing: -0.03em; }
.pg-help-p { font-size: 0.9em; color: rgba(245, 246, 238, 0.66); margin-bottom: 1.8em; }
.pg-help a { position: relative; display: flex; align-items: center; gap: 0.85em; padding: 1em 2em 1em 0; border-top: 1px solid rgba(245, 246, 238, 0.14); font-size: 0.95em; overflow-wrap: anywhere; }
.pg-help a .ic { width: 1.1em; height: 1.1em; opacity: 0.8; }
.pg-help a .go { position: absolute; right: 0; opacity: 0.7; transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.3s; }
.pg-help a:hover .go { transform: translateX(4px); opacity: 1; }
.pg-help a:hover span { text-decoration: underline; text-underline-offset: 0.2em; }

/* ---------------------------------------------------------------- stores */
.pg-stores-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6em; margin-bottom: 3vh; }
.pg-stores.is-empty .pg-stores-bar { display: none; }
.pg-stores.is-empty .pg-stores-list { max-height: none; overflow: visible; }
.pg-stores-bar .pg-search { flex: 1 1 18em; }
.pg-stores-count { margin-left: auto; font-size: 0.88em; color: var(--ac-muted); }
.pg-stores-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 1.6vw; align-items: start; }
.pg-stores-list { display: flex; flex-direction: column; gap: 0.8em; max-height: 72vh; overflow-y: auto; overscroll-behavior: contain; padding-right: 0.3em; }
.pg-stores-map { position: sticky; top: calc(var(--sn-height, 88px) + 24px); aspect-ratio: 5 / 4; max-height: 72vh; border-radius: var(--r-xl); overflow: hidden; background: #e9eae2; border: 1px solid var(--ac-line-soft); }
.pg-store { position: relative; padding: 1.5em 1.6em; border-radius: var(--r-md); background: var(--ac-panel); border: 1px solid var(--ac-line-soft); cursor: pointer; transition: border-color 0.25s, background 0.25s, transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.pg-store:hover { border-color: var(--ac-line); background: var(--alda-paper); }
.pg-store.is-on { border-color: var(--ac-ink); background: var(--alda-paper); }
.pg-store .hm-eyebrow { margin-bottom: 0.7em; }
.pg-store h3 { font-size: 1.15em; font-weight: 550; letter-spacing: -0.01em; }
.pg-store p { margin-top: 0.35em; font-size: 0.9em; line-height: 1.5; color: var(--ac-muted); }
.pg-store .pg-store-actions { display: flex; flex-wrap: wrap; gap: 0.4em; margin-top: 1em; }
.pg-store-actions a { display: inline-flex; align-items: center; gap: 0.45em; padding: 0.45em 0.9em; border-radius: 100px; border: 1px solid var(--ac-line); color: var(--ac-ink); font-size: 0.95em; transition: background 0.25s, color 0.25s; }
.pg-store-actions a:hover { background: var(--ac-red); color: #fff; }
.pg-store-actions .ic { width: 0.95em; height: 0.95em; }
.pg-stores-empty { padding: 2.4em 2em; border-radius: var(--r-lg); border: 1px dashed var(--ac-line); }
.pg-stores-empty h2 { margin: 1.2em 0 0.5em; font-size: 1.45em; font-weight: 550; letter-spacing: -0.02em; }
.pg-stores-empty p { font-size: 0.95em; line-height: 1.6; color: var(--ac-muted); max-width: 30em; }
.pg-stores-empty p a { color: var(--ac-ink); text-decoration: underline; text-underline-offset: 0.2em; }
.pg-stores-empty .hm-actions { margin-top: 1.6em; }
.pg-stores-dealer { display: flex; align-items: flex-end; justify-content: space-between; gap: 3em; flex-wrap: wrap; padding-top: 6vh; border-top: 1px solid var(--ac-line); }
.pg-stores-dealer .hm-h { margin: 0.6em 0 0.5em; }

/* ---------------------------------------------------------------- care guides */
.pg-tabs { position: sticky; top: calc(var(--sn-height, 88px) + 12px); z-index: 20; padding: 0.7em 0; }
.pg-tabs-in { display: flex; gap: 0.35em; width: max-content; max-width: calc(100% - 2 * var(--hm-gut)); margin: 0 auto; padding: 0.35em; border-radius: 100px; background: rgba(251, 251, 245, 0.82); border: 1px solid var(--ac-line-soft); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); overflow-x: auto; scrollbar-width: none; box-shadow: 0 8px 30px rgba(34, 34, 34, 0.06); }
.pg-tabs-in::-webkit-scrollbar { display: none; }
.pg-tabs a { flex: none; padding: 0.55em 1.05em; border-radius: 100px; font-size: 0.86em; color: var(--ac-muted); transition: background 0.3s, color 0.3s; white-space: nowrap; }
.pg-tabs a:hover { color: var(--ac-ink); }
.pg-tabs a.is-on { background: var(--ac-ink); color: var(--ac-bg); }
.pg-guide { padding: 9vh 0; border-top: 1px solid var(--ac-line); scroll-margin-top: calc(var(--sn-height, 88px) + 70px); }
.pg-guide:first-child { border-top: 0; padding-top: 5vh; }
.pg-guide-head { display: grid; grid-template-columns: 4fr 7fr; gap: 5vw; align-items: center; }
/* each guide shows its range's product as its white PDP main view, filling the frame (2026-10-14; cut-out renders on
   the studio backdrop before) - a guide with no picture keeps the named placeholder */
.pg-guide-art { aspect-ratio: 1; border-radius: var(--r-xl); overflow: hidden; background: #f3f4ef; border: 1px solid var(--ac-line-soft); display: grid; place-items: center; }
.pg-guide-art img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s cubic-bezier(0.2, 0.7, 0.2, 1); }
.pg-guide-art:hover img { transform: scale(1.05) rotate(-2deg); }
.pg-guide-head .hm-h { margin: 0.5em 0 0.5em; }
.pg-guide-head .hm-p { margin-bottom: 1.6em; }
.pg-guide-body { display: grid; grid-template-columns: 7fr 4fr; gap: 5vw; margin-top: 7vh; align-items: start; }
.pg-steps li { display: grid; grid-template-columns: 3.6em 1fr; gap: 1em; padding: 2.4vh 0; border-top: 1px solid var(--ac-line-soft); }
.pg-steps li:last-child { border-bottom: 1px solid var(--ac-line-soft); }
.pg-step-n { font-size: 0.82em; color: var(--ac-muted); font-variant-numeric: tabular-nums; padding-top: 0.2em; }
.pg-steps h3 { font-size: 1.08em; font-weight: 550; margin-bottom: 0.35em; }
.pg-steps p { font-size: 0.95em; line-height: 1.65; color: var(--ac-muted); }
.pg-avoid { position: sticky; top: calc(var(--sn-height, 88px) + 110px); padding: 1.9em; border-radius: var(--r-lg); background: var(--ac-panel); border: 1px solid var(--ac-line-soft); }
.pg-avoid h3 { display: flex; align-items: center; gap: 0.6em; font-size: 0.72em; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 550; margin-bottom: 1.2em; }
.pg-avoid h3::before { content: ""; width: 0.5em; height: 0.5em; border-radius: 100px; background: var(--ac-red); }
.pg-avoid li { position: relative; padding: 0.7em 0 0.7em 1.4em; border-top: 1px solid var(--ac-line-soft); font-size: 0.93em; line-height: 1.5; }
.pg-avoid li::before { content: ""; position: absolute; left: 0; top: 1.25em; width: 0.7em; height: 1.2px; background: var(--ac-ink); }
.pg-care-foot { display: grid; grid-template-columns: 21em 1fr; gap: 5vw; align-items: start; }
.pg-care-foot .pg-help { position: static; }
.pg-care-links { display: flex; flex-direction: column; align-items: flex-start; gap: 1.2em; padding-top: 1em; }

/* ---------------------------------------------------------------- policies */
.pg-hero.is-policy .pg-title { font-size: clamp(40px, 5vw, 84px); }
.pg-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8em; margin-bottom: 3vh; }
.pg-summary > div { padding: 1.5em 1.4em; border-radius: var(--r-md); background: var(--ac-panel); border: 1px solid var(--ac-line-soft); }
.pg-summary span { display: block; font-size: 0.78em; color: var(--ac-muted); }
.pg-summary strong { display: block; margin-top: 0.5em; font-size: 1.25em; font-weight: 550; letter-spacing: -0.02em; }
.pg-doc { display: grid; grid-template-columns: 16em minmax(0, 1fr); gap: 6vw; align-items: start; }
.pg-toc { position: sticky; top: calc(var(--sn-height, 88px) + 28px); display: flex; flex-direction: column; gap: 0.1em; }
.pg-toc p { font-size: 0.72em; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ac-muted); margin-bottom: 1em; }
.pg-toc a { position: relative; padding: 0.5em 0 0.5em 1em; font-size: 0.9em; line-height: 1.35; color: var(--ac-muted); border-left: 1px solid var(--ac-line); transition: color 0.25s, border-color 0.25s; }
.pg-toc a:hover { color: var(--ac-ink); }
.pg-toc a.is-on { color: var(--ac-ink); border-left-color: var(--ac-red); }
.pg-docbody { max-width: 46em; }
.pg-docbody section { padding: 0 0 5vh; scroll-margin-top: calc(var(--sn-height, 88px) + 28px); }
.pg-docbody h2 { font-size: 1.55em; font-weight: 550; letter-spacing: -0.02em; margin-bottom: 0.8em; }
.pg-docbody p { font-size: 1.02em; line-height: 1.78; color: #3d3e39; margin-bottom: 1em; }
.pg-docbody ul { margin: 0.4em 0 1em; }
.pg-docbody li { position: relative; padding: 0.55em 0 0.55em 1.6em; font-size: 1em; line-height: 1.7; color: #3d3e39; border-top: 1px solid var(--ac-line-soft); }
.pg-docbody li::before { content: ""; position: absolute; left: 0.1em; top: 1.3em; width: 0.8em; height: 1.2px; background: var(--ac-ink); }
.pg-pol-foot { display: grid; grid-template-columns: minmax(0, 1fr) 21em; gap: 5vw; align-items: start; padding-top: 6vh; border-top: 1px solid var(--ac-line); }
.pg-pol-foot .pg-help { position: static; }
.pg-pols { display: flex; flex-direction: column; margin-top: 1.4em; }
.pg-pol { position: relative; display: flex; flex-direction: column; gap: 0.35em; padding: 1.25em 3em 1.25em 0; border-top: 1px solid var(--ac-line-soft); font-size: 1.15em; letter-spacing: -0.01em; transition: color 0.2s; }
.pg-pol:hover { color: var(--ac-red); }
.pg-pol .go { right: 0.4em; top: 50%; margin-top: -0.55em; }
.pg-pol small { font-size: 0.72em; color: var(--ac-muted); letter-spacing: 0; }
.pg-pols.is-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 3vw; margin-top: 0; }
.pg-pol.is-big { padding: 2em 3em 2em 0; font-size: 1.5em; }

/* ---------------------------------------------------------------- recipes */
.rc-feature { display: grid; grid-template-columns: 7fr 5fr; border-radius: var(--r-xl); overflow: hidden; background: var(--ac-panel); border: 1px solid var(--ac-line-soft); transition: border-color 0.3s; }
.rc-feature:hover { border-color: var(--ac-line); }
.rc-feature-art { aspect-ratio: 4 / 3.4; overflow: hidden; }
.rc-feature-art img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.rc-feature:hover .rc-feature-art img { transform: scale(1.04); }
.rc-feature-body { display: flex; flex-direction: column; justify-content: center; gap: 1.1em; padding: 4vw; }
.rc-feature-body .hm-h { margin-top: 0.1em; }
.rc-feature-body .hm-btn { align-self: flex-start; margin-top: 1em; }
.rc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55em; font-size: 0.86em; color: var(--ac-muted); }
.rc-meta .ic { width: 1em; height: 1em; }
.rc-meta .dot { width: 3px; height: 3px; border-radius: 100px; background: currentColor; opacity: 0.6; }
.rc-fwith { display: flex; align-items: center; gap: 0.3em; font-size: 0.84em; color: var(--ac-muted); }
.rc-fthumb { display: grid; place-items: center; width: 2.6em; height: 2.6em; border-radius: 100px; background: var(--ac-bg); border: 1px solid var(--ac-line-soft); overflow: hidden; }
.rc-fthumb + .rc-fthumb { margin-left: -0.8em; }
.rc-fthumb img { width: 76%; height: auto; }
.rc-fwith span:last-child { margin-left: 0.6em; }
.rc-bar { display: flex; align-items: center; justify-content: space-between; gap: 1.5em; margin: 2vh 0 4vh; }
.rc-count { flex: none; font-size: 0.88em; color: var(--ac-muted); }
.rc-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5vh 1.6vw; }
.rc-card { display: block; }
.rc-card[hidden] { display: none; }
.rc-art { aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden; background: var(--ac-panel); }
.rc-art img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
.rc-card:hover .rc-art img { transform: scale(1.05); }
.rc-body { padding-top: 1.2em; }
.rc-tags { font-size: 0.72em; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ac-muted); }
.rc-body h3 { margin: 0.45em 0 0.55em; font-size: 1.45em; font-weight: 550; letter-spacing: -0.025em; line-height: 1.15; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; display: inline; transition: background-size 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.rc-card:hover .rc-body h3 { background-size: 100% 1px; }
.rc-body .rc-meta { margin-top: 0.8em; }
.rc-with { margin-top: 0.5em; font-size: 0.84em; color: var(--ac-muted); }
.pg-pgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.4vw; }
.pg-pcard .art img { width: 100%; }
.pg-pcard .ph { aspect-ratio: 1; border-radius: var(--r-md); }

/* the recipe page */
.rc { padding-top: 3vh; }
.rc-layout { display: grid; grid-template-columns: 5fr 6fr; gap: 5vw; align-items: start; }
.rc-media { align-self: stretch; }
.rc-sticky { position: sticky; top: calc(var(--sn-height, 88px) + 20px); }
.rc-hero { aspect-ratio: 4 / 5; max-height: calc(100vh - var(--sn-height, 88px) - 44px); border-radius: var(--r-xl); overflow: hidden; background: var(--ac-panel); }
.rc-hero img { width: 100%; height: 100%; object-fit: cover; }
.rc-main .pg-crumb { margin-bottom: 4vh; }
.rc-main .hm-eyebrow { margin-bottom: 1.4em; }
.rc-facts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 4vh; border-top: 1px solid var(--ac-ink); border-bottom: 1px solid var(--ac-line-soft); }
.rc-facts li { padding: 1.1em 0.8em 1.1em 0; }
.rc-facts li + li { padding-left: 0.8em; border-left: 1px solid var(--ac-line-soft); }
.rc-facts span { display: block; font-size: 0.74em; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ac-muted); }
.rc-facts strong { display: block; margin-top: 0.45em; font-size: 1.02em; font-weight: 550; }
.rc-note { display: flex; align-items: center; gap: 0.6em; margin-top: 1.4em; font-size: 0.9em; color: var(--ac-muted); }
.rc-note .ic { width: 1.05em; height: 1.05em; }
.rc-actions { display: flex; flex-wrap: wrap; gap: 0.5em; margin-top: 3vh; }
.rc-sec { margin-top: 8vh; scroll-margin-top: calc(var(--sn-height, 88px) + 24px); }
.rc-sec h2 { font-size: clamp(26px, 2.1vw, 36px); font-weight: 550; letter-spacing: -0.03em; }
.rc-sec > h2 { margin-bottom: 3vh; }
.rc-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 1em; flex-wrap: wrap; margin-bottom: 3vh; }
.rc-serves { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.3em; border-radius: 100px; border: 1px solid var(--ac-line); font-size: 0.92em; }
.rc-serves button { display: grid; place-items: center; width: 2.1em; height: 2.1em; border-radius: 100px; border: 0; background: var(--ac-panel); color: var(--ac-ink); cursor: pointer; transition: background 0.25s, color 0.25s; }
.rc-serves button:hover { background: var(--ac-red); color: #fff; }
.rc-serves button:disabled { opacity: 0.35; cursor: default; background: var(--ac-panel); color: var(--ac-ink); }
.rc-serves .ic { width: 0.8em; height: 0.8em; }
.rc-serves output { min-width: 1.6em; text-align: center; font-weight: 550; font-variant-numeric: tabular-nums; }
.rc-serves span { padding-right: 0.5em; color: var(--ac-muted); }
.rc-group + .rc-group { margin-top: 3.4vh; }
.rc-group h3 { font-size: 0.74em; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 550; color: var(--ac-muted); margin-bottom: 0.8em; }
.rc-ings li { border-top: 1px solid var(--ac-line-soft); }
.rc-ings li:last-child { border-bottom: 1px solid var(--ac-line-soft); }
.rc-ings label { display: flex; align-items: flex-start; gap: 0.9em; margin: 0; padding: 0.85em 0; font-weight: 500; cursor: pointer; }
.rc-ings input { position: absolute; opacity: 0; pointer-events: none; }
.rc-tick { display: grid; place-items: center; flex: none; width: 1.35em; height: 1.35em; margin-top: 0.1em; border-radius: 100px; border: 1px solid var(--ac-line); color: transparent; transition: background 0.25s, border-color 0.25s, color 0.25s; }
.rc-tick .ic { width: 0.8em; height: 0.8em; }
.rc-ings input:focus-visible + .rc-tick { border-color: var(--ac-ink); }   /* the row's tint and ink bar: "focus: Option C" */
.rc-ings input:checked + .rc-tick { background: var(--ac-ink); border-color: var(--ac-ink); color: var(--ac-bg); }
.rc-line { flex: 1; display: grid; grid-template-columns: 5.4em minmax(0, 1fr); column-gap: 0.6em; font-size: 1em; line-height: 1.5; transition: color 0.25s, opacity 0.25s; }
.rc-ings input:checked ~ .rc-line { opacity: 0.45; text-decoration: line-through; text-decoration-thickness: 1px; }
.rc-q { font-weight: 550; font-variant-numeric: tabular-nums; }
.rc-q.is-flash { animation: rc-flash 0.6s ease; }
@keyframes rc-flash { 0% { color: var(--ac-red); } 100% { color: inherit; } }
.rc-line small { color: var(--ac-muted); font-size: 0.88em; }
.rc-hint { margin-top: 1.4em; font-size: 0.8em; color: var(--ac-muted); }
.rc-step { display: grid; grid-template-columns: 3.2em 1fr; gap: 1.2em; padding: 3.2vh 0; border-top: 1px solid var(--ac-line-soft); opacity: 0.4; transition: opacity 0.5s; }
.rc-step:last-child { border-bottom: 1px solid var(--ac-line-soft); }
.rc-step.is-active, .rc-step.is-done { opacity: 1; }
.rc-step.is-done .rc-step-n { background: var(--ac-panel); }
.rc-step-n { display: grid; place-items: center; width: 2.3em; height: 2.3em; border-radius: 100px; border: 1px solid var(--ac-line); font-size: 0.9em; font-variant-numeric: tabular-nums; transition: background 0.4s, color 0.4s, border-color 0.4s; }
.rc-step.is-active .rc-step-n { background: var(--ac-ink); border-color: var(--ac-ink); color: var(--ac-bg); }
.rc-step h3 { font-size: 1.15em; font-weight: 550; margin: 0.3em 0 0.45em; }
.rc-step p { font-size: 1.02em; line-height: 1.7; color: #3d3e39; max-width: 36em; }
.rc-tip { margin-top: 6vh; padding: 2.2em 2.2em 2.4em; border-radius: var(--r-lg); background: var(--ac-panel); border: 1px solid var(--ac-line-soft); }
.rc-tip p:last-child { margin-top: 0.9em; font-size: 1.25em; font-weight: 400; line-height: 1.45; letter-spacing: -0.01em; }
.rc-prods { border-top: 1px solid var(--ac-line-soft); }
.rc-prod { display: grid; grid-template-columns: 5.6em minmax(0, 1fr) auto; gap: 1.3em; align-items: center; padding: 1.2em 0; border-bottom: 1px solid var(--ac-line-soft); }
.rc-prod-art { display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--r-md); background: var(--ac-panel); border: 1px solid var(--ac-line-soft); overflow: hidden; }
.rc-prod-art img { width: 80%; height: auto; transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
.rc-prod:hover .rc-prod-art img { transform: scale(1.08) rotate(-3deg); }
.rc-prod-n { font-size: 1.08em; font-weight: 550; }
.rc-prod-n:hover { color: var(--ac-red); }
.rc-prod-body p { margin-top: 0.3em; font-size: 0.88em; line-height: 1.5; color: var(--ac-muted); }
.rc-prod-p { display: block; margin-top: 0.4em; font-size: 0.86em; font-variant-numeric: tabular-nums; }
.rc-prod .hm-add { position: static; }
.rc-more { border-top: 1px solid var(--ac-line); margin-top: 8vh; }
.rc-grid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ---------------------------------------------------------------- search (page + overlay) */
.pg-hero.is-search .pg-title { font-size: clamp(36px, 4vw, 64px); }
.pg-popular { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45em; margin-top: 2.6vh; }
.pg-popular > span { margin-right: 0.5em; font-size: 0.8em; color: var(--ac-muted); }
.srch-sec + .srch-sec { margin-top: 6vh; }
.srch-h { display: flex; align-items: baseline; gap: 0.6em; margin-bottom: 2.4vh; font-size: 0.74em; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 550; color: var(--ac-muted); }
.srch-products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6vw; }
.srch a, .srch-results a { color: inherit; text-decoration: none; }
.srch :where(h2, p) { margin: 0; }
.srch-card { display: block; }
.srch-card-n, .srch-card-s { display: block; }
.srch-card-art { position: relative; display: grid; place-items: center; aspect-ratio: 1; border-radius: var(--r-md); background: var(--ac-panel); border: 1px solid var(--ac-line-soft); overflow: hidden; transition: border-color 0.3s, background 0.3s; }
.srch-card-art img { width: 78%; height: 78%; object-fit: contain; transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.srch-card.is-photo .srch-card-art img { width: 100%; height: 100%; object-fit: cover; }
.srch-card:hover .srch-card-art { border-color: var(--ac-line); background: var(--alda-paper); }
.srch-card:hover .srch-card-art img { transform: scale(1.05); }
.srch-card-n { margin-top: 0.8em; font-weight: 550; font-size: 0.98em; line-height: 1.3; }
.srch-card-s { margin-top: 0.25em; font-size: 0.8em; color: var(--ac-muted); }
.srch-list a { position: relative; display: flex; flex-direction: column; gap: 0.25em; padding: 1em 2.4em 1em 0; border-top: 1px solid var(--ac-line-soft); transition: color 0.2s; }
.srch-list a:last-child { border-bottom: 1px solid var(--ac-line-soft); }
.srch-list a:hover { color: var(--ac-red); }
.srch-list b { font-weight: 550; }
.srch-list small { font-size: 0.8em; color: var(--ac-muted); }
.srch-list .ic { position: absolute; right: 0.3em; top: 50%; margin-top: -0.5em; transition: transform 0.3s; }
.srch-list a:hover .ic { transform: translateX(4px); }
.srch-empty { padding: 4vh 0; font-size: 1.1em; }
.srch-empty p + p { margin-top: 0.6em; font-size: 0.9em; color: var(--ac-muted); }
.srch mark, .srch-results mark { background: none; color: inherit; box-shadow: inset 0 -0.18em 0 rgba(232, 0, 42, 0.28); }
.srch { position: fixed; inset: 0; z-index: 300012; pointer-events: none; visibility: hidden; }
.srch.is-open { pointer-events: auto; visibility: visible; }
.srch-scrim { position: absolute; inset: 0; background: rgba(34, 34, 34, 0.34); opacity: 0; transition: opacity 0.45s; }
.srch.is-open .srch-scrim { opacity: 1; }
.srch-panel { position: absolute; left: 0; right: 0; top: 0; max-height: 88vh; overflow-y: auto; overscroll-behavior: contain; padding: 3vh var(--hm-gut) 5vh; background: var(--ac-bg); border-radius: 0 0 var(--r-xl) var(--r-xl); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.16); transform: translateY(-104%); transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1); font-family: Geist, Arial, sans-serif; color: var(--ac-ink); }
.srch.is-open .srch-panel { transform: none; }
.srch-bar { display: flex; align-items: center; gap: 1em; padding-bottom: 0.4em; border-bottom: 1px solid var(--ac-ink); }
.srch-bar .ic { width: 1.6em; height: 1.6em; color: var(--ac-muted); }
.srch-bar input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: clamp(24px, 3vw, 48px); letter-spacing: -0.03em; padding: 0.3em 0; color: var(--ac-ink); }
.srch-close { display: grid; place-items: center; width: 2.8em; height: 2.8em; border-radius: 100px; border: 1px solid var(--ac-line); background: transparent; color: var(--ac-ink); cursor: pointer; transition: background 0.25s, border-color 0.25s, color 0.25s, transform 0.4s; }
/* on hover it fills red, outline included, with the x in cream (the user, 2026-10-15: "just have it fill with red and
   the x in cream" - it was white) */
.srch-close:hover { background: var(--ac-red); border-color: var(--ac-red); color: var(--ac-bg); transform: rotate(90deg); }
.srch-close .ic { width: 1em; height: 1em; transition: color 0.25s; }
/* the x takes .srch-bar .ic's muted grey at rest, so the hover sets its cream on the icon itself */
.srch-close:hover .ic { color: var(--ac-bg); }
.srch-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 4vw; margin-top: 4vh; }
.srch-body .srch-products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.srch-body.is-single { grid-template-columns: 1fr; }
.srch-body.is-single .srch-products { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.srch-foot { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-top: 4vh; font-size: 0.8em; color: var(--ac-muted); }
.srch-foot kbd { font: inherit; padding: 0.15em 0.5em; border-radius: 5px; border: 1px solid var(--ac-line); background: var(--ac-panel); }
.srch-all { font-size: 1.1em; }
html.srch-lock, html.srch-lock body { overflow: hidden; }

/* ---------------------------------------------------------------- 404 */
.pg-404 { padding: 8vh 0 4vh; text-align: center; }
.pg-404-n { font-size: clamp(120px, 22vw, 380px); font-weight: 550; letter-spacing: -0.07em; line-height: 0.8; color: transparent; -webkit-text-stroke: 1px var(--ac-ink); }
.pg-404 .pg-title { margin: 3vh auto 0; }
.pg-404 .pg-dek { margin-left: auto; margin-right: auto; }
.pg-404-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5em; margin-top: 3.4vh; }
.pg-pgrid.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------------------------------------------------------------- placeholders */
.ph { position: relative; display: grid; place-items: center; width: 100%; height: 100%; min-height: 100%; background-color: #f0f1e8; background-image: repeating-linear-gradient(135deg, rgba(34, 34, 34, 0.035) 0 1px, transparent 1px 12px); overflow: hidden; }
.ph-card { display: flex; flex-direction: column; align-items: center; gap: 0.35em; max-width: 86%; text-align: center; }
.ph-k { font-size: 0.66em; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ac-muted); }
.ph-n { font-size: clamp(16px, 1.6vw, 24px); font-weight: 550; letter-spacing: -0.02em; line-height: 1.15; color: var(--ac-ink); }
.ph-s { font-size: 0.74em; color: var(--ac-muted); }
.kp-image-pending.ph { aspect-ratio: 1; height: auto; border-radius: 14px; }
.kp-image-pending .ph-n { font-size: clamp(26px, 3vw, 46px); letter-spacing: -0.035em; }
.kp-image-pending .ph-k { font-size: 0.74em; }
.pc-art.is-pending { position: relative; }
.pc-art.is-pending > a { position: absolute; inset: 0; z-index: 2; }
.pc-art.is-pending .ph { position: absolute; inset: 0; border-radius: inherit; }
.pc-art.is-pending .ph span { position: static; left: auto; bottom: auto; }
.pc-art.is-pending .ph-k { font-size: 0.62em; color: var(--ac-muted); }
.pc-art.is-pending .ph-n { font-size: clamp(17px, 1.45vw, 24px); color: var(--ac-ink); }
.pc-art.is-pending .ph-s { font-size: 0.72em; color: var(--ac-muted); }
.ph.is-guide .ph-n { font-size: clamp(22px, 2.4vw, 38px); }

/* ---------------------------------------------------------------- footer (all pages)
   Its own base first, the same values home.css gives it, so it also stands on the product
   pages, which don't load home.css. */
:root { --r-xl: 32px; --r-lg: 24px; --r-md: 16px; --r-sm: 10px; --hm-gut: 8.9vw; }
.hm-foot.sf { position: relative; z-index: 2; padding: 12vh var(--hm-gut) 3vh; font-family: Geist, Arial, sans-serif; font-size: 16px; line-height: 1.5; text-align: left; color: var(--ac-ink); background: var(--ac-bg); }
.hm-foot.sf.is-dark { background: var(--ac-ink); color: var(--ac-bg); border-radius: var(--r-xl) var(--r-xl) 0 0; }
.hm-foot.sf.is-light { border-top: 1px solid var(--ac-line); }
.hm-foot.sf.is-pdp { margin-top: 12vh; }
.hm-foot.sf * { box-sizing: border-box; }
.hm-foot.sf :where(h3, h4, p) { margin: 0; padding: 0; border: 0; color: inherit; font-size: inherit; line-height: inherit; }
.hm-foot.sf :where(a) { color: inherit; text-decoration: none; }
.hm-foot.sf :where(button, input) { font-family: inherit; }
.hm-foot.sf .hm-foot-top { display: grid; gap: var(--ac-gut, 2em); align-items: start; }
.hm-foot.sf h4 { font-size: 0.72em; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 1.3em; opacity: 0.6; }
.hm-foot.sf h4 a:hover, .hm-foot.sf li a:hover { color: var(--ac-red); }
.hm-foot.sf ul { display: grid; gap: 0.6em; font-size: 0.92em; }
.hm-foot.sf li a { transition: color 0.2s; }
.hm-foot.sf .sf-news .hm-h { font-weight: 550; font-size: clamp(20px, 1.5vw, 28px); line-height: 1.2; letter-spacing: -0.02em; }
.hm-foot.sf .sf-news .hm-p { margin-top: 0.9em; line-height: 1.6; max-width: 34em; color: var(--ac-muted); }
.hm-foot.sf.is-dark .sf-news .hm-p { color: rgba(245, 246, 238, 0.7); }
.hm-foot.sf .hm-foot-mark { margin-top: 12vh; }
.hm-foot.sf .hm-foot-mark svg { display: block; width: 100%; height: auto; fill: currentColor; }
.hm-foot.sf .hm-foot-legal { display: flex; justify-content: space-between; gap: 2em; margin-top: 2.4vh; font-size: 0.78em; opacity: 0.6; }
.hm-foot.sf .hm-foot-top { grid-template-columns: 1.7fr repeat(5, minmax(0, 1fr)); }
.hm-foot.sf h4 a { color: inherit; text-decoration: none; }
.hm-foot.sf ul { list-style: none; margin: 0; padding: 0; }
.hm-foot.sf li a { color: inherit; text-decoration: none; }
.hm-foot.sf em { font-style: normal; font-size: 0.72em; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.55; margin-left: 0.3em; }
.sf-news .hm-h { color: inherit; }
.hm-news.sf-news .sf-form { display: flex; align-items: center; gap: 0.4em; margin-top: 1.8em; max-width: 26em; padding: 0.3em 0.3em 0.3em 1.3em; border-radius: 100px; border: 1px solid var(--ac-line); transition: border-color 0.25s; }
.hm-foot.is-dark .sf-news .sf-form { border-color: rgba(245, 246, 238, 0.3); }
.hm-news.sf-news .sf-form:focus-within { border-color: currentColor; }
.hm-news.sf-news .sf-form input { flex: 1; min-width: 0; padding: 0.7em 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 0.92em; color: inherit; }
.hm-news.sf-news .sf-form input::placeholder { color: inherit; opacity: 0.5; }
.hm-news.sf-news .sf-form button { display: grid; place-items: center; flex: none; width: 2.6em; height: 2.6em; border-radius: 100px; border: 1px solid currentColor; background: transparent; color: inherit; cursor: pointer; transition: background 0.25s, color 0.25s; }
.sf-form button .ic { width: 0.9em; height: 0.9em; transition: transform 0.35s; }
.hm-foot.is-dark .sf-form button:hover { background: var(--ac-red); color: #fff; }
.hm-foot.is-light .sf-form button:hover { background: var(--ac-red); color: #fff; }
.sf-form button:hover .ic { transform: translateX(2px); }
.hm-news.sf-news .sf-form.is-done { display: none; }
.sf-msg { min-height: 1.3em; margin-top: 0.8em; font-size: 0.84em; opacity: 0.8; }
.sf-social { display: flex; gap: 0.5em; margin-top: 2.4em; }
.sf-social a { display: grid; place-items: center; width: 2.5em; height: 2.5em; border-radius: 100px; border: 1px solid currentColor; opacity: 0.75; color: inherit; transition: opacity 0.25s, background 0.25s, color 0.25s, transform 0.35s; }
.sf-social a:hover { opacity: 1; transform: translateY(-3px); }
.hm-foot.is-dark .sf-social a:hover { background: var(--ac-red); color: #fff; }
.hm-foot.is-light .sf-social a:hover { background: var(--ac-red); color: #fff; }
.sf-social svg { width: 1em; height: 1em; }
.sf-legal { flex-wrap: wrap; }
.sf-legal-links { display: flex; flex-wrap: wrap; gap: 1.4em; }
.sf-legal-links a { color: inherit; text-decoration: none; transition: color 0.2s; }
.sf-legal-links a:hover { color: var(--ac-red); }

/* ---------------------------------------------------------------- newsletter + notify-me */
.nt { margin-top: 1.2em; }
.nt-form { display: flex; align-items: center; gap: 0.3em; max-width: 22em; padding: 0.25em 0.25em 0.25em 1em; border-radius: 100px; border: 1px solid var(--ac-line); background: var(--ac-bg); }
.nt-form input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 0.86em; color: var(--ac-ink); }
.nt-form button { flex: none; padding: 0.6em 1em; border-radius: 100px; border: 0; background: var(--ac-ink); color: var(--ac-bg); font: inherit; font-size: 0.8em; cursor: pointer; transition: background 0.25s, color 0.25s; }
.nt-form button:hover { background: var(--ac-red); color: #fff; }
.nt-form.is-done { display: none; }
.nt-msg { margin-top: 0.6em; font-size: 0.8em; color: var(--ac-muted); }

/* the header's Sale link and its buttons (search, experience view, cart) live in site-nav.css; Recipes is in the footer only (2026-10-11) */

/* ---------------------------------------------------------------- product page additions */
.kp-service { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8em 1.4em; margin-top: 22px; padding: 16px 18px; border-radius: 14px; background: var(--ac-panel); border: 1px solid rgba(34, 34, 34, 0.08); }
.kp-service li { display: flex; align-items: flex-start; gap: 0.65em; font-size: 12.5px; line-height: 1.45; color: #3d3e39; list-style: none; }
.kp-service .ic { width: 17px; height: 17px; margin-top: 1px; color: var(--alda-ink); }
.kp-service a { color: inherit; text-decoration: underline; text-decoration-color: rgba(34, 34, 34, 0.3); text-underline-offset: 0.2em; transition: text-decoration-color 0.2s, color 0.2s; }
.kp-service a:hover { color: var(--alda-red); text-decoration-color: currentColor; }
ul.kp-service { padding: 16px 18px; margin-bottom: 0; }
.kp-recipes { margin-top: 72px; }
.kp-recipes :where(h2, h3, p, figure) { margin: 0; }
.kp-recipes a { color: inherit; text-decoration: none; }
.kp-recipes .kp-recipes-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1em; margin-bottom: 26px; }
.kp-recipes h2 { font-size: 36px; letter-spacing: -0.04em; margin: 12px 0 0; }
.kp-recipes .rc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 18px; }
.kp-slide { overflow: hidden; cursor: zoom-in; }
.kp-slide img { transition: transform 0.35s ease-out; transform-origin: 50% 50%; will-change: transform; }
.kp-slide.is-zoom img { transform: scale(1.7); }
[data-reveal].rv-wait { transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), transform 1s cubic-bezier(0.2, 0.7, 0.2, 1); }
[data-reveal].rv-wait:not(.is-in) { opacity: 0; transform: translateY(28px); }
.pl-minimal .pc-art { transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.pl-minimal .pc-img { transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.4s; }
.pl-minimal .pc:hover .pc-img:not(.pc-alt) { transform: scale(1.05); }
.pl-minimal .pc:hover .pc-art { transform: translateY(-4px); }
/* the floating buy bar steps aside once the footer arrives, so it never sits on the newsletter */
body.sf-foot-in .ac-buybar.is-on { transform: translate(-50%, 160%); visibility: hidden; transition: transform 0.3s cubic-bezier(0.3, 0.8, 0.3, 1), visibility 0s 0.3s; }
.mi-coming .nt { width: 100%; }
.mi-coming .nt-form { margin: 0 auto; }

/* ---------------------------------------------------------------- responsive */
@media (max-width: 1280px) {
  .hm-foot.sf .hm-foot-top { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .hm-foot.sf .sf-news { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 5vw; align-items: start; margin-bottom: 5vh; }
  .hm-foot.sf .sf-news > .hm-h, .hm-foot.sf .sf-news > .hm-p { grid-column: 1; }
  .hm-foot.sf .sf-news > .sf-form { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; max-width: none; align-self: center; }
  .hm-foot.sf .sf-news > .sf-msg { grid-column: 2; }
  .hm-foot.sf .sf-news > .sf-social { grid-column: 1; margin-top: 1.6em; }
}
@media (max-width: 1100px) {
  .pg-chans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-faq, .pg-contact, .pg-care-foot, .pg-pol-foot { grid-template-columns: 1fr; }
  .pg-side, .pg-help { position: static; }
  .srch-body { grid-template-columns: 1fr; }
  .pg-pgrid, .pg-pgrid.is-4, .srch-products { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .srch-body.is-single .srch-products { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hm-foot.sf .hm-foot-top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hm-foot.sf .sf-news { display: block; }
  .hm-foot.sf .sf-news > .sf-form { margin-top: 1.8em; max-width: 26em; }
  .pg-title { font-size: clamp(40px, 9vw, 72px); }
  .pg-split, .pg-glen-grid, .pg-guide-head, .pg-guide-body, .rc-layout, .rc-feature, .pg-doc, .pg-stores-grid { grid-template-columns: 1fr; }
  .pg-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-stat:nth-child(2) { border-right: 0; }
  .pg-stat:nth-child(3) { padding-left: 0; }
  .pg-stat:nth-child(n + 3) { border-top: 1px solid var(--ac-line-soft); }
  .pg-princs, .pg-cats, .pg-ctas { grid-template-columns: 1fr; gap: 1.2em; }
  .pg-princ { padding-bottom: 1.4em; }
  .pg-band-frame { aspect-ratio: 4 / 3; }
  .pg-glen-art { aspect-ratio: 4 / 3; }
  .pg-guide-art { max-width: 20em; }
  .pg-avoid { position: static; }
  .pg-toc { position: static; flex-direction: row; flex-wrap: wrap; gap: 0.4em; }
  .pg-toc p { width: 100%; }
  .pg-toc a { border-left: 0; padding: 0.4em 0.9em; border-radius: 100px; border: 1px solid var(--ac-line); }
  .pg-toc a.is-on { border-color: var(--ac-ink); }
  .pg-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rc-sticky { position: static; }
  .rc-hero { max-height: none; aspect-ratio: 4 / 4.2; }
  .rc-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rc-facts li:nth-child(4) { padding-left: 0; border-left: 0; }
  .rc-facts li:nth-child(n + 4) { border-top: 1px solid var(--ac-line-soft); }
  .rc-grid, .rc-grid.is-3, .kp-recipes .rc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rc-feature-art { aspect-ratio: 4 / 3.2; }
  .rc-feature-body { padding: 7vw 6vw 8vw; }
  .pg-stores-map { position: relative; top: auto; aspect-ratio: 4 / 3; }
  .pg-stores-list { max-height: none; }
  .pg-pols.is-grid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .pg-hero { padding-top: 3vh; }
  .pg-sec { padding: 8vh 0; }
  .pg-sec-tight { padding: 2vh 0 6vh; }
  .pg-crumb { margin-bottom: 3vh; }
  .pg-statement { font-size: 24px; }
  .pg-chans { grid-template-columns: 1fr; }
  .pg-chan { min-height: 0; }
  .pg-chan-k { padding-top: 2.4vh; }
  .pg-form { grid-template-columns: 1fr; }
  .pg-pgrid, .pg-pgrid.is-4, .srch-products, .srch-body .srch-products, .srch-body.is-single .srch-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3vw; }
  .rc-grid, .rc-grid.is-3, .kp-recipes .rc-grid { grid-template-columns: 1fr; gap: 5vh; }
  .rc-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rc-facts li:nth-child(3), .rc-facts li:nth-child(5) { padding-left: 0; border-left: 0; }
  .rc-facts li:nth-child(4) { padding-left: 0.8em; border-left: 1px solid var(--ac-line-soft); }
  .rc-facts li:nth-child(n + 3) { border-top: 1px solid var(--ac-line-soft); }
  .rc-prod { grid-template-columns: 4.4em minmax(0, 1fr) auto; gap: 1em; }
  .pg-summary { grid-template-columns: 1fr 1fr; }
  .pg-tabs-in { max-width: calc(100% - 24px); }
  .hm-foot.sf { padding: 10vh 16px 3vh; }
  .hm-foot.sf .hm-foot-top { grid-template-columns: 1fr 1fr; gap: 0 1.4em; }
  /* Phones (2026-11-04, the owner: row by row, the short groups left holes beside the long ones and Alda sat alone):
     the groups stack in two balanced columns - Prep, Cook and Store & Serve on the left; Help beside Prep and Cook,
     then Alda level with Store & Serve on the right. */
  .hm-foot.sf .sf-news { margin-bottom: 7vh; }
  .hm-foot.sf .sf-top > .sf-col { grid-column: 1; margin-bottom: 4.5vh; }
  .hm-foot.sf .sf-top > .sf-col:nth-child(2) { grid-row: 2; }
  .hm-foot.sf .sf-top > .sf-col:nth-child(3) { grid-row: 3; }
  .hm-foot.sf .sf-top > .sf-col:nth-child(4) { grid-row: 4; margin-bottom: 0; }
  .hm-foot.sf .sf-top > .sf-col:nth-child(5) { grid-column: 2; grid-row: 2 / span 2; }
  .hm-foot.sf .sf-top > .sf-col:nth-child(6) { grid-column: 2; grid-row: 4; margin-bottom: 0; }
  .hm-foot.sf .hm-foot-mark { margin-top: 8vh; }
  .hm-foot.sf .hm-foot-legal { flex-direction: column; gap: 0.6em; }
  .hm-foot.sf .hm-foot-legal > span:first-child { text-wrap: balance; }   /* never "Glen" alone on the last line */
  .hm-foot.sf .sf-legal-links { gap: 1.1em; }
  .srch-panel { padding: 2.4vh 16px 4vh; }
  .srch-bar input { font-size: 26px; }
  .kp-service { grid-template-columns: 1fr; }
  .kp-recipes h2 { font-size: 28px; }
  .pg-404-n { -webkit-text-stroke-width: 1px; }
  .rc-bar { flex-direction: column; align-items: stretch; }
}
/* the smallest phones: two columns would break "Shipping & delivery" and "Pressure Cookers", so one column */
@media (max-width: 359px) {
  .hm-foot.sf .hm-foot-top { grid-template-columns: minmax(0, 1fr); }
  .hm-foot.sf .sf-top > .sf-col:nth-child(n) { grid-column: 1; grid-row: auto; margin-bottom: 4.5vh; }
  .hm-foot.sf .sf-top > .sf-col:last-child { margin-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pg-page *, .srch-panel, .srch-scrim, .kp-slide img { transition: none !important; animation: none !important; }
  [data-reveal].rv-wait:not(.is-in) { opacity: 1; transform: none; }
}
@media print {
  .sn-header, .hm-foot, .ac-cartpill, .ac-drawer, .rc-actions, .rc-serves button, .rc-more, #cook-with, .rc-hint, .srch, .pg-crumb { display: none !important; }
  .rc-layout { display: block; }
  .rc-sticky, .rc-media { position: static; }
  .rc-hero { max-width: 60%; aspect-ratio: 4 / 3; }
  .rc-step { opacity: 1 !important; break-inside: avoid; }
  body.sn-ready.ac-page { padding-top: 0 !important; }
}
/* Prices (the sale, 2026-10-11). site_parts.price_html() and commerce.js window.aldaPrice.node() write these on every
   page. On sale: the selling price, then the MRP struck through and quieter; the discount is red text (red is an
   accent only - never a red block or badge). */
.pr { white-space: nowrap; }
.pr.is-sale { display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: 0.3em; white-space: normal; }
.pr-now { color: inherit; }
.pr-was { position: relative; color: var(--ac-muted, var(--alda-muted)); font-size: max(0.86em, 12px); font-weight: 500; text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: rgba(111, 112, 105, 0.7); white-space: nowrap; }
.pr-off { color: var(--ac-red, var(--alda-red)); font-size: 0.78em; font-weight: 550; letter-spacing: 0.02em; white-space: nowrap; }

/* ---------------------------------------------------------------- focus: Option C, "Grouped card" (2026-10-13)
   The user's pick from /focus-studies (fs-grouped.css; after Squarespace's billing address and Height's sign-up, Mobbin),
   with the review's stronger field mark. No red box or ring anywhere - red stays an accent (text, the house rule's hover
   fills, error text). One language per kind of control; each mark comes in within 150ms, without motion when reduced:
     fields   the contact fields share one var(--alda-paper) card, rows split by hairlines, each label above its value. The row in
              focus (a click or Tab) tints, its label turns ink at 500, and a 3px ink bar with round ends stands inside
              its left edge, 8px clear of the top and bottom, so it reads as a mark and never as the card's own edge;
              the card's edge firms up. Invalid: a red label and the row's own red line (aria-describedby), no red box.
     rows     questions, policy and search rows, ingredients, size rows: the same tint and ink bar, on a plate 16px wider
              than the row each side.
     links    a standalone text link: a soft tint plate behind it and a 2px ink underline (hover keeps its 1px line).
     menus    menu items and tab labels: a 2px ink underline (site-nav.css, pdp.css, minimal.css).
     pills    pill and square buttons: a 1.5px ink inner edge - an ink-filled one adds a cream line inside it (orbit.css).
     buttons  black buttons keep the house rule (black at rest, red fill on hover and focus) and take a 2px cream line
              inside the pill on keyboard focus (orbit.css).
     cards    cards and image tiles: a 2px ink ring 3px out, on their own radius (the plain ring at the top of this file).
     dark     on ink surfaces the marks are cream.
   The study page keeps its four options as they were reviewed: these rules skip .fs-page and its .fs-form kits. */
:root { --fc-ink: var(--alda-ink); --fc-cream: var(--alda-paper); --fc-tint: var(--alda-paper); --fc-hover: #f7f8f0; --fc-err: #d0002a; }
/* the floor: anything without a mark of its own takes the plain ink ring (cream on ink surfaces), never the browser's */
:where(a, button, summary, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--fc-ink); outline-offset: 3px; }
:where(.is-dark, [data-nav="dark"]) :where(a, button, summary, input, select, textarea, [tabindex]):focus-visible { outline-color: var(--fc-cream); }

/* fields: the contact card (build_pages.contact wraps the six fields in .pg-fields) */
.pg-page .pg-form:not(.fs-form) .pg-field :is(input, select, textarea):focus-visible { outline: 0; }
:where(.pg-form:not(.fs-form)) > .pg-fields { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; background: var(--ac-panel); border: 1px solid var(--ac-line); border-radius: 14px; overflow: hidden; transition: border-color 0.15s; }
:where(.pg-form:not(.fs-form)) > .pg-fields:focus-within { border-color: rgba(34, 34, 34, 0.45); }
:where(.pg-form:not(.fs-form)) > .pg-fields > .pg-field { position: relative; gap: 0; padding: 0; border-top: 1px solid rgba(34, 34, 34, 0.1); transition: background-color 0.15s; }
:where(.pg-form:not(.fs-form)) > .pg-fields > .pg-field:first-child { border-top: 0; }
:where(.pg-form:not(.fs-form)) > .pg-fields > .pg-field::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: var(--fc-ink); opacity: 0; pointer-events: none; transition: opacity 0.15s; }
:where(.pg-form:not(.fs-form)) > .pg-fields .pg-field label { padding: 13px 18px 0; font-size: 12px; line-height: 16px; letter-spacing: 0.01em; cursor: text; transition: color 0.15s; }
:where(.pg-form:not(.fs-form)) > .pg-fields .pg-field label small { font-weight: 500; }
:where(.pg-form:not(.fs-form)) > .pg-fields .pg-field :is(input, select, textarea) { padding: 3px 18px 13px; border: 0; background-color: transparent; font-size: 16.5px; line-height: 24px; transition: none; }
:where(.pg-form:not(.fs-form)) > .pg-fields .pg-field textarea { min-height: 128px; }
:where(.pg-form:not(.fs-form)) > .pg-fields .pg-field select { padding-right: 44px; background-position: right 18px center; }
:where(.pg-form:not(.fs-form)) > .pg-fields > .pg-field:hover { background-color: var(--fc-hover); }
:where(.pg-form:not(.fs-form)) > .pg-fields > .pg-field:focus-within { background-color: var(--fc-tint); }
:where(.pg-form:not(.fs-form)) > .pg-fields > .pg-field:focus-within::before { opacity: 1; }
:where(.pg-form:not(.fs-form)) > .pg-fields > .pg-field:focus-within label { color: var(--fc-ink); font-weight: 550; }
:where(.pg-form:not(.fs-form)) > .pg-fields > .pg-field.is-invalid label { color: var(--fc-err); }   /* #d0002a: 4.8:1 on the tint, 5.4:1 on the card */
:where(.pg-form:not(.fs-form)) > .pg-fields > .pg-field.is-invalid :is(input, textarea) { padding-bottom: 2px; }
.pg-field-msg { display: none; }
:where(.pg-form:not(.fs-form)) > .pg-fields > .pg-field.is-invalid .pg-field-msg { display: block; margin: 0; padding: 0 18px 13px; font-size: 13px; line-height: 1.4; color: var(--fc-err); }
/* the form's own line still speaks (aria-live) when fields are wrong, but the rows show where */
:where(.pg-form:not(.fs-form)) > .pg-fields ~ .pg-form-msg.is-error { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (min-width: 768px) {
  :where(.pg-form:not(.fs-form)) > .pg-fields > .pg-field:nth-child(2) { border-top: 0; }
  :where(.pg-form:not(.fs-form)) > .pg-fields > .pg-field:nth-child(odd):not(.is-wide) { border-right: 1px solid rgba(34, 34, 34, 0.1); }
}
@media (max-width: 767px) { :where(.pg-form:not(.fs-form)) > .pg-fields { grid-template-columns: minmax(0, 1fr); } }

/* rows: the tint plate (::before) and the ink bar (::after) */
:where(body:not(.fs-page)) :is(.pg-q summary, .pg-pol, .srch-list a, .rc-ings label, .pg-help a, .hm-size-row, .pa-size.ac-pill, .pm-sec summary, .mi-group summary, .ac-acc-item summary, .hm-acc-item summary) { position: relative; isolation: isolate; }
:where(body:not(.fs-page)) :is(.pg-q summary, .pg-pol, .srch-list a, .rc-ings label, .pg-help a, .hm-size-row, .pa-size.ac-pill, .pm-sec summary, .mi-group summary, .ac-acc-item summary, .hm-acc-item summary)::before { content: ""; position: absolute; z-index: -1; inset: 0 -16px; border-radius: 10px; background: var(--fc-tint); opacity: 0; pointer-events: none; transition: opacity 0.15s; }
:where(body:not(.fs-page)) :is(.pg-q summary, .pg-pol, .srch-list a, .rc-ings label, .pg-help a, .hm-size-row, .pa-size.ac-pill, .pm-sec summary, .mi-group summary, .ac-acc-item summary, .hm-acc-item summary)::after { content: ""; position: absolute; left: -10px; top: 10px; bottom: 10px; width: 3px; border-radius: 3px; background: var(--fc-ink); opacity: 0; pointer-events: none; transition: opacity 0.15s; }
body:not(.fs-page) :is(.pg-q summary, .pg-pol, .srch-list a, .pg-help a, .hm-size-row, .pa-size.ac-pill, .pm-sec summary, .mi-group summary, .ac-acc-item summary, .hm-acc-item summary):focus-visible { outline: 0; }
:where(body:not(.fs-page)) :is(.pg-q summary, .pg-pol, .srch-list a, .pg-help a, .hm-size-row, .pa-size.ac-pill, .pm-sec summary, .mi-group summary, .ac-acc-item summary, .hm-acc-item summary):focus-visible::before,
:where(body:not(.fs-page)) :is(.pg-q summary, .pg-pol, .srch-list a, .pg-help a, .hm-size-row, .pa-size.ac-pill, .pm-sec summary, .mi-group summary, .ac-acc-item summary, .hm-acc-item summary):focus-visible::after,
:where(body:not(.fs-page)) .rc-ings label:has(input:focus-visible)::before, :where(body:not(.fs-page)) .rc-ings label:has(input:focus-visible)::after { opacity: 1; }
:where(body:not(.fs-page)) .pg-q summary:focus-visible i { border-color: var(--fc-ink); }
/* on the ink help panel: a cream plate and bar */
.pg-help a::before { background: rgba(245, 246, 238, 0.1); }
.pg-help a::after { background: var(--fc-cream); }
/* the care guides' contents: the line on the left goes ink and 3px, on a tint plate */
.pg-page .pg-toc a:focus-visible { outline: 0; color: var(--fc-ink); border-left-color: var(--fc-ink); background: var(--fc-tint); border-radius: 0 6px 6px 0; box-shadow: inset 2px 0 0 var(--fc-ink); }

/* links: a soft tint plate behind the link (6px corners) and its line 2px in ink */
body:not(.fs-page) a.pg-link:focus-visible { outline: 0; color: var(--fc-ink); background-color: var(--fc-tint); background-size: 100% 2px; border-radius: 2px; box-shadow: 0 0 0 4px var(--fc-tint); transition: background-size 0.15s, background-color 0.15s, box-shadow 0.15s; }
body:not(.fs-page) .is-dark a.pg-link:focus-visible { color: var(--fc-cream); background-color: rgba(245, 246, 238, 0.12); box-shadow: 0 0 0 4px rgba(245, 246, 238, 0.12); }
body:not(.fs-page) :is(.pg-crumb a, .pg-dl a, .pg-faq-empty a, .pg-stores-empty p a, .pg-docbody a, .pg-a p a, .kp-service a, .rc-prod-n, .pc-name, .mi-breadcrumb a, .pl-k a, .pa-more, .pl-dock-size, .ac-remove, .mi-picked-clear, .mi-active .mi-active-clear, .sn-filter-reset):focus-visible {
  outline: 0; color: var(--fc-ink); background-color: var(--fc-tint); border-radius: 2px; box-shadow: 0 0 0 4px var(--fc-tint);
  text-decoration: underline 2px var(--fc-ink); text-underline-offset: 0.25em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* pills on the content pages: a 1.5px ink inner edge - the hairline goes ink, .5px more inside it; an ink-filled one
   (a chosen chip or tab) adds a cream line inside the edge */
body:not(.fs-page) :is(.pg-pill, .pg-chips button, .pg-copy, .pg-store-actions a, .srch-close):focus-visible { outline: 0; border-color: var(--fc-ink); box-shadow: inset 0 0 0 0.5px var(--fc-ink), inset 0 0 0 2px var(--fc-cream); }
body:not(.fs-page) :is(.pg-tabs a, .rc-serves button):focus-visible { outline: 0; box-shadow: inset 0 0 0 1.5px var(--fc-ink), inset 0 0 0 3px var(--fc-cream); }
.nt-form:focus-within { border-color: var(--ac-ink); }
body .nt-form button:focus-visible { outline: 2px solid var(--fc-cream); outline-offset: -4px; }

/* the footer: on ink, links take a 2px cream underline; on the light footer, ink. The round buttons: their edge thickens. */
body .hm-foot.sf :is(h4 a, li a, .sf-legal-links a):focus-visible { outline: 0; text-decoration: underline 2px; text-underline-offset: 6px; }
body .hm-foot.sf.is-dark :is(h4 a, li a, .sf-legal-links a):focus-visible { color: var(--fc-cream); }
body .hm-foot.sf.is-light :is(h4 a, li a, .sf-legal-links a):focus-visible { color: var(--fc-ink); }
body .hm-foot.sf :is(.sf-social a, .sf-form button):focus-visible { outline: 0; opacity: 1; border-color: currentColor; box-shadow: inset 0 0 0 1px currentColor; }

@media (max-width: 900px) {
  .pg-page .pg-toc a:focus-visible { border-radius: 100px; border-color: var(--fc-ink); background: transparent; box-shadow: inset 0 0 0 0.5px var(--fc-ink); }
}
/* the live .pg-page * rule does not reach pseudo-elements - the rows' plates and bars, the field bar */
@media (prefers-reduced-motion: reduce) {
  :where(.pg-form:not(.fs-form)) > .pg-fields, :where(.pg-form:not(.fs-form)) > .pg-fields > .pg-field, :where(.pg-form:not(.fs-form)) > .pg-fields .pg-field label,
  :where(.pg-form:not(.fs-form)) > .pg-fields > .pg-field::before, body a.pg-link:focus-visible,
  :is(.pg-q summary, .pg-pol, .srch-list a, .rc-ings label, .pg-help a, .hm-size-row, .pa-size.ac-pill, .pm-sec summary, .mi-group summary, .ac-acc-item summary, .hm-acc-item summary)::before,
  :is(.pg-q summary, .pg-pol, .srch-list a, .rc-ings label, .pg-help a, .hm-size-row, .pa-size.ac-pill, .pm-sec summary, .mi-group summary, .ac-acc-item summary, .hm-acc-item summary)::after { transition: none !important; }
}
/* ---------------------------------------------------------------- no word alone on a line (2026-11-04)
   AGENTS.md: no single-word orphan lines. The user-flow test found them in headings, deks and short blocks across the
   site. Headings and short blocks wrap balanced; body copy wraps 'pretty' (no lone last word). :where() keeps this at
   zero specificity, so any element with wrapping of its own keeps it; the short blocks come second, as they are <p>s. */
:where(p, li, dd, figcaption) { text-wrap: pretty; }
:where(h1, h2, h3, h4, .pg-dek, .pg-help-p, .hm-p) { text-wrap: balance; }