/* =====================================================================
   KinPaw design system: one stylesheet for every page.
   Mobile-first: base styles are for phones; wider screens add to them
   with min-width media queries (640px tablet, 900px small laptop,
   1080px desktop; the full header menu appears from 1180px).

   Contents
    1. Design tokens          9. Cards
    2. Base & typography     10. Listings (adopt, shop, filters)
    3. Layout                11. Detail pages
    4. Buttons & badges      12. Cart, checkout, orders, bookings
    5. Forms                 13. Login & sign-up
    6. Header & navigation   14. Dashboards & admin
    7. Footer                15. Feedback: notices, empty, loading
    8. Home page             16. Dialogs & tooltips
                             17. Text pages
                             18. Motion
   ===================================================================== */

/* ===== 1. Design tokens ============================================= */
/* KinPaw's fonts, hosted with the site (assets/fonts/, SIL Open Font License; see its README). Variable fonts:
   one file per alphabet covers every weight. Only the Latin sets are kept (English, Spanish, French). */
@font-face {
    font-family: "Fraunces";
    font-style: normal;
    font-weight: 600 700;
    font-display: swap;
    src: url("assets/fonts/fraunces-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Fraunces";
    font-style: normal;
    font-weight: 600 700;
    font-display: swap;
    src: url("assets/fonts/fraunces-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("assets/fonts/inter-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("assets/fonts/inter-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Stand-in fonts sized like the real ones (CLS). Until Fraunces and Inter have loaded, text uses
   Georgia/Arial (regular or bold, per weight) scaled to the same width and line metrics, so nothing re-wraps or
   jumps when the real fonts swap in. Widths measured in the browser against the matching system face: Fraunces
   600 = 0.90-0.92 x Georgia Bold (0.917 at 32px), 700 = 0.93-0.96 x; Inter 400 = 1.068 x Arial, 500 = 1.079 x,
   600 = 1.023 x Arial Bold, 700 = 1.033 x. Ascent/descent: Fraunces 0.98/0.26 em, Inter 0.97/0.24 em, divided
   by size-adjust because the browser scales them by it. Where Georgia/Arial aren't installed (e.g. Android),
   these faces are skipped and the next font in the list is used, as before. */
@font-face {
    font-family: "Fraunces Fallback";
    font-weight: 600;
    src: local("Georgia Bold"), local("Georgia-Bold");
    size-adjust: 91.7%;
    ascent-override: 106.9%;
    descent-override: 28.4%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "Fraunces Fallback";
    font-weight: 700;
    src: local("Georgia Bold"), local("Georgia-Bold");
    size-adjust: 94.8%;
    ascent-override: 103.4%;
    descent-override: 27.4%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "Inter Fallback";
    font-weight: 400;
    src: local("Arial"), local("ArialMT");
    size-adjust: 106.8%;
    ascent-override: 90.8%;
    descent-override: 22.5%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "Inter Fallback";
    font-weight: 500;
    src: local("Arial"), local("ArialMT");
    size-adjust: 107.9%;
    ascent-override: 89.9%;
    descent-override: 22.2%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "Inter Fallback";
    font-weight: 600;
    src: local("Arial Bold"), local("Arial-BoldMT");
    size-adjust: 102.3%;
    ascent-override: 94.8%;
    descent-override: 23.5%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "Inter Fallback";
    font-weight: 700;
    src: local("Arial Bold"), local("Arial-BoldMT");
    size-adjust: 103.3%;
    ascent-override: 93.9%;
    descent-override: 23.2%;
    line-gap-override: 0%;
}

:root {
    /* Colour: the KinPaw palette
       ivory #F8F2EF (page), deep berry #542D46 (main buttons, links, dark
       bands), blush #D98FA3 (selected states, highlights, the one main buy
       button), mauve #E8D9E0 (soft surfaces), white (cards). Body text is a
       darker berry. Forest green #183F35 is a quiet supporting accent only,
       and green still means "good" in status badges (paid, in stock).
       accent-dark is the blush shade dark enough for small text on light
       backgrounds; accent-light is for small text on berry (AA contrast). */
    --color-primary: #542d46;
    --color-primary-dark: #3e2034;
    --color-primary-soft: #e8d9e0;
    --color-accent: #d98fa3;
    --color-accent-dark: #9c4a64;
    --color-accent-light: #edbfcb;
    --color-forest: #183f35;
    --color-text: #3b2233;
    --color-muted: #6f5866;
    --color-subtle: #7c6673;
    --color-bg: #f8f2ef;
    --color-bg-alt: #f1e6ea;
    --color-surface: #ffffff;
    --color-border: #e6d8dd;
    --color-border-strong: #d2bec6;
    --color-dark: #3a1f31;
    --color-error: #b3261e;
    --color-error-soft: #fdecea;
    --color-warning-soft: #fbefe6;
    --color-success: #2b6e48;
    --color-success-soft: #e3efe6;

    /* Type */
    --font-body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --font-heading: "Fraunces", "Fraunces Fallback", Georgia, "Times New Roman", serif;
    /* A compact scale (owner's request, 2026-10-26: text was too big) */
    --text-xs: 0.8125rem;   /* 13px: badges, fine print (the smallest readable size; the layout audit checks it) */
    --text-sm: 0.84375rem;  /* 13.5px: hints, meta */
    --text-base: 0.9375rem; /* 15px: body, buttons */
    --text-input: 1rem;     /* 16px: form fields (smaller makes iPhones zoom in when one is tapped) */
    --text-lg: 1.0625rem;   /* 17px: lead text */
    --text-h3: 1.125rem;    /* 18px */
    --text-h2: clamp(1.375rem, 1.1rem + 1.1vw, 1.875rem);   /* 22-30px */
    --text-h1: clamp(1.625rem, 1.2rem + 1.8vw, 2.5rem);     /* 26-40px */
    --text-display: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);   /* 32-52px */

    /* Space (4px steps) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --section-y: clamp(3rem, 2rem + 4vw, 5.5rem);
    --gutter: clamp(1rem, 0.6rem + 2vw, 2rem);

    /* Shape & depth */
    --radius-sm: 8px;       /* inputs, small boxes */
    --radius: 12px;         /* cards, panels */
    --radius-lg: 18px;      /* large media */
    --radius-pill: 999px;   /* buttons, chips */
    --shadow-sm: 0 1px 2px rgba(59, 34, 51, 0.06);
    --shadow: 0 1px 2px rgba(59, 34, 51, 0.04), 0 10px 28px rgba(59, 34, 51, 0.08);
    --shadow-lg: 0 2px 6px rgba(59, 34, 51, 0.06), 0 22px 48px rgba(59, 34, 51, 0.14);
    --focus-ring: 0 0 0 3px rgba(84, 45, 70, 0.28);

    --max-width: 1200px;
    --header-h: 64px;
    --tap: 44px;
}

/* ===== 2. Base & typography ========================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.6;
    color: var(--color-text);
    background: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    margin: 0 0 0.5em;
    font-family: var(--font-heading);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--color-text);
    overflow-wrap: break-word;
    text-wrap: balance;
}

h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); line-height: 1.3; }

p {
    margin: 0 0 1em;
    overflow-wrap: break-word;
}

img,
svg,
video {
    max-width: 100%;
    display: block;
}

a {
    color: var(--color-primary);
    text-underline-offset: 0.18em;
}

a:hover {
    color: var(--color-primary-dark);
}

strong {
    font-weight: 600;
}

code {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.9em;
    overflow-wrap: anywhere;
}

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

.skip-link {
    position: absolute;
    left: -9999px;
    top: 8px;
    z-index: 100;
    padding: 0.75em 1em;
    background: #fff;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
}

.skip-link:focus {
    left: 8px;
}

.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

[hidden] {
    display: none !important;
}

.eyebrow {
    margin: 0 0 var(--space-2);
    color: var(--color-accent-dark);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hint {
    margin: var(--space-1) 0 0;
    color: var(--color-muted);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.optional {
    color: var(--color-muted);
    font-weight: 400;
}

.detail-label {
    margin: 0 0 var(--space-2);
    color: var(--color-muted);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ticket-number {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    letter-spacing: 0.02em;
}

.pet-description {
    white-space: pre-line;
}

/* ===== 3. Layout ===================================================== */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

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

.section-alt {
    background: var(--color-bg-alt);
}

.section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: var(--space-4) var(--space-5);
    margin-bottom: var(--space-6);
}

.section-head > div {
    max-width: 42rem;
}

.section-title {
    font-size: var(--text-h2);
}

/* A narrower column for reading-focused sections */
.container.narrow {
    max-width: 52rem;
}

.section-tight {
    padding-block: var(--space-6);
}

/* Three linked cards, e.g. "What we do" on the About page */
.feature-grid {
    display: grid;
    gap: var(--space-4);
}

@media (min-width: 768px) {
    .feature-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-5);
    }
}

.feature-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    color: inherit;
    text-decoration: none;
    transition: box-shadow 0.25s, transform 0.25s;
}

.feature-card h3 {
    margin: var(--space-2) 0 0;
    font-size: 1.15rem;
}

.feature-card p {
    margin: 0;
    color: var(--color-muted);
}

.feature-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: var(--radius);
    background: var(--color-primary-soft);
    font-size: 1.5rem;
}

@media (hover: hover) {
    .feature-card:hover {
        color: inherit;
        box-shadow: var(--shadow-lg);
        transform: translateY(-3px);
    }
}

.promise-list li + li {
    margin-top: var(--space-3);
}

.credits-heading {
    font-size: 1.125rem;
}

.section-intro {
    margin: 0;
    max-width: 42rem;
    color: var(--color-muted);
    font-size: var(--text-lg);
    line-height: 1.55;
}

.section-intro + .section-intro {
    margin-top: var(--space-4);
}

.page-hero {
    padding-block: clamp(2rem, 1.4rem + 3vw, 3.5rem);
    background: var(--color-bg-alt);
    border-bottom: 1px solid var(--color-border);
}

.page-hero h1 {
    margin-bottom: var(--space-3);
}

.page-hero p {
    margin: 0;
    max-width: 44rem;
    color: var(--color-muted);
    font-size: var(--text-lg);
}

/* Terms / Privacy: "only the English version is binding", shown to Spanish and French visitors only
   (the language is set in <head>, so this never appears late) */
.page-hero .legal-lang-note {
    display: none;
    margin-top: var(--space-3);
    font-size: var(--text-sm);
}

html:not([lang="en"]) .page-hero .legal-lang-note {
    display: block;
}

.breadcrumbs {
    margin-bottom: var(--space-4);
    color: var(--color-muted);
    font-size: var(--text-sm);
}

.breadcrumbs a {
    color: var(--color-muted);
}

.form-page {
    max-width: 780px;
}

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
    gap: var(--space-5);
}

.form-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 var(--space-5);
}

.form-grid .full {
    grid-column: 1 / -1;
}

@media (min-width: 640px) {
    .form-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* ===== 4. Buttons & badges =========================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    min-height: 48px;
    padding: 0.7em 1.4em;
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    color: #fff;
    font: inherit;
    font-size: var(--text-base);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s, box-shadow 0.2s;
}

.btn:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: #fff;
}

.btn:active {
    transform: translateY(1px) scale(0.99);
}

.btn-outline {
    background: transparent;
    color: var(--color-primary);
}

.btn-outline:hover {
    background: var(--color-primary);
    color: #fff;
}

/* Two short number boxes side by side ("3 – 5") */
.input-pair {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.input-pair input {
    max-width: 7rem;
}

/* Order page: return requests (migration 036) */
.return-list {
    display: grid;
    gap: var(--space-3);
    margin: 0 0 var(--space-4);
    padding: 0;
    list-style: none;
}

.return-details summary {
    cursor: pointer;
    font-weight: 600;
}

/* Actions that can't easily be undone (e.g. "Delete my account") */
.btn-danger {
    border-color: var(--color-error);
    background: transparent;
    color: var(--color-error);
}

.btn-danger:hover {
    background: var(--color-error);
    color: #fff;
}

.btn-light {
    background: #fff;
    border-color: #fff;
    color: var(--color-text);
}

.btn-light:hover {
    background: var(--color-bg-alt);
    border-color: var(--color-bg-alt);
    color: var(--color-text);
}

.btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--color-text);
}

.btn-ghost:hover {
    background: var(--color-bg-alt);
    border-color: var(--color-bg-alt);
    color: var(--color-text);
}

/* .btn-accent is the main action (forest green); .btn-cta is burnt orange,
   kept for the one buy/commit action on a page (Add to cart, Place order…) */
.btn-accent {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.btn-accent:hover {
    background: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
    color: #fff;
}

.btn-cta {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-text);
}

.btn-cta:hover {
    background: #e4a6b6;
    border-color: #e4a6b6;
    color: var(--color-primary-dark);
    box-shadow: var(--shadow);
}

/* Secondary action on dark backgrounds (hero, footer) */
.btn-outline-light {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.6);
    color: #fff;
}

.btn-outline-light:hover {
    background: #fff;
    border-color: #fff;
    color: var(--color-primary);
}

.btn-small {
    min-height: 40px;
    padding: 0.45em 1.05em;
    font-size: var(--text-sm);
}

.btn-block {
    width: 100%;
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
}

.link-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    min-height: 32px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--color-error);
    font: inherit;
    cursor: pointer;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3em;
    padding: 0.25em 0.7em;
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

.badge-warning {
    background: var(--color-warning-soft);
    color: #7a4a06;
}

/* Status labels always show the word, so colour is never the only signal */
.status {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.25em 0.7em;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
}

/* "Payment: Paid": a label and its status stay on one line together (they wrap as a pair on phones) */
.status-pair {
    white-space: nowrap;
}

.status::before {
    content: "";
    width: 0.5em;
    height: 0.5em;
    border-radius: 50%;
    background: currentColor;
}

.status-good { background: #e3f4e3; color: #1d6b1d; }
.status-warning { background: #fff2d6; color: #7a4f00; }
.status-critical { background: #fbe4e4; color: #a12b2b; }
.status-neutral { background: #efe6ea; color: #5c4a55; }

.verified-badge {
    display: inline-flex;
    margin-left: var(--space-2);
    padding: 0.15em 0.6em;
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
    font-size: var(--text-xs);
    font-weight: 600;
    white-space: nowrap;
}

.stars {
    color: #b8860b;
    font-size: 1.1rem;
    letter-spacing: 0.08em;
}

/* ===== 5. Forms ====================================================== */
fieldset {
    min-width: 0;
    margin: 0 0 var(--space-5);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

/* Section headings sit inside the card (instead of cutting through its border) */
legend {
    float: left;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    margin: 0 0 var(--space-4);
    padding: 0;
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.25;
}

legend ~ * {
    clear: both; /* also when the element right after the legend is hidden */
}

.field {
    margin-bottom: var(--space-4);
}

.field > label,
.field-label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.4;
}

/* Tick boxes inside a field keep their own layout (box beside the text, normal weight) */
.field > label.check {
    display: flex;
    font-size: var(--text-base);
    font-weight: 400;
    line-height: 1.5;
}

input,
select,
textarea {
    width: 100%;
    min-height: 48px;
    padding: 0.7em 0.95em;
    font: inherit;
    font-size: var(--text-input); /* 16px stops phones zooming in */
    line-height: 1.4;
    color: var(--color-text);
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: #fff;
    transition: border-color 0.2s, box-shadow 0.2s;
}

textarea {
    min-height: 110px;
    resize: vertical;
}

select {
    appearance: none;
    padding-right: 2.5em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2355646a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.95em center;
}

input::placeholder,
textarea::placeholder {
    color: var(--color-subtle);
}

input:hover,
select:hover,
textarea:hover {
    border-color: var(--color-subtle);
}

input:focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring);
}

input:disabled,
select:disabled,
textarea:disabled {
    background: var(--color-bg-alt);
    color: var(--color-muted);
    cursor: not-allowed;
}

input[type="checkbox"],
input[type="radio"] {
    width: 20px;
    height: 20px;
    min-height: 0;
    margin: 0.15em 0 0;
    padding: 0;
    flex-shrink: 0;
    accent-color: var(--color-primary);
    cursor: pointer;
}

input[type="file"] {
    padding: 0.55em;
    cursor: pointer;
}

.check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    min-height: 32px;
    margin-bottom: var(--space-2);
    font-weight: 400;
    line-height: 1.5;
    cursor: pointer;
}

.choice-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
}

.input-with-button {
    position: relative;
}

.input-with-button input {
    padding-right: 5rem;
}

.input-with-button button {
    position: absolute;
    top: 50%;
    right: 4px;
    min-width: 64px;
    min-height: 40px;
    transform: translateY(-50%);
    padding: 0 0.8em;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--color-bg-alt);
    color: var(--color-text);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
}

.input-with-button button:hover {
    background: var(--color-border);
}

.has-error input,
.has-error select,
.has-error textarea {
    border-color: var(--color-error);
}

.field-error {
    margin: var(--space-2) 0 0;
    color: var(--color-error);
    font-size: var(--text-sm);
    font-weight: 500;
    line-height: 1.45;
}

.field-error:empty {
    display: none;
}

.field-error::before {
    content: "⚠ ";
}

.form-status:empty {
    display: none;
}

.form-status {
    margin-bottom: var(--space-4);
}

.form-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.password-rules {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
    margin: var(--space-2) 0 0;
    padding: 0;
    list-style: none;
    color: var(--color-muted);
    font-size: var(--text-sm);
}

.password-rules li::before {
    content: "○ ";
}

.password-rules li.met {
    color: var(--color-success);
}

.password-rules li.met::before {
    content: "✓ ";
}

.inline-status {
    margin-left: var(--space-2);
    color: var(--color-muted);
    font-size: var(--text-sm);
}

/* ===== 6. Header & navigation ======================================== */
.preview-bar {
    padding: var(--space-2) 0;
    background: var(--color-dark);
    color: #ead9e1;
    font-size: var(--text-sm);
    line-height: 1.45;
    text-align: center;
}

/* Layout stability (CLS): script.js draws the header and footer after the page may already have painted.
   Until then the header's space is kept free (64px + 1px border; 60px + 1px on log-in pages), and <main>
   fills at least the screen, so the footer starts below it and content arriving from the database never
   pushes a visible footer down. */
#site-header:empty {
    height: calc(var(--header-h) + 1px);
}

#site-header:empty:has(~ main.auth-page) {
    height: 61px;
}

#main {
    min-height: calc(100vh - var(--header-h) - 1px);
}

/* Spanish/French visitors: the page is shown once it's translated (js/i18n.js adds the class, script.js removes
   it), so the English text never flashes. Hidden content isn't a layout shift. If a script fails, the page
   still appears after 3 s. */
.kp-translating body {
    visibility: hidden;
    animation: kp-show-anyway 0s 3s forwards;
}

@keyframes kp-show-anyway {
    to { visibility: visible; }
}

/* Lists and detail areas still loading from the database (aria-busy="true", cleared by each page's script)
   keep most of a screen free, so what's below them isn't pushed down when the results arrive. */
:is(.card-grid, .review-grid, .moment-grid, .moment-timeline, #cart-items, #pet-detail, #product-detail, #service-detail, #dog-profile, #investments-box)[aria-busy="true"] {
    min-height: 60vh;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 30;
    background: rgba(248, 242, 239, 0.94);
    backdrop-filter: saturate(1.4) blur(12px);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    border-bottom: 1px solid var(--color-border);
}

.header-inner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--header-h);
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-height: var(--tap);
    margin-right: auto;
    font-family: var(--font-heading);
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-text);
    text-decoration: none;
}

.logo:hover {
    color: var(--color-text);
}

.logo-icon svg {
    width: 28px;
    height: 28px;
    fill: var(--color-primary);
}

.logo-light {
    color: #fff;
}

.logo-light:hover {
    color: #fff;
}

.logo-light .logo-icon svg {
    fill: var(--color-accent);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

.icon-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-width: var(--tap);
    min-height: var(--tap);
    padding: 0 0.6rem;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.icon-btn:hover,
.icon-btn[aria-current="page"] {
    background: var(--color-bg-alt);
    color: var(--color-text);
}

.icon-btn svg {
    width: 22px;
    height: 22px;
}

.cart-label {
    display: none;
}

.cart-count {
    position: absolute;
    top: 2px;
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    border: 2px solid #fff;
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    color: var(--color-text);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1;
}

.nav-toggle-bars span {
    display: block;
    width: 22px;
    height: 2px;
    margin: 2.5px 0;
    border-radius: 2px;
    background: var(--color-text);
    transition: transform 0.2s, opacity 0.2s;
}

.nav-toggle-bars {
    display: block;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }

/* Mobile menu: a panel under the header */
.site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    padding: var(--space-3) var(--gutter) var(--space-5);
    background: #fff;
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
}

.site-nav.open {
    display: block;
}

.nav-links {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-links a,
.account-links a:not(.btn) {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-sm);
    color: var(--color-text);
    font-size: 1.05rem;
    font-weight: 500;
    text-decoration: none;
}

.nav-links a:hover,
.account-links a:not(.btn):hover {
    background: var(--color-bg-alt);
    color: var(--color-text);
}

.nav-links a[aria-current="page"],
.account-links a[aria-current="page"] {
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
}

.account-links {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.account-links .btn {
    width: 100%;
}

/* "Log in" / "Log out" read like the other header links */
.account-links .btn-ghost {
    font-size: 1.05rem;
    font-weight: 500;
}

@media (min-width: 1180px) {
    .nav-toggle {
        display: none;
    }

    .site-nav {
        display: flex;
        flex: 1;
        align-items: center;
        position: static;
        max-height: none;
        overflow: visible;
        padding: 0;
        background: none;
        border: 0;
        box-shadow: none;
    }

    .nav-links {
        display: flex;
        flex: 1;
        justify-content: center;
        gap: 2px;
    }

    .nav-links a,
    .account-links a:not(.btn) {
        min-height: 40px;
        padding: 0 0.7rem;
        border-radius: var(--radius-pill);
        font-size: 0.975rem;
        white-space: nowrap;
    }

    .account-links {
        display: flex;
        align-items: center;
        gap: var(--space-2);
        margin: 0;
        padding: 0;
        border: 0;
    }

    .account-links .btn {
        width: auto;
        white-space: nowrap;
    }

    .logo,
    .header-actions {
        flex-shrink: 0;
    }

    .account-links .btn-ghost {
        font-size: 0.975rem;
    }

    .logo {
        margin-right: var(--space-4);
    }

    .header-actions {
        order: 3;
        margin-left: var(--space-2);
    }

    .cart-label {
        display: inline;
    }

    .cart-link {
        padding: 0 0.9rem 0 0.7rem;
    }

    .cart-count {
        position: static;
        border: 0;
    }
}

/* ===== 7. Footer ===================================================== */
.site-footer {
    padding: var(--space-8) 0 var(--space-5);
    background: var(--color-dark);
    color: #ead9e1;
    font-size: 0.9375rem;
}

.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6) var(--space-5);
}

.footer-grid > div:first-child {
    grid-column: 1 / -1;
}

.footer-grid a:not(.logo) {
    display: flex;
    align-items: center;
    min-height: 36px;
    color: #ead9e1;
    text-decoration: none;
}

.footer-grid a:not(.logo):hover {
    color: #fff;
}

.footer-heading {
    margin-bottom: var(--space-2);
    color: #fff;
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.footer-tagline {
    max-width: 24rem;
    margin-top: var(--space-3);
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-7);
    padding-top: var(--space-5);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: var(--text-sm);
}

.footer-bottom p {
    margin: 0;
}

.footer-legal {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
}

.footer-legal a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    color: #ead9e1;
    text-decoration: none;
}

.footer-legal a:hover {
    color: #fff;
}

@media (min-width: 900px) {
    .footer-grid {
        grid-template-columns: 1.5fr repeat(3, 1fr);
    }

    .footer-grid > div:first-child {
        grid-column: auto;
    }
}

/* ===== 8. Home page ================================================== */
.hero {
    /* Homepage hero colours (owner, 2026-10-31): near-black and white with blush pink, and the tabby kitten's
       caramel from the photo for the small touches (label, ticks). Text contrast checked: white and blush on ink. */
    --hero-ink: #161114;
    --hero-ink-rgb: 22, 17, 20;
    --hero-tabby: #c9a57c;
    --hero-tabby-strong: #b08d67;
    position: relative;
    isolation: isolate;
    display: flex;
    align-items: flex-end;
    min-height: clamp(540px, 82vh, 700px);
    padding-block: var(--space-8) var(--space-7);
    overflow: hidden;
    color: #fff;
    background: var(--hero-ink);
}

.hero-media {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% 45%;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
}

/* Phones and tablets: the photo on top, the text on a deep berry panel below (nothing covers the pets).
   Up to 1079px since the puppy-and-kitten photo (2026-10-29): beside the text on tablets, it would sit under it. */
@media (max-width: 1079px) {
    .hero {
        display: block;
        min-height: 0;
        padding-block: 0 var(--space-7);
    }

    .hero-media {
        position: relative;
        z-index: auto;
        height: auto;
        aspect-ratio: 4 / 3;
        object-position: 46% 55%;   /* the puppy and the kitten, centred */
    }

    /* Like an app: the text sits on a rounded panel that slides up over the bottom of the photo (owner, 2026-10-29) */
    .hero-inner {
        position: relative;
        margin-top: calc(var(--space-6) * -1);
        padding-top: var(--space-6);
        border-radius: 28px 28px 0 0;
        background: var(--hero-ink);
        box-shadow: 0 -14px 30px -18px rgba(var(--hero-ink-rgb), 0.6);
    }
}

/* Tablets: a wider, shorter photo, so the text still starts on the first screen */
@media (min-width: 640px) and (max-width: 1079px) {
    .hero-media {
        aspect-ratio: 16 / 9;
    }
}

.hero-inner {
    width: 100%;
}

.hero-content {
    max-width: 36rem;
}

.hero .eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--hero-tabby);
}

/* A short caramel line before the label, like the kitten's stripes */
.hero .eyebrow::before {
    content: "";
    width: 1.5rem;
    height: 2px;
    border-radius: 2px;
    background: var(--hero-tabby-strong);
}

.hero-highlight {
    color: var(--color-accent);
}

/* Which pets: small white-outlined chips under the text */
.hero-pets {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: calc(var(--space-2) * -1) 0 var(--space-5);
    padding: 0;
    list-style: none;
}

.hero-pets li {
    padding: 0.3rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    font-size: var(--text-sm);
    font-weight: 600;
}

.hero h1 {
    max-width: 15ch;
    margin-bottom: var(--space-4);
    font-size: var(--text-display);
    color: #fff;
    line-height: 1.06;
}

.hero-lead {
    max-width: 30rem;
    margin: 0 0 var(--space-6);
    color: rgba(255, 255, 255, 0.88);
    font-size: var(--text-lg);
    line-height: 1.55;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.hero-actions .btn {
    flex: 1 1 200px;
}

/* Three honest promises under the hero buttons */
.hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-5);
    margin: var(--space-5) 0 0;
    padding: 0;
    list-style: none;
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--text-sm);
}

.hero-trust li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.hero-trust li::before {
    content: "✓";
    display: inline-grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    background: var(--hero-tabby-strong);
    color: var(--hero-ink);
    font-size: 0.7rem;
    font-weight: 700;
}

.quick-search {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2);
    margin-top: var(--space-6);
    padding: var(--space-3);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.97);
    box-shadow: var(--shadow-lg);
}

