/*
 * InterPetsNYC — Main CSS
 * Design tokens + base typography + reusable UI kit components.
 * Page/section-specific styles live in css/pages/{slug}.css.
 */

/* ── Fonts ──────────────────────────────────────────────────────────────── */
@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Manrope';
    src: url('../fonts/Manrope-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Parisienne';
    src: url('../fonts/Parisienne-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* ── Design tokens ──────────────────────────────────────────────────────── */
:root {
    /* Brand palette — Mint Rose Garden */
    --color-primary:        #f981a8; /* Pink-300 */
    --color-primary-light:  #ff99ba;
    --color-primary-dark:   #fa5f91;
    --color-pink-400:       #ff75a8;
    --color-pink-100:       #fbe2e8;
    --color-pink-50:        #fff0f4;
    --color-secondary:      #6cbe88; /* Green-300 */
    --color-green-200:      #b0dcd6;
    --color-green-100:      #6cbe88;
    --color-accent:         #ff75a8;

    /* Neutrals */
    --color-text:           #1d1d1f;
    --color-muted:          #b3b3b3;
    --color-border:         #e0e0e0;
    --color-border-light:   #ebeced; /* table rules, input outlines */
    --color-bg:             #ffffff;
    --color-bg-alt:         #f5f5f7;

    /* Functional */
    --color-whatsapp:       #0dc143;
    --color-available:      #4abe10;

    /* Typography */
    --font-body:    'Manrope', sans-serif;
    --font-heading: 'Manrope', sans-serif;
    --font-accent:  'Parisienne', cursive;
    --line-height:  1.5;

    /* Layout — content sits in the default container; header, footer and hero
       span the wide one */
    --container-width:      1320px;
    --container-width-wide: 1540px;

    /* UI */
    --radius:      20px; /* cards */
    --radius-img:  16px; /* images inside cards */
    --radius-box:  8px;  /* FAQ, small blocks */
    --radius-pill: 90px; /* buttons, fields */
    --transition:  0.25s ease;

    /* Shadows */
    --shadow-btn-pink:  0 4px 3.5px #eec6d3;
    --shadow-btn-green: 0 4px 3.5px #d9dbda;
    --shadow-block:       0 0 4px rgba(147, 147, 147, 0.2);
    --shadow-block-hover: 0 0 4px rgba(0, 0, 0, 0.2);

    /* Header / Footer */
    --header-height:  81px;
    --header-offset:  16px;
    --topbar-height:  40px;
    /* The announcement strip above the topbar is optional — functions.php
       raises this to its real height only when Theme options carries copy
       for it, so an empty field costs no room at the top of the page. */
    --marquee-height: 0px;
    --footer-bg:      #1c1d29;

    /* Z-indexes */
    --z-dropdown: 100;
    --z-sticky:   200;
    --z-modal:    400;
}

/* ── Base ───────────────────────────────────────────────────────────────── */
html {
    font-size: 16px;
    scroll-padding-top: calc(var(--marquee-height) + var(--topbar-height) + var(--header-height) + var(--header-offset));
}

body {
    font-family:      var(--font-body);
    font-size:        16px;
    font-weight:      400;
    line-height:      var(--line-height);
    color:            var(--color-text);
    background-color: var(--color-bg);
    display:          flex;
    flex-direction:   column;
    min-height:       100vh;
}

.site      { display: flex; flex-direction: column; min-height: 100vh; }
.site-main { flex: 1; }

/* Fixed header compensation — hero sections that bleed under the header
   opt out via negative margin. */
body { padding-top: calc(var(--marquee-height) + var(--topbar-height) + var(--header-height) + var(--header-offset)); }

.container {
    width:     100%;
    max-width: var(--container-width);
    padding:   0 20px;
    margin:    0 auto;
}

.site-header .container,
.site-footer .container,
.hero .container { max-width: var(--container-width-wide); }

/* ── Typography ─────────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    color:       var(--color-text);
}

h1 { font-size: 90px; line-height: 80px; font-weight: 300; }
h2 { font-size: 64px; line-height: 68px; font-weight: 500; }
h3 { font-size: 32px; line-height: 38px; font-weight: 600; }
h4 { font-size: 16px; line-height: 1.5;  font-weight: 800; }

/* Script accent inside headings: <span class="accent">for you</span> */
.accent {
    font-family: var(--font-accent);
    font-weight: 400;
    color:       var(--color-primary);
}

/* Pink highlighted word inside headings */
.highlight { color: var(--color-primary); }
.highlight-green { color: var(--color-secondary); }

/* Centred section heading, shared by the home, shop and product sections */
.section-title {
    margin:     0;
    text-align: center;
}

/* Word picked out within a heading — "Bringing Your Kitten Home -
   <span>Delivery Options</span>", "Reserve <span>Your Kitten Now</span>" — as
   on prod. Bold only inside a heading; used bare it is just the tint. */
.color-green { color: var(--color-secondary); }
.color-pink  { color: var(--color-primary); }
h1 .color-green, h2 .color-green, h3 .color-green,
h4 .color-green, h5 .color-green, h6 .color-green,
h1 .color-pink,  h2 .color-pink,  h3 .color-pink,
h4 .color-pink,  h5 .color-pink,  h6 .color-pink { font-weight: 600; }

/* The reset neutralises <strong>/<b>; copy typed in the admin relies on them */
strong, b { font-weight: 700; }

a {
    color: inherit;
    transition: color var(--transition);
}

.text-muted { color: var(--color-muted); }

@media (max-width: 1024px) {
    h1 { font-size: 64px; line-height: 62px; }
    h2 { font-size: 36px; line-height: 42px; }
    h3 { font-size: 28px; line-height: 34px; }
}

@media (max-width: 767px) {
    h1 { font-size: 40px; line-height: 44px; }
    h2 { font-size: 28px; line-height: 32px; }
    h3 { font-size: 24px; line-height: 30px; }
}

/* ── Icons ──────────────────────────────────────────────────────────────── */
.icon {
    display: inline-block;
    flex-shrink: 0;
    vertical-align: middle;
}

/* ── Announcement marquee ───────────────────────────────────────────────── */
/* Pinned above the topbar (pages/global/marquee.php). The track holds the
   message group twice and slides to -50%, so the second copy is exactly
   where the first was when the loop restarts — no jump, no gap. */
.marquee {
    position:   fixed;
    top:        0;
    left:       0;
    right:      0;
    z-index:    var(--z-sticky);
    height:     var(--marquee-height);
    overflow:   hidden;
    background: var(--color-primary);
    transition: transform 0.25s ease, opacity 0.25s ease;
}

.marquee__track {
    display:   flex;
    width:     max-content;
    height:    100%;
    animation: marquee-scroll 42s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }

.marquee__group {
    display:     flex;
    align-items: center;
    margin:      0;
    padding:     0;
    list-style:  none;
}

.marquee__item {
    display:        inline-flex;
    align-items:    center;
    gap:            12px;
    padding-right:  12px;
    font-size:      13px;
    line-height:    1;
    font-weight:    600;
    letter-spacing: 0.04em;
    white-space:    nowrap;
    color:          #ffffff;
}
.marquee__sep {
    display: inline-flex;
    opacity: 0.65;
}

@keyframes marquee-scroll {
    to { transform: translateX(-50%); }
}

/* Motion is decoration here — the copy is already fully readable standing
   still, so it simply stops. */
@media (prefers-reduced-motion: reduce) {
    .marquee__track { animation: none; }
}

/* ── Topbar ─────────────────────────────────────────────────────────────── */
/* Fixed independently above .site-header rather than laid out inside it —
   .site-header's own padding/spacing stays exactly as it was; it only moves
   down by --topbar-height (0 below 1024px, where the topbar itself hides —
   see the responsive block).

   js/main.js adds html.is-scrolled a little way into the page: the topbar
   slides up out of the way and .site-header's own "top" closes the gap
   behind it, matching the reference (elementor-element-0a38232) — the
   contact bar only makes sense at the very top of the page, not hovering
   over content lower down. --topbar-height itself is left untouched here on
   purpose: body's padding-top and the hero bands' negative margins both key
   off it, and changing it live would shift the whole page under the visitor
   mid-scroll. The header staying position:fixed and just sliding is what
   keeps this a small, self-contained visual change instead of that. */
.topbar {
    position:   fixed;
    top:        var(--marquee-height);
    left:       0;
    right:      0;
    z-index:    var(--z-sticky);
    height:     var(--topbar-height);
    background: var(--color-text);
    transition: transform 0.25s ease, opacity 0.25s ease;
}
/* Both strips clear the viewport together, each by the pair's combined
   height — the topbar starts --marquee-height down, so its own -100% would
   leave that much of it still showing. */
html.is-scrolled .marquee,
html.is-scrolled .topbar {
    transform:      translateY(calc(-1 * (var(--marquee-height) + var(--topbar-height))));
    opacity:        0;
    pointer-events: none;
}

.topbar__inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             24px;
    height:          100%;
}

.topbar__phone {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    font-size:       14px;
    font-weight:     500;
    color:           #ffffff;
    text-decoration: none;
    transition:      color var(--transition);
}
.topbar__phone:hover { color: var(--color-primary); }

.topbar__socials {
    display: flex;
    gap:     16px;
}
.topbar__social {
    display:    inline-flex;
    color:      #ffffff;
    transition: color var(--transition);
}
.topbar__social:hover { color: var(--color-primary); }

/* ── Header ─────────────────────────────────────────────────────────────── */
.site-header {
    position: fixed;
    top:      calc(var(--marquee-height) + var(--topbar-height));
    left:     0;
    right:    0;
    z-index:  var(--z-sticky);
    padding-top: var(--header-offset);
    transition:  top 0.25s ease;
}
/* Topbar's gone — close the gap it leaves behind instead of hovering the
   nav over empty space */
html.is-scrolled .site-header { top: 0; }

/* Offset the fixed header (and topbar) below the WP admin bar for logged-in users */
.admin-bar .topbar      { top: calc(32px + var(--marquee-height)); }
.admin-bar .marquee     { top: 32px; }
.admin-bar .site-header { top: calc(32px + var(--marquee-height) + var(--topbar-height)); }
html.is-scrolled.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) {
    .admin-bar .topbar      { top: calc(46px + var(--marquee-height)); }
    .admin-bar .marquee     { top: 46px; }
    .admin-bar .site-header { top: calc(46px + var(--marquee-height) + var(--topbar-height)); }
    html.is-scrolled.admin-bar .site-header { top: 46px; }
}

