/* ==========================================================================
   MEKOZZA · SHARED MOBILE DESIGN SYSTEM
   --------------------------------------------------------------------------
   Every rule in this file lives inside a `max-width: 991px` media query, so
   the desktop presentation of every page is left exactly as it was.

   Load this LAST in <head> (after each page's own inline <style>) so it wins
   the cascade at equal specificity.

   Sections
     0  tokens + page shell
     1  app bar
     2  side drawer menu
     3  typography + section headings
     4  buttons
     5  form controls
     6  cards, chips, tables
     7  product / listing grids
     8  service-page template (vet, goom, dogcare, dtrain, petboard,
        petfuneral, petmatting, dyieng, dogwalking)
     9  floating call buttons
    10  footer
    11  bottom tab bar
    12  small phones
    13  tablet
    14  motion preferences
   ========================================================================== */


/* ==========================================================================
   0 · TOKENS + PAGE SHELL
   ========================================================================== */
@media (max-width: 991px) {

  :root {
    --m-ink:        #0f1c26;
    --m-ink-2:      #55677a;
    --m-ink-3:      #8b9bab;
    --m-line:       rgba(15,28,38,.075);
    --m-line-2:     rgba(15,28,38,.14);
    --m-surface:    #ffffff;
    --m-surface-2:  #f4f6f8;
    --m-bg:         #f7f8fa;

    --m-brand:      #ff6b35;
    --m-brand-2:    #ff9350;
    --m-brand-soft: rgba(255,107,53,.10);
    --m-deep:       #0d3b4f;
    --m-mint:       #10b981;
    --m-danger:     #e11d48;

    --m-grad:       linear-gradient(135deg, #ff6b35 0%, #ff9350 100%);
    --m-grad-deep:  linear-gradient(135deg, #0d3b4f 0%, #14536e 100%);

    --m-r-sm: 14px;
    --m-r-md: 18px;
    --m-r-lg: 24px;
    --m-r-xl: 30px;

    --m-sh-1: 0 1px 2px rgba(15,28,38,.05), 0 6px 16px -10px rgba(15,28,38,.22);
    --m-sh-2: 0 2px 6px rgba(15,28,38,.05), 0 18px 34px -20px rgba(15,28,38,.32);
    --m-sh-brand: 0 10px 24px -10px rgba(255,107,53,.55);

    --m-gutter: 16px;
    --m-safe-b: env(safe-area-inset-bottom, 0px);
    --m-tabbar-h: 64px;
    --m-tabbar-clear: calc(var(--m-tabbar-h) + var(--m-safe-b) + 18px);

    --m-ease: cubic-bezier(.22,1,.36,1);
  }

  html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
  }

  body {
    background: var(--m-bg) !important;
    color: var(--m-ink);
    overflow-x: hidden !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-family: 'Inter', 'Poppins', system-ui, -apple-system, sans-serif;
  }

  /* pages that carry the tab bar need room for it */
  body.has-tabbar { padding-bottom: var(--m-tabbar-clear) !important; }

  /* media must never widen the page */
  img, video, iframe, table, pre { max-width: 100%; }
  img { height: auto; }

  a, button, [role="button"], .nav-item { -webkit-tap-highlight-color: transparent; }

  /* decorative fixed art is pure battery cost on a phone */
  .bg-orbs { display: none !important; }

  /* ----------------------------------------------------------------------
     AOS scroll reveals — kept on mobile, with the sideways motion removed.

     AOS parks an element at its start offset until it scrolls into view:
     fade-left starts 100px to the RIGHT, fade-right 100px to the LEFT. On a
     390px screen that pushes content past the edge, where the page's
     overflow guard clips it — the "Grooming Moments" gallery was sitting
     120px off-screen. Retargeting the two horizontal variants onto the
     vertical axis keeps every reveal, and none of them reach sideways.

     Distances are also shortened: a 100px throw designed for a desktop
     viewport is a large jump on a phone.
     ---------------------------------------------------------------------- */
  [data-aos="fade-left"],
  [data-aos="fade-right"],
  [data-aos="flip-left"] {
    transform: translate3d(0, 40px, 0) !important;
  }
  [data-aos="fade-up"]   { transform: translate3d(0,  40px, 0) !important; }
  [data-aos="fade-down"] { transform: translate3d(0, -40px, 0) !important; }

  /* the settled state must win over every start offset above */
  [data-aos].aos-animate {
    transform: translate3d(0, 0, 0) !important;
    opacity: 1 !important;
  }

  /* zoom reveals stay put, just gentler */
  [data-aos="zoom-in"] { transform: scale(.94) !important; }
  [data-aos="zoom-in"].aos-animate { transform: scale(1) !important; }
}


/* ==========================================================================
   1 · APP BAR
   The header markup is duplicated across pages with slightly different
   inline CSS; these rules normalise all of them into one frosted bar.
   ========================================================================== */
@media (max-width: 991px) {

  .petsgo-header {
    box-sizing: border-box !important;
    position: sticky;
    top: 10px;
    width: calc(100% - 20px) !important;
    margin: 10px 10px 0 !important;
    padding: 10px 14px !important;
    border-radius: 22px !important;
    /* NOTE: the frosting deliberately lives on ::before, not here.
       A backdrop-filter on this element would make it the containing block
       for its position:fixed descendants, and the drawer markup sits inside
       the header — it would anchor to the bar instead of the viewport and
       hang off the side of the screen. */
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border: 0 !important;
    box-shadow: none !important;
    z-index: 950;
  }

  /* the frosted bar itself */
  .petsgo-header::before {
    content: '' !important;
    display: block !important;
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: rgba(255,255,255,.82);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(255,255,255,.75);
    box-shadow: var(--m-sh-2);
    z-index: -1;
    pointer-events: none;
    /* neutralise the decorative gradient border some pages paint here */
    -webkit-mask: none !important;
    mask: none !important;
    -webkit-mask-composite: add !important;
    mask-composite: add !important;
    padding: 0 !important;
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
  }

  .petsgo-header.scrolled {
    top: 0;
    margin: 0 !important;
    width: 100% !important;
    border-radius: 0 0 22px 22px !important;
  }
  .petsgo-header.scrolled::before { background: rgba(255,255,255,.94); }

  /* shine sweeps and hover glows: costly, and unreachable on touch */
  .petsgo-header::after,
  .petsgo-header .header-glow { display: none !important; }

  /* header content sits above the frosted layer */
  .petsgo-header > * { position: relative; z-index: 1; }

  /* some pages lay the header out as a 3-column grid (logo / search / icons);
     flex + wrap lets the search bar drop to its own row instead of being
     crushed into a third of a 390px screen */
  .header-container {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 10px !important;
    flex-wrap: wrap !important;
    grid-template-columns: none !important;
  }

  .logo-section { flex: 1 1 auto; min-width: 0; }

  /* --------------------------------------------------------------------
     Brand mark.
     Each page styles the text wordmark differently (blue on the home page,
     red on the service pages, plain on the listings), so mobile shows one
     real mark everywhere instead.

     The supplied asset is a JPG with a baked-in solid red background, which
     reads as a sticker slapped on the frosted bar. images/logo-mark.png is
     that artwork with the red separated out: transparent ground, ink
     wordmark, brand-orange paw — so it sits ON the bar rather than over it.
     Scoped to the header; the footer also uses a .logo class.
     -------------------------------------------------------------------- */
  .petsgo-header .logo,
  .logo-section .logo {
    display: block !important;
    /* 813x159 artwork, so height follows width at 1:5.113 */
    width: 104px;
    height: 20px;
    padding: 0 !important;
    margin: 0 0 1px !important;
    background-image: url('/images/logo-mark.png') !important;
    background-size: contain !important;
    background-position: left center !important;
    background-repeat: no-repeat !important;
    background-color: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    /* pages that render the wordmark as gradient-filled text clip their
       background to the glyphs, which would hide the image entirely */
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px;
    overflow: hidden;
    animation: none !important;
  }
  /* the paw glyph and any decorative dots the pages attach to the wordmark */
  .petsgo-header .logo i,
  .logo-section .logo i,
  .petsgo-header .logo::before,
  .petsgo-header .logo::after,
  .logo-section .logo::before,
  .logo-section .logo::after { display: none !important; content: none !important; }

  /* search bar, where a page has one, becomes a full-width second row */
  .search-bar {
    order: 3;
    flex: 1 0 100%;
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .search-bar input {
    box-sizing: border-box !important;
    width: 100%;
    min-height: 42px;
    padding: 10px 14px !important;
    font-size: 16px !important;
    border-radius: var(--m-r-sm) !important;
    border: 1px solid var(--m-line-2) !important;
    background: var(--m-surface-2) !important;
  }

  .logo {
    font-size: 20px !important;
    gap: 8px !important;
    letter-spacing: -.4px;
    animation: none !important;
  }
  .logo i { font-size: 19px !important; }

  /* The tagline sat at 9px/0.7px tracking and measured 137px — wider than
     the 126px wordmark above it, which made the lockup read bottom-heavy and
     broad. Sized to sit just inside the mark instead. */
  .tagline {
    font-size: 7px !important;
    font-weight: 700;
    letter-spacing: .3px;
    line-height: 1.25;
    text-transform: uppercase;
    color: var(--m-ink-3) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 3px;
  }
  .tagline .highlight { color: var(--m-brand) !important; }

  .nav-icons {
    display: flex !important;
    align-items: center;
    gap: 8px !important;
    flex: 0 0 auto;
  }

  .nav-item {
    width: 40px;
    height: 40px;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 14px !important;
    background: var(--m-surface-2) !important;
    border: 1px solid var(--m-line) !important;
    color: var(--m-ink) !important;
    box-shadow: none !important;
    transition: transform .18s var(--m-ease), background .18s ease;
  }
  /* Several headers put the label as a bare text node ("Cart", "Partner")
     rather than in a span, so it cannot be hidden by selector. Collapsing the
     font size on the pill and restoring it on the icon removes every label,
     however it was authored. */
  .nav-item { font-size: 0 !important; }
  .nav-item i { font-size: 16px !important; color: var(--m-ink) !important; margin: 0 !important; }
  /* labels are hidden — but the cart count is also a <span> inside the pill,
     so it has to be exempted or the badge disappears with them */
  .nav-item span:not(.cart-count),
  .nav-item .user-name { display: none !important; }
  .nav-item:active { transform: scale(.92); background: var(--m-brand-soft) !important; }

  /* --------------------------------------------------------------------
     Cart lives in the header, not the tab bar.

     It sits between the account pill and the menu button, carrying its own
     count badge. The label is suppressed by the font-size:0 rule above like
     every other pill, so only the bag icon and the badge show.
     -------------------------------------------------------------------- */
  .nav-item.nav-cart-item,
  .nav-icons a[href="cart.php"] {
    display: inline-flex !important;
    position: relative;
    overflow: visible;          /* the badge overhangs the pill */
  }

  /* the current page gets a filled pill, so you can see where you are */
  .nav-icons a[href="cart.php"].is-here {
    background: var(--m-brand-soft) !important;
    border-color: transparent !important;
  }
  .nav-icons a[href="cart.php"].is-here i { color: var(--m-brand) !important; }

  /* links the page itself marks as desktop-only */
  .nav-icons .desktop-only { display: none !important; }

  /* one page wraps the dropdown in an otherwise empty <a class="nav-item">,
     which would otherwise render as a blank pill */
  .nav-icons > a.nav-item:not(:has(i)) { display: none !important; }

  /* the overflow menu is the bar's primary action — not every page gives it
     an id, so it is also matched by its icon */
  #menuToggle,
  .nav-item:has(.fa-ellipsis-v) {
    background: var(--m-grad) !important;
    border-color: transparent !important;
    box-shadow: var(--m-sh-brand) !important;
  }
  #menuToggle i,
  .nav-item:has(.fa-ellipsis-v) i { color: #fff !important; }

  /* count badge, pinned to the top-right of the cart pill */
  .cart-count {
    position: absolute !important;
    top: -5px !important;
    right: -5px !important;
    left: auto !important;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 10px !important;
    font-weight: 800 !important;
    line-height: 1;
    color: #fff !important;
    background: var(--m-brand) !important;
    border: 2px solid #fff !important;
    border-radius: 99px !important;
    box-shadow: 0 2px 6px rgba(255,107,53,.4);
    z-index: 2;
  }
  /* an empty basket should not wear a "0" */
  .cart-count:empty { display: none !important; }
}


/* ==========================================================================
   2 · SIDE DRAWER MENU
   The shared markup animates via a `.show` class, so it is restyled from a
   rotate-in dropdown into a right-edge drawer without touching any JS.
   ========================================================================== */
@media (max-width: 991px) {

  .ellipsis-dropdown {
    box-sizing: border-box !important;
    position: fixed !important;

    /* Pinned to the right edge, full height. Anchoring top AND bottom rather
       than setting a height keeps it correct when the mobile browser's URL bar
       shows and hides. */
    top: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    left: auto !important;

    /* Wide enough to read comfortably, but always leaving a strip of the page
       visible so it is obvious that tapping outside closes it. */
    /* Plain vw first: min() is only in Chrome 79+/Safari 13.4+, and a browser
       that cannot parse the second line keeps the first. max-width caps it
       either way, so both routes land on the same size. */
    width: 82vw !important;
    width: min(82vw, 330px) !important;
    max-width: 330px !important;
    min-width: 0 !important;
    max-height: none !important;

    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;   /* scrolling the drawer must not scroll the page behind it */

    display: flex !important;
    flex-direction: column !important;

    background: var(--m-surface) !important;
    border: 0 !important;
    border-radius: 24px 0 0 24px !important;
    box-shadow: -18px 0 50px -12px rgba(15,28,38,.35) !important;

    /* Clears the notch at the top and the home indicator at the bottom. */
    padding: calc(16px + env(safe-area-inset-top, 0px)) 12px
             calc(16px + var(--m-safe-b)) !important;

    /* Parked just off the right edge. translateX is compositor-driven, so the
       slide stays smooth on a phone.

       visibility is stepped, not eased: while closed the panel sits outside
       the viewport but would still be reachable by keyboard and announced by
       screen readers, so it is hidden outright — but only after the slide-out
       has finished, which is what the delay on the closed state is for. */
    transform: translateX(100%) !important;
    visibility: hidden;
    transition: transform .34s var(--m-ease),
                visibility 0s linear .34s !important;
    will-change: transform;
    z-index: 12000;

    /* styles.css runs `animation: dropdownReveal ... forwards` on .show, and
       that animation's final keyframe sets transform: scale(1) translateY(0).
       It fights the translateX above for the same property.

       Chrome resolves it our way, because an !important author declaration
       outranks an animation. Not every engine does: older Blink forks and the
       browsers built on them (UC, Opera, older Samsung Internet) let the
       animation win. When it does, the drawer loses its slide and lands
       wherever that keyframe puts it — which is what "the menu opens as a
       small box near the header" looks like on those browsers.

       Turning the animation off removes the fight instead of relying on
       winning it. Nothing is lost: the slide comes from the transition
       above, not from that keyframe. */
    animation: none !important;

    /* Height stated outright as well as via top/bottom. The pair is correct
       CSS and Chrome honours it, but an engine that mishandles it collapses
       the panel to its content height. 100% of a fixed element is the
       viewport, so this says the same thing a second way. */
    height: 100% !important;
  }

  /* The scrim is drawn as a very large spread shadow rather than a
     pseudo-element: the sheet sets a z-index and so opens its own stacking
     context, where a `z-index:-1` child would paint on top of the sheet's
     own background and dim its contents. A spread shadow only ever paints
     outside the border box, which is exactly what a scrim is. */
  .ellipsis-dropdown.show {
    transform: translateX(0) !important;
    animation: none !important;      /* see the note on the closed state */
    visibility: visible;
    transition: transform .34s var(--m-ease),
                visibility 0s !important;   /* visible immediately on the way in */
    box-shadow: -18px 0 50px -12px rgba(15,28,38,.35),
                0 0 0 100vmax rgba(9,18,26,.5) !important;
  }
  /* ---------------------------------------------------------------------
     The same geometry again, at ID strength.

     styles.css defines .ellipsis-dropdown three separate times (lines 512,
     712 and 1392) as an absolutely-positioned dropdown under the toggle, and
     the last of those also runs a keyframe animation on .show. The rules
     above beat all of that with !important, which is correct and is what
     Chrome does.

     Samsung Internet showed the panel as a small box under the header
     anyway — the shape those styles.css rules produce — so on that engine
     something in that override chain is not being honoured. Restating the
     geometry through the element's ID sidesteps the question: #id + class
     outranks a bare class on specificity alone, so this wins whether or not
     !important is handled the way the spec says.

     Belt and braces on purpose. If the rules above are working, these
     change nothing. */
  #ellipsis-menu.ellipsis-dropdown {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    right: 0 !important;
    left: auto !important;
    height: 100% !important;
    max-height: none !important;
    animation: none !important;
    border-radius: 24px 0 0 24px !important;
  }

  #ellipsis-menu.ellipsis-dropdown:not(.show) {
    transform: translateX(100%) !important;
  }

  #ellipsis-menu.ellipsis-dropdown.show {
    transform: translateX(0) !important;
    visibility: visible !important;
  }

  .ellipsis-dropdown::before { display: none !important; }

  /* A bottom sheet gets a horizontal grab handle; a side drawer does not.
     A hairline under the top of the panel separates it from the links. */
  .ellipsis-dropdown::after {
    content: '';
    order: -1;
    align-self: stretch;
    height: 1px;
    border-radius: 0;
    background: var(--m-line);
    margin: 0 2px 10px;
    flex: 0 0 auto;
  }

  .ellipsis-dropdown a {
    display: flex !important;
    align-items: center;
    gap: 14px;
    padding: 14px !important;
    margin: 0 0 2px !important;
    border: 0 !important;
    border-radius: var(--m-r-sm) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--m-ink) !important;
    background: transparent !important;
    transition: background .18s ease, transform .18s var(--m-ease);
  }
  .ellipsis-dropdown a::before { display: none !important; }
  .ellipsis-dropdown a:active { background: var(--m-surface-2) !important; transform: scale(.985); }

  .ellipsis-dropdown i {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--m-brand-soft);
    color: var(--m-brand);
    font-size: 15px;
    margin: 0;
  }

  .ellipsis-dropdown a[href="logout.php"] { color: var(--m-danger) !important; margin-top: 6px !important; }
  .ellipsis-dropdown a[href="logout.php"] i {
    background: rgba(225,29,72,.10);
    color: var(--m-danger);
  }
}


