/* ==========================================================================
   ZooPet — design system
   Translated from the Claude Design board "Identitate vizuală Zoopet".
   Mobile-first: base rules follow the 390px mockup, the >=1024px block
   follows the 1240px desktop mockup.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
    /* Palette — four colours, per the brief */
    --zp-cream: #FAF7F2;   /* fundal */
    --zp-primary: #2FAE8E; /* verde salvie */
    --zp-accent: #F2A65A;  /* piersică */
    --zp-ink: #2B2B2B;     /* text */

    /* Supporting neutrals */
    --zp-primary-deep: #1E7A5F; /* "Zoo" in the wordmark */
    --zp-primary-hover: #238A70;
    --zp-board: #E9E4DA;
    --zp-white: #FFFFFF;
    --zp-muted: #6B655B;
    --zp-soft: #8A8477;
    --zp-line: #EFE9DF;
    --zp-line-strong: #E4DDD1;
    --zp-footer-text: #B8B2A6;
    --zp-accent-ink: #B06F24;

    /* Tints follow the themeable primary/accent automatically */
    --zp-primary-soft: color-mix(in srgb, var(--zp-primary) 12%, transparent);
    --zp-primary-wash: color-mix(in srgb, var(--zp-primary) 8%, transparent);
    --zp-primary-tint: color-mix(in srgb, var(--zp-primary) 10%, transparent);
    --zp-accent-soft: color-mix(in srgb, var(--zp-accent) 18%, transparent);
    --zp-accent-wash: color-mix(in srgb, var(--zp-accent) 14%, transparent);

    /* Shape */
    --zp-r: 14px;          /* card radius, 12–16px per the brief */
    --zp-r-lg: 20px;
    --zp-r-pill: 999px;
    --zp-r-input: 12px;

    /* Type */
    --zp-font-head: Quicksand, 'Trebuchet MS', sans-serif;
    --zp-font-body: Nunito, 'Segoe UI', sans-serif;
    --zp-font-brand: 'Baloo 2', Quicksand, sans-serif;

    /* Layout */
    --zp-max: 1240px;
    --gutter: 20px;
    --shadow-card: 0 6px 20px rgba(43, 43, 43, 0.08);
    --shadow-frame: 0 2px 12px rgba(43, 43, 43, 0.06);
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--zp-cream);
    color: var(--zp-ink);
    font: 400 16px/1.6 var(--zp-font-body);
    /* clears the fixed bottom bar on small screens */
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
}

h1, h2, h3, h4 { font-family: var(--zp-font-head); font-weight: 700; margin: 0; }
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font-family: inherit; }

a { color: var(--zp-primary); text-decoration: none; }
a:hover { color: var(--zp-primary-hover); }

:where(a, button, input, select, textarea, label.choice, label.day, label.hour, label.option):focus-visible {
    outline: 2px solid var(--zp-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.skip-link {
    position: absolute;
    left: -9999px;
    top: 8px;
    z-index: 60;
    background: var(--zp-ink);
    color: var(--zp-cream);
    padding: 10px 18px;
    border-radius: var(--zp-r-pill);
    font-weight: 800;
    font-size: 14px;
}
.skip-link:focus { left: 12px; color: var(--zp-cream); }

/* Shared page gutter — the 1240px frame with 48px inner padding on desktop */
.site-header__inner,
.page-head,
.hero,
.section,
.breadcrumb,
.pdp,
.pdp-details,
.booking,
.confirmation,
.flash,
.site-footer__inner,
.board {
    width: 100%;
    max-width: var(--zp-max);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.is-wide-only { display: none; }
.is-narrow-only { display: inline; }

/* --------------------------------------------------------------------------
   3. Logo
   -------------------------------------------------------------------------- */

.logo {
    display: inline-flex;
    align-items: baseline;
    font-family: var(--zp-font-brand);
    font-weight: 800;
    font-size: var(--logo-size, 24px);
    line-height: 1.1;
    letter-spacing: 0;
}
.logo:hover { color: inherit; }

.logo__zoo { color: var(--zp-primary-deep); }
.logo__pet { position: relative; color: var(--zp-primary); }

.logo--mono-light .logo__zoo,
.logo--mono-light .logo__pet { color: var(--zp-white); }
.logo--mono-dark .logo__zoo,
.logo--mono-dark .logo__pet { color: var(--zp-ink); }

/* The heart is cut into the bowl of the P. The patch covers the font's native
   counter; sized slightly larger than the heart's box so it still covers the
   hole when the wordmark scales up, but small enough not to swell the bowl. */
.logo__patch {
    position: absolute;
    left: 0.17em;
    top: 0.285em;
    width: 0.40em;
    height: 0.425em;
    background: currentColor;
    border-radius: 50%;
}
.logo__heart {
    position: absolute;
    left: 0.18em;
    top: 0.30em;
    width: 0.38em;
    height: 0.40em;
}

.logo--tilt .logo__zoo { display: inline-block; transform: rotate(-2deg); }
.logo--tilt .logo__pet { display: inline-block; transform: rotate(1.5deg); }

.logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--zp-primary);
    color: var(--zp-cream);
    font-family: var(--zp-font-brand);
    font-weight: 800;
    line-height: 1;
}
.logo-mark--64 { width: 64px; height: 64px; border-radius: 16px; font-size: 38px; }
.logo-mark--32 { width: 32px; height: 32px; border-radius: 8px; font-size: 19px; }
.logo-mark--16 { width: 16px; height: 16px; border-radius: 4px; font-size: 10px; }

/* --------------------------------------------------------------------------
   4. Buttons, chips, badges
   -------------------------------------------------------------------------- */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: none;
    border-radius: var(--zp-r-pill);
    padding: 13px 26px;
    font: 800 15px var(--zp-font-body);
    line-height: 1.2;
    cursor: pointer;
    min-height: 44px;
    text-align: center;
    transition: filter 0.15s ease, background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.btn--primary { background: var(--zp-primary); color: var(--zp-white); }
.btn--primary:hover { filter: brightness(0.93); color: var(--zp-white); }

.btn--outline {
    background: transparent;
    color: var(--zp-ink);
    border: 1.5px solid var(--zp-ink);
    padding: 12px 24px;
}
.btn--outline:hover { background: var(--zp-ink); color: var(--zp-cream); }

.btn--accent { background: var(--zp-accent); color: var(--zp-ink); }
.btn--accent:hover { filter: brightness(0.95); color: var(--zp-ink); }

.btn--ghost {
    background: transparent;
    color: var(--zp-primary);
    padding: 12px 8px;
    gap: 6px;
}
.btn--ghost:hover { opacity: 0.75; color: var(--zp-primary); }

.btn--sm { padding: 10px 20px; font-size: 13px; min-height: 40px; }
.btn--lg { padding: 15px 30px; font-size: 16px; min-height: 48px; }
.btn--lg.btn--outline { padding: 14px 28px; }
.btn--block { width: 100%; }

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--zp-ink);
    cursor: pointer;
    border-radius: var(--zp-r-pill);
}
.icon-button:hover { color: var(--zp-primary); }