.quick-search label {
    display: grid;
    gap: 0.15rem;
    padding: var(--space-1) var(--space-2) 0;
    color: var(--color-muted);
    font-size: var(--text-xs);
    font-weight: 600;
}

.quick-search select {
    min-height: 44px;
    padding-left: 0;
    border: 0;
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
    background-color: transparent;
    font-weight: 500;
}

.quick-search select:focus {
    box-shadow: none;
    border-bottom-color: var(--color-primary);
}

.quick-search .btn {
    margin-top: var(--space-2);
}

@media (min-width: 1080px) {
    .hero {
        align-items: center;
        padding-block: var(--space-8);
    }

    /* Wider screens: the photo fills the right of the band and the text sits on deep berry at the left, blending into
       the photo, so the puppy and the kitten stay clear of the text (photo changed 2026-10-29) */
    .hero-media {
        left: 30%;
        width: 70%;
        object-position: 42% 50%;
    }

    .hero::before {
        background: linear-gradient(90deg, var(--hero-ink) 0%, var(--hero-ink) 30%,
            rgba(var(--hero-ink-rgb), 0.82) 36%, rgba(var(--hero-ink-rgb), 0.25) 46%, rgba(var(--hero-ink-rgb), 0) 56%);
    }
}

@media (min-width: 640px) {
    .hero-actions .btn {
        flex: 0 0 auto;
    }

    .quick-search {
        grid-template-columns: 1fr 1fr auto;
        align-items: end;
        gap: var(--space-3);
    }

    .quick-search select {
        border-bottom: 0;
    }

    .quick-search .btn {
        margin: 0;
    }
}

.steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: step;
}

.steps li {
    position: relative;
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.steps li::before {
    counter-increment: step;
    content: counter(step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-bottom: var(--space-3);
    border-radius: 50%;
    background: var(--color-accent);
    color: var(--color-text);
    font-weight: 700;
}

.steps p {
    margin: 0;
    color: var(--color-muted);
}

@media (min-width: 640px) {
    .steps { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1080px) {
    .steps { grid-template-columns: repeat(4, 1fr); }
}

.values-grid {
    display: grid;
    gap: var(--space-6);
    align-items: center;
}

.values-img {
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.values-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (min-width: 900px) {
    .values-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-8);
    }
}

.checklist {
    margin: var(--space-5) 0 0;
    padding: 0;
    list-style: none;
}

.checklist li {
    position: relative;
    padding: 0 0 var(--space-4) 2.25rem;
}

.checklist li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0.1em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: #e3ece6;
    color: var(--color-forest);
    font-size: 0.8rem;
    font-weight: 700;
}

.trust-strip {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: var(--space-5) 0;
    list-style: none;
}

.trust-strip li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: var(--color-muted);
    font-size: 0.9375rem;
}

.trust-strip strong {
    color: var(--color-text);
}

@media (min-width: 900px) {
    .trust-strip {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-5);
    }
}

.review-grid {
    display: grid;
    gap: var(--space-4);
}

@media (min-width: 900px) {
    .review-grid { grid-template-columns: repeat(3, 1fr); }
}

.review-card {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.review-card blockquote {
    flex: 1;
    margin: var(--space-3) 0 var(--space-4);
    font-family: var(--font-heading);
    font-size: 1.125rem;
    line-height: 1.5;
}

.review-card figcaption {
    color: var(--color-muted);
    font-size: var(--text-sm);
    line-height: 1.7;
}

/* Homepage reviews: a compact strip (the reviews page keeps full-size cards) */
.reviews-compact {
    padding-block: calc(var(--section-y) * 0.6);
}

.reviews-compact .section-head {
    margin-bottom: var(--space-4);
}

.reviews-compact .section-title {
    font-size: 1.5rem;
}

.reviews-compact .section-intro {
    font-size: var(--text-sm);
}

.reviews-compact .review-card {
    padding: var(--space-4);
}

.reviews-compact .review-card blockquote {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* long reviews are cut to three lines here; "See all reviews" shows them in full */
    line-clamp: 3;
    overflow: hidden;
    margin: var(--space-2) 0 var(--space-3);
    font-size: 1rem;
}

.reviews-compact .review-card figcaption {
    font-size: var(--text-xs);
}

@media (min-width: 600px) {
    .reviews-compact .review-grid { grid-template-columns: repeat(3, 1fr); }
}

.reviews-summary {
    min-height: 1.6em; /* its line is kept while reviews load (one line here, two on phones), so nothing jumps (CLS) */
    margin: 0 0 var(--space-5);
    font-size: var(--text-lg);
}

@media (max-width: 639px) {
    .reviews-summary {
        min-height: 3.2em;
    }
}

/* ===== Pet Moments (moments.html, migration 025) =====================
   Photo boxes are square from the start (no layout shift as photos arrive). */
.moment-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
    gap: var(--space-5);
}

.moment-tabs {
    margin: var(--space-5) 0;
}

/* Chips used as buttons (feed tabs) */
.chip[aria-selected="true"] {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: var(--color-primary-dark);
    font-weight: 600;
}

button.chip:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

.moment-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.moment-photo {
    aspect-ratio: 1;
    background: var(--color-bg-alt);
}

.moment-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ----- Photo feed timeline: one compact column (posts with name, pet, time, place, caption, photo, actions) ----- */
.moment-column {
    max-width: 600px;
    margin-inline: auto;
}

.moment-timeline {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.moment-post {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.moment-post:last-child {
    border-bottom: 0;
}

.moment-post .moment-body {
    padding: 0;
}

.moment-avatar {
    display: grid;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 50%;
    background: var(--color-accent-light);
    color: var(--color-primary-dark);
    font-family: var(--font-heading);
    font-weight: 700;
}

.moment-pet {
    display: inline-block;
    padding: 0 var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: var(--text-sm);
    font-weight: 500;
}

.moment-post .moment-caption {
    margin: var(--space-1) 0 0;
    white-space: pre-line; /* keeps the line breaks people typed */
}

.moment-post .moment-photo {
    margin-top: var(--space-3);
    overflow: hidden;
    border-radius: var(--radius-sm);
}

.moment-post .moment-actions {
    margin-top: var(--space-2);
}

.moment-post .moment-photo {
    position: relative;
}

/* Like feedback: the small heart pops; a double-tapped photo shows a big heart for a moment */
.moment-like.is-popping [aria-hidden] {
    display: inline-block;
    animation: pop 0.35s var(--ease-out);
}

.moment-heart {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
    font-size: 5.5rem;
    line-height: 1;
    text-shadow: 0 6px 24px rgba(84, 45, 70, 0.45);
    pointer-events: none;
    animation: moment-heart 0.8s var(--ease-out) forwards;
}

@keyframes moment-heart {
    0% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
    25% { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
    60% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(1); }
}

.skeleton-post .skeleton-line {
    margin: var(--space-1) 0 var(--space-2);
}

/* ----- Composer: a slim bar that opens into the full composer ----- */
.composer-bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.composer-open {
    flex: 1;
    min-height: 44px;
    padding: 0 var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-bg);
    color: var(--color-muted);
    font: inherit;
    text-align: left;
    cursor: text;
    transition: border-color var(--motion-fast) var(--ease-out), background var(--motion-fast) var(--ease-out);
}

.composer-open:hover,
.composer-open:focus-visible {
    border-color: var(--color-accent);
    background: var(--color-surface);
}

.composer-open:focus-visible,
.tool-btn:focus-within,
.tool-btn:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

.tool-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-width: 44px;
    min-height: 44px;
    padding: 0 var(--space-2);
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-primary);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
}

.tool-btn:hover {
    background: var(--color-primary-soft);
}

.moment-composer {
    margin-bottom: var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow);
}

.composer-head {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    gap: var(--space-3);
}

.composer-text textarea {
    width: 100%;
    min-height: 3.2em;
    padding: var(--space-2) 0;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: var(--text-lg);
    resize: none;
}

.composer-text textarea:focus {
    outline: none;
}

.composer-media {
    position: relative;
    margin: var(--space-2) 0 0 52px;
}

.composer-media:empty {
    display: none;
}

.composer-media img {
    display: block;
    max-height: 320px;
    border-radius: var(--radius-sm);
}

.composer-video {
    position: relative;
    display: inline-block;
}

.composer-remove {
    position: absolute;
    top: 6px;
    left: 6px;
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 1.3rem;
    cursor: pointer;
}

.moment-composer .emoji-bar {
    margin: var(--space-2) 0 0 52px;
}

.composer-extras {
    display: grid;
    gap: var(--space-3);
    margin: var(--space-3) 0 0 52px;
}

@media (min-width: 640px) {
    .composer-extras {
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    }
}

.composer-extras .field {
    margin: 0;
}

.composer-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.composer-spacer {
    flex: 1;
}

.composer-note {
    margin: var(--space-2) 0 0;
}

/* ----- Feed filters: All / Photos / Videos, then For you / Following / Latest / Mine ----- */
.moment-filters {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.media-filter {
    display: flex;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
}

.media-filter button {
    flex: 1;
    min-height: 44px;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-muted);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
}

.media-filter button[aria-selected="true"] {
    background: var(--color-primary);
    color: #fff;
}

.media-filter button:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

.moment-tabs {
    margin: 0;
}

/* ----- Profile pictures in the feed ----- */
.moment-avatar.has-photo {
    overflow: hidden;
    background: var(--color-primary-soft);
}

.moment-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ----- Video posts: shape reserved, letterboxed within 80% of the screen ----- */
.moment-video {
    position: relative;
    width: 100%;
    max-height: 80vh;
    margin-top: var(--space-3);
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: #160d13;
}

.moment-video video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.video-tap {
    position: absolute;
    inset: 0;
    width: 100%;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.video-tap:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: -3px;
}

.video-play-badge {
    position: absolute;
    top: 50%;
    left: 50%;
    display: grid;
    width: 64px;
    height: 64px;
    place-items: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 1.6rem;
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: opacity var(--motion-fast) var(--ease-out);
}

.moment-video.is-playing .video-play-badge {
    opacity: 0;
}

.video-time {
    position: absolute;
    bottom: 10px;
    left: 10px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: var(--text-sm);
    pointer-events: none;
}

.video-btn {
    position: absolute;
    bottom: 8px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 1.1rem;
    cursor: pointer;
}

.video-sound {
    right: 60px;
}

.video-full {
    right: 8px;
}

.video-btn:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

/* The photo is a button that opens the full-size viewer */
button.moment-photo {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    cursor: zoom-in;
}

button.moment-photo:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: -3px;
}

.moment-place {
    margin: var(--space-1) 0 0;
    color: var(--color-muted);
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
}

.emoji-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-top: var(--space-1);
}

.emoji-btn {
    min-width: 44px;  /* comfortable tap size on phones */
    min-height: 44px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
}

.emoji-btn:hover {
    background: var(--color-bg-alt);
}

.emoji-btn:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 1px;
}

.place-input {
    position: relative;
}

/* Full-size photo viewer */
.moment-viewer {
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    padding: 0;
    border: 0;
    border-radius: var(--radius);
    background: #160d13;
    color: #fff;
}

.moment-viewer::backdrop {
    background: rgba(22, 13, 19, 0.88);
}

.moment-viewer figure {
    margin: 0;
}

.moment-viewer img {
    display: block;
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 120px);
    margin: 0 auto;
    object-fit: contain;
}

.moment-viewer figcaption {
    max-width: 60ch;
    padding: var(--space-3) var(--space-4) var(--space-4);
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
}

.moment-viewer figcaption p {
    margin: var(--space-1) 0 0;
}

.moment-viewer-close {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}

.moment-viewer-close:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

.moment-body {
    padding: var(--space-3) var(--space-4) var(--space-4);
}

.moment-meta {
    margin: 0;
    font-size: var(--text-sm);
}

.moment-caption {
    margin: var(--space-2) 0 0;
    overflow-wrap: anywhere;
}

.moment-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: var(--space-3);
}

.moment-like[aria-pressed="true"] {
    color: var(--color-accent-dark);
}

.moment-extra {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
}

.moment-comments {
    display: grid;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    padding: 0;
    list-style: none;
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
}

.moment-comment-form {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-2);
}

.moment-comment-form .form-status {
    grid-column: 1 / -1;
}

.moment-report {
    margin-top: var(--space-3);
}

.moment-signin {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
}

.moment-signin p {
    margin: 0;
}

.moment-more {
    margin-top: var(--space-6);
    text-align: center;
}

.cta-band {
    padding-block: var(--space-7);
    background: var(--color-primary);
    color: #fff;
}

.cta-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
}

.cta-inner h2 {
    margin: 0 0 var(--space-1);
    color: #fff;
}

.cta-inner p {
    margin: 0;
    color: #ead9e1;
}

/* ===== 9. Cards ====================================================== */
.pet-card,
.service-card {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
}

.pet-card:not(.skeleton):hover,
.service-card:hover {
    border-color: transparent;
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
}

.pet-card-link,
.service-card {
    display: flex;
    flex-direction: column;
    flex: 1;
    color: inherit;
    text-decoration: none;
}

.pet-card-link:hover,
.service-card:hover {
    color: inherit;
}

.pet-card-img,
.service-card-img {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--color-bg-alt);
}

.service-card-img {
    aspect-ratio: 16 / 10;
}

.pet-card-img img,
.service-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
}

.pet-card:hover .pet-card-img img,
.service-card:hover .service-card-img img {
    transform: scale(1.04);
}

.pet-card-img .badge {
    position: absolute;
    left: 12px;
    top: 12px;
}

.pet-card-body,
.service-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: var(--space-4) var(--space-5) var(--space-5);
}

.pet-card-body h3,
.service-card-body h3 {
    margin-bottom: var(--space-1);
    font-size: 1.15rem;
}

.pet-meta,
.pet-location {
    margin: 0;
    color: var(--color-muted);
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* Who listed the pet (KinPaw or a shelter or rescue, migration 045): always one line, so cards keep their height */
.pet-lister {
    margin: var(--space-1) 0 0;
    overflow: hidden;
    color: var(--color-muted);
    font-size: var(--text-xs);
    line-height: 1.5;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.pet-listed-by {
    margin: 0 0 var(--space-3);
    font-size: var(--text-sm);
    line-height: 1.7;
}

.pet-listed-by .status {
    margin-left: var(--space-1);
}

.service-card-body p {
    margin: 0 0 var(--space-4);
    color: var(--color-muted);
}

.save-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--tap);
    height: var(--tap);
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: #d1495b;
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: var(--shadow);
    transition: transform 0.2s;
}

.save-btn:hover {
    transform: scale(1.08);
}

.product-category {
    margin: 0 0 var(--space-1);
    color: var(--color-primary);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.product-card .pet-meta {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.product-price {
    margin: auto 0 0;
    padding-top: var(--space-3);
    color: var(--color-text);
    font-size: 1.15rem;
    font-weight: 700;
}

.product-price-large {
    margin: 0 0 var(--space-3);
    padding: 0;
    font-family: var(--font-heading);
    font-size: 1.6rem;
}

.panel {
    padding: clamp(1.25rem, 1rem + 1vw, 2rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.panel + .panel {
    margin-top: var(--space-5);
}

.panel h2 {
    font-size: 1.3rem;
}

.panel h3 {
    font-size: 1.15rem;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.stat {
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

/* Block-level even when written as <span>/<strong> (Seller Center, worker pay): label, value and note stack */
.stat-label,
.stat-value,
.stat-note {
    display: block;
}

.stat-label {
    margin: 0;
    color: var(--color-muted);
    font-size: var(--text-sm);
}

.stat-value {
    margin: var(--space-1) 0 0;
    font-family: var(--font-heading);
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.stat-note {
    margin: var(--space-1) 0 0;
    color: var(--color-muted);
    font-size: var(--text-xs);
    line-height: 1.4;
}

/* ===== 10. Listings: adopt & shop ==================================== */
.adopt-layout {
    display: grid;
    gap: var(--space-5);
    align-items: start;
}

.filters-toggle {
    display: inline-flex;
    width: 100%;
}

.filters {
    display: none;
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.filters.open {
    display: block;
    margin-top: var(--space-3);
}

.filters h2 {
    font-size: 1.15rem;
}

@media (min-width: 900px) {
    .adopt-layout {
        grid-template-columns: 270px 1fr;
        gap: var(--space-6);
    }

    .filters-toggle {
        display: none;
    }

    .filters {
        position: sticky;
        top: calc(var(--header-h) + 1.5rem);
        display: block;
    }
}

.results-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.results-count {
    margin: 0;
    font-weight: 600;
}

.results-bar select {
    width: auto;
}

.shop-toolbar {
    display: grid;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.shop-toolbar .field {
    margin: 0;
}

@media (min-width: 900px) {
    .shop-toolbar {
        grid-template-columns: minmax(200px, 280px) 1fr auto;
        align-items: center;
    }
}

/* Category chips scroll sideways on phones instead of wrapping into many rows */
.chip-row {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    padding: 2px 2px var(--space-1);
    scrollbar-width: thin;
}

@media (min-width: 900px) {
    .chip-row {
        flex-wrap: wrap;
        overflow: visible;
    }
}

.chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    min-height: 40px;
    padding: 0 1rem;
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: #fff;
    font-size: var(--text-sm);
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}

.chip input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.chip:has(input:checked) {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: var(--color-primary-dark);
    font-weight: 600;
}

.chip:has(input:focus-visible) {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

/* ===== 11. Detail pages ============================================== */
.detail-grid {
    display: grid;
    gap: var(--space-6);
    align-items: start;
}

@media (min-width: 900px) {
    .detail-grid {
        grid-template-columns: 1.1fr 1fr;
        gap: var(--space-7);
    }
}

.detail-img {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-lg);
    background: var(--color-bg-alt);
    box-shadow: var(--shadow);
}

.detail-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.detail-img .badge {
    position: absolute;
    left: 16px;
    top: 16px;
}

.detail-info h1 {
    margin-bottom: var(--space-2);
}

.detail-subtitle {
    margin: 0 0 var(--space-5);
    color: var(--color-muted);
    font-size: var(--text-lg);
}

.facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-2);
    margin: 0 0 var(--space-5);
}

@media (min-width: 640px) {
    .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.facts div {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--color-bg-alt);
}

.facts dt {
    color: var(--color-muted);
    font-size: var(--text-xs);
}

.facts dd {
    margin: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0 0 var(--space-5);
    padding: 0;
    list-style: none;
}

.tag-list li {
    padding: 0.3em 0.9em;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    font-size: var(--text-sm);
}

.detail-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-5);
}

.add-to-cart {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-3);
    margin: var(--space-5) 0 var(--space-4);
}

.add-to-cart .field {
    width: 110px;
    margin: 0;
}

.add-to-cart .btn {
    flex: 1 1 180px;
}

.selected-pet {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    padding: var(--space-4);
    border-radius: var(--radius);
    background: var(--color-bg-alt);
}

.selected-pet img {
    width: 72px;
    height: 72px;
    flex-shrink: 0;
    border-radius: var(--radius);
    object-fit: cover;
}

.selected-pet p {
    margin: 0;
}

/* ===== 12. Cart, checkout, orders, bookings ========================== */
.cart-layout {
    display: grid;
    gap: var(--space-5);
    align-items: start;
}

@media (min-width: 900px) {
    .cart-layout {
        grid-template-columns: minmax(0, 1fr) 360px;
        gap: var(--space-6);
    }

    .cart-summary {
        position: sticky;
        top: calc(var(--header-h) + 1.5rem);
    }
}

.cart-summary h2 {
    font-size: 1.2rem;
}

.cart-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.cart-item {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr);
    gap: var(--space-2) var(--space-4);
    align-items: center;
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--color-border);
}

.cart-item img {
    width: 64px;
    height: 64px;
    border-radius: var(--radius);
    object-fit: cover;
}

.cart-item-info {
    min-width: 0;
}

.cart-item-info p {
    margin: var(--space-1) 0 0;
}

.cart-item-qty {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    grid-column: 2;
}

.cart-item-qty select {
    width: auto;
    min-width: 84px;
}

.cart-item-total {
    grid-column: 2;
    margin: 0;
    font-weight: 700;
}

.cart-item-compact {
    grid-template-columns: minmax(0, 1fr) auto;
}

.cart-item-compact .cart-item-total {
    grid-column: auto;
    text-align: right;
}

@media (min-width: 640px) {
    .cart-item {
        grid-template-columns: 88px minmax(0, 1fr) auto auto;
    }

    .cart-item img {
        width: 88px;
        height: 88px;
    }

    .cart-item-qty,
    .cart-item-total {
        grid-column: auto;
    }

    .cart-item-total {
        min-width: 5.5em;
        text-align: right;
    }

    .cart-item-compact {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

.summary-lines {
    margin: 0 0 var(--space-4);
}

.summary-lines div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-2) 0;
}

.summary-lines dt {
    color: var(--color-muted);
}

.summary-lines dd {
    margin: 0;
    font-weight: 600;
    text-align: right;
}

.summary-total {
    margin-top: var(--space-2);
    padding-top: var(--space-3) !important;
    border-top: 1px solid var(--color-border);
    font-size: 1.15rem;
}

.summary-total dt {
    color: var(--color-text);
    font-weight: 600;
}

.secure-note {
    margin-top: var(--space-3);
}

.discount-row {
    display: flex;
    gap: var(--space-2);
    margin: var(--space-4) 0 var(--space-1);
}

.discount-row input {
    min-width: 0;
}

.method-list {
    display: grid;
    gap: var(--space-2);
}

.method-option {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    min-height: 56px;
    padding: var(--space-3) var(--space-4);
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: #fff;
    line-height: 1.45;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}

.method-option:hover {
    border-color: var(--color-subtle);
}

.method-option:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
}

.method-option input {
    margin-top: 0.1em;
}

.method-option .hint,
.method-option .badge {
    display: block;
    width: fit-content;
    margin-top: var(--space-1);
    white-space: normal;
}

.method-option.is-test {
    border-style: dashed;
}

/* KinPaw wallet (migration 024): the checkout/order option and the My KinPaw section */
.wallet-option {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1.5px solid var(--color-primary);
    border-radius: var(--radius-sm);
    background: var(--color-primary-soft);
    line-height: 1.45;
}

.wallet-option p {
    flex: 1 1 16rem;
    margin: 0;
}

.wallet-option .hint {
    display: block;
    margin-top: var(--space-1);
}

.wallet-balance {
    margin: var(--space-1) 0;
    font-size: 1.4rem;
    font-weight: 700;
}

.wallet-balance .hint {
    font-size: 0.9rem;
    font-weight: 400;
}

.wallet-deposit {
    margin-top: var(--space-4);
}

.wallet-activity {
    margin-top: var(--space-4);
}

.wallet-activity li {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
}

.wallet-in {
    color: var(--color-success, #1f7a4d);
}

.slot-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: var(--space-2);
}

.slot {
    position: relative;
}

.slot input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.slot span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border: 1.5px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: #fff;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.slot input:checked + span {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: var(--color-primary-dark);
    font-weight: 600;
}

.slot input:focus-visible + span {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

.payment-help-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.payment-help-row .hint {
    margin: 0;
    max-width: 32rem;
}

.payment-help-btn {
    margin-top: var(--space-3);
}

.payment-help-row .payment-help-btn {
    margin-top: 0;
}

.payment-help-panel {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
}

.manual-instructions {
    margin-bottom: var(--space-5);
    border: 2px solid var(--color-accent);
    box-shadow: var(--shadow-sm);
}

.manual-instructions h2 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.manual-instructions .pet-description {
    white-space: pre-line; /* keep the line breaks typed in Admin */
}

.pay-facts {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-4) 0;
}

.pay-facts div {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--color-bg-alt);
}

.pay-facts dt {
    color: var(--color-muted);
    font-size: var(--text-sm);
}

.pay-facts dd {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    font-size: 1.1rem;
}

.next-steps {
    margin: 0;
    padding-left: 1.25rem;
    color: var(--color-muted);
}

/* Paying into the owner's accounts (js/pay-options.js, migration 040): choices, then details with a QR code */
.pay-options {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.pay-choose-title {
    margin: 0 0 var(--space-3);
    font-size: var(--text-base);
}

.pay-choices {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.pay-choice {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35em;
    min-height: 44px;
    padding: 0.5em 1em;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    cursor: pointer;
}

.pay-choice .hint {
    font-size: var(--text-xs);
}

.pay-choice[aria-pressed="true"] {
    border-color: var(--color-primary);
    box-shadow: inset 0 0 0 1px var(--color-primary);
    background: var(--color-bg-alt);
}

.pay-result:not(:empty) {
    margin-top: var(--space-4);
}

.pay-chosen h3 {
    margin: 0 0 var(--space-3);
}

/* The QR code keeps a white quiet zone (needed for scanning) and a fixed size, so nothing moves when it appears */
.pay-qr {
    width: 200px;
    max-width: 100%;
    aspect-ratio: 1;
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #fff;
}

.pay-qr svg {
    display: block;
    width: 100%;
    height: 100%;
}

.pay-qr-hint {
    margin: var(--space-1) 0 var(--space-3);
}

.pay-value {
    overflow-wrap: anywhere; /* long account numbers and crypto addresses wrap instead of widening the page */
}

.pay-notes {
    margin: 0 0 var(--space-3);
    padding-left: 1.25rem;
}

.pay-notes li + li {
    margin-top: var(--space-1);
}

.next-steps li + li {
    margin-top: var(--space-1);
}

.test-banner {
    display: grid;
    gap: var(--space-1);
    margin-bottom: var(--space-5);
    padding: var(--space-4) var(--space-5);
    border: 2px dashed #8a5a00;
    border-radius: var(--radius-sm);
    background: #fff2d6;
    color: #5c3c00;
}

.contact-layout {
    display: grid;
    gap: var(--space-5);
    align-items: start;
}

.contact-aside {
    display: grid;
    gap: var(--space-4);
}

.contact-aside .panel + .panel {
    margin-top: 0;
}

.contact-aside h2 {
    font-size: 1.125rem;
}

@media (min-width: 900px) {
    .contact-layout {
        grid-template-columns: 340px minmax(0, 1fr);
        gap: var(--space-6);
    }
}

/* FAQ (contact page) */
.faq {
    display: grid;
    gap: var(--space-2);
    max-width: 52rem;
}

.faq details {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

.faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: 56px;
    padding: var(--space-3) var(--space-5);
    font-weight: 600;
    list-style: none;
    cursor: pointer;
}

.faq summary::-webkit-details-marker {
    display: none;
}

.faq summary::after {
    content: "+";
    flex-shrink: 0;
    color: var(--color-primary);
    font-size: 1.4rem;
    font-weight: 400;
    transition: transform 0.2s;
}

.faq details[open] summary::after {
    transform: rotate(45deg);
}

.faq details > div {
    padding: 0 var(--space-5) var(--space-4);
    color: var(--color-muted);
}

.faq details > div p:last-child {
    margin-bottom: 0;
}

/* ----- Checkout: steps, section cards, summary, phone bar ----- */
.checkout-steps {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin: 0 0 var(--space-4);
    padding: 0;
    list-style: none;
    font-size: var(--text-sm);
    color: var(--color-muted);
}

.checkout-steps li {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.checkout-steps li + li::before {
    content: "";
    width: 18px;
    height: 2px;
    margin-right: var(--space-2);
    border-radius: 2px;
    background: var(--color-border-strong);
}

.checkout-steps a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    color: inherit;
    text-decoration: none;
}

.step-dot {
    display: inline-grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border: 1.5px solid var(--color-border-strong);
    border-radius: 50%;
    background: var(--color-surface);
    font-size: 0.8125rem;
    font-weight: 700;
}

.checkout-steps .is-done .step-dot {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.checkout-steps .is-current {
    color: var(--color-text);
    font-weight: 600;
}

.checkout-steps .is-current .step-dot {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: #fff;
}

/* Small phones: only the current step keeps its label (screen readers still hear all three) */
@media (max-width: 559px) {
    .checkout-steps {
        flex-wrap: nowrap;
    }

    .checkout-steps li:not(.is-current) {
        font-size: 0;
    }

    .checkout-steps li:not(.is-current) .step-dot {
        font-size: 0.8125rem;
    }
}

@media (max-width: 399px) {
    .method-icon {
        display: none;
    }
}

.checkout-hero p:last-child {
    margin-bottom: 0;
}

.checkout-card {
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
}

/* The heading sits inside the card instead of cutting through its border */
.checkout-card > legend {
    float: left;
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    margin: 0 0 var(--space-4);
    padding: 0;
    font-size: 1.125rem;
}

.checkout-card > legend + * {
    clear: both;
}

.step-num {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 700;
}

.summary-count {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--color-muted);
}

.summary-item {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: var(--space-3) var(--space-4);
    align-items: center;
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
}

.summary-item .cart-item-total {
    grid-column: auto;
    margin: 0;
    text-align: right;
}

.summary-thumb {
    position: relative;
    width: 56px;
    height: 56px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg-alt);
}

.summary-thumb img {
    width: 100%;
    height: 100%;
    border-radius: calc(var(--radius) - 1px);
    object-fit: cover;
}

.summary-qty {
    position: absolute;
    top: -8px;
    right: -8px;
    display: grid;
    place-items: center;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    border-radius: calc(var(--radius) - 1px);
    background: var(--color-text);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 700;
}

.summary-discount dd {
    color: var(--color-success);
}

.free-shipping {
    margin: 0 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--color-primary-soft);
    font-size: var(--text-sm);
}