/* ==========================================================================
   3 · TYPOGRAPHY + SECTION HEADINGS
   Several pages ship desktop type scales that overflow a 390px screen.
   ========================================================================== */
@media (max-width: 991px) {

  h1 { font-size: clamp(22px, 6.4vw, 28px) !important; line-height: 1.22 !important; letter-spacing: -.5px; }
  h2 { font-size: clamp(19px, 5.4vw, 24px) !important; line-height: 1.25 !important; letter-spacing: -.4px; }
  h3 { font-size: clamp(16px, 4.4vw, 19px) !important; line-height: 1.3 !important; letter-spacing: -.2px; }
  h4 { font-size: 15px !important; line-height: 1.35 !important; }

  p  { font-size: 14px; line-height: 1.6; }

  /* long unbroken strings (emails, URLs, phone lists) must not widen the page */
  p, li, td, th, h1, h2, h3, a { overflow-wrap: break-word; word-break: break-word; }
}


/* ==========================================================================
   4 · BUTTONS
   ========================================================================== */
@media (max-width: 991px) {

  .book-btn, .vet-btn, .location-btn,
  .banner-btn, .btn-primary, .btn-secondary,
  button[type="submit"], input[type="submit"] {
    min-height: 46px;
    padding: 13px 22px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border: 0 !important;
    border-radius: 99px !important;
    background: var(--m-grad) !important;
    color: #fff !important;
    box-shadow: var(--m-sh-brand) !important;
    cursor: pointer;
    transition: transform .18s var(--m-ease) !important;
  }

  .book-btn:active, .vet-btn:active, .location-btn:active,
  button[type="submit"]:active, input[type="submit"]:active { transform: scale(.97) !important; }

  /* a secondary action inside a form reads as an outline, not a second primary */
  .location-btn {
    background: var(--m-surface) !important;
    color: var(--m-brand) !important;
    border: 1.5px solid var(--m-brand-soft) !important;
    box-shadow: none !important;
  }

  /* The service-page booking forms fire their handler from an onclick, so the
     primary action is an unclassed <button type="button"> rather than a
     submit. Everything in .form-box that is not the outline secondary is the
     primary action. */
  .form-box form > button:not(.location-btn) {
    min-height: 46px;
    padding: 13px 22px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    border: 0 !important;
    border-radius: 99px !important;
    background: var(--m-grad) !important;
    color: #fff !important;
    box-shadow: var(--m-sh-brand) !important;
    transition: transform .18s var(--m-ease) !important;
  }
  .form-box form > button:not(.location-btn):active { transform: scale(.97) !important; }

  /* full-width primaries inside forms and cards */
  .form-box button[type="submit"],
  .form-box form > button,
  .form-box .book-btn { width: 100% !important; }
}