.header-bar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             24px;
    min-height:      var(--header-height);
    padding:         16px 50px;
    background:      #ffffff;
    border-radius:   100px;
    box-shadow:      0 2px 9px rgba(0, 0, 0, 0.1);
}

.site-logo { display: flex; align-items: center; }
.site-logo img,
.site-logo svg {
    display: block;
    height:  42px;
    width:   auto;
}
.site-title-link {
    font-size:       20px;
    font-weight:     800;
    color:           var(--color-secondary);
    text-decoration: none;
}

.nav-primary ul {
    display:    flex;
    align-items: center;
    list-style: none;
    margin:     0;
    padding:    0;
}
.nav-primary > ul > li { position: relative; }

/* Invisible bridge over the gap between the link and its dropdown (see
   margin-top on .sub-menu below) — without it the cursor leaves the <li>
   while crossing the gap, :hover is lost, and the menu closes before it
   arrives. */
.nav-primary > ul > li.menu-item-has-children::after {
    content: '';
    position: absolute;
    top:      100%;
    left:     0;
    right:    0;
    height:   14px;
}

/* .megamenu sits below the whole header (position:fixed, sized off the
   header stack) rather than right under the <li> like .sub-menu — the gap
   it leaves under the link is the li's own vertical-centering slack inside
   the tall header-bar PLUS the megamenu's 14px offset, well past a plain
   14px bridge. Tall enough to cover that in one go. */
.nav-primary > ul > li.has-megamenu::after {
    content: '';
    position: absolute;
    top:      100%;
    left:     0;
    right:    0;
    height:   46px;
}

.nav-primary a {
    display:         inline-flex;
    align-items:     center;
    gap:             6px;
    padding:         0 20px;
    font-size:       16px;
    font-weight:     600;
    line-height:     1.5;
    color:           var(--color-text);
    text-decoration: none;
    white-space:     nowrap;
}
.nav-primary a:hover,
.nav-primary .current-menu-item > a,
.nav-primary .current_page_item > a { color: var(--color-secondary); }

/* Chevron appended to items with children — see the nav_menu_item_title
   filter in functions.php. Rotates open on hover/focus, matching the
   dropdown it points at. */
.nav-caret {
    display:    inline-flex;
    opacity:    0.6;
    transition: transform var(--transition);
}
.menu-item-has-children:hover > a .nav-caret,
.menu-item-has-children:focus-within > a .nav-caret,
.has-megamenu:hover > a .nav-caret,
.has-megamenu:focus-within > a .nav-caret { transform: rotate(180deg); }

/* Dropdown — hidden until the parent item is hovered or keyboard-focused.
   Overrides the flex-row layout that ".nav-primary ul" sets for the
   top-level bar — a submenu needs to stack, not run alongside it. */
.nav-primary .sub-menu {
    position:       absolute;
    display:        block;
    top:            100%;
    left:           0;
    min-width:      300px;
    margin-top:     14px;
    padding:        10px;
    background:     #ffffff;
    border-radius:  var(--radius-box);
    box-shadow:     0 16px 32px rgba(0, 0, 0, 0.12);
    opacity:        0;
    visibility:     hidden;
    pointer-events: none;
    transform:      translateY(8px);
    transition:     opacity var(--transition), transform var(--transition), visibility var(--transition);
    z-index:        var(--z-dropdown);
}
.menu-item-has-children:hover > .sub-menu,
.menu-item-has-children:focus-within > .sub-menu {
    opacity:        1;
    visibility:     visible;
    pointer-events: auto;
    transform:      translateY(0);
}
.nav-primary .sub-menu li { width: 100%; }
.nav-primary .sub-menu a {
    display:        block;
    padding:        9px 18px;
    font-size:      14px;
    font-weight:    700;
    text-align:     right;
    white-space:    normal;
}
.nav-primary .sub-menu a:hover { color: var(--color-primary); }

/* ── Mega menu (shop link — see nav_megamenu_html() in functions.php) ────── */
/* Same hidden-until-hover mechanics as .sub-menu above, but full viewport
   width instead of a fixed-width dropdown, and positioned from the nav
   item's own left edge via a negative offset rather than left:0 (which
   would only line up if the item happened to sit at the page's own left
   edge). */
/* Same outer width as .header-bar — that's .site-header .container's own
   max-width (--container-width-wide), not the viewport — so the dropdown
   reads as belonging to the header pill instead of running edge to edge. */
.megamenu {
    position:       fixed;
    /* Floats 14px below the pill (same gap .sub-menu's own margin-top uses)
       rather than sitting flush against its flat bottom edge — flush read as
       one hard-cornered box glued under a fully rounded pill; a gap plus its
       own fully rounded corners reads as a second floating card instead. */
    top:            calc(var(--marquee-height) + var(--topbar-height) + var(--header-height) + var(--header-offset) + 14px);
    left:           0;
    right:          0;
    /* .header-bar's own rendered width is .site-header .container's
       max-width minus that container's 20px×2 padding — not
       --container-width-wide by itself. left:0/right:0 here span the full
       viewport regardless of padding (padding insets content, not a fixed
       element's own box), so matching .header-bar takes the same formula
       explicitly: min(100vw − 40px, wide max-width − 40px). */
    width:          min(100vw - 40px, calc(var(--container-width-wide) - 40px));
    margin:         0 auto;
    padding:        22px 0;
    background:     #ffffff;
    border-radius:  24px;
    box-shadow:     0 16px 32px rgba(0, 0, 0, 0.12);
    opacity:        0;
    visibility:     hidden;
    pointer-events: none;
    transform:      translateY(8px);
    transition:     opacity var(--transition), transform var(--transition), visibility var(--transition);
    z-index:        var(--z-dropdown);
}
/* The inner .container would otherwise apply its own (narrower) max-width on
   top of the one above — this just needs .header-bar's own 50px inset. */
.megamenu .container { max-width: none; padding: 0 50px; }
/* .site-header's own top collapses to 0 on scroll, but the pill inside it
   (padding-top + .header-bar's height) still sits ~97px down — this has to
   keep that offset or the panel lands on top of the header instead of below it */
html.is-scrolled .megamenu { top: calc(var(--header-height) + var(--header-offset) + 14px); }
.has-megamenu:hover > .megamenu,
.has-megamenu:focus-within > .megamenu {
    opacity:        1;
    visibility:     visible;
    pointer-events: auto;
    transform:      translateY(0);
}

/* Evenly across the row regardless of how many categories exist — compact
   rows (small icon + name, side by side) fit five per row comfortably, so a
   dozen categories still resolves to a short couple of rows instead of a
   tall stack. */
/* Prefixed with .megamenu (not just .megamenu__list) — this is still a <ul>
   nested inside .nav-primary, so ".nav-primary ul { display: flex; … }"
   above outranks a bare single-class selector here and silently wins the
   cascade, turning the grid back into an unequal-width flex row. */
/* auto-fit + a capped track width (not 1fr, which stretches each column to
   fill the full row) keeps a short "Devon Rex"-length item from sitting in
   a track wide enough for a much longer one — items pack at their own
   size and the whole block centers, instead of spreading thin across full
   width with a lot of empty space trailing each one. */
.megamenu .megamenu__list {
    display:               grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 200px));
    justify-content:       center;
    align-items:           center;
    gap:                   6px 12px;
    margin:                0;
    padding:               0;
    list-style:            none;
}