.free-shipping p {
    margin: 0 0 var(--space-2);
}

.progress {
    height: 6px;
    overflow: hidden;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.8);
}

.progress span {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: var(--color-primary);
    transition: width 0.4s ease;
}

.btn-large {
    min-height: 56px;
    font-size: 1.0625rem;
}

.checkout-trust {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-4) 0 0;
    padding: var(--space-4) 0 0;
    border-top: 1px solid var(--color-border);
    list-style: none;
    font-size: var(--text-sm);
    color: var(--color-muted);
}

.checkout-trust li {
    display: grid;
    grid-template-columns: 1.5em minmax(0, 1fr);
    gap: var(--space-1);
}

.method-option {
    align-items: center;
}

.method-option input {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0;
    accent-color: var(--color-primary);
}

.method-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    background: var(--color-bg-alt);
    font-size: 1.35rem;
}

.method-option:has(input:checked) .method-icon {
    background: #fff;
}

.method-text {
    min-width: 0;
}

.method-option:has(input:focus-visible) {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

/* Phone bar: total + button, slides away when the summary button is on screen */
.checkout-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 25;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom));
    border-top: 1px solid var(--color-border);
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 -8px 24px rgba(59, 34, 51, 0.1);
    transition: transform 0.25s ease;
}

.checkout-bar[hidden] {
    display: none;
}

.checkout-bar.is-typing,
.checkout-bar.is-away {
    transform: translateY(110%);
}

.checkout-bar-total {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.checkout-bar-total span {
    font-size: var(--text-sm);
    color: var(--color-muted);
}

.checkout-bar-total strong {
    font-size: 1.1rem;
}

.checkout-bar .btn {
    flex: 0 1 auto;
    min-width: 9.5rem;
}

/* Room so the bar never covers the end of the page */
body:has(.checkout-bar:not([hidden])) .site-footer {
    padding-bottom: 88px;
}

@media (min-width: 900px) {
    .checkout-bar,
    .checkout-bar:not([hidden]) {
        display: none;
    }

    body:has(.checkout-bar:not([hidden])) .site-footer {
        padding-bottom: 0;
    }
}

/* ===== 13. Login & sign-up =========================================== */
/* A dedicated full-page layout: its own slim header and footer, a large
   photo panel beside the form on desktop, and the form first on phones. */
.auth-body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--color-bg-alt);
}

.auth-header {
    border-bottom: 1px solid var(--color-border);
    background: #fff;
}

.auth-header .header-inner {
    min-height: 60px;
}

.auth-back {
    display: inline-flex;
    white-space: nowrap;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--tap);
    padding: 0 var(--space-3);
    border-radius: var(--radius-pill);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
}

.auth-back:hover {
    background: var(--color-bg-alt);
    color: var(--color-text);
}

.auth-page {
    display: grid;
    flex: 1;
}

.auth-visual {
    display: none;
}

.auth-main {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: var(--space-6) var(--gutter) var(--space-7);
}

.auth-panel {
    width: 100%;
    max-width: 480px;
}

.auth-panel h1 {
    margin-bottom: var(--space-2);
    font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.5rem);
}

.auth-lead {
    margin: 0 0 var(--space-6);
    color: var(--color-muted);
    font-size: var(--text-lg);
}

/* "Log in | Create account" switch */
.auth-switch-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    margin-bottom: var(--space-6);
    padding: 4px;
    border-radius: var(--radius-pill);
    background: #fff;
    border: 1px solid var(--color-border);
}

.auth-switch-tabs a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border-radius: var(--radius-pill);
    color: var(--color-muted);
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.auth-switch-tabs a:hover {
    color: var(--color-text);
}

.auth-switch-tabs a[aria-current="page"] {
    background: var(--color-primary);
    color: #fff;
}

.auth-form {
    padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: #fff;
    box-shadow: var(--shadow);
}

.auth-form .btn-block {
    margin-top: var(--space-2);
}

.auth-row {
    display: flex;
    justify-content: flex-end;
    margin: calc(-1 * var(--space-2)) 0 var(--space-4);
}

.auth-row a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    font-size: var(--text-sm);
    font-weight: 600;
}

.auth-alt {
    margin: var(--space-5) 0 0;
    color: var(--color-muted);
    text-align: center;
}

.auth-trust {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    gap: var(--space-2);
    margin: var(--space-5) 0 0;
    color: var(--color-muted);
    font-size: var(--text-sm);
}

.auth-footer {
    padding: var(--space-4) 0;
    border-top: 1px solid var(--color-border);
    background: #fff;
    font-size: var(--text-sm);
}

.auth-footer .container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-5);
}

.auth-footer p {
    margin: 0;
    color: var(--color-muted);
}

.auth-footer nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-5);
}

.auth-footer a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    color: var(--color-muted);
}

@media (min-width: 1080px) {
    .auth-page {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    /* One screen tall and kept in view, rather than as tall as the form column: when a page is drawn in steps
       (Log in and Create account draw their sign-in buttons first), the photo's text doesn't slide down. */
    .auth-visual {
        position: sticky;
        top: 0;
        align-self: start;
        display: flex;
        align-items: flex-end;
        overflow: hidden;
        height: 100vh;
        background: var(--color-dark) center / cover no-repeat;
    }

    .auth-visual::after {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(0deg, rgba(52, 27, 43, 0.9) 0%, rgba(52, 27, 43, 0.35) 45%, rgba(52, 27, 43, 0.05) 100%);
    }

    .auth-visual-login { background-image: url("assets/images/kinpaw/adopt-dog-800.webp"); background-position: center 30%; }
    .auth-visual-register { background-image: url("assets/images/kinpaw/grey-cat-800.webp"); background-position: center 35%; }
    .auth-visual-reset { background-image: url("assets/images/svc-sitting.webp"); }

    .auth-visual-content {
        position: relative;
        z-index: 1;
        max-width: 34rem;
        padding: var(--space-8);
        /* the panel starts below the header, so its lowest part begins off screen */
        padding-bottom: calc(var(--space-8) + var(--header-h));
        color: #fff;
    }

    .auth-visual-content h2 {
        color: #fff;
        font-size: clamp(2rem, 1.2rem + 1.6vw, 2.75rem);
    }

    .auth-visual .eyebrow {
        color: var(--color-accent);
    }

    .auth-benefits {
        display: grid;
        gap: var(--space-3);
        margin: var(--space-5) 0 0;
        padding: 0;
        list-style: none;
        color: #e3ebe8;
    }

    .auth-benefits li {
        display: flex;
        gap: var(--space-3);
    }

    .auth-benefits li::before {
        content: "✓";
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.16);
        color: var(--color-accent);
        font-size: 0.8rem;
        font-weight: 700;
    }

    .auth-main {
        align-items: center;
        padding: var(--space-7) var(--space-7);
    }

    /* Log in and Create account are drawn in two steps (sign-in buttons first): top-aligned, so the form
       doesn't jump up as the rest arrives (centring would move it) */
    .auth-main:has(#social-signin) {
        align-items: flex-start;
    }
}

/* ===== 14. Dashboards & admin ======================================= */
.dash-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
    padding-block: var(--space-6) var(--space-8);
}

/* Let wide tables scroll inside their box instead of stretching the page */
.dash-layout > * {
    min-width: 0;
}

/* The admin area has wide tables, so it gets more room on big screens */
body[data-page="admin"] .container {
    max-width: 1440px;
}

/* Section tabs: a sideways-scrolling row on phones, a sidebar on laptops */
.dash-nav {
    display: flex;
    gap: var(--space-2);
    overflow-x: auto;
    margin-inline: calc(-1 * var(--gutter));
    padding: 2px var(--gutter) var(--space-2);
    scrollbar-width: thin;
}

.dash-nav button {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    min-height: 44px;
    padding: 0 var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: #fff;
    color: var(--color-text);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}

.dash-nav button:hover {
    background: var(--color-bg-alt);
}

.dash-nav button[aria-selected="true"] {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: #fff;
    font-weight: 600;
}

@media (min-width: 900px) {
    .dash-layout {
        grid-template-columns: 240px minmax(0, 1fr);
        gap: var(--space-6);
    }

    .dash-nav {
        position: sticky;
        top: calc(var(--header-h) + 1.5rem);
        flex-direction: column;
        overflow: visible;
        margin: 0;
        padding: 0;
    }

    .dash-nav button {
        width: 100%;
        border-color: transparent;
        border-radius: var(--radius-sm);
        background: transparent;
        white-space: normal;
        text-align: left;
    }

    .dash-nav button[aria-selected="true"] {
        border-color: transparent;
        background: var(--color-primary-soft);
        color: var(--color-primary-dark);
    }
}

.dash-panel h2 {
    font-size: clamp(1.5rem, 1.3rem + 0.8vw, 1.85rem);
}

.dash-panel > .section-head {
    margin-bottom: var(--space-5);
}

/* Tables scroll inside their box, never the whole page */
.table-wrap {
    position: relative; /* keeps hidden labels inside cells within the scroll box */
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    -webkit-overflow-scrolling: touch;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

th,
td {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
    white-space: nowrap;
}

th {
    background: var(--color-bg-alt);
    color: var(--color-muted);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

tr:last-child td {
    border-bottom: 0;
}

td.wrap {
    min-width: 180px;
    white-space: normal;
}

.table-wrap select {
    width: auto;
    min-height: 40px;
    padding-block: 0.4em;
    font-size: 1rem;
}

.table-pet {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.table-pet img {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    object-fit: cover;
}

.table-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-1);
}

.application-details {
    max-width: 640px;
    white-space: normal;
}

.application-details summary {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: var(--color-primary);
    font-weight: 600;
    cursor: pointer;
}

.application-details dl {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: var(--space-1) var(--space-4);
    margin: var(--space-3) 0 0;
}

.application-details dt {
    color: var(--color-muted);
}

.application-details dd {
    margin: 0;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.support-thread + .support-thread {
    margin-top: var(--space-4);
}

.support-head {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.support-head > div:first-child {
    min-width: 0;
    overflow-wrap: anywhere;
}

.ticket-controls {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    font-size: var(--text-sm);
}

.ticket-controls label {
    display: grid;
    gap: var(--space-1);
    color: var(--color-muted);
}

.thread {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-3) 0;
}

.thread-msg {
    max-width: min(90%, 44rem);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
}

.thread-msg p:last-child {
    margin-bottom: 0;
}

.thread-msg .detail-label {
    margin-bottom: var(--space-1);
}

.from-customer {
    background: var(--color-bg-alt);
}

.from-team {
    margin-left: auto;
    background: var(--color-primary-soft);
}

.reply-form {
    margin-top: var(--space-4);
}

.setting-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
}

.setting-row .check {
    margin: 0;
}

.inline-form {
    margin-top: var(--space-3);
}

.import-help {
    margin-bottom: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-sm);
    background: var(--color-bg-alt);
    font-size: 0.9375rem;
}

.import-help p {
    margin: 0 0 var(--space-2);
}

.export-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* Charts (single series, validated chart teal) */
.chart-grid-layout {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.chart-card {
    --chart-1: #13876f;
    min-width: 0;
    margin: 0;
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.chart-card.wide {
    grid-column: 1 / -1;
}

.chart-card h3 {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
}

.chart-card .chart-sub {
    margin: var(--space-1) 0 var(--space-4);
    color: var(--color-muted);
    font-size: var(--text-sm);
}

.bar-chart {
    display: grid;
    grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-3);
    font-size: 0.9375rem;
}

.bar-row {
    display: contents;
}

.bar-label {
    max-width: 9.5rem;
    color: var(--color-text);
    line-height: 1.3;
    overflow-wrap: anywhere;
}

.bar-track {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    min-height: 28px;
    border-radius: var(--radius-pill);
}

.bar-fill {
    display: block;
    height: 14px;
    border-radius: 0 4px 4px 0;
    background: var(--chart-1);
}

.bar-value {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.bar-track:hover .bar-fill,
.bar-track:focus-visible .bar-fill {
    filter: brightness(1.15);
}

.column-chart {
    width: 100%;
    height: auto;
    overflow: visible;
}

.chart-column { fill: var(--chart-1); }
.chart-hit { fill: transparent; }
.chart-hit:hover,
.chart-hit:focus-visible { fill: rgba(84, 45, 70, 0.08); outline: none; }
.chart-grid { stroke: #efe4e8; stroke-width: 1; }
.chart-baseline { stroke: #c9cdc2; stroke-width: 1; }
.chart-axis { fill: var(--color-muted); font-size: 11px; font-family: var(--font-body); }

.chart-empty {
    margin: 0;
    padding: var(--space-6) var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--color-bg-alt);
    color: var(--color-muted);
    font-size: var(--text-sm);
    text-align: center;
}

.chart-table {
    margin-top: var(--space-3);
    font-size: var(--text-sm);
}

.chart-table summary {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    color: var(--color-primary);
    font-weight: 600;
    cursor: pointer;
}

.chart-table table {
    margin-top: var(--space-2);
}

.chart-table > table {
    display: block;
    overflow-x: auto;
}

.chart-table th,
.chart-table td {
    padding: var(--space-2) var(--space-3);
}

/* ===== 15. Feedback: notices, empty states, loading ================== */
.notice {
    padding: var(--space-4) var(--space-5);
    border-left: 4px solid;
    border-radius: var(--radius-sm);
    line-height: 1.5;
}

.notice p {
    margin: var(--space-1) 0 0;
}

.notice-info { background: var(--color-primary-soft); border-color: var(--color-primary); }
.notice-success { background: var(--color-success-soft); border-color: var(--color-success); }
.notice-warning { background: var(--color-warning-soft); border-color: var(--color-accent-dark); }
.notice-error { background: var(--color-error-soft); border-color: var(--color-error); }

.empty-state {
    padding: clamp(2rem, 1.5rem + 2vw, 3.5rem) var(--space-5);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius);
    background: var(--color-surface);
    text-align: center;
}

.empty-state h1,
.empty-state h2,
.empty-state h3 {
    font-size: clamp(1.3rem, 1.15rem + 0.6vw, 1.6rem);
}

.empty-state p {
    max-width: 32rem;
    margin: 0 auto var(--space-5);
    color: var(--color-muted);
}

.empty-icon {
    margin-bottom: var(--space-2);
    font-size: 2.25rem;
}

.skeleton-img,
.skeleton-line,
.skeleton-block,
.skeleton .sk-img,
.skeleton .sk-bar,
.skeleton .sk-btn {
    background: linear-gradient(90deg, #efe6ea 25%, #f8f2f4 50%, #efe6ea 75%);
    background-size: 200% 100%;
    animation: shimmer 1.4s infinite linear;
}

.skeleton-img { aspect-ratio: 4 / 3; }
.skeleton-line { width: 55%; height: 14px; margin-bottom: 10px; border-radius: var(--radius-pill); }
.skeleton-line.wide { width: 75%; height: 20px; }
.skeleton-block { min-height: 320px; border-radius: var(--radius-lg); }

/* Card placeholders (script.js, skeletonCardsHTML): the real card's layout with invisible sample words as grey bars */
.skeleton .sk-bar {
    border-radius: var(--radius-pill);
    color: transparent;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.skeleton .sk-btn {
    border-color: transparent;
    color: transparent;
    pointer-events: none;
}

@keyframes shimmer {
    from { background-position: 200% 0; }
    to { background-position: -200% 0; }
}

.spinner {
    display: inline-block;
    width: 1.1em;
    height: 1.1em;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    vertical-align: -0.15em;
    animation: spin 0.7s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ===== 16. Dialogs & tooltips ======================================== */
.help-dialog {
    width: min(680px, calc(100vw - 24px));
    max-height: calc(100dvh - 24px);
    padding: 0;
    border: 0;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

.help-dialog::backdrop {
    background: rgba(52, 27, 43, 0.5);
}

.help-dialog-head {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
    background: #fff;
}

.help-dialog-head h2 {
    margin: 0;
    font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
}

.help-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    min-width: var(--tap);
    min-height: var(--tap);
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--color-muted);
    font-size: 1.15rem;
    cursor: pointer;
}

.help-close:hover {
    background: var(--color-bg-alt);
}

/* "Back to what I was doing" shares .help-close: let its text wrap on small phones instead of sticking out */
.form-footer .help-close {
    flex-shrink: 1;
    max-width: 100%;
}

.help-dialog-body {
    padding: var(--space-5);
}

.help-security {
    margin: var(--space-3) 0 var(--space-5);
}

.chart-tooltip {
    position: absolute;
    z-index: 50;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--color-text);
    color: #fff;
    font-size: var(--text-xs);
    line-height: 1.4;
    pointer-events: none;
    box-shadow: var(--shadow);
}

/* ===== 17. Text pages ================================================ */
.prose {
    max-width: 46rem;
}

.prose h2 {
    margin-top: var(--space-7);
    font-size: 1.375rem;
}

.prose ul {
    padding-left: 1.25rem;
}

.prose li {
    margin-bottom: var(--space-2);
}

/* Terms and Privacy: smaller, denser reading text */
[data-legal-kind] .prose {
    font-size: var(--text-sm);
    line-height: 1.65;
}

[data-legal-kind] .prose h2 {
    margin-top: var(--space-6);
    font-size: 1.125rem;
}

[data-legal-kind] .prose li {
    margin-bottom: var(--space-1);
}

.status-list {
    display: grid;
    gap: var(--space-3);
    margin: var(--space-4) 0;
    padding: 0;
    list-style: none;
}

.status-list li {
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-sm);
    background: var(--color-bg-alt);
}

.credits-list {
    padding-left: 1.25rem;
    font-size: var(--text-sm);
}

.credits-list li {
    margin-bottom: var(--space-2);
    overflow-wrap: anywhere;
}

/* ===== Home paths, announcement ======================== */
.announcement {
    padding: var(--space-3) 0;
    background: var(--color-warning-soft);
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    font-weight: 500;
}

/* ===== Customer home (My KinPaw) ===================================== */
.account-hero {
    padding-block: clamp(1.75rem, 1.2rem + 2.5vw, 3rem);
    background: var(--color-primary);
    color: #fff;
}

.account-hero .eyebrow {
    color: var(--color-accent-light);
}

.account-hero h1 {
    margin-bottom: var(--space-2);
    color: #fff;
}

.account-hero-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3) var(--space-5);
    margin-bottom: var(--space-5);
}

.account-hero-lead {
    margin: 0;
    max-width: 38rem;
    color: #e3ebe8;
}

.account-shortcut {
    flex: none;
}

.dash-nav-heading {
    display: none;
    margin: var(--space-4) 0 var(--space-1);
    padding-left: var(--space-4);
    color: var(--color-muted);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dash-nav [role="tablist"],
.dash-nav-links {
    display: contents;
}

.dash-nav-links a,
.dash-nav-logout {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    flex-shrink: 0;
    min-height: 44px;
    padding: 0 var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: #fff;
    color: var(--color-text);
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}

.dash-nav button span[aria-hidden="true"],
.dash-nav-links a span[aria-hidden="true"] {
    margin-right: 0.35em;
}

@media (min-width: 900px) {
    .dash-nav-heading {
        display: block;
    }

    .dash-nav [role="tablist"],
    .dash-nav-links {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .dash-nav-links a,
    .dash-nav-logout {
        width: 100%;
        border-color: transparent;
        border-radius: var(--radius-sm);
        background: transparent;
    }

    .dash-nav-links a:hover,
    .dash-nav-logout:hover {
        background: var(--color-bg-alt);
    }

    .dash-nav-logout {
        margin-top: var(--space-4);
        border-top: 1px solid var(--color-border);
        border-radius: 0;
        padding-top: var(--space-3);
        color: var(--color-muted);
    }
}

.panel-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-3) var(--space-4);
    margin-bottom: var(--space-5);
}

.panel-head h2 {
    margin-bottom: var(--space-1);
}

.panel-head .section-intro {
    font-size: var(--text-base);
}

.panel-head-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.panel-title {
    margin-bottom: var(--space-4);
}

.sub-heading {
    margin: var(--space-5) 0 var(--space-3);
    font-size: 1.15rem;
}

.updates {
    margin-bottom: var(--space-5);
}

.updates-title {
    margin-bottom: var(--space-3);
    font-size: 1.15rem;
}

.update-list,
.attention-list,
.activity-list,
.application-list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.update,
.attention-list li {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-accent-dark);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

.update-text,
.attention-list li > span {
    flex: 1;
    min-width: 0;
}

.update-good, .attention-good { border-left-color: var(--color-success); }
.update-critical, .attention-critical { border-left-color: var(--color-error); }

.update-icon {
    font-size: 1.25rem;
}

.all-caught-up {
    margin: 0 0 var(--space-5);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--color-success-soft);
    color: var(--color-success);
    font-weight: 600;
}

/* While the dashboard checks (same box, neutral colours) */
.all-caught-up.is-checking {
    background: var(--color-bg-alt);
    color: var(--color-muted);
}

.quick-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-7);
}

.quick-link {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 64px;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    color: var(--color-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.quick-link:hover {
    border-color: var(--color-primary);
}

.quick-link > span:last-child {
    min-width: 0;
}

.quick-link strong,
.quick-count {
    display: block;
    overflow-wrap: anywhere;
}

.quick-link strong {
    font-size: 0.9375rem;
}

.quick-count {
    color: var(--color-muted);
    font-size: var(--text-sm);
}

.quick-icon {
    display: grid;
    flex: none;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius);
    background: var(--color-primary-soft);
    font-size: 1.15rem;
}

.home-block {
    margin-bottom: var(--space-7);
}

.home-block-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.home-block-head h3 {
    margin: 0;
    font-size: 1.2rem;
}

.home-block-head a {
    font-weight: 600;
    white-space: nowrap;
}

@media (min-width: 640px) {
    .card-grid-compact {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
}

.category-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    padding: 0;
    list-style: none;
}

.category-chips a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: 500;
    text-decoration: none;
}

.category-chips a:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.application-card {
    margin: 0;
}

.application-list .panel + .panel {
    margin-top: 0;
}

.application-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
}

.application-head h3 {
    margin: 0;
}

.application-head .hint {
    margin: var(--space-1) 0 0;
}

.team-message {
    margin: var(--space-3) 0;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--color-primary-soft);
}

.team-message p {
    margin: 0;
}

.application-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.address-block {
    margin-bottom: var(--space-2);
    font-style: normal;
    line-height: 1.6;
}

.delivery-note {
    margin-top: var(--space-4);
}

/* ===== Admin: a separate management layout =========================== */
.admin-body {
    background: #f6eff2;
}

.admin-header {
    position: sticky;
    top: 0;
    z-index: 30;
    border-bottom: 1px solid var(--color-border);
    background: #fff;
}

.admin-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    min-height: var(--header-h);
    padding-inline: var(--gutter);
}

.admin-brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.admin-badge {
    padding: 0.2em 0.6em;
    border-radius: var(--radius-pill);
    background: var(--color-text);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.admin-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.admin-user {
    display: none;
    color: var(--color-muted);
    font-size: var(--text-sm);
}

@media (min-width: 760px) {
    .admin-user {
        display: inline;
    }
}

@media (max-width: 479px) {
    .admin-header-actions .btn-ghost {
        display: none;
    }
}

.admin-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: calc(100vh - var(--header-h));
}

.admin-shell > * {
    min-width: 0;
}

.admin-sidebar {
    border-bottom: 1px solid var(--color-border);
    background: #fff;
}