/* ==========================================================================
   5 · FORM CONTROLS
   16px text is deliberate: anything smaller makes iOS Safari zoom the
   viewport on focus, which strands the user mid-form.
   ========================================================================== */
@media (max-width: 991px) {

  input[type="text"], input[type="tel"], input[type="email"],
  input[type="password"], input[type="number"], input[type="search"],
  input[type="date"], input[type="time"], input[type="datetime-local"],
  select, textarea {
    width: 100%;
    min-height: 46px;
    padding: 12px 14px !important;
    font-size: 16px !important;
    font-family: inherit;
    color: var(--m-ink) !important;
    background: var(--m-surface) !important;
    border: 1.5px solid var(--m-line-2) !important;
    border-radius: var(--m-r-sm) !important;
    box-shadow: none !important;
    appearance: none;
    -webkit-appearance: none;
    /* several pages size inputs with width:100% under content-box, which
       overflows once padding is added */
    box-sizing: border-box !important;
  }

  textarea { min-height: 96px; padding-top: 12px !important; }

  select {
    /* room for the custom chevron */
    padding-right: 38px !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355677a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 13px center !important;
    background-size: 17px !important;
  }

  /* Where a page sets an icon inside the field (an <i> sibling just before
     the control), the normalised padding above would sit the text on top of
     it — give that leading room back. */
  i + input, i + select, i + textarea,
  .input-wrapper input, .input-wrapper select { padding-left: 46px !important; }

  input:focus, select:focus, textarea:focus {
    outline: none !important;
    border-color: var(--m-brand) !important;
    box-shadow: 0 0 0 3px var(--m-brand-soft) !important;
  }

  input::placeholder, textarea::placeholder { color: var(--m-ink-3) !important; }

  label {
    display: block;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--m-ink-2);
    margin-bottom: 6px;
  }

  input[type="checkbox"], input[type="radio"] {
    width: 18px; height: 18px; min-height: 0;
    accent-color: var(--m-brand);
  }
}


/* ==========================================================================
   6 · CARDS, CHIPS, TABLES
   ========================================================================== */
@media (max-width: 991px) {

  /* a wide table must scroll inside itself, never widen the document */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    border-collapse: collapse;
    font-size: 13px;
  }
  th, td { padding: 10px 12px !important; }

  /* filter / category pills used on listing pages */
  .tabs, .filter-row, .chip-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 2px var(--m-gutter) 10px !important;
    margin: 0 calc(var(--m-gutter) * -1) !important;
  }
  .tabs::-webkit-scrollbar,
  .filter-row::-webkit-scrollbar { display: none; }

  .tab {
    flex: 0 0 auto !important;
    padding: 9px 16px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    border-radius: 99px !important;
    border: 1px solid var(--m-line-2) !important;
    background: var(--m-surface) !important;
    color: var(--m-ink-2) !important;
    white-space: nowrap;
  }
  .tab.active {
    background: var(--m-grad) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: var(--m-sh-brand) !important;
  }
}


/* ==========================================================================
   7 · PRODUCT / LISTING GRIDS
   Shared by category.php, dogs.php, breed.php, breeders.php, catvan.php.
   ========================================================================== */
@media (max-width: 991px) {

  .product-grid, .dog-grid, .breed-grid, .listing-grid, .card-grid {
    box-sizing: border-box !important;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    padding: 0 var(--m-gutter) !important;
    margin: 0 !important;
  }

  .product-card, .dog-card, .breed-card, .listing-card {
    display: flex !important;
    flex-direction: column;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    border-radius: var(--m-r-md) !important;
    background: var(--m-surface) !important;
    border: 1px solid var(--m-line) !important;
    box-shadow: var(--m-sh-1) !important;
    transition: transform .18s var(--m-ease) !important;
  }
  .product-card:active, .dog-card:active, .breed-card:active { transform: scale(.97) !important; }

  .product-card img, .dog-card img, .breed-card img, .listing-card img {
    width: 100% !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 0 !important;
    display: block;
    background: var(--m-surface-2);
  }

  /* listing controls: the filter toggle and sort select sit on one row */
  .filters-toggle-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    min-height: 42px;
    margin: 10px var(--m-gutter) !important;
    padding: 10px 18px !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--m-ink) !important;
    background: var(--m-surface) !important;
    border: 1px solid var(--m-line-2) !important;
    border-radius: 99px !important;
    box-shadow: var(--m-sh-1) !important;
  }
  .filters-toggle-btn:active { transform: scale(.96); }
}


/* ==========================================================================
   7b · CART
   ========================================================================== */
@media (max-width: 991px) {

  .cart-header {
    padding: 14px var(--m-gutter) !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    background: var(--m-grad-deep) !important;
    color: #fff !important;
  }

  .cart-wrapper {
    display: block !important;
    margin: 14px auto !important;
    padding: 0 var(--m-gutter) !important;
  }

  /* the wrapper flips to a column on mobile, which turns the desktop
     `flex: 1 1 650px` into a 650px *height* — hence the tall empty box */
  .cart-container, .summary-box {
    flex: 0 0 auto !important;
    width: auto !important;
    max-height: none !important;
    height: auto !important;
    margin: 0 0 14px !important;
    padding: 16px 14px !important;
    border-radius: var(--m-r-lg) !important;
    border: 1px solid var(--m-line) !important;
    box-shadow: var(--m-sh-1) !important;
  }
  .cart-container:hover, .summary-box:hover { transform: none !important; }

  /* empty state */
  .cart-container > p:only-child {
    margin: 0 !important;
    padding: 30px 0 !important;
    text-align: center;
    font-size: 14px;
    color: var(--m-ink-2);
  }

  .place-order-btn {
    width: 100% !important;
    min-height: 48px;
    border-radius: 99px !important;
    background: var(--m-grad) !important;
    box-shadow: var(--m-sh-brand) !important;
    font-weight: 800 !important;
  }
}


/* ==========================================================================
   8 · SERVICE-PAGE TEMPLATE
   vet · goom · dogcare · dtrain · petboard · petfuneral · petmatting ·
   dyieng · dogwalking all share this skeleton.
   ========================================================================== */