.chip {
    display: inline-flex;
    align-items: center;
    border-radius: var(--zp-r-pill);
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
}
.chip--primary { background: var(--zp-primary-soft); color: var(--zp-primary); }
.chip--accent { background: var(--zp-accent-soft); color: var(--zp-accent-ink); }

.chip-row { display: flex; gap: 10px; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   5. Forms
   -------------------------------------------------------------------------- */

.input {
    width: 100%;
    background: var(--zp-white);
    border: 1.5px solid var(--zp-line-strong);
    border-radius: var(--zp-r-input);
    padding: 13px 16px;
    font: 400 15px var(--zp-font-body);
    color: var(--zp-ink);
    outline: none;
    transition: border-color 0.15s ease;
}
.input::placeholder { color: var(--zp-soft); }
.input:focus { border-color: var(--zp-primary); outline: none; }
.input--invalid { border-color: #C4553D; }
.input--light { padding: 12px 14px; }

select.input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A8477' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 40px;
}
select.input:has(option[value=""]:checked) { color: var(--zp-muted); }

textarea.input { resize: none; }

.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field__label { font-size: 13px; font-weight: 800; }

.field-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }

.form-error {
    margin: 0;
    font-size: 12.5px;
    font-weight: 700;
    color: #C4553D;
}
.form-error--summary {
    grid-column: 1 / -1;
    background: rgba(196, 85, 61, 0.1);
    border-radius: var(--zp-r-input);
    padding: 10px 14px;
}

.checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    cursor: pointer;
}
.checkbox input { position: absolute; opacity: 0; width: 0; height: 0; }
.checkbox__box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 1.5px solid var(--zp-line-strong);
    background: var(--zp-white);
    color: transparent;
    flex: none;
}
.checkbox input:checked + .checkbox__box {
    background: var(--zp-primary);
    border-color: var(--zp-primary);
    color: var(--zp-white);
}
.checkbox input:focus-visible + .checkbox__box { outline: 2px solid var(--zp-primary); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   6. Photo placeholders (stand-ins for real photography)
   -------------------------------------------------------------------------- */

.photo {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 100%;
    min-height: 64px;
    padding: 12px;
    border-radius: var(--photo-radius, 12px);
    background:
        linear-gradient(135deg, var(--zp-primary-wash), transparent 60%),
        var(--zp-line);
    color: var(--zp-soft);
    overflow: hidden;
    text-align: center;
}
.photo--circle { border-radius: 50%; padding: 0; min-height: 0; }
.photo--filled { padding: 0; background: var(--zp-line); }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.photo__glyph { opacity: 0.55; flex: none; }
.photo__caption {
    font-size: 11.5px;
    line-height: 1.4;
    font-weight: 700;
    max-width: 22ch;
}
.photo--circle .photo__glyph { width: 16px; height: 16px; }
.photo--circle .photo__caption { display: none; }

/* --------------------------------------------------------------------------
   7. Header
   -------------------------------------------------------------------------- */

.site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: var(--zp-cream);
    border-bottom: 1px solid var(--zp-line);
}