.admin-menu-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: 52px;
    padding: 0 var(--gutter);
    border: 0;
    background: transparent;
    color: var(--color-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.admin-menu-toggle .nav-toggle-bars {
    display: inline-grid;
    gap: 4px;
    width: 18px;
}

.admin-menu-toggle .nav-toggle-bars span {
    display: block;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

/* Phones and tablets: the section list opens below the toggle */
.admin-nav.dash-nav {
    display: none;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0 var(--gutter) var(--space-4);
    overflow: visible;
}

.admin-nav.open {
    display: flex;
}

.admin-nav .dash-nav-heading {
    display: block;
    padding-left: var(--space-3);
}

.admin-nav [role="tablist"] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.admin-nav button[role="tab"] {
    width: 100%;
    border-color: transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    white-space: normal;
    text-align: left;
}

.admin-nav button[role="tab"][aria-selected="true"] {
    border-color: transparent;
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
    box-shadow: inset 3px 0 0 var(--color-accent);
}

.nav-count {
    margin-left: auto;
    padding: 0 0.5em;
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    color: var(--color-text);
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.6;
}

.nav-count:empty {
    display: none;
}

.admin-content {
    padding: var(--space-5) var(--gutter) var(--space-8);
}

@media (min-width: 1024px) {
    .admin-shell {
        grid-template-columns: 260px minmax(0, 1fr);
    }

    .admin-sidebar {
        position: sticky;
        top: var(--header-h);
        align-self: start;
        height: calc(100vh - var(--header-h));
        overflow-y: auto;
        border-right: 1px solid var(--color-border);
        border-bottom: 0;
    }

    .admin-menu-toggle {
        display: none;
    }

    .admin-nav.dash-nav {
        position: static;
        display: flex;
        padding: var(--space-4) var(--space-3) var(--space-6);
    }

    .admin-content {
        padding: var(--space-6) clamp(1.5rem, 1rem + 2vw, 3rem) var(--space-8);
    }
}

.admin-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 640px) {
    .admin-stats {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    }
}

@media (max-width: 639px) {
    .admin-stats .stat {
        padding: var(--space-3) var(--space-4);
    }

    .admin-stats .stat-value {
        font-size: 1.3rem;
    }
}

.stat-link {
    display: block;
    width: 100%;
    color: var(--color-text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.stat-link:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.stat-good { border-top: 3px solid var(--color-success); }
.stat-warning { border-top: 3px solid var(--color-accent); }
.stat-critical { border-top: 3px solid var(--color-error); }

.overview-columns {
    display: grid;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}

.overview-columns .panel + .panel {
    margin-top: 0;
}

@media (min-width: 1100px) {
    .overview-columns {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.attention-list li {
    padding: var(--space-2) var(--space-3);
}

.activity-list li {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--space-3);
    align-items: center;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
}

.activity-list li:last-child {
    border-bottom: 0;
}

.trends > summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    margin-bottom: var(--space-4);
    cursor: pointer;
}

.trends > summary h3 {
    margin: 0;
    font-size: 1.125rem;
}

/* Table tools: search, filter, count; and page buttons */
.table-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin-bottom: var(--space-3);
}

.table-tools input {
    flex: 1 1 240px;
    min-height: 44px;
}

.table-tools select {
    flex: 0 1 auto;
    width: auto;
    min-width: 0;
    max-width: 100%;
    min-height: 44px;
}

.table-count {
    color: var(--color-muted);
    font-size: var(--text-sm);
}

.table-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
    margin-top: var(--space-3);
    font-size: var(--text-sm);
}

.table-pager:empty {
    display: none;
}

th.sortable {
    padding: 0;
}

.th-sort {
    width: 100%;
    min-height: 40px;
    padding: var(--space-3) var(--space-4);
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-align: left;
    text-transform: inherit;
    cursor: pointer;
}

th[aria-sort="ascending"] .th-sort::after { content: " ↑"; }
th[aria-sort="descending"] .th-sort::after { content: " ↓"; }

.audit-changes {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: var(--text-xs);
    white-space: pre-line;
}

/* ===== Special Dogs Support and Investment pages ===================== */
.need-filter {
    margin-bottom: var(--space-5);
}

.need-tags {
    margin: var(--space-3) 0;
}

.dog-gallery {
    min-width: 0;
}

.gallery-thumbs {
    display: flex;
    gap: var(--space-2);
    margin: var(--space-3) 0 0;
    padding: 2px;
    overflow-x: auto;
    list-style: none;
    overscroll-behavior-x: contain;
}

.gallery-thumb {
    display: block;
    width: 72px;
    height: 72px;
    padding: 0;
    overflow: hidden;
    border: 2px solid transparent;
    border-radius: var(--radius);
    background: var(--color-bg-alt);
    cursor: pointer;
}

.gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gallery-thumb[aria-pressed="true"] {
    border-color: var(--color-primary);
}

.help-list {
    display: grid;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    padding: 0;
    list-style: none;
}

.help-list li {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--color-primary-soft);
}

.help-list strong {
    display: block;
}

.help-grid .feature-card h3,
.invest-grid .feature-card h3 {
    font-size: 1.15rem;
}

@media (min-width: 768px) {
    .help-grid,
    .invest-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.hero-cta {
    margin-top: var(--space-5) !important;
}

.invest-points li + li {
    margin-top: var(--space-3);
}

.invest-notice {
    margin-bottom: var(--space-5);
}

.return-panel {
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.return-figure {
    display: grid;
    gap: var(--space-1);
    margin: var(--space-3) 0 var(--space-4);
}

.return-figure strong {
    font-family: var(--font-heading);
    font-size: clamp(2.75rem, 2rem + 3vw, 4rem);
    line-height: 1;
    color: var(--color-primary-dark);
}

.return-label {
    color: var(--color-muted);
    font-weight: 600;
}

.return-panel .notice {
    margin: var(--space-4) 0;
}

.choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: var(--space-1) var(--space-4);
}

.confirm-list {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-4) 0;
    padding: var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--color-bg-alt);
}

.publish-check {
    margin-top: var(--space-2);
}

/* Admin photo manager */
.photo-manager {
    display: grid;
    gap: var(--space-3);
    margin: 0 0 var(--space-5);
    padding: 0;
    list-style: none;
}

.photo-item {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: var(--space-3);
    align-items: start;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.photo-item img {
    width: 96px;
    height: 96px;
    border-radius: var(--radius-sm);
    object-fit: cover;
}

.photo-fields {
    display: grid;
    gap: var(--space-2);
    min-width: 0;
}

.photo-fields .status {
    justify-self: start;
}

.photo-upload {
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.enquiry-notes {
    margin: var(--space-3) 0;
}

.enquiry-note-form {
    margin-top: var(--space-3);
}

.invest-band {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4) var(--space-6);
    padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-primary-soft);
}

.invest-band > div {
    max-width: 44rem;
}

/* Wide screens show the full menu; the word "Cart" only when there's room */
@media (min-width: 1180px) and (max-width: 1439px) {
    .cart-link .cart-label {
        display: none;
    }
}

/* ===== Investment calculator and investor portal ===================== */
.calc-result {
    margin-top: var(--space-4);
    border: 2px solid var(--color-primary);
}

.calc-tier,
.calc-rate {
    margin: 0 0 var(--space-2);
}

.calc-rate .hint {
    display: block;
}

.calc-figures,
.investment-figures {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-4) 0;
}

.calc-figures div,
.investment-figures div {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-1) var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-sm);
    background: var(--color-bg-alt);
}

.calc-figures dt,
.investment-figures dt {
    color: var(--color-muted);
}

.calc-figures dd,
.investment-figures dd {
    margin: 0;
    font-weight: 700;
    text-align: right;
}

.investment-figures dd .hint {
    display: block;
    font-weight: 400;
}

.calc-profit dd {
    color: var(--color-success);
}

.calc-total,
.figure-total {
    border: 1px solid var(--color-primary);
    background: var(--color-primary-soft) !important;
}

.calc-total dd,
.figure-total dd {
    font-size: 1.1rem;
}

.calc-terms {
    margin-top: var(--space-5);
}

.calc-terms h3 {
    margin: var(--space-4) 0 var(--space-1);
    font-size: 1.1rem;
}

.investment-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.investment-summary div {
    display: grid;
    gap: var(--space-1);
}

.investment-summary strong {
    font-family: var(--font-heading);
    font-size: 1.3rem;
}

.investment-list {
    display: grid;
    gap: var(--space-5);
}

.investment-list .panel + .panel {
    margin-top: 0;
}

.investment-card {
    border-width: 2px;
}

.investment-active {
    border-color: var(--color-primary);
}

.investment-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    margin-bottom: var(--space-4);
}

.investment-head h2 {
    margin: 0;
    font-size: 1.2rem;
}

.investment-head .hint {
    margin: var(--space-1) 0 0;
}

.countdown-title {
    margin: 0 0 var(--space-2);
    color: var(--color-muted);
    font-weight: 600;
}

.countdown {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-2);
}

.cd-unit {
    display: grid;
    justify-items: center;
    padding: var(--space-3) var(--space-1);
    border-radius: var(--radius);
    background: var(--color-primary-dark);
    color: #fff;
}

.cd-value {
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 1.2rem + 3vw, 3rem);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.cd-label {
    font-size: var(--text-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.85;
}

.payout-date {
    margin: var(--space-3) 0 var(--space-2);
    font-size: 1.05rem;
}

.term-progress {
    height: 10px;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--color-bg-alt);
}

.term-progress span {
    display: block;
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    transition: width 0.9s linear;
}

.portal-note {
    margin-top: var(--space-6);
}

.plan-status {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.plan-status .stat-value {
    font-size: 1.2rem;
}

.quote-lines {
    margin-top: var(--space-3);
}

.table-wrap td input {
    min-width: 7rem;
    min-height: 40px;
    padding-block: 0.35em;
}

.table-wrap td input[type="checkbox"] {
    min-width: 0;
    width: 22px;
    height: 22px;
}

@media (prefers-reduced-motion: reduce) {
    .term-progress span {
        transition: none;
    }
}

/* ===== Home: Shop Pet Essentials and Meet Our Available Dogs ========= */
.card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: 0 var(--space-5) var(--space-5);
}

.card-actions .btn {
    flex: 1 1 8rem;
    min-height: 44px;
}

.shop-card-price {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin: auto 0 0;
    padding-top: var(--space-3);
}

.shop-card-price .product-price {
    margin: 0;
    padding: 0;
}

.shop-card.is-sold-out .pet-card-img img {
    filter: grayscale(0.6);
    opacity: 0.8;
}

.badge-available {
    background: var(--color-success-soft);
    color: var(--color-success);
}

.btn.is-added {
    border-color: var(--color-success);
    background: var(--color-success);
    color: #fff;
}

@media (min-width: 1080px) {
    .shop-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* Phones: two cards per row on the home page, so the lists stay short */
@media (max-width: 639px) {
    .compact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-3);
    }

    .compact-grid .pet-card-body {
        padding: var(--space-3);
    }

    .compact-grid h3 {
        font-size: 1rem;
    }

    .compact-grid .pet-meta,
    .compact-grid .pet-location {
        font-size: 0.8125rem;
    }

    .compact-grid .shop-card-price {
        flex-direction: column;
        align-items: flex-start;
    }

    .compact-grid .card-actions {
        flex-direction: column;
        padding: 0 var(--space-3) var(--space-3);
    }

    .compact-grid .card-actions .btn {
        flex: none;
        width: 100%;
        padding-inline: 0.5em;
        font-size: 0.875rem;
        white-space: normal;
    }

    .compact-grid .save-btn {
        top: 8px;
        right: 8px;
    }

    /* the stock status is already shown under the price ("Sponsored" must always stay visible) */
    .compact-grid .shop-card .pet-card-img .badge:not(.badge-sponsored) {
        display: none;
    }
}

/* ===== Storefront details ============================================= */
.product-summary {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.pet-personality {
    margin: var(--space-2) 0 0;
    color: var(--color-text);
    font-size: var(--text-sm);
}

/* Hero: a real featured product beside the headline on large screens, in the photo's empty window area (away from the
   pets). Solid and flat like a label, in the hero's own near-black and buttons (2026-10-31: was see-through and blurred) */
.hero-feature {
    display: none;
}

@media (min-width: 1080px) {
    .hero > .container {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: var(--space-6);
    }

    .hero-feature:not([hidden]) {
        display: block;
        flex: none;
        align-self: flex-start;   /* top right, above the kitten's ears */
        margin-top: calc(var(--space-7) * -1);
        width: 272px;
        padding: var(--space-4);
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: var(--radius);
        background: var(--hero-ink);
        color: #fff;
        animation: rise-in 280ms var(--ease-out) 120ms backwards;
    }
}

.hero-feature-label {
    margin: 0 0 var(--space-3);
    color: var(--hero-tabby);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hero-feature-product {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    color: #fff;
    text-decoration: none;
}

.hero-feature-product img {
    flex: none;
    width: 64px;
    height: 64px;
    border-radius: var(--radius);
    object-fit: cover;
    background: #fff;
}

.hero-feature-product strong {
    display: block;
    line-height: 1.3;
}

.hero-feature-price {
    display: block;
    margin-top: var(--space-1);
    color: var(--color-accent);
    font-weight: 600;
}

.hero-feature-actions {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-3);
}

.hero-feature-actions .btn {
    flex: 1;
}

.next-steps-panel {
    margin-top: var(--space-5);
}

.next-steps-panel .next-steps {
    color: var(--color-text);
}

.quick-help {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
}

.quick-help a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 var(--space-4);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
}

.quick-help a:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Booking: review step and tracking */
.review-layout {
    display: grid;
    gap: var(--space-5);
    align-items: start;
}

@media (min-width: 900px) {
    .review-layout {
        grid-template-columns: minmax(0, 1fr) 360px;
    }
}

.review-layout #confirm-booking {
    margin-top: var(--space-4);
}

.review-layout .panel + .panel {
    margin-top: 0;
}

.review-list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
}

.review-list div {
    display: grid;
    grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
}

.review-list dt {
    color: var(--color-muted);
}

.review-list dd {
    margin: 0;
    font-weight: 500;
    overflow-wrap: anywhere;
}

@media (max-width: 519px) {
    .review-list div {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

.service-fields:empty {
    display: none;
}

.service-fields .field:last-child {
    margin-bottom: 0;
}

.tracking-form {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.tracking-form input {
    min-height: 40px;
}

.tracking-panel {
    border: 2px solid var(--color-primary);
}

.tracking-panel h2 {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* ===== US addresses, maps and guest checkout ======================== */
/* Phones: City, then State and ZIP side by side. Tablets and up: one row. */
.form-grid.address-row {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}

.form-grid.address-row > .field:first-child {
    grid-column: 1 / -1;
}

@media (min-width: 640px) {
    .form-grid.address-row {
        grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1fr);
    }

    .form-grid.address-row > .field:first-child {
        grid-column: auto;
    }
}

/* Address suggestions under the street field */
.address-combo {
    position: relative;
}

.address-suggestions {
    position: absolute;
    z-index: 40;
    top: calc(100% + 4px);
    right: 0;
    left: 0;
    margin: 0;
    padding: var(--space-1) 0;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-md, 0 12px 30px rgba(0, 0, 0, 0.12));
    list-style: none;
}

.address-suggestions [role="option"] {
    padding: 0.65rem 0.95rem;
    cursor: pointer;
    line-height: 1.35;
}

.address-suggestions [role="option"]:hover,
.address-suggestions [aria-selected="true"] {
    background: var(--color-primary-soft);
}

.address-suggestions-credit {
    padding: 0.35rem 0.95rem 0.2rem;
    color: var(--color-muted);
    font-size: var(--text-xs);
}

/* Map with a pin (Leaflet). isolation keeps the map's layers under the site header. */
.map-block {
    margin-bottom: var(--space-4);
}

.map-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.map-head .field-label {
    margin-bottom: 0;
}

.map-picker {
    position: relative;
    z-index: 0;
    isolation: isolate;
    height: 300px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    overflow: hidden;
    background: #efe4e8;
    touch-action: pan-y; /* the page still scrolls past the map on phones */
}

.map-picker-small {
    height: 260px;
    margin-top: var(--space-2);
}

.map-picker .leaflet-control-attribution {
    font-size: var(--text-xs);
}

.area-map-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.area-map-tools #sa-place {
    flex: 1 1 200px;
    min-width: 0;
}

.area-map-tools #sa-radius {
    width: 7rem;
}

.maps-link {
    display: inline-block;
    margin-top: var(--space-1);
    font-size: var(--text-sm);
    font-weight: 600;
}

/* Guest checkout */
.guest-note {
    margin: 0 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius);
    background: var(--color-primary-soft);
    font-size: var(--text-sm);
}

.ship-note {
    margin: 0 0 var(--space-3);
}

/* A form field only spam bots see */
.hp-field {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.guest-panel {
    border: 2px dashed var(--color-primary);
}

.saved-order-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.saved-order-list a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 48px;
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
    text-decoration: none;
}

.saved-order-list a span:last-child {
    margin-left: auto;
}

/* ----- Touch & tap behaviour (phones and tablets) ----- */
/* No double-tap zoom delay on controls, and no grey flash when tapped:
   our own :active and focus styles give the feedback instead. */
a, button, input, select, textarea, label, summary, [role="button"] {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

/* Fields focused by "Please check the form" aren't hidden under the sticky header */
input, select, textarea, [id] {
    scroll-margin-top: calc(var(--header-h) + 24px);
}

/* Sideways-scrolling areas don't drag the whole page or trigger "back" swipes */
.table-wrap, .dash-nav {
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}

/* Small buttons are a full finger's size (44px) on phones, tablets and any touch screen; many were
   already raised one by one, this covers the rest. With a mouse on a wide screen they stay compact (40px). */
@media (max-width: 1179px), (pointer: coarse) {
    .btn-small {
        min-height: 44px;
    }
}

/* The menu and pop-ups scroll on their own, not the page behind them */
.site-nav, .help-dialog {
    overscroll-behavior: contain;
}

html:has(.site-nav.open), html:has(dialog[open]) {
    overflow: hidden;
}

@media (min-width: 1180px) {
    html:has(.site-nav.open) {
        overflow: visible;
    }
}

/* On touch screens, hover effects would "stick" after a tap, so they're
   only used where a real mouse is present. */
@media (hover: none) {
    .pet-card:not(.skeleton):hover,
    .service-card:hover {
        border-color: var(--color-border);
        box-shadow: var(--shadow-sm);
        transform: none;
    }

    .pet-card:hover .pet-card-img img,
    .service-card:hover .service-card-img img {
        transform: none;
    }

    .btn:hover {
        background: var(--color-primary);
        border-color: var(--color-primary);
    }

    .btn-outline:hover {
        background: transparent;
        color: var(--color-primary);
    }

    .btn-ghost:hover {
        background: transparent;
        border-color: transparent;
    }

    .btn-light:hover {
        background: #fff;
        border-color: #fff;
    }

    .btn-accent:hover {
        background: var(--color-accent);
        border-color: var(--color-accent);
        color: var(--color-text);
    }

    .pet-card:active,
    .service-card:active,
    .method-option:active {
        transform: scale(0.99);
    }
}

/* ===== KinPaw brand layer (2026 redesign) ============================
   Section surfaces, discovery cards, services, trust and support, page
   headers with photos, footer and header details. Uses the tokens above. */
.section-white {
    background: var(--color-surface);
}

.section-sage {
    background: var(--color-bg-alt);
}

.section-title {
    max-width: 22ch;
}

/* Header: search and help icons; the phone menu's extra links */
.header-help {
    display: none;
}

.nav-more {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--color-border);
}

.nav-more a {
    font-size: 0.975rem;
    color: var(--color-muted);
}

.site-nav {
    background: var(--color-bg);
}

@media (min-width: 1180px) {
    .header-help {
        display: inline-flex;
    }

    .nav-more {
        display: none;
    }

    .nav-links a[aria-current="page"] {
        background: transparent;
        color: var(--color-primary);
        box-shadow: inset 0 -2px 0 var(--color-accent);
        border-radius: 0;
    }
}

.logo-icon svg {
    fill: var(--color-primary);
}

/* Discovery: three photo cards (side-by-side on phones to keep them short) */
.discover {
    padding-bottom: calc(var(--section-y) * 0.6);
}

.discover-grid {
    display: grid;
    gap: var(--space-4);
}

.discover-card {
    display: grid;
    grid-template-columns: 112px minmax(0, 1fr);
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: inherit;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.25s var(--ease-out, ease), transform 0.25s var(--ease-out, ease);
}

.discover-card:hover {
    color: inherit;
    box-shadow: var(--shadow-lg);
    transform: translateY(-3px);
}

.discover-img {
    overflow: hidden;
    background: var(--color-bg-alt);
}

.discover-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease-out, ease);
}

.discover-card:hover .discover-img img {
    transform: scale(1.04);
}

.discover-card:first-child .discover-img img {
    object-position: center 28%;
}

.discover-body {
    display: flex;
    flex-direction: column;
    padding: var(--space-4);
}

.discover-body h3 {
    margin-bottom: var(--space-1);
    font-size: 1.075rem;
}

.discover-body p {
    margin: 0 0 var(--space-3);
    color: var(--color-muted);
    font-size: 0.9375rem;
    line-height: 1.5;
}

@media (min-width: 900px) {
    .discover-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-5);
    }

    .discover-card {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .discover-img {
        aspect-ratio: 4 / 3;
    }

    .discover-body {
        padding: var(--space-5);
    }

    .discover-body h3 {
        font-size: 1.2rem;
    }
}

/* Shop: square product photos on white */
.shop-card .pet-card-img {
    aspect-ratio: 1 / 1;
    background: #fff;
}

/* Adoption steps next to a photo */
.adopt-steps {
    display: grid;
    gap: var(--space-6);
    align-items: center;
    margin-top: var(--space-8);
    padding-top: var(--space-7);
    border-top: 1px solid var(--color-border);
}

.adopt-steps-img,
.services-split-img,
.trust-split-img,
.page-hero-img {
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--color-bg-alt);
    aspect-ratio: 4 / 3;
}

.adopt-steps-img img,
.services-split-img img,
.trust-split-img img,
.page-hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.services-split-img img {
    object-position: 40% center;
}

.adopt-steps-title {
    margin-bottom: var(--space-4);
    font-size: clamp(1.5rem, 1.2rem + 1vw, 1.9rem);
}

.steps-compact {
    gap: var(--space-4) var(--space-5);
    margin-bottom: var(--space-5);
}

.steps-compact li {
    padding: 0;
    border: 0;
    background: none;
}

.steps-compact li::before {
    width: 32px;
    height: 32px;
    margin-bottom: var(--space-2);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: 0.9375rem;
}

.steps-compact h4 {
    margin-bottom: var(--space-1);
    font-size: 1.1rem;
}

@media (min-width: 640px) {
    .steps-compact {
        grid-template-columns: 1fr 1fr;
    }
}

@media (min-width: 1080px) {
    .steps-compact {
        grid-template-columns: 1fr 1fr;
    }
}

/* Services: a photo and a list with real starting prices */
.services-split,
.trust-split {
    display: grid;
    gap: var(--space-6);
    align-items: center;
}

.service-list {
    margin: var(--space-5) 0 var(--space-5);
    padding: 0;
    list-style: none;
    border-top: 1px solid rgba(84, 45, 70, 0.14);
}

.service-row {
    display: grid;
    grid-template-columns: 64px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-2);
    border-bottom: 1px solid rgba(84, 45, 70, 0.14);
    color: inherit;
    text-decoration: none;
    transition: background 0.2s;
}

.service-row:hover {
    background: rgba(255, 255, 255, 0.6);
    color: inherit;
}

.service-row img {
    width: 64px;
    height: 48px;
    border-radius: var(--radius-sm);
    object-fit: cover;
}

.service-row-text {
    display: grid;
    gap: 0.1rem;
}

.service-row-text strong {
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
}

.service-row-text span {
    color: var(--color-muted);
    font-size: var(--text-sm);
    line-height: 1.45;
}

.service-row-price {
    color: var(--color-text);
    font-size: var(--text-sm);
    font-weight: 600;
    white-space: nowrap;
}

.service-row-arrow {
    display: none;
    color: var(--color-primary);
    transition: transform 0.2s;
}

.service-row:hover .service-row-arrow {
    transform: translateX(3px);
}

@media (min-width: 560px) {
    .service-row {
        grid-template-columns: 88px minmax(0, 1fr) auto auto;
        gap: var(--space-4);
    }

    .service-row img {
        width: 88px;
        height: 64px;
    }

    .service-row-arrow {
        display: inline;
    }
}

/* Trust and support */
.trust-split .checklist {
    margin-top: var(--space-5);
}

.support-strip {
    display: grid;
    gap: var(--space-4);
    margin: var(--space-8) 0 0;
    padding: 0;
    list-style: none;
}

.support-strip li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.support-strip h3 {
    margin-bottom: var(--space-2);
    font-size: 1.075rem;
}

.support-strip p {
    flex: 1;
    margin: 0 0 var(--space-4);
    color: var(--color-muted);
}

@media (min-width: 900px) {
    .adopt-steps,
    .services-split,
    .trust-split {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--space-8);
    }

    .support-strip {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* The label above a page title keeps its own size and colour, with the short caramel line the home page's label has */
.page-hero .eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
    color: var(--color-accent-dark);
    font-size: var(--text-xs);
}

.page-hero .eyebrow::before {
    content: "";
    flex: none;
    width: 1.5rem;
    height: 2px;
    border-radius: 2px;
    background: #b08d67;   /* the hero's tabby caramel (--hero-tabby-strong only exists inside .hero) */
}

/* Inside pages' headers: clean white, like the home page's sections under the hero (2026-10-31: was a pink wash
   with two soft glows, which looked like a template and didn't match the black, white and pink home page). */
.page-hero {
    background: #fff;
}

/* Page headers with a photo (shop, adopt, services, about) */
.page-hero-split .container {
    display: grid;
    gap: var(--space-5);
    align-items: center;
}

.page-hero-img {
    aspect-ratio: 16 / 9;
}

/* Shop, adoption and services on phones and tablets: the photo is shown whole-looking at 16:9 (the owner asked,
   2026-10-29: on 2026-10-28 it had been hidden on phones and cut to a thin 16:5 strip on tablets, which cropped too much).
   16:9 keeps it short enough that the list still starts on the first phone screen. Desktop keeps 4:3. */
@media (max-width: 899px) {
    body:is([data-page="shop"], [data-page="adopt"], [data-page="services"]) .page-hero-img {
        aspect-ratio: 16 / 9;
    }
}

@media (min-width: 900px) {
    .page-hero-split .container {
        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
        gap: var(--space-7);
    }

    /* The photo floats on the lit band, like the shop card on the home page's photo */
    .page-hero-img {
        box-shadow: var(--shadow-lg);
    }

    .page-hero-img {
        aspect-ratio: 4 / 3;
    }
}

/* Footer */
.footer-brand .btn {
    margin-top: var(--space-4);
}

.footer-grid a.btn {
    display: inline-flex;
    min-height: 40px;   /* not the 36px of the footer's text links */
    color: #fff;
}

@media (max-width: 1179px), (pointer: coarse) {
    .footer-grid a.btn {
        min-height: 44px;   /* touch size, like every small button (see "Touch & tap behaviour") */
    }
}

.footer-grid a.btn:hover {
    color: var(--color-primary);
}

.site-footer .logo-light .logo-icon svg {
    fill: var(--color-accent);
}

@media (min-width: 900px) {
    .footer-grid {
        grid-template-columns: 1.4fr repeat(3, 1fr);
    }
}

/* Main buttons on forest-green bands are light, so they stand out */
.cta-band .btn-accent,
.cta-band .btn:not(.btn-outline-light):not(.btn-cta),
.account-hero .btn-accent {
    background: #fff;
    border-color: #fff;
    color: var(--color-primary);
}

.cta-band .btn-accent:hover,
.cta-band .btn:not(.btn-outline-light):not(.btn-cta):hover,
.account-hero .btn-accent:hover {
    background: var(--color-bg);
    border-color: var(--color-bg);
    color: var(--color-primary-dark);
}

/* Note above the photo credits */

/* ===== Menu drawer (phones and tablets, below 1180px) ==================
   Slides in from the right over a dimmed page. On wide screens the same
   links are the inline header menu (section 6), so drawer-only parts hide. */
.drawer-head,
.drawer-label,
.drawer-foot,
.nav-backdrop,
.account-chip {
    display: none;
}