@media (max-width: 991px) {

  .hero {
    padding: 22px var(--m-gutter) 26px !important;
    text-align: left !important;
  }

  .hero-text h1 {
    font-size: 25px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: -.6px !important;
    /* these headlines are authored in caps, which is shouty at phone size */
    text-transform: none !important;
    margin: 0 0 8px !important;
  }

  .hero-text > p {
    font-size: 14px !important;
    line-height: 1.55 !important;
    color: var(--m-ink-2) !important;
    margin: 0 0 16px !important;
  }

  /* the decorative mascot eats a whole screen on a phone */
  .hero-img { display: none !important; }

  .form-box {
    padding: 16px 14px !important;
    border-radius: var(--m-r-lg) !important;
    background: var(--m-surface) !important;
    border: 1px solid var(--m-line) !important;
    box-shadow: var(--m-sh-1) !important;
    margin: 0 !important;
  }
  .form-box form { display: flex; flex-direction: column; gap: 10px; }
  .form-box input, .form-box select, .form-box textarea { margin: 0 !important; }

  /* labels authored as bare centred text between fields */
  .form-box > form > label,
  .form-box p { text-align: left; font-size: 12.5px; color: var(--m-ink-2); margin: 2px 0 0; }

  .pricing-section, .services, .steps, .feedback, .contact {
    padding: 26px var(--m-gutter) !important;
  }

  .pricing-grid, .step-grid, .service-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .price-card, .step, .service, .feedback-card {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 16px !important;
    border-radius: var(--m-r-lg) !important;
    background: var(--m-surface) !important;
    border: 1px solid var(--m-line) !important;
    box-shadow: var(--m-sh-1) !important;
    margin: 0 !important;
    width: auto !important;
  }

  /* testimonial rail scrolls instead of stacking */
  .carousel-viewport, .carousel {
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    scroll-padding-left: var(--m-gutter);
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding: 2px var(--m-gutter) 12px !important;
    margin: 0 calc(var(--m-gutter) * -1) !important;
  }
  .carousel-viewport::-webkit-scrollbar,
  .carousel::-webkit-scrollbar { display: none; }

  .carousel-track {
    display: flex !important;
    gap: 12px !important;
    width: max-content !important;
    transform: none !important;
  }

  .carousel-track .feedback-card,
  .carousel-track > * {
    flex: 0 0 78vw !important;
    max-width: 300px;
    scroll-snap-align: start;
  }

  /* the desktop prev/next arrows are replaced by the swipe gesture */
  .carousel-buttons { display: none !important; }

  .stars { color: #f59e0b !important; font-size: 13px !important; }

  /* --------------------------------------------------------------------
     Image gallery ("Grooming Moments That Shine" and its per-page twins).
     The gallery is a flex child with `flex: 1 1 500px`, so on a 390px
     screen it kept its 500px basis and ran off the side, silently clipped
     by the body's overflow guard. Let it take the full row instead.
     -------------------------------------------------------------------- */
  .grooming-container, .vet-container {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    padding: 0 !important;
  }

  .grooming-gallery, .vet-gallery {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin: 0 !important;
  }

  .grooming-img-wrap, .vet-img-wrap {
    min-width: 0;
    margin: 0 !important;
    border-radius: var(--m-r-md) !important;
    box-shadow: var(--m-sh-1) !important;
  }
  .grooming-img-wrap img, .vet-img-wrap img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
  }

  .grooming-text, .vet-text { padding: 0 !important; min-width: 0; }
}


/* ==========================================================================
   8b · vet.php — bring it in line with the other eight service pages
   --------------------------------------------------------------------------
   vet.php was authored separately from the goom/dogcare/petboard family and
   drifted from it:

     * its hero is the only one with a viewport-height floor
       (min-height: 80vh, then 65vh / 55vh), which on a phone leaves a tall
       band of empty yellow under the form — the other eight size to content;
     * "How It Works" is a bare <section class="steps"> rather than the
       tinted .steps-section band the others use;
     * the copy block is .services / .service-list instead of
       .service-description;
     * the closing banner is .vet-cta-section, not .grooming-cta-section.

   The markup differs per page, so rather than rewriting vet.php (which would
   change its desktop layout too) these rules map its classes onto the same
   visual language, mobile only.
   ========================================================================== */
