/* ==========================================================================
   Osevaro design system for the Phase 1 mockups
   --------------------------------------------------------------------------
   Rules this file enforces (PLAN.md "Design rules"):
   - Text never sits on texture or photos. Watercolour lives only in the
     .wash stacks, .framed mats, category tile art panels, brush underlines,
     eyebrow dots and the pets. Every one of those carries [data-deco].
   - One shared width: .shell (announcement bar, header, main, footer).
   - One button system (.btn), one solid-fill tag system (.tag).
   - Fraunces (headings, prices) + Figtree (text). Nothing under 13px.
   - Dark mode: washes cannot multiply on a dark page, so every wash sits on
     a paper plate there (plate SVGs in ds/plates, or --wash-host-bg).
   - Motion: one moving thing per screen, all of it off under
     prefers-reduced-motion. Motion styles only apply under html.motion-ok
     (set by osevaro.js).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Surfaces */
  --paper: #fbf8f2;          /* page */
  --card: #ffffff;           /* cards, header */
  --linen: #f3ede2;          /* notes, quiet panels */
  --well: #f3ede2;           /* product image wells (images multiply onto it) */
  --line: #e6dfd2;
  --line-strong: #d3c8b6;
  --field-border: #7a8c89;   /* inputs, selects, steppers, swatches: 3.3-3.5:1 on paper and card (WCAG 1.4.11) */
  --plate: #f6f1e7;          /* paper plate under washes in dark mode */
  --wash-host-bg: transparent;
  --art-ground: #fbf8f2;     /* paper ground inside painted tile panels */
  --frame-line: #173a3a;     /* RETIRED 10 Oct (round 2) with the painted mats; unused */

  /* Text */
  --ink: #173a3a;            /* 11.6:1 on paper */
  --ink-soft: #4a6463;       /* 6.0:1 on paper */
  --ink-fixed: #173a3a;      /* text on light tints in BOTH themes */
  --on-ink: #fbf8f2;
  --accent-text: #2f6b4a;    /* sage-deep, eyebrows and ticks, 6.0:1 */
  --coral-text: #a95139;     /* 5.0:1 on paper */
  --error: #a95139;
  --link: #173a3a;

  /* Pigments: fills only, never text */
  --sage: #9cc3a5;
  --coral: #e8734f;
  --sky: #8fb8d8;
  --honey: #e9b949;
  --lavender: #b9a7d6;
  --blush: #e9a9b0;

  /* Tints for tags and small fills (ink text on all of them, 10:1+) */
  --sage-tint: #e3efe6;
  --coral-tint: #fde3d8;
  --sky-tint: #e2eef6;
  --honey-tint: #f8ebc8;
  --lavender-tint: #ece8f5;
  --blush-tint: #f9e4e6;

  /* Buttons */
  --btn-primary-bg: #173a3a;
  --btn-primary-fg: #fbf8f2;
  --btn-primary-hover: #22504f;
  --btn-primary-active: #0e2a2a;
  --btn-secondary-bg: #ffffff;
  --btn-secondary-hover: #f3ede2;
  --btn-cta-bg: #ee8a6a;     /* logo coral, ink text 5.0:1 */
  --btn-cta-fg: #173a3a;
  --btn-cta-hover: #f29d80;
  --btn-cta-active: #ea8361;
  --btn-disabled-bg: #ebe5da;
  --btn-disabled-fg: #56696a; /* 4.6:1 on its fill */

  /* Chrome */
  --bar-bg: #173a3a;
  --bar-fg: #fbf8f2;
  --bar-accent: #f19a7e;
  --footer-bg: #173a3a;
  --footer-fg: #fbf8f2;
  --footer-soft: #c9d6d3;    /* 8.2:1 on ink */
  --footer-line: rgba(251, 248, 242, .16);
  --tab-active-bg: #e3efe6;

  /* Focus: 3px ink ring with a 2px gap */
  --focus: #173a3a;

  /* Elevation */
  --shadow: 0 1px 2px rgba(23, 58, 58, .06), 0 8px 24px rgba(23, 58, 58, .06);
  --shadow-lift: 0 2px 4px rgba(23, 58, 58, .07), 0 14px 32px rgba(23, 58, 58, .10);
  --pet-shadow: rgba(23, 58, 58, .16);
  --photo-shadow: 0 1px 2px rgba(23, 58, 58, .06), 0 14px 20px -16px rgba(23, 58, 58, .3);   /* rounded photos: no frame, just this (reaches 4px sideways, so it never bleeds into the next slide) */

  /* Theme switches (read by components) */
  --light-only: block;
  --dark-only: none;
  --light-only-inline: inline-block;
  --dark-only-inline: none;
  --paint-blend: multiply;

  /* Layout: ONE shared width for bar, header, main and footer */
  --gutter: clamp(16px, 5.6vw - 5px, 76px);
  --safe-x: max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px));   /* 0 except notched phones in landscape */
  --shell: min(100% - 2 * max(var(--gutter), var(--safe-x)), 1680px);
  --section: clamp(48px, 6.7vw, 96px);
  --header-h: 76px;
  --bar-h: 40px;
  --tabbar-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --measure: 30.5em;         /* about 68 Figtree characters per line at any size (ch is the wide zero) */
  --mat: 0px;                /* RETIRED 10 Oct (round 2): photos have no painted frame; kept at 0 for older page CSS */

  /* Spacing (8px grid) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;

  /* Radii */
  --r-card: 24px;
  --r-tile: 20px;
  --r-btn: 14px;
  --r-input: 12px;
  --r-pill: 999px;

  /* Type */
  --font-display: 'Fraunces', 'Fraunces Fallback', Georgia, serif;
  --font-body: 'Figtree', 'Figtree Fallback', Arial, sans-serif;
  --fs-body: 16px;
  --fs-small: 15px;
  --fs-label: 13px;
  --fs-display: clamp(32px, 2.2vw + 18px, 56px);
  --fs-h1: clamp(26px, 1.6vw + 12px, 38px);
  --fs-h2: clamp(22px, 1vw + 15px, 30px);
  --fs-h3: clamp(18px, .25vw + 16.5px, 20px);
  --fs-price: clamp(24px, .6vw + 21px, 30px);
  --fs-lead: clamp(16px, .2vw + 15.2px, 18px);

  /* Motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --t-fast: 180ms;
  --t: 250ms;
  --t-pet: 400ms;
  --marquee-duration: 45s;
}

@media (min-width: 600px) {
  :root { --fs-body: 17px; --bar-h: 40px; }
}
@media (max-width: 599.98px) {
  :root { --bar-h: 36px; }
}
@media (max-width: 899.98px) {
  :root { --header-h: 60px; }
}

/* Dark tokens. JS sets data-theme before first paint; the media block is the
   no-JS fallback for the tokens only. Keep both blocks identical. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #0f2223;
  --card: #15302f;
  --linen: #1b3836;
  --well: #efe9de;
  --line: #2a4746;
  --line-strong: #3b5a58;
  --field-border: #6f8a87;
  --wash-host-bg: var(--plate);
  --art-ground: #1b3836;
  --frame-line: rgba(243, 239, 231, .62);
  --ink: #f3efe7;
  --ink-soft: #b9c9c6;
  --on-ink: #173a3a;
  --accent-text: #8cc5a0;
  --coral-text: #f19a7e;
  --error: #f19a7e;
  --link: #f3efe7;
  --btn-primary-bg: #f3efe7;
  --btn-primary-fg: #173a3a;
  --btn-primary-hover: #ffffff;
  --btn-primary-active: #e2dccf;
  --btn-secondary-bg: #15302f;
  --btn-secondary-hover: #1b3836;
  --btn-cta-bg: #f19a7e;
  --btn-cta-fg: #173a3a;
  --btn-cta-hover: #f5ad95;
  --btn-cta-active: #ec8c6c;
  --btn-disabled-bg: #24403f;
  --btn-disabled-fg: #a9bab7;
  --bar-bg: #1d4140;
  --bar-fg: #f3efe7;
  --footer-bg: #173a3a;
  --footer-line: rgba(243, 239, 231, .16);
  --tab-active-bg: #24403f;
  --focus: #f3efe7;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px rgba(0, 0, 0, .28);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, .35), 0 16px 36px rgba(0, 0, 0, .34);
  --pet-shadow: rgba(0, 0, 0, .45);
  --photo-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 14px 20px -16px rgba(0, 0, 0, .55);
  --light-only: none;
  --dark-only: block;
  --light-only-inline: none;
  --dark-only-inline: inline-block;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --paper: #0f2223; --card: #15302f; --linen: #1b3836; --well: #efe9de; --line: #2a4746; --line-strong: #3b5a58;
    --field-border: #6f8a87; --art-ground: #1b3836; --frame-line: rgba(243, 239, 231, .62);
    --wash-host-bg: var(--plate); --ink: #f3efe7; --ink-soft: #b9c9c6; --on-ink: #173a3a; --accent-text: #8cc5a0;
    --coral-text: #f19a7e; --error: #f19a7e; --link: #f3efe7; --btn-primary-bg: #f3efe7; --btn-primary-fg: #173a3a;
    --btn-primary-hover: #ffffff; --btn-primary-active: #e2dccf; --btn-secondary-bg: #15302f; --btn-secondary-hover: #1b3836;
    --btn-cta-bg: #f19a7e; --btn-cta-fg: #173a3a; --btn-cta-hover: #f5ad95; --btn-cta-active: #ec8c6c;
    --btn-disabled-bg: #24403f; --btn-disabled-fg: #a9bab7; --bar-bg: #1d4140; --bar-fg: #f3efe7; --footer-bg: #173a3a;
    --footer-line: rgba(243, 239, 231, .16); --tab-active-bg: #24403f; --focus: #f3efe7;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px rgba(0, 0, 0, .28);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, .35), 0 16px 36px rgba(0, 0, 0, .34); --pet-shadow: rgba(0, 0, 0, .45);
    --photo-shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 14px 20px -16px rgba(0, 0, 0, .55);
    --light-only: none; --dark-only: block; --light-only-inline: none; --dark-only-inline: inline-block;
  }
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 24px); }
/* WCAG 2.4.11: keyboard focus never lands under the fixed tab bar or buy bar
   (both are --tabbar-h tall, 10px off the bottom edge) */
@media (max-width: 899.98px) {
  html { scroll-padding-bottom: calc(var(--tabbar-h) + 24px + var(--safe-b)); }
}
body {
  margin: 0;
  min-height: 100vh;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--link); text-decoration-thickness: 1.5px; text-underline-offset: .18em; }
@media (hover: hover) and (pointer: fine) { a:hover { text-decoration-thickness: 2px; } }
p { margin: 0; }
h1, h2, h3, h4 { margin: 0; }
ul, ol { margin: 0; padding: 0; }
:where(ul, ol)[class] { list-style: none; }
hr { border: 0; border-top: 1px solid var(--line); margin: 0; }
::selection { background: var(--sage-tint); color: var(--ink-fixed); }

:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

[hidden] { display: none !important; }

.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 200;
  padding: 10px 16px; border-radius: var(--r-btn);
  background: var(--btn-primary-bg); color: var(--btn-primary-fg); font-weight: 600; text-decoration: none;
}
.skip-link:focus-visible { top: 12px; }

/* State hooks (set by osevaro.js / the review controls) */
html:not([data-order="open"]) [data-when-order="open"],
html[data-order="open"] [data-when-order="closed"],
html:not([data-wash="rich"]) [data-when-wash="rich"],
html[data-wash="rich"] [data-when-wash="calm"],
html:not([data-product="801"]) [data-when-product="801"],
html:not([data-product="814"]) [data-when-product="814"],
html:not([data-product="815"]) [data-when-product="815"] { display: none !important; }
[data-theme-only="dark"] { display: var(--dark-only) !important; }
[data-theme-only="light"] { display: var(--light-only) !important; }

/* --------------------------------------------------------------------------
   3. Layout: the one shared shell
   -------------------------------------------------------------------------- */
.shell {
  width: var(--shell);
  margin-inline: auto;
}
.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * .6); }
.section + .section { padding-top: 0; }
main { display: block; }
.stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--s4)); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--s3)); }
.grid { display: grid; gap: var(--grid-gap, var(--s5)); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--products {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(12px, 1.8vw, 28px);
}
.grid--products > li { display: flex; flex-direction: column; min-width: 0; }
.grid--products > li > .pcard, .grid--products > li > .door { flex: 1; }
@media (min-width: 700px) { .grid--products { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1180px) { .grid--products { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.grid--tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 28px); }
@media (max-width: 899.98px) {
  .grid--tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3, .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599.98px) {
  .grid--2, .grid--3 { grid-template-columns: minmax(0, 1fr); }
}
.surface {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
}
.surface--flat { box-shadow: none; }
.pad { padding: clamp(20px, 2.6vw, 40px); }

/* --------------------------------------------------------------------------
   4. Type
   -------------------------------------------------------------------------- */
.display, .h1, .h2, .price, .serif {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: 'SOFT' 50;
  font-optical-sizing: auto;
  letter-spacing: -.01em;
}
.display, .h1, .h2, .h3 { text-wrap: balance; }
.lead, .prose, .feature__text { text-wrap: pretty; }
.display { font-size: var(--fs-display); line-height: 1.08; letter-spacing: -.02em; }
.h1 { font-size: var(--fs-h1); line-height: 1.15; }
.h2 { font-size: var(--fs-h2); line-height: 1.2; }
.h3 { font-family: var(--font-body); font-size: var(--fs-h3); font-weight: 700; line-height: 1.3; letter-spacing: 0; }
.lead { font-size: var(--fs-lead); color: var(--ink-soft); line-height: 1.55; max-width: 33em; }
.body { font-size: var(--fs-body); }
.small { font-size: var(--fs-small); line-height: 1.55; }
.muted { color: var(--ink-soft); }
.label {
  font-size: var(--fs-label); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; line-height: 1.3;
}
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: .9em; }
.prose ul { padding-left: 1.2em; list-style: disc; }
.prose li + li { margin-top: .35em; }
.price {
  font-size: var(--fs-price);
  line-height: 1.1;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: 0;
}
.price--sm { font-size: 21px; }
.num { font-variant-numeric: lining-nums tabular-nums; }

/* Eyebrow with a watercolour dot (the dot is decoration, beside the text) */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-label); font-weight: 700; letter-spacing: .07em; text-transform: uppercase; line-height: 1.3;
  color: var(--accent-text);
  text-decoration: none;
}
.eyebrow__dot { width: 18px; height: 18px; flex: none; margin-left: -2px; }
@media (hover: hover) and (pointer: fine) { a.eyebrow:hover { text-decoration: underline; } }