@media (max-width: 1179px) {
    /* A blurred header would trap the fixed drawer inside it, so it's solid here */
    .site-header {
        background: var(--color-bg);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .site-nav,
    .site-nav.open {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: auto;
        z-index: 60;
        display: flex;
        flex-direction: column;
        width: min(360px, 88vw);
        max-height: none;
        padding: 0 var(--space-4) var(--space-5);
        overflow-y: auto;
        overscroll-behavior: contain;
        border: 0;
        border-left: 1px solid var(--color-border);
        background: var(--color-bg);
        box-shadow: -18px 0 48px rgba(37, 41, 35, 0.16);
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 0.32s var(--ease-out, ease), visibility 0s linear 0.32s;
    }

    .site-nav.open {
        transform: none;
        visibility: visible;
        transition: transform 0.32s var(--ease-out, ease), visibility 0s;
    }

    .nav-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 55;
        background: rgba(52, 27, 43, 0.42);
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.3s var(--ease-out, ease);
    }

    .nav-backdrop.open {
        opacity: 1;
        pointer-events: auto;
    }

    .drawer-head {
        position: sticky;
        top: 0;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: var(--header-h);
        margin: 0 calc(-1 * var(--space-4)) var(--space-3);
        padding: 0 var(--space-3) 0 var(--space-4);
        border-bottom: 1px solid var(--color-border);
        background: var(--color-bg);
    }

    .drawer-head .logo {
        margin-right: 0;
    }

    .drawer-close {
        width: var(--tap);
    }

    .drawer-close svg {
        width: 22px;
        height: 22px;
    }

    /* Account: buttons side by side, or who's signed in */
    .account-links {
        order: 0;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2);
        margin: 0 0 var(--space-2);
        padding: var(--space-3);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        background: var(--color-surface);
    }

    .account-links .btn {
        width: 100%;
        min-height: 44px;
    }

    .account-chip {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        gap: var(--space-3);
        margin: 0 0 var(--space-1);
    }

    .account-avatar {
        display: inline-flex;
        flex-shrink: 0;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: var(--color-primary);
        color: #fff;
        font-family: var(--font-heading);
        font-weight: 600;
    }

    .account-who {
        display: grid;
        min-width: 0;
        line-height: 1.3;
    }

    .account-who span {
        overflow: hidden;
        color: var(--color-muted);
        font-size: var(--text-sm);
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .account-links a:not(.btn) {
        justify-content: center;
        min-height: 44px;
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        font-size: 0.9375rem;
        font-weight: 600;
    }

    .account-links #logout-button {
        grid-column: 1 / -1;
        min-height: 40px;
        color: var(--color-muted);
        font-size: 0.9375rem;
    }

    .drawer-label {
        display: block;
        margin: var(--space-4) var(--space-2) var(--space-1);
        color: var(--color-subtle);
        font-size: var(--text-xs);
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }

    .nav-links {
        gap: 2px;
    }

    .nav-more {
        margin: 0;
        padding: 0;
        border: 0;
    }

    .nav-links a,
    .nav-more a {
        position: relative;
        gap: var(--space-3);
        min-height: 46px;
        padding: 0 var(--space-3);
        border-radius: var(--radius-sm);
        color: var(--color-text);
        font-size: 1rem;
        font-weight: 500;
    }

    .nav-icon {
        display: inline-flex;
        color: var(--color-primary);
    }

    .nav-icon svg {
        width: 21px;
        height: 21px;
    }

    .nav-links a:hover {
        background: var(--color-primary-soft);
    }

    /* The page you're on: sage pill with a burnt-orange marker */
    .nav-links a[aria-current="page"] {
        background: var(--color-primary-soft);
        color: var(--color-primary);
        font-weight: 600;
    }

    .nav-links a[aria-current="page"]::before {
        content: "";
        position: absolute;
        left: 0;
        top: 10px;
        bottom: 10px;
        width: 3px;
        border-radius: 3px;
        background: var(--color-accent);
    }

    .drawer-foot {
        display: flex;
        gap: var(--space-2);
        margin: auto 0 0;
        padding: var(--space-5) var(--space-2) 0;
        color: var(--color-subtle);
        font-size: var(--text-sm);
    }

    .drawer-foot a {
        display: inline-flex;
        align-items: center;
        min-height: 36px;
        color: var(--color-muted);
    }

    /* Links appear one after another as the drawer opens */
    .site-nav.open .nav-links li {
        animation: drawer-item 0.36s var(--ease-out, ease) backwards;
    }

    .site-nav.open .nav-links li:nth-child(2) { animation-delay: 0.03s; }
    .site-nav.open .nav-links li:nth-child(3) { animation-delay: 0.06s; }
    .site-nav.open .nav-links li:nth-child(4) { animation-delay: 0.09s; }
    .site-nav.open .nav-links li:nth-child(5) { animation-delay: 0.12s; }
}

@keyframes drawer-item {
    from { opacity: 0; transform: translateX(14px); }
}

@media (min-width: 1180px) {
    .nav-icon {
        display: none;
    }

    .site-nav {
        background: none;
    }

    /* Inline header: menu in the middle, account links on the right */
    .site-nav .nav-links { order: 1; }
    .site-nav .account-links { order: 2; }
}

@media (prefers-reduced-motion: reduce) {
    .site-nav,
    .site-nav.open,
    .nav-backdrop {
        transition: none;
    }

    .site-nav.open .nav-links li {
        animation: none;
    }
}

/* ===== Customer dashboard (My KinPaw), 2026 redesign ==================
   Scoped to the customer pages (.account-*), so the admin sidebar, which
   shares .dash-nav, is unchanged. */

/* Hero: forest green with a faint paw, the welcome text rising in */
.account-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding-block: clamp(2rem, 1.4rem + 2.6vw, 3.25rem) clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
}

.account-hero::after {
    content: "";
    position: absolute;
    z-index: -1;
    right: -40px;
    bottom: -70px;
    width: 320px;
    height: 320px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='%23ffffff' fill-opacity='0.06'%3E%3Cellipse cx='32' cy='42' rx='14' ry='12'/%3E%3Cellipse cx='14' cy='26' rx='6' ry='8'/%3E%3Cellipse cx='25' cy='16' rx='6' ry='8'/%3E%3Cellipse cx='39' cy='16' rx='6' ry='8'/%3E%3Cellipse cx='50' cy='26' rx='6' ry='8'/%3E%3C/svg%3E") center / contain no-repeat;
    transform: rotate(-14deg);
    pointer-events: none;
}

.account-hero-inner {
    position: relative;
    flex-wrap: nowrap;
    align-items: flex-start;
    margin-bottom: var(--space-5);
}

.account-hero-text {
    min-width: 0;
    max-width: 40rem;
}

.account-hero h1 {
    font-size: var(--text-h1);   /* the same size as every page title (was up to 48px) */
    line-height: 1.08;
    overflow-wrap: anywhere;
}

.account-hero-lead {
    color: rgba(255, 255, 255, 0.84);
}

/* Welcome text rises in, one line after another */
.account-hero .eyebrow,
.account-hero h1,
.account-hero-lead {
    animation: rise-in 280ms var(--ease-out) backwards;
}

.account-hero h1 { animation-delay: 70ms; }
.account-hero-lead { animation-delay: 140ms; }

/* "My account" and (when the wallet is on) the wallet balance, beside the welcome text: they never push the page down */
.account-hero-actions {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-2);
}

.account-wallet strong {
    font-weight: 700;
}

@media (max-width: 639px) {
    .account-hero-actions .account-wallet {
        width: auto;
        padding: 0 var(--space-3) 0 var(--space-1);
    }

    .account-wallet-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }
}

/* "My account": a glass pill; just the icon on phones */
.account-shortcut {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 0 var(--space-4) 0 var(--space-2);
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s;
}

.account-shortcut:hover {
    border-color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}

.account-shortcut-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    color: var(--color-primary);
}

.account-shortcut-icon svg {
    width: 18px;
    height: 18px;
}

@media (max-width: 639px) {
    .account-shortcut {
        width: 44px;
        padding: 0;
        justify-content: center;
    }

    .account-shortcut-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* Tabs. Phones and tablets: a tidy grid of icon tiles that always fits (no
   sideways strip that cuts items off). The Discover links and Log out are in
   the site menu there. Laptops: the sidebar, with every group. */
.account-nav .dash-icon {
    display: inline-flex;
    flex: none;
}

.account-nav .dash-icon svg {
    width: 20px;
    height: 20px;
}

.account-nav .tab-short {
    display: none;
}

@media (max-width: 899px) {
    .account-nav {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--space-2);
        overflow: visible;
        margin: 0;
        padding: 0;
    }

    .account-nav .dash-nav-discover,
    .account-nav .dash-nav-logout {
        display: none;
    }

    .account-nav button[role="tab"] {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 0.3rem;
        min-width: 0;
        min-height: 66px;
        padding: var(--space-2) 0.25rem;
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        background: var(--color-surface);
        color: var(--color-text);
        font-size: 0.8125rem;
        font-weight: 600;
        line-height: 1.2;
        white-space: normal;
        text-align: center;
        transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.15s;
    }

    .account-nav button[role="tab"]:active {
        transform: scale(0.97);
    }

    .account-nav button[role="tab"] .dash-icon {
        color: var(--color-primary);
    }

    .account-nav button[aria-selected="true"] {
        border-color: var(--color-primary);
        background: var(--color-primary);
        color: #fff;
    }

    .account-nav button[aria-selected="true"] .dash-icon {
        color: #fff;
    }

    .account-nav .tab-long {
        display: none;
    }

    .account-nav .tab-short {
        display: inline;
    }

    .account-nav .tab-label {
        max-width: 100%;
        overflow-wrap: anywhere;
    }

    /* "Work with us" / "My jobs": the tenth tile, full width under the 3 x 3 grid */
    .account-nav button[data-tab="worker"] {
        grid-column: 1 / -1;
        flex-direction: row;
        gap: var(--space-2);
        min-height: 48px;
    }

    /* "My investments" (only for investors): a full-width link under the tiles */
    .account-nav #nav-investments:not([hidden]) {
        display: block;
        grid-column: 1 / -1;
    }

    .account-nav #nav-investments a {
        display: flex;
        justify-content: center;
        gap: var(--space-2);
        width: 100%;
    }
}

/* Phones: four shorter tiles per row, with Jobs and My investments as ordinary tiles, so the menu takes less of the
   first screen and "Needs your attention" comes up sooner (inspected 2026-10-28: the menu was 322 px tall).
   Every item stays visible; the text keeps its size. */
@media (max-width: 639px) {
    .account-nav {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .account-nav button[role="tab"] {
        min-height: 56px;
        gap: 0.2rem;
    }

    .account-nav button[data-tab="worker"] {
        grid-column: auto;
        flex-direction: column;
        gap: 0.2rem;
        min-height: 56px;
    }

    /* "My investments" (investors only): a double-width tile beside Profile and Jobs, like the other tiles */
    .account-nav #nav-investments:not([hidden]) {
        grid-column: span 2;
    }

    .account-nav #nav-investments a {
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        height: 100%;
        min-height: 56px;
        padding: var(--space-2);
        border: 1px solid var(--color-border);
        border-radius: var(--radius);
        background: var(--color-surface);
        color: var(--color-text);
        font-size: 0.8125rem;
        font-weight: 600;
        line-height: 1.2;
        text-align: center;
    }
}

/* Tablets: two even rows of five tiles */
@media (min-width: 640px) and (max-width: 899px) {
    .account-nav {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }

    .account-nav button[data-tab="worker"] {
        grid-column: auto;
        flex-direction: column;
        gap: 0.3rem;
        min-height: 66px;
    }
}

/* Laptop sidebar: icons, a clear selected state, compact groups */
@media (min-width: 900px) {
    .account-nav button[role="tab"],
    .account-nav .dash-nav-links a,
    .account-nav .dash-nav-logout {
        gap: var(--space-3);
        min-height: 42px;
        padding: 0 var(--space-3);
        font-size: 0.9375rem;
    }

    .account-nav button[role="tab"] {
        position: relative;
        display: flex;
        align-items: center;
    }

    .account-nav .dash-icon {
        color: var(--color-primary);
    }

    .account-nav button[aria-selected="true"] {
        color: var(--color-primary);
        font-weight: 600;
    }

    .account-nav button[aria-selected="true"]::before {
        content: "";
        position: absolute;
        left: 0;
        top: 9px;
        bottom: 9px;
        width: 3px;
        border-radius: 3px;
        background: var(--color-accent);
    }

    .account-nav .dash-nav-heading {
        margin-top: var(--space-5);
        padding-left: var(--space-3);
        color: var(--color-subtle);
    }

    .account-nav .dash-nav-logout {
        display: flex;
        align-items: center;
    }
}

/* Activity summary: tiles that always form balanced rows (five or six of them) */
.summary-title {
    margin: 0 0 var(--space-3);
    font-size: 1.15rem;
}

.quick-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* An odd last tile fills its row */
.quick-link:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}

@media (min-width: 640px) {
    .quick-links {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }

    .quick-link,
    .quick-link:last-child:nth-child(odd) {
        grid-column: span 2;
    }

    /* Five tiles: three, then two wider ones */
    .quick-link:nth-child(4):nth-last-child(2),
    .quick-link:nth-child(5):last-child {
        grid-column: span 3;
    }
}

@media (min-width: 1240px) {
    /* One row, however many tiles */
    .quick-links {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: minmax(0, 1fr);
    }

    .quick-link,
    .quick-link:last-child:nth-child(odd),
    .quick-link:nth-child(4):nth-last-child(2),
    .quick-link:nth-child(5):last-child {
        grid-column: auto;
    }
}

.quick-link {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    align-items: start;
    gap: var(--space-3);
    min-height: 0;
    padding: var(--space-4);
    transition: border-color 0.2s, box-shadow 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.quick-link:hover {
    border-color: var(--color-border);
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.quick-link:focus-visible {
    border-color: var(--color-primary);
}

.quick-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--radius);
    color: var(--color-primary);
}

.quick-icon svg {
    width: 22px;
    height: 22px;
}

.quick-text {
    grid-column: 1 / -1;
    min-width: 0;
}

.quick-link strong {
    overflow-wrap: normal;
    font-family: var(--font-heading);
    font-size: 1.05rem;
    font-weight: 600;
}

.quick-count {
    margin-top: 2px;
    overflow-wrap: normal;
}

@media (hover: none) {
    .quick-link:hover {
        box-shadow: var(--shadow-sm);
        transform: none;
    }
}

/* "Needs your attention": line icons in a soft circle */
.update-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.update-icon svg {
    width: 19px;
    height: 19px;
}

.update {
    transition: box-shadow 0.2s;
}

.update:hover {
    box-shadow: var(--shadow);
}

@media (max-width: 639px) {
    .update {
        flex-wrap: wrap;
    }

    .update .btn {
        margin-left: auto;
    }
}

/* Reference numbers like KP-T1001 never split across lines */
.update-text strong {
    white-space: nowrap;
}

/* Phones: shorter heading and compact summary tiles */
@media (max-width: 639px) {
    .account-hero h1 {
        font-size: clamp(1.75rem, 1.3rem + 2.4vw, 2.1rem);
    }

    .quick-link {
        gap: var(--space-2);
        padding: var(--space-3);
    }

    .quick-icon {
        width: 36px;
        height: 36px;
        border-radius: var(--radius-sm);
    }

    .quick-link strong {
        font-size: 1rem;
    }

    .update {
        padding: var(--space-3);
        font-size: 0.9375rem;
    }
}

/* Listings on the dashboard home. Phones: swipe sideways through the cards
   (inside the block, so the page itself never scrolls sideways). */
.home-block-head h3 {
    font-size: clamp(1.2rem, 1rem + 0.8vw, 1.4rem);
}

@media (min-width: 640px) {
    .account-layout .card-grid-compact {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 639px) {
    .account-layout .card-grid-compact {
        grid-auto-flow: column;
        grid-auto-columns: 74%;
        grid-template-columns: none;
        gap: var(--space-3);
        overflow-x: auto;
        margin-inline: calc(-1 * var(--gutter));
        padding: 2px var(--gutter) var(--space-3);
        scroll-snap-type: x mandatory;
        scroll-padding-inline: var(--gutter);
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

    .account-layout .card-grid-compact::-webkit-scrollbar {
        display: none;
    }

    .account-layout .card-grid-compact > * {
        scroll-snap-align: start;
    }
}

/* ===== Customer dashboard: blush and berry welcome header ==============
   Only the dashboard's welcome header (.account-hero-pink) uses these colours. The rest of the
   site keeps the forest/ivory palette. Every text colour here passes AA
   contrast on the blush background. */
.account-hero-pink {
    --blush: #fbeff1;
    --blush-deep: #f4d6de;
    --rose: #e3a1b2;
    --rose-deep: #b8486a;     /* large text and accents only */
    --berry: #7b2142;
    --berry-dark: #4a1028;
    background: #f8e3e8;   /* flat blush (2026-10-31: was a three-colour gradient with drifting glows) */
    color: var(--berry-dark);
}

/* The paw watermark, now in berry */
.account-hero-pink::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='%237b2142' fill-opacity='0.07'%3E%3Cellipse cx='32' cy='42' rx='14' ry='12'/%3E%3Cellipse cx='14' cy='26' rx='6' ry='8'/%3E%3Cellipse cx='25' cy='16' rx='6' ry='8'/%3E%3Cellipse cx='39' cy='16' rx='6' ry='8'/%3E%3Cellipse cx='50' cy='26' rx='6' ry='8'/%3E%3C/svg%3E");
}

.account-hero-pink .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--berry);
}

.account-hero-pink .eyebrow::before {
    content: "";
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--rose-deep);
}

.account-hero-pink h1 {
    color: var(--berry-dark);
    letter-spacing: -0.02em;
}

/* The customer's first name, in rose */
.account-hero-pink .dash-name {
    color: var(--rose-deep);
}

.account-hero-pink .account-hero-lead {
    color: #6b3a4b;
}

/* Entrance: the heading first, the rest straight after. Quick like an app (2026-10-31: was up to 1.1 s, now
   everything is in place within ~0.4 s) */
.account-hero-pink .eyebrow {
    animation: hero-slide 260ms var(--ease-out) backwards;
}

.account-hero-pink h1 {
    animation: hero-focus 320ms var(--ease-out) 30ms backwards;
}

.account-hero-pink .account-hero-lead {
    animation: rise-in 280ms var(--ease-out) 80ms backwards;
}

.account-hero-pink .account-shortcut {
    animation: hero-pop 260ms var(--ease-out) 140ms backwards;
}

@keyframes hero-slide {
    from { opacity: 0; transform: translateX(-16px); }
}

@keyframes hero-focus {
    from { opacity: 0; transform: translateY(10px) scale(0.99); }
}

@keyframes hero-lift {
    from { opacity: 0; transform: translateY(22px) scale(0.98); }
}

@keyframes hero-pop {
    from { opacity: 0; transform: scale(0.85); }
}

/* "My account": white pill with berry text */
.account-hero-pink .account-shortcut {
    border-color: rgba(123, 33, 66, 0.18);
    background: rgba(255, 255, 255, 0.72);
    color: var(--berry);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(6px);
    transition: background 0.2s, border-color 0.2s, box-shadow 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.account-hero-pink .account-shortcut:hover {
    border-color: rgba(123, 33, 66, 0.35);
    background: #fff;
    color: var(--berry);
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}

.account-hero-pink .account-shortcut-icon {
    background: var(--berry);
    color: #fff;
}



/* ----- Layout fixes across the dashboard ----- */

/* Buttons in an account header keep their size (e.g. on My investments) */
.account-hero-inner > .btn {
    flex: none;
}


/* Section headers: title and intro on the left, buttons neatly on the right */
.account-layout .panel-head {
    align-items: flex-start;
    gap: var(--space-3) var(--space-5);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.account-layout .panel-head h2 {
    font-size: clamp(1.45rem, 1.2rem + 1vw, 1.85rem);
    line-height: 1.15;
}

.account-layout .panel-head .section-intro {
    max-width: 36rem;
    margin: 0;
    color: var(--color-muted);
    line-height: 1.5;
}

.account-layout .panel-head > .btn,
/* The buttons keep their size but the row wraps when there are many (My pets: five, longer in Spanish/French) */
.account-layout .panel-head-actions {
    flex: 0 1 auto;
    min-width: 0;
}

@media (max-width: 639px) {
    .account-layout .panel-head {
        flex-direction: column;
    }
}

/* Bookings, orders and reviews: each row is a labelled card (no cut-off tables) */
.account-layout .record-table {
    overflow: visible;
    border: 0;
    background: none;
    box-shadow: none;
}

.account-layout .record-table table,
.account-layout .record-table tbody,
.account-layout .record-table tr,
.account-layout .record-table td {
    display: block;
    width: 100%;
}

.account-layout .record-table table {
    min-width: 0;
    border: 0;
}

.account-layout .record-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.account-layout .record-table tr {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr));
    gap: var(--space-3) var(--space-4);
    margin-bottom: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}

.account-layout .record-table tr:hover {
    box-shadow: var(--shadow);
}

.account-layout .record-table td {
    padding: 0;
    border: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    white-space: normal;
}

.account-layout .record-table td::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    color: var(--color-subtle);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* The first cell (booking/order number or topic) is the card's title */
.account-layout .record-table td:first-child {
    grid-column: 1 / -1;
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--color-border);
    font-family: var(--font-heading);
    font-size: 1.1rem;
    font-weight: 600;
}

.account-layout .record-table td:first-child::before {
    display: none;
}

/* Star rating: five equal choices that never wrap unevenly */
.choice-row:has(.rating-choice) {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: var(--space-2);
    max-width: 26rem;
}

.rating-choice {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.rating-choice input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.rating-choice:hover {
    border-color: var(--color-primary);
}

.rating-choice:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: #fff;
}

.rating-choice:has(input:focus-visible) {
    box-shadow: var(--focus-ring);
}

/* Listing previews: cards keep a comfortable width. When the content area is
   narrow (phones, or a small laptop with the sidebar), they become a swipeable
   row instead of squeezed columns. */
.account-layout .home-block {
    container-type: inline-size;
}

@media (min-width: 640px) {
    .account-layout .card-grid-compact {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@container (max-width: 699px) {
    .account-layout .card-grid-compact {
        grid-auto-flow: column;
        grid-auto-columns: minmax(220px, 72%);
        grid-template-columns: none;
        gap: var(--space-3);
        overflow-x: auto;
        padding: 2px 2px var(--space-3);
        scroll-snap-type: x mandatory;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

    .account-layout .card-grid-compact::-webkit-scrollbar {
        display: none;
    }

    .account-layout .card-grid-compact > * {
        scroll-snap-align: start;
    }
}

/* Cards in the previews: titles and text line up, equal heights */
.account-layout .card-grid-compact .pet-card-body,
.account-layout .card-grid-compact .service-card-body {
    padding: var(--space-4);
}

.account-layout .card-grid-compact h3 {
    font-size: 1.15rem;
    line-height: 1.25;
}

.account-layout .card-grid-compact .service-card-body p,
.account-layout .card-grid-compact .pet-meta {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    font-size: 0.9375rem;
    line-height: 1.5;
}

/* Saved, applications and support: same card look as the rest */
.account-layout .application-card,
.account-layout .empty-state {
    border-radius: var(--radius);
}

.account-layout .empty-state {
    padding: var(--space-6) var(--space-4);
}

.account-layout .empty-state h3 {
    font-size: 1.075rem;
}

/* ===== Admin: line icons in the sidebar and activity list ============= */
.admin-nav .dash-icon {
    display: inline-flex;
    flex: none;
    margin-right: var(--space-2);
    color: var(--color-primary);
    vertical-align: -4px;
}

.admin-nav .dash-icon svg {
    width: 19px;
    height: 19px;
}

.admin-nav button[aria-selected="true"] .dash-icon {
    color: var(--color-primary-dark);
}

.activity-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.activity-icon svg {
    width: 18px;
    height: 18px;
}

/* ===== 18. Motion ==================================================== */
/* Quick, restrained and always optional (see prefers-reduced-motion below).
   Only opacity and transform are animated, so scrolling stays smooth.
   Animations use fill-mode "backwards": once finished, an element goes back to
   its normal styles, so hover effects and later changes work as expected. */
:root {
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);  /* settles smoothly, no bounce */
    --motion-fast: 180ms;
    --motion: 280ms;
    --motion-reveal: 220ms;
}

@keyframes page-in {
    from { opacity: 0; }
}

@keyframes rise-in {
    from { opacity: 0; transform: translateY(14px); }
}

@keyframes drop-in {
    from { opacity: 0; transform: translateY(-6px); }
}

@keyframes dialog-in {
    from { opacity: 0; transform: translateY(12px) scale(0.98); }
}

@keyframes pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

@keyframes bump {
    0% { transform: scale(1); }
    35% { transform: scale(1.4); }
    100% { transform: scale(1); }
}

/* Hero: the headline, text and search arrive in quick succession */
.hero-content > * {
    animation: rise-in 280ms var(--ease-out) backwards;
}

.hero-content > :nth-child(2) { animation-delay: 30ms; }
.hero-content > :nth-child(3) { animation-delay: 60ms; }
.hero-content > :nth-child(4) { animation-delay: 90ms; }
.hero-content > :nth-child(5) { animation-delay: 120ms; }
.hero-content > :nth-child(6) { animation-delay: 150ms; }

/* Phones and tablets (2026-10-31, "scrolling feels heavy"): buttons that scroll with the page are solid instead of
   blurring what's behind them, which made the phone's graphics chip redraw on every frame of a scroll. */
@media (hover: none), (max-width: 1179px) {
    .account-hero-pink .account-shortcut,
    .hub-search-btn {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .account-hero-pink .account-shortcut {
        background: rgba(255, 255, 255, 0.92);
    }
}

/* Scroll reveal (set up by script.js). Hidden only while waiting to appear. */
.js-reveal .reveal:not(.is-visible) {
    opacity: 0;
}

/* A fade only (no movement): cheaper to draw while scrolling */
.js-reveal .reveal.is-visible {
    opacity: 1;
    transition: opacity var(--motion-reveal) var(--ease-out) var(--reveal-delay, 0ms);
}

/* Feedback and opening/closing */
.save-btn[aria-pressed="true"] { animation: pop 0.35s var(--ease-out); }
.cart-count.bump { animation: bump 0.4s var(--ease-out); }
.notice { animation: rise-in var(--motion) var(--ease-out) backwards; }
.dash-panel:not([hidden]) { animation: page-in var(--motion) var(--ease-out) backwards; }
.site-nav.open { animation: drop-in var(--motion-fast) var(--ease-out) backwards; }
.admin-nav.open { animation: drop-in var(--motion-fast) var(--ease-out) backwards; }
.auth-panel { animation: rise-in 260ms var(--ease-out) backwards; }
.help-dialog[open] { animation: dialog-in var(--motion) var(--ease-out) backwards; }
.help-dialog[open]::backdrop { animation: page-in var(--motion) ease-out backwards; }
details[open] > :not(summary) { animation: rise-in var(--motion) var(--ease-out) backwards; }
.calc-result,
#help-done > *,
#invest-done > * { animation: rise-in var(--motion) var(--ease-out) backwards; }

/* Card images settle gently on hover (devices with a mouse only, see the touch section) */
.pet-card-img img,
.service-card-img img {
    transition: transform 450ms var(--ease-out);
}

/* Moving between KinPaw pages: the browser keeps the current page on screen until the next one is ready,
   then cross-fades (no white flash). Normal links, back/forward, bookmarks and refresh are unchanged; browsers
   without cross-page view transitions just navigate as before. The header keeps its place during the fade. */
@view-transition {
    navigation: auto;
}

::view-transition-group(root) {
    animation-duration: var(--motion-fast);
    animation-timing-function: var(--ease-out);
}

.site-header,
.auth-header,
.admin-header {
    view-transition-name: site-header;
}

/* Changing language or currency (js/i18n.js marks it "kp-switch"): a quick cross-fade, with the content kept in the
   same place on the screen (i18n.js, pageAnchor), so only the words seem to change. Nothing is stretched between sizes. */
html:active-view-transition-type(kp-switch)::view-transition-group(*) {
    animation-duration: 0s;
}

html:active-view-transition-type(kp-switch)::view-transition-old(*) {
    animation: kp-lang-out 160ms ease both;
}

html:active-view-transition-type(kp-switch)::view-transition-new(*) {
    animation: kp-lang-in 160ms ease both;
}

@keyframes kp-lang-out {
    to { opacity: 0; }
}

@keyframes kp-lang-in {
    from { opacity: 0; }
}

/* With the cross-fade, the log-in/sign-up box no longer re-plays its entrance on every switch */
@supports (view-transition-name: none) {
    .auth-panel {
        animation: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .js-reveal .reveal:not(.is-visible) {
        opacity: 1;
        transform: none;
    }
}

/* =========================================================
   Workers (migration 009): application form, job cards,
   admin review and assignment
   ========================================================= */
.plain-fieldset {
    border: 0;
    margin: 0 0 var(--space-5);
    padding: 0;
    min-width: 0;
}

.plain-fieldset > legend {
    margin-bottom: var(--space-3);
    padding: 0;
}

.worker-form .hint:first-of-type {
    margin-bottom: var(--space-5);
}

.worker-agree {
    margin: var(--space-2) 0 var(--space-5);
}

.weekday-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.weekday {
    position: relative;
}

.weekday input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.weekday span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    min-height: 44px;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text);
    font-weight: 600;
    cursor: pointer;
}

.weekday input:checked + span {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.weekday input:focus-visible + span {
    outline: 3px solid var(--color-accent-dark);
    outline-offset: 2px;
}

.worker-status .worker-status-badge {
    margin-bottom: var(--space-2);
}

.worker-summary {
    margin: var(--space-4) 0;
}

.worker-hello {
    margin-bottom: var(--space-4);
}

.job-card {
    margin-bottom: var(--space-4);
}

.job-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.job-head h3 {
    margin: 0;
}

.job-when {
    margin: 0 0 var(--space-1);
    color: var(--color-accent-dark);
    font-weight: 700;
    font-size: var(--text-sm);
}

.job-card .review-list {
    margin-bottom: var(--space-4);
}

.job-card dd {
    overflow-wrap: anywhere;
}

/* Admin */
.review-form {
    margin-top: var(--space-3);
}

.review-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.doc-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-2) 0;
    padding: 0;
    list-style: none;
}

.worker-services {
    display: grid;
    gap: var(--space-1);
    min-width: 180px;
}

.worker-services .check {
    margin: 0;
    font-size: var(--text-sm);
}

.worker-notes textarea {
    width: 100%;
    min-width: 180px;
}

select[data-assign] {
    min-width: 160px;
    max-width: 100%;
}

/* =========================================================
   Roles and two-step login (migration 010)
   ========================================================= */
.role-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.role-chip {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: var(--radius-pill);
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
    font-size: var(--text-xs);
    font-weight: 700;
}

.role-chip.role-suspended,
.role-chip.role-pending {
    background: var(--color-bg-alt);
    color: var(--color-muted);
}

.role-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-top: var(--space-2);
}