/* Prefixed for the same reason as .megamenu .megamenu__list above — this is
   still an <a> inside .nav-primary, so ".nav-primary a" (display, gap,
   padding, white-space) would otherwise outrank several properties here. */
.megamenu .megamenu__link {
    display:         flex;
    flex-direction:  row;
    align-items:     center;
    gap:             10px;
    padding:         6px 8px;
    border-radius:   var(--radius-box);
    text-align:      left;
    text-decoration: none;
    white-space:     normal;
    transition:      background var(--transition);
}
.megamenu__link:hover { background: var(--color-pink-50); }

.megamenu__thumb {
    flex-shrink:   0;
    display:       block;
    width:         34px;
    height:        34px;
    border-radius: 50%;
    overflow:      hidden;
    background:    var(--color-pink-50);
}
.megamenu__thumb img {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
}
.megamenu__thumb--empty {
    display:         flex;
    align-items:     center;
    justify-content: center;
    color:           var(--color-primary);
}

.megamenu__name {
    min-width:     0;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
    font-size:     13px;
    font-weight:   600;
    line-height:   18px;
    color:         var(--color-text);
}
.megamenu__link:hover .megamenu__name { color: var(--color-primary); }

.header-actions {
    display:     flex;
    align-items: center;
    gap:         24px;
}

.header-icon {
    position: relative;
    display:  inline-flex;
    color:    var(--color-text);
}
.header-icon:hover { color: var(--color-primary); }
.header-icon__count {
    position:      absolute;
    top:           -4px;
    right:         -6px;
    min-width:     12px;
    height:        12px;
    padding:       0 3px;
    border-radius: 50px;
    background:    var(--color-primary);
    color:         #ffffff;
    font-size:     8px;
    font-weight:   600;
    line-height:   12px;
    text-align:    center;
}

.menu-toggle {
    display:         none;
    flex-direction:  column;
    justify-content: center;
    gap:             5px;
    width:           28px;
    height:          28px;
    padding:         0;
    border:          none;
    background:      none;
    cursor:          pointer;
}
.menu-toggle span {
    display:       block;
    width:         24px;
    height:        2px;
    border-radius: 2px;
    background:    var(--color-text);
    transition:    transform var(--transition), opacity var(--transition);
}
.menu-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle.is-active span:nth-child(2) { opacity: 0; }
.menu-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Burger from 1299px — the full menu is too wide below that */
@media (max-width: 1299px) {
    .nav-primary { display: none; }
    .menu-toggle { display: flex; }
}

@media (max-width: 1024px) {
    :root { --header-height: 64px; --header-offset: 0px; --topbar-height: 0px; }

    /* Contact bar loses its room on a narrower header — the same info is
       already one tap away in the mobile panel */
    .topbar { display: none; }

    .site-header { padding-top: 0; }
    .site-header .container { padding: 0; }

    .header-bar {
        border-radius: 0;
        padding:       12px 20px;
        gap:           16px;
    }

    .site-logo img,
    .site-logo svg { height: 32px; }
}

/* ── Mobile slide-out panel ─────────────────────────────────────────────── */
/* Opens below the fixed topbar/header instead of covering them, so the
   header (and its menu-toggle, now doubling as the close button) stays
   visible and usable while the panel is open. */
.mobile-panel {
    position:       fixed;
    top:            calc(var(--marquee-height) + var(--topbar-height) + var(--header-height) + var(--header-offset));
    right:          0;
    bottom:         0;
    left:           0;
    z-index:        var(--z-modal);
    pointer-events: none;
}
.mobile-panel__cover {
    position:   absolute;
    inset:      0;
    background: rgba(0, 0, 0, 0.4);
    opacity:    0;
    transition: opacity 0.3s ease;
}
.mobile-panel__inner {
    position:       absolute;
    top:            0;
    right:          0;
    bottom:         0;
    width:          60%;
    max-width:      100%;
    display:        flex;
    flex-direction: column;
    gap:            32px;
    padding:        24px 20px;
    background:     #ffffff;
    box-shadow:     -4px 0 24px rgba(0, 0, 0, 0.12);
    overflow-y:     auto;
    transform:      translateX(100%);
    transition:     transform 0.3s ease;
}

/* Below tablet, 60% of the screen is too cramped for the nav + contacts
   stack, so the panel takes the full width instead. */
@media (max-width: 767px) {
    .mobile-panel__inner { width: 100%; }
}
.mobile-panel.is-open { pointer-events: auto; }
.mobile-panel.is-open .mobile-panel__cover { opacity: 1; }
.mobile-panel.is-open .mobile-panel__inner { transform: translateX(0); }

body.panel-open { overflow: hidden; }

.mobile-panel__nav ul {
    list-style: none;
    margin:     0;
    padding:    0;
}
.mobile-panel__nav a {
    display:         block;
    padding:         12px 0;
    font-size:       16px;
    font-weight:     600;
    color:           var(--color-text);
    text-decoration: none;
}
.mobile-panel__nav a:hover,
.mobile-panel__nav .current-menu-item > a,
.mobile-panel__nav .current_page_item > a { color: var(--color-secondary); }

.mobile-panel__nav > ul > li:not(:last-child) { border-bottom: 1px solid var(--color-border-light); }

.mobile-panel__nav a {
    display:     flex;
    align-items: center;
    gap:         8px;
}

/* Chevron toggles the submenu open/closed — tapping it never navigates
   (handled in main.js), tapping the rest of the row still does. Padding
   brings the tap target up to the 44px touch-size guideline without
   visually ballooning the icon itself; the negative margin keeps the row's
   own edges from shifting since the padding eats into it either way. */
.mobile-panel__nav .nav-caret {
    display:         flex;
    align-items:     center;
    justify-content: center;
    margin-left:     auto;
    margin-right:    -14px;
    padding:         16px 14px;
    color:            var(--color-text);
    transition:       transform var(--transition), color var(--transition);
}
.mobile-panel__nav .nav-caret .icon { width: 16px; height: 16px; }
.mobile-panel__nav .menu-item-has-children.is-open > a,
.mobile-panel__nav .has-megamenu.is-open > a {
    color: var(--color-secondary);
}
.mobile-panel__nav .menu-item-has-children.is-open > a .nav-caret,
.mobile-panel__nav .has-megamenu.is-open > a .nav-caret {
    color:     var(--color-secondary);
    transform: rotate(180deg);
}

.mobile-panel__nav .sub-menu {
    max-height:   0;
    overflow:     hidden;
    margin-left:  4px;
    padding-left: 16px;
    border-left:  2px solid var(--color-border-light);
    transition:   max-height 0.3s ease;
}
.mobile-panel__nav .menu-item-has-children.is-open > .sub-menu { max-height: 600px; }
.mobile-panel__nav .sub-menu a {
    padding:     11px 0;
    font-size:   14px;
    font-weight: 500;
    color:       #6b6b70;
}
.mobile-panel__nav .sub-menu a:hover { color: var(--color-primary); }

/* Mega menu, inside the panel — same accordion flow as .sub-menu above
   (tap the caret, .is-open drives a max-height reveal) rather than the
   desktop version's position:fixed dropdown sized to .header-bar, which
   means nothing inside a ~340px slide-out panel. The category grid itself
   collapses to one stacked column, same row shape as .sub-menu's own links. */