.site-header__inner {
    display: flex;
    align-items: center;
    /* wrap so the full-width nav panel drops onto its own row when opened */
    flex-wrap: wrap;
    gap: 12px;
    padding-block: 16px;
}

.site-header__logo { order: 2; margin-inline: auto; }
.site-header__menu { order: 1; margin-left: -8px; }
.site-header__actions { order: 3; display: flex; align-items: center; gap: 8px; }
.site-header__search { display: none; }

.site-nav {
    order: 4;
    display: none;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding-block: 8px 4px;
}
.site-nav.is-open { display: flex; }

.nav-link {
    font-size: 15px;
    font-weight: 700;
    color: var(--zp-ink);
    padding: 12px 4px;
    border-radius: 8px;
}
.nav-link:hover { color: var(--zp-primary); }
.nav-link--active { color: var(--zp-primary); }

.cart-link {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    color: var(--zp-ink);
}
.cart-link:hover { color: var(--zp-primary); }

.cart-count {
    position: absolute;
    top: 2px;
    right: 0;
    background: var(--zp-accent);
    color: var(--zp-ink);
    border-radius: var(--zp-r-pill);
    font-size: 10px;
    font-weight: 800;
    line-height: 1.4;
    padding: 1px 6px;
}

/* --------------------------------------------------------------------------
   8. Flash / confirmation
   -------------------------------------------------------------------------- */

.flash {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-block: 16px 0;
    background: var(--zp-primary-soft);
    color: var(--zp-primary);
    border-radius: var(--zp-r-input);
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 800;
}
/* the shared gutter rule adds padding-inline; keep the pill inside it */
.flash { padding-inline: 16px; max-width: calc(var(--zp-max) - var(--gutter) * 2); }

.confirmation {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-block: 8px 0;
    background: var(--zp-primary-soft);
    border-radius: var(--zp-r);
    padding: 18px 20px;
    color: var(--zp-ink);
    max-width: calc(var(--zp-max) - var(--gutter) * 2);
}
.confirmation svg { color: var(--zp-primary); flex: none; }
.confirmation div { display: flex; flex-direction: column; gap: 2px; }
.confirmation strong { font-size: 15px; }
.confirmation span { font-size: 14px; color: var(--zp-muted); }

/* --------------------------------------------------------------------------
   9. Sections & headings
   -------------------------------------------------------------------------- */

.section { padding-block: 24px; display: flex; flex-direction: column; gap: 14px; }

.section__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.section-title { font-size: 20px; line-height: 1.25; }

.link-more { font-size: 13px; font-weight: 800; color: var(--zp-primary); white-space: nowrap; }

.page-head { padding-block: 28px 4px; display: flex; flex-direction: column; gap: 8px; }
.page-head__title { font-size: 28px; letter-spacing: -0.5px; line-height: 1.15; }
.page-head__lead { font-size: 15px; color: var(--zp-muted); }

.empty-state {
    background: var(--zp-white);
    border: 1px solid var(--zp-line);
    border-radius: var(--zp-r);
    padding: 32px;
    text-align: center;
    color: var(--zp-muted);
}

/* --------------------------------------------------------------------------
   10. Hero
   -------------------------------------------------------------------------- */

.hero {
    display: grid;
    gap: 16px;
    padding-block: 24px;
}
.hero__copy { display: flex; flex-direction: column; gap: 16px; order: 2; }
.hero__media { order: 1; height: 200px; }
.hero__media .photo { --photo-radius: 16px; }

/* the hero eyebrow is the one oversized chip */
.hero__copy > .chip { align-self: flex-start; padding: 7px 16px; font-size: 13px; }

.hero__title {
    font-size: 30px;
    line-height: 1.15;
    letter-spacing: -0.5px;
}
.hero__lead { font-size: 15px; line-height: 1.6; color: var(--zp-muted); }

.hero__actions { display: flex; flex-direction: column; gap: 12px; }
.hero__actions .btn { width: 100%; }

.hero__trust {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 28px;
    font-size: 13px;
    font-weight: 700;
    color: var(--zp-muted);
}
.hero__trust li { display: flex; align-items: center; gap: 7px; }
.hero__trust svg { color: var(--zp-primary); flex: none; }

/* --------------------------------------------------------------------------
   11. Category cards
   -------------------------------------------------------------------------- */

.category-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.category-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--zp-white);
    border: 1px solid var(--zp-line);
    border-radius: var(--zp-r);
    padding: 16px;
    min-height: 44px;
    color: var(--zp-ink);
    transition: border-color 0.15s ease;
}
.category-card:hover { border-color: var(--zp-primary); color: var(--zp-ink); }
.category-card--active {
    border-color: var(--zp-primary);
    background: var(--zp-primary-wash);
}

.category-card__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.category-card__name { font-size: 15px; font-weight: 800; }
.category-card__count { display: none; font-size: 12px; color: var(--zp-soft); }

/* On small screens the icon sits bare next to the label (mobile mockup);
   the >=720px block restores the tinted tile of the desktop mockup. */
.category-card .icon-tile {
    background: transparent;
    width: auto;
    height: auto;
    border-radius: 0;
}