.code-form input[name="code"] {
    max-width: 12rem;
    font-size: 1.25rem;
    letter-spacing: 0.3em;
    font-variant-numeric: tabular-nums;
}

.two-step-on {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.two-step-steps {
    display: grid;
    gap: var(--space-3);
    margin: 0 0 var(--space-4);
    padding-left: 1.25rem;
}

.two-step-qr {
    display: block;
    margin-top: var(--space-2);
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: #fff;
}

.two-step-secret {
    overflow-wrap: anywhere;
    font-size: 0.95rem;
}

.admin-code-panel {
    max-width: 32rem;
}

/* =========================================================
   Marketplace (migration 011): sellers, storefronts, reviews
   ========================================================= */
.sold-by {
    margin: 0.15rem 0 0.35rem;
    color: var(--color-muted);
    font-size: var(--text-sm);
}

.sold-by-large {
    font-size: 1rem;
}

.sold-by a {
    color: var(--color-accent-dark);
    font-weight: 600;
}

.card-rating {
    margin: 0.35rem 0 0;
    font-size: var(--text-sm);
    color: var(--color-muted);
}

.card-rating:empty {
    display: none;
}

.stars {
    color: var(--color-accent-dark);
    letter-spacing: 0.08em;
}

/* Storefront */
.store-identity {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
}

.store-identity h1 {
    margin: 0.2rem 0;
}

.store-logo {
    width: 88px;
    height: 88px;
    flex: 0 0 auto;
    border-radius: var(--radius);
    object-fit: cover;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
}

.store-logo-empty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: #fff;
    font-family: var(--font-heading);
    font-size: 2.25rem;
}

.store-tagline {
    margin: 0;
    font-size: 1.125rem;
}

.store-about {
    max-width: 60ch;
    margin-top: var(--space-4);
    white-space: pre-line;
}

.seller-disclosure {
    margin-top: var(--space-5);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

.seller-disclosure summary {
    cursor: pointer;
    font-weight: 600;
    min-height: 32px;
}

/* Product reviews */
.product-review-list {
    display: grid;
    gap: var(--space-4);
    margin-bottom: var(--space-4);
}

.product-review {
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.review-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.seller-reply {
    margin-top: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-left: 3px solid var(--color-accent);
    background: var(--color-bg-alt);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.purchase-list {
    display: grid;
    gap: var(--space-3);
    margin: var(--space-3) 0 var(--space-5);
    padding: 0;
    list-style: none;
}

.purchase-item details summary {
    display: inline-flex;
    list-style: none;
}

.purchase-item details summary::-webkit-details-marker {
    display: none;
}

.purchase-review-form {
    margin-top: var(--space-4);
}

/* "Sell on KinPaw": the dashboard card (the homepage strip is .sell-strip) */
.sell-card {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-6);
}

.sell-card > div {
    flex: 1 1 260px;
    min-width: 0;
}

.sell-card .panel-title,
.sell-card .hint {
    margin-bottom: 0;
}

/* Admin: the platform books */
.books-panel {
    margin-bottom: var(--space-6);
}

/* Number columns (books, partner reports) */
.num {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.books-ok .status {
    margin-right: var(--space-2);
}

.books-recent summary {
    cursor: pointer;
    font-weight: 600;
    margin: var(--space-3) 0;
}

/* Owner page: the two forms side by side on wide screens */
.owner-forms {
    display: grid;
    gap: var(--space-5);
    margin: var(--space-5) 0;
}

.owner-forms .panel {
    margin: 0;
}

@media (min-width: 900px) {
    .owner-forms {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.security-setting {
    margin-bottom: var(--space-4);
    padding-bottom: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.admin-role-field {
    max-width: 360px;
    margin: var(--space-3) 0 0;
}

/* A button that looks like a link (e.g. opening a private document) */
.btn-link {
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-primary);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* Legal Center and the owner's permission lists */
.entity-list {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-3);
}

.entity-card {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.entity-card-head {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    align-items: baseline;
    justify-content: space-between;
}

.entity-card-head h3 {
    margin: 0;
    font-size: var(--text-lg);
}

.entity-card p {
    margin: var(--space-1) 0;
    overflow-wrap: anywhere;
}

.legal-inline-form {
    margin-top: var(--space-4);
}

.permission-group {
    padding: var(--space-3) 0;
    border-top: 1px solid var(--color-border);
}

.permission-group summary {
    cursor: pointer;
}

.permission-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: var(--space-2) var(--space-4);
    margin-top: var(--space-3);
}

/* My pets (My KinPaw): pet chooser, profile header, records and routines */
.pet-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-4);
}

.pet-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: var(--space-1) var(--space-4) var(--space-1) var(--space-1);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.pet-chip[aria-selected="true"] {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
}

.pet-chip-photo,
.pet-hero-photo {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 50%;
    background: var(--color-bg-alt);
}

.pet-chip-photo {
    width: 32px;
    height: 32px;
}

.pet-hero {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    align-items: flex-start;
}

.pet-hero-photo {
    width: 120px;
    height: 120px;
    font-size: 3rem;
}

.pet-chip-photo img,
.pet-hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pet-hero-text {
    flex: 1 1 260px;
    min-width: 0;
}

.pet-hero-text h3 {
    margin: 0 0 var(--space-1);
    font-size: var(--text-h3);
}

.pet-records,
.pets-due .plain-list {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-3) 0 0;
    padding: 0;
    list-style: none;
}

.pet-record {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    align-items: flex-start;
    justify-content: space-between;
    padding: var(--space-3) 0;
    border-top: 1px solid var(--color-border);
}

.pet-record > div:first-child {
    flex: 1 1 240px;
    min-width: 0;
}

.pet-record p {
    margin: 0 0 var(--space-1);
    overflow-wrap: anywhere;
}

.pet-record.is-paused {
    opacity: 0.7;
}

.pet-record-actions {
    display: flex;
    gap: var(--space-1);
}

.pet-add summary {
    display: inline-flex;
    list-style: none;
}

.pet-add summary::-webkit-details-marker {
    display: none;
}

/* ---------- My pets: Today, checklist, calendar, reminders (js/pet-care.js, js/notifications.js) ---------- */
/* Space for Today and the calendar is kept while they load, so the pet tabs below don't jump */
#care-today:empty { min-height: 260px; }
#care-calendar:empty { min-height: 220px; }

.care-today-head {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-5);
    align-items: flex-end;
    justify-content: space-between;
}

.care-today-head h3 {
    margin: 0;
    font-size: var(--text-h3);
}

.care-clocks {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1) var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-sm);
}

.care-clocks strong {
    font-variant-numeric: tabular-nums;
}

.care-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-2);
    margin: var(--space-4) 0;
}

.care-stats p {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--color-bg-alt);
    font-size: var(--text-sm);
    color: var(--color-muted);
}

.care-stats strong {
    display: block;
    font-size: var(--text-h3);
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
}

.care-stats .is-alert {
    background: var(--color-error-soft);
}

.care-stats .is-alert strong {
    color: var(--color-error);
}

.care-next {
    display: grid;
    gap: var(--space-1);
    margin-bottom: var(--space-3);
    padding: var(--space-3);
    border-left: 3px solid var(--color-forest);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

.care-next p {
    margin: 0;
    overflow-wrap: anywhere;
}

.care-next .hint {
    display: inline-block;
    min-width: 8.5em;
}

.care-subtitle {
    margin: var(--space-4) 0 var(--space-2);
    font-size: var(--text-base);
}

.care-list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.care-item {
    display: grid;
    grid-template-columns: 5.5em 1fr;
    gap: var(--space-1) var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.care-item p {
    margin: 0 0 var(--space-1);
    overflow-wrap: anywhere;
}

.care-item-time {
    font-weight: 600;
    color: var(--color-primary);
    font-variant-numeric: tabular-nums;
}

.care-item-actions {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
}

.care-item.is-given,
.care-item.is-done {
    background: var(--color-success-soft);
    border-color: transparent;
}

.care-item.is-overdue {
    border-left: 3px solid var(--color-error);
}

.care-instructions {
    white-space: pre-line;
}

.care-note summary {
    cursor: pointer;
    font-size: var(--text-sm);
    color: var(--color-muted);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.care-note input {
    width: min(100%, 22rem);
}

.care-calendar-head {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-3);
}

.care-calendar-head .panel-title {
    margin: 0;
}

.care-calendar-nav {
    display: flex;
    gap: var(--space-1);
}

.segmented {
    display: inline-flex;
    padding: 3px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
}

.segmented button {
    min-height: 40px;
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-muted);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
}

.segmented button[aria-pressed="true"] {
    background: var(--color-primary);
    color: #fff;
}

.care-calendar-body[aria-busy="true"] {
    min-height: 160px;
}

.care-week {
    display: grid;
    gap: var(--space-3);
}

.care-week-day h4 {
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-muted);
}

.care-week-day.is-today h4 {
    color: var(--color-primary);
}

.care-lines {
    margin: 0;
    padding: 0;
    list-style: none;
}

.care-line {
    display: grid;
    grid-template-columns: 5.5em 1fr auto;
    gap: var(--space-2);
    align-items: center;
    padding: var(--space-2) 0;
    border-top: 1px solid var(--color-border);
    font-size: var(--text-sm);
}

.care-line:first-child {
    border-top: 0;
}

.care-line-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.care-overdue {
    margin-top: var(--space-4);
}

.care-overdue summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
    color: var(--color-error);
}

.care-month {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
}

.care-month-name {
    margin: 0;
    text-align: center;
    font-size: var(--text-xs);
    color: var(--color-muted);
}

.care-month-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 48px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
}

.care-month-day.is-today {
    border-color: var(--color-primary);
    font-weight: 700;
}

.care-month-day[aria-pressed="true"] {
    background: var(--color-primary-soft);
}

.care-dot {
    min-width: 1.5em;
    padding: 0 4px;
    border-radius: var(--radius-pill);
    background: var(--color-accent-light);
    color: var(--color-primary-dark);
    font-size: var(--text-xs);
    line-height: 1.4;
}

.care-month-day.is-alert .care-dot {
    background: var(--color-error-soft);
    color: var(--color-error);
}

.care-month-detail {
    margin-top: var(--space-4);
}

.care-month-detail h4 {
    margin: 0 0 var(--space-2);
}

.care-times {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-2) 0;
}

.care-time {
    display: flex;
    gap: var(--space-2);
    align-items: center;
}

.care-time input {
    width: auto;
    min-width: 9rem;
}

.care-cancelled summary,
.care-notify-settings summary,
.care-notify-devices summary {
    min-height: 44px;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-weight: 600;
    color: var(--color-primary);
}

.care-notify-device {
    margin-bottom: var(--space-3);
}

.care-notify-list-head {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
    justify-content: space-between;
}

.care-notify-list {
    display: grid;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.care-notify-list li {
    padding: var(--space-3) 0 var(--space-3) var(--space-3);
    border-top: 1px solid var(--color-border);
    border-left: 3px solid transparent;
}

.care-notify-list li.is-unread {
    border-left-color: var(--color-accent);
}

.care-notify-list p {
    margin: 0 0 var(--space-1);
    overflow-wrap: anywhere;
}

/* Weight chart (js/pet-health.js): one 2px line, 8px dots with a surface ring, recessive grid */
.weight-now {
    margin: 0 0 var(--space-2);
    font-weight: 600;
    color: var(--color-primary);
}

.weight-chart {
    position: relative;
    margin: 0 0 var(--space-4);
}

.weight-chart svg {
    display: block;
    width: 100%;
    height: auto;
    touch-action: pan-y;
}

.wc-grid {
    stroke: var(--color-border);
    stroke-width: 1;
}

.wc-axis {
    fill: var(--color-muted);
    font-size: 12px;
}

.wc-line {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.wc-dot {
    fill: var(--color-primary);
    stroke: var(--color-surface);
    stroke-width: 2;
}

.wc-dot.is-active {
    r: 6;
}

.wc-cross {
    stroke: var(--color-border-strong);
    stroke-dasharray: 3 3;
}

.wc-tip {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--color-dark);
    color: #fff;
    font-size: var(--text-xs);
    white-space: nowrap;
    pointer-events: none;
}

.weight-form .form-grid {
    grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
}

.health-timeline {
    margin: 0;
    padding: 0;
    list-style: none;
}

.health-timeline li {
    display: grid;
    grid-template-columns: 1.5em 7.5em 1fr;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-top: 1px solid var(--color-border);
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
}

.health-timeline li:first-child {
    border-top: 0;
}

.ht-day {
    color: var(--color-muted);
}

@media (max-width: 639px) {
    .health-timeline li { grid-template-columns: 1.5em 1fr; }
    .health-timeline li > span:last-child { grid-column: 2; }
}

.care-toast {
    position: fixed;
    left: 50%;
    bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
    z-index: 80;
    max-width: min(92vw, 28rem);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-pill);
    background: var(--color-dark);
    color: #fff;
    font-size: var(--text-sm);
    box-shadow: var(--shadow-lg);
    transform: translate(-50%, 160%);
    opacity: 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
    pointer-events: none;
}

.care-toast.is-shown {
    transform: translate(-50%, 0);
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .care-toast { transition: none; }
}

/* Phones: above the bottom tab bar */
@media (max-width: 639px) {
    .care-toast { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
    .care-item { grid-template-columns: 4.5em 1fr; }
}

@media (min-width: 900px) {
    .care-week {
        grid-template-columns: repeat(7, minmax(0, 1fr));
        gap: var(--space-2);
    }
    .care-week .care-line {
        grid-template-columns: 1fr;
        gap: 2px;
        align-items: start;
    }
    .care-week .care-line .status {
        justify-self: start;
    }
    .care-month-day {
        min-height: 64px;
    }
}

.pet-add .pet-form {
    margin-top: var(--space-4);
}

#pet-editor {
    margin-bottom: var(--space-5);
}

/* Seller Center */
.seller-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}

.seller-tabs button {
    min-height: 44px;
    padding: 0 var(--space-4);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text);
    font-weight: 600;
    cursor: pointer;
}

.seller-tabs button[aria-selected="true"] {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.seller-terms ul {
    margin: 0;
    padding-left: 1.25rem;
    display: grid;
    gap: var(--space-2);
}

.seller-lines {
    margin: 0 0 var(--space-3);
    padding-left: 1.1rem;
    display: grid;
    gap: var(--space-1);
}

.ship-form,
.reply-form {
    margin-top: var(--space-3);
}

.row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    align-items: center;
}

/* Admin: product approvals and seller rows */
.approval-card {
    margin-bottom: var(--space-4);
}

.approval-grid {
    display: grid;
    grid-template-columns: 120px minmax(0, 1fr);
    gap: var(--space-4);
    margin-bottom: var(--space-3);
}

.approval-grid img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

@media (max-width: 520px) {
    .approval-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

.seller-admin-form {
    display: grid;
    gap: var(--space-1);
    min-width: 200px;
}

/* =========================================================
   Workers' hours and time off (migration 013)
   ========================================================= */
.hours-grid {
    display: grid;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.hours-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.hours-row .check {
    min-width: 8.5rem;
    min-height: 44px;   /* seven days in a row are tapped on phones: full touch size */
    align-items: center;
    margin: 0;
}

.hours-row input[type="time"] {
    width: auto;
    min-width: 7.5rem;
}

.time-off-list {
    display: grid;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
    padding-left: 1.1rem;
}

/* =========================================================
   Sponsored products (migration 014)
   ========================================================= */
.badge-sponsored {
    left: var(--space-3);
    right: auto;
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border-strong);
    font-weight: 700;
}

.sponsored-row {
    margin-bottom: var(--space-6);
}

.sponsored-row .sponsored-heading {
    margin-bottom: var(--space-3);
    font-weight: 700;
}

/* KinPaw's own products (not a third-party seller's): a soft blush glow and a branded "Sold by KinPaw" */
.shop-card.is-kinpaw {
    border-color: var(--color-accent-light);
    box-shadow: 0 0 0 1px var(--color-accent-light), 0 10px 28px rgba(217, 143, 163, 0.22);
}

.shop-card.is-kinpaw:hover {
    box-shadow: 0 0 0 1px var(--color-accent), 0 14px 34px rgba(217, 143, 163, 0.32);
}

.sold-by-kinpaw {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
}

/* The KinPaw seal: KinPaw's own products ("KinPaw Select") and pets ("KinPaw Adoption") */
.kp-seal {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    width: fit-content;
    padding: 2px 10px 2px 7px;
    border-radius: var(--radius-pill);
    background: linear-gradient(135deg, var(--color-forest) 0%, #24584a 100%);
    color: #fbf7f3;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.02em;
    line-height: 1.6;
    white-space: nowrap;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 2px 6px -2px rgba(24, 63, 53, 0.45);
}

.kp-seal-paw {
    width: 13px;
    height: 13px;
    flex: none;
    color: var(--color-accent-light);
}

.sold-by-large .kp-seal {
    font-size: var(--text-sm);
}

.sold-by-large.sold-by-kinpaw > span:last-child,
.pet-listed-by > span:last-child {
    color: var(--color-muted);
}

.pet-lister-kinpaw {
    overflow: visible;
}

.campaign-card {
    margin-bottom: var(--space-4);
}

.campaign-stats {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 9rem), 1fr));
    gap: var(--space-3);
    margin: var(--space-3) 0;
}

.campaign-stats dt {
    color: var(--color-muted);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.campaign-stats dd {
    margin: 0;
    font-weight: 700;
}

/* ===== Language switch (js/i18n.js languagePickerHTML) ===== */
/* Segmented: English | Español | Français side by side (footer, phone menu) */
.lang-segment {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    max-width: 100%;
    padding: 2px 2px 2px var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-muted);
}

.lang-segment > svg {
    flex: none;
    width: 18px;
    height: 18px;
    margin-right: 2px;
}

.lang-segment button {
    min-height: 44px;  /* a comfortable tap size */
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.lang-segment button:hover {
    color: var(--color-primary);
}

.lang-segment button[aria-pressed="true"] {
    background: var(--color-primary);
    color: #fff;
}

.lang-segment button:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 1px;
}

/* On the dark footer */
.site-footer .lang-segment {
    border-color: rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.06);
    color: #ead9e1;
}

.site-footer .lang-segment button:hover {
    color: #fff;
}

.site-footer .lang-segment button[aria-pressed="true"] {
    background: #fff;
    color: var(--color-primary);
}


/* Prices in US$ / CA$ / MX$ (script.js currencyPickerHTML): same pills as the language switch, no globe */
.currency-segment {
    padding-left: 2px;
}

.footer-prefs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.drawer-lang .currency-segment {
    margin-top: var(--space-2);
}

/* "≈ CA$34.99" next to US prices */
.price-approx {
    color: var(--color-muted);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 500;
    white-space: nowrap;
}

.drawer-lang {
    display: none;
}

@media (max-width: 1179px) {
    .drawer-lang {
        display: block;
        padding: var(--space-3) var(--space-2) 0;
        color: var(--color-muted);
    }
}

/* ===== Profile pictures (migration 028): My KinPaw -> Profile, and the header ===== */
.profile-photo-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
}

.profile-photo-row .btn {
    margin-top: var(--space-2);
}

.profile-photo-preview {
    display: grid;
    width: 96px;
    height: 96px;
    flex-shrink: 0;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: var(--color-accent-light);
    color: var(--color-primary-dark);
    font-family: var(--font-heading);
    font-size: 2.2rem;
    font-weight: 700;
}

.profile-photo-preview img,
.account-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.account-avatar.has-photo {
    overflow: hidden;
    background: var(--color-primary-soft);
}

/* ===== KinPaw assistant chat for buyers (js/assistant.js, migration 029) ===== */
.assistant-toggle {
    position: fixed;
    right: max(var(--space-4), env(safe-area-inset-right));
    bottom: max(var(--space-4), env(safe-area-inset-bottom));
    z-index: 40;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: var(--space-2) var(--space-4);
    border: 0;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    color: #fff;
    font: inherit;
    font-weight: 600;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
}

.assistant-toggle:hover {
    background: var(--color-primary-dark);
}

.assistant-toggle:focus-visible,
.assistant-close:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

.assistant-toggle[aria-expanded="true"] {
    display: none;
}

/* The logo's paw in white (the paw emoji was dark on the berry button and hard to see) */
.assistant-toggle-icon {
    display: inline-flex;
}

.assistant-toggle-icon svg {
    width: 1.15em;
    height: 1.15em;
    fill: currentColor;
}

/* Phones: a small round paw button, so it doesn't cover text or buttons (inspected 2026-10-28: the 165px pill sat on
   top of content); its words stay for screen readers. The page gets room at the end so nothing is left under it. */
@media (max-width: 639px) {
    .assistant-toggle {
        justify-content: center;
        width: 48px;
        height: 48px;
        min-height: 48px;
        padding: 0;
        font-size: 1.3rem;
        right: max(10px, env(safe-area-inset-right));
    }

    .assistant-toggle-label {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }

    body:has(.assistant-toggle) {
        padding-bottom: calc(72px + env(safe-area-inset-bottom));
    }

    body.has-tab-bar:has(.assistant-toggle) {
        padding-bottom: calc(var(--tab-bar-h) + 72px + env(safe-area-inset-bottom));
    }

    /* Scrolling down to read: the button steps aside (js/assistant.js), and is back on the way up */
    .assistant-toggle {
        transition: transform 220ms var(--ease-out), opacity 180ms ease;
    }

    .assistant-toggle.is-tucked {
        opacity: 0;
        pointer-events: none;
        transform: translateY(24px) scale(0.85);
    }
}

.assistant-panel {
    position: fixed;
    right: max(var(--space-4), env(safe-area-inset-right));
    bottom: max(var(--space-4), env(safe-area-inset-bottom));
    z-index: 41;
    display: flex;
    flex-direction: column;
    width: min(380px, calc(100vw - 2 * var(--space-4)));
    height: min(560px, calc(100vh - 6rem));
    height: min(560px, calc(100dvh - 6rem));
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.assistant-panel[hidden] {
    display: none;
}

.assistant-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    background: var(--color-primary);
    color: #fff;
}

.assistant-head h2 {
    flex: 1;
    margin: 0;
    color: inherit;
    font-size: 1rem;
}

.assistant-head .assistant-new {
    min-height: 44px;
    padding: 0 var(--space-2);
    color: #fff;
    font-size: var(--text-sm);
    text-decoration: underline;
}

.assistant-close {
    width: 44px;
    height: 44px;
    margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-2)) calc(-1 * var(--space-2)) 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1.1rem;
    cursor: pointer;
}

.assistant-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--color-bg);
}

.assistant-msg {
    max-width: 88%;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius);
    font-size: var(--text-sm);
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.assistant-msg.is-assistant {
    align-self: flex-start;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-bottom-left-radius: var(--space-1);
}

.assistant-msg.is-user {
    align-self: flex-end;
    background: var(--color-primary-soft);
    border-bottom-right-radius: var(--space-1);
}

.assistant-msg.is-typing {
    color: var(--color-muted);
    letter-spacing: 2px;
}

.assistant-cards {
    display: grid;
    gap: var(--space-2);
}

.assistant-card {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    text-decoration: none;
    font-size: var(--text-sm);
}

.assistant-card:hover {
    border-color: var(--color-accent);
}

.assistant-card img,
.assistant-card-img {
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: var(--radius-sm);
    object-fit: cover;
    background: var(--color-bg-alt);
}

.assistant-card-img {
    display: grid;
    place-items: center;
}

.assistant-card-text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.assistant-login {
    display: grid;
    gap: var(--space-2);
    justify-items: start;
    font-size: var(--text-sm);
}

.assistant-form {
    padding: var(--space-3) var(--space-4) var(--space-3);
    border-top: 1px solid var(--color-border);
}

.assistant-form[hidden] {
    display: none;
}

.assistant-row {
    display: flex;
    align-items: flex-end;
    gap: var(--space-2);
}

.assistant-input {
    flex: 1;
    min-height: 44px;
    max-height: 120px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: var(--text-input);
    resize: vertical;
}

.assistant-row .btn {
    min-height: 44px;
}

.assistant-error {
    margin: 0 0 var(--space-2);
    color: var(--color-error);
    font-size: var(--text-sm);
}

.assistant-error:empty {
    display: none;
}

.assistant-note {
    margin: var(--space-2) 0 0;
    color: var(--color-muted);
    font-size: var(--text-xs);
}

.assistant-left {
    display: block;
    font-weight: 600;
}

