/* =========================================================
   Paws & Pantry · inner-2026.css  (inner-page compositions; loads after site-2026.css)
   Pages: dogs, cats, small pets, treats and toys, product, basket, food finder, grooming, pet profile,
   subscribe, advice, visit. No motion anywhere: hover is an instant colour change.
   ========================================================= */
.demo-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); font-size: var(--t-small); color: var(--ink-soft); }
main > noscript .note { margin: var(--s-5) auto 0; max-width: calc(var(--max)); width: calc(100% - var(--margin) * 2); }
.form-grid { display: grid; gap: var(--s-5); grid-template-columns: minmax(0, 1fr); }
.span-2 { grid-column: 1 / -1; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
fieldset { border: 0; padding: 0; min-width: 0; }
legend { padding: 0; }

/* ---------- crumbs + page head ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: 0 var(--s-1); font-size: var(--t-small); color: var(--muted); }
.crumbs li { display: inline-flex; align-items: center; min-height: 44px; }
.crumbs li + li::before { content: "/"; margin-right: var(--s-1); color: var(--control-line); }
.crumbs a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; padding-inline: 2px; color: var(--ink-soft); text-decoration-color: var(--line-strong); }
.crumbs a:hover { color: var(--ink); text-decoration-color: var(--brand); text-decoration-thickness: 3px; }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }
.page-head { padding-block: clamp(20px, 3vw, 40px) clamp(32px, 4.5vw, 64px); border-bottom: 1px solid var(--line-strong); background: var(--bg); }
.page-head[data-t] { border-bottom: 0; background: var(--tint-dog); }
.page-head[data-t="cat"] { background: var(--tint-cat); }
.page-head[data-t="small"] { background: var(--tint-small); }
.page-head[data-t="gold"] { background: var(--tint-gold); }
.page-head[data-t] .crumbs, .page-head[data-t] .crumbs a { color: var(--ink-soft); }
.page-head[data-t] .lede { color: var(--ink); }
.page-head__grid { display: grid; gap: var(--s-6); align-items: center; }
.page-head__copy { display: grid; gap: var(--s-4); align-content: start; justify-items: start; }
.page-title { font-size: clamp(2.25rem, 1.2rem + 4.2vw, 4rem); line-height: 1; max-width: 16ch; }
.page-head__art { display: none; }
@media (min-width: 760px) {
  .page-head__grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .page-head__art { display: flex; align-items: flex-end; justify-content: flex-end; margin-block: calc(-1 * clamp(20px, 3vw, 40px)) calc(-1 * clamp(32px, 4.5vw, 64px)); padding-top: var(--s-5); }
  .page-head__art svg { width: 36%; height: auto; aspect-ratio: 1; flex: none; }
  .page-head__art svg:first-child { width: 46%; margin-right: -6%; position: relative; z-index: 1; }
  .page-head__art svg:last-child { margin-left: -6%; }
}

/* ---------- shelves (dogs, cats, small pets, treats and toys) ---------- */
.shelves { padding-top: var(--s-7); }
.shelf-tools { display: grid; gap: var(--s-4); margin-bottom: var(--s-6); align-items: end; }
.filters { display: grid; gap: var(--s-4); grid-template-columns: repeat(2, minmax(0, 1fr)); padding: var(--s-4); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-card); align-items: end; }
.filters .btn { grid-column: 1 / -1; }
@media (max-width: 429px) { .filters { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 760px) { .filters { grid-template-columns: repeat(3, minmax(0, 1fr)) auto; padding: var(--s-4) var(--s-5); } .filters .btn { grid-column: auto; } }
.shelf-tools .meta { text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--ink-soft); }
.shelf-block { margin-bottom: var(--s-8); scroll-margin-top: calc(var(--header-h) + var(--s-4)); }
.shelf-block:last-of-type { margin-bottom: 0; }
.shelf-block__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); padding-bottom: var(--s-3); margin-bottom: var(--s-5); border-bottom: 2px solid var(--ink); }
.shelf-block__head .meta { text-transform: none; letter-spacing: 0; color: var(--ink-soft); }
[data-personal-note] { margin-bottom: var(--s-6); }
/* ledger rows (treats and toys) */
.product-grid--rows { display: grid; gap: 0; grid-template-columns: minmax(0, 1fr); border-top: 0; }
.product-grid--rows .product-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); border-radius: 0; border-width: 0 0 1px; border-color: var(--line-strong); background: transparent; align-items: stretch; }
.product-grid--rows .product-card:first-child { border-top: 1px solid var(--line-strong); }
.product-grid--rows .pack { grid-row: 1; aspect-ratio: 1; border-radius: var(--r-card); border: 0; margin: var(--s-4) 0; align-self: start; width: 112px; }
.product-grid--rows .pack .tag { display: none; }
.product-grid--rows .pack-chip { width: 44%; right: var(--s-2); bottom: var(--s-2); border-width: 1.5px; border-radius: 10px; }
.product-grid--rows .product-card__body { padding: var(--s-4) 0 var(--s-4) var(--s-4); }
.product-grid--rows .product-card h3 a::after { border-radius: 0; }
@media (min-width: 900px) {
  .product-grid--rows .product-card { grid-template-columns: 144px minmax(0, 1fr); column-gap: var(--s-5); align-items: center; }
  .product-grid--rows .pack { width: 144px; }
  .product-grid--rows .product-card__body { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "brand price act" "name price act" "blurb price act" "ing price act" "avoid price act"; column-gap: var(--s-6); align-items: center; padding: var(--s-4) 0; }
  .product-grid--rows .brand { grid-area: brand; }
  .product-grid--rows h3 { grid-area: name; }
  .product-grid--rows .blurb { grid-area: blurb; }
  .product-grid--rows .ing { grid-area: ing; margin: 0; }
  .product-grid--rows [data-avoid] { grid-area: avoid; }
  .product-grid--rows .price { grid-area: price; margin: 0; font-size: 1.5rem; align-self: center; }
  .product-grid--rows .card-actions { grid-area: act; margin: 0; padding: 0; flex-wrap: nowrap; align-self: center; }
  .product-grid--rows .card-actions .btn { flex: none; }
}