.icon-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--zp-primary-soft);
    color: var(--zp-primary);
    flex: none;
}
.icon-tile--lg { width: 44px; height: 44px; }

/* --------------------------------------------------------------------------
   12. Product cards
   -------------------------------------------------------------------------- */

.product-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.product-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--zp-white);
    border: 1px solid var(--zp-line);
    border-radius: var(--zp-r);
    padding: 10px;
    min-width: 0;
    transition: box-shadow 0.18s ease;
}
.product-card:hover { box-shadow: var(--shadow-card); }

.product-card__media {
    position: relative;
    display: block;
    height: 120px;
    border-radius: 10px;
    overflow: hidden;
}
.product-card__media .photo { --photo-radius: 0; }

.product-card__badge {
    position: absolute;
    top: 10px;
    left: 10px;
    background: color-mix(in srgb, var(--zp-accent) 95%, transparent);
    color: var(--zp-ink);
    border-radius: var(--zp-r-pill);
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 800;
    pointer-events: none;
}

.product-card__taxonomy { display: none; font-size: 12px; color: var(--zp-soft); }

.product-card__name {
    font-family: var(--zp-font-head);
    font-weight: 600;
    font-size: 13px;
    line-height: 1.3;
}
.product-card__name a { color: var(--zp-ink); }
.product-card__name a:hover { color: var(--zp-primary); }

.product-card__foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.price__now { font-weight: 800; font-size: 15px; }
.price__old { font-size: 13px; color: var(--zp-soft); text-decoration: line-through; }

.btn-cart {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--zp-r-pill);
    background: var(--zp-primary);
    color: var(--zp-white);
    cursor: pointer;
    flex: none;
    transition: filter 0.15s ease;
}
.btn-cart:hover { filter: brightness(0.93); }
.btn-cart svg { display: none; }
.btn-cart__plus { font-size: 18px; font-weight: 700; line-height: 1; }

/* --------------------------------------------------------------------------
   13. Grooming
   -------------------------------------------------------------------------- */

.section--grooming { padding-block: 0 24px; }

.grooming {
    background: var(--zp-primary-wash);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.grooming__head { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.grooming__head .section-title { font-size: 18px; margin-bottom: 6px; }
.grooming__lead { font-size: 13px; line-height: 1.55; color: var(--zp-muted); }
.grooming__lead--wide { display: none; }

.service-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }

.service-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--zp-white);
    border: 1px solid var(--zp-line);
    border-radius: var(--zp-r);
    padding: 22px;
}
.service-card__name { font-family: var(--zp-font-head); font-weight: 600; font-size: 17px; }
.service-card__desc { font-size: 13px; line-height: 1.55; color: var(--zp-muted); }
.service-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--zp-line);
    padding-top: 12px;
    margin-top: auto;
}
.service-card__price { font-weight: 800; font-size: 17px; }

.meta-duration {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--zp-muted);
}
.meta-duration svg { flex: none; }

/* --------------------------------------------------------------------------
   14. Booking teaser (homepage)
   -------------------------------------------------------------------------- */

.booking-teaser { display: grid; gap: 20px; }
.booking-teaser__copy { display: flex; flex-direction: column; gap: 14px; }
.booking-teaser__lead { font-size: 15px; line-height: 1.6; color: var(--zp-muted); }

.info-list { display: flex; flex-direction: column; gap: 12px; font-size: 14px; font-weight: 700; }
.info-list li { display: flex; align-items: center; gap: 10px; }
.info-list svg { color: var(--zp-primary); flex: none; }

.booking-teaser__form {
    background: var(--zp-white);
    border: 1px solid var(--zp-line);
    border-radius: var(--zp-r);
    padding: 20px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
}
.booking-teaser__form .input {
    background: var(--zp-cream);
    border-color: var(--zp-line);
    padding: 12px 14px;
    font-size: 14px;
}
.booking-teaser__form .btn { grid-column: 1 / -1; }

/* --------------------------------------------------------------------------
   15. Reviews
   -------------------------------------------------------------------------- */

.review-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }

.review-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    background: var(--zp-white);
    border: 1px solid var(--zp-line);
    border-radius: var(--zp-r);
    padding: 24px;
}
.review-card__body { margin: 0; font-size: 14px; line-height: 1.6; color: var(--zp-ink); }
.review-card__author { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.review-card__author > span { display: flex; flex-direction: column; }
.review-card__name { font-weight: 800; font-size: 14px; }
.review-card__meta { font-size: 12px; color: var(--zp-soft); }

.avatar { width: 38px; height: 38px; flex: none; }

/* --------------------------------------------------------------------------
   16. Breadcrumb & product page
   -------------------------------------------------------------------------- */

.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding-block: 20px 0;
    font-size: 13px;
    color: var(--zp-soft);
}
.breadcrumb a { color: var(--zp-soft); }
.breadcrumb a:hover { color: var(--zp-primary); }
.breadcrumb__current { color: var(--zp-ink); font-weight: 700; }

.pdp { display: grid; gap: 24px; padding-block: 24px; }