.mobile-panel__nav .megamenu {
    position:       static;
    width:          auto;
    max-width:      none;
    max-height:     0;
    margin:         0;
    padding:        0;
    overflow:       hidden;
    border-left:    none;
    border-radius:  0;
    background:     transparent;
    box-shadow:     none;
    opacity:        1;
    visibility:     visible;
    pointer-events: auto;
    transform:      none;
    transition:     max-height 0.6s ease;
}
.mobile-panel__nav .has-megamenu.is-open > .megamenu {
    max-height: 700px;
    transition: max-height 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-panel__nav .megamenu .container { padding: 0; }

.mobile-panel__nav .megamenu__list {
    display:               block;
    grid-template-columns: none;
}
.mobile-panel__nav .megamenu__link {
    flex-direction: row;
    padding:        11px 0;
    border-radius:  0;
}
.mobile-panel__nav .megamenu__link:hover { background: none; }
.mobile-panel__nav .megamenu__thumb { width: 28px; height: 28px; }
.mobile-panel__nav .megamenu__name {
    font-size:   14px;
    font-weight: 500;
    color:       #6b6b70;
    white-space: normal;
}
.mobile-panel__nav .megamenu__link:hover .megamenu__name { color: var(--color-primary); }

.mobile-panel__contacts {
    display:        flex;
    flex-direction: column;
    gap:            16px;
    margin-top:     auto;
}
.mobile-panel__contact {
    display:         inline-flex;
    align-items:     center;
    gap:             10px;
    font-size:       14px;
    font-weight:     500;
    color:           var(--color-text);
    text-decoration: none;
}
.mobile-panel__contact:hover { color: var(--color-primary); }
.mobile-panel__contact .icon { color: var(--color-primary); }

.mobile-panel__socials {
    display: flex;
    gap:     12px;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             10px;
    height:          50px;
    padding:         16px 24px;
    border:          1px solid rgba(255, 255, 255, 0.7);
    border-radius:   var(--radius-pill);
    font-family:     var(--font-body);
    font-size:       16px;
    font-weight:     600;
    letter-spacing:  0.64px;
    line-height:     1;
    color:           #ffffff;
    text-decoration: none;
    white-space:     nowrap;
    cursor:          pointer;
    transition:      background var(--transition), box-shadow var(--transition),
                     border-color var(--transition), color var(--transition);
}

.btn--pink {
    background: linear-gradient(180deg, var(--color-primary-light) 0%, var(--color-primary) 100%);
    box-shadow: var(--shadow-btn-pink);
}
.btn--pink:hover {
    background: linear-gradient(180deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
    box-shadow: none;
}

.btn--green {
    background: linear-gradient(180deg, var(--color-green-200) 0%, var(--color-secondary) 100%);
    box-shadow: var(--shadow-btn-green);
}
.btn--green:hover {
    background: var(--color-secondary);
    box-shadow: none;
}

/* Compact size: Shop Now, Explore Colors, … */
.btn--sm {
    height:         40px;
    font-size:      14px;
    font-weight:    500;
    letter-spacing: 0.56px;
}

/* Flat green fill — the gradient version reads too soft next to body copy */
.btn--green-flat {
    background:   var(--color-secondary);
    border-color: var(--color-secondary);
    box-shadow:   none;
}
.btn--green-flat:hover {
    background: linear-gradient(180deg, var(--color-green-200) 0%, var(--color-secondary) 100%);
    box-shadow: var(--shadow-btn-green);
}

.btn--whatsapp {
    background:   var(--color-whatsapp);
    border-color: var(--color-whatsapp);
    box-shadow:   none;
}
.btn--whatsapp:hover { background: #0aa93a; }

/* Outline pill: Let`s Meet */
.btn--outline {
    height:        30px;
    padding:       6px 16px;
    border:        1px solid var(--color-primary);
    border-radius: 60px;
    background:    transparent;
    box-shadow:    none;
    font-size:     12px;
    font-weight:   400;
    letter-spacing: 0;
    color:         var(--color-primary);
}
.btn--outline:hover {
    background: var(--color-primary);
    color:      #ffffff;
}

/* Body-copy pill used across the content sections: Discover More, Get In Touch…
   Declared after --outline so it can resize that variant too. */
.btn--text {
    height:         auto;
    padding:        8px 24px;
    border-radius:  60px;
    font-size:      14px;
    font-weight:    400;
    letter-spacing: 0;
}

/* Dark pill: Buy with G-Pay */
.btn--dark {
    background: var(--color-text);
    border-color: var(--color-text);
}
.btn--dark:hover {
    background: #000000;
}

/* ── Round icon buttons (socials, WhatsApp, phone…) ────────────────────── */
.icon-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           50px;
    height:          50px;
    border-radius:   50%;
    border:          none;
    background:      var(--color-bg-alt);
    color:           var(--color-text);
    cursor:          pointer;
    transition:      background var(--transition), color var(--transition);
}
.icon-btn:hover { background: var(--color-pink-100); }

.icon-btn--dark       { background: var(--color-text); color: #ffffff; }
.icon-btn--dark:hover { background: var(--color-primary); }

.icon-btn--pink       { background: var(--color-primary); color: #ffffff; }
.icon-btn--pink:hover { background: var(--color-primary-dark); }

.icon-btn--whatsapp       { background: var(--color-whatsapp); color: #ffffff; }
.icon-btn--whatsapp:hover { background: #0aa338; }

.icon-btn--sm { width: 30px; height: 30px; }

/* ── Text links ─────────────────────────────────────────────────────────── */
/* Arrow link: See all Breeds → */
.link-more {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    font-size:       13px;
    font-weight:     600;
    color:           var(--color-text);
    text-decoration: none;
}
.link-more:hover { color: var(--color-secondary); }

.link-more--pink:hover { color: var(--color-primary); }

/* ── Chips & badges ─────────────────────────────────────────────────────── */
.chip {
    display:       inline-flex;
    align-items:   center;
    gap:           8px;
    padding:       4px 8px;
    border-radius: 50px;
    font-size:     12px;
    font-weight:   400;
    line-height:   1.2;
    color:         var(--color-text);
}
.chip--pink  { background: var(--color-pink-100); }
.chip--green { background: var(--color-green-200); }

.badge {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    height:          24px;
    padding:         0 16px;
    border-radius:   50px;
    font-size:       12px;
    font-weight:     600;
    line-height:     1;
    color:           #ffffff;
}
.badge--available { background: rgba(74, 190, 16, 0.8); }

/* Photo counter: dark pill with camera icon */
.badge--count {
    gap:        2px;
    height:     auto;
    padding:    2px 5px;
    background: rgba(0, 0, 0, 0.3);
}

/* ── Forms ──────────────────────────────────────────────────────────────── */
/* Big search bar: [icon] input …………… [Search button] */
.search-bar {
    display:       flex;
    align-items:   center;
    gap:           12px;
    height:        70px;
    padding:       10px 10px 10px 24px;
    border-radius: var(--radius-pill);
    background:    #ffffff;
    box-shadow:    var(--shadow-block);
}
.search-bar__icon { color: var(--color-secondary); }
.search-bar__input {
    flex:        1;
    min-width:   0;
    border:      none;
    outline:     none;
    background:  transparent;
    font-family: var(--font-body);
    font-size:   16px;
    color:       var(--color-text);
}
.search-bar__input::placeholder { color: var(--color-muted); }

/* Underline text field (contact forms) */
.field {
    width:         100%;
    padding:       12px 0;
    border:        none;
    border-bottom: 1px solid var(--color-border);
    outline:       none;
    background:    transparent;
    font-family:   var(--font-body);
    font-size:     14px;
    color:         var(--color-text);
    transition:    border-color var(--transition);
}
.field::placeholder { color: var(--color-muted); }
.field:hover        { border-bottom-color: var(--color-muted); }
.field:focus        { border-bottom-color: var(--color-primary); }

/* Checkbox */
.checkbox {
    width:        16px;
    height:       16px;
    accent-color: var(--color-primary);
    cursor:       pointer;
}

/* ── Live search results ────────────────────────────────────────────────── */
/* Dropdown js/main.js opens under any .js-product-search form (home hero
   search, the Kitten Shop toolbar search) — one block, shared. The parent
   form needs position: relative; each search field sets that itself. */
.search-results {
    position:      absolute;
    top:           calc(100% + 8px);
    left:          0;
    right:         0;
    z-index:       var(--z-dropdown);
    max-height:    420px;
    overflow-y:    auto;
    padding:       8px;
    border-radius: var(--radius);
    background:    #ffffff;
    box-shadow:    0 14px 24px rgba(190, 171, 171, 0.35);
    display:       none;
}
.search-results.is-open { display: block; }

.search-results__item {
    display:         flex;
    align-items:     center;
    gap:             12px;
    padding:         8px;
    border-radius:   var(--radius-img);
    text-decoration: none;
    color:           var(--color-text);
    transition:      background var(--transition);
}
.search-results__item:hover,
.search-results__item.is-active { background: var(--color-green-100); }

.search-results__thumb {
    flex-shrink:   0;
    width:         56px;
    height:        56px;
    border-radius: 12px;
    overflow:      hidden;
    background:    var(--color-bg-alt);
}
.search-results__thumb img {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
}

.search-results__title {
    font-size:   14px;
    font-weight: 700;
}
.search-results__meta {
    font-size: 12px;
    color:     var(--color-muted);
}
.search-results__item:hover .search-results__meta,
.search-results__item.is-active .search-results__meta { color: var(--color-text); }
.search-results__price {
    margin-left: auto;
    padding-left: 12px;
    font-size:   14px;
    font-weight: 600;
    white-space: nowrap;
}

.search-results__all {
    display:         block;
    margin-top:      4px;
    padding:         12px;
    border-top:      1px solid var(--color-border);
    font-size:       14px;
    font-weight:     600;
    color:           var(--color-primary);
    text-align:      center;
    text-decoration: none;
}
.search-results__all:hover { color: var(--color-primary-dark); }

.search-results__empty,
.search-results__loading {
    padding:    20px;
    font-size:  14px;
    color:      var(--color-muted);
    text-align: center;
}

.search-results__loading span {
    display:        inline-block;
    width:          8px;
    height:         8px;
    margin:         0 3px;
    border-radius:  50%;
    background:     var(--color-primary);
    animation:      search-dot 1.2s infinite ease-in-out both;
}
.search-results__loading span:nth-child(2) { animation-delay: 0.15s; }
.search-results__loading span:nth-child(3) { animation-delay: 0.3s; }

@keyframes search-dot {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
    40%           { opacity: 1;   transform: scale(1); }
}

@media (max-width: 767px) {
    .search-results__price { display: none; }
}

/* ── JetFormBuilder form ────────────────────────────────────────────────── */
/* The plugin renders its own markup, so the form is styled by element rather
   than by class — that survives plugin updates and block reshuffles. Shared by
   the home contact section and the Contact page card; each of them only
   restates what differs (label visibility, button colour). */
.jfb-form form {
    display:        flex;
    flex-direction: column;
    gap:            16px;
}

/* The plugin already spaces its rows; on top of the form's own gap that reads
   as 26px between fields, so its padding is dropped */
.jfb-form .jet-form-builder-row { padding: 0; }

.jfb-form .jet-form-builder__label {
    display:     block;
    margin:      0 0 6px;
    font-size:   14px;
    line-height: 21px;
    font-weight: 500;
    color:       #3b3d42;
}

.jfb-form input[type="text"],
.jfb-form input[type="email"],
.jfb-form input[type="tel"],
.jfb-form input[type="number"],
.jfb-form textarea,
.jfb-form select {
    width:         100%;
    padding:       12px 16px;
    border:        1px solid #ebeced;
    border-radius: var(--radius-box);
    background:    #ffffff;
    font-family:   inherit;
    font-size:     16px;
    line-height:   20px;
    color:         var(--color-text);
    transition:    border-color var(--transition);
}
.jfb-form input::placeholder,
.jfb-form textarea::placeholder { color: var(--color-muted); }

.jfb-form input:focus,
.jfb-form textarea:focus,
.jfb-form select:focus {
    outline:      none;
    border-color: var(--color-secondary);
}

.jfb-form textarea {
    min-height: 150px;
    resize:     vertical;
}

/* Submit response — the plugin boxes it in a bordered 20px block */
.jfb-form .jet-form-builder-message {
    margin:      0;
    padding:     0;
    border:      0;
    text-align:  left;
    font-size:   14px;
    line-height: 20px;
}
.jfb-form .jet-form-builder-message--success { color: var(--color-secondary); }
.jfb-form .jet-form-builder-message--error   { color: var(--color-primary-dark); }

.jfb-form button[type="submit"],
.jfb-form .jet-form-builder__submit {
    /* the plugin ships the button as flex/flex-start, so text-align cannot
       centre the label — the flex alignment has to do it */
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    align-self:      flex-start;
    padding:         10px 24px;
    border:          none;
    border-radius:   var(--radius-pill);
    background:      var(--color-primary);
    font-family:     inherit;
    font-size:       14px;
    font-weight:     500;
    line-height:     20px;
    color:           #ffffff;
    cursor:          pointer;
    transition:      background var(--transition), box-shadow var(--transition);
}
.jfb-form button[type="submit"]:hover,
.jfb-form .jet-form-builder__submit:hover {
    background: var(--color-primary-dark);
    box-shadow: var(--shadow-btn-pink);
}

@media (max-width: 767px) {
    /* The button sits inside the plugin's flex wrapper, so align-self cannot
       stretch it — the width has to come from the button itself */
    .jfb-form button[type="submit"],
    .jfb-form .jet-form-builder__submit { width: 100%; }
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card {
    display:         block;
    background:      var(--color-bg-alt);
    border-radius:   var(--radius);
    padding:         8px 8px 16px;
    text-decoration: none;
    color:           var(--color-text);
    transition:      background var(--transition);
}
.card:hover { background: var(--color-green-100); }

.card__photo {
    position:      relative;
    border-radius: var(--radius-img);
    overflow:      hidden;
}
.card__photo img {
    display:    block;
    width:      100%;
    height:     100%;
    object-fit: cover;
}

/* ── FAQ / accordion item ───────────────────────────────────────────────── */
.faq-item {
    background:    #ffffff;
    border-radius: var(--radius-box);
    padding:       14px 16px;
    box-shadow:    var(--shadow-block);
    transition:    box-shadow var(--transition);
}
.faq-item:hover,
.faq-item.is-open { box-shadow: var(--shadow-block-hover); }

.faq-item__head {
    display:     flex;
    align-items: center;
    gap:         16px;
    width:       100%;
    border:      none;
    background:  none;
    padding:     0;
    font-family: var(--font-body);
    font-size:   16px;
    font-weight: 600;
    line-height: 1.4;
    color:       var(--color-text);
    text-align:  left;
    cursor:      pointer;
}
.faq-item__head .icon { color: var(--color-primary); }

.faq-item__body {
    padding:     10px 0 0 40px;
    font-size:   16px;
    line-height: 1.5;
    color:       rgba(0, 0, 0, 0.6);
}

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer {
    background: var(--footer-bg);
    color:      rgba(255, 255, 255, 0.6);
    padding:    56px 0 32px;
}

/* Column minimums keep the contact and subscribe blocks from collapsing
   below their content; the breakpoints below drop columns before that
   minimum would overflow the container. */
.footer-top {
    display:               grid;
    grid-template-columns: minmax(240px, 1.6fr) 1fr 1fr minmax(214px, 1.2fr) 200px;
    column-gap:            80px;
    row-gap:               40px;
    padding-bottom:        40px;
    border-bottom:         1px solid rgba(255, 255, 255, 0.1);
}

.footer-about {
    display:        flex;
    flex-direction: column;
    gap:            20px;
}
.footer-about__logo img { display: block; height: 42px; width: auto; }
.footer-about__text {
    max-width:   260px;
    font-size:   14px;
    font-weight: 300;
    line-height: 1.5;
}

.footer-socials { display: flex; gap: 12px; }
.footer-socials__link {
    display:    inline-flex;
    transition: opacity var(--transition);
}
.footer-socials__link:hover { opacity: 0.8; }
.footer-socials__link .icon { width: 32px; height: 32px; }

.footer-col__title {
    color:         #ffffff;
    font-size:     14px;
    font-weight:   700;
    margin-bottom: 20px;
}

.footer-col ul {
    list-style: none;
    margin:     0;
    padding:    0;
    display:        flex;
    flex-direction: column;
    gap:            8px;
}
.footer-col a {
    font-size:       14px;
    font-weight:     300;
    color:           rgba(255, 255, 255, 0.6);
    text-decoration: none;
}
.footer-col a:hover,
.footer-col .current-menu-item > a { color: var(--color-primary); }

.footer-contacts {
    display:        flex;
    flex-direction: column;
}
.footer-contact {
    display:         flex;
    align-items:     center;
    gap:             12px;
    text-decoration: none;
    color:           inherit;
}
.footer-contact + .footer-contact { margin-top: 20px; }
.footer-contact__icon { width: 36px; height: 36px; }
.footer-contact__body {
    display:        flex;
    flex-direction: column;
    gap:            2px;
}
.footer-contact__label {
    color:       rgba(255, 255, 255, 0.6);
    font-size:   12px;
    font-weight: 600;
}
.footer-contact__value {
    font-size:   14px;
    font-weight: 400;
    color:       #ffffff;
    transition:  color var(--transition);
}
.footer-contact:hover .footer-contact__value { color: var(--color-primary); }

.footer-subscribe__title {
    color:       #ffffff;
    font-size:   14px;
    font-weight: 700;
    margin:      16px 0 4px;
}
.footer-subscribe__text {
    font-size:   14px;
    font-weight: 300;
    line-height: 1.5;
}
/* JetFormBuilder renders the subscribe form, so it is styled by element
   rather than by class — that survives plugin updates and field reshuffles. */
.footer-subscribe__form { max-width: 280px; }

.footer-subscribe__form form {
    display:        flex;
    flex-direction: column;
    gap:            8px;
}

/* The plugin spaces its rows itself; with the form's own gap it doubles up */
.footer-subscribe__form .jet-form-builder-row { padding: 0; }

/* Labelled by placeholder, like the design — labels stay for screen readers */
.footer-subscribe__form .jet-form-builder__label {
    clip:     rect(1px, 1px, 1px, 1px);
    height:   1px;
    overflow: hidden;
    position: absolute;
    width:    1px;
}

.footer-subscribe__form input[type="text"],
.footer-subscribe__form input[type="email"] {
    width:         100%;
    height:        32px;
    padding:       0 12px;
    border:        1px solid #ebeced;
    border-radius: 6px;
    background:    #ffffff;
    font-family:   var(--font-body);
    font-size:     13px;
    color:         var(--color-text);
    outline:       none;
}
.footer-subscribe__form input::placeholder { color: var(--color-muted); }

.footer-subscribe__form .jet-form-builder__submit-wrap { width: 100%; }
.footer-subscribe__form button[type="submit"],
.footer-subscribe__form .jet-form-builder__submit {
    /* the plugin ships the button as flex/flex-start, so text-align cannot
       centre the label — the flex alignment has to do it */
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:         100%;
    height:        32px;
    padding:       0 16px;
    border:        none;
    border-radius: 6px;
    background:    var(--color-primary);
    color:         #ffffff;
    font-family:   var(--font-body);
    font-size:     13px;
    font-weight:   600;
    cursor:        pointer;
    transition:    background var(--transition);
}
.footer-subscribe__form button[type="submit"]:hover,
.footer-subscribe__form .jet-form-builder__submit:hover { background: var(--color-primary-dark); }

/* Submit response — the plugin boxes it in a bordered 20px block */
.footer-subscribe__form .jet-form-builder-message {
    margin:      0;
    padding:     0;
    border:      0;
    text-align:  left;
    font-size:   12px;
    line-height: 18px;
}
.footer-subscribe__form .jet-form-builder-message--success { color: var(--color-secondary); }
.footer-subscribe__form .jet-form-builder-message--error   { color: var(--color-primary-light); }

.footer-bottom {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             20px;
    padding-top:     24px;
}
.footer-copyright {
    font-size: 14px;
    color:     #a4a4a4;
}
.footer-payments {
    display: block;
    width:   345px;
    max-width: 100%;
    height:  auto;
}

@media (max-width: 1365px) {
    .footer-top { column-gap: 40px; }
}

@media (max-width: 1099px) {
    .footer-top   { grid-template-columns: 1fr 1fr; }
    .footer-about { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
    .footer-top  { grid-template-columns: 1fr; column-gap: 0; row-gap: 32px; }
    .footer-bottom {
        flex-direction: column;
        align-items:    flex-start;
        gap:            16px;
    }
}

/* ── Video modal ────────────────────────────────────────────────────────── */
.video-modal {
    position:       fixed;
    inset:          0;
    z-index:        var(--z-modal);
    display:        flex;
    align-items:    center;
    justify-content: center;
    padding:        20px;
    opacity:        0;
    visibility:     hidden;
    transition:     opacity 0.3s ease, visibility 0.3s ease;
}
.video-modal.is-open {
    opacity:    1;
    visibility: visible;
}

.video-modal__overlay {
    position:   absolute;
    inset:      0;
    background: rgba(0, 0, 0, 0.5);
}

.video-modal__container {
    position:  relative;
    width:     800px;
    max-width: 100%;
}

.video-modal__close {
    position:   absolute;
    top:        -40px;
    right:      0;
    display:    inline-flex;
    padding:    0;
    border:     none;
    background: none;
    color:      var(--color-bg-alt);
    cursor:     pointer;
    transition: color var(--transition);
}
.video-modal__close:hover { color: var(--color-primary); }

.video-modal__frame {
    position:       relative;
    aspect-ratio:   16 / 9;
    background:     #000000;
    border-radius:  var(--radius-box);
    overflow:       hidden;
}
.video-modal__frame iframe,
.video-modal__frame video {
    position: absolute;
    inset:    0;
    width:    100%;
    height:   100%;
    border:   0;
}
.video-modal__frame video { background: #000000; object-fit: contain; }

/* ── Activity toast ─────────────────────────────────────────────────────── */
/* Content is filled in by js/main.js — see pages/global/fomo-toast.php for
   where it comes from. hidden until JS has something to show; .is-open
   drives the slide/fade rather than the [hidden] toggle, so it animates. */
.fomo-toast {
    position:        fixed;
    left:            20px;
    bottom:          20px;
    z-index:         var(--z-sticky);
    display:         flex;
    align-items:     center;
    gap:             8px;
    max-width:       340px;
    padding:         12px 36px 12px 12px;
    border:          1px solid var(--color-border-light);
    border-radius:   var(--radius-box);
    background:      #ffffff;
    box-shadow:      var(--shadow-block);
    opacity:         0;
    transform:       translateY(12px);
    transition:      opacity 0.3s ease, transform 0.3s ease;
    pointer-events:  none;
}
.fomo-toast.is-open {
    opacity:        1;
    transform:      translateY(0);
    pointer-events: auto;
}

.fomo-toast__link {
    display:         flex;
    align-items:     center;
    gap:             12px;
    min-width:       0;
    color:           inherit;
    text-decoration: none;
}

.fomo-toast__photo {
    flex-shrink:   0;
    width:         48px;
    height:        48px;
    border-radius: 50%;
    object-fit:    cover;
}

.fomo-toast__body {
    display:        flex;
    flex-direction: column;
    gap:            2px;
    min-width:      0;
}

.fomo-toast__text {
    font-size:   14px;
    line-height: 19px;
    font-weight: 600;
    color:       var(--color-text);
}

.fomo-toast__meta {
    font-size:   12px;
    line-height: 16px;
    color:       var(--color-muted);
}

.fomo-toast__close {
    position:   absolute;
    top:        8px;
    right:      8px;
    display:    flex;
    align-items: center;
    justify-content: center;
    width:      20px;
    height:     20px;
    padding:    0;
    border:     none;
    background: none;
    color:      var(--color-muted);
    cursor:     pointer;
    transition: color var(--transition);
}
.fomo-toast__close:hover { color: var(--color-text); }

@media (max-width: 767px) {
    .fomo-toast {
        left:      12px;
        right:     12px;
        bottom:    12px;
        max-width: none;
    }
}

/* ── Screen reader text — required by WordPress ─────────────────────────── */
.screen-reader-text {
    clip:     rect(1px, 1px, 1px, 1px);
    height:   1px;
    overflow: hidden;
    position: absolute;
    width:    1px;
}
.screen-reader-text:focus {
    clip:       auto;
    height:     auto;
    left:       5px;
    top:        5px;
    padding:    15px 23px;
    background: #f1f1f1;
    color:      #21759b;
    display:    block;
    font-weight: 700;
    z-index:    100000;
}

/* ── Inner page hero ─────────────────────────────────────────────────────── */
/* The band runs up behind the fixed header, as on prod — body padding would
   otherwise cut it off and leave a white strip above. The padding puts the
   title back below the header, so it stays clear whatever the header measures. */
.page-hero {
    --header-space: calc(var(--marquee-height) + var(--topbar-height) + var(--header-height) + var(--header-offset));

    display:        flex;
    flex-direction: column;
    /* Prod anchors the title to the bottom of the band and lets the header
       float over the empty top — the min-height, not the content, sets the size */
    justify-content: flex-end;
    min-height:      300px;
    margin-top:      calc(-1 * var(--header-space));
    padding:         calc(var(--header-space) + 20px) 0 50px;
    /* A page can set a photo (page-hero.php writes --page-hero-image from the
       "Hero Image" field) and/or recolour the band — see css/pages/*.css */
    background:
        var(--page-hero-image, none) center / cover no-repeat,
        var(--page-hero-bg, var(--color-green-100));
}

/* Trail only, no heading — single posts. Prod runs 175px tall here, so the
   band is sized by its padding rather than the shared minimum. */
.page-hero--bare {
    min-height: 0;
    padding:    calc(var(--header-space) + 28px) 0 30px;
}
.page-hero .container {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            24px;
}

.page-hero__title {
    margin:      0;
    font-size:   64px;
    line-height: 68px;
    font-weight: 300;
    text-align:  center;
}

.breadcrumbs__list {
    display:    flex;
    flex-wrap:  wrap;
    align-items: center;
    justify-content: center;
    gap:        6px;
    margin:     0;
    padding:    0;
    list-style: none;
}
.breadcrumbs__item {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-size:   14px;
    line-height: 21px;
    color:       #3b3d42;
}
.breadcrumbs__item a { text-decoration: none; }
.breadcrumbs__item a:hover { color: var(--color-primary); }
.breadcrumbs__sep { color: var(--color-muted); }
/* On the page-hero band (green by default, see --page-hero-bg above), the
   muted separator and pink hover both drop to near-invisible contrast —
   scoped overrides instead of touching the breadcrumb's shared base rule. */
.page-hero .breadcrumbs__sep { color: var(--color-text); }
.page-hero .breadcrumbs__item a:hover { color: var(--color-text); }

.page-intro { padding: 60px 0 0; }
.page-intro .entry-content {
    max-width: 800px;
    margin:    0 auto;
    text-align: center;
}

@media (max-width: 1024px) {
    .page-hero {
        min-height: 250px;
        padding:    calc(var(--header-space) + 20px) 0 20px;
    }
    .page-hero--bare { padding: calc(var(--header-space) + 32px) 0 24px; }
    .page-hero .container { gap: 16px; }
    .page-hero__title { font-size: 36px; line-height: 42px; }
    .page-intro { padding: 40px 0 0; }
}

@media (max-width: 767px) {
    .page-hero {
        min-height: 200px;
        padding:    calc(var(--header-space) + 16px) 0 20px;
    }
    .page-hero--bare { padding: calc(var(--header-space) + 24px) 0 20px; }

    /* The hero photos are wide banners (~6.7:1). Cropping one to a phone-width
       band leaves only its empty middle on screen, so here the whole picture is
       laid along the bottom and the text moves above it. The strip is
       width / 6.7 tall — 15vw — which is what the bottom padding clears. */
    .page-hero--photo {
        background-size:     contain, auto;
        background-position: center bottom, 0 0;
        padding-bottom:      calc(15vw + 16px);
    }
    .page-hero__title { font-size: 28px; line-height: 32px; }
    .page-intro { padding: 32px 0 0; }
}

/* ── FAQ block ───────────────────────────────────────────────────────────── */
/* Shared by the home section and the FAQ page template — same markup either
   way, so the styles live here rather than in a page stylesheet. */
.faq { padding: 0; }

.faq__wrp {
    display: flex;
    gap:     20px;
}

/* 598 / 662 of the 1280 content width */
.faq__aside {
    display:        flex;
    flex-direction: column;
    flex:           0 0 46.7%;
    gap:            32px;
}

.faq__title { margin: 0; font-weight: 300; }
.faq__title strong { font-weight: 500; }

.faq__text {
    font-size:   18px;
    line-height: 24px;
}
.faq__text p { margin: 0; }
.faq__text strong { font-weight: 700; }

/* Hairlines above the phone block and the footnote, like prod — a neutral
   divider rather than --color-green-100, which is a solid accent green now */
.faq__call,
.faq__more {
    padding-top: 32px;
    border-top:  1px solid var(--color-border-light);
}

.faq__call {
    display:     flex;
    align-items: center;
    gap:         12px;
}
.faq__call-icon { flex: none; }

.faq__call-body {
    display:        flex;
    flex-direction: column;
}
.faq__call-label {
    font-size:   18px;
    font-weight: 700;
}
.faq__call-phone {
    font-size:       18px;
    text-decoration: none;
}
.faq__call-phone:hover { color: var(--color-primary); }

.faq__buttons {
    display:   flex;
    flex-wrap: wrap;
    gap:       8px;
}

.faq__more {
    display:     flex;
    flex-wrap:   wrap;
    align-items: center;
    gap:         24px;
    font-size:   14px;
}
.faq__more-link {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    color:           var(--color-primary);
    text-decoration: none;
}
.faq__more-link:hover { color: var(--color-primary-dark); }

.faq__panel {
    position:      relative;
    flex:          1;
    padding:       60px;
    border-radius: 30px;
    background:    var(--color-green-100);
}

/* The kittens hang over the top edge of the panel — the percentage translate
   keeps the overlap proportional as the panel narrows. */
.faq__decor {
    position:  absolute;
    top:       0;
    left:      24%;
    width:     70%;
    max-width: 465px;
    height:    auto;
    transform: translateY(-75%);
}

.faq__list {
    position:       relative;
    display:        flex;
    flex-direction: column;
    gap:            12px;
}

.faq__item {
    border-radius: var(--radius-box);
    background:    #ffffff;
}
/* The answer's height is animated in js/pages/home.js */
.faq__answer { overflow: hidden; }

.faq__question {
    display:     flex;
    align-items: flex-start;
    gap:         10px;
    padding:     14px 16px;
    font-size:   16px;
    line-height: 22px;
    font-weight: 600;
    cursor:      pointer;
    list-style:  none;
}
.faq__question::-webkit-details-marker { display: none; }

.faq__marker {
    display:     flex;
    align-items: center;
    flex:        none;
    /* The icons ship at 20px; the SVG attributes are overridden here so the
       marker stays lighter than the question next to it */
    height:      22px;
    color:       var(--color-text);
    transition:  color var(--transition);
}
.faq__marker .icon { width: 14px; height: 14px; }
.faq__marker-minus { display: none; }

.faq__item[open] .faq__marker       { color: var(--color-primary); }
.faq__item[open] .faq__marker-plus  { display: none; }
.faq__item[open] .faq__marker-minus { display: block; }

.faq__answer {
    padding:     0 16px 16px 40px;
    font-size:   14px;
    line-height: 22px;
    color:       #3b3d42;
}
.faq__answer p { margin: 0; }
.faq__answer p + p { margin-top: 8px; }

@media (max-width: 1024px) {
    .faq__wrp {
        flex-direction: column;
        gap:            40px;
    }
    .faq__aside { flex: none; gap: 24px; }
    .faq__text  { font-size: 16px; line-height: 22px; }
    .faq__panel { padding: 40px; }
    /* Stacked, the panel sits right under the text — no room to hang kittens */
    .faq__decor { display: none; }
}

@media (max-width: 767px) {
    .faq__panel { padding: 24px 20px; border-radius: var(--radius); }
    /* Both pills are 1px too wide for a 375px screen — tighter sides keep them
       on one row instead of stacking */
    .faq__buttons .btn { padding-left: 18px; padding-right: 18px; }
    .faq__call,
    .faq__more { padding-top: 24px; }
}

/* ── Post card ───────────────────────────────────────────────────────────── */
/* Used by the blog grid, category archives, the related slider on a post and
   by index/archive/search — so it lives here rather than in a page stylesheet. */
.post-card {
    display:        flex;
    flex-direction: column;
    overflow:       hidden;
    border-radius:  var(--radius);
    background:     #fafafa;
    transition:     box-shadow var(--transition), transform var(--transition);
}
.post-card:hover {
    box-shadow: var(--shadow-block-hover);
    transform:  translateY(-2px);
}

/* Prod pins the thumbnail at 220×275 inside a 397px card, leaving a gap on
   either side — here it fills the card and keeps one ratio across the grid */
.post-card__media {
    position: relative;
    margin:   8px 8px 0;
}
.post-card__image { display: block; }

/* The badge sits on the photo, so it needs its own backdrop to stay readable
   over a light or busy image */
.post-card__cat {
    position:        absolute;
    top:             12px;
    left:            12px;
    padding:         6px 12px;
    border-radius:   var(--radius-pill);
    background:      rgba(28, 29, 41, 0.75);
    backdrop-filter: blur(4px);
    font-size:       12px;
    line-height:     16px;
    font-weight:     600;
    text-decoration: none;
    color:           #ffffff;
    transition:      background var(--transition);
}
.post-card__cat:hover { background: var(--color-primary); color: #ffffff; }
.post-card__image img {
    display:       block;
    width:         100%;
    aspect-ratio:  16 / 11;
    object-fit:    cover;
    border-radius: var(--radius-img);
}

.post-card__body {
    display:        flex;
    flex-direction: column;
    flex:           1;
    gap:            12px;
    padding:        20px 16px 16px;
}

.post-card__title {
    margin:      0;
    font-size:   16px;
    line-height: 20px;
    font-weight: 800;
}
.post-card__title a { text-decoration: none; }
.post-card__title a:hover { color: var(--color-primary); }

.post-card__excerpt {
    margin:      0;
    font-size:   16px;
    line-height: 22px;
    color:       var(--color-text);
}

/* Pushed down so the button lines up across cards of different length */
.post-card__footer {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             12px;
    margin-top:      auto;
    padding-top:     8px;
}

.post-card__date {
    font-size:   14px;
    line-height: 21px;
    color:       var(--color-muted);
}

/* Featured — the newest post leads the page as a wide card */
.post-card--featured {
    display:               grid;
    grid-template-columns: 45% 1fr;
    align-items:           stretch;
}
.post-card--featured .post-card__media { margin: 8px 0 8px 8px; }
/* A portrait cover would otherwise stretch the whole card past 700px, so the
   featured image gets a fixed ratio and crops instead */
.post-card--featured .post-card__image img { aspect-ratio: 4 / 3; }
.post-card--featured .post-card__body {
    justify-content: center;
    gap:             16px;
    padding:         40px;
}
.post-card--featured .post-card__title { font-size: 28px; line-height: 34px; }
.post-card--featured .post-card__excerpt { font-size: 18px; line-height: 26px; }

@media (max-width: 1024px) {
    .post-card--featured { grid-template-columns: 1fr; }
    .post-card--featured .post-card__media { margin: 8px 8px 0; }
    .post-card--featured .post-card__image img { height: auto; aspect-ratio: 16 / 9; }
    .post-card--featured .post-card__body { padding: 24px; }
    .post-card--featured .post-card__title { font-size: 24px; line-height: 30px; }
    .post-card--featured .post-card__excerpt { font-size: 16px; line-height: 22px; }
}

/* ── Pagination ─────────────────────────────────────────────────────────── */
/* Shared by the blog listing and the shop grid — same control either way. */
.pagination {
    display:         flex;
    justify-content: center;
}
.pagination .page-numbers {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    min-width:       44px;
    height:          44px;
    padding:         0 12px;
    border-radius:   50%;
    font-size:       16px;
    text-decoration: none;
    color:           var(--color-text);
    transition:      background var(--transition), color var(--transition);
}
.pagination .page-numbers:hover { background: var(--color-bg-alt); }
.pagination .page-numbers.current {
    background: var(--color-primary);
    color:      #ffffff;
}
.pagination .dots:hover { background: none; }

/* ── Product card ────────────────────────────────────────────────────────── */
/* Prod's listing item: a soft card that turns mint on hover, photo at a fixed
   260px, title beside a colour-coded gender pill, the spec rows, then price,
   the "Let's Meet" link and a WhatsApp button. */
.product-card {
    display:        flex;
    flex-direction: column;
    gap:            12px;
    min-width:      0;
    padding:        8px 8px 16px;
    border-radius:  var(--radius);
    background:     #fafafa;
    list-style:     none;
    transition:     background var(--transition);
}
/* Exception to --color-green-100 (a solid accent green everywhere else now)
   — a bold green fill read as too heavy-handed for a plain product hover,
   so this keeps the original pale mint tint instead. */
.product-card:hover { background: #e9f2f4; }

.product-card__media {
    position: relative;
    /* On top of the 12px column gap this makes the 24px prod leaves under the
       photo, without widening the gap between the text rows */
    margin-bottom: 12px;
}

.product-card__image { display: block; }
.product-card__image img {
    display:       block;
    width:         100%;
    height:        260px;
    object-fit:    cover;
    border-radius: var(--radius-img);
}

.product-card__wishlist {
    position: absolute;
    top:      16px;
    right:    16px;
}

/* Title and gender share a row; the pill never wraps under a long name */
.product-card__head {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             20px;
}

.product-card__title {
    margin:      0;
    min-width:   0;
    font-size:   16px;
    line-height: 22px;
    font-weight: 800;
}
.product-card__title a { text-decoration: none; }
.product-card__title a:hover { color: var(--color-primary); }

/* Pill, tinted by sex as on prod */
.product-card__gender {
    display:       inline-flex;
    align-items:   center;
    flex:          none;
    gap:           8px;
    padding:       4px 8px;
    border-radius: var(--radius-pill);
    background:    var(--color-bg-alt);
    font-size:     12px;
    line-height:   16px;
    color:         var(--color-text);
}
.product-card__gender--female { background: var(--color-pink-100); }
.product-card__gender--male   { background: var(--color-green-200); }
.product-card__gender .icon { color: #3b3d42; }

/* One line per spec: a kitten in four breed categories would otherwise run to
   three lines and leave the cards in a row wildly uneven. The full text stays
   in the title attribute. */
.product-card__spec {
    display:     flex;
    flex-wrap:   nowrap;
    align-items: baseline;
    gap:         8px;
    margin:      0;
    font-size:   12px;
    line-height: 16px;
}
.product-card__spec-label {
    flex:        none;
    font-weight: 700;
}
.product-card__spec-value {
    min-width:     0;
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
}
.product-card__spec-value a {
    text-decoration: none;
    transition:      color var(--transition);
}
.product-card__spec-value a:hover { color: var(--color-primary); }

/* Pushed down so price and buttons line up across cards of different length.
   Wrapping is the safety net: a variable product prints a price range, twice as
   wide as prod's single prices, which would otherwise push the WhatsApp button
   out of the card on the narrowest column. */
/* nowrap on purpose: with wrapping allowed, flexbox moves the buttons to a
   second line instead of letting the price give way, and the row stops looking
   like prod's */
.product-card__footer {
    display:         flex;
    flex-wrap:       nowrap;
    align-items:     center;
    justify-content: space-between;
    gap:             12px;
    margin-top:      auto;
    padding-top:     4px;
}

/* Price ranges are given a row of their own (see the --stacked modifier), so a
   single price keeps prod's one-line footer */
.product-card__footer--stacked { flex-wrap: wrap; }
.product-card__footer--stacked .product-card__price {
    flex:         1 0 100%;
    margin-right: 0;
}

.product-card__price {
    flex:         0 1 auto;
    min-width:    0;
    margin-right: auto;
    font-size:    14px;
    line-height:  22px;
    font-weight:  500;
    color:        var(--color-text);
}
.product-card__price del { color: var(--color-muted); }
.product-card__price ins { text-decoration: none; }

.product-card__cta {
    display:         inline-flex;
    align-items:     center;
    flex:            none;
    gap:             6px;
    min-height:      38px;
    padding:         2px 8px;
    border:          1px solid var(--color-primary);
    border-radius:   60px;
    font-size:       12px;
    line-height:     16px;
    text-decoration: none;
    color:           var(--color-primary);
    transition:      background var(--transition), color var(--transition);
}
.product-card__cta:hover {
    background: var(--color-primary);
    color:      #ffffff;
}

/* Prod ships this mark as a raster masked to pink, which leaves it invisible
   against the pink hover fill. Masking it here instead lets it take the link's
   own colour, so it turns white with the label. */
.product-card__cta-icon {
    flex:                none;
    width:               24px;
    height:              24px;
    background-color:    currentColor;
    -webkit-mask:        url('../img/lets-meet.png') no-repeat center / contain;
    mask:                url('../img/lets-meet.png') no-repeat center / contain;
}

.product-card__whatsapp {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    flex:            none;
    width:           30px;
    height:          30px;
    border-radius:   50%;
    background:      var(--color-whatsapp);
    color:           #ffffff;
    transition:      background var(--transition);
}
.product-card__whatsapp:hover { background: #0aa338; }

@media (max-width: 1024px) {
    .product-card__image img { height: 240px; }
}

@media (max-width: 767px) {
    .product-card__image img { height: 200px; }

    /* Two cards to a row leaves ~160px: the value takes its own line under the
       label, still on one line of its own */
    .product-card__spec { flex-wrap: wrap; }
    .product-card__spec-value { flex: 1 0 100%; }

    /* The title drops the gender beside it and the footer wraps rather than
       squeezing the price out */
    .product-card__head {
        flex-direction: column;
        align-items:    flex-start;
        gap:            4px;
    }
    .product-card__footer {
        flex-wrap: wrap;
        gap:       8px;
    }
    .product-card__price { margin-right: 0; flex: 1 0 100%; }
}

/* ── Global section: Our kittens, their happy families ────────────────────── */
/* Shared across Home, How It Works and the Shop page (pages/global/families.php)
   — content lives on the Theme options page so all three show the same strip.
   A row of customer photos that link out to /reviews/. Scrolls natively — a
   strip of same-size photos with nothing to arrange doesn't need a slider,
   just overflow. */
.families { padding: 0 0 80px; }

.families__title {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    margin:          0 0 28px;
    font-size:       32px;
    line-height:     40px;
    font-weight:     500;
    text-align:      center;
    color:           var(--color-text);
}
.families__title-mark { display: inline-flex; color: var(--color-primary); }

/* Manual scroll (touch/trackpad), but never dead-ends: .families__group
   holds the photo list twice, and js/main.js watches scrollLeft, silently
   snapping it back by one group's width once the visitor scrolls past the
   first copy — since the second copy is identical, the jump is invisible
   and the strip just keeps going instead of hitting a wall. */
.families__strip {
    margin:          0 -25px;
    padding:         10px 25px 16px;
    overflow-x:      auto;
    scrollbar-width: none;
}
.families__strip::-webkit-scrollbar { display: none; }

.families__track {
    display: flex;
    gap:     16px;
    width:   max-content;
}

.families__group {
    display:    flex;
    gap:        16px;
    margin:     0;
    padding:    0;
    list-style: none;
}

.families__item {
    flex:          0 0 190px;
    border-radius: 14px;
    overflow:      hidden;
    box-shadow:    0 6px 16px rgba(90, 40, 60, 0.08);
    transition:    transform var(--transition), box-shadow var(--transition);
}
.families__item:hover {
    transform:  translateY(-4px);
    box-shadow: 0 10px 24px rgba(90, 40, 60, 0.16);
}

.families__item a { display: block; }
/* Doubled selector (.families .families__photo, not just .families__photo)
   to outrank WooCommerce's own `.woocommerce img { height: auto }` on the
   Shop page — otherwise a portrait photo keeps its natural height instead
   of the fixed square crop every other photo in the strip gets. */
.families .families__photo {
    display:      block;
    width:        100%;
    height:       190px;
    object-fit:   cover;
}

.families__footer {
    display:         flex;
    justify-content: center;
    margin-top:      26px;
}
.families__btn { height: 44px; padding: 0 30px; font-size: 14px; }

@media (max-width: 1024px) {
    .families { padding-bottom: 60px; }
    .families__title { font-size: 27px; line-height: 35px; margin-bottom: 24px; }
    .families__item { flex-basis: 160px; }
    .families .families__photo { height: 160px; }
}

@media (max-width: 767px) {
    .families { padding-bottom: 40px; }
    .families__title { font-size: 22px; line-height: 29px; margin-bottom: 18px; }
    .families__strip { margin: 0 -18px; padding: 8px 18px 14px; }
    .families__track,
    .families__group { gap: 12px; }
    .families__item { flex-basis: 130px; }
    .families .families__photo { height: 130px; }
}