/* ---------- product ---------- */
.product-top { padding-top: var(--s-5); }
.product-layout { display: grid; gap: var(--s-6); margin-top: var(--s-4); align-items: start; }
@media (min-width: 640px) { .product-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.pack--big { aspect-ratio: 1; border-radius: var(--r-panel); }
.pack--big svg { width: 74%; }
.pack--big .tag { left: var(--s-5); top: var(--s-5); }
.pack--big .pack-chip { width: clamp(88px, 28%, 148px); right: var(--s-5); bottom: var(--s-5); border-radius: 18px; border-width: 3px; }
.pack--big .photo-note { left: var(--s-5); bottom: var(--s-5); }
.buy { display: grid; gap: var(--s-4); align-content: start; }
.buy .page-title { max-width: 14ch; }
.buy-price { font: 700 clamp(2rem, 1.6rem + 1.6vw, 2.75rem)/1 var(--font-display); letter-spacing: -.03em; }
.buy-form { display: grid; gap: var(--s-4); padding: var(--s-5); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-card); }
.buy-form__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
@media (min-width: 480px) { .buy-form__row { grid-template-columns: minmax(0, 1fr) 7rem; } }
.buy-form__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.buy-form__actions .btn:first-child { flex: 1 1 14rem; }
.buy-links { margin: 0; }
.ing--open { padding: var(--s-1) var(--s-5); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-card); }
.ing--open summary { font-size: var(--t-body); }
.ing--open p { font-size: var(--t-body); color: var(--ink-soft); }
.feeding { background: var(--navy); color: #fff; }
.feeding .h2, .feeding .meta { color: inherit; }
.feeding .meta { color: var(--brand); }
.feeding .eyebrow { color: var(--brand); }
.feeding .lede, .feeding .fine { color: var(--navy-dim); }
.feeding-grid { display: grid; gap: var(--s-6); align-items: start; }
.feed-card { display: grid; gap: var(--s-5); padding: var(--s-5); border-radius: var(--r-card); background: var(--navy-2); border: 1px solid var(--navy-line); --form-label: #fff; --form-hint: var(--navy-dim); }
.feed-card__fields { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.feed-card .field input, .feed-card .field select { border-color: var(--navy-edge); }
.feed-out { font: 650 clamp(1.25rem, 1.1rem + .6vw, 1.625rem)/1.25 var(--font-display); letter-spacing: -.015em; min-height: 2.5em; max-width: none; color: #fff; }
.more .section-head { margin-bottom: var(--s-6); }

/* ---------- basket ---------- */
.basket-section { padding-top: var(--s-7); }
.basket-layout { display: grid; gap: var(--s-6); align-items: start; }
.line { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: var(--s-4); padding-block: var(--s-4); border-bottom: 1px solid var(--line-strong); position: relative; }
.line:first-child { border-top: 2px solid var(--ink); }
.line .pack { width: 88px; aspect-ratio: 1; border-radius: var(--r-control); }
.line .pack svg { width: 80%; }
.line .pack-chip { width: 46%; right: 4px; bottom: 4px; border-width: 1.5px; border-radius: 9px; }
.line-body { display: grid; gap: var(--s-1); align-content: start; min-width: 0; }
.line-body .brand { font: 600 var(--t-meta)/1.3 var(--font-text); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted); }
.line-body .line-title { font: 650 1.1875rem/1.2 var(--font-display); letter-spacing: -.015em; }
.line-body .line-title a { text-decoration: none; }
.line-body .line-title a:hover { text-decoration: underline; text-decoration-color: var(--brand); text-decoration-thickness: 3px; }
.line-body .fine { margin: 0; }
.line-body .qty { justify-self: start; margin-top: var(--s-2); }
.line-side { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
.qty { display: inline-flex; align-items: center; border: 1px solid var(--ctl-line); border-radius: var(--r-pill); background: var(--surface); }
.qty button { width: 44px; height: 44px; border: 0; background: transparent; border-radius: 50%; display: grid; place-items: center; font: 600 1.375rem/1 var(--font-text); color: var(--ink); }
.qty button:hover { background: var(--surface-2); }
.qty output { min-width: 2.5ch; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.line-total { font: 700 1.25rem/1 var(--font-display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin-left: auto; }
.link-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--s-2); border: 0; background: none; font: 600 var(--t-small)/1 var(--font-text); color: var(--ink); text-decoration: underline; text-decoration-color: var(--control-line); text-underline-offset: 4px; }
.link-btn:hover { text-decoration-color: var(--ink); background: var(--surface-2); border-radius: var(--r-control); }
.summary { display: grid; gap: var(--s-4); padding: var(--s-5); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-panel); align-content: start; }
@media (min-width: 960px) { .summary { position: sticky; top: calc(var(--header-h) + var(--s-5)); } }
.meter-wrap { display: grid; gap: var(--s-2); }
.meter { height: 12px; border-radius: var(--r-pill); background: var(--surface-3); overflow: hidden; --p: 0%; }
.meter span { display: block; height: 100%; width: calc(var(--p, 0) * 100%); background: var(--brand); border-radius: var(--r-pill); box-shadow: inset 0 0 0 1px rgb(16 29 51 / .35); }
.sum { display: grid; gap: 0; }
.sum > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4); padding-block: var(--s-3); border-bottom: 1px solid var(--line); }
.sum dt { color: var(--ink-soft); }
.sum dd { font-weight: 650; font-variant-numeric: tabular-nums; text-align: right; }
.sum-total { border-bottom: 0 !important; border-top: 2px solid var(--ink); margin-top: var(--s-2); }
.sum-total dt { color: var(--ink); font-weight: 700; }
.sum-total dd { font: 700 1.625rem/1 var(--font-display); letter-spacing: -.02em; }
.order-done { margin-top: var(--s-6); display: grid; gap: var(--s-3); justify-items: start; padding: var(--s-6); background: var(--brand-tint); border: 2px solid var(--brand); border-radius: var(--r-panel); }
.order-done:focus { outline: 3px solid var(--focus); outline-offset: 4px; }
.saved .product-grid { margin-top: 0; }
.wish-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; }