@media (max-width: 991px) {

  /* 1 · sections size to their content, like every other service page.
         vet.php is the only one using viewport-height floors — .hero at
         80/65/55vh and .pricing-section at 100vh — which on a phone leave
         screen-high bands of empty colour below the form and below the last
         price card. */
  .hero,
  .pricing-section {
    min-height: 0 !important;
    height: auto !important;
  }
  .hero { display: block !important; }

  /* 1b · the hero headline matches the family.
          goom/dogcare/petboard all render `<h1><i class="fas fa-…"></i> …`
          in deep purple; vet.php's markup has no icon and no colour rule, so
          it came out plain near-black. The icon is added from CSS rather
          than by editing the markup, which keeps desktop as authored. */
  .hero-text h1 { color: #4a148c !important; }

  /* The other pages ship an inline <i> in the heading; vet.php does not.
     `:not(:has(i))` supplies one only where it is missing, so no page ends
     up with two. Browsers without :has() simply skip it — no icon, which is
     exactly today's behaviour. */
  .hero-text h1:not(:has(i))::before {
    content: '\f0f1';                                    /* stethoscope */
    font-family: 'Font Awesome 6 Free', 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 9px;
  }

  /* the decorative paw is offset to left:-30px/top:-20px, which clears the
     desktop container's margin but lands on top of the heading once the
     column is only 358px wide */
  .paw-span::before { display: none !important; }

  /* 2 · "How Vet Visits Work" gets the shared tinted band */
  section.steps {
    background: #f3e5f5 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 30px var(--m-gutter) 34px !important;
  }
  section.steps > h2,
  section.services > h2,
  .steps-section > h2,
  .service-description > h2 {
    text-align: center;
    margin: 0 0 20px !important;
    color: #4a148c !important;
  }

  /* 3 · descriptive copy block matches .service-description */
  section.services {
    background: #fff !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 30px var(--m-gutter) !important;
    text-align: center;
  }
  section.services p { color: #444 !important; }

  /* 4 · numbered/step and service cards match .step-box */
  .step, .service {
    width: auto !important;
    text-align: center;
    background: #fff !important;
    border-radius: var(--m-r-lg) !important;
    box-shadow: var(--m-sh-1) !important;
  }
  .step span, .step-box span {
    display: block;
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #4a148c !important;
    margin-bottom: 8px;
  }

  /* 5 · closing banner matches the grooming/dogcare one */
  section.vet-cta-section {
    background: #fff !important;
    padding: 30px var(--m-gutter) !important;
  }

  /* the shared pages cap this band's padding too */
  .steps-section, .service-description, section.grooming-cta-section {
    padding: 30px var(--m-gutter) !important;
  }
  .steps { gap: 12px !important; margin-top: 0 !important; }
  .step-box {
    width: auto !important;
    padding: 18px !important;
    border-radius: var(--m-r-lg) !important;
    box-shadow: var(--m-sh-1) !important;
  }
}


/* ==========================================================================
   8c · mainvetpage.php — the services directory
   --------------------------------------------------------------------------
   Authored as a desktop three-across grid, it collapsed on a phone into nine
   full-width cards roughly 430px tall each: one service per screen, ~3900px
   of scrolling to read a nine-item menu. The headings and buttons were also
   the only blue in an otherwise orange product.

   Rebuilt here as a two-across tile grid — the same markup, read as a
   directory rather than nine landing pages stacked.

   `.hero` is shared with the nine service pages, so the hero rules are
   pinned to this page's shape: only here is the <h1> a direct child of
   .hero (the service pages nest theirs inside .hero-text).
   ========================================================================== */
@media (max-width: 991px) {

  /* the lavender page ground is replaced by the app background */
  body:has(> main > section.service) { background: var(--m-bg) !important; }

  /* ---- hero ---- */
  .hero:has(> h1) {
    margin: 14px var(--m-gutter) 4px !important;
    padding: 26px 20px 28px !important;
    text-align: center !important;
    border-radius: var(--m-r-xl) !important;
    background: linear-gradient(135deg, #ff6b35 0%, #ff9350 55%, #ffc46b 100%) !important;
    box-shadow: 0 14px 30px -14px rgba(255,107,53,.65) !important;
    overflow: hidden;
    position: relative;
  }

  /* soft light sweep out of the top-right corner */
  .hero:has(> h1)::after {
    content: '';
    position: absolute;
    top: -70px;
    right: -60px;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    pointer-events: none;
  }

  .hero:has(> h1) > h1 {
    position: relative;
    z-index: 1;
    font-size: 24px !important;
    font-weight: 800 !important;
    line-height: 1.22 !important;
    letter-spacing: -.4px !important;
    color: #fff !important;
    margin: 0 0 8px !important;
    text-shadow: none !important;
  }

  .hero:has(> h1) > p {
    position: relative;
    z-index: 1;
    font-size: 13px !important;
    line-height: 1.5 !important;
    font-weight: 500 !important;
    color: rgba(255,255,255,.92) !important;
    margin: 0 auto !important;
    max-width: 280px !important;
    text-shadow: none !important;
  }

  /* ---- the grid ---- */
  main:has(> section.service) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 6px var(--m-gutter) 8px !important;
    background: transparent !important;
  }

  /* a heading for the grid, which the page never had */
  main:has(> section.service)::before {
    content: 'Our Services';
    grid-column: 1 / -1;
    padding: 14px 2px 4px;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.2px;
    color: var(--m-ink);
  }

  /* ---- tile ---- */
  section.service {
    position: relative;
    padding: 16px 12px 14px !important;
    border-radius: var(--m-r-lg) !important;
    background: var(--m-surface) !important;
    border: 1px solid var(--m-line) !important;
    box-shadow: var(--m-sh-1) !important;
    transition: transform .18s var(--m-ease) !important;
    align-items: center !important;
  }
  section.service:hover { transform: none !important; box-shadow: var(--m-sh-1) !important; }
  section.service:active { transform: scale(.97) !important; }

  /* the icon anchor should not add its own box */
  section.service .icon-link { display: block; line-height: 0; }

  section.service .icon {
    width: 46px !important;
    height: 46px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 auto 10px !important;
    padding: 0 !important;
    font-size: 19px !important;
    color: var(--m-brand) !important;
    background: var(--m-brand-soft) !important;
    border-radius: 14px !important;
    box-shadow: none !important;
  }
  section.service:hover .icon {
    color: var(--m-brand) !important;
    background: var(--m-brand-soft) !important;
    box-shadow: none !important;
  }

  section.service h2 {
    /* the blue was the only one in the product */
    color: var(--m-ink) !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    letter-spacing: -.1px !important;
    line-height: 1.3 !important;
    margin: 0 0 5px !important;
    min-height: 35px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  section.service p {
    font-size: 11.5px !important;
    line-height: 1.45 !important;
    color: var(--m-ink-2) !important;
    max-width: none !important;
    margin: 0 0 12px !important;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .book-now-btn {
    margin: auto 0 0 !important;
    padding: 9px 16px !important;
    font-size: 11.5px !important;
    font-weight: 700 !important;
    border-radius: 99px !important;
    background: var(--m-grad) !important;
    color: #fff !important;
    box-shadow: 0 6px 14px -7px rgba(255,107,53,.7) !important;
  }
  /* the whole tile becomes the tap target — both links already point at the
     same page, so there is nothing ambiguous to hit */
  .book-now-btn::after { content: ''; position: absolute; inset: 0; }

  /* nine services in two columns leaves the last one alone beside a gap;
     letting it run full width finishes the grid off */
  main:has(> section.service) > section.service:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }
}

/* ==========================================================================
   8e · profile.php
   --------------------------------------------------------------------------
   Deliberately empty. profile.php carries its own responsive stylesheet that
   covers both breakpoints from one grid, so overriding it from here would
   mean two sources of truth fighting over the same page.
   ========================================================================== */


/* ==========================================================================
   8f · SERVICE PAGES — SHARED MOBILE THEME
   --------------------------------------------------------------------------
   vet · goom · dogcare · dtrain · petboard · petfuneral · petmatting ·
   dyieng · dogwalking — every page carrying `body.service-page`.

   These nine ran on a purple (#4a148c) and butter-yellow palette that appears
   nowhere else in the product. The header above them is orange on frosted
   white and the footer below them is brand teal, so the page between read as
   a different site. Sections 8 and 8b above still hold the shared skeleton;
   this section restates the COLOUR and the card shapes in the product's own
   tokens, and comes after them so it wins on document order.

   Desktop is untouched: everything is inside max-width 991px.

   Card markup is not the same on all nine, so the pricing treatment is
   applied per shape rather than pretending one selector fits:

     .plan        goom, dogcare, dtrain, petboard, petfuneral,
                  petmatting, dogwalking  — h3 + .price + ul + button
     .price-card  vet     — h3 + p + <strong> price + button
     .price-card  dyieng  — i + h3 + p, with the price inside the paragraph
                            text, so it cannot be lifted onto its own row
                            without editing the markup. That one keeps the
                            stacked layout and gets the styling only.
   ========================================================================== */
@media (max-width: 991px) {

  body.service-page {
    --s-ink:     #0f1c26;
    --s-ink-2:   #55677a;
    --s-ink-3:   #8b9bab;
    --s-line:    rgba(15,28,38,.08);
    --s-brand:   #ff6b35;
    --s-grad:    linear-gradient(135deg,#ff6b35 0%,#ff9350 100%);
    --s-soft:    rgba(255,107,53,.10);
    --s-deep:    #0d3b4f;
    --s-surface: #ffffff;
    --s-bg:      #f7f8fa;
    --s-r:       18px;
    --s-sh:      0 1px 2px rgba(15,28,38,.05), 0 14px 30px -18px rgba(15,28,38,.35);

    background: var(--s-bg) !important;
  }

  /* ---- hero ------------------------------------------------------------ */
  body.service-page .hero {
    display: block !important;
    margin: 12px 16px 0 !important;
    padding: 22px 18px 20px !important;
    border-radius: 26px !important;
    background: linear-gradient(135deg,#ff6b35 0%,#ff9350 58%,#ffc46b 100%) !important;
    box-shadow: 0 16px 32px -16px rgba(255,107,53,.7) !important;
    position: relative;
    overflow: hidden;
    min-height: 0 !important;
    height: auto !important;
  }

  body.service-page .hero::after {
    content: '';
    position: absolute;
    top: -70px; right: -60px;
    width: 190px; height: 190px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    pointer-events: none;
  }

  body.service-page .hero-text { position: relative; z-index: 1; }

  /* 8b paints every service h1 #4a148c for the vet page's benefit; on the
     brand panel it has to be readable instead. */
  body.service-page .hero-text h1,
  body.service-page .hero-text h1 i {
    color: #fff !important;
    text-shadow: none !important;
  }
  body.service-page .hero-text h1 {
    font-size: 25px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: -.5px !important;
    text-transform: none !important;
    margin: 0 0 8px !important;
  }
  body.service-page .hero-text > p {
    color: rgba(255,255,255,.94) !important;
    font-size: 13.5px !important;
    line-height: 1.55 !important;
    margin: 0 0 16px !important;
    text-shadow: none !important;
  }

  /* ---- booking form ---------------------------------------------------- */
  body.service-page .form-box {
    padding: 16px 14px 18px !important;
    border-radius: 20px !important;
    background: var(--s-surface) !important;
    border: 0 !important;
    box-shadow: 0 10px 24px -14px rgba(15,28,38,.5) !important;
  }
  body.service-page .form-box form { gap: 11px !important; }

  body.service-page .form-box label {
    font-size: 11px !important;
    font-weight: 800 !important;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--s-ink-3) !important;
    margin: 2px 0 -3px !important;
  }
  body.service-page .form-box input,
  body.service-page .form-box select,
  body.service-page .form-box textarea {
    border: 1.5px solid var(--s-line) !important;
    background: #fbfcfd !important;
    border-radius: 13px !important;
  }
  body.service-page .form-box input:focus,
  body.service-page .form-box select:focus,
  body.service-page .form-box textarea:focus {
    border-color: var(--s-brand) !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px var(--s-soft) !important;
  }

  /* Several of these pages show a live price above the date field. It is
     empty until a package is picked, and an empty element with a margin and
     a background is still a visible bar. */
  body.service-page [id$="PriceDisplay"]:empty,
  body.service-page #priceDisplay:empty { display: none !important; }

  body.service-page [id$="PriceDisplay"],
  body.service-page #priceDisplay {
    margin: 2px 0 0 !important;
    padding: 10px 13px !important;
    border-radius: 12px !important;
    background: var(--s-soft) !important;
    color: var(--s-brand) !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
  }

  body.service-page .location-btn {
    background: #fff !important;
    color: var(--s-brand) !important;
    border: 1.5px solid var(--s-soft) !important;
    box-shadow: none !important;
  }
  body.service-page .form-box form > button:not(.location-btn),
  body.service-page .book-btn {
    background: var(--s-grad) !important;
    box-shadow: 0 10px 22px -10px rgba(255,107,53,.75) !important;
  }

  /* ---- section headings ------------------------------------------------ */
  body.service-page .steps-section > h2,
  body.service-page .service-description > h2,
  body.service-page .pricing-section > h2,
  body.service-page section.steps > h2,
  body.service-page section.services > h2,
  body.service-page .grooming-text h2,
  body.service-page .vet-text h2 {
    color: var(--s-ink) !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    letter-spacing: -.3px !important;
    margin: 0 0 16px !important;
  }
  body.service-page .steps-section > h2 i,
  body.service-page .service-description > h2 i,
  body.service-page .pricing-section > h2 i,
  body.service-page section.steps > h2 i,
  body.service-page section.services > h2 i {
    color: var(--s-brand) !important;
    margin-right: 4px;
  }

  /* ---- how it works ---------------------------------------------------- */
  body.service-page .steps-section,
  body.service-page section.steps {
    background: transparent !important;
    padding: 26px 16px 6px !important;
  }
  /* `div.steps`, not `.steps`.

     Eight of these pages wrap the boxes in <div class="steps"> inside a
     <section class="steps-section">. vet.php instead names the SECTION
     "steps" and wraps its boxes in <div class="step-grid">. A bare `.steps`
     therefore matched vet's whole section and laid the section out as two
     columns - heading in one, the steps in the other. Qualifying by element
     keeps the two shapes apart, and .step-grid is given the same grid. */
  body.service-page div.steps,
  body.service-page .step-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-top: 0 !important;
  }
  body.service-page .step-box,
  body.service-page .step {
    width: auto !important;
    padding: 16px 12px !important;
    border-radius: var(--s-r) !important;
    background: var(--s-surface) !important;
    border: 1px solid var(--s-line) !important;
    box-shadow: var(--s-sh) !important;
    text-align: center;
  }
  body.service-page .step-box span,
  body.service-page .step span {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 34px; height: 34px;
    margin: 0 auto 9px !important;
    padding: 0 9px;
    border-radius: 11px;
    background: var(--s-soft) !important;
    color: var(--s-brand) !important;
    font-size: 13px !important;
    font-weight: 800 !important;
  }
  /* vet.php's .step is one flat div - icon then label, no span/p inside. */
  body.service-page .step-grid .step {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 84px;
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    color: var(--s-ink-2) !important;
  }
  body.service-page .step-grid .step i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border-radius: 11px;
    background: var(--s-soft);
    color: var(--s-brand) !important;
    font-size: 13px;
  }

  body.service-page .step-box p,
  body.service-page .step p {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    color: var(--s-ink-2) !important;
    margin: 0 !important;
  }

  /* ---- copy block ------------------------------------------------------ */
  body.service-page .service-description,
  body.service-page section.services {
    background: transparent !important;
    padding: 22px 16px !important;
  }
  body.service-page .service-description p,
  body.service-page section.services p {
    color: var(--s-ink-2) !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
  }

  /* ---- pricing: shared shell ------------------------------------------- */
  body.service-page .pricing-section {
    background: transparent !important;
    padding: 8px 16px 26px !important;
    min-height: 0 !important;
  }
  body.service-page .pricing-options,
  body.service-page .pricing-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 11px !important;
  }

  body.service-page .plan,
  body.service-page .price-card {
    position: relative;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 15px 15px 16px !important;
    border-radius: var(--s-r) !important;
    background: var(--s-surface) !important;
    border: 1px solid var(--s-line) !important;
    box-shadow: var(--s-sh) !important;
    text-align: left;
    overflow: hidden;
  }

  /* These pages draw a 5px indigo-to-purple bar down the left of each card
     through ::after. Restated in the brand gradient and moved to the top
     edge, where it reads as a card header rather than a bookmark. */
  body.service-page .plan::after,
  body.service-page .price-card::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: auto !important;
    height: 3px !important;
    background: var(--s-grad) !important;
    border-radius: 0 !important;
  }

  /* ---- pricing: .plan (seven pages) ------------------------------------ */
  /* Two-column grid so the price sits beside the name instead of under it.
     Stacked, each card ran about 220px of mostly air. */
  body.service-page .plan {
    display: grid !important;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 12px;
    row-gap: 0;
  }
  body.service-page .plan h3 {
    grid-column: 1;
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin: 3px 0 9px !important;
    font-size: 14.5px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    color: var(--s-ink) !important;
    text-align: left;
  }
  body.service-page .plan h3 i {
    width: 34px; height: 34px;
    flex: 0 0 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: var(--s-soft);
    color: var(--s-brand) !important;
    font-size: 14px;
  }
  body.service-page .plan .price {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    margin: 3px 0 9px !important;
    font-size: 21px !important;
    font-weight: 800 !important;
    letter-spacing: -.5px;
    line-height: 1.2 !important;
    color: var(--s-deep) !important;
    white-space: nowrap;
  }
  body.service-page .plan ul {
    grid-column: 1 / -1;
    list-style: none;
    margin: 0 0 13px !important;
    padding: 0 !important;
  }
  body.service-page .plan ul li {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    color: var(--s-ink-2) !important;
  }
  body.service-page .plan a {
    grid-column: 1 / -1;
    display: block;
    text-decoration: none;
  }

  /* ---- pricing: vet.php .price-card ------------------------------------ */
  /* h3 + p + <strong>price</strong> + button. The price is its own element,
     so it can share the heading's row the same way .plan does. */
  body.service-page .price-card:has(> strong) {
    display: grid !important;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 12px;
  }
  body.service-page .price-card > h3 {
    grid-column: 1;
    margin: 2px 0 6px !important;
    font-size: 14.5px !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
    color: var(--s-ink) !important;
    text-align: left;
  }
  body.service-page .price-card > strong {
    grid-column: 2;
    grid-row: 1;
    margin: 2px 0 6px !important;
    font-size: 21px !important;
    font-weight: 800 !important;
    letter-spacing: -.5px;
    color: var(--s-deep) !important;
    white-space: nowrap;
  }
  body.service-page .price-card > p {
    grid-column: 1 / -1;
    margin: 0 0 12px !important;
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    color: var(--s-ink-2) !important;
  }
  body.service-page .price-card > br { display: none !important; }
  body.service-page .price-card > a {
    grid-column: 1 / -1;
    display: block;
    text-decoration: none;
  }

  /* ---- pricing: dyieng.php .price-card --------------------------------- */
  /* i + h3 + p, with the price written inside the paragraph text. There is
     nothing to lift onto its own row without editing the markup, so this one
     keeps the stacked order and takes the styling only. */
  body.service-page .price-card:not(:has(> strong)) { text-align: center; }
  body.service-page .price-card > i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px; height: 42px;
    margin: 0 auto 10px;
    border-radius: 13px;
    background: var(--s-soft);
    color: var(--s-brand) !important;
    font-size: 16px !important;
  }

  /* ---- every pricing button -------------------------------------------- */
  body.service-page .plan button,
  body.service-page .price-card button,
  body.service-page .price-card .book-btn {
    width: 100%;
    min-height: 44px;
    border: 0 !important;
    border-radius: 99px !important;
    background: var(--s-grad) !important;
    color: #fff !important;
    font-size: 13.5px !important;
    font-weight: 800 !important;
    letter-spacing: .1px;
    box-shadow: 0 8px 18px -9px rgba(255,107,53,.8) !important;
  }
  body.service-page .plan button:active,
  body.service-page .price-card button:active { transform: scale(.98); }

  /* ---- closing band ---------------------------------------------------- */
  body.service-page section.grooming-cta-section,
  body.service-page section.vet-cta-section {
    background: transparent !important;
    padding: 4px 16px 26px !important;
  }
  body.service-page .grooming-text p,
  body.service-page .vet-text p {
    color: var(--s-ink-2) !important;
    font-size: 14px !important;
    line-height: 1.65 !important;
  }
  /* .grooming-btn is a flat violet in these pages' own CSS. */
  body.service-page a.grooming-btn,
  body.service-page .grooming-cta-section .book-btn,
  body.service-page .vet-cta-section .book-btn {
    display: block !important;
    width: 100% !important;
    /* the pages cap this at max-width:280px, which left the button noticeably
       narrower than the paragraph above it */
    max-width: none !important;
    min-height: 46px;
    line-height: 46px;
    padding: 0 20px !important;
    border-radius: 99px !important;
    background: var(--s-grad) !important;
    background-color: transparent !important;
    color: #fff !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    text-align: center;
    text-decoration: none !important;
    box-shadow: 0 10px 22px -10px rgba(255,107,53,.75) !important;
  }

  /* ---- headings anywhere on the page ------------------------------------
     The rules above name the sections these pages were known to have, but
     they also carry one-off bands - "Client Feedback", "Contact Us",
     "Emergency Response Training", "Need Help Right Now?" - whose headings
     were still the old purple. Catching every h2 is simpler than chasing the
     list, and safe: the hero h1 is separate, and footer.php's own stylesheet
     is emitted after this file so the footer keeps its own colours. */
  body.service-page h2 {
    color: var(--s-ink) !important;
  }
  body.service-page h2 i {
    color: var(--s-brand) !important;
  }

  /* a phone number in a contact band was the last purple link */
  body.service-page .contact a,
  body.service-page .contact-section a {
    color: var(--s-brand) !important;
    font-weight: 700;
  }

  /* ---- feature lists ----------------------------------------------------
     goom lists eight inclusions per package, each with a tick. Left at the
     inherited spacing those cards ran to 376px; this tightens the rows and
     puts the ticks in brand instead of leaving them to the page. */
  body.service-page .plan ul li {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    margin: 0 0 4px !important;
  }
  body.service-page .plan ul li i {
    flex: 0 0 auto;
    margin-top: 3px;
    color: var(--s-brand) !important;
    font-size: 10.5px !important;
  }

  /* ---- the empty band under the closing copy ---------------------------
     Every one of these pages writes

         .grooming-text { flex: 1 1 400px; }
         .grooming-gallery { flex: 1 1 500px; }

     for the DESKTOP layout, where .grooming-container is a flex ROW and that
     basis means "400px wide". Section 8 above flips the container to a
     column on mobile, and flex-basis follows the main axis - so on a phone it
     stopped meaning 400px wide and started meaning 400px TALL.

     The text on dogwalking is 255px of content in a 400px box: 145px of dead
     space between the "Book a Walking Slot" button and the gallery below it,
     on all nine pages.

     Sizing to content is what a column wants. Applied to the children of both
     containers rather than to the two class names, so a page that adds a
     third child does not reintroduce it. */
  body.service-page .grooming-container > *,
  body.service-page .vet-container > * {
    flex: 0 0 auto !important;
  }

  body.service-page .feedback-card {
    padding: 16px !important;
    border-radius: var(--s-r) !important;
    background: var(--s-surface) !important;
    border: 1px solid var(--s-line) !important;
    box-shadow: var(--s-sh) !important;
  }
  body.service-page .feedback-card p {
    color: var(--s-ink-2) !important;
    font-size: 13px !important;
  }
}