/* Section heading + brush underline (the brush sits UNDER the text, never behind it) */
.sec-head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: clamp(24px, 3vw, 40px); }
.sec-head .lead { margin-top: 2px; }
.sec-head--center { align-items: center; text-align: center; }
.sec-head--center .lead { margin-inline: auto; }
.sec-head--row { flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; }
.sec-head--row > :first-child { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.brush { display: block; width: 88px; height: 15px; object-fit: fill; margin-top: 2px; }
.brush--wide { width: 112px; height: 18px; }

/* Fit line: icon + one fact + an underlined help link */
.fitline { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; }
.fitline > .ic { --ic-size: 20px; color: var(--accent-text); margin-top: 1px; }
.fitline a { white-space: nowrap; }

/* Unconfirmed facts (delivery, returns, VAT, dispatch). Customers see neutral,
   complete copy ("Delivery details coming soon"); the owner sees what is still
   open as a review annotation (.tbc__mark / .onote / .vfy__tag), drawn in the
   review controls' off-brand dashed style and shown only with html.show-verify
   (review controls open, the "Owner notes" row, or ?notes=1 / ?verify=1). */
.tbc { color: var(--ink-soft); }
.tbc__mark, .onote, .vfy__tag { display: none; }
html.show-verify :is(.tbc__mark, .onote, .vfy__tag) {
  display: inline-flex; align-items: center; gap: 5px; min-height: 22px; padding: 1px 7px; margin-left: 6px;
  border: 1.5px dashed #555; border-radius: 6px; background: #fffef7; color: #1f1f1f;
  font: 600 13px/1.25 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0;
  text-transform: none; vertical-align: 1px; white-space: normal; cursor: help;
}
html.show-verify :is(.tbc__mark, .onote)::before { content: "note"; padding: 0 4px; border-radius: 3px; background: #1f1f1f; color: #fffef7; font-size: 13px; line-height: 1.3; }
html.show-verify .onote--block { display: flex; margin: 8px 0 0; }
/* VERIFY: facts from the draft: normal copy, outlined for the owner */
html.show-verify .vfy {
  outline: 1.5px dashed currentColor; outline-offset: 2px; border-radius: 3px;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
html.show-verify .vfy__tag--img {
  position: absolute; top: 12px; left: 12px; right: 64px; z-index: 2; margin: 0; padding: 6px 8px; line-height: 1.35; font-weight: 500;
}
/* Copy the owner still has to write ("[your launch perk]"): always visible */
.ph {
  display: inline; padding: 0 6px; border: 1.5px dashed var(--ink-soft); border-radius: 8px;
  background: var(--honey-tint); color: var(--ink-fixed); font-weight: 700;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* --------------------------------------------------------------------------
   5. Icons: 24px line icons as masks, colour = currentColor
   -------------------------------------------------------------------------- */
.ic {
  display: inline-block; flex: none;
  width: var(--ic-size, 22px); height: var(--ic-size, 22px);
  background: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat;
          mask: var(--ic) center / contain no-repeat;
}
.ic--sm { --ic-size: 18px; }
.ic--lg { --ic-size: 28px; }
/* ICONS:START (generated, see README) */
:root{--paw-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000'%3E%3Cellipse cx='6.4' cy='10.4' rx='1.9' ry='2.4' transform='rotate%28-18 6.4 10.4%29'/%3E%3Cellipse cx='10' cy='6.6' rx='2' ry='2.6' transform='rotate%28-6 10 6.6%29'/%3E%3Cellipse cx='14.4' cy='6.6' rx='2' ry='2.6' transform='rotate%288 14.4 6.6%29'/%3E%3Cellipse cx='17.9' cy='10.6' rx='1.9' ry='2.4' transform='rotate%2820 17.9 10.6%29'/%3E%3Cpath d='M12.2 11.6c2.6 0 5.1 3.3 5.1 5.6 0 1.7-1.3 2.6-2.8 2.6-.9 0-1.5-.4-2.3-.4s-1.4.4-2.3.4c-1.5 0-2.8-.9-2.8-2.6 0-2.3 2.5-5.6 5.1-5.6z'/%3E%3C/g%3E%3C/svg%3E");--check-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='m5.5 12.5 4.2 4.2 8.8-9.4'/%3E%3C/svg%3E")}
.ic--search{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5 20 20'/%3E%3C/g%3E%3C/svg%3E")}
.ic--heart{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M12 19.6s-7.6-4.5-7.6-10A4.2 4.2 0 0 1 8.6 5.4c1.5 0 2.7.7 3.4 1.9.7-1.2 1.9-1.9 3.4-1.9a4.2 4.2 0 0 1 4.2 4.2c0 5.5-7.6 10-7.6 10z'/%3E%3C/svg%3E")}
.ic--heart-fill{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 19.6s-7.6-4.5-7.6-10A4.2 4.2 0 0 1 8.6 5.4c1.5 0 2.7.7 3.4 1.9.7-1.2 1.9-1.9 3.4-1.9a4.2 4.2 0 0 1 4.2 4.2c0 5.5-7.6 10-7.6 10z'/%3E%3C/svg%3E")}
.ic--basket{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.2 8.5h13.6l-1.1 10.4a1.6 1.6 0 0 1-1.6 1.4H7.9a1.6 1.6 0 0 1-1.6-1.4z'/%3E%3Cpath d='M8.8 8.5V7a3.2 3.2 0 0 1 6.4 0v1.5'/%3E%3C/g%3E%3C/svg%3E")}
.ic--user{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.2' r='3.7'/%3E%3Cpath d='M4.8 20c.9-3.6 3.7-5.6 7.2-5.6s6.3 2 7.2 5.6'/%3E%3C/g%3E%3C/svg%3E")}
.ic--home{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 10.2 12 4.2l7.5 6V19a1.2 1.2 0 0 1-1.2 1.2h-3.9v-5.6H9.6v5.6H5.7A1.2 1.2 0 0 1 4.5 19z'/%3E%3C/g%3E%3C/svg%3E")}
.ic--grid{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='6.6' height='6.6' rx='2'/%3E%3Crect x='13.4' y='4' width='6.6' height='6.6' rx='2'/%3E%3Crect x='4' y='13.4' width='6.6' height='6.6' rx='2'/%3E%3Crect x='13.4' y='13.4' width='6.6' height='6.6' rx='3.3'/%3E%3C/g%3E%3C/svg%3E")}
.ic--sun{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2.8v1.8M12 19.4v1.8M2.8 12h1.8M19.4 12h1.8M5.5 5.5l1.3 1.3M17.2 17.2l1.3 1.3M5.5 18.5l1.3-1.3M17.2 6.8l1.3-1.3'/%3E%3C/g%3E%3C/svg%3E")}
.ic--moon{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M19.5 14.6A7.8 7.8 0 0 1 9.4 4.5a7.8 7.8 0 1 0 10.1 10.1z'/%3E%3C/svg%3E")}
.ic--chevron-down{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='m6.5 9.5 5.5 5.5 5.5-5.5'/%3E%3C/svg%3E")}
.ic--chevron-left{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M14.5 6 8.5 12l6 6'/%3E%3C/svg%3E")}
.ic--chevron-right{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='m9.5 6 6 6-6 6'/%3E%3C/svg%3E")}
.ic--arrow-right{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M4.5 12h15M13.5 6l6 6-6 6'/%3E%3C/svg%3E")}
.ic--arrow-left{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M19.5 12h-15M10.5 6l-6 6 6 6'/%3E%3C/svg%3E")}
.ic--plus{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M12 5v14M5 12h14'/%3E%3C/svg%3E")}
.ic--minus{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M5 12h14'/%3E%3C/svg%3E")}
.ic--close{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M6.5 6.5l11 11M17.5 6.5l-11 11'/%3E%3C/svg%3E")}
.ic--pause{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000'%3E%3Crect x='7' y='5.5' width='3.4' height='13' rx='1.2'/%3E%3Crect x='13.6' y='5.5' width='3.4' height='13' rx='1.2'/%3E%3C/g%3E%3C/svg%3E")}
.ic--play{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M8 5.6c0-.9 1-1.4 1.7-.9l9 6.1c.7.5.7 1.4 0 1.9l-9 6.1c-.7.5-1.7 0-1.7-.9z'/%3E%3C/svg%3E")}
.ic--check{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='m5.5 12.5 4.2 4.2 8.8-9.4'/%3E%3C/svg%3E")}
.ic--paw{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000'%3E%3Cellipse cx='6.4' cy='10.4' rx='1.9' ry='2.4' transform='rotate%28-18 6.4 10.4%29'/%3E%3Cellipse cx='10' cy='6.6' rx='2' ry='2.6' transform='rotate%28-6 10 6.6%29'/%3E%3Cellipse cx='14.4' cy='6.6' rx='2' ry='2.6' transform='rotate%288 14.4 6.6%29'/%3E%3Cellipse cx='17.9' cy='10.6' rx='1.9' ry='2.4' transform='rotate%2820 17.9 10.6%29'/%3E%3Cpath d='M12.2 11.6c2.6 0 5.1 3.3 5.1 5.6 0 1.7-1.3 2.6-2.8 2.6-.9 0-1.5-.4-2.3-.4s-1.4.4-2.3.4c-1.5 0-2.8-.9-2.8-2.6 0-2.3 2.5-5.6 5.1-5.6z'/%3E%3C/g%3E%3C/svg%3E")}
.ic--truck{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6.8h10.6v9.4H3zM13.6 9.6h3.8l3.1 3.3v3.3h-6.9'/%3E%3Ccircle cx='7' cy='17.3' r='1.8'/%3E%3Ccircle cx='16.9' cy='17.3' r='1.8'/%3E%3C/g%3E%3C/svg%3E")}
.ic--return{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 13.5 4 9l4.5-4.5'/%3E%3Cpath d='M4 9h10.2a5.5 5.5 0 0 1 0 11H11'/%3E%3C/g%3E%3C/svg%3E")}
.ic--mail{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5.5' width='17' height='13' rx='2.2'/%3E%3Cpath d='m4.2 7 7.8 6 7.8-6'/%3E%3C/g%3E%3C/svg%3E")}
.ic--ruler{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.8' y='8' width='18.4' height='8' rx='1.6'/%3E%3Cpath d='M6.6 8v3M10.2 8v4.2M13.8 8v3M17.4 8v4.2'/%3E%3C/g%3E%3C/svg%3E")}
.ic--info{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M12 11v5.2M12 7.7v.1'/%3E%3C/g%3E%3C/svg%3E")}
.ic--bed{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 18.5v-5.8a2.4 2.4 0 0 1 2.4-2.4h12.2a2.4 2.4 0 0 1 2.4 2.4v5.8'/%3E%3Cpath d='M3.5 15.6h17'/%3E%3Cpath d='M5.8 10.3V8.5a2.2 2.2 0 0 1 2.2-2.2h8a2.2 2.2 0 0 1 2.2 2.2v1.8'/%3E%3C/g%3E%3C/svg%3E")}
.ic--wash{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='3.5' width='15' height='17' rx='2.4'/%3E%3Ccircle cx='12' cy='13' r='4.2'/%3E%3Cpath d='M7.5 6.8h1.2M10.6 6.8h.1'/%3E%3Cpath d='M9.6 13.6c1.1-.8 2.1.8 3.3 0 .6-.4 1-.4 1.6-.1'/%3E%3C/g%3E%3C/svg%3E")}
.ic--anchor{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19.5h14'/%3E%3Cpath d='M7.5 19.5v-7.2a4.5 4.5 0 0 1 9 0v7.2'/%3E%3Cpath d='M12 7.8V4.5'/%3E%3C/g%3E%3C/svg%3E")}
.ic--weight{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.4 9h11.2l1.8 10.5H4.6z'/%3E%3Ccircle cx='12' cy='6' r='2.2'/%3E%3C/g%3E%3C/svg%3E")}
.ic--expand{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M4.5 9.5v-5h5M19.5 9.5v-5h-5M4.5 14.5v5h5M19.5 14.5v5h-5'/%3E%3C/svg%3E")}
.ic--lock{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='5' y='10.5' width='14' height='9.5' rx='2.2'/%3E%3Cpath d='M8.3 10.5V8a3.7 3.7 0 0 1 7.4 0v2.5'/%3E%3C/g%3E%3C/svg%3E")}
.ic--wheel{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4.5v11.5a2 2 0 0 0 2 2h9'/%3E%3Cpath d='M4.5 4.5H7'/%3E%3Crect x='9.5' y='8' width='9' height='7' rx='1.6'/%3E%3Ccircle cx='10.5' cy='19.6' r='1.4'/%3E%3Ccircle cx='17' cy='19.6' r='1.4'/%3E%3C/g%3E%3C/svg%3E")}
.ic--fold{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8.5 12 5l8 3.5-8 3.5z'/%3E%3Cpath d='M4 12.5 12 16l8-3.5M4 16.5 12 20l8-3.5'/%3E%3C/g%3E%3C/svg%3E")}
.ic--door{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5V11a8 8 0 0 1 16 0v8.5'/%3E%3Cpath d='M3 19.5h18'/%3E%3Ccircle cx='12' cy='13.4' r='3.4'/%3E%3C/g%3E%3C/svg%3E")}
.ic--leaf{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19c0-8 5-13 14-14 0 9-5 14-13 14z'/%3E%3Cpath d='M5 19 13 11'/%3E%3C/g%3E%3C/svg%3E")}
.ic--dog{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.4 6.4C5.2 6 3.8 7.7 4 10.6c.1 1.4.9 2.3 2.1 2.2'/%3E%3Cpath d='M16.6 6.4c2.2-.4 3.6 1.3 3.4 4.2-.1 1.4-.9 2.3-2.1 2.2'/%3E%3Cpath d='M7.4 6.4C8.6 5.4 10.2 5 12 5s3.4.4 4.6 1.4c1 1 1.4 2.6 1.3 4.2l-.3 4.6c-.2 2.6-2.6 4.6-5.6 4.6s-5.4-2-5.6-4.6l-.3-4.6c-.1-1.6.3-3.2 1.3-4.2z'/%3E%3Cpath d='M10.6 15.6c.8.6 2 .6 2.8 0'/%3E%3C/g%3E%3Cg fill='%23000'%3E%3Ccircle cx='9.7' cy='11' r='.9'/%3E%3Ccircle cx='14.3' cy='11' r='.9'/%3E%3Cellipse cx='12' cy='13.8' rx='1.3' ry='.9'/%3E%3C/g%3E%3C/svg%3E")}
.ic--cat{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.2 13.2c0 3.9 3 6.5 6.8 6.5s6.8-2.6 6.8-6.5c0-1.6-.4-3-1-4.1l.6-5-4 2.6a8.6 8.6 0 0 0-4.8 0l-4-2.6.6 5c-.6 1.1-1 2.5-1 4.1z'/%3E%3Cpath d='M10.8 15.4c.4.4.8.6 1.2.6s.8-.2 1.2-.6'/%3E%3Cpath d='M3 13.6l3 .4M3.4 16.3l2.9-.7M21 13.6l-3 .4M20.6 16.3l-2.9-.7'/%3E%3C/g%3E%3Cg fill='%23000'%3E%3Ccircle cx='9.5' cy='12' r='.9'/%3E%3Ccircle cx='14.5' cy='12' r='.9'/%3E%3Cpath d='M11.1 13.7h1.8l-.9.9z'/%3E%3C/g%3E%3C/svg%3E")}
.ic--share{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='17.5' cy='5.8' r='2.4'/%3E%3Ccircle cx='6.5' cy='12' r='2.4'/%3E%3Ccircle cx='17.5' cy='18.2' r='2.4'/%3E%3Cpath d='m8.6 10.8 6.8-3.8M8.6 13.2l6.8 3.8'/%3E%3C/g%3E%3C/svg%3E")}
.ic--ball{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.4'/%3E%3Cpath d='M4.6 9.2c4.6.4 9.8 3.4 12.4 9.4M8.4 4.4c.8 4.8 4.8 9.8 11.4 11.2'/%3E%3C/g%3E%3C/svg%3E")}
.ic--brush{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.8' y='5' width='11' height='6.4' rx='2.2'/%3E%3Cpath d='M5.8 11.4v2.4M8.4 11.4v3M11 11.4v2.4M13.4 11.4v1.6'/%3E%3Cpath d='M14.8 8.2h3.6a2 2 0 0 1 1.9 2.5l-2.2 8.3'/%3E%3C/g%3E%3C/svg%3E")}
.ic--lead{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.2 3.8a3.6 3.6 0 1 1 0 7.2 3.6 3.6 0 0 1 0-7.2z'/%3E%3Cpath d='M11.6 9.8 5.6 20.2'/%3E%3Cpath d='M4.5 18.4l3.2 1.9'/%3E%3C/g%3E%3C/svg%3E")}
.ic--help{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.6'/%3E%3Cpath d='M9.6 9.6a2.5 2.5 0 0 1 4.8.9c0 1.7-2.4 2.1-2.4 3.6M12 16.9v.1'/%3E%3C/g%3E%3C/svg%3E")}
.ic--filter{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7.5h8.6M17.4 7.5H20M4 16.5h2.6M11.4 16.5H20'/%3E%3Ccircle cx='15' cy='7.5' r='2.4'/%3E%3Ccircle cx='9' cy='16.5' r='2.4'/%3E%3C/g%3E%3C/svg%3E")}
.ic--more{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000'%3E%3Ccircle cx='5.5' cy='12' r='1.75'/%3E%3Ccircle cx='12' cy='12' r='1.75'/%3E%3Ccircle cx='18.5' cy='12' r='1.75'/%3E%3C/g%3E%3C/svg%3E")}
.ic--menu-dots-v{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23000'%3E%3Ccircle cx='12' cy='5.5' r='1.75'/%3E%3Ccircle cx='12' cy='12' r='1.75'/%3E%3Ccircle cx='12' cy='18.5' r='1.75'/%3E%3C/g%3E%3C/svg%3E")}
.ic--add-square{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='4' width='16' height='16' rx='4.2'/%3E%3Cpath d='M12 8.4v7.2M8.4 12h7.2'/%3E%3C/g%3E%3C/svg%3E")}
.ic--install{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.8v10.4M7.9 10.3l4.1 4.1 4.1-4.1'/%3E%3Cpath d='M4.8 14.6v2.9a2.7 2.7 0 0 0 2.7 2.7h9a2.7 2.7 0 0 0 2.7-2.7v-2.9'/%3E%3C/g%3E%3C/svg%3E")}
.ic--wifi-off{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.8 9.1a14 14 0 0 1 4.4-2.8M10.6 5.6a14 14 0 0 1 10.6 3.5M5.9 12.5a9.4 9.4 0 0 1 4-2.2M14.5 10.6a9.4 9.4 0 0 1 3.6 1.9M9.1 15.8a4.6 4.6 0 0 1 5.8 0M4 4l16 16'/%3E%3Ccircle cx='12' cy='19.2' r='.4'/%3E%3C/g%3E%3C/svg%3E")}
.ic--refresh{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.4 12.6a7.5 7.5 0 1 1-2.4-6.1'/%3E%3Cpath d='M19.6 4.4v4.3h-4.3'/%3E%3C/g%3E%3C/svg%3E")}
.ic--copy{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8.6' y='8.6' width='11' height='11' rx='2.6'/%3E%3Cpath d='M15.4 8.6V7.3a2.6 2.6 0 0 0-2.6-2.6H7.3a2.6 2.6 0 0 0-2.6 2.6v5.5a2.6 2.6 0 0 0 2.6 2.6h1.3'/%3E%3C/g%3E%3C/svg%3E")}
.ic--share-ios{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.6v11M8.5 7.1 12 3.6l3.5 3.5'/%3E%3Cpath d='M9.2 10.4H7.6a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h8.8a2 2 0 0 0 2-2v-6a2 2 0 0 0-2-2h-1.6'/%3E%3C/g%3E%3C/svg%3E")}
.ic--sort{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 19.5v-15M4.6 7.9 8 4.5l3.4 3.4'/%3E%3Cpath d='M16 4.5v15M12.6 16.1l3.4 3.4 3.4-3.4'/%3E%3C/g%3E%3C/svg%3E")}
/* ICONS:END */

/* --------------------------------------------------------------------------
   6. Buttons: primary / secondary / coral CTA / ghost / icon + heart
   -------------------------------------------------------------------------- */
.btn {
  --btn-h: 52px;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--btn-h); padding: 0 24px;
  border: 1.5px solid transparent; border-radius: var(--r-btn);
  font-family: var(--font-body); font-size: 16px; font-weight: 650; line-height: 1.2; letter-spacing: .005em;
  text-align: center; text-decoration: none; white-space: nowrap;
  cursor: pointer; user-select: none;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn .ic { --ic-size: 20px; }
.btn--sm { --btn-h: 44px; padding: 0 18px; font-size: 15px; border-radius: 12px; }
.btn--block { display: flex; width: 100%; }
.btn--wrap { white-space: normal; }

.btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-fg); }
.btn--primary.is-hover { background: var(--btn-primary-hover); }
@media (hover: hover) and (pointer: fine) { .btn--primary:hover { background: var(--btn-primary-hover); } }
.btn--primary:active, .btn--primary.is-active { background: var(--btn-primary-active); transform: translateY(1px); }

.btn--secondary { background: var(--btn-secondary-bg); color: var(--ink); border-color: var(--ink); }
.btn--secondary.is-hover { background: var(--btn-secondary-hover); }
@media (hover: hover) and (pointer: fine) { .btn--secondary:hover { background: var(--btn-secondary-hover); } }
.btn--secondary:active, .btn--secondary.is-active { background: var(--line); transform: translateY(1px); }

.btn--cta { background: var(--btn-cta-bg); color: var(--btn-cta-fg); }
.btn--cta.is-hover { background: var(--btn-cta-hover); }
@media (hover: hover) and (pointer: fine) { .btn--cta:hover { background: var(--btn-cta-hover); } }
.btn--cta:active, .btn--cta.is-active { background: var(--btn-cta-active); transform: translateY(1px); }

.btn--ghost { background: transparent; color: var(--ink); padding-inline: 14px; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
.btn--ghost.is-hover { background: var(--linen); }
@media (hover: hover) and (pointer: fine) { .btn--ghost:hover { background: var(--linen); } }
.btn--ghost:active, .btn--ghost.is-active { background: var(--line); }

.btn:disabled, .btn[aria-disabled="true"], .btn.is-disabled {
  background: var(--btn-disabled-bg); color: var(--btn-disabled-fg); border-color: transparent;
  cursor: not-allowed; transform: none; text-decoration: none;
}
.btn.is-focus { outline: 3px solid var(--focus); outline-offset: 2px; }
/* The notify opener is coral (the one conversion action). Once its form is
   open it steps back to the outline look, so the coral "Notify me" submit
   below it is the only coral button on screen. */
.btn[data-notify-open][aria-expanded="true"] { background: var(--btn-secondary-bg); color: var(--ink); border-color: var(--ink); }

/* Icon buttons: round, solid fill so they read on any photo */
.btn-icon {
  --btn-h: 44px;
  display: inline-grid; place-items: center; flex: none;
  width: var(--btn-h); height: var(--btn-h); padding: 0;
  border: 1.5px solid var(--line-strong); border-radius: 50%;
  background: var(--card); color: var(--ink);
  cursor: pointer; text-decoration: none;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.btn-icon--lg { --btn-h: 52px; border-radius: var(--r-btn); }
.btn-icon--lg .ic { --ic-size: 24px; }
.btn-icon.is-hover { background: var(--linen); border-color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .btn-icon:hover { background: var(--linen); border-color: var(--ink); } }
.btn-icon:active, .btn-icon.is-active { transform: scale(.96); }
.btn-icon:disabled { color: var(--btn-disabled-fg); background: var(--btn-disabled-bg); border-color: transparent; cursor: not-allowed; }
.btn-icon--plain { border-color: transparent; background: transparent; }
@media (hover: hover) and (pointer: fine) { .btn-icon--plain:hover { background: var(--linen); border-color: transparent; } }

/* Heart: outline, fills with a coral wash when saved */
.btn-heart { position: relative; }
.btn-heart > .ic { grid-area: 1 / 1; }
.btn-heart > .ic--heart-fill {
  background: linear-gradient(150deg, #fbc1a6 0%, #f8906a 55%, #e8734f 100%);
  transform: scale(0); opacity: 0;
  transition: transform var(--t) var(--ease), opacity var(--t) var(--ease);
}
.btn-heart[aria-pressed="true"] { border-color: var(--coral-text); }
.btn-heart[aria-pressed="true"] > .ic--heart-fill { transform: scale(1); opacity: 1; }
.btn-heart[aria-pressed="true"] .ic--heart { color: #a95139; }
[data-theme="dark"] .btn-heart[aria-pressed="true"] .ic--heart { color: #f19a7e; }

/* Quantity stepper (ordering open) */
.qty { display: inline-flex; align-items: center; height: 52px; border: 1.5px solid var(--field-border); border-radius: var(--r-btn); background: var(--card); }
.qty button { width: 44px; height: 100%; border: 0; background: none; display: grid; place-items: center; color: var(--ink); border-radius: var(--r-btn); }
@media (hover: hover) and (pointer: fine) { .qty button:hover { background: var(--linen); } }
.qty output { min-width: 28px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }
.qty--sm { height: 44px; }   /* list rows (the basket line); buttons keep their 44px width */

/* --------------------------------------------------------------------------
   7. Tags and badges: solid fills, at most ONE per card or image
   -------------------------------------------------------------------------- */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  height: 28px; padding: 0 12px;
  border-radius: var(--r-pill); border: 1.5px solid transparent;
  background: #fbf8f2; color: var(--ink-fixed);
  font-size: 13px; font-weight: 650; line-height: 1; letter-spacing: .02em; white-space: nowrap;
  max-width: 100%; min-width: 0; overflow: hidden;   /* safety net: never widens the page */
}
.tag .ic { --ic-size: 16px; }
/* Wrap the words in .tag__text so a squeezed tag ends in an ellipsis (an
   inline-flex box cannot ellipsis its own text). */
.tag__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2; }
.tag--soon { background: #fbf8f2; border-color: #173a3a; }
.tag--new { background: var(--honey-tint); }
.tag--best { background: var(--sage-tint); }
.tag--launch { background: var(--sky-tint); }
.tag--save { background: #a95139; color: #ffffff; }
.tag--ink { background: #173a3a; color: #fbf8f2; }
.tag--dog { background: var(--sage-tint); }
.tag--cat { background: var(--coral-tint); }
.tag--travel { background: var(--sky-tint); }
.tag--care { background: var(--honey-tint); }
.tag--lavender { background: var(--lavender-tint); }
.tag--blush { background: var(--blush-tint); }
/* Chips over images get a hairline so a solid pill still separates from busy photos */
.on-image { box-shadow: 0 1px 2px rgba(23, 58, 58, .12); }

/* Category / filter chip (44px pill): wash dot, optional count, ink when current */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 0 16px 0 11px;
  border: 1.5px solid var(--field-border); border-radius: var(--r-pill);
  background: var(--card); color: var(--ink);
  font-size: 15px; font-weight: 650; line-height: 1.2; text-decoration: none; white-space: nowrap;
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.chip:has(.chip__n) { padding-right: 7px; }
@media (hover: hover) and (pointer: fine) { .chip:hover { border-color: var(--ink); background: var(--linen); text-decoration: none; } }
.chip__dot { width: 15px; height: 15px; flex: none; }
.chip__n {
  display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 7px;
  border-radius: var(--r-pill); background: var(--linen); color: var(--ink);
  font-size: 13px; font-weight: 700; font-variant-numeric: lining-nums tabular-nums;
}
.chip[aria-current="page"], .chip[aria-pressed="true"] { background: var(--btn-primary-bg); border-color: var(--btn-primary-bg); color: var(--btn-primary-fg); }
.chip:is([aria-current="page"], [aria-pressed="true"]) .chip__n { background: rgba(251, 248, 242, .18); color: inherit; }
[data-theme="dark"] .chip:is([aria-current="page"], [aria-pressed="true"]) .chip__n { background: rgba(23, 58, 58, .1); }
/* On the ink chip (light mode) the glaze dot needs its lifted version; on the
   paper-coloured current chip in dark mode it needs the normal one. */
:root:not([data-theme="dark"]) .chip:is([aria-current="page"], [aria-pressed="true"]) .chip__dot[src$="dot-sage-1.webp"] { content: url("glaze/dot-sage-1-dark.webp"); }
:root:not([data-theme="dark"]) .chip:is([aria-current="page"], [aria-pressed="true"]) .chip__dot[src$="dot-coral-1.webp"] { content: url("glaze/dot-coral-1-dark.webp"); }
:root:not([data-theme="dark"]) .chip:is([aria-current="page"], [aria-pressed="true"]) .chip__dot[src$="dot-sky-1.webp"] { content: url("glaze/dot-sky-1-dark.webp"); }
:root:not([data-theme="dark"]) .chip:is([aria-current="page"], [aria-pressed="true"]) .chip__dot[src$="dot-honey-1.webp"] { content: url("glaze/dot-honey-1-dark.webp"); }
:root:not([data-theme="dark"]) .chip:is([aria-current="page"], [aria-pressed="true"]) .chip__dot[src$="dot-lavender-1.webp"] { content: url("glaze/dot-lavender-1-dark.webp"); }
:root:not([data-theme="dark"]) .chip:is([aria-current="page"], [aria-pressed="true"]) .chip__dot[src$="dot-blush-1.webp"] { content: url("glaze/dot-blush-1-dark.webp"); }
[data-theme="dark"] .chip:is([aria-current="page"], [aria-pressed="true"]) .chip__dot[src$="dot-sage-1.webp"] { content: url("../assets/wash/dot-sage-1.webp"); }
[data-theme="dark"] .chip:is([aria-current="page"], [aria-pressed="true"]) .chip__dot[src$="dot-coral-1.webp"] { content: url("../assets/wash/dot-coral-1.webp"); }
[data-theme="dark"] .chip:is([aria-current="page"], [aria-pressed="true"]) .chip__dot[src$="dot-sky-1.webp"] { content: url("../assets/wash/dot-sky-1.webp"); }
[data-theme="dark"] .chip:is([aria-current="page"], [aria-pressed="true"]) .chip__dot[src$="dot-honey-1.webp"] { content: url("../assets/wash/dot-honey-1.webp"); }
[data-theme="dark"] .chip:is([aria-current="page"], [aria-pressed="true"]) .chip__dot[src$="dot-lavender-1.webp"] { content: url("../assets/wash/dot-lavender-1.webp"); }
[data-theme="dark"] .chip:is([aria-current="page"], [aria-pressed="true"]) .chip__dot[src$="dot-blush-1.webp"] { content: url("../assets/wash/dot-blush-1.webp"); }
@media (max-width: 599.98px) { .chips { gap: 6px; } .chip { gap: 6px; padding-left: 10px; } }

/* "Filter in use" pill: removable, with a close icon */
.fpill {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 40px; padding: 0 10px 0 14px;
  border: 1.5px solid var(--field-border); border-radius: var(--r-pill);
  background: var(--paper); color: var(--ink);
  font-size: 14px; font-weight: 600; line-height: 1.2;
}
@media (hover: hover) and (pointer: fine) { .fpill:hover { border-color: var(--ink); background: var(--linen); } }
.fpill .ic { --ic-size: 16px; }
.fpill--clear { border-color: transparent; background: none; text-decoration: underline; text-underline-offset: .2em; padding-inline: 10px; }
@media (hover: hover) and (pointer: fine) { .fpill--clear:hover { background: var(--linen); border-color: transparent; } }

/* --------------------------------------------------------------------------
   8. Forms: input, checkbox, notify form
   -------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label { font-size: 15px; font-weight: 600; }
.input {
  width: 100%; min-height: 52px; padding: 0 16px;
  border: 1.5px solid var(--field-border); border-radius: var(--r-input);
  background: var(--card); color: var(--ink);
  font-size: 16px;
  transition: border-color var(--t-fast) var(--ease);
}
.input::placeholder { color: var(--ink-soft); opacity: 1; }
@media (hover: hover) and (pointer: fine) { .input:hover { border-color: var(--ink-soft); } }
.input:focus-visible { border-color: var(--ink); }
.input[aria-invalid="true"] { border-color: var(--error); }
.field__error { display: flex; gap: 6px; align-items: center; color: var(--error); font-size: 15px; font-weight: 600; }
.field__hint { color: var(--ink-soft); font-size: 15px; }
.check { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.5; cursor: pointer; }
.check input {
  appearance: none; flex: none; width: 22px; height: 22px; margin: 1px 0 0;
  border: 1.5px solid var(--ink-soft); border-radius: 6px; background: var(--card);
  display: grid; place-items: center; cursor: pointer;
}
.check input::after {
  content: ""; width: 14px; height: 14px; background: var(--btn-primary-fg);
  -webkit-mask: var(--check-mask) center / contain no-repeat; mask: var(--check-mask) center / contain no-repeat;
  transform: scale(0); transition: transform var(--t-fast) var(--ease);
}
.check input:checked { background: var(--btn-primary-bg); border-color: var(--btn-primary-bg); }
.check input:checked::after { transform: scale(1); }
/* Radio look for single-choice groups (sort order) */
.check--radio input { border-radius: 50%; }
.check--radio input::after { width: 10px; height: 10px; border-radius: 50%; -webkit-mask: none; mask: none; }

/* Styled native select: <span class="select"><select>..</select><span class="ic ic--chevron-down ic--sm" aria-hidden="true"></span></span> */
.select { position: relative; display: inline-flex; }
.select select {
  -webkit-appearance: none; appearance: none;
  height: 44px; padding: 0 42px 0 16px;
  border: 1.5px solid var(--field-border); border-radius: 12px;
  background: var(--card); color: var(--ink);
  font-size: 15px; font-weight: 650; cursor: pointer;
}
@media (hover: hover) and (pointer: fine) { .select select:hover { border-color: var(--ink); } }
.select > .ic { position: absolute; right: 14px; top: 50%; margin-top: -9px; pointer-events: none; }
.hp { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; opacity: 0; }

/* Linen note above the action row */
.note {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--r-input);
  background: var(--linen); color: var(--ink);
  font-size: 15px; line-height: 1.5;
}
.note .ic { --ic-size: 20px; margin-top: 1px; color: var(--accent-text); }

/* Notify (inline, expands from the main button) */
.notify { display: flex; flex-direction: column; gap: 12px; }
.action-row { display: flex; gap: 10px; align-items: stretch; }
.action-row > .btn { flex: 1 1 auto; min-width: 0; white-space: normal; text-wrap: balance; line-height: 1.25; padding-inline: 18px; }
.notify__form {
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: var(--card);
}
.notify__form[hidden] { display: none; }
.notify__row { display: flex; gap: 8px; }
.notify__row .input { flex: 1; min-width: 0; }
.notify__privacy { font-size: 15px; color: var(--ink-soft); line-height: 1.5; }
.notify__privacy a { color: inherit; }
.notify__done {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: 16px; background: var(--sage-tint); color: var(--ink-fixed); font-weight: 600; font-size: 16px;
}
.notify__done[hidden] { display: none; }
.paw-tick {
  display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: #173a3a; color: #fbf8f2;
}
.paw-tick .ic { --ic-size: 20px; }
@media (max-width: 420px) {
  .notify__row { flex-direction: column; }
}

/* --------------------------------------------------------------------------
   9. Watercolour (wash kit)
   Opaque kinds (blob, tile, frame, circle) multiply onto their backdrop.
   NEVER put transform, opacity, filter, isolation or z-index on a .wash
   wrapper or between a wash and its backdrop (a white box would show).
   Dark mode: .wash__plate (paper shape) is drawn first, the paint multiplies
   onto it, the ink outline goes on top.
   -------------------------------------------------------------------------- */
.wash { position: relative; display: block; pointer-events: none; flex: none; }
.wash > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: fill; }
.wash__plate { display: var(--dark-only) !important; }
.wash__paint { mix-blend-mode: multiply; }
.wash--circle { width: var(--wash-size, 96px); height: var(--wash-size, 96px); }
.wash--blob { width: var(--wash-size, 320px); aspect-ratio: 4 / 3; }

/* Icon in a wash circle (feature tiles, trust rows) */
.wash-icon { position: relative; display: grid; place-items: center; width: var(--wash-size, 96px); height: var(--wash-size, 96px); flex: none; }
.wash-icon > .wash { position: absolute; inset: 0; width: 100%; height: 100%; }
.wash-icon > .ic { position: relative; --ic-size: calc(var(--wash-size, 96px) * .4); color: #173a3a; }
.wash-icon--sm { --wash-size: 56px; }
.wash-icon--md { --wash-size: 72px; }

/* Glazes (translucent: underline, dot) are swapped for lifted versions in
   dark mode (ds/glaze, made from the kit: lighter pigment, firmer alpha). */
[data-theme="dark"] img[src$="underline-sage-1.webp"] { content: url("glaze/underline-sage-1-dark.webp"); }
[data-theme="dark"] img[src$="underline-coral-1.webp"] { content: url("glaze/underline-coral-1-dark.webp"); }
[data-theme="dark"] img[src$="underline-sky-1.webp"] { content: url("glaze/underline-sky-1-dark.webp"); }
[data-theme="dark"] img[src$="underline-honey-1.webp"] { content: url("glaze/underline-honey-1-dark.webp"); }
[data-theme="dark"] img[src$="underline-lavender-1.webp"] { content: url("glaze/underline-lavender-1-dark.webp"); }
[data-theme="dark"] img[src$="underline-blush-1.webp"] { content: url("glaze/underline-blush-1-dark.webp"); }
[data-theme="dark"] img[src$="dot-sage-1.webp"] { content: url("glaze/dot-sage-1-dark.webp"); }
[data-theme="dark"] img[src$="dot-coral-1.webp"] { content: url("glaze/dot-coral-1-dark.webp"); }
[data-theme="dark"] img[src$="dot-sky-1.webp"] { content: url("glaze/dot-sky-1-dark.webp"); }
[data-theme="dark"] img[src$="dot-honey-1.webp"] { content: url("glaze/dot-honey-1-dark.webp"); }
[data-theme="dark"] img[src$="dot-lavender-1.webp"] { content: url("glaze/dot-lavender-1-dark.webp"); }
[data-theme="dark"] img[src$="dot-blush-1.webp"] { content: url("glaze/dot-blush-1-dark.webp"); }

/* Photos: rounded corners and nothing around them. The painted mat (frame wash,
   second paint pass, ink line) was RETIRED on 10 Oct (round 2): the owner likes the
   rounded photos but not the frame. .framed stays as the photo wrapper so older
   markup keeps working; a leftover <img class="framed__wash"> is ignored (delete it).
   A very soft shadow (--photo-shadow) lifts the photo off the paper. Watercolour
   lives elsewhere: icon circles, brush lines, eyebrow dots, category art. */
.framed { position: relative; margin: 0; padding: 0; border-radius: var(--r-tile); }
.framed__wash { display: none !important; }
.framed__photo { position: relative; display: block; width: 100%; border-radius: var(--r-tile); object-fit: cover; box-shadow: var(--photo-shadow); }
.framed--bare .framed__photo { box-shadow: none; }
/* Tighter crop on small screens without changing the photo's box:
   <span class="framed__crop" style="--crop-scale:1.8; --crop-origin:56% 69%"><img class="framed__photo" ...></span> */
.framed__crop { position: relative; display: block; overflow: hidden; border-radius: var(--r-tile); box-shadow: var(--photo-shadow); }
.framed__crop > .framed__photo { border-radius: 0; box-shadow: none; }
@media (max-width: 699.98px) {
  .framed__crop > .framed__photo { transform: scale(var(--crop-scale, 1)); transform-origin: var(--crop-origin, 50% 50%); }
}

/* RETIRED 10 Oct (round 2), with the frame: no blob behind or around a photo.
   .photo-blob now shows the photo alone in calm and rich; delete the .wash inside. */
.photo-blob { position: relative; margin: 0; }
.photo-blob > .wash { display: none !important; }
.photo-blob__photo { position: relative; display: block; width: 100%; border-radius: var(--r-tile); object-fit: cover; box-shadow: var(--photo-shadow); }

/* RETIRED in the fix round: empty corner blobs read as stains, not as the
   logo (in the logo, paint only lives inside an animal's ink outline). The
   markup is ignored so older pages render cleanly; delete it. For a bigger
   moment in rich, use .nest (a pet asleep in an outlined blob), once a page. */
.corner-wash { display: none !important; }
.corner-host { position: relative; }

/* Nest: a pet curled up inside an outlined blob (rich only, at most one per page).
   If it sits in a sticky or otherwise stacked container, that container needs
   a paper background (see README section 11). */
.nest { position: relative; display: block; width: min(100%, var(--nest-w, 300px)); pointer-events: none; }
.nest > .wash { width: 100%; }
.nest__pet { position: absolute; left: 0; right: 0; bottom: 20%; margin-inline: auto; width: 52%; }
.nest__pet img { width: 100%; height: auto; }
.nest__pet .pet__light { display: var(--light-only); }
.nest__pet .pet__dark { display: var(--dark-only); }
.nest__pet .pet__shadow { bottom: -2px; }

/* --------------------------------------------------------------------------
   10. Pets: peek (rises from behind an edge) and perch (sits on an edge)
   -------------------------------------------------------------------------- */
.pet-host { position: relative; }
.pet {
  --pet-w: 128px;
  position: absolute; z-index: 3;
  width: var(--pet-w);
  pointer-events: none;
}
.pet img { width: 100%; height: auto; max-width: none; }
/* Responsive size: set --pet-w-sm next to --pet-w (inline is fine) and the
   phone size takes over below 600px; every offset that uses --pet-w follows. */
@media (max-width: 599.98px) {
  .pet[style*="--pet-w-sm"] { --pet-w: var(--pet-w-sm) !important; }
}
.pet__light { display: var(--light-only); }
.pet__dark { display: var(--dark-only); }
.pet__shadow {
  position: absolute; left: 14%; right: 14%; bottom: -5px; height: 10px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--pet-shadow), transparent);
  filter: blur(2px);
}
/* the contact shadow lies UNDER the pet (round 2: on top it read as a smudge
   over the paws); .pet is its own stacking context (z-index 3), so -1 stays
   inside it, above the card */
.pet > .pet__shadow { z-index: -1; }
/* positions along the host's top edge */
.pet--end { right: var(--pet-inset, 28px); }
.pet--start { left: var(--pet-inset, 28px); }
.pet--center { left: 50%; margin-left: calc(var(--pet-w) / -2); }

/* Peek: the illustration's ledge line sits ON the host's top edge.
   Ducked = 60% hidden behind the edge (clipped), up = fully visible. */
.pet--peek { bottom: calc(100% - var(--pet-w) * var(--pet-ledge, .045)); }   /* the drawn ledge sits at 91% of the image height */
.pet--peek .pet__clip { display: block; clip-path: inset(-50% 0 9% 0); }
.pet--peek .pet__shadow { bottom: calc(9% - 7px); }
.pet--peek .pet__clip img { transition: transform var(--t-pet) var(--ease); }
html.motion-ok .pet--peek[data-peek]:not(.is-up) .pet__clip img { transform: translateY(60%); }
html.motion-ok .pet--peek[data-peek]:not(.is-up):not([data-peek="hover"]) .pet__shadow { opacity: .5; }

/* Perch: a sitting, standing or lying pet rests ON the host's top edge, IN FRONT
   of it (round 2: sinking a translucent pet 20-30% into a card made it look as if
   it sat behind the card). Its paws come down onto the edge by --pet-rest (4px),
   the contact shadow sits on the edge under them, and in light mode the pet uses
   the opaque front file (ds/pets/<name>-front-*.webp) so no edge or card colour
   shows through its body.
   --pet-sink = the empty strip of the picture under the line the pet rests on:
   about 2.5% for sitting and standing poses (the default), 5-6% for lying ones,
   ~34% for cat-window-sky (its sill line; the tail hangs in front of the card). */
.pet--perch { bottom: calc(100% - var(--pet-rest, 4px)); transform: translateY(var(--pet-sink, 2.5%)); transition: transform var(--t-pet) var(--ease), opacity var(--t-pet) var(--ease); }
.pet--perch .pet__shadow { bottom: calc(var(--pet-sink, 2.5%) - 6px); height: 12px; left: 8%; right: 8%; }
html.motion-ok .pet--perch[data-peek]:not(.is-up) { opacity: 0; transform: translateY(calc(var(--pet-sink, 2.5%) + 14px)); }

/* Hover peek: one pet rises above the hovered or focused card. While it is
   down, its contact shadow is gone too (it read as a grey smudge). */
html.motion-ok .pet[data-peek="hover"]:not(.is-up) .pet__clip img { transform: translateY(100%); }
.pcard:focus-within .pet[data-peek="hover"] .pet__clip img { transform: translateY(0) !important; }
@media (hover: hover) and (pointer: fine) { .pcard:hover .pet[data-peek="hover"] .pet__clip img { transform: translateY(0) !important; } }
html.motion-ok .pet[data-peek="hover"] .pet__shadow { opacity: 0; transition: opacity var(--t-pet) var(--ease); }
html.motion-ok .pcard:is(:focus-within) .pet[data-peek="hover"] .pet__shadow { opacity: 1; }
@media (hover: hover) and (pointer: fine) { html.motion-ok .pcard:hover .pet[data-peek="hover"] .pet__shadow { opacity: 1; } }
html:not(.motion-ok) .pet[data-peek="hover"] { display: none; }
@media (hover: none), (max-width: 899.98px) { .pet[data-peek="hover"] { display: none; } }

/* Reserve room so a pet never touches text */
.pet-reserve-top { padding-top: var(--pet-reserve, 56px) !important; }
.pet-safe-end { padding-inline-end: calc(var(--pet-w, 128px) + 24px); }
.pet-room { margin-top: var(--pet-room, 72px); }   /* space ABOVE a host for its peeking pet */

/* --------------------------------------------------------------------------
   11. Announcement bar + marquee
   -------------------------------------------------------------------------- */
.announce {
  --focus: #fbf8f2;
  position: relative; z-index: 40;
  display: flex; align-items: center; gap: 4px;
  min-height: var(--bar-h);
  padding: 0 6px 0 18px;
  background: var(--bar-bg); color: var(--bar-fg);
  border-radius: 0 0 16px 16px;
  font-size: 14px; font-weight: 550; line-height: 1.3;
}
/* Keep the marquee text-only. If a link must sit in it, the clip margin keeps
   its focus ring visible. */
.marquee {
  position: relative; flex: 1; min-width: 0; overflow: hidden; padding-block: 6px;
  overflow: clip; overflow-clip-margin: 6px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 28px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 20px, #000 calc(100% - 28px), transparent 100%);
}
.marquee__track { display: flex; width: max-content; }
.marquee__group { display: flex; align-items: center; flex: none; white-space: nowrap; }
.marquee__item { display: inline-flex; align-items: center; gap: 14px; padding-right: 40px; }
.marquee__item::before {
  content: ""; width: 14px; height: 14px; flex: none;
  background: var(--bar-accent);
  -webkit-mask: var(--paw-mask) center / contain no-repeat; mask: var(--paw-mask) center / contain no-repeat;
}
.marquee__item strong { font-weight: 700; }
.marquee__item a { color: inherit; }
html.motion-ok .marquee.is-running .marquee__track { animation: ov-marquee var(--marquee-duration) linear infinite; }
html.motion-ok .marquee.is-running:focus-within .marquee__track, html.motion-ok .marquee.is-paused .marquee__track, html.motion-ok .marquee.is-offscreen .marquee__track { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) { html.motion-ok .marquee.is-running:hover .marquee__track { animation-play-state: paused; } }
@keyframes ov-marquee { to { transform: translateX(-50%); } }
/* Static fallback (reduced motion, no JS): only the first message, may wrap */
html:not(.motion-ok) .marquee { -webkit-mask-image: none; mask-image: none; }
html:not(.motion-ok) .marquee__group[aria-hidden="true"] { display: none; }
html:not(.motion-ok) .marquee__item:not(:first-child) { display: none; }
html:not(.motion-ok) .marquee__track { width: auto; }
html:not(.motion-ok) .marquee__group { white-space: normal; flex: 1; }
html:not(.motion-ok) .marquee__item { white-space: normal; }
html:not(.motion-ok) .marquee__item { padding: 2px 0; }
html:not(.motion-ok) .announce__pause { display: none; }
.announce__pause {
  display: grid; place-items: center; flex: none;
  width: 44px; height: 44px; margin-block: -4px;
  border: 0; border-radius: 12px; background: transparent; color: var(--bar-fg);
}
@media (hover: hover) and (pointer: fine) { .announce__pause:hover { background: rgba(251, 248, 242, .12); } }
.announce__pause .ic { --ic-size: 16px; }
.announce__pause .ic--play { display: none; }
.announce__pause[aria-pressed="true"] .ic--play { display: inline-block; }
.announce__pause[aria-pressed="true"] .ic--pause { display: none; }
[data-theme="dark"] .announce { border: 1px solid #2c5150; border-top: 0; }

/* --------------------------------------------------------------------------
   12. Header (desktop) + one-row mobile header
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  padding-block: 10px 6px;
  background: linear-gradient(var(--paper) 72%, transparent);
  transition: transform var(--t) var(--ease);
}
.header {
  display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; gap: 20px;
  min-height: var(--header-h);
  padding: 0 12px 0 14px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-tile);
  box-shadow: var(--shadow);
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; border-radius: 12px; padding: 4px; }
.brand__emblem { width: 46px; height: 46px; }
.brand__word { width: auto; height: 21px; }
/* On ink or dark grounds the emblem sits on a clean paper disc, like the
   dark pet stickers (no glow). */
[data-theme="dark"] .brand__emblem, .brand--on-ink .brand__emblem {
  padding: 3px; border-radius: 50%; background: #f6f1e7;
  box-shadow: 0 0 0 1.5px rgba(246, 241, 231, .28);
}
[data-theme="dark"] .brand__word, .brand--on-ink .brand__word { filter: brightness(0) invert(.95) sepia(.06); }

.nav { display: flex; align-items: center; gap: 4px; }
.nav__link {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 14px; border-radius: 12px; border: 0;
  background: none; color: var(--ink); text-decoration: none;
  font-size: 16px; font-weight: 600;
}
@media (hover: hover) and (pointer: fine) { .nav__link:hover { background: var(--linen); } }
.nav__link[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 8px; }
.nav__link .ic { --ic-size: 18px; transition: transform var(--t-fast) var(--ease); }
.nav__link[aria-expanded="true"] { background: var(--linen); }
.nav__link[aria-expanded="true"] .ic { transform: rotate(180deg); }

.search { position: relative; justify-self: center; width: min(100%, 480px); min-width: 260px; }
.search .ic { position: absolute; left: 16px; top: 50%; margin-top: -10px; --ic-size: 20px; color: var(--ink-soft); pointer-events: none; }
.search__input {
  width: 100%; height: 46px; padding: 0 18px 0 46px;
  border: 1.5px solid var(--field-border); border-radius: var(--r-pill);
  background: var(--card); color: var(--ink); font-size: 16px;
}
.search__input::placeholder { color: var(--ink-soft); opacity: 1; }
@media (hover: hover) and (pointer: fine) { .search__input:hover { border-color: var(--ink); } }
.search__input::-webkit-search-cancel-button { -webkit-appearance: none; }

.actions { display: flex; align-items: center; gap: 2px; }
.action {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; min-width: 44px; padding: 0 12px; justify-content: center;
  border: 0; border-radius: 12px; background: none; color: var(--ink); text-decoration: none;
  font-size: 15px; font-weight: 600;
}
@media (hover: hover) and (pointer: fine) { .action:hover { background: var(--linen); } }
.action .ic { --ic-size: 22px; }
.action--theme { padding: 0; width: 44px; margin-left: 4px; border: 1.5px solid var(--line); border-radius: 50%; }
.action--theme .ic--sun { display: var(--dark-only-inline); }
.action--theme .ic--moon { display: var(--light-only-inline); }
.count {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--r-pill); background: #a95139; color: #ffffff;
  font-size: 13px; font-weight: 700; line-height: 1;
}
.action .count { margin-left: -2px; }
.count[hidden] { display: none; }
.action--search-m { display: none; }
/* 900-1179px: no room for a readable field, so search is the icon button and
   the full-width field drops down under the header row on toggle */
@media (min-width: 900px) and (max-width: 1179.98px) {
  .search { display: none; grid-column: 1 / -1; grid-row: 2; justify-self: stretch; width: auto; max-width: none; min-width: 0; margin: 0 2px 12px; }
  .header.is-searching .search { display: block; }
  .actions { grid-column: 4; grid-row: 1; }
  .action--search-m { display: inline-flex; }
}
@media (max-width: 1279.98px) {
  .action__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .action { padding: 0; width: 44px; }
  .action .count { position: absolute; left: 24px; top: 0; margin: 0; }
}

/* Categories dropdown (desktop) / bottom sheet (mobile) */
.dd { position: relative; }
.dd__panel {
  position: absolute; top: calc(100% + 14px); left: -8px; z-index: 60;
  width: 540px; padding: 10px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-tile);
  box-shadow: var(--shadow-lift);
}
.dd__panel[hidden] { display: none; }
.dd__title { padding: 10px 12px 6px; }
/* One column: the real catalogue has three categories. .dd__grid--2 for six or more. */
@media (min-width: 900px) { .dd__panel:not(:has(.dd__grid--2)) { width: 380px; } }
.dd__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.dd__grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dd__count { color: var(--ink-soft); font-weight: 500; }
/* Theme switch inside the phone sheet (the header has no room for it there) */
.dd__theme { display: none; }
.dd__link {
  display: flex; align-items: center; gap: 12px;
  min-height: 60px; padding: 8px 10px; border-radius: 14px;
  color: var(--ink); text-decoration: none;
}
@media (hover: hover) and (pointer: fine) { .dd__link:hover { background: var(--linen); } }
.dd__thumb { position: relative; width: 44px; height: 44px; flex: none; }
.dd__thumb .wash { position: absolute; inset: 0; width: 100%; height: 100%; }
.dd__thumb .ic { position: absolute; inset: 0; margin: auto; --ic-size: 20px; color: #173a3a; }
.dd__name { display: block; font-weight: 650; font-size: 16px; line-height: 1.25; }
.dd__sub { display: block; font-size: 14px; color: var(--ink-soft); line-height: 1.35; }
.dd__all { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; padding: 12px; border-top: 1px solid var(--line); font-weight: 650; color: var(--ink); text-decoration: none; border-radius: 0 0 12px 12px; }
@media (hover: hover) and (pointer: fine) { .dd__all:hover { background: var(--linen); } }
body.menu-open .site-header { z-index: 57; transform: none; }
.scrim { position: fixed; inset: 0; z-index: 55; background: rgba(15, 34, 35, .38); }
.scrim[hidden] { display: none; }

@media (max-width: 899.98px) {
  .site-header { padding-block: 8px 6px; }
  .header { grid-template-columns: auto 1fr auto; gap: 8px; padding: 0 6px 0 8px; border-radius: 18px; }
  .brand { gap: 8px; }
  .brand__emblem { width: 38px; height: 38px; }
  .brand__word { height: 17px; }
  .nav .nav__link:not(.dd__toggle) { display: none; }
  .nav { display: contents; }
  .dd { position: static; }
  .dd__toggle { display: none !important; }
  .search { display: none; grid-column: 1 / -1; width: auto; min-width: 0; margin: 0 2px 10px; }
  .header.is-searching .search { display: block; }
  .actions { justify-self: end; }
  .action--fav, .action--basket, .action--account { display: none; }
  .action--search-m { display: inline-flex; }
  .dd__panel {
    position: fixed; left: var(--gutter); right: var(--gutter); top: auto;
    bottom: calc(var(--tabbar-h) + 20px + var(--safe-b));
    width: auto; max-height: min(80vh, 560px); overflow: auto;
    border-radius: 24px; padding: 8px 8px 10px;
  }
  .dd__grid { grid-template-columns: minmax(0, 1fr); }
  .site-header.is-tucked { transform: translateY(-110%); }
  /* the theme switch moves into the Shop sheet when the page provides one */
  .dd__theme {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
    min-height: 52px; margin-top: 4px; padding: 0 12px; border: 0; border-top: 1px solid var(--line); border-radius: 0 0 14px 14px;
    background: none; color: var(--ink); font-weight: 650; font-size: 16px; text-align: left;
  }
  @media (hover: hover) and (pointer: fine) { .dd__theme:hover { background: var(--linen); } }
  .dd__theme .ic--sun { display: var(--dark-only-inline); }
  .dd__theme .ic--moon { display: var(--light-only-inline); }
  body:has(.dd__theme) .action--theme { display: none; }
}

/* Bottom tab bar (mobile) */
.tabbar { display: none; }
@media (max-width: 899.98px) {
  body.has-tabbar { padding-bottom: calc(var(--tabbar-h) + 24px + var(--safe-b)); }
  .tabbar {
    position: fixed; z-index: 58; left: 0; right: 0; bottom: calc(10px + var(--safe-b));
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2px;   /* 4 tabs while closed, 5 once open */
    width: var(--shell); margin-inline: auto;
    height: var(--tabbar-h); padding: 6px;
    background: var(--card); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-lift);
  }
  /* A page's sticky buy bar takes the tab bar's place (osevaro.js: Osevaro.bottomBar) */
  html.motion-ok .tabbar, html.motion-ok .buybar { transition: transform var(--t) var(--ease), visibility var(--t); }
  body.buybar-on .tabbar { transform: translateY(calc(100% + 24px + var(--safe-b))); visibility: hidden; }
  .tab {
    position: relative;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-width: 48px; padding: 0 5px; border: 0; border-radius: 16px; background: none; color: var(--ink-soft); text-decoration: none;
    font-size: 13px; font-weight: 600; line-height: 1.1;
  }
  .tab .ic { --ic-size: 22px; }
  .tab span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tab[aria-current="page"], .tab[aria-expanded="true"] { color: var(--ink); background: var(--tab-active-bg); }
  .tab .count { position: absolute; top: 4px; left: calc(50% + 6px); }
  /* Round 2: the same five tabs everywhere (Home · Categories · Favourites · Basket ·
     Account, APP-SPEC section 6). New markup: .tab__icon (the pill) + .tab__label. The
     floating capsule stays for 768-899px; the docked phone bar lives in ds/app.css. */
  .tabbar:has(.tab__icon) { grid-auto-columns: minmax(0, 1fr); padding: 4px; }
  .tab:has(.tab__icon) { gap: 4px; padding: 0 3px; border-radius: 16px; }
  .tab:has(.tab__icon)[aria-current="page"] { background: none; font-weight: 700; }
  .tab .tab__icon .count { top: -4px; left: calc(50% + 8px); }
}
/* Tab item parts (both bar styles and the sheet's static demo) */
.tab__icon { position: relative; display: grid; place-items: center; width: 56px; height: 30px; flex: none; border-radius: var(--r-pill); transition: background-color var(--t-fast) var(--ease); }
.tab__icon .ic { --ic-size: 22px; }
.tab__icon .count { position: absolute; top: -4px; left: calc(50% + 8px); }
.tab__label { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tab__short { display: none; }
.tab[aria-current="page"] .tab__icon, .tab.is-current .tab__icon { background: var(--tab-active-bg); }
/* Short labels ("Shop", "Saved") when the bar itself is under 350px wide (the docked
   bar is the screen's width; the sheet's examples are narrower) */
.tabbar { container: tabbar / inline-size; }
@container tabbar (max-width: 349.98px) {
  .tab__long { display: none; }
  .tab__short { display: inline; }
}
/* Header install button (desktop, APP-SPEC 13.6): hidden unless ds/app.js says the
   browser's install prompt is ready (html[data-install-state="native-ready"]) */
.action--install { display: none; }

/* Sticky buy bar (product pages, phones): same box as the tab bar, swaps with it */
.buybar { display: none; }
@media (max-width: 899.98px) {
  .buybar {
    position: fixed; z-index: 58; left: 0; right: 0; bottom: calc(10px + var(--safe-b));
    display: flex; align-items: center; gap: 10px;
    width: var(--shell); margin-inline: auto;
    height: var(--tabbar-h); padding: 6px 6px 6px 7px;
    background: var(--card); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow-lift);
    transform: translateY(calc(100% + 24px + var(--safe-b))); visibility: hidden;
  }
  body.buybar-on .buybar { transform: none; visibility: visible; }
}
.buybar__thumb { flex: none; width: 50px; height: 50px; overflow: hidden; border-radius: 15px; background: var(--well); box-shadow: 0 0 0 2px var(--buybar-ring, var(--sage)); }
.buybar__thumb img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.buybar__text { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; }
.buybar__name { font-size: 15px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buybar__price { font-family: var(--font-display); font-weight: 600; font-variation-settings: 'SOFT' 50; font-size: 18px; font-variant-numeric: lining-nums tabular-nums; }
.buybar__btn { flex: none; }
@media (max-width: 360px) { .buybar__btn { padding-inline: 14px; } }

/* Bottom sheet (native <dialog>, phones): size help, notify, filters.
   <dialog class="sheet" id="x" aria-labelledby="x-t"><div class="sheet__head">h2#x-t + close [data-sheet-close]</div><div class="sheet__body">..</div></dialog>
   Open with any [data-sheet-open="x"]; osevaro.js handles backdrop click, close and focus return. */
.sheet {
  position: fixed; inset: auto 0 0 0; margin: 0 auto;
  width: var(--shell); max-width: 640px; max-height: 85vh; padding: 0;
  border: 1px solid var(--line); border-bottom: 0; border-radius: 24px 24px 0 0;
  background: var(--card); color: var(--ink); box-shadow: var(--shadow-lift);
  overflow: auto; overscroll-behavior: contain;
}
.sheet::backdrop { background: rgba(15, 34, 35, .45); }
.sheet__head {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 10px 10px 20px; background: var(--card); border-bottom: 1px solid var(--line);
}
.sheet__body { padding: 18px 20px 4px; }
.sheet__foot { padding: 12px 20px calc(20px + var(--safe-b)); color: var(--ink-soft); }
html.motion-ok .sheet[open] { animation: ov-sheet-in var(--t) var(--ease) both; }
@keyframes ov-sheet-in { from { transform: translateY(24px); opacity: 0; } }
/* Round 2 (APP-SPEC section 8): a decorative grabber (osevaro.js adds it to the
   head), drag-to-dismiss on the head, a close animation, and the primary button
   in a foot that sticks to the bottom while the body scrolls. */
.sheet__grab { display: none; }
@media (max-width: 899.98px) {
  .sheet__head { padding-top: 22px; }
  .sheet__grab { display: block; position: absolute; top: 8px; left: 50%; width: 36px; height: 5px; margin-left: -18px; border-radius: 3px; background: var(--line-strong); }
  .sheet__head { touch-action: none; cursor: grab; }
}
.sheet__foot--sticky { position: sticky; bottom: 0; z-index: 1; background: var(--card); border-top: 1px solid var(--line); }
/* .is-settled: the opening animation has finished (or was skipped), so a drag or
   a class change never replays it */
html.motion-ok .sheet[open].is-settled { animation: none; }
.sheet.is-dragging { transition: none !important; }
.sheet.is-snapping { transition: transform 200ms var(--ease); }
html.motion-ok .sheet[open].is-closing { animation: ov-sheet-out 200ms cubic-bezier(.4, 0, 1, 1) forwards; }
html.motion-ok .sheet[open].is-closing::backdrop { animation: ov-fade-out 200ms linear forwards; }
@keyframes ov-sheet-out { to { transform: translateY(var(--sheet-out, 32px)); opacity: 0; } }
@keyframes ov-fade-out { to { opacity: 0; } }

/* Small "haptic-like" feedback (all under motion-ok): heart pop, badge bump,
   stepper digit slide. ds/app.js adds more for the app shell. */
html.motion-ok .btn-heart.is-pop { animation: ov-heart-pop 220ms var(--ease); }
@keyframes ov-heart-pop { 50% { transform: scale(1.18); } }
html.motion-ok .count.is-bump { animation: ov-bump 220ms var(--ease); }
@keyframes ov-bump { 50% { transform: scale(1.25); } }
html.motion-ok .qty output.is-up { animation: ov-step-up 120ms var(--ease); }
html.motion-ok .qty output.is-down { animation: ov-step-down 120ms var(--ease); }
@keyframes ov-step-up { from { transform: translateY(6px); opacity: .4; } }
@keyframes ov-step-down { from { transform: translateY(-6px); opacity: .4; } }

/* --------------------------------------------------------------------------
   13. Product card
   -------------------------------------------------------------------------- */
.pcard {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 10px 10px 14px;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .pcard:hover { box-shadow: var(--shadow-lift); border-color: var(--line-strong); } }
@media (hover: hover) and (pointer: fine) { html.motion-ok .pcard:hover { transform: translateY(-2px); } }
.pcard__visual { position: relative; }
.pcard__media {
  position: relative; display: block;
  aspect-ratio: 1; overflow: hidden;
  border-radius: 18px; background: var(--well);
}
.pcard__media img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; transition: transform .5s var(--ease); }
@media (hover: hover) and (pointer: fine) { html.motion-ok .pcard:hover .pcard__media img { transform: scale(1.025); } }
.pcard__media--contain img { object-fit: contain; padding: 6%; }
/* The tag sits top-left only where the card is wide enough to keep clear of
   the heart (1180px+); below that it moves to the image's bottom-left. */
.pcard__tag { position: absolute; top: 12px; left: 12px; max-width: calc(100% - 24px - 44px - 8px); }
.pcard__heart { position: absolute; top: 10px; right: 10px; border-color: transparent; box-shadow: 0 1px 3px rgba(23, 58, 58, .14); }
@media (max-width: 1179.98px) {
  .pcard__tag { top: auto; bottom: 10px; left: 10px; max-width: calc(100% - 20px); }
}
.pcard__body { display: flex; flex-direction: column; gap: 6px; flex: 1; padding: 14px 6px 0; }
.pcard { container-type: inline-size; }
.pcard__eyebrow { display: block; color: var(--accent-text); font-size: 13px; font-weight: 700; letter-spacing: .06em; line-height: 1.35; text-transform: uppercase; text-wrap: balance; }
.pcard__eyebrow .eyebrow__dot { display: inline-block; width: 12px; height: 12px; margin: 0 6px 0 0; vertical-align: -1px; }
.pcard__for { white-space: nowrap; }   /* " · For dogs": dropped on narrow cards, where the title and photo say it */
@container (max-width: 259.98px) { .pcard__for { display: none; } }
/* One size fact on the card, so sizes show before the click */
.pcard__fit { display: flex; align-items: flex-start; gap: 6px; font-size: 14px; line-height: 1.4; color: var(--ink-soft); }
.pcard__fit .ic { --ic-size: 18px; color: var(--accent-text); margin-top: 1px; }
.pcard__title { font-size: 17px; font-weight: 650; line-height: 1.35; }
.pcard__title a { color: inherit; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .pcard__title a:hover { text-decoration: underline; } }
.pcard__row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pcard__price { font-family: var(--font-display); font-weight: 600; font-variation-settings: 'SOFT' 50; font-size: 22px; line-height: 1.1; font-variant-numeric: lining-nums tabular-nums; }
.pcard__meta { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-soft); }
.pcard__dots { display: inline-flex; }
.pcard__dots i { width: 14px; height: 14px; border-radius: 50%; border: 1.5px solid var(--card); box-shadow: 0 0 0 1px var(--line-strong); }
.pcard__dots i + i { margin-left: -4px; }
.pcard__actions { margin-top: auto; padding-top: 12px; }
@media (max-width: 599.98px) {
  .pcard { padding: 8px 8px 12px; border-radius: 20px; }
  .pcard__media { border-radius: 14px; }
  .pcard__body { padding: 12px 4px 0; gap: 4px; }
  .pcard__title { font-size: 16px; }
  .pcard__price { font-size: 20px; }
  .pcard__tag { top: auto; bottom: 8px; left: 8px; max-width: calc(100% - 16px); padding-inline: 10px; }
  .pcard__tag .ic { display: none; }   /* the words fit without the 16px icon */
  .pcard__heart { top: 6px; right: 6px; }
  .pcard__eyebrow { font-size: 13px; letter-spacing: .04em; }
  .pcard__fit { font-size: 13px; }
}
@media (max-width: 399.98px) {
  .pcard__tag { padding-inline: 8px; letter-spacing: .01em; }
}
@media (max-width: 359.98px) {
  .pcard__tag { padding-inline: 6px; letter-spacing: 0; }   /* plus short tag copy on phones: "Washable", "Two doors" */
}

/* Doorway tile ("See all beds") */
.door {
  display: flex; flex-direction: column; justify-content: space-between; gap: 16px;
  padding: 22px; min-height: 100%;
  border: 1.5px solid var(--ink); border-radius: var(--r-card);
  color: var(--ink); text-decoration: none; background: var(--card);
}
@media (hover: hover) and (pointer: fine) { .door:hover { background: var(--linen); } }
.door__arrow { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--btn-primary-bg); color: var(--btn-primary-fg); }
.door__title { display: block; margin-top: 10px; }
.door__text { display: block; margin-top: 8px; max-width: 26ch; }
/* Optional illustration bottom-right, filling the empty space on 4-column rows */
.door { position: relative; }
.door__pet { position: absolute; z-index: 0; right: 18px; bottom: 26px; width: min(58%, 190px); pointer-events: none; }
.door__pet::after {   /* contact shadow under the resting pet (section 12) */
  content: ""; position: absolute; z-index: -1; left: 10%; right: 4%; bottom: 1px; height: 10px; border-radius: 50%;
  background: radial-gradient(closest-side, var(--pet-shadow), transparent); filter: blur(2px);
}
.door__pet img { width: 100%; height: auto; }
.door__pet .pet__light { display: var(--light-only); }
.door__pet .pet__dark { display: var(--dark-only); }
@media (max-width: 1179.98px) { .door__pet { display: none; } }
/* Doorway tile with painted art (.door.door--art > .ctile__art.door__art + .door__body).
   Wrap the grid cell in a container (container-type: inline-size): art beside
   the text when the cell is wide, stacked when it is narrow. */
.door--art { padding: 10px; gap: 0; justify-content: flex-start; }
.door__art { aspect-ratio: 4 / 3; width: 100%; }
.door__body { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; padding: 16px 10px 10px; flex: 1; }
.door__words { display: flex; flex-direction: column; gap: 6px; }
.door__name { font-family: var(--font-display); font-weight: 600; font-variation-settings: 'SOFT' 50; font-size: clamp(22px, 1vw + 15px, 30px); line-height: 1.15; }
@container (min-width: 520px) {
  .door--art { flex-direction: row; align-items: stretch; }
  .door--art .door__art { width: 52%; aspect-ratio: auto; min-height: 100%; }
  .door--art .door__body { flex-direction: column; align-items: flex-start; justify-content: space-between; padding: 18px 14px 12px 26px; }
}
@container (max-width: 380px) {
  .door--art { flex-direction: row; align-items: center; }
  .door--art .door__art { width: 42%; flex: none; }
  .door--art .door__body { flex-direction: column; align-items: flex-start; padding: 6px 4px 6px 16px; }
}

/* --------------------------------------------------------------------------
   14. Category tile (painted)
   -------------------------------------------------------------------------- */
.ctile {
  display: flex; flex-direction: column;
  padding: 10px; border-radius: var(--r-tile);
  background: var(--card); border: 1px solid var(--line);
  color: var(--ink); text-decoration: none;
  transition: box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .ctile:hover { box-shadow: var(--shadow-lift); border-color: var(--line-strong); } }
@media (hover: hover) and (pointer: fine) { html.motion-ok .ctile:hover { transform: translateY(-2px); } }
/* The art panel, done the logo's way: a paper ground, one contained wash
   (the kit's blob, about two thirds of the panel) with its ink outline offset
   on top, and the pet sitting on it. The <img class="ctile__wash"> keeps
   naming the colour with any tile-<colour>-<n>.webp; CSS draws the matching
   blob instead of a full-bleed tile. The pet's paper-backed sticker file sits
   under the light drawing, so the wash never tints its white fur.
   Dark mode: the blob sits on its paper plate (ds/plates), like the icon circles. */
.ctile__art {
  --blob-w: min(68cqw, 84cqh * 4 / 3);
  position: relative; display: grid; place-items: end center;
  aspect-ratio: 4 / 3; overflow: hidden; border-radius: 14px;
  background: var(--art-ground);
  container-type: size;
}
.ctile__wash, .ctile__art::before, .ctile__art::after {
  position: absolute; left: 0; right: 0; bottom: 5%; margin-inline: auto;
  width: var(--blob-w); height: auto; aspect-ratio: 4 / 3; max-width: none;
}
.ctile__wash { content: var(--blob-paint); mix-blend-mode: multiply; }
.ctile__art::before {   /* paper plate, dark mode only */
  content: ""; display: var(--dark-only); background: var(--plate);
  -webkit-mask: var(--blob-plate) center / 100% 100% no-repeat; mask: var(--blob-plate) center / 100% 100% no-repeat;
}
.ctile__art::after {    /* the ink outline, drawn from the kit's outline file */
  content: ""; background: #173a3a;
  -webkit-mask: var(--blob-line) center / 100% 100% no-repeat; mask: var(--blob-line) center / 100% 100% no-repeat;
}
.ctile__art:has(.ctile__wash[src*="-sage-"]) { --blob-paint: url("../assets/wash/blob-sage-1.webp"); --blob-line: url("../assets/wash/outline/blob-sage-1.svg"); --blob-plate: url("plates/blob-sage-1.svg"); }
.ctile__art:has(.ctile__wash[src*="-coral-"]) { --blob-paint: url("../assets/wash/blob-coral-2.webp"); --blob-line: url("../assets/wash/outline/blob-coral-2.svg"); --blob-plate: url("plates/blob-coral-2.svg"); }
.ctile__art:has(.ctile__wash[src*="-sky-"]) { --blob-paint: url("../assets/wash/blob-sky-2.webp"); --blob-line: url("../assets/wash/outline/blob-sky-2.svg"); --blob-plate: url("plates/blob-sky-2.svg"); }
.ctile__art:has(.ctile__wash[src*="-honey-"]) { --blob-paint: url("../assets/wash/blob-honey-2.webp"); --blob-line: url("../assets/wash/outline/blob-honey-2.svg"); --blob-plate: url("plates/blob-honey-2.svg"); }
.ctile__art:has(.ctile__wash[src*="-lavender-"]) { --blob-paint: url("../assets/wash/blob-lavender-1.webp"); --blob-line: url("../assets/wash/outline/blob-lavender-1.svg"); --blob-plate: url("plates/blob-lavender-1.svg"); }
.ctile__art:has(.ctile__wash[src*="-blush-"]) { --blob-paint: url("../assets/wash/blob-blush-2.webp"); --blob-line: url("../assets/wash/outline/blob-blush-2.svg"); --blob-plate: url("plates/blob-blush-2.svg"); }
.ctile__pet { position: absolute; z-index: 1; left: 0; right: 0; bottom: var(--pet-b, 9%); margin-inline: auto; height: var(--pet-h, 74%); width: auto; max-width: 84%; object-fit: contain; }
.ctile__pet.pet__light { display: var(--light-only); z-index: 2; }
.ctile__pet.pet__dark { display: block; }   /* paper underlay in light mode, the sticker itself in dark */
html.motion-ok .ctile__pet { transition: transform var(--t-pet) var(--ease); transform-origin: 50% 100%; }
@media (hover: hover) and (pointer: fine) { html.motion-ok .ctile:hover .ctile__pet { transform: translateY(-4px) rotate(-1.5deg); } }
.ctile__body { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 6px 4px; }
.ctile__name { font-family: var(--font-display); font-weight: 600; font-variation-settings: 'SOFT' 50; font-size: 21px; line-height: 1.2; }
.ctile__sub { font-size: 15px; color: var(--ink-soft); line-height: 1.35; }
.ctile__arrow {
  display: grid; place-items: center; flex: none;
  width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line-strong); color: var(--ink);
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .ctile:hover .ctile__arrow { background: var(--btn-primary-bg); color: var(--btn-primary-fg); border-color: var(--btn-primary-bg); } }
@media (max-width: 599.98px) {
  .ctile { padding: 8px; }
  .ctile__name { font-size: 18px; }
  .ctile__sub { font-size: 14px; }
  .ctile__arrow { display: none; }
  .ctile__body { padding: 10px 4px 2px; }
}

/* --------------------------------------------------------------------------
   15. Feature tile (wash icon circle + short text)
   -------------------------------------------------------------------------- */
.feature { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.feature__text { font-size: var(--fs-body); color: var(--ink-soft); max-width: 36ch; }
@media (max-width: 599.98px) {
  .feature { flex-direction: row; gap: 16px; }
  .feature .wash-icon { --wash-size: 64px; }
}

/* Reassurance list (delivery / returns / help). Lines without confirmed data use .tbc */
.assure { display: grid; gap: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--card); }
.assure__row { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; font-size: 15px; line-height: 1.45; }
.assure__row + .assure__row { border-top: 1px solid var(--line); }
.assure__row > .ic { --ic-size: 22px; margin-top: 1px; color: var(--accent-text); }
.assure__row strong { display: block; font-weight: 650; color: var(--ink); }

/* Trust strip: a 4-up reassurance row (2-up under 1100px, 1-up under 600px).
   Only confirmed promises; unconfirmed ones use neutral copy + .tbc__mark. */
.trust-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); }
.trust__item { display: flex; gap: 14px; align-items: flex-start; padding: clamp(18px, 1.8vw, 26px) clamp(16px, 1.8vw, 26px); }
.trust__item + .trust__item { border-left: 1px solid var(--line); }
.trust__title { font-size: 16px; font-weight: 700; line-height: 1.35; }
.trust__text { margin-top: 3px; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
@media (max-width: 1099.98px) {
  .trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust__item:nth-child(3) { border-left: 0; }
  .trust__item:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 599.98px) {
  .trust-strip { grid-template-columns: minmax(0, 1fr); }
  .trust__item + .trust__item { border-left: 0; border-top: 1px solid var(--line); }
  .trust__item { padding: 14px 16px; align-items: center; }
  .trust__item .wash-icon--sm { --wash-size: 48px; }
}

/* Featured-product chip: a small linked card beside a hero slide or a banner */
.pick {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 64px; padding: 6px 18px 6px 6px;
  border: 1px solid var(--line); border-radius: 18px;
  background: var(--card); color: var(--ink); text-decoration: none; box-shadow: var(--shadow);
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .pick:hover { border-color: var(--line-strong); box-shadow: var(--shadow-lift); } }
.pick__img { position: relative; display: block; width: 52px; height: 52px; flex: none; overflow: hidden; border-radius: 12px; background: var(--well); }
.pick__img img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.pick__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pick__name { font-size: 15px; font-weight: 650; line-height: 1.3; }
.pick__price { font-family: var(--font-display); font-weight: 600; font-variation-settings: 'SOFT' 50; font-size: 19px; line-height: 1.15; font-variant-numeric: lining-nums tabular-nums; }
.pick__meta { margin-left: 6px; font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--ink-soft); }

/* Journal / article card: photo well with one solid tag, eyebrow, Fraunces
   title as a stretched link, a short excerpt and a "Read the guide" line.
   Image-left row under 900px; the excerpt hides under 600px. */
.jcard {
  position: relative; display: flex; flex-direction: column; height: 100%;
  padding: 10px 10px 18px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
  transition: box-shadow var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .jcard:hover { box-shadow: var(--shadow-lift); border-color: var(--line-strong); } }
@media (hover: hover) and (pointer: fine) { html.motion-ok .jcard:hover { transform: translateY(-2px); } }
.jcard__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 18px; background: var(--linen); }
.jcard__media img { width: 100%; height: 100%; object-fit: cover; }
.jcard__tag { position: absolute; top: 12px; left: 12px; }
.jcard__body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 16px 8px 0; }
.jcard__title { font-family: var(--font-display); font-weight: 600; font-variation-settings: 'SOFT' 50; font-size: clamp(19px, .4vw + 15px, 22px); line-height: 1.25; letter-spacing: -.005em; text-wrap: balance; }
.jcard__title a { color: inherit; text-decoration: none; }
.jcard__title a::after { content: ""; position: absolute; inset: 0; border-radius: var(--r-card); }
@media (hover: hover) and (pointer: fine) { .jcard__title a:hover { text-decoration: underline; } }
.jcard__title a:focus-visible { outline: none; }
.jcard:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.jcard__text { font-size: 15px; line-height: 1.55; color: var(--ink-soft); max-width: 46ch; }
.jcard__more { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px; font-size: 15px; font-weight: 650; }
@media (max-width: 899.98px) {
  .jcard { flex-direction: row; gap: 4px; padding: 8px; align-items: stretch; }
  .jcard__media { width: clamp(112px, 30vw, 220px); aspect-ratio: auto; min-height: 112px; flex: none; border-radius: 14px; }
  .jcard__tag { top: 8px; left: 8px; height: 26px; padding: 0 10px; }
  .jcard__body { padding: 6px 8px 6px 12px; gap: 6px; }
}
@media (max-width: 599.98px) {
  .jcard__text { display: none; }
  .jcard__title { font-size: 18px; }
  .jcard__more { font-size: 14px; }
}

/* --------------------------------------------------------------------------
   16. Accordion (native <details>)
   -------------------------------------------------------------------------- */
.acc { border-top: 1px solid var(--line); }
.acc__item { border-bottom: 1px solid var(--line); }
.acc__item > summary {
  display: flex; align-items: center; gap: 16px;
  min-height: 64px; padding: 12px 4px;
  list-style: none; cursor: pointer;
  font-size: 18px; font-weight: 650; line-height: 1.3;
  border-radius: 8px;
}
.acc__item > summary::-webkit-details-marker { display: none; }
@media (hover: hover) and (pointer: fine) { .acc__item > summary:hover .acc__icon { background: var(--linen); border-color: var(--ink); } }
.acc__title { flex: 1; min-width: 0; }
.acc__meta { font-size: 15px; font-weight: 500; color: var(--ink-soft); }
.acc__icon {
  position: relative; display: grid; place-items: center; flex: none;
  width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--line-strong);
  transition: background-color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.acc__icon .ic { --ic-size: 18px; transition: transform var(--t) var(--ease), opacity var(--t) var(--ease); }
.acc__icon .ic--minus { position: absolute; opacity: 0; }
.acc__item[open] .acc__icon .ic--plus { opacity: 0; transform: rotate(90deg); }
.acc__item[open] .acc__icon .ic--minus { opacity: 1; }
/* the row and its tables stay wide; only running text narrows to the measure */
.acc__panel { padding: 0 4px 24px; }
.acc__panel :is(p, li, dd, blockquote) { max-width: var(--measure); }
@media (max-width: 599.98px) {
  .acc__item > summary { flex-wrap: wrap; row-gap: 0; }
  .acc__meta { order: 3; flex-basis: 100%; }
}
.acc__panel > * + * { margin-top: .85em; }
.acc__panel ul:not([class]) { padding-left: 1.2em; list-style: disc; }
@supports (interpolate-size: allow-keywords) {
  html.motion-ok { interpolate-size: allow-keywords; }
  html.motion-ok .acc__item::details-content { block-size: 0; overflow: clip; transition: block-size var(--t) var(--ease), content-visibility var(--t) allow-discrete; }
  html.motion-ok .acc__item[open]::details-content { block-size: auto; }
}

/* Size table */
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th, .table td { padding: 12px 10px; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-weight: 650; }
.table thead th { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft); }
.table .in { color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   17. Swatches (native radio group: arrow keys work, names always visible)
   -------------------------------------------------------------------------- */
.swatches { border: 0; margin: 0; padding: 0; min-width: 0; }
.swatches__legend { padding: 0; margin-bottom: 10px; font-size: 15px; font-weight: 600; }
.swatches__legend b { font-weight: 700; }
.swatches__list { display: flex; flex-wrap: wrap; gap: 10px; }
.swatch { position: relative; display: inline-flex; }
.swatch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.swatch__face {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 5px 16px 5px 5px;
  border: 1.5px solid var(--field-border); border-radius: var(--r-pill);
  background: var(--card); cursor: pointer; font-weight: 600; font-size: 15px;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.swatch__chip { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: var(--well); flex: none; position: relative; }
/* zoom into the fabric: origin = (focus - 1/(2*zoom)) / (1 - 1/zoom) */
.swatch__chip img { width: 100%; height: 100%; object-fit: cover; transform: scale(var(--chip-zoom, 4)); transform-origin: var(--chip-focus, 10% 66%); }
.swatch__tick { display: none; width: 22px; height: 22px; border-radius: 50%; background: var(--btn-primary-bg); color: var(--btn-primary-fg); place-items: center; margin-left: 2px; }
.swatch__tick .ic { --ic-size: 14px; }
@media (hover: hover) and (pointer: fine) { .swatch:hover .swatch__face { border-color: var(--ink); } }
.swatch input:checked + .swatch__face { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.swatch input:checked + .swatch__face .swatch__tick { display: inline-grid; }
.swatch input:focus-visible + .swatch__face { outline: 3px solid var(--focus); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   18. Toast (aria-live, never steals focus, 6s or until closed)
   -------------------------------------------------------------------------- */
.toast-region {
  position: fixed; z-index: 90; left: 0; right: 0;
  bottom: calc(20px + var(--safe-b));
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 0 var(--gutter); pointer-events: none;
}
@media (max-width: 899.98px) { .toast-region { bottom: calc(var(--tabbar-h) + 22px + var(--safe-b)); } }
.toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: 12px;
  width: min(460px, 100%); padding: 10px 8px 10px 12px;
  background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow-lift);
  font-size: 15px; line-height: 1.45;
}
.toast__art { position: relative; width: 52px; height: 52px; flex: none; }
.toast__art .wash { position: absolute; inset: 0; width: 100%; height: 100%; }
.toast__art .ic { position: absolute; inset: 0; margin: auto; --ic-size: 22px; color: #173a3a; }
.toast__text { flex: 1; min-width: 0; }
.toast__text strong { display: block; font-weight: 700; }
.toast__action { font-weight: 650; white-space: nowrap; }
html.motion-ok .toast { animation: ov-toast-in var(--t) var(--ease) both; }
html.motion-ok .toast.is-leaving { animation: ov-toast-out var(--t-fast) var(--ease) both; }
@keyframes ov-toast-in { from { opacity: 0; transform: translateY(10px) scale(.98); } }
@keyframes ov-toast-out { to { opacity: 0; transform: translateY(6px); } }

/* --------------------------------------------------------------------------
   19. Slider (scroll-snap, never auto-advances)
   -------------------------------------------------------------------------- */
.slider { position: relative; }
.slider__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: 100%;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  border-radius: var(--r-card);
}
.slider__track::-webkit-scrollbar { display: none; }
html.motion-ok .slider__track { scroll-behavior: smooth; }
.slide { scroll-snap-align: start; min-width: 0; }
.slider__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; }
.slider__dots { display: flex; gap: 0; margin-left: -10px; }
/* 44px hit area; the visible dot is a 10px ink-soft ring (6:1), the current one a solid ink pill */
.slider__dot {
  position: relative; width: 44px; height: 44px; padding: 0; border: 0; background: none; border-radius: 50%;
}
.slider__dot::before {
  content: ""; position: absolute; inset: 0; margin: auto; width: 10px; height: 10px; border-radius: 50%;
  background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink-soft);
  transition: width var(--t) var(--ease), background-color var(--t) var(--ease);
}
@media (hover: hover) and (pointer: fine) { .slider__dot:hover::before { background: var(--ink-soft); } }
.slider__dot[aria-current="true"]::before { width: 26px; border-radius: 6px; background: var(--ink); box-shadow: none; }
.slider__nav { display: flex; gap: 8px; align-items: center; }
.slider__count {
  display: inline-flex; align-items: center; height: 28px; padding: 0 12px; border-radius: var(--r-pill);
  background: #fbf8f2; color: var(--ink-fixed); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
  border: 1px solid var(--line);
}

/* Gallery (product photos): scroll-snap stage on the linen well with rounded
   corners (no frame around it), solid counter chip, expand button, arrows on hover/focus,
   thumbnails lined up with the photo, and a <dialog class="lightbox">.
   Behaviour lives in pages/pdp.js (initGallery) until a second page needs it;
   osevaro.js makes a track with no focusable content keyboard-scrollable. */
.gallery { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.gallery__frame { margin: 0; }
.gallery__stage { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: var(--r-tile); background: var(--well); }
.gallery__track { display: flex; height: 100%; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__track:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
html.motion-ok .gallery__track { scroll-behavior: smooth; }
.gallery__slide { position: relative; flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
.gallery__slide > img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.gallery__count { position: absolute; left: 14px; bottom: 14px; }
.gallery__expand { position: absolute; top: 12px; right: 12px; border-color: transparent; box-shadow: 0 1px 3px rgba(23, 58, 58, .14); }
.gallery__nav { position: absolute; top: 50%; margin-top: -22px; border-color: transparent; box-shadow: 0 1px 3px rgba(23, 58, 58, .14); opacity: 0; pointer-events: none; }
.gallery__nav--prev { left: 12px; }
.gallery__nav--next { right: 12px; }
.gallery__nav:disabled { display: none; }
.gallery__stage:focus-within .gallery__nav { opacity: 1; pointer-events: auto; }
@media (hover: hover) and (pointer: fine) { .gallery__stage:hover .gallery__nav { opacity: 1; pointer-events: auto; } }
html.motion-ok .gallery__nav { transition: opacity var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease); }
@media (hover: none) { .gallery__nav { display: none; } }
.gallery__thumbs { display: grid; grid-template-columns: repeat(var(--n, 6), minmax(0, 1fr)); gap: 10px; padding-inline: var(--mat); }
.gallery__thumb { position: relative; aspect-ratio: 1; padding: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--well); }
.gallery__thumb img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; }
.gallery__thumb::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 2px transparent; }
html.motion-ok .gallery__thumb::after { transition: box-shadow var(--t-fast) var(--ease); }
@media (hover: hover) and (pointer: fine) { .gallery__thumb:hover::after { box-shadow: inset 0 0 0 2px rgba(23, 58, 58, .35); } }
.gallery__thumb[aria-current="true"]::after { box-shadow: inset 0 0 0 2.5px #173a3a; }
@media (max-width: 767.98px) {
  .gallery__thumbs { display: none; }
  .gallery__count { left: 10px; bottom: 10px; }
  .gallery__expand { top: 8px; right: 8px; }
}
.lightbox {
  width: min(100% - 32px, 920px); max-height: 94vh; padding: 0;
  border: 1px solid var(--line); border-radius: 24px; background: var(--card); color: var(--ink);
  box-shadow: var(--shadow-lift); overflow: hidden;
}
.lightbox::backdrop { background: rgba(15, 34, 35, .6); }
.lightbox__stage { background: var(--well); }
.lightbox__stage img { display: block; width: 100%; height: auto; max-height: calc(94vh - 72px); object-fit: contain; mix-blend-mode: multiply; }
.lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; }
.lightbox__nav { display: flex; gap: 8px; }

/* Hero slide: rounded photo (no frame) + copy panel beside it (never on it) */
.hero-slide { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 72px); padding: 4px 4px 20px; }   /* bottom: room for the photo shadow inside the scrolling track */
.hero-slide__copy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding-block: 12px; }
.hero-slide__copy .lead { max-width: 44ch; }
.hero-slide .framed__photo { aspect-ratio: 4 / 3; }
@media (max-width: 899.98px) {
  .hero-slide { grid-template-columns: minmax(0, 1fr); gap: 20px; }
}

/* --------------------------------------------------------------------------
   20. Footer (ink card at shell width; dog lying + cat sitting on its top edge, facing left)
   -------------------------------------------------------------------------- */
.site-footer {
  --footer-pet-h: clamp(88px, 6vw + 14px, 112px);
  margin-top: calc(var(--footer-pet-h) + 24px);   /* just the perched pets plus 24px: keeps the 96px rhythm */
  padding-bottom: clamp(16px, 2vw, 28px);
}
main > .section:last-child { padding-bottom: 0; }
.footer {
  --focus: #fbf8f2;
  --link: #fbf8f2;
  position: relative;
  padding: clamp(28px, 3.6vw, 56px) clamp(20px, 3.6vw, 56px) 24px;
  background: var(--footer-bg); color: var(--footer-fg);
  border-radius: 28px;
}
[data-theme="dark"] .footer { border: 1px solid #2f5554; }
/* Footer pets (round 2): both face LEFT, towards the page. The sage dog lies on
   the footer's top edge and the coral cat sits just behind it (its curled tail
   tucked behind the dog's back). Paws rest 4px onto the edge with a contact
   shadow under each; light mode uses the opaque front files (ds/pets), dark
   mode the sticker files. --pet-sink = the empty strip under the drawn paws. */
.footer__pets { position: absolute; bottom: calc(100% - 4px); right: clamp(28px, 6vw, 96px); display: flex; align-items: flex-end; gap: 0; pointer-events: none; }
.footer__pet { position: relative; height: var(--footer-pet-h); width: auto; transform: translateY(var(--pet-sink, 2.3%)); }
.footer__pet img { height: 100%; width: auto; max-width: none; }
.footer__pet .pet__shadow { z-index: -1; bottom: calc(var(--pet-sink, 2.3%) - 6px); height: 12px; left: 6%; right: 6%; }
.footer__pet--dog { --pet-sink: 5.1%; height: calc(var(--footer-pet-h) * .64); z-index: 2; }
.footer__pet--cat { --pet-sink: 2.3%; z-index: 1; margin-left: calc(var(--footer-pet-h) * -.14); }
.footer__top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px 56px; padding-bottom: 32px; border-bottom: 1px solid var(--footer-line); }
.footer__about { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.footer__about p { color: var(--footer-soft); max-width: 44ch; }
.footer__notify .field__label, .footer__notify .h3 { color: var(--footer-fg); }
.footer__notify p { color: var(--footer-soft); }
.footer__notify .input { background: #fbf8f2; color: #173a3a; border-color: transparent; }
.footer__notify .input::placeholder { color: #4a6463; }
.footer__notify .check input { border-color: #c9d6d3; background: transparent; }
.footer__notify .check input:checked { background: #fbf8f2; border-color: #fbf8f2; }
.footer__notify .check input::after { background: #173a3a; }
.footer__notify .check, .footer__notify .notify__privacy { color: var(--footer-soft); }
.footer__notify .field__error { color: #f19a7e; }
/* One capture per page: the footer form steps aside when the page body has
   its own [data-notify] (product page, launch card, shop tile) and once
   ordering opens; .footer__help (help + contact) takes its slot. */
.footer__help { display: none; flex-direction: column; align-items: flex-start; gap: 10px; }
.footer__help .h3 { color: var(--footer-fg); }
.footer__help p:not(.h3) { color: var(--footer-soft); max-width: 40ch; }
.footer__help .btn { margin-top: 4px; }
body:has(main [data-notify]) .footer__notify:not([data-keep]), html[data-order="open"] .footer__notify { display: none; }
html:not([data-order="open"]) body:has(.footer__notify[data-keep]) .footer__help { display: none; }
body:has(main [data-notify]) .footer__help, html[data-order="open"] .footer__help { display: flex; }
.footer__groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; padding-block: 28px; }
.fgroup > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  list-style: none; font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--footer-soft); padding: 4px 0 12px; border-radius: 8px;
}
.fgroup > summary::-webkit-details-marker { display: none; }
/* Desktop: a plain heading (osevaro.js adds h2.fgroup__title from the summary
   text if the page has none); phones: the summary is the accordion button. */
.fgroup__title { display: none; margin: 0; padding: 4px 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--footer-soft); line-height: 1.3; }
.fgroup > summary .ic { display: none; }
.fgroup ul { display: grid; gap: 4px; list-style: none; padding: 0; }
.fgroup a { display: inline-flex; align-items: center; min-height: 36px; color: var(--footer-fg); text-decoration: none; font-size: 16px; }
@media (hover: hover) and (pointer: fine) { .fgroup a:hover { text-decoration: underline; } }
.fgroup .tbc { color: var(--footer-soft); font-size: 15px; }
.footer__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 20px; border-top: 1px solid var(--footer-line); color: var(--footer-soft); font-size: 14px; }
.footer__base a { color: var(--footer-soft); }
@media (min-width: 900px) {
  .fgroup > summary { display: none; }
  .fgroup__title { display: block; }
}
@media (max-width: 899.98px) {
  .footer { border-radius: 24px; padding-top: 32px; }
  .footer__top { grid-template-columns: minmax(0, 1fr); }
  .footer__groups { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: 8px; }
  .fgroup { border-bottom: 1px solid var(--footer-line); }
  .fgroup > summary { min-height: 52px; padding: 0; cursor: pointer; font-size: 14px; }
  .fgroup > summary .ic { display: inline-block; --ic-size: 18px; transition: transform var(--t) var(--ease); }
  .fgroup[open] > summary .ic { transform: rotate(180deg); }
  .fgroup ul { padding-bottom: 12px; }
  .footer__pets { right: 20px; }
  .site-footer { --footer-pet-h: 84px; }
}

/* --------------------------------------------------------------------------
   21. Misc: breadcrumb, empty state, divider
   -------------------------------------------------------------------------- */
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 14px; color: var(--ink-soft); }
.crumbs a { color: var(--ink-soft); }
.crumbs .ic { --ic-size: 14px; }
.empty {
  display: grid; justify-items: center; gap: 12px; text-align: center;
  padding: clamp(28px, 4vw, 48px); max-width: 720px; margin-inline: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card);
}
.empty__pet { width: 140px; height: auto; }
.empty__pet.pet__light { display: var(--light-only); }
.empty__pet.pet__dark { display: var(--dark-only); }
.empty p { color: var(--ink-soft); max-width: 46ch; }

/* --------------------------------------------------------------------------
   22. Mockup review controls (NOT part of the site design)
   -------------------------------------------------------------------------- */
.mock {
  position: fixed; z-index: 1000; left: 12px; bottom: 12px;
  font: 500 13px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: #1f1f1f; letter-spacing: 0;
}
@media (max-width: 899.98px) { .mock { bottom: calc(var(--tabbar-h) + 22px + var(--safe-b)); left: 8px; } }
.mock[hidden] { display: none; }
.mock__chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px;
  background: #fffef7; color: #1f1f1f; border: 1.5px dashed #555; border-radius: 8px;
  font: inherit; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, .14);
}
.mock__chip::before { content: "▸"; display: inline-block; transition: transform .15s; }
.mock__chip[aria-expanded="true"]::before { transform: rotate(90deg); }
.mock__panel {
  width: 270px; margin-bottom: 8px; padding: 12px;
  background: #fffef7; color: #1f1f1f; border: 1.5px dashed #555; border-radius: 10px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
}
.mock__panel[hidden] { display: none; }
.mock__title { margin: 0 0 4px; font-weight: 700; }
.mock__note { margin: 0 0 10px; color: #4d4d4d; }
.mock__row { margin: 0 0 10px; }
.mock__label { display: block; margin-bottom: 4px; color: #333; }
.mock__seg { display: flex; border: 1px solid #777; border-radius: 6px; overflow: hidden; }
.mock__seg button {
  flex: 1; min-height: 34px; padding: 0 6px; border: 0; border-left: 1px solid #999;
  background: #f1f1ea; color: #1f1f1f; font: inherit; cursor: pointer;
}
.mock__seg button:first-child { border-left: 0; }
.mock__seg button[aria-pressed="true"] { background: #1f1f1f; color: #fffef7; }
.mock__chip:focus-visible, .mock__seg button:focus-visible { outline: 3px solid #1f1f1f; outline-offset: 2px; }
.mock__link { color: #1f1f1f; }

/* --------------------------------------------------------------------------
   23. Reduced motion: everything instant, pets static, marquee still
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
}