.pdp__gallery { display: flex; flex-direction: column; gap: 12px; }
.pdp__main { height: 260px; }
.pdp__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.pdp__thumbs .photo { height: 70px; }
.pdp__thumbs .photo__glyph { display: none; }
.pdp__thumbs .photo__caption { font-size: 11px; }

.pdp__info { display: flex; flex-direction: column; gap: 16px; }
.pdp__title { font-size: 26px; line-height: 1.2; letter-spacing: -0.5px; }

.pdp__rating { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pdp__rating span { font-size: 13px; color: var(--zp-muted); font-weight: 700; }

.pdp__price { display: flex; align-items: baseline; gap: 12px; }
.pdp__price-now { font-family: var(--zp-font-head); font-weight: 700; font-size: 30px; }
.pdp__price-old { font-size: 18px; color: var(--zp-soft); text-decoration: line-through; }

.pdp__summary { font-size: 15px; line-height: 1.65; color: var(--zp-muted); }

.pdp__buy { display: flex; flex-direction: column; gap: 18px; }

.option-group { border: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.option-group__label { font-size: 13px; font-weight: 800; padding: 0; }
.option-list { display: flex; gap: 10px; flex-wrap: wrap; }

.option { position: relative; cursor: pointer; }
.option input { position: absolute; opacity: 0; width: 0; height: 0; }
.option span {
    display: inline-flex;
    align-items: center;
    background: var(--zp-white);
    border: 1.5px solid var(--zp-line-strong);
    border-radius: var(--zp-r-pill);
    padding: 10px 20px;
    font: 700 14px var(--zp-font-body);
    color: var(--zp-ink);
    min-height: 44px;
}
.option input:checked + span {
    background: var(--zp-primary-tint);
    border-color: var(--zp-primary);
    color: var(--zp-primary);
    font-weight: 800;
}
.option input:focus-visible + span { outline: 2px solid var(--zp-primary); outline-offset: 2px; }

.pdp__cta { display: flex; gap: 14px; align-items: center; }

.qty {
    display: flex;
    align-items: center;
    background: var(--zp-white);
    border: 1.5px solid var(--zp-line-strong);
    border-radius: var(--zp-r-pill);
    overflow: hidden;
    flex: none;
}
.qty__step {
    width: 44px;
    height: 48px;
    border: none;
    background: transparent;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: var(--zp-ink);
}
.qty__step:hover { color: var(--zp-primary); }
.qty__value {
    width: 36px;
    border: none;
    background: transparent;
    text-align: center;
    font: 800 16px var(--zp-font-body);
    color: var(--zp-ink);
    padding: 0;
    outline: none;
}

.pdp__add { flex: 1; }

.assurances {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--zp-white);
    border: 1px solid var(--zp-line);
    border-radius: var(--zp-r);
    padding: 18px 20px;
    font-size: 13.5px;
    font-weight: 700;
}
.assurances li { display: flex; align-items: center; gap: 10px; }
.assurances svg { color: var(--zp-primary); flex: none; }

.pdp-details { padding-block: 4px 32px; }
.pdp-details__panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    background: var(--zp-white);
    border: 1px solid var(--zp-line);
    border-radius: var(--zp-r);
    padding: 24px;
}
.pdp-details__title { font-family: var(--zp-font-head); font-weight: 600; font-size: 18px; margin-bottom: 10px; }
.pdp-details__text { font-size: 14.5px; line-height: 1.7; color: var(--zp-muted); }

.spec-list { display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.spec {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid var(--zp-line);
    padding-bottom: 8px;
}
.spec:last-child { border-bottom: none; padding-bottom: 0; }
.spec dt { color: var(--zp-soft); }
.spec dd { font-weight: 700; margin: 0; text-align: right; }

/* --------------------------------------------------------------------------
   17. Booking page
   -------------------------------------------------------------------------- */

.booking { display: grid; gap: 24px; padding-block: 20px 40px; align-items: start; }

.booking__steps { display: flex; flex-direction: column; gap: 28px; min-width: 0; }

.step { display: flex; flex-direction: column; gap: 14px; }
.step__head {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--zp-font-head);
    font-weight: 600;
    font-size: 19px;
}
.step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--zp-r-pill);
    background: var(--zp-primary);
    color: var(--zp-white);
    font-family: var(--zp-font-body);
    font-size: 14px;
    font-weight: 800;
    flex: none;
}

.choice-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }

.choice {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--zp-white);
    border: 1.5px solid var(--zp-line);
    border-radius: var(--zp-r);
    padding: 20px;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}
.choice input { position: absolute; opacity: 0; width: 0; height: 0; }
.choice:has(input:checked) { background: var(--zp-primary-wash); border-color: var(--zp-primary); }
.choice:has(input:focus-visible) { outline: 2px solid var(--zp-primary); outline-offset: 2px; }