/* ==========================================================================
   9 · FLOATING CALL BUTTONS
   They must clear the tab bar rather than sit on top of it.
   ========================================================================== */
@media (max-width: 991px) {

  .right_call_btns {
    right: 12px !important;
    bottom: calc(var(--m-tabbar-h) + var(--m-safe-b) + 20px) !important;
    gap: 10px !important;
    z-index: 880 !important;   /* see the stacking note on .m-tabbar */
  }
  .right_call_btns a {
    width: 46px !important;
    height: 46px !important;
    box-shadow: var(--m-sh-2) !important;
  }
}
/* ==========================================================================
   8d · AUTH PAGES — login.php and signup.php
   --------------------------------------------------------------------------
   The two pages share their component classes (.logo-icon, .welcome-text,
   .form-group, .input-wrapper, .divider, .paw-bg), so both are treated here.

   What was wrong on login:
     * three stacked brand elements — a paw tile, the word "Mekozza", and a
       tagline flanked by heart glyphs — before the screen even said what it
       was for, and none of it matched the mark used everywhere else;
     * every field carried its icon twice, once in the label and again
       inside the input;
     * "Remember me" and "Forgot password?" were stacked by the page's own
       mobile query, though they fit side by side with room to spare;
     * no way to reveal the password, which is where phone logins fail;
     * "New to Mekozza?" and "Don't have an account?" said the same thing
       twice, and the actual sign-up route was a small inline link.
   ========================================================================== */