.ai-meter {
    width: 10rem;
    vertical-align: middle;
}

@media (max-width: 480px) {
    .assistant-panel {
        right: var(--space-2);
        left: var(--space-2);
        bottom: var(--space-2);
        width: auto;
        height: calc(100dvh - 5rem);
    }
}

@media print {
    .assistant {
        display: none;
    }
}

/* ===== Continue with Google / Apple / Microsoft / Facebook (log in and create account) ===== */
.social-signin {
    margin-bottom: var(--space-4);
}

.social-buttons {
    display: grid;
    gap: var(--space-2);
}

.social-button {
    min-height: 44px;
}

.social-terms {
    margin: var(--space-2) 0 0;
    text-align: center;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-4) 0 0;
    color: var(--color-muted);
    font-size: var(--text-sm);
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    border-top: 1px solid var(--color-border);
}

/* ===== Worker pay (js/worker-pay.js, js/admin-worker-pay.js, migration 030) ===== */
tr.is-reversed td {
    color: var(--color-muted);
}

.bank-form {
    margin-top: var(--space-3);
}

/* ===== Phone navigation: a tab bar at the bottom and Back on deeper pages (script.js renderTabBar, backButtonHTML) ===== */
.header-back,
.tab-bar {
    display: none;
}

@media (max-width: 899px) {
    :root {
        --tab-bar-h: 48px;  /* the bar's height, also kept free at the bottom of the page */
    }

    .header-back {
        display: inline-flex;
        margin-left: calc(-1 * var(--space-2));
    }

    .tab-bar {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 30;
        padding-bottom: env(safe-area-inset-bottom);
        border-top: 1px solid var(--color-border);
        background: rgba(255, 255, 255, 0.97);
        box-shadow: 0 -6px 20px rgba(59, 34, 51, 0.08);
    }

    .tab-bar ul {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .tab-bar a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1px;
        min-height: var(--tab-bar-h);
        color: var(--color-muted);
        font-size: var(--text-xs);
        font-weight: 600;
        text-decoration: none;
    }

    .tab-bar svg {
        width: 20px;
        height: 20px;
    }

    .tab-bar a[aria-current="page"] {
        color: var(--color-primary);
    }

    .tab-bar a[aria-current="page"] svg {
        stroke-width: 2.2;
    }

    .tab-bar a:focus-visible {
        outline: 3px solid var(--color-accent);
        outline-offset: -3px;
    }

    /* Room for the bar, so the end of the page and the footer aren't hidden behind it */
    body.has-tab-bar {
        padding-bottom: calc(var(--tab-bar-h) + env(safe-area-inset-bottom));
    }

    body.has-tab-bar .assistant-toggle {
        bottom: calc(var(--tab-bar-h) + var(--space-3) + env(safe-area-inset-bottom));
    }

    /* While typing, the keyboard needs the space */
    body:has(:is(input:not([type="checkbox"]):not([type="radio"]), textarea):focus) .tab-bar {
        display: none;
    }
}

@media (max-width: 480px) {
    /* Room for Back in the header: Help is in the menu */
    .site-header:has(.header-back) .header-help {
        display: none;
    }
}

@media print {
    .tab-bar {
        display: none;
    }
}

/* ===== Footer: compact, like an app. Phones and tablets: tap a group to open it; computers: columns ===== */
.footer-group > summary {
    list-style: none;
}

.footer-group > summary::-webkit-details-marker {
    display: none;
}

@media (max-width: 899px) {
    .site-footer {
        padding: var(--space-5) 0 var(--space-4);
        font-size: var(--text-sm);
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* Logo and "Contact support" on one line */
    .footer-brand {
        display: flex;
        align-items: center;
        gap: var(--space-3);
        padding-bottom: var(--space-4);
    }

    .footer-tagline {
        display: none;
    }

    .footer-brand .btn {
        margin: 0 0 0 auto;
    }

    .footer-group {
        border-top: 1px solid rgba(255, 255, 255, 0.12);
    }

    .footer-group > summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        min-height: 48px;
        cursor: pointer;
    }

    .footer-group > summary::after {
        content: "+";
        color: #ead9e1;
        font-size: 1.25rem;
        line-height: 1;
        transition: transform 0.2s ease;
    }

    .footer-group[open] > summary::after {
        transform: rotate(45deg);
    }

    .footer-group > summary:focus-visible {
        outline: 3px solid var(--color-accent);
        outline-offset: 2px;
    }

    .footer-group .footer-heading {
        margin: 0;
    }

    .footer-links {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: var(--space-4);
        padding-bottom: var(--space-3);
    }

    /* Language, then © and the legal links, in one small block */
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
        margin-top: 0;
        padding-top: var(--space-4);
        font-size: var(--text-xs);
    }

    .footer-bottom .lang-segment {
        order: -1;
        margin-bottom: var(--space-2);
    }

    .footer-legal {
        gap: 0 var(--space-4);
    }

    .footer-legal a {
        min-height: 32px;
    }
}

@media (min-width: 900px) {
    .site-footer {
        padding: var(--space-7) 0 var(--space-4);
    }

    .footer-group > summary {
        pointer-events: none;
    }

    .footer-bottom {
        margin-top: var(--space-5);
    }
}

/* Phones and tablets: My KinPaw's background glow and paw stay still (they kept redrawing while scrolling) */
@media (max-width: 899px) {
    .account-hero-pink::before,
    .account-hero-pink::after {
        animation: none;
    }
}

/* My KinPaw: "Needs your attention" holds its own margins, so the height js/updates-space.js keeps is the full height */
#my-updates {
    display: flow-root;
}

/* Computers: "Needs your attention" comes just below the row of activity tiles, so when it arrives it doesn't push
   the tiles down (layout shift, measured on a first visit). Phones keep it first. */
@media (min-width: 900px) {
    #panel-home:not([hidden]) {
        display: flex;
        flex-direction: column;
    }

    #panel-home > * {
        order: 4;
    }

    #panel-home > .summary-title {
        order: 1;
    }

    #panel-home > #quick-links {
        order: 2;
    }

    #panel-home > #my-updates {
        order: 3;
        margin-top: var(--space-5);
    }
}

/* ===== Owner page: daily checks (js/owner-alerts.js, migration 041) ===== */
.owner-alerts {
    display: grid;
    gap: var(--space-3);
    margin: var(--space-4) 0;
    padding: 0;
    list-style: none;
}

.owner-alert {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-3);
    align-items: start;
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
}

.owner-alert p {
    margin: 0;
}

.owner-alert .hint {
    overflow-wrap: anywhere;
}

@media (max-width: 639px) {
    .owner-alert {
        grid-template-columns: 1fr;
    }
}

/* Store page: room for the store's logo, name and location while they load (measured 2026-10-28: the products jumped
   about 230 px down on phones when they arrived). The description below varies, so it isn't reserved. */
#store-head[aria-busy="true"] {
    min-height: 200px;
}

@media (min-width: 640px) {
    #store-head[aria-busy="true"] {
        min-height: 120px;
    }
}

/* ===== Adoption agreement (agreement.html, migration 046) ===== */
.agreement-container {
    max-width: 760px;
}

.agreement-status {
    margin-bottom: var(--space-4);
}

.agreement-status p {
    margin: 0 0 var(--space-2);
}

.agreement-status > :last-child {
    margin-bottom: 0;
}

.agreement-draft {
    margin: 0 0 var(--space-4);
    font-size: var(--text-sm);
}

.agreement-facts {
    display: grid;
    gap: var(--space-2) var(--space-4);
    margin: 0 0 var(--space-5);
    padding: var(--space-4);
    background: var(--color-bg);
    border-radius: var(--radius);
}

.agreement-facts > div {
    display: grid;
    grid-template-columns: minmax(8rem, 12rem) 1fr;
    gap: var(--space-3);
}

.agreement-facts dt {
    font-weight: 600;
}

.agreement-facts dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.agreement-terms p {
    line-height: 1.6;
    margin: 0 0 var(--space-3);
}

.agreement-version,
.agreement-signature {
    margin-top: var(--space-4);
}

.agreement-sign {
    margin-top: var(--space-5);
    padding-top: var(--space-4);
    border-top: 1px solid var(--color-border);
}

.agreement-preview {
    margin: var(--space-4) 0;
}

.agreement-preview > summary {
    cursor: pointer;
    font-weight: 600;
}

.agreement-actions {
    margin-top: var(--space-4);
}

/* Check-ins after an adoption (migration 047) */
.followups {
    margin-bottom: var(--space-4);
}

.followup-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
}

.followup-answer-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.followup {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.followup-attention {
    border-color: var(--color-accent);
    background: var(--color-warning-soft);
}

.followup h3 {
    margin: 0 0 var(--space-2);
    font-size: var(--text-base);
}

.followup p {
    margin: 0 0 var(--space-2);
}

.followup > :last-child,
.followup form > :last-child {
    margin-bottom: 0;
}

.followup-note {
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.followup-answer fieldset {
    border: 0;
    border-radius: 0;
    margin: 0 0 var(--space-3);
    padding: 0;
}

.followup-answer legend {
    font-weight: 600;
    margin-bottom: var(--space-2);
}

.followup-answer fieldset .check {
    display: inline-flex;
    margin: 0 var(--space-4) var(--space-2) 0;
}

.followup-review-form {
    display: grid;
    gap: var(--space-2);
    margin-top: var(--space-2);
}

.followup-review-form button {
    justify-self: start;
}

@media (max-width: 560px) {
    .agreement-facts > div {
        grid-template-columns: 1fr;
        gap: 0;
    }
}

@media print {
    body[data-page="agreement"] #site-header,
    body[data-page="agreement"] #site-footer,
    body[data-page="agreement"] .agreement-actions,
    body[data-page="agreement"] .agreement-status,
    body[data-page="agreement"] .agreement-sign,
    body[data-page="agreement"] .agreement-hero {
        display: none;
    }
    .agreement-doc {
        box-shadow: none;
        border: 0;
    }
}

/* ===== Disputes (dispute.html, migration 048) ===== */
body[data-page="dispute"] .section .container {
    max-width: 760px;
}

.dispute-head,
.dispute-decide-panel {
    margin-bottom: var(--space-4);
}

.dispute-text {
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.dispute-thread {
    list-style: none;
    margin: 0 0 var(--space-5);
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
}

.dispute-message {
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.dispute-message.dispute-kinpaw {
    background: var(--color-bg-alt);
}

.dispute-message p {
    margin: 0 0 var(--space-2);
}

.dispute-message > :last-child {
    margin-bottom: 0;
}

.dispute-reply {
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-4);
}

.agreement-actions {
    flex-wrap: wrap;
}

/* Orders: "I've received it" (migration 050); disputes item choice */
.received-note {
    color: var(--color-success);
    font-weight: 600;
}

.dispute-items {
    border: 0;
    border-radius: 0;
    margin: 0 0 var(--space-4);
    padding: 0;
}

.dispute-items .check {
    display: flex;
    margin-bottom: var(--space-2);
}

.ready-to-pay {
    margin-bottom: var(--space-4);
}

/* ===== Settings tab: grouped rows, like a phone's settings ===== */
.settings-summary {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
    padding: var(--space-4);
    border-radius: var(--radius);
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
}

.settings-summary > div {
    min-width: 0;
}

.settings-avatar {
    display: grid;
    flex: none;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-family: var(--font-heading);
    font-size: 1.5rem;
}

.settings-name {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--text-h3);
    font-weight: 600;
}

.settings-summary .hint {
    margin: 0;
    overflow-wrap: anywhere;
}

.settings-group-title {
    margin: var(--space-5) 0 var(--space-2);
    padding-left: var(--space-1);
    color: var(--color-muted);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.settings-group {
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.settings-group > * + * {
    border-top: 1px solid var(--color-border);
}

.setting > summary,
.setting-inline,
.setting-link,
.setting-block {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    min-height: 3.5rem;
    padding: var(--space-3) var(--space-4);
}

.setting > summary {
    cursor: pointer;
    list-style: none;
}

.setting > summary::-webkit-details-marker {
    display: none;
}

.setting > summary::after,
.setting-chevron {
    color: var(--color-subtle);
    font-size: 1.4rem;
    line-height: 1;
}

.setting > summary::after {
    content: "›";
    transition: transform 0.2s;
}

/* Label on the left; the current value right next to the arrow, as in phone settings */
.setting > summary {
    justify-content: flex-start;
}

.setting > summary .setting-label {
    margin-right: auto;
}

.setting[open] > summary::after {
    transform: rotate(90deg);
}

.setting > summary:hover,
.setting-link:hover {
    background: var(--color-bg);
}

.setting-label {
    display: block;
    color: var(--color-text);
    font-weight: 600;
}

.setting-value {
    color: var(--color-muted);
    font-size: var(--text-sm);
    overflow-wrap: anywhere;
    text-align: right;
}

.setting-inline > span:first-child,
.setting-link > span:first-child {
    flex: 1 1 14rem;
    min-width: 0;
}

.setting-inline .hint,
.setting-link .hint {
    display: block;
    margin: var(--space-1) 0 0;
}

.setting-link {
    color: inherit;
    text-decoration: none;
}

.setting-form {
    padding: 0 var(--space-4) var(--space-4);
}

.setting-form .field:last-of-type {
    margin-bottom: var(--space-4);
}

.setting-block {
    display: block;
}

.setting-block .profile-photo-row {
    flex-wrap: nowrap;
    align-items: flex-start;
    margin: 0;
}

.setting-block .profile-photo-row > div {
    flex: 1 1 auto;
    min-width: 0;
}

.setting-block .profile-photo-preview {
    width: 64px;
    height: 64px;
    font-size: 1.6rem;
}

.setting-danger .setting-label {
    color: var(--color-error);
}

.settings .lang-segment {
    max-width: 100%;
}

.settings-status {
    min-height: 1.5em;
    margin-top: var(--space-3);
}

/* Admin: the European countries (migration 052), folded away until needed */
.europe-countries {
    margin-top: var(--space-4);
}

.europe-countries > summary {
    cursor: pointer;
    font-weight: 600;
}

.europe-countries .notice {
    margin: var(--space-3) 0;
}

/* Settings rows: a small coloured icon tile at the start, as in phone settings */
.setting-icon {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-sm);
    color: #fff;
}

.setting-icon svg {
    width: 1.15rem;
    height: 1.15rem;
}

.setting-icon.tone-berry { background: var(--color-primary); }
.setting-icon.tone-blush { background: var(--color-accent-dark); }
.setting-icon.tone-forest { background: var(--color-forest); }
.setting-icon.tone-mauve { background: #7c6673; }
.setting-icon.tone-danger { background: var(--color-error); }

.setting > summary,
.setting-inline,
.setting-link {
    gap: var(--space-2) var(--space-3);
}

.setting-with-icon {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.setting-with-icon > div {
    flex: 1 1 auto;
    min-width: 0;
}

.settings-check {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border: 1px solid rgba(24, 63, 53, 0.25);
    border-radius: var(--radius);
    background: #eef4f1;
}

.settings-check > span:nth-child(2) {
    flex: 1 1 14rem;
    min-width: 0;
}

.settings-check .hint {
    display: block;
    margin: 0;
}

.settings-check[hidden] {
    display: none;
}

/* My KinPaw home: "Coming up" (next booking, latest order on its way) */
.coming-up {
    margin-top: var(--space-4);
}

.coming-up .update-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
}

.coming-up .update-text {
    flex: 1 1 14rem;
    min-width: 0;
}

/* ===== My KinPaw hub (js/hub.js): welcome guide, your pets, spending, quick search ===== */
.hub-bar {
    display: flex;
    justify-content: flex-end;
    margin: var(--space-4) 0 var(--space-3);
}

.hub-search-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 44px;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.7);
    color: var(--color-muted);
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
    backdrop-filter: blur(8px);
}

.hub-search-btn svg {
    width: 1rem;
    height: 1rem;
}

.hub-search-btn kbd {
    padding: 0 6px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    font-family: inherit;
    font-size: var(--text-xs);
}

@media (hover: none) {
    .hub-search-btn kbd {
        display: none;
    }
}

.hub {
    display: grid;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.hub[aria-busy="true"] {
    min-height: 2rem;
}

.hub-card {
    padding: var(--space-4);
    border: 1px solid rgba(84, 45, 70, 0.12);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.hub-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
}

.hub-card-head h3 {
    margin: 0;
    font-size: var(--text-h3);
}

.hub-card-head .hint {
    margin: 0;
}

.hub-progress {
    height: 6px;
    margin-bottom: var(--space-3);
    overflow: hidden;
    border-radius: 999px;
    background: var(--color-bg-alt);
}

.hub-progress span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--color-primary);
}

.hub-steps {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.hub-steps li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
}

.hub-steps li > span:nth-child(2) {
    flex: 1 1 12rem;
    min-width: 0;
}

.hub-steps .hint {
    display: block;
    margin: 0;
}

.hub-step-mark {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border: 2px solid var(--color-border-strong);
    border-radius: 50%;
    color: #fff;
    font-size: var(--text-xs);
    font-weight: 700;
}

.hub-steps li.is-done .hub-step-mark {
    border-color: var(--color-forest);
    background: var(--color-forest);
}

.hub-steps li.is-done strong {
    color: var(--color-muted);
    text-decoration: line-through;
}

.hub-pets {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.hub-pet {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: 3.5rem;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.hub-pet:hover {
    border-color: var(--color-accent);
}

.hub-pet-avatar {
    display: grid;
    flex: none;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: var(--color-accent-light);
    color: var(--color-primary-dark);
    font-family: var(--font-heading);
    font-weight: 700;
}

.hub-pet-text {
    min-width: 0;
}

.hub-pet-text .hint {
    display: block;
    margin: 0;
    overflow-wrap: anywhere;
}

.hub-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-2);
}

.hub-stats > div {
    padding: var(--space-3);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.hub-stat-value {
    display: block;
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.hub-stats .hint {
    margin: 0;
}

/* Quick search (Ctrl+K) */
.quick-search-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12vh var(--space-4) var(--space-4);
    background: rgba(58, 31, 49, 0.35);
    backdrop-filter: blur(3px);
}

.quick-search-panel {
    width: min(100%, 34rem);
    overflow: hidden;
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: 0 24px 60px -20px rgba(58, 31, 49, 0.55);
}

.quick-search-panel input {
    width: 100%;
    padding: var(--space-4);
    border: 0;
    border-bottom: 1px solid var(--color-border);
    font: inherit;
    font-size: var(--text-input);
}

.quick-search-panel input:focus {
    outline: none;
}

.quick-search-list {
    max-height: 50vh;
    margin: 0;
    padding: var(--space-2);
    overflow-y: auto;
    list-style: none;
}

.quick-search-list li {
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.quick-search-list li[aria-selected="true"],
.quick-search-list li:hover {
    background: var(--color-bg-alt);
}

.quick-search-hint {
    margin: 0;
    padding: var(--space-2) var(--space-4) var(--space-3);
}

@media (hover: none) {
    .quick-search-hint {
        display: none;
    }
}

/* Admin -> Suppliers (migration 055) */
.dropship-thumb {
    width: 56px;
    height: 56px;
    flex: none;
    border-radius: var(--radius-sm);
    object-fit: cover;
}

.dropship-import {
    margin: var(--space-2) 0;
}

/* ===== Owner Dashboard 2.0 (owner.html, js/owner-command.js, migration 056) =====
   The owner's command centre: dark graphite with violet and cyan, on this page only (the owner asked for it).
   The rest of the site keeps the KinPaw palette. Contrast checked: body text 14:1, muted text 6.9:1,
   links 8.2:1, white on violet buttons 4.9:1. */
body[data-page="owner"] main {
    --color-primary: #b4a9ff;
    --color-primary-dark: #5b4bd5;
    --color-primary-soft: #262245;
    --color-accent: #22d3ee;
    --color-accent-dark: #67e8f9;
    --color-accent-light: #67e8f9;
    --color-text: #e6e7ee;
    --color-muted: #a0a4b8;
    --color-subtle: #a0a4b8;
    --color-bg: #0f1117;
    --color-bg-alt: #20232d;
    --color-surface: #181b23;
    --color-border: #2c3040;
    --color-border-strong: #3d4256;
    --color-error: #f87171;
    --color-error-soft: #3a1d1f;
    --color-warning-soft: #3a2e1a;
    --color-success: #4ade80;
    --color-success-soft: #16302a;
    --focus-ring: 0 0 0 3px rgba(34, 211, 238, 0.45);
    color: var(--color-text);
    background: var(--color-bg);
}

body[data-page="owner"] main h1,
body[data-page="owner"] main h2,
body[data-page="owner"] main h3,
body[data-page="owner"] main strong {
    color: #f3f4f8;
}

body[data-page="owner"] .page-hero {
    background:
        radial-gradient(ellipse 55% 120% at 95% 0%, rgba(124, 108, 240, 0.28), transparent 70%),
        radial-gradient(ellipse 45% 100% at 0% 100%, rgba(34, 211, 238, 0.12), transparent 70%),
        #12141b;
    border-bottom-color: var(--color-border);
}

body[data-page="owner"] .page-hero .eyebrow {
    color: var(--color-accent-dark);
}

/* Main buttons only: the quiet (ghost), outline, danger and light buttons keep their own look */
body[data-page="owner"] main .btn:not(.btn-ghost, .btn-outline, .btn-danger, .btn-light) {
    border-color: #6c5ce7;
    background: #6c5ce7;
    color: #fff;
}

body[data-page="owner"] main .btn:not(.btn-ghost, .btn-outline, .btn-danger, .btn-light):hover {
    border-color: var(--color-primary-dark);
    background: var(--color-primary-dark);
}

body[data-page="owner"] main .btn-outline {
    border-color: #6c5ce7;
    background: transparent;
    color: var(--color-primary);
}

body[data-page="owner"] main input,
body[data-page="owner"] main select,
body[data-page="owner"] main textarea {
    color: var(--color-text);
    background-color: #12141b;
}

body[data-page="owner"] main .panel {
    border-color: var(--color-border);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 18px 40px -28px rgba(0, 0, 0, 0.8);
}

body[data-page="owner"] main table th,
body[data-page="owner"] main table td {
    border-color: var(--color-border);
}

/* The sidebar: the page's sections, sticky beside the panels; collapsible */
.owner-shell {
    display: grid;
    grid-template-columns: 13.5rem minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
}

.owner-shell.is-collapsed {
    grid-template-columns: 3.25rem minmax(0, 1fr);
}

.owner-nav {
    position: sticky;
    top: calc(var(--header-h) + var(--space-4));
    max-height: calc(100vh - var(--header-h) - var(--space-6));
    overflow-y: auto;
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.owner-nav-tools {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.owner-nav-toggle,
.owner-search-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--tap);
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text);
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
}

.owner-search-btn svg {
    width: 1rem;
    height: 1rem;
}

.owner-nav-toggle:hover,
.owner-search-btn:hover {
    border-color: var(--color-accent);
}

#owner-nav-list {
    margin: var(--space-2) 0 0;
    padding: 0;
    list-style: none;
}

#owner-nav-list a {
    display: block;
    padding: var(--space-2) var(--space-3);
    border-left: 2px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--color-muted);
    font-size: var(--text-sm);
    text-decoration: none;
}

#owner-nav-list a:hover,
#owner-nav-list a:focus-visible {
    border-left-color: var(--color-accent);
    background: var(--color-bg-alt);
    color: var(--color-text);
}

.owner-shell.is-collapsed #owner-nav-list,
.owner-shell.is-collapsed .owner-nav-toggle span,
.owner-shell.is-collapsed .owner-search-btn {
    display: none;
}

@media (max-width: 900px) {
    .owner-shell,
    .owner-shell.is-collapsed {
        grid-template-columns: minmax(0, 1fr);
    }

    .owner-nav {
        position: static;
        max-height: none;
    }

    .owner-shell.is-collapsed .owner-search-btn {
        display: inline-flex;
    }

    /* One row of section links you can swipe (its height is fixed, so nothing below moves when it fills) */
    #owner-nav-list {
        display: flex;
        gap: var(--space-1);
        min-height: 2.5rem;
        overflow-x: auto;
    }

    #owner-nav-list a {
        white-space: nowrap;
    }
}

/* The command centre: the period's figures, queues and connections */
.cc-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.cc-head .panel-title {
    margin: 0;
}

.cc-period {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    padding: var(--space-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
}

.cc-period button {
    min-height: var(--tap);
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-muted);
    font: inherit;
    font-size: var(--text-sm);
    cursor: pointer;
}

.cc-period button[aria-pressed="true"] {
    background: #6c5ce7;
    color: #fff;
}

.cc-metrics {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: var(--space-3);
}

.cc-metric {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: linear-gradient(160deg, rgba(124, 108, 240, 0.10), transparent 60%), var(--color-bg-alt);
}

.cc-label {
    color: var(--color-muted);
    font-size: var(--text-sm);
}

.cc-value {
    color: #f3f4f8;
    font-size: 1.5rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1.2;
}

.cc-def summary {
    color: var(--color-accent-dark);
    font-size: var(--text-xs);
    cursor: pointer;
}

.cc-def p {
    margin: var(--space-1) 0 0;
    color: var(--color-muted);
    font-size: var(--text-sm);
}

.cc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--space-3);
    margin-block: var(--space-4);
}

.cc-box {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.cc-box h3 {
    margin-bottom: var(--space-3);
    font-size: var(--text-base);
}

.cc-counts,
.cc-queues,
.cc-services {
    display: grid;
    gap: var(--space-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.cc-counts div,
.cc-queues a,
.cc-services li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2);
    font-size: var(--text-sm);
}

.cc-counts dd {
    margin: 0;
    font-variant-numeric: tabular-nums;
}

.cc-queues a {
    padding: var(--space-1) 0;
    color: var(--color-text);
    text-decoration: none;
}

.cc-queues a:hover span {
    color: var(--color-accent-dark);
}

.cc-queues strong {
    color: var(--color-muted);
    font-variant-numeric: tabular-nums;
}

.cc-queues strong.is-busy {
    color: var(--color-accent-dark);
}

.cc-services li {
    justify-content: flex-start;
    align-items: center;
}

.cc-services .hint {
    margin-left: auto;
}

.cc-dot {
    width: 0.55rem;
    height: 0.55rem;
    flex: none;
    border-radius: 50%;
    background: #4b5064;
}

.cc-dot.is-on {
    background: #4ade80;
}

.cc-dot.is-bad {
    background: #f87171;
}

/* The Ctrl+K box on the owner page */
body[data-page="owner"] .quick-search-panel {
    border: 1px solid #2c3040;
    background: #181b23;
    color: #e6e7ee;
}

body[data-page="owner"] .quick-search-panel input {
    border-bottom-color: #2c3040;
    background: #181b23;
    color: #e6e7ee;
}

body[data-page="owner"] .quick-search-list li[aria-selected="true"],
body[data-page="owner"] .quick-search-list li:hover {
    background: #262245;
}

/* ===== Company & investor relations (invest.html) and the home page vision band =====
   KinPaw's own palette. Only verified facts are shown; there's no figure strip until there are real figures. */
.ir-toc {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-5);
}

.ir-toc a {
    display: inline-flex;
    align-items: center;
    min-height: 40px;
    padding: 0 var(--space-4);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.6);
    color: var(--color-primary);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
}

.ir-toc a:hover {
    border-color: var(--color-primary);
    background: var(--color-surface);
}