.choice__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.choice__name { font-family: var(--zp-font-head); font-weight: 600; font-size: 16px; }
.choice__check { color: var(--zp-primary); opacity: 0; flex: none; }
.choice:has(input:checked) .choice__check { opacity: 1; }
.choice__desc { font-size: 12.5px; line-height: 1.5; color: var(--zp-muted); }
.choice__foot { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
.choice__foot .meta-duration { font-size: 12.5px; }
.choice__price { font-weight: 800; font-size: 15px; }

.day-list, .hour-list { display: flex; gap: 10px; flex-wrap: wrap; }

.day {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 52px;
    background: var(--zp-white);
    border: 1.5px solid var(--zp-line-strong);
    border-radius: var(--zp-r-input);
    padding: 10px 16px;
    cursor: pointer;
    color: var(--zp-ink);
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.day input { position: absolute; opacity: 0; width: 0; height: 0; }
.day__dow { font-size: 11px; font-weight: 700; opacity: 0.75; }
.day__num { font-weight: 800; font-size: 17px; }
.day:has(input:checked) {
    background: var(--zp-primary);
    border-color: var(--zp-primary);
    color: var(--zp-white);
}
.day:has(input:focus-visible) { outline: 2px solid var(--zp-primary); outline-offset: 2px; }

.hour { position: relative; cursor: pointer; }
.hour input { position: absolute; opacity: 0; width: 0; height: 0; }
.hour span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--zp-white);
    border: 1.5px solid var(--zp-line-strong);
    border-radius: var(--zp-r-pill);
    padding: 10px 18px;
    font: 800 14px var(--zp-font-body);
    color: var(--zp-ink);
    min-height: 44px;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.hour input:checked + span {
    background: var(--zp-primary);
    border-color: var(--zp-primary);
    color: var(--zp-white);
}
.hour input:focus-visible + span { outline: 2px solid var(--zp-primary); outline-offset: 2px; }

.summary {
    display: flex;
    flex-direction: column;
    gap: 16px;
    background: var(--zp-white);
    border: 1px solid var(--zp-line);
    border-radius: var(--zp-r);
    padding: 26px;
}
.summary__title { font-size: 19px; }
.summary__rows { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.summary__row { display: flex; justify-content: space-between; gap: 16px; }
.summary__row dt { color: var(--zp-soft); }
.summary__row dd { font-weight: 800; margin: 0; text-align: right; }
.summary__row--last { border-bottom: 1px solid var(--zp-line); padding-bottom: 12px; }
.summary__total { font-size: 16px; }
.summary__total dt { color: var(--zp-ink); font-weight: 700; }
.summary__total dd { font-family: var(--zp-font-head); font-weight: 700; font-size: 20px; }
.summary__note { font-size: 12px; line-height: 1.5; color: var(--zp-soft); text-align: center; }

.notice {
    background: var(--zp-accent-wash);
    border-radius: var(--zp-r-input);
    padding: 14px 16px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--zp-ink);
}

/* --------------------------------------------------------------------------
   18. Footer
   -------------------------------------------------------------------------- */

.site-footer {
    background: var(--zp-ink);
    color: var(--zp-cream);
    margin-top: 24px;
}
.site-footer__inner { display: flex; flex-direction: column; gap: 28px; padding-block: 36px 24px; }

.footer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.footer-brand { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 14px; }
.footer-brand p { font-size: 13px; line-height: 1.6; color: var(--zp-footer-text); max-width: 260px; }

.footer-col { display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.footer-col h2 { font-family: var(--zp-font-body); font-weight: 800; font-size: 14px; margin-bottom: 4px; }
.footer-col a, .footer-col span { color: var(--zp-footer-text); }
.footer-col a:hover { color: var(--zp-white); }

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
    justify-content: space-between;
    border-top: 1px solid rgba(250, 247, 242, 0.15);
    padding-top: 18px;
    font-size: 12px;
    color: var(--zp-soft);
}
.footer-bottom a { color: var(--zp-soft); }
.footer-bottom a:hover { color: var(--zp-white); }

/* --------------------------------------------------------------------------
   19. Mobile bottom bar
   -------------------------------------------------------------------------- */

.mobile-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 45;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--zp-white);
    border-top: 1px solid var(--zp-line);
    padding: 8px 0 calc(10px + env(safe-area-inset-bottom, 0px));
}
.mobile-nav__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    font-size: 10.5px;
    font-weight: 700;
    color: var(--zp-soft);
}
.mobile-nav__item.is-active { color: var(--zp-primary); font-weight: 800; }
.mobile-nav__badge {
    position: absolute;
    top: -4px;
    right: 26px;
    background: var(--zp-accent);
    color: var(--zp-ink);
    border-radius: var(--zp-r-pill);
    font-size: 9px;
    font-weight: 800;
    padding: 1px 5px;
}

/* --------------------------------------------------------------------------
   20. Brand board
   -------------------------------------------------------------------------- */

.board-page { background: var(--zp-board); }
.board-page .site-header { background: var(--zp-board); }

.board { display: flex; flex-direction: column; gap: 40px; padding-block: 32px 64px; }
.board__section { display: flex; flex-direction: column; gap: 16px; }
.board__intro { display: flex; flex-direction: column; gap: 8px; }
.board__h1 { font-size: 26px; letter-spacing: -0.5px; }
.board__lead { max-width: 760px; font-size: 14px; line-height: 1.6; color: var(--zp-muted); }
.board__label {
    font-size: 15px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--zp-soft);
}
.board__note { font-size: 12px; color: var(--zp-soft); max-width: 720px; }