@media (max-width: 991px) {

  .login-wrapper, .signup-wrapper {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: 14px var(--m-gutter) calc(14px + var(--m-safe-b)) !important;
    box-sizing: border-box;
  }

  .login-card, .signup-card {
    width: 100%;
    max-width: 420px;
    padding: 22px 18px 20px !important;
    border-radius: var(--m-r-xl) !important;
    background: var(--m-surface) !important;
    border: 1px solid var(--m-line) !important;
    box-shadow: 0 20px 44px -22px rgba(15,28,38,.42) !important;
    backdrop-filter: none !important;
  }
  .login-card:hover, .signup-card:hover {
    transform: none !important;
    box-shadow: 0 20px 44px -22px rgba(15,28,38,.42) !important;
  }

  /* ---- brand lockup: one mark, not three ---- */
  .login-card .logo-section,
  .signup-card .logo-section { margin-bottom: 15px !important; }

  /* the paw tile and the heart-flanked tagline are dropped; the wordmark
     carries the brand, the same one the header and footer use */
  .login-card .logo-icon, .signup-card .logo-icon,
  .login-card .logo-section .tagline,
  .signup-card .logo-section .tagline { display: none !important; }

  .login-card .logo-section h1,
  .signup-card .logo-section h1 {
    width: 148px;
    height: 29px;
    margin: 0 auto !important;
    background-image: url('/images/logo-mark.png');
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    text-indent: -9999px;
    animation: none !important;
  }

  .welcome-text { margin-bottom: 16px !important; text-align: center; }
  .welcome-text h2 {
    font-size: 21px !important;
    font-weight: 800 !important;
    letter-spacing: -.4px !important;
    color: var(--m-ink) !important;
    margin: 0 0 4px !important;
  }
  .welcome-text p {
    font-size: 13px !important;
    color: var(--m-ink-2) !important;
    margin: 0 !important;
  }

  /* ---- fields ---- */
  .form-group { margin-bottom: 12px !important; }

  .form-group > label {
    display: block;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: .1px;
    color: var(--m-ink-2) !important;
    margin-bottom: 7px !important;
  }
  /* the input already shows this icon inside the field */
  .form-group > label > i,
  .file-upload > label > i { display: none !important; }

  .file-upload > label {
    display: block;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--m-ink-2) !important;
    margin-bottom: 7px !important;
  }
  .file-upload { margin-bottom: 16px !important; }

  /* signup's strength readout is pulled up by a negative margin sized for
     the desktop field rhythm; against the tighter mobile spacing it rode up
     into the password input and was clipped by it */
  .password-strength {
    margin-top: 7px !important;
    margin-bottom: 0 !important;
    padding-left: 2px !important;
    font-size: 11.5px !important;
  }

  .input-wrapper { position: relative; }
  .input-wrapper > i {
    color: var(--m-ink-3) !important;
    font-size: 14px !important;
  }
  .input-wrapper input:focus ~ i,
  .input-wrapper input:focus + i { color: var(--m-brand) !important; }

  /* reveal control, injected on mobile only */
  .pw-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--m-ink-3);
    font-size: 14px;
    cursor: pointer;
    z-index: 2;
  }
  .pw-toggle:active { background: var(--m-surface-2); }
  /* keep the text clear of the control */
  .input-wrapper:has(.pw-toggle) input { padding-right: 46px !important; }

  /* ---- remember / forgot back onto one row ---- */
  .remember-forgot {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin-bottom: 18px !important;
  }
  .checkbox-wrapper {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--m-ink-2) !important;
  }
  .checkbox-wrapper input { margin: 0 !important; }
  .forgot-link {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: var(--m-brand) !important;
    white-space: nowrap;
  }

  /* ---- primary action ---- */
  .login-btn, .signup-btn {
    width: 100% !important;
    min-height: 50px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 9px;
    font-size: 15px !important;
    font-weight: 800 !important;
    border: 0 !important;
    border-radius: 99px !important;
    background: var(--m-grad) !important;
    color: #fff !important;
    box-shadow: var(--m-sh-brand) !important;
    margin-bottom: 4px !important;
  }

  /* ---- divider + secondary action ---- */
  .divider {
    margin: 18px 0 14px !important;
    font-size: 11.5px !important;
    color: var(--m-ink-3) !important;
  }
  .divider::before, .divider::after { background: var(--m-line-2) !important; }

  /* the sign-up route was an inline link inside a sentence; it becomes the
     secondary button it always was in intent */
  .signup-link, .login-link { margin: 0 !important; }
  .signup-link p, .login-link p { font-size: 0 !important; margin: 0 !important; }
  .signup-link a, .login-link a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px;
    font-size: 14px !important;
    font-weight: 800 !important;
    color: var(--m-brand) !important;
    background: var(--m-brand-soft) !important;
    border-radius: 99px !important;
    text-decoration: none !important;
  }
  .signup-link a:active, .login-link a:active { transform: scale(.98); }

  /* ---- error banner ---- */
  .error-message {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 13px !important;
    margin-bottom: 14px !important;
    font-size: 13px !important;
    border-radius: var(--m-r-sm) !important;
    background: rgba(225,29,72,.08) !important;
    color: var(--m-danger) !important;
    border: 1px solid rgba(225,29,72,.18) !important;
  }

  /* ---- decorative paws, dialled down ---- */
  .paw-bg i { opacity: .04 !important; font-size: 46px !important; }
}



/* ==========================================================================
   9b · PAGE LOADER
   --------------------------------------------------------------------------
   The authored loader put a large multi-coloured spinning ring in the same
   place as the heading, so "Preparing Pet Happiness" was permanently struck
   through by it. It also carried floating paw emoji, a pink/violet gradient
   heading and three status chips that wrapped onto two rows — none of it in
   the product's palette.

   Rebuilt as a quiet brand screen: the mark, one line of text, and a single
   indeterminate bar. Nothing overlaps, and the only colour is the brand.

   Rules are !important because index.php's own loader CSS lives in a <style>
   block inside <body>, which would otherwise win on document order.
   ========================================================================== */