/* ---------- food finder ---------- */
.finder-section { padding-top: var(--s-7); }
.finder-layout { display: grid; gap: var(--s-6); align-items: start; }
.steps { display: grid; gap: 0; border-top: 2px solid var(--ink); counter-reset: none; }
.steps li { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); column-gap: var(--s-3); padding: var(--s-3) 0; border-bottom: 1px solid var(--line-strong); align-items: baseline; color: var(--muted); }
.steps .step-n { font: 700 1.125rem/1.3 var(--font-display); }
.steps .step-t { font-weight: 600; }
.steps .step-a { grid-column: 2; font-size: var(--t-small); color: var(--ink); min-height: 1.4em; }
.steps .step-a:empty { display: none; }
.steps li[data-state="done"] { color: var(--ink-soft); }
.steps li[data-state="done"] .step-n::after { content: ""; display: inline-block; width: 14px; height: 14px; margin-left: 4px; vertical-align: -1px; background: var(--success); -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat; }
.steps li[data-state="current"] { color: var(--ink); background: var(--brand-tint); margin-inline: calc(-1 * var(--s-3)); padding-inline: var(--s-3); border-radius: var(--r-control); border-bottom-color: transparent; }
.steps li[data-state="current"] .step-t { font-weight: 700; }
.finder-panel { display: grid; gap: var(--s-5); padding: var(--s-5); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-panel); }
@media (min-width: 640px) { .finder-panel { padding: var(--s-7); } }
.finder-panel .h2:focus { outline: none; }
.finder-panel .h2:focus-visible { outline: 3px solid var(--focus); outline-offset: 6px; }
.choices { display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.choice { display: grid; gap: var(--s-1); align-content: center; min-height: 72px; padding: var(--s-4); text-align: left; background: var(--field-bg); border: 1px solid var(--field-line); border-radius: var(--r-card); font: 650 var(--t-body)/1.25 var(--font-display); color: var(--ink); }
.choice small { font: 400 var(--t-small)/1.35 var(--font-text); color: var(--muted); }
.choice:hover { background: var(--brand-tint); border-color: var(--field-line-hover); }
.choice[aria-pressed="true"], .choice[aria-checked="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
.choice[aria-pressed="true"] small { color: var(--navy-dim); }
.finder-controls { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.finder-foot { margin-top: var(--s-5); }
.static-steps { margin: var(--s-4) 0; padding-left: var(--s-5); display: grid; gap: var(--s-2); }
[data-finder-results] { display: grid; gap: var(--s-5); }
[data-finder-results] .product-grid { grid-template-columns: 1fr; }
@media (min-width: 560px) { [data-finder-results] .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.why { font-size: var(--t-small); line-height: var(--lh-small); padding: var(--s-2) var(--s-3); background: var(--brand-tint); border-radius: var(--r-control); color: var(--ink); }
.pick-why { margin: 0; }

/* ---------- grooming ---------- */
.groom-book { padding-top: var(--s-7); }
.static-services { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); margin-bottom: var(--s-6); }
.static-services li { padding: var(--s-5); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-card); display: grid; gap: var(--s-2); align-content: start; }
.groom-layout { display: grid; gap: var(--s-6); align-items: start; }
.groom-form { display: grid; gap: var(--s-6); min-width: 0; }
.fs { display: grid; gap: var(--s-4); padding-top: var(--s-5); border-top: 2px solid var(--ink); }
.fs > legend { float: left; width: 100%; padding-bottom: var(--s-4); }
.fs > legend + * { clear: both; }
.fs .fine { font-weight: 400; font-family: var(--font-text); letter-spacing: 0; margin-left: var(--s-2); }
.service-cards { display: grid; gap: var(--s-3); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .service-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.service-card { position: relative; display: block; cursor: pointer; }
.service-card input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.service-card__body { display: grid; gap: var(--s-2); align-content: start; height: 100%; padding: var(--s-4) var(--s-4) var(--s-4) calc(var(--s-4) + 34px); background: var(--surface); border: 1px solid var(--field-line); border-radius: var(--r-card); position: relative; }
.service-card__body::before { content: ""; position: absolute; left: var(--s-4); top: var(--s-4); width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--ctl-line); background: var(--surface); }
.service-card__price { font-weight: 650; font-size: var(--t-small); color: var(--ink); }
.service-card__copy { font-size: var(--t-small); line-height: var(--lh-small); color: var(--muted); }
.service-card:hover .service-card__body { border-color: var(--field-line-hover); }
.service-card input:checked + .service-card__body { background: var(--brand-tint); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.service-card input:checked + .service-card__body::before { background: var(--ink); border-color: var(--ink); box-shadow: inset 0 0 0 4px var(--brand); }
.service-card input:focus-visible + .service-card__body { outline: 3px solid var(--focus); outline-offset: 3px; }
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip { position: relative; display: block; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span { display: grid; place-items: center; min-width: 4.5rem; min-height: 44px; padding: 2px var(--s-3); text-align: center; background: var(--surface); border: 1px solid var(--field-line); border-radius: var(--r-field); font: 600 var(--t-small)/1.2 var(--font-text); color: var(--ink); }
.chip small { display: block; font-weight: 400; font-size: var(--t-meta); color: var(--muted); }
.chip:hover span { border-color: var(--field-line-hover); background: var(--surface-2); }
.chip input:checked + span { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip input:checked + span small { color: var(--navy-dim); }
.chip input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.chip input:disabled + span { background: var(--surface-2); color: var(--muted); border-style: dashed; border-color: var(--line-strong); cursor: not-allowed; }
.chip input:disabled + span small { color: var(--muted); }
.chips[aria-invalid="true"], .chips:has(:user-invalid) { outline: 0; }
.fs:has(:user-invalid) .field-error { display: flex; }
.checks { display: grid; gap: var(--s-1); }
.estimate { display: grid; gap: var(--s-3); padding: var(--s-5); background: var(--navy); color: #fff; border-radius: var(--r-panel); align-content: start; --form-label: #fff; }
.estimate .h3 { color: var(--brand); font-size: var(--t-meta); font-family: var(--font-text); text-transform: uppercase; letter-spacing: var(--track-label); font-weight: 650; }
.estimate__price { font: 700 clamp(2.5rem, 2rem + 2vw, 3.5rem)/1 var(--font-display); letter-spacing: -.035em; }
.estimate .sum dt { color: var(--navy-dim); }
.estimate .sum > div { border-color: var(--navy-line); }
.estimate .fine { color: var(--navy-dim); }
@media (min-width: 960px) { .estimate { position: sticky; top: calc(var(--header-h) + var(--s-5)); } }
.groomers { background: var(--navy-deep); }
.groomers-grid { display: grid; gap: var(--s-6); align-items: start; }
.groomer-list { display: grid; gap: var(--s-4); }
.groomer-list li { padding: var(--s-5); border: 1px solid var(--navy-line); border-radius: var(--r-card); display: grid; gap: var(--s-2); background: var(--navy); }
.groomer-list p { color: var(--navy-dim); }
.groomers .h2 { color: #fff; }

/* ---------- pet profile ---------- */
.pet-section { padding-top: var(--s-7); }
.pet-layout, .sub-layout { display: grid; gap: var(--s-6); align-items: start; }
.pet-form, .sub-form { display: grid; gap: var(--s-6); padding: var(--s-5); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-panel); }
@media (min-width: 640px) { .pet-form, .sub-form { padding: var(--s-7); } .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.avatars { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.avatar-option { position: relative; display: block; width: 64px; height: 64px; border-radius: 50%; cursor: pointer; }
.avatar-option input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; z-index: 1; }
.avatar-option svg { width: 100%; height: 100%; border-radius: 50%; border: 3px solid transparent; background: var(--surface-2); }
.avatar-option:hover svg { border-color: var(--ctl-line); }
.avatar-option input:checked + svg { border-color: var(--ink); box-shadow: 0 0 0 3px var(--brand); }
.avatar-option input:focus-visible + svg { outline: 3px solid var(--focus); outline-offset: 4px; }
.on-device { display: grid; gap: var(--s-4); padding: var(--s-5); background: var(--surface-2); border-radius: var(--r-panel); align-content: start; }
.pet-row { display: flex; gap: var(--s-3); align-items: flex-start; padding: var(--s-4); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-card); }
.pet-row.is-active { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.pet-row > svg, .pet-avatar { width: 56px; height: 56px; border-radius: 50%; flex: none; }
.pet-row__body { display: grid; gap: var(--s-1); min-width: 0; flex: 1; }
.pet-row__body .h3 { font-size: 1.125rem; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); }
.pet-row__body p { font-size: var(--t-small); color: var(--ink-soft); }
.row-actions { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-2); }
[data-pet-list], [data-sub-list], [data-wishlist] { display: grid; gap: var(--s-3); }
[data-wishlist] .product-grid { gap: var(--s-5); }

/* ---------- subscribe ---------- */
.sub-section { padding-top: var(--s-7); }
.sub-side { display: grid; gap: var(--s-5); align-content: start; }
.sum-card { padding: var(--s-5); background: var(--brand); color: var(--navy); border-radius: var(--r-panel); display: grid; gap: var(--s-2); }
.sum-card .meta { color: var(--navy); }
.sum-card .num, .sum-card strong { font-family: var(--font-display); }
.sum-card .big { font: 700 clamp(2rem, 1.5rem + 2vw, 3rem)/1 var(--font-display); letter-spacing: -.03em; }
.sum-card del { opacity: .75; }
.sum-card p { max-width: none; }
.sum-card .fine, .sum-card .sum dt { color: var(--navy); }
.sum-card .sum > div { border-color: rgb(20 40 74 / .35); }
.sum-card .sum-total { border-top-color: var(--navy); }
.sub-row { display: grid; gap: var(--s-2); padding: var(--s-4); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-card); }
.how { background: var(--navy-deep); }
.how .h2 { color: #fff; }
.how-list { display: grid; gap: var(--s-6); }
.how-list li { display: grid; gap: var(--s-2); align-content: start; padding-top: var(--s-4); border-top: 2px solid var(--brand); }
.how-list .num { font: 700 1rem/1 var(--font-display); color: var(--brand); }
.how-list p { color: var(--navy-dim); }
@media (max-width: 560px) { .sub-form .seg { grid-template-columns: repeat(2, 1fr); } .sub-form .seg label:nth-child(3) { border-left: 0; } .sub-form .seg label:nth-child(n+3) { border-top: 1px solid var(--line-strong); } }

/* ---------- advice ---------- */
.advice-section { padding-top: var(--s-7); }
.advice-layout { display: grid; gap: var(--s-6); align-items: start; }
.guide-nav { display: grid; gap: var(--s-3); }
.guide-nav ol { display: grid; border-top: 2px solid var(--ink); }
.guide-nav a { display: flex; align-items: center; gap: var(--s-3); min-height: 48px; padding: var(--s-2) 0; border-bottom: 1px solid var(--line-strong); text-decoration: none; font-weight: 600; }
.guide-nav a:hover { background: var(--brand-tint); }
.guide-nav .num { color: var(--blue); font: 700 var(--t-small)/1 var(--font-display); }
@media (min-width: 900px) { .guide-nav { position: sticky; top: calc(var(--header-h) + var(--s-5)); } }
.guides { display: grid; gap: var(--s-8); min-width: 0; }
.guide { display: grid; gap: var(--s-4); scroll-margin-top: calc(var(--header-h) + var(--s-4)); padding: var(--s-5); background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-panel); }
@media (min-width: 640px) { .guide { padding: var(--s-7); } }
.guide__head { display: grid; gap: var(--s-2); }
.guide__progress { text-transform: none; letter-spacing: 0; color: var(--ink-soft); }
.checklist { display: grid; gap: 0; border-top: 1px solid var(--line-strong); }
.checklist li { border-bottom: 1px solid var(--line); }
.checklist .check { padding-block: var(--s-2); align-items: flex-start; }
.checklist .check input { margin-top: 10px; }
.checklist .check span { padding-top: 10px; }
.checklist .check:has(input:checked) span { text-decoration: line-through; text-decoration-color: var(--control-line); color: var(--muted); }
.guide__close { font-weight: 600; padding: var(--s-3) var(--s-4); background: var(--brand-tint); border-radius: var(--r-control); max-width: none; }
.guide .btn { justify-self: start; }
@media print {
  body[data-printing] .site-header, body[data-printing] .utility, body[data-printing] .site-footer, body[data-printing] .page-head, body[data-printing] .guide-nav, body[data-printing] .note, body[data-printing] .no-print { display: none !important; }
  body[data-printing] .guide:not([data-print-this]) { display: none !important; }
  body[data-printing] .guide { border: 0; padding: 0; }
  body { background: #fff; }
}

/* ---------- visit ---------- */
.status-line { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: 650; font-size: var(--t-small); padding: var(--s-2) var(--s-4); border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line-strong); }
.status-line .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--control-line); }
.visit-section { padding-top: var(--s-7); }
.visit-layout { display: grid; gap: var(--s-7); align-items: start; }
.visit-info { display: grid; gap: var(--s-7); }
.visit-info section { display: grid; gap: var(--s-4); }
.hours { width: 100%; border-collapse: collapse; border-top: 2px solid var(--ink); }
.hours th, .hours td { padding: var(--s-4) 0; border-bottom: 1px solid var(--line-strong); text-align: left; font-size: var(--t-body); }
.hours td { text-align: right; font-weight: 650; }
address { font-style: normal; display: grid; font: 600 1.25rem/1.4 var(--font-display); letter-spacing: -.01em; }
.contact-list { display: grid; gap: 0; border-top: 1px solid var(--line-strong); }
.contact-list li { display: flex; align-items: center; gap: var(--s-3); min-height: 52px; border-bottom: 1px solid var(--line-strong); }
.contact-list svg { width: 20px; height: 20px; color: var(--blue); flex: none; }
.contact-list a { font-weight: 650; text-underline-offset: 4px; display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
.sketch { display: grid; gap: var(--s-3); }
.sketch__map { position: relative; aspect-ratio: 8 / 5; border-radius: var(--r-panel); overflow: hidden; border: 1px solid var(--line-strong); }
.sketch__map svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lbl { position: absolute; font: 650 var(--t-small)/1.2 var(--font-text); color: var(--ink); background: rgb(255 255 255 / .88); padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.lbl--lane { left: 3%; top: 31%; }
.lbl--mews { left: 58%; top: 6%; background: var(--brand); }
.lbl--shop { top: 50%; background: transparent; color: #fff; padding: 0; transform: translate(-50%, -50%); left: 43.75%; }
.lbl--downs { right: 3%; bottom: 6%; }
@media (max-width: 480px) { .lbl--downs { right: auto; left: 3%; } .lbl--mews { left: auto; right: 3%; } }
.write { background: var(--navy); }
.write .h2 { color: #fff; }
.write-layout { display: grid; gap: var(--s-6); align-items: start; }
.write-form .field input, .write-form .field textarea { border-color: var(--navy-edge); }
.write-form .field-error { color: var(--danger-night); }

/* ---------- wide ---------- */
@media (min-width: 760px) {
  .feeding-grid, .write-layout, .groomers-grid { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--s-8); }
  .how-list { grid-template-columns: repeat(3, 1fr); }
  .line { grid-template-columns: 112px minmax(0, 1fr) auto; align-items: start; }
  .line .pack { width: 112px; }
  .line-side { grid-column: auto; flex-direction: column; align-items: flex-end; justify-content: flex-start; }
  .line-total { margin-left: 0; }
}
@media (min-width: 960px) {
  .product-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); }
  .basket-layout { grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); }
  .finder-layout { grid-template-columns: minmax(240px, .55fr) minmax(0, 2fr); gap: var(--s-8); }
  .finder-steps { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
  .groom-layout { grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: var(--s-8); }
  .pet-layout, .sub-layout { grid-template-columns: minmax(0, 1.7fr) minmax(280px, 1fr); gap: var(--s-7); }
  .advice-layout { grid-template-columns: 240px minmax(0, 1fr); gap: var(--s-8); }
  .visit-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--s-8); }
}

/* shelves: 2 then 3 columns so five or six products never leave a lone card */
.shelf-block .product-grid:not(.product-grid--rows) { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 520px) { .shelf-block .product-grid:not(.product-grid--rows) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .shelf-block .product-grid:not(.product-grid--rows) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* a shelf with one or two products: horizontal cards, so the row is never half empty */
@media (min-width: 900px) {
  .shelf-block .product-grid.product-grid--duo:not(.x) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-grid--duo .product-card { display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); }
  .product-grid--duo .pack { aspect-ratio: auto; min-height: 100%; border-radius: var(--r-card) 0 0 var(--r-card); border-bottom: 0; border-right: 1px solid var(--line); }
  .product-grid--duo .pack svg { width: 70%; }
  .product-grid--duo .product-card__body { padding: var(--s-5); }
}

.more .product-grid { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 560px) { .more .product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .more .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.on-dark :is(.h2, .h3), .feeding :is(.h2, .h3) { color: #fff; }