.ir-model {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--space-4);
    margin: 0 0 var(--space-4);
    padding: 0;
    list-style: none;
}

.ir-model li {
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.ir-model h3 {
    margin: var(--space-3) 0 var(--space-2);
    font-size: var(--text-h3);
}

.ir-model p {
    margin: 0;
    color: var(--color-muted);
}

.ir-tag {
    display: inline-block;
    padding: 0.15em 0.7em;
    border-radius: var(--radius-pill);
    background: var(--color-bg-alt);
    color: var(--color-muted);
    font-size: var(--text-xs);
    font-weight: 600;
}

.ir-tag-built {
    background: var(--color-success-soft);
    color: var(--color-success);
}

.ir-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: var(--space-4);
    margin: 0 0 var(--space-4);
}

.ir-stat {
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-accent);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.ir-stat dt {
    color: var(--color-muted);
    font-size: var(--text-sm);
}

.ir-stat dd {
    margin: var(--space-1) 0 0;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem);
    font-weight: 600;
    line-height: 1.15;
}

.ir-figures {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: var(--space-4);
}

.ir-figure {
    padding: var(--space-5);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.ir-figure h3 {
    margin-bottom: var(--space-2);
    font-size: var(--text-h3);
}

.ir-figure p {
    margin: 0;
    color: var(--color-muted);
}

/* Home page: the vision behind KinPaw */
.vision-inner {
    display: grid;
    gap: var(--space-6);
    align-items: center;
}

@media (min-width: 900px) {
    .vision-inner {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

.vision-inner .section-intro {
    margin-bottom: var(--space-5);
}

.vision-model {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.vision-model li {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
}

.vision-model span {
    color: var(--color-muted);
    font-size: var(--text-sm);
}

/* ===== The owner's two investment systems (migration 057) =====
   Owner page: switches, checks, real totals, legal record, presentation editor (dark owner theme).
   My investments: invest online, receipts, payout requests. Investor page: the presentation, always labelled. */
.inv2-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.inv2-checks {
    display: grid;
    gap: var(--space-1);
    margin: var(--space-2) 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-sm);
}

.inv2-checks li {
    color: var(--color-error);
}

.inv2-checks li.is-ok {
    color: var(--color-success);
}

.inv2-form {
    margin-top: var(--space-4);
}

.inv2-figures {
    max-width: 34rem;
}

.inv2-rows {
    margin: var(--space-3) 0;
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.inv2-rows legend {
    padding: 0 var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
}

.inv2-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 0.6fr) minmax(0, 1fr) minmax(0, 0.8fr);
    gap: var(--space-2);
    margin-bottom: var(--space-2);
}

.inv2-row-2 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

@media (max-width: 600px) {
    .inv2-row,
    .inv2-row-2 {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }
}

/* My investments: invest online, receipts */
.invest-online,
.invest-receipts {
    margin-bottom: var(--space-5);
}

.io-quote {
    min-height: 1.5rem;
    margin: var(--space-3) 0;
}

.io-terms,
.io-receipt {
    margin: var(--space-3) 0;
}

.io-terms p {
    white-space: pre-line;
}

.io-terms h3 {
    margin: var(--space-3) 0 var(--space-1);
    font-size: var(--text-base);
}

/* Investor page: the presentation */
.ir-pres {
    background: var(--color-bg);
}

.ir-pres-head {
    max-width: 46rem;
    margin-bottom: var(--space-5);
}

.ir-illustration {
    display: inline-block;
    margin: var(--space-2) 0 0;
    padding: var(--space-2) var(--space-3);
    border-left: 3px solid var(--color-accent-dark);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    font-size: var(--text-sm);
}

.ir-pres-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-4);
}

.ir-pres-stat {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.ir-pres-value {
    display: inline-block;
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    line-height: 1.1;
}

.ir-pres-label {
    color: var(--color-muted);
    font-size: var(--text-sm);
}

.ir-pres-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: var(--space-4);
}

.ir-pres-card {
    margin: 0;
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.ir-pres-chart {
    grid-column: 1 / -1;
}

.ir-pres-card figcaption,
.ir-pres-card > p:first-child {
    margin: 0 0 var(--space-3);
}

.ir-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: 0 0 var(--space-2);
    padding: 0;
    list-style: none;
    font-size: var(--text-sm);
}

.ir-legend li {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.ir-chart-wrap {
    position: relative;
}

.ir-chart {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 640 / 260;
    touch-action: pan-y;
}

.ir-grid {
    stroke: var(--color-border);
    stroke-width: 1;
}

.ir-axis {
    fill: var(--color-muted);
    font-size: 12px;
}

.ir-cross {
    stroke: var(--color-border-strong);
    stroke-width: 1;
}

.ir-tip {
    position: absolute;
    top: 0;
    display: grid;
    gap: 2px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    box-shadow: var(--shadow);
    font-size: var(--text-sm);
    transform: translateX(-50%);
    pointer-events: none;
}

.ir-tip[hidden] {
    display: none;
}

.ir-table {
    margin-top: var(--space-3);
    font-size: var(--text-sm);
}

.ir-fund-figure {
    margin: 0 0 var(--space-3);
    color: var(--color-primary);
    font-family: var(--font-heading);
    font-size: 1.75rem;
    font-weight: 600;
}

.ir-fund-figure span {
    color: var(--color-muted);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 400;
}

.ir-fund-bar {
    height: 12px;
    overflow: hidden;
    border-radius: var(--radius-pill);
    background: var(--color-bg-alt);
}

.ir-fund-bar span {
    display: block;
    width: var(--fund);
    height: 100%;
    border-radius: var(--radius-pill);
    background: var(--color-primary);
    transform-origin: left;
    animation: ir-fill 1.2s var(--ease-out) both;
}

@keyframes ir-fill {
    from { transform: scaleX(0); }
}

.ir-pres-scenarios ul,
.ir-pres-activity ul {
    display: grid;
    gap: var(--space-3);
    margin: 0 0 var(--space-3);
    padding: 0;
    list-style: none;
}

.ir-sc-head {
    display: flex;
    justify-content: space-between;
    gap: var(--space-2);
}

.ir-sc-bar {
    position: relative;
    height: 10px;
    margin: var(--space-1) 0;
    border-radius: var(--radius-pill);
    background: var(--color-bg-alt);
}

.ir-sc-bar span {
    position: absolute;
    inset: 0 auto 0 0;
    border-radius: var(--radius-pill);
}

.ir-sc-end {
    background: var(--color-accent);
}

.ir-sc-start {
    z-index: 1;
    background: var(--color-primary);
}

.ir-pres-activity li {
    padding-left: var(--space-4);
    border-left: 2px solid var(--color-accent);
    font-size: var(--text-sm);
}

@media (prefers-reduced-motion: reduce) {
    .ir-fund-bar span {
        animation: none;
    }
}

/* ===== Finishing touches (every page) =====
   Small details that make the site feel finished, without moving anything: brand-coloured text selection and
   scrollbars, a soft shadow under the sticky header once the page is scrolled, balanced paragraph endings,
   and steady-width price digits. */
::selection {
    background: rgba(217, 143, 163, 0.35);
    color: var(--color-text);
}

html {
    scrollbar-color: rgba(84, 45, 70, 0.35) transparent;
}

.site-header {
    transition: box-shadow var(--motion) var(--ease-out), background-color var(--motion) var(--ease-out);
}

.site-header.is-scrolled {
    background: rgba(248, 242, 239, 0.98);
    box-shadow: 0 10px 30px -22px rgba(59, 34, 51, 0.55);
}

p,
li {
    text-wrap: pretty;
}

.product-price,
.product-price-large,
.price-approx,
.stat-value {
    font-variant-numeric: tabular-nums;
}

/* ===== Rate your visit (migration 059, js/visit-ratings.js) ===== */
.visit-rating {
    margin-top: var(--space-5);
}

.visit-stars,
.visit-avg {
    color: var(--color-accent-dark);
    letter-spacing: 0.05em;
}

.star-pick {
    display: inline-flex;
    flex-direction: row-reverse;
    gap: var(--space-1);
    margin: 0 0 var(--space-3);
    padding: 0;
    border: 0;
}

.star-pick input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.star-pick label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--tap);
    min-height: var(--tap);
    color: var(--color-border-strong);
    font-size: 1.75rem;
    cursor: pointer;
    transition: color var(--motion-fast);
}

/* Stars up to the chosen (or hovered) one light up: the list is reversed, so "this and the ones after it" */
.star-pick input:checked ~ label,
.star-pick label:hover,
.star-pick label:hover ~ label {
    color: var(--color-accent-dark);
}

.star-pick input:focus-visible + label {
    border-radius: var(--radius-sm);
    box-shadow: var(--focus-ring);
}

.visit-comments {
    display: grid;
    gap: var(--space-2);
    margin: var(--space-2) 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-sm);
}

/* Home "Pets are family": two photos, staggered (owner's photos, 2026-10-29; the second enlarged 2026-10-31).
   The family photo at the top left, the owner's photo larger at the lower right in a white frame. Every size comes from the width (ratios and padding), so nothing moves when the photos load. */
.trust-photos {
    position: relative;
    isolation: isolate;
    padding-bottom: 22%;
}

.trust-photos .trust-split-img {
    width: 84%;
    box-shadow: var(--shadow);
}

.trust-photo-inset {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 60%;
    overflow: hidden;
    aspect-ratio: 3 / 2;
    border: 6px solid #fff;
    border-radius: var(--radius-lg);
    background: var(--color-bg-alt);
    box-shadow: var(--shadow-lg);
}

.trust-photo-inset img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 30%;
}

.trust-photo-tag {
    position: absolute;
    left: var(--space-3);
    bottom: var(--space-3);
    margin: 0;
    padding: 0.35em 0.8em;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.94);
    color: #161114;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.3;
    box-shadow: var(--shadow);
}

.trust-photo-tag span {
    color: #b4506d;   /* blush, deep enough to read on white */
}

@media (max-width: 639px) {
    .trust-photos {
        padding-bottom: 26%;
    }

    .trust-photos .trust-split-img {
        width: 88%;
    }

    .trust-photo-inset {
        width: 66%;
        border-width: 5px;
    }

    .trust-photo-tag {
        left: var(--space-2);
        bottom: var(--space-2);
        font-size: 0.8rem;
    }
}

/* Adopt and Services open with a gentle, premium entrance (owner, 2026-10-29): the header text arrives in quick
   succession, the photo settles from a slight zoom, and the cards rise in one after another when the list appears.
   Fade and movement only (nothing changes size or position in the layout), and off for visitors who prefer less
   motion (the prefers-reduced-motion rule above turns every animation off). */
@keyframes photo-settle {
    from { opacity: 0; transform: scale(1.04); }
}

body:is([data-page="adopt"], [data-page="services"]) .page-hero-split .container > div:first-child > * {
    animation: rise-in 280ms var(--ease-out) backwards;
}

body:is([data-page="adopt"], [data-page="services"]) .page-hero-split .container > div:first-child > :nth-child(2) { animation-delay: 40ms; }
body:is([data-page="adopt"], [data-page="services"]) .page-hero-split .container > div:first-child > :nth-child(3) { animation-delay: 80ms; }

body:is([data-page="adopt"], [data-page="services"]) .page-hero-img img {
    animation: photo-settle 380ms var(--ease-out) backwards;
}

:is(#services-list, #pet-results) > * {
    animation: rise-in 260ms var(--ease-out) backwards;
}

:is(#services-list, #pet-results) > :nth-child(2) { animation-delay: 30ms; }
:is(#services-list, #pet-results) > :nth-child(3) { animation-delay: 60ms; }
:is(#services-list, #pet-results) > :nth-child(4) { animation-delay: 90ms; }
:is(#services-list, #pet-results) > :nth-child(n + 5) { animation-delay: 120ms; }

/* ===== App feel (owner, 2026-10-30): Services swipe, the My KinPaw search bar, the quick search on phones and the
   "Get started" card. Same swipe style as My KinPaw's rows (.card-grid-compact). Nothing else changes. ===== */

/* My KinPaw: the quick search looks like a search bar you tap, full width */
.hub-bar {
    justify-content: stretch;
}

.hub-search-btn {
    width: 100%;
    min-height: 48px;
    padding: 0 var(--space-4);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    text-align: left;
    transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}

.hub-search-btn:hover {
    border-color: var(--color-border-strong);
    box-shadow: var(--shadow);
}

@media (max-width: 639px) {
    .hub-search-btn kbd {
        display: none;   /* phones: no keyboard shortcut, more room for the words */
    }
}

.hub-search-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The quick search box: the field with a Cancel button beside it */
.quick-search-top {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--color-border);
}

.quick-search-top input {
    flex: 1;
    min-width: 0;
    border: 0 !important;
}

.quick-search-cancel {
    flex: none;
    min-height: 44px;
    margin-right: var(--space-2);
    padding: 0 var(--space-3);
    border: 0;
    background: transparent;
    color: var(--color-primary);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

/* Touch screens: no keyboard hints */
@media (hover: none) {
    .quick-search-hint {
        display: none;
    }
}

/* Phones: the quick search opens as a full screen that slides up, like an app's search */
@media (max-width: 639px) {
    .quick-search-backdrop {
        align-items: stretch;
        padding: 0;
        background: var(--color-bg);
        backdrop-filter: none;
    }

    .quick-search-panel {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100dvh;
        border-radius: 0;
        box-shadow: none;
        animation: dialog-in var(--motion) var(--ease-out);
    }

    .quick-search-top {
        padding: var(--space-2) 0 var(--space-2) var(--space-2);
        padding-top: max(var(--space-2), env(safe-area-inset-top));
    }

    .quick-search-list {
        flex: 1;
        max-height: none;
    }

    .quick-search-list li {
        min-height: var(--tap);
        display: flex;
        align-items: center;
        border-bottom: 1px solid var(--color-border);
        border-radius: 0;
    }
}

body[data-page="owner"] .quick-search-cancel {
    color: #b4a9ff;
}

body[data-page="owner"] .quick-search-top {
    border-bottom-color: #2c3040;
}

/* "Get started with KinPaw": a warmer card, a progress bar that fills in, and the steps as tiles (stacked: a
   sideways row here made the whole page wider than the phone, measured by the layout audit 2026-10-30) */
.hub {
    grid-template-columns: minmax(0, 1fr);
}

.hub-guide {
    background: #fbeff1;
    border-color: rgba(184, 72, 106, 0.18);
}

.hub-guide .hub-progress {
    height: 8px;
    background: rgba(255, 255, 255, 0.7);
}

.hub-guide .hub-progress span {
    transform-origin: left;
    animation: guide-fill 500ms var(--ease-out) 100ms backwards;
}

@keyframes guide-fill {
    from { transform: scaleX(0); }
}

.hub-guide .hub-steps li {
    padding: var(--space-3);
    border: 1px solid rgba(84, 45, 70, 0.08);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, 0.85);
}

.hub-guide .hub-steps li.is-done {
    background: rgba(255, 255, 255, 0.5);
}


/* Booking: "Choose one of your pets" (one tap fills in the pet's details; same pill style as the shop's categories) */
.my-pet-pick:not(:empty) {
    margin-bottom: var(--space-4);
}

.my-pet-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: var(--space-2) 0;
}

.my-pet-chip {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
    padding: 0 var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: border-color var(--motion-fast), background-color var(--motion-fast), color var(--motion-fast);
}

.my-pet-chip:hover {
    border-color: var(--color-primary);
}

.my-pet-chip[aria-pressed="true"] {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: #fff;
}

/* Care+ memberships (migration 061): plan cards, joining, My Care+ */
.care-disclosure {
    margin-bottom: var(--space-5);
}

.care-plans {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    margin-bottom: var(--space-5);
}

/* Cards side by side line up (the usual space between stacked panels doesn't apply here) */
.care-plans .panel + .panel {
    margin-top: 0;
}

.care-plan {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    border-top: 4px solid var(--color-accent);
}

.care-plan .panel-title {
    margin: 0;
}

.care-plan .checklist {
    margin: var(--space-2) 0 0;
}

.care-price {
    margin: 0;
    color: var(--color-primary);
    font-size: var(--text-lg);
    font-weight: 700;
}

.care-join fieldset {
    margin: 0 0 var(--space-4);
    padding: 0;
    border: 0;
}

.care-join .method-option .hint {
    display: block;
}

.care-mine {
    margin-top: var(--space-5);
}

.care-list {
    padding: 0;
    list-style: none;
}

.care-list details {
    margin-top: var(--space-2);
}

/* Health passport (migration 064): the owner's link with its QR code, and the read-only page a vet opens */
.passport-link {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    overflow-wrap: anywhere;
}

.passport-qr {
    margin: var(--space-3) 0;
}

.passport-head {
    margin-bottom: var(--space-5);
}

.passport-head h1 {
    margin: 0 0 var(--space-2);
}

.passport-section {
    margin-top: var(--space-4);
}

.passport-list {
    padding: 0;
    list-style: none;
}

.passport-foot {
    margin-top: var(--space-5);
}

.vet-search {
    max-width: 420px;
    margin-bottom: var(--space-5);
}

@media print {
    body[data-page="passport"] #site-header,
    body[data-page="passport"] #site-footer,
    body[data-page="passport"] .passport-actions,
    body[data-page="passport"] .tab-bar,
    body[data-page="passport"] .help-dialog {
        display: none !important;
    }

    body[data-page="passport"] .passport-section {
        break-inside: avoid;
    }
}

/* Lost & found (migration 065): photo space reserved before it loads, filters, messages under "Your posts" */
.lf-photo {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: var(--color-primary-soft);
    font-size: 2.5rem;
}

.lf-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lf-new {
    margin-bottom: var(--space-5);
}

.lf-new > summary {
    list-style: none;
}

.lf-new[open] > summary {
    margin-bottom: var(--space-4);
}

.lf-filters {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 var(--space-4);
    margin: var(--space-5) 0 var(--space-2);
}

@media (min-width: 640px) {
    .lf-filters {
        grid-template-columns: minmax(0, 200px) minmax(0, 360px);
    }
}

.lf-card details {
    margin-top: var(--space-2);
}

.lf-mine {
    margin-bottom: var(--space-5);
}

.lf-messages {
    display: grid;
    gap: var(--space-3);
    margin: var(--space-3) 0;
    padding: 0;
    list-style: none;
}

.lf-messages li {
    padding: var(--space-3);
    border-radius: var(--radius-sm);
    background: var(--color-primary-soft);
    overflow-wrap: anywhere;
}

.lf-messages li p {
    margin: 0;
}

/* Featured stores on the Shop page (migration 066) */
.featured-stores {
    padding-top: 0;
}

.featured-store {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    color: inherit;
    text-decoration: none;
    transition: border-color var(--motion-fast), box-shadow var(--motion-fast);
}

.featured-store:hover,
.featured-store:focus-visible {
    border-color: var(--color-accent);
}

.featured-store .store-logo {
    width: 64px;
    height: 64px;
    font-size: 1.6rem;
}

.featured-store-text {
    display: grid;
    gap: 2px;
    min-width: 0;
    overflow-wrap: anywhere;
}

/* Seller analytics chart: the same validated chart color as Admin's charts (defined there on .chart-card) */
#seller-sales-chart {
    --chart-1: #13876f;
}

#featured-stores-list {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}

/* Rewards (migration 067): points history as a list, the points always on the right */
.reward-history {
    margin: 0;
    padding: 0;
    list-style: none;
}

.reward-history li {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
    overflow-wrap: anywhere;
}

.reward-history li:last-child {
    border-bottom: 0;
}

.reward-points {
    flex: none;
    white-space: nowrap;
}

/* How KinPaw works (help.html): numbered first steps, guide cards, safety box */
.help-steps {
    display: grid;
    gap: var(--space-3);
    margin: var(--space-4) 0 var(--space-6);
    padding-left: 1.4em;
}

.help-steps li {
    line-height: 1.55;
}

.help-steps a {
    white-space: nowrap;
}

.help-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
}

.help-grid .panel + .panel {
    margin-top: 0;
}

.help-card {
    display: flex;
    flex-direction: column;
}

.help-card .checklist {
    flex: 1;
}

.help-safety,
.help-more {
    margin-top: var(--space-5);
}

.hub-guide-more {
    margin: var(--space-3) 0 0;
}

/* Quick search (My KinPaw): opens straight onto direct links, in groups, each with an icon */
.quick-search-list li[role="option"] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.quick-search-list .quick-search-group {
    padding: var(--space-3) var(--space-3) var(--space-1);
    color: var(--color-muted);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: default;
}

.quick-search-list .quick-search-group:hover {
    background: none;
}

.quick-search-icon {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border-radius: var(--radius-sm);
    background: var(--color-primary-soft);
    color: var(--color-primary);
}

.quick-search-icon svg {
    width: 1.1rem;
    height: 1.1rem;
}

/* Quick set-up (My KinPaw Home): a finished step says Done; the "all set" note when everything is done */
.hub-step-done {
    color: var(--color-success);
    font-size: var(--text-sm);
    font-weight: 600;
    white-space: nowrap;
}

.hub-guide-finished p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
}

/* ===== Bot check (Cloudflare Turnstile, js/backend.js getBotCheckToken) =====
   Empty for almost everyone. Only a visitor Cloudflare wants to ask gets the small box, floating at the bottom of the
   screen above everything (so nothing on the page moves). Its frame is drawn by Cloudflare (300 x 65 px). */
.bot-check {
    position: fixed;
    left: 50%;
    bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
    z-index: 1001;
    transform: translateX(-50%);
    max-width: calc(100vw - 2rem);
}

.bot-check:has(iframe) {
    padding: var(--space-2);
    border-radius: var(--radius);
    background: #ffffff;   /* Cloudflare's light box, on every page */
    box-shadow: var(--shadow);
}

/* ===== Urgent bookings (migration 070, js/service.js) ===== */
.slot-list .urgent-note {
    grid-column: 1 / -1;
    margin: 0;
}

.slot-urgent span {
    flex-direction: column;
    gap: 0.1rem;
    line-height: 1.15;
    padding: var(--space-1) 0;
}

.slot-urgent small {
    color: var(--color-primary);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.slot-urgent input:checked + span small {
    color: inherit;
}

.urgent-today {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-2) 0 0;
}

.urgent-confirm {
    margin: var(--space-3) 0 var(--space-2);
}

/* My KinPaw home: "More from KinPaw" (js/dashboard.js), the extras switched on, under the vet and boarding cards */
.quick-links.more-links {
    margin: var(--space-4) 0 0;
}

/* These tiles are links (the activity tiles are buttons): no underline, the same text colour */
.more-links .quick-link {
    color: var(--color-text);
    text-decoration: none;
}

/* Homepage: "Where we work" and the small "Sell on KinPaw" strip (index.html 6b, js/home.js) */
.reach-band .section-title {
    max-width: 34ch;
}

.reach-services {
    margin: var(--space-4) 0;
}

.reach-areas {
    display: grid;
    gap: var(--space-2) var(--space-6);
    margin: 0 0 var(--space-2);
}

.reach-areas div {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--space-2);
}

.reach-areas dt {
    font-weight: 700;
}

.reach-areas dt::after {
    content: ":";
}

.reach-areas dd {
    margin: 0;
}

.sell-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-5);
    margin-top: var(--space-6);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-bg-alt);
}

.sell-strip p {
    flex: 1 1 320px;
    margin: 0;
}

.sell-strip .hint {
    display: block;
    margin-top: var(--space-1);
}

@media (min-width: 720px) {
    .reach-areas {
        grid-template-columns: repeat(2, minmax(0, auto));
        justify-content: start;
    }
}

/* ===== Homepage: everything KinPaw does, like an app's home screen (index.html 1b, owner 2026-10-31) =====
   White tiles, a pink icon square, near-black titles: one tap to each service. */
.kp-apps .section-head {
    margin-bottom: var(--space-5);
}

.app-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Like app icons on every screen: the icon on top, then the name and one short line */
.app-tile {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto;
    row-gap: var(--space-1);
    align-content: start;
    height: 100%;
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: #fff;
    color: #161114;
    text-decoration: none;
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.2s var(--ease-out);
}

.app-tile:hover {
    border-color: var(--color-accent);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.app-tile:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 2px;
}

.app-tile-icon {
    display: grid;
    place-items: center;
    margin-bottom: var(--space-2);
    width: 44px;
    height: 44px;
    border-radius: var(--radius);
    background: #fbeff1;
    color: #161114;
}

.app-tile-icon svg {
    width: 22px;
    height: 22px;
}

.app-tile strong {
    font-size: 0.975rem;
    line-height: 1.25;
}

.app-tile-line {
    color: var(--color-muted);
    font-size: var(--text-sm);
    line-height: 1.35;
}

/* The action, like an app's button: pinned to the bottom of the tile */
.app-tile-go {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    justify-self: start;
    align-self: end;
    margin-top: var(--space-2);
    padding: 0.3em 0.75em;
    border-radius: 999px;
    background: #161114;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    line-height: 1.3;
}

.app-tile-go::after {
    content: "\2192";
    transition: transform 0.2s var(--ease-out);
}

.app-tile:hover .app-tile-go::after {
    transform: translateX(3px);
}

/* Every other service gets the kitten's tabby colour for its icon, so the chart isn't all pink */
.app-tiles li:nth-child(even) .app-tile-icon {
    background: #f4ebe0;
}

/* Adopt and Shop lead, in near-black like the hero */
.app-tile-dark {
    border-color: var(--hero-ink, #161114);
    background: var(--hero-ink, #161114);
    color: #fff;
}

.app-tile-dark .app-tile-line {
    color: rgba(255, 255, 255, 0.78);
}

.app-tile-dark .app-tile-icon,
.app-tiles li:nth-child(even) .app-tile-dark .app-tile-icon {
    background: var(--color-accent);
    color: #161114;
}

.app-tile-dark .app-tile-go {
    background: #fff;
    color: #161114;
}

.app-tile-dark:hover {
    border-color: var(--color-accent);
}

/* Easy to book: three steps under the chart */
.app-steps {
    display: grid;
    gap: var(--space-4);
    margin-top: var(--space-6);
    padding: var(--space-5);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: #fbf6f4;
}

.app-steps-kicker {
    margin: 0 0 var(--space-1);
    color: #85633f;   /* the tabby colour, deep enough to read on the light panel */
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.app-steps-head h3 {
    margin: 0;
    color: #161114;
    font-size: 1.25rem;
}

.app-steps-list {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.app-steps-list li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-3);
    align-items: start;
}

.app-steps-list strong {
    display: block;
    color: #161114;
}

.app-steps-list span:not(.app-step-num) {
    color: var(--color-muted);
    font-size: var(--text-sm);
}

.app-step-num {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-accent);
    color: #161114;
    font-weight: 700;
}

.app-steps-foot {
    margin: 0;
    color: var(--color-muted);
    font-size: var(--text-sm);
}

.app-steps-btn {
    justify-self: start;
    border-color: #161114;
    background: #161114;
    color: #fff;
}

.app-steps-btn:hover {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: #161114;
}

@media (min-width: 860px) {
    .app-steps {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: center;
    }

    .app-steps-head,
    .app-steps-list {
        grid-column: 1 / -1;
    }

    .app-steps-list {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .app-steps-foot {
        grid-column: 1 / 3;
    }

    .app-steps-btn {
        justify-self: end;
    }
}

@media (min-width: 560px) {
    .app-tiles {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (min-width: 1080px) {
    .app-tiles {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}