@media (max-width: 991px) {

  #page-loader {
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 32px !important;
    background:
      radial-gradient(circle at 50% 34%, rgba(255,107,53,.09), transparent 55%),
      var(--m-bg) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    animation: none !important;
  }

  /* decorative noise: the drifting paws and the background wash */
  #page-loader .paw,
  #page-loader .pet-loader-bg,
  /* the ring is what crossed through the heading */
  #page-loader .pet-loader-ring { display: none !important; }

  /* The three status words were hidden because they wrapped onto two rows and
     their spans were left at opacity 0 — dead markup taking up the bottom of
     the screen. Brought back as one quiet line, because a loading screen that
     says what it is doing is calmer than one that says nothing. */
  #page-loader .pet-loader-status {
    display: flex !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0 !important;
    margin: 20px 0 0 !important;
  }
  #page-loader .pet-loader-status span {
    opacity: 1 !important;
    background: none !important;
    border: 0 !important;
    /* the desktop chip is a 40px pill with a blur and a shadow; dropping only
       its background left a ghost of it behind each word, and the radius bent
       the separators into arcs */
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    padding: 0 9px !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .5px !important;
    text-transform: uppercase !important;
    color: var(--m-ink-3) !important;
    white-space: nowrap !important;
    animation: none !important;
  }
  /* hairline separators instead of three floating chips */
  #page-loader .pet-loader-status span + span {
    border-left: 1px solid var(--m-line-2) !important;
  }

  /* the card frame is dropped — the overlay itself is the surface */
  #page-loader .pet-loader-card {
    width: 100% !important;
    max-width: 300px !important;
    padding: 0 !important;
    background: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    text-align: center;
    animation: none !important;
  }

  /* The mark, on a surface of its own.

     It previously floated directly on the background, which was honest but
     read as an unfinished page rather than a considered one — a wordmark alone
     on white is what a broken stylesheet looks like. A tile gives it presence
     and a place to sit, and the ring around it is the only decoration on the
     screen. */
  #page-loader .pet-loader-logo {
    width: 116px !important;
    height: 116px !important;
    margin: 0 0 22px !important;
    padding: 0 22px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--m-surface) !important;
    border: 1px solid var(--m-line) !important;
    border-radius: 32px !important;
    box-shadow:
      0 18px 44px -18px rgba(15,28,38,.30),
      0 0 0 10px rgba(255,107,53,.06) !important;
    animation: m-loader-breathe 2.4s ease-in-out infinite !important;
  }
  #page-loader .pet-loader-logo img {
    content: url('/images/logo-mark.png');
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    filter: none !important;
    animation: none !important;
  }

  #page-loader h2 {
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: -.2px !important;
    line-height: 1.35 !important;
    color: var(--m-ink) !important;
    margin: 0 0 6px !important;
    /* the authored heading is gradient-filled text */
    background: none !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
    -webkit-text-fill-color: var(--m-ink) !important;
    animation: none !important;
  }

  #page-loader p {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    color: var(--m-ink-3) !important;
    margin: 0 0 24px !important;
    max-width: 236px !important;   /* two lines at most, never a ragged three */
    animation: none !important;
  }

  /* one slim indeterminate bar */
  #page-loader .pet-progress-bar {
    position: relative !important;
    width: 188px !important;
    max-width: 100% !important;
    height: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border-radius: 99px !important;
    background: rgba(15,28,38,.08) !important;
    box-shadow: none !important;
  }

  #page-loader .pet-progress-fill {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 45% !important;
    height: 100% !important;
    border-radius: 99px !important;
    background: var(--m-grad) !important;
    animation: m-loader-sweep 1.15s cubic-bezier(.6,.05,.3,.95) infinite !important;
  }

  @keyframes m-loader-sweep {
    0%   { transform: translateX(-110%); }
    100% { transform: translateX(330%); }
  }

  @keyframes m-loader-breathe {
    0%, 100% { transform: translateY(0)     scale(1);    }
    50%      { transform: translateY(-3px)  scale(.985); }
  }
}

/* a reader who asked for less motion still needs to see progress, so the bar
   stays but stops travelling */
@media (max-width: 991px) and (prefers-reduced-motion: reduce) {
  #page-loader .pet-loader-logo { animation: none !important; }
  #page-loader .pet-progress-fill {
    animation: none !important;
    width: 100% !important;
    opacity: .55;
  }
}



/* ==========================================================================
   10 · FOOTER
   Stacked four-deep the shared footer ran to roughly 1200px on a phone;
   a two-column link grid brings it back to a sensible height.
   ========================================================================== */
@media (max-width: 991px) {

  /* `width:100%` plus 25px of side padding under content-box sizing made the
     footer wider than the screen and dragged the whole document with it */
  .footer, .footer * { box-sizing: border-box; }

  .footer {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 10px;
    padding: 28px 0 0 !important;   /* 75px of desktop head-room is too much */
    border-top-left-radius: 26px !important;
    border-top-right-radius: 26px !important;
  }

  .footer .container { padding: 0 var(--m-gutter) !important; max-width: 100% !important; }

  .footer-content {
    display: block !important;
    padding: 22px 0 8px !important;
  }

  .footer-item.logo-container { text-align: center; margin-bottom: 20px; }

  /* Same treatment for the footer, in the light-on-dark variant so the mark
     sits on the purple instead of being a red rectangle pasted over it.
     `content` swaps the <img> source without touching the shared markup,
     which keeps the desktop footer exactly as it was. */
  .footer-logo {
    content: url('/images/logo-mark-light.png');
    width: 150px !important;
    max-width: 150px !important;
    height: auto !important;
    display: block;
    margin: 0 auto;
    border-radius: 0;
    box-shadow: none;
    filter: none;
  }
  .footer-item.logo-container .logo { display: inline-block; }

  .footer-about {
    font-size: 12.5px !important;
    line-height: 1.55 !important;
    max-width: 300px;
    margin: 10px auto 12px !important;
  }

  .social-links { display: flex !important; justify-content: center; gap: 10px !important; }
  .social-icon {
    width: 38px !important;
    height: 38px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;
  }

  .footer-columns {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 18px 14px !important;
  }

  /* the desktop 180px floor on each column made two columns wider than a
     390px screen and pushed the whole document sideways */
  .footer-item { min-width: 0 !important; }
  .footer-columns .footer-item { text-align: left !important; margin: 0 !important; }

  .footer-columns h3 {
    font-size: 13px !important;
    font-weight: 800 !important;
    margin: 0 0 8px !important;
    text-align: left !important;
  }
  /* the centred underline belongs to the desktop layout */
  .footer-columns h3::after { left: 0 !important; transform: none !important; }

  .footer-columns ul { list-style: none; padding: 0 !important; margin: 0 !important; }
  .footer-columns li { margin: 0 0 6px !important; text-align: left !important; }
  .footer-columns li a {
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    display: inline-block;
  }

  .footer-bottom {
    padding: 14px var(--m-gutter) 16px !important;
    text-align: center;
  }
  .footer-bottom p { font-size: 11px !important; line-height: 1.55 !important; }
  /* a resolution notice aimed at desktop readers is noise on a phone */
  .footer-bottom br + * , .footer-bottom p br { display: none; }
}


/* ==========================================================================
   11 · BOTTOM TAB BAR
   Markup is injected by footer.php so every page that includes the footer
   gets the same navigation.
   ========================================================================== */
.m-tabbar { display: none; }

@media (max-width: 991px) {

  .m-tabbar {
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
    justify-content: space-around;
    gap: 2px;

    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(8px + var(--m-safe-b));
    height: var(--m-tabbar-h);
    padding: 6px;

    background: rgba(255,255,255,.85);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
    backdrop-filter: blur(22px) saturate(180%);
    border: 1px solid rgba(255,255,255,.7);
    border-radius: 22px;
    box-shadow: 0 10px 34px -10px rgba(15,28,38,.35);
    /* Stacking order on mobile, lowest first:
         880  floating call buttons
         900  this tab bar
         950  header  (the drawer lives INSIDE it, so the menu can
                       never paint above anything that outranks the header —
                       which is why the bar sits below 950, not above it)
       Keeping the bar under the header means an open menu and its scrim
       cover it, instead of the bar floating on top of the sheet. */
    z-index: 900;
  }

  .m-tab {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border-radius: 16px;
    color: var(--m-ink-3);
    text-decoration: none !important;
    transition: color .2s ease, transform .18s var(--m-ease);
  }
  .m-tab:active { transform: scale(.92); }

  .m-tab__ico {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    line-height: 1;
  }

  .m-tab__txt {
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: .1px;
    white-space: nowrap;
  }

  .m-tab.is-active { color: var(--m-brand); }

  .m-tab__badge {
    position: absolute;
    top: -6px;
    right: -9px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-style: normal;
    font-weight: 800;
    color: #fff;
    background: var(--m-brand);
    border: 2px solid #fff;
    border-radius: 99px;
  }

  .m-tab--fab .m-tab__ico {
    width: 44px;
    height: 44px;
    margin-top: -20px;
    border-radius: 16px;
    background: var(--m-grad);
    color: #fff;
    font-size: 18px;
    box-shadow: var(--m-sh-brand);
    border: 3px solid var(--m-bg);
  }
  .m-tab--fab .m-tab__txt { color: var(--m-ink); margin-top: -1px; }
}


/* ==========================================================================
   12 · SMALL PHONES
   ========================================================================== */
@media (max-width: 380px) {
  :root { --m-gutter: 12px; }

  .logo { font-size: 18px !important; }
  .nav-item { width: 37px; height: 37px; border-radius: 12px !important; }

  .hero-text h1 { font-size: 22px !important; }
  .m-tab__txt { font-size: 9px; }
}


/* ==========================================================================
   13 · TABLET
   ========================================================================== */
@media (min-width: 600px) and (max-width: 991px) {

  .pricing-grid, .step-grid, .service-list {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .product-grid, .dog-grid, .breed-grid, .listing-grid, .card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .footer-columns { grid-template-columns: repeat(4, 1fr) !important; }

  .m-tabbar {
    left: 50%;
    transform: translateX(-50%);
    right: auto;
    width: min(520px, calc(100% - 32px));
  }
}


/* ==========================================================================
   14 · MOTION PREFERENCES
   ========================================================================== */
@media (max-width: 991px) and (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