.board__row { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.board__row--top { align-items: flex-start; }

.board__tile {
    background: var(--zp-cream);
    border: 1px solid var(--zp-line);
    border-radius: var(--zp-r);
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
}
.board__tile--center { align-items: center; }
.board__tile--dark { background: var(--zp-ink); border-color: var(--zp-ink); }
.board__tile--dark .board__caption { color: #9C968A; }
.board__tile--white { background: var(--zp-white); }

.board__caption { font-size: 11px; color: var(--zp-soft); text-align: center; }
.board__caption--xs { font-size: 10px; }

.mark-row { display: flex; align-items: flex-end; gap: 18px; }
.mark-row__item { display: flex; flex-direction: column; align-items: center; gap: 8px; }

.swatch {
    width: 220px;
    max-width: 100%;
    margin: 0;
    border-radius: var(--zp-r);
    overflow: hidden;
    border: 1px solid var(--zp-line);
    background: var(--zp-white);
}
.swatch__chip { height: 110px; border-bottom: 1px solid var(--zp-line); }
.swatch__body { padding: 12px 16px; display: flex; flex-direction: column; gap: 2px; }
.swatch__name { font-weight: 800; font-size: 14px; }
.swatch__meta { font-size: 12px; color: var(--zp-soft); }

.board__panel {
    background: var(--zp-cream);
    border: 1px solid var(--zp-line);
    border-radius: var(--zp-r);
    padding: 28px 32px;
}
.board__panel--stack { display: flex; flex-direction: column; gap: 16px; }
.board__panel--form { display: flex; flex-direction: column; gap: 14px; width: 300px; max-width: 100%; }
.board__cluster { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

.type-panel {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    max-width: 980px;
}
.type-col { display: flex; flex-direction: column; gap: 14px; }
.type-col__label {
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--zp-soft);
}
.type-display { font-family: var(--zp-font-head); font-weight: 700; font-size: 32px; line-height: 1.15; letter-spacing: -0.5px; }
.type-h2 { font-family: var(--zp-font-head); font-weight: 700; font-size: 26px; }
.type-h3 { font-family: var(--zp-font-head); font-weight: 600; font-size: 18px; }
.type-body { font-size: 16px; line-height: 1.65; }
.type-body-sm { font-size: 14px; line-height: 1.6; color: var(--zp-muted); }
.type-label { font-size: 13px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--zp-primary); }

.board__specimen--product { width: 220px; max-width: 100%; }
.board__specimen--service { width: 250px; max-width: 100%; }
/* board specimens always show the desktop card treatment */
.board__specimen .product-card { padding: 14px; gap: 10px; }
.board__specimen .product-card__media { height: 150px; border-radius: calc(var(--zp-r) - 4px); }
.board__specimen .product-card__taxonomy { display: block; }
.board__specimen .product-card__name { font-size: 15px; }
.board__specimen .price__now { font-size: 17px; }
.board__specimen .btn-cart { width: 36px; height: 36px; }
.board__specimen .btn-cart svg { display: block; }
.board__specimen .btn-cart__plus { display: none; }

.icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 16px;
}
.icon-grid__item {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--zp-primary);
}
.icon-grid__item figcaption { font-size: 10.5px; color: var(--zp-soft); }

.page-link {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 300px;
    max-width: 100%;
    background: var(--zp-cream);
    border: 1px solid var(--zp-line);
    border-radius: var(--zp-r);
    padding: 22px;
    transition: border-color 0.15s ease;
}
.page-link:hover { border-color: var(--zp-primary); }
.page-link__name { font-family: var(--zp-font-head); font-weight: 600; font-size: 17px; color: var(--zp-ink); }
.page-link__meta { font-size: 12.5px; line-height: 1.5; color: var(--zp-soft); }

/* --------------------------------------------------------------------------
   21. Tablet — >=720px
   -------------------------------------------------------------------------- */

@media (min-width: 720px) {
    :root { --gutter: 32px; }

    .category-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .service-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .review-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .choice-grid { grid-template-columns: repeat(3, 1fr); }
    .field-grid { grid-template-columns: 1fr 1fr; }
    .booking-teaser__form { grid-template-columns: 1fr 1fr; }
    .type-panel { grid-template-columns: 1fr 1fr; gap: 36px; }
    .pdp-details__panel { grid-template-columns: 1fr 1fr; }

    .footer-grid { grid-template-columns: repeat(4, 1fr); }
    .footer-brand { grid-column: 1 / -1; }

    .hero__actions { flex-direction: row; }
    .hero__actions .btn { width: auto; }

    .grooming { padding: 32px; }
    .grooming__head { flex-direction: row; align-items: baseline; justify-content: space-between; }
    .grooming__lead--wide { display: block; }
    .grooming__lead--narrow { display: none; }

    .is-wide-only { display: inline; }
    .is-narrow-only { display: none; }

    /* Category cards return to the stacked desktop treatment */
    .category-card { flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px; }
    .category-card .icon-tile { background: var(--zp-primary-soft); width: 46px; height: 46px; border-radius: 12px; }
    .category-card__name { font-family: var(--zp-font-head); font-weight: 600; font-size: 16px; }
    .category-card__count { display: block; }

    /* Product cards return to the desktop treatment */
    .product-card { padding: 14px; gap: 10px; }
    .product-card__media { height: 170px; border-radius: calc(var(--zp-r) - 4px); }
    .product-card__taxonomy { display: block; }
    .product-card__name { font-size: 15px; min-height: 39px; }
    .price__now { font-size: 17px; }
    .btn-cart { width: 36px; height: 36px; }
    .btn-cart svg { display: block; }
    .btn-cart__plus { display: none; }

    .pdp__main { height: 360px; }
    .pdp__thumbs .photo { height: 90px; }

    .page-head__title { font-size: 32px; }
    .section-title { font-size: 26px; }
    .hero__title { font-size: 40px; letter-spacing: -1px; }
    .hero__media { height: 320px; }

    .type-display { font-size: 40px; }
}

/* --------------------------------------------------------------------------
   22. Desktop — >=1024px (the 1240px mockup)
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
    :root { --gutter: 48px; }

    body { padding-bottom: 0; }
    .mobile-nav { display: none; }

    /* Header */
    .site-header__inner { gap: 32px; padding-block: 18px; }
    .site-header__menu { display: none; }
    .site-header__search { display: inline-flex; }
    .site-header__logo { order: 1; margin-inline: 0; }
    .site-header__logo.logo { font-size: 24px; }
    .site-nav {
        order: 2;
        display: flex;
        flex-direction: row;
        gap: 26px;
        width: auto;
        padding-block: 0;
        margin-left: 12px;
    }
    .site-header__actions { order: 3; margin-left: auto; gap: 18px; }
    .nav-link { font-size: 14px; padding: 0; }
    .cart-link { width: 22px; height: 22px; }
    .cart-count { top: -6px; right: -8px; }

    /* Hero */
    .hero {
        grid-template-columns: 1fr 480px;
        gap: 48px;
        align-items: center;
        padding-block: 56px 48px;
    }
    .hero__copy { order: 1; gap: 20px; }
    .hero__media { order: 2; height: 400px; }
    .hero__media .photo { --photo-radius: 20px; }
    .hero__title { font-size: 52px; line-height: 1.1; letter-spacing: -1px; }
    .hero__lead { font-size: 17px; max-width: 460px; }
    .hero__actions { gap: 14px; margin-top: 6px; }
    .hero__trust { margin-top: 10px; gap: 28px; }

    /* Sections */
    .section { gap: 20px; }
    .section--categories { padding-block: 16px 48px; }
    .section--products { padding-block: 8px 48px; }
    .section--grooming { padding-block: 0; }
    .section--booking { padding-block: 48px; }
    .section--reviews { padding-block: 0 56px; }
    .link-more { font-size: 14px; }

    .page-head { padding-block: 40px 12px; }
    .page-head__title { font-size: 36px; }

    /* Grids at full desktop width */
    .category-grid { gap: 16px; }
    .product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
    .service-grid { gap: 16px; }
    .review-grid { gap: 16px; }

    /* Grooming */
    .grooming { border-radius: 20px; padding: 40px 40px 44px; gap: 24px; }
    .grooming__head .section-title { font-size: 26px; }
    .grooming__lead { font-size: 15px; }

    /* Booking teaser */
    .booking-teaser { grid-template-columns: 1fr 520px; gap: 48px; align-items: center; }
    .booking-teaser__copy { gap: 16px; }
    .booking-teaser__lead { max-width: 420px; }
    .booking-teaser__form { padding: 28px; }

    /* Product page */
    .breadcrumb { padding-block: 20px 0; }
    .pdp { grid-template-columns: 560px 1fr; gap: 48px; padding-block: 24px 48px; }
    .pdp__info { gap: 18px; }
    .pdp__main { height: 440px; }
    .pdp__title { font-size: 32px; }
    .pdp__price-now { font-size: 34px; }
    .pdp-details { padding-block: 0 48px; }
    .pdp-details__panel { gap: 32px; padding: 28px 32px; }

    /* Booking page */
    .booking { grid-template-columns: 1fr 380px; gap: 32px; padding-block: 28px 56px; }
    .booking__steps { gap: 28px; }
    .summary { position: sticky; top: 96px; }

    /* Footer */
    .site-footer { margin-top: 0; }
    .site-footer__inner { gap: 32px; padding-block: 44px 28px; }
    .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
    .footer-brand { grid-column: auto; }

    /* Board */
    .board { gap: 48px; padding-block: 40px 80px; }
    .board__tile { padding: 36px 48px; gap: 24px; }
    .board__tile--center { padding: 32px 40px; }
}

/* --------------------------------------------------------------------------
   23. Preferences
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    .site-header, .mobile-nav, .skip-link { display: none; }
    body { padding-bottom: 0; background: #fff; }
}