@charset "UTF-8";
/* ============================================================================
   UrgentVet — Brand Update 2026  |  brand-2026.css
   ----------------------------------------------------------------------------
   Loaded LAST (enqueue.php, depends on 'main-stylesheet') so it wins on cascade
   order against assets/css/styles-v2.css. Text rules still use `body #content`
   + !important per agency convention, because options-page/option-page-styles-v2.css
   sets `body h1..h6 { font-family: playfair-display }` at 2-type specificity and
   styles-v2.css sets `h1,h2,... { font-family: Montserrat }` at 1-type.

   SCOPE: every type rule is scoped to #content. header.php:309 opens
   <div id="content" class="site-content"> AFTER </header>, and footer.php:17
   closes it BEFORE <footer>. So #content is exactly the body-content region —
   site-wide across every template, structurally unable to touch header or footer.
   DO NOT relax these selectors to bare h1 / p / a.

   FONTS: Adobe Fonts kit kqs0snb (linked in header.php).
     bogart                     400, 700   (no italic, no other weights)
     neue-haas-grotesk-display  400, 700   + italic   -> headings
     neue-haas-grotesk-text     400, 700   + italic   -> body copy
   The older kit ywf5xdk is still linked and still required (playfair-display).
   ============================================================================ */

:root {
    /* --- Brand palette, sampled from the comps (not guessed) --------------- */
    --uv-red:        #E52728;  /* matches existing --accent1 exactly           */
    --uv-blue:       #2FABDF;  /* The comps' blue. As of 2026-09-17 --accent2 */
                               /* was ALSO changed to this value site-wide on  */
                               /* the developer's instruction, so the two now  */
                               /* match. Kept as its own var so the 2026 rows  */
                               /* stay independent of the theme option.        */
    --uv-blue-pale:  #D7F1FE;  /* ER Vet row, right panel                      */
    --uv-grey:       #EFF0F2;  /* symptom rotator + disclaimer panels          */
    --uv-offwhite:   #F7F7F7;  /* 50/50 icon module background                 */
    --uv-ink:        #1A1A1A;  /* body copy                                    */
    --uv-ink-soft:   #656B71;  /* muted copy (carried over from the old row)   */

    /* --- Type stacks ------------------------------------------------------- */
    --uv-display: "neue-haas-grotesk-display", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --uv-text:    "neue-haas-grotesk-text", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --uv-bogart:  "bogart", Georgia, "Times New Roman", serif;
}

/* ============================================================================
   1. BASE TYPE SYSTEM  (style guide: "Base Headings — core typography
      before overrides are applied")
   ----------------------------------------------------------------------------
   The style guide labels every specimen "Lowercase". That describes how the
   copy is WRITTEN, not a transform — the comps contain "UrgentVet", "The ER Vet"
   and "Our veterinarians..." with real capitals. So we force text-transform:none
   and never apply text-transform:lowercase, which would destroy the brand name.
   ============================================================================ */

body #content h1,
body #content h2,
body #content h3,
body #content h4,
body #content h5,
body #content h6 {
    text-transform: none !important;
    letter-spacing: 0 !important;
}

body #content h1 {
    font-family: var(--uv-bogart) !important;
    font-size: 38px !important;
    font-weight: 700 !important;
    line-height: 1.12 !important;
}

body #content h2 {
    font-family: var(--uv-display) !important;
    font-size: 50px !important;
    font-weight: 700 !important;
    line-height: 1.08 !important;
}

body #content h3 {
    font-family: var(--uv-display) !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
}

body #content h4 {
    font-family: var(--uv-display) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
}

/* h5 / h6 are not specified in the style guide. Keep them on the display face
   and step them down from h4 so nothing inherits playfair by accident. */
body #content h5 { font-family: var(--uv-display) !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1.3 !important; }
body #content h6 { font-family: var(--uv-display) !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.3 !important; }

/* Base paragraph — style guide: Neue Haas Grotesk, 20px */
body #content p,
body #content li,
body #content td,
body #content th,
body #content dd,
body #content dt,
body #content blockquote,
body #content label,
body #content input,
body #content select,
body #content textarea,
body #content button {
    font-family: var(--uv-text) !important;
}

body #content p {
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
}

body #content li { font-size: 20px !important; line-height: 1.45 !important; }

/* Links inherit the surrounding face. The options page sets a global
   `body #content a { color: var(--accent1) }` — colour is intentionally left
   alone here so existing link colours keep working; only the face changes. */
body #content a { font-family: inherit !important; }

/* ============================================================================
   2. TYPOGRAPHY OVERRIDE CLASSES  (style guide: "Typography overrides classes")
   ============================================================================ */

/* Headings */
body #content .h2-light      { font-weight: 400 !important; }                                   /* "h2 class no bolding" — Dog Callout, bolded single words */
body #content .h3-sm         { font-size: 26px !important; }                                    /* Cards & Tiles title, Story Card title */
body #content .h3-bogart     { font-family: var(--uv-bogart) !important; font-weight: 400 !important; } /* subheading following h2 — USE SPARINGLY */
body #content .h3-bogart-bold{ font-family: var(--uv-bogart) !important; font-weight: 700 !important; } /* shorter word count; pairs with icons */
body #content .h4-sm         { font-size: 16px !important; }                                    /* Blog card title */
body #content .h1-bogart,
body #content .bogart        { font-family: var(--uv-bogart) !important; }

/* Paragraph / body copy */
body #content .p-16, body #content .p-16 p, body #content .p-16 li { font-size: 16px !important; } /* icon column, service block, story/blog card */
body #content .p-14, body #content .p-14 p, body #content .p-14 li { font-size: 14px !important; } /* disclaimer */
body #content .p-12, body #content .p-12 p, body #content .p-12 li { font-size: 12px !important; } /* small list */

/* Colour helpers (text props -> body #content + !important) */
body #content .t-red   { color: var(--uv-red) !important; }
body #content .t-blue  { color: var(--uv-blue) !important; }
body #content .t-white { color: #FFFFFF !important; }
body #content .t-ink   { color: var(--uv-ink) !important; }

/* ============================================================================
   3. UTILITY CLASSES THIS SHELL IS MISSING
   ----------------------------------------------------------------------------
   Verified absent from styles-v2.css / custom-v2.css / option-page-styles-v2.css:
   .mb0, .mb0-desktop, .vertical-align, .inline-fifty, .fifty-section, .img-col.
   The agency conventions assume these exist, so el_class="mb0" would otherwise
   be completely inert on this site. Declared here once.
   ============================================================================ */

.bakery .mb0,
.bakery .mb0 p:last-child { margin-bottom: 0 !important; }

@media (min-width: 980px) {
    .bakery .mb0-desktop,
    .bakery .mb0-desktop p:last-child { margin-bottom: 0 !important; }
}

@media (min-width: 980px) {
    .bakery .vertical-align > .vc_column-inner { display: flex; flex-direction: column; justify-content: center; height: 100%; }
}

/* Inline fifty-fifty (static image in a column) — component-library equivalent */
.bakery .inline-fifty { align-items: center; }
.bakery .inline-fifty .img-col img { border-radius: 16px; display: block; height: auto; width: 100%; }
.bakery .img-col p { line-height: 0 !important; margin-bottom: 0 !important; }

/* ============================================================================
   4. BUTTONS  (style guide: BUTTONS)
   ----------------------------------------------------------------------------
   Main:    height 56px, text 20px, pill.
   Small:   height 48px, text 12px — "intended for small columns".
   Hover on a LIGHT background swaps red<->blue.
   Hover on a DARK background goes white with the original colour as the text.
   ============================================================================ */

.bakery .btn-bt {
    align-items: center;
    border: 0;
    border-radius: 999px;
    display: inline-flex;
    gap: 12px;
    justify-content: center;
    min-height: 56px;
    padding: 0 34px;
    text-decoration: none;
    transition: background-color .22s ease, color .22s ease;
}
body #content .bakery .btn-bt,
body #content a.btn-bt {
    font-family: var(--uv-display) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    line-height: 1.1 !important;
    text-transform: uppercase !important;
    letter-spacing: .01em !important;
}

/* Red (default) */
.bakery a.btn-bt.default { background-color: var(--uv-red); }
body #content a.btn-bt.default { color: #FFFFFF !important; }
.bakery a.btn-bt.default:hover,
.bakery a.btn-bt.default:focus { background-color: var(--uv-blue); }

/* Blue (alternate) */
.bakery a.btn-bt.alternate { background-color: var(--uv-blue); }
body #content a.btn-bt.alternate { color: #FFFFFF !important; }
.bakery a.btn-bt.alternate:hover,
.bakery a.btn-bt.alternate:focus { background-color: var(--uv-red); }

/* On a dark/coloured background both variants go white on hover */
.bakery .on-dark a.btn-bt.default:hover,
.bakery .on-dark a.btn-bt.default:focus { background-color: #FFFFFF; }
body #content .on-dark a.btn-bt.default:hover,
body #content .on-dark a.btn-bt.default:focus { color: var(--uv-red) !important; }
.bakery .on-dark a.btn-bt.alternate:hover,
.bakery .on-dark a.btn-bt.alternate:focus { background-color: #FFFFFF; }
body #content .on-dark a.btn-bt.alternate:hover,
body #content .on-dark a.btn-bt.alternate:focus { color: var(--uv-blue) !important; }

/* Small variant */
.bakery a.btn-bt.btn-sm { min-height: 48px; padding: 0 22px; }
body #content a.btn-bt.btn-sm { font-size: 12px !important; }

/* Trailing icon (SAVE YOUR SPOT clock / FIND A LOCATION pin) */
.bakery .btn-bt .btn-ico { display: inline-block; flex: 0 0 auto; height: 26px; width: 26px; }
.bakery .btn-bt .btn-ico svg { display: block; height: 100%; width: 100%; }

@media (max-width: 480px) {
    .bakery .btn-bt { padding: 0 24px; width: 100%; }
    body #content .bakery .btn-bt, body #content a.btn-bt { font-size: 17px !important; }
}

/* ============================================================================
   5. RESPONSIVE TYPE SCALE
   ----------------------------------------------------------------------------
   The desktop scale (h2 50px) is far too large at phone width; the mobile comp
   shows roughly a 0.6x step down on the big display sizes.
   ============================================================================ */

@media (max-width: 979px) {
    body #content h1 { font-size: 34px !important; }
    body #content h2 { font-size: 38px !important; }
    body #content h3 { font-size: 26px !important; }
    body #content h4 { font-size: 19px !important; }
    body #content p, body #content li { font-size: 18px !important; }
    body #content .h3-sm { font-size: 22px !important; }
}

@media (max-width: 480px) {
    body #content h1 { font-size: 30px !important; }
    body #content h2 { font-size: 30px !important; }
    body #content h3 { font-size: 23px !important; }
    body #content h4 { font-size: 18px !important; }
    body #content p, body #content li { font-size: 17px !important; }
    body #content .p-16, body #content .p-16 p { font-size: 15px !important; }
}

/* ============================================================================
   6. ER VET COMPARISON ROW — SHARED COMPONENT
   ----------------------------------------------------------------------------
   Markup comes from shortcodes/er-vet-compare.php ([uv_er_vet_compare]).
   Shared by the home page and the single-location template, so these rules are
   intentionally NOT scoped to a page class.
   Colours sampled from the desktop home comp:
     left panel  #E52727  |  right panel #D7F1FE
     circle, sad side   #829DB8  |  circle, happy side #00ABE1
   The `.reveal-image` clip-path is animated by the inline script in header.php.
   ============================================================================ */

.bakery .uv-ervet,
.uv-ervet { overflow: hidden; position: relative; }

.uv-ervet-head { margin: 0 auto 38px; max-width: 900px; padding: 0 20px; text-align: center; }
body #content .uv-ervet-head h2 { text-align: center !important; }
body #content .uv-ervet-head p  { text-align: center !important; text-transform: lowercase !important; }

/* Three-up grid: ER copy | dog | UrgentVet copy.
   The centre column is the circle's width; the two panels fill the rest and
   carry the split background. */
.uv-ervet-grid {
    align-items: stretch;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    position: relative;
}

.uv-ervet-panel { display: flex; }
.uv-ervet-panel--er { background-color: var(--uv-red); justify-content: flex-end; }
.uv-ervet-panel--uv { background-color: var(--uv-blue-pale); justify-content: flex-start; }

.uv-ervet-panel-inner { max-width: 540px; padding: 64px 48px; width: 100%; }
.uv-ervet-panel--er .uv-ervet-panel-inner { text-align: left; }
.uv-ervet-panel--uv .uv-ervet-panel-inner { text-align: right; }

/* ER side is white-on-red; brand lockup uses Bogart per the comp */
body #content .uv-ervet-panel--er .uv-ervet-brand {
    color: #FFFFFF !important;
    font-family: var(--uv-bogart) !important;
    font-size: 46px !important;
    font-weight: 700 !important;
    line-height: 1.0 !important;
    margin-bottom: 26px !important;
}
body #content .uv-ervet-panel--er h4,
body #content .uv-ervet-panel--er p { color: #FFFFFF !important; }

/* UrgentVet side is ink-on-pale-blue */
body #content .uv-ervet-panel--uv h4 { color: var(--uv-ink) !important; }
body #content .uv-ervet-panel--uv p  { color: var(--uv-ink) !important; }

.uv-ervet-panel h4 { margin-bottom: 4px; }
.uv-ervet-panel p  { margin-bottom: 24px; }
.uv-ervet-panel p:last-child { margin-bottom: 0; }
body #content .uv-ervet-panel p { font-size: 17px !important; line-height: 1.38 !important; }

.uv-ervet-logo { display: block; height: auto; margin: 0 0 26px auto; max-width: 260px; width: 100%; }

/* --- the dog ------------------------------------------------------------- */
.uv-ervet-media { align-items: center; display: flex; justify-content: center; }
.uv-ervet-media .image-container {
    height: 400px;
    overflow: hidden;           /* required: the reveal layer is clipped inside */
    position: relative;
    width: 400px;
}
.uv-ervet-media .uv-ervet-dog {
    background-color: #829DB8;  /* sad side — blue-grey */
    border-radius: 50%;
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}
.uv-ervet-media .reveal-image {
    background-color: #00ABE1;  /* happy side — brand blue */
    /* Start fully hidden at the right edge. header.php's script rewrites this
       inline as the row scrolls in; the transition smooths the steps. */
    clip-path: polygon(100% 0, 100% 100%, 100% 100%, 100% 0);
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    transition: clip-path .35s ease-out;
    width: 100%;
}

@media (max-width: 1200px) {
    .uv-ervet-panel-inner { padding: 48px 30px; }
    .uv-ervet-media .image-container { height: 320px; width: 320px; }
}

/* Mobile: the comp stacks red panel -> dog -> pale blue panel, both left-aligned.
   The dog sits on the seam, so the media cell gets the red above / blue below. */
@media (max-width: 979px) {
    .uv-ervet-grid { grid-template-columns: 1fr; }
    .uv-ervet-panel--er { justify-content: center; }
    .uv-ervet-panel--uv { justify-content: center; }
    .uv-ervet-panel-inner { max-width: none; padding: 34px 20px; }
    .uv-ervet-panel--er .uv-ervet-panel-inner,
    .uv-ervet-panel--uv .uv-ervet-panel-inner { text-align: center; }
    .uv-ervet-logo { margin: 0 auto 22px; max-width: 200px; }
    body #content .uv-ervet-panel--er .uv-ervet-brand { font-size: 34px !important; }
    /* split background behind the circle so it straddles the two colours */
    .uv-ervet-media { background: linear-gradient(to bottom, var(--uv-red) 0 50%, var(--uv-blue-pale) 50% 100%); padding: 0; }
    .uv-ervet-media .image-container { height: 280px; width: 280px; }
}

/* ============================================================================
   7. HOME PAGE 2026
   ----------------------------------------------------------------------------
   Section classes are used for scoping rather than the `.bakery` slug class,
   because the staging page is `.bakery.home-2026` and the promoted front page
   will be `.bakery.home` — slug-scoped rules would break on the swap.
   ============================================================================ */

/* --- 1. HERO --------------------------------------------------------------
   Image spec: subject isolated on blue, ALWAYS in the left half; 1920x850.
   Background image is set here as the real asset (not a placeholder) and can
   still be overridden from the WPBakery Design Tab. */
.bakery section.uv-hero {
    background-image: url('/wp-content/uploads/2026/09/uv-hero-desktop-woman-dog.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 0 !important;
}
.bakery .uv-hero-row { width: 100%; }
.bakery .uv-hero-col { display: flex; flex-direction: column; justify-content: center; }
.bakery .uv-hero-inner { margin-left: auto; max-width: 560px; text-align: right; }
.bakery .uv-hero-logo { display: block; height: auto; margin: 0 0 18px auto; max-width: 300px; width: 100%; }
body #content .uv-hero-inner h1 { color: #FFFFFF !important; text-align: right !important; }
body #content .uv-hero-inner p  { color: #FFFFFF !important; text-align: right !important; margin-bottom: 26px !important; }

@media (min-width: 980px) {
    .bakery section.uv-hero { min-height: 640px; }
    .bakery .uv-hero-row { min-height: 640px; }
}
@media (max-width: 979px) {
    .bakery section.uv-hero {
        background-image: url('/wp-content/uploads/2026/09/uv-hero-mobile-woman-dog.jpg');
        background-position: left center;
        min-height: 420px;
    }
    .bakery .uv-hero-inner { max-width: 62%; }
}
@media (max-width: 480px) {
    .bakery section.uv-hero { min-height: 360px; }
    .bakery .uv-hero-inner { max-width: 66%; }
    .bakery .uv-hero-logo { max-width: 160px; }
}

/* --- 2. DOG CALLOUT MODULE -----------------------------------------------
   Red band, white angled swoosh behind the copy, animated loop on the right.
   Style guide type steps for this module: 20px / 50px / 75px. */
.bakery section.uv-dogcallout { background-color: var(--uv-red); overflow: hidden; position: relative; }
.bakery .uv-dogcallout-row { align-items: center; position: relative; z-index: 1; }
.bakery .uv-dogcallout-text { text-align: right; }
body #content .uv-dogcallout-text p { text-align: right !important; }
body #content .uv-dogcallout-lead   { color: var(--uv-ink) !important; font-size: 20px !important; }
body #content .uv-dogcallout-because{ color: var(--uv-ink) !important; font-size: 20px !important; font-weight: 700 !important; margin-bottom: 26px !important; }
body #content .uv-dogcallout-big {
    color: var(--uv-ink) !important;
    font-family: var(--uv-display) !important;
    font-size: 50px !important;
    font-weight: 400 !important;      /* "h2 class no bolding" override */
    line-height: 1.02 !important;
    margin-bottom: 0 !important;
    text-align: right !important;
}
body #content .uv-dogcallout-ruff {
    color: var(--uv-red) !important;
    display: block;
    font-family: var(--uv-display) !important;
    font-size: 75px !important;
    font-weight: 700 !important;
    line-height: 1.0 !important;
}
/* the white swoosh — a large rotated block behind the copy column */
.bakery section.uv-dogcallout::before {
    background: #FFFFFF;
    border-radius: 0 0 60% 0;
    content: "";
    height: 130%;
    left: -12%;
    position: absolute;
    top: -22%;
    transform: rotate(-4deg);
    width: 62%;
    z-index: 0;
}
.bakery .uv-dogcallout-media video,
.bakery .uv-dogcallout-media img { border-radius: 24px; display: block; height: auto; width: 100%; }

@media (max-width: 979px) {
    .bakery section.uv-dogcallout::before { border-radius: 0 0 40% 0; height: 62%; left: -20%; top: -6%; width: 140%; }
    .bakery .uv-dogcallout-text { text-align: left; }
    body #content .uv-dogcallout-text p,
    body #content .uv-dogcallout-big { text-align: left !important; }
    body #content .uv-dogcallout-big { font-size: 34px !important; }
    body #content .uv-dogcallout-ruff { font-size: 52px !important; }
}

/* --- 3. SYMPTOM ROTATOR WIDGET -------------------------------------------
   Active symptom: UV Red 66px capitalised. Prev/next: pale grey 46px. */
.bakery section.uv-symptoms { padding-top: 0 !important; }
.bakery .uv-symptoms-panel {
    align-items: center;
    background-color: var(--uv-grey);
    border-radius: 28px;
    display: flex;
    gap: 28px;
    justify-content: center;
    padding: 40px 48px;
}
body #content .uv-symptoms-label {
    color: var(--uv-ink) !important;
    font-family: var(--uv-display) !important;
    font-size: 40px !important;
    font-weight: 400 !important;
    margin-bottom: 0 !important;
    white-space: nowrap;
}
.bakery .uv-symptoms-stack { position: relative; }
.bakery .uv-symptoms-stack ul { list-style: none; margin: 0; padding: 0; }
body #content .uv-symptoms-stack li {
    color: #C9CCD1 !important;
    font-family: var(--uv-display) !important;
    font-size: 46px !important;
    font-weight: 700 !important;
    line-height: 1.12 !important;
    text-transform: uppercase !important;
    transition: color .3s ease, font-size .3s ease;
}
body #content .uv-symptoms-stack li.is-active {
    color: var(--uv-red) !important;
    font-size: 66px !important;
}
@media (max-width: 979px) {
    .bakery .uv-symptoms-panel { flex-direction: column; gap: 10px; padding: 26px 22px; text-align: center; }
    body #content .uv-symptoms-label { font-size: 24px !important; }
    body #content .uv-symptoms-stack li { font-size: 28px !important; }
    body #content .uv-symptoms-stack li.is-active { font-size: 38px !important; }
}

/* --- 4. PROMO TILES 3x ---------------------------------------------------
   Blue rounded tiles that overlap down into the red row below. */
.bakery section.uv-promo { padding-bottom: 0 !important; position: relative; z-index: 2; }
.bakery .uv-promo-row { margin: 0 -12px; }
.bakery .uv-promo-col { padding: 0 12px !important; }
.bakery .uv-promo-tile {
    background-color: var(--uv-blue);
    border-radius: 26px;
    height: 100%;
    padding: 30px 26px 32px;
    text-align: center;
}
body #content .uv-promo-tile h3 { color: #FFFFFF !important; margin-bottom: 20px !important; text-align: center !important; }
/* equal-height tiles — the 5-layer cascade this shell needs */
.bakery .uv-promo-row { align-items: stretch; }
.bakery .uv-promo-col { display: flex; }
.bakery .uv-promo-col > .vc_column-inner { display: flex; flex-direction: column; height: 100%; width: 100%; }
.bakery .uv-promo-col > .vc_column-inner > .wpb_wrapper { display: flex; flex: 1; flex-direction: column; }
.bakery .uv-promo-col .wpb_text_column { height: 100%; }
@media (max-width: 979px) {
    .bakery .uv-promo-col { margin-bottom: 16px; }
}

/* --- 5. WHAT IS URGENT PET CARE ------------------------------------------ */
.bakery section.uv-whatis { background-color: var(--uv-red); }
.bakery section.uv-whatis { padding-top: 0 !important; }   /* promo tiles overlap in */
body #content .uv-whatis-heading h2 { color: #FFFFFF !important; text-align: center !important; }
body #content .uv-whatis-heading h2 .light { font-weight: 400 !important; }
.bakery .uv-whatis-media { position: relative; }
.bakery .uv-whatis-photo { border-radius: 20px; display: block; height: auto; width: 100%; }
.bakery .uv-whatis-map { bottom: -8%; display: block; height: auto; position: absolute; right: -14%; width: 74%; }
body #content .uv-whatis-copy h3 { color: #FFFFFF !important; }
body #content .uv-whatis-copy p  { color: #FFFFFF !important; }
@media (max-width: 979px) {
    body #content .uv-whatis-heading h2 { text-align: left !important; }
    .bakery .uv-whatis-map { position: static; margin: 14px auto 0; right: auto; width: 88%; }
}

/* --- 6. REVIEWS ---------------------------------------------------------- */
body #content .uv-reviews-heading h2 { color: var(--uv-red) !important; font-family: var(--uv-bogart) !important; text-align: center !important; }
.bakery .uv-reviews-cta { margin-top: 26px; text-align: center; }
.uv-reviews-row h2 {color: var(--uv-red) !important;}
/* --- 7. 50/50 SERVICES ROW (blue) ---------------------------------------- */
.bakery section.uv-services { background-color: var(--uv-blue); }
body #content .uv-services-copy h2 { color: #FFFFFF !important; font-family: var(--uv-bogart) !important; }
body #content .uv-services-copy p  { color: #FFFFFF !important; }

/* --- 8. WHAT TO EXPECT 4x ------------------------------------------------ */
body #content .uv-expect-heading h2 { color: var(--uv-red) !important; text-align: center !important; }
.bakery .uv-expect-row { margin: 0 -14px; }
.bakery .uv-expect-col { padding: 0 14px !important; text-align: center; }
.bakery .uv-expect-col img { aspect-ratio: 1 / 1; border-radius: 50%; display: block; height: auto; margin: 0 auto 18px; object-fit: cover; width: 100%; }
body #content .uv-expect-col h4 { text-align: center !important; margin-bottom: 4px !important; }
body #content .uv-expect-col p  { font-size: 16px !important; text-align: center !important; }
.bakery .uv-expect-cta { margin-top: 30px; text-align: center; }
@media (max-width: 979px) { .bakery .uv-expect-col { margin-bottom: 26px; } }

/* --- 9. WHAT WE TREAT (accordion) --------------------------------------- */
.bakery section.uv-treat { background-color: var(--uv-grey); }
body #content .uv-treat-heading h2 { color: var(--uv-red) !important; }
.bakery .uv-treat-accordion .vc_tta-panel-heading { background-color: var(--uv-blue) !important; border: 0 !important; border-radius: 999px !important; margin-bottom: 14px; }
.bakery .uv-treat-accordion .vc_tta-panel.vc_active .vc_tta-panel-heading { background-color: var(--uv-red) !important; border-radius: 22px 22px 0 0 !important; margin-bottom: 0; }
body #content .uv-treat-accordion .vc_tta-panel-title > a { color: #FFFFFF !important; font-family: var(--uv-display) !important; font-size: 22px !important; font-weight: 700 !important; text-transform: uppercase !important; }
.bakery .uv-treat-accordion .vc_tta-panel-body { background-color: #FFFFFF !important; border: 0 !important; border-radius: 0 0 22px 22px !important; margin-bottom: 14px; padding: 26px 30px !important; }
/* The theme/plugin puts `rgba(0,0,0,.18) 2px 2px 48px` on every .vc_tta-panel, which
   reads as a heavy smudge behind the whole group. The live site's is much subtler. */
.bakery .uv-treat-accordion .vc_tta-panel { box-shadow: 0 2px 10px rgba(0,0,0,.08) !important; }
/* match the live accordion's title size */
body #content .uv-treat-accordion .vc_tta-panel-title > a { font-size: 27px !important; }
.bakery .uv-treat-cta { margin-top: 10px; text-align: center; }
/* two-column symptom lists inside the open panel */
.bakery .uv-treat-accordion .vc_tta-panel-body ul { columns: 2; column-gap: 40px; list-style: none; margin: 0; padding: 0; }
body #content .uv-treat-accordion .vc_tta-panel-body li { font-size: 17px !important; margin-bottom: 8px !important; }
@media (max-width: 680px) { .bakery .uv-treat-accordion .vc_tta-panel-body ul { columns: 1; } }

/* --- 11. DISCLAIMER ROW ------------------------------------------------- */
.uv-disclaimer-row .container {
    max-width: 980px !important;
}
.uv-disclaimer-row .wpb_text_column.wpb_content_element.mb0-desktop {
    float: right;
    padding-right: 30px;
}
.bakery section.uv-disclaimer { background-color: var(--uv-grey); }
.bakery .uv-disclaimer-row { align-items: flex-start; }
.bakery .uv-disclaimer-icon { display: block; height: auto; max-width: 66px; width: 100%; }
body #content .uv-disclaimer-copy h4 { color: var(--uv-red) !important; font-size: 26px !important; margin-bottom: 2px !important; }
body #content .uv-disclaimer-copy p  { font-size: 20px !important; font-weight: 700 !important; margin-bottom: 18px !important; }
.bakery .uv-disclaimer-list ul { columns: 3; column-gap: 30px; list-style: none; margin: 0; padding: 0; }
body #content .uv-disclaimer-list li { font-size: 14px !important; margin-bottom: 6px !important; }
@media (max-width: 680px) { .bakery .uv-disclaimer-list ul { columns: 2; } }

/* --- 12. 50/50 ICON MODULE --------------------------------------------- */
.bakery section.uv-iconmodule { background-color: var(--uv-offwhite); }
body #content .uv-iconmodule-heading h2 { color: var(--uv-red) !important; text-align: center !important; }
.bakery .uv-iconmodule-photo { border-radius: 20px; display: block; height: auto; width: 100%; }
.bakery .uv-icon-item { align-items: flex-start; display: flex; gap: 22px; margin-bottom: 30px; }
.bakery .uv-icon-item:last-child { margin-bottom: 0; }
.bakery .uv-icon-item img { flex: 0 0 96px; height: auto; width: 96px; }
body #content .uv-icon-item h3 { font-family: var(--uv-bogart) !important; margin-bottom: 2px !important; }
body #content .uv-icon-item h4 { font-size: 16px !important; margin-bottom: 2px !important; text-transform: uppercase !important; }
body #content .uv-icon-item p  { font-size: 16px !important; margin-bottom: 0 !important; }
@media (max-width: 979px) {
    .bakery .uv-icon-item { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
    body #content .uv-icon-item h3, body #content .uv-icon-item h4, body #content .uv-icon-item p { text-align: center !important; }
}

/* --- 13. FIND A LOCATION ----------------------------------------------- */
/* was `.section.uv-map` — the leading dot asked for class="section", which no element
   on the page has. The map section is <section class="vc_section uv-map">, i.e. a
   SECTION ELEMENT with class uv-map, so the dot has to go or the rule matches nothing. */
.bakery section.uv-map .map-button {
    margin-top: -25px !important;
    position: absolute;
    left: 0;
    right: 0;
}
.bakery section.uv-findloc { background-color: var(--uv-red); padding: 26px 0 !important; }
body #content .uv-findloc-bar h2 { color: #FFFFFF !important; font-family: var(--uv-bogart) !important; margin-bottom: 0 !important; text-align: center !important; }
.bakery section.uv-map { padding: 0 !important; }
.bakery .uv-map-cta { margin-top: -86px; position: relative; text-align: center; z-index: 3; }
@media (max-width: 979px) { .bakery .uv-map-cta { margin-top: 18px; } }

/* --- 14. BLOG ROW ------------------------------------------------------ */
.bakery section.uv-blog { background-color: var(--uv-blue); }
body #content .uv-blog-heading h2 { color: #FFFFFF !important; font-family: var(--uv-bogart) !important; text-align: center !important; }
.bakery .uv-blog-cta { margin-top: 24px; text-align: center; }

/* --- 15. CAREERS ROW -------------------------------------------------- */
.bakery section.uv-careers { background-color: var(--uv-red); overflow: hidden; padding-bottom: 0 !important; }
.bakery .uv-careers-row { align-items: flex-end; }
body #content .uv-careers-copy h2 { color: #FFFFFF !important; font-family: var(--uv-bogart) !important; }
.bakery .uv-careers-copy { padding-bottom: 60px; }
.bakery .uv-careers-photo { display: block; height: auto; margin-bottom: -1px; width: 100%; }
/* split pill: blue FIND A LOCATION | white CHECK IN ONLINE */
.bakery .uv-split-btn { border-radius: 999px; display: inline-flex; overflow: hidden; }
.bakery .uv-split-btn a { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 30px; text-decoration: none; }
.bakery .uv-split-btn a:first-child { background-color: var(--uv-blue); }
.bakery .uv-split-btn a:last-child  { background-color: #FFFFFF; }
body #content .uv-split-btn a { font-family: var(--uv-display) !important; font-size: 18px !important; font-weight: 700 !important; text-transform: uppercase !important; }
body #content .uv-split-btn a:first-child { color: #FFFFFF !important; }
body #content .uv-split-btn a:last-child  { color: var(--uv-ink) !important; }
@media (max-width: 979px) {
    .bakery .uv-careers-copy { padding-bottom: 30px; }
    .bakery .uv-split-btn { width: 100%; }
    .bakery .uv-split-btn a { flex: 1; padding: 0 14px; }
    body #content .uv-split-btn a { font-size: 14px !important; }
}

/* --- 16. BADGES ROW --------------------------------------------------- */
.bakery .uv-badges-row { align-items: center; }
.bakery .uv-badges-col { text-align: center; }
.bakery .uv-badges-col img { display: block; height: auto; margin: 0 auto; max-width: 240px; width: 100%; }
@media (max-width: 680px) { .bakery .uv-badges-col { margin-bottom: 22px; } }

/* ============================================================================
   8. SPECIFICITY CORRECTIONS
   ----------------------------------------------------------------------------
   Found by inspecting the computed cascade on the staging page. Both of these
   are the exact trap the agency conventions warn about: the options page and
   custom-v2.css style these properties at `body #content ...` (ID + classes),
   so a `.bakery ...` rule can never win no matter how late it loads.
   ============================================================================ */

/* 8a. SPANS — option-page-styles-v2.css has:
       `body, body p, body li, body span, ... { font-family: Montserrat; font-size: 16px }`
   That `body span` rule keeps every <span> in the body content on Montserrat at
   16px, including spans nested inside headings. Without this block the new type
   system silently fails anywhere a span is used. */
body #content span { font-family: inherit !important; font-size: inherit !important; font-weight: inherit !important; }
/* ...but spans that are their own component keep their own sizing */
body #content .btn-ico { font-size: 0 !important; }

/* 8b. BUTTONS — custom-v2.css has:
       `body #content a.btn-bt.default, footer a.btn-bt.default { background: var(--accent2) }`
   which is teal, and it outranks `.bakery a.btn-bt.default`. Re-declare at the
   same selector depth with !important so the brand red/blue system actually wins. */
body #content a.btn-bt.default { background: var(--uv-red) !important; color: #FFFFFF !important; }
body #content a.btn-bt.default:hover,
body #content a.btn-bt.default:focus { background: var(--uv-blue) !important; color: #FFFFFF !important; }
body #content a.btn-bt.alternate { background: var(--uv-blue) !important; color: #FFFFFF !important; }
body #content a.btn-bt.alternate:hover,
body #content a.btn-bt.alternate:focus { background: var(--uv-red) !important; color: #FFFFFF !important; }
/* on a coloured band both variants invert to white */
body #content .on-dark a.btn-bt.default:hover,
body #content .on-dark a.btn-bt.default:focus { background: #FFFFFF !important; color: var(--uv-red) !important; }
body #content .on-dark a.btn-bt.alternate:hover,
body #content .on-dark a.btn-bt.alternate:focus { background: #FFFFFF !important; color: var(--uv-blue) !important; }
/* (removed 2026-09-17) The promo-tile hover used to force RED text. Superseded by
   section 17: the tiles are BLUE, so their hover text must be BLUE. That rule had
   higher specificity (.uv-promo-tile + a.btn-bt.default) and was silently beating
   section 17, so it is deleted rather than left to fight. */

/* 8c. Heading weight override used by "what is **urgent pet care?**" */
body #content h2 .light { font-weight: 400 !important; }

/* 8d. "what is urgent pet care?" — map overlay was covering the dog.
   Pull it down and right so it reads as a corner overlay like the comp. */
.bakery .uv-whatis-map { bottom: -14%; right: -22%; width: 66%; }

/* 8e. Tighten the seams the comp shows as single gaps */
.bakery section.uv-dogcallout { padding-bottom: 0 !important; }
.bakery section.uv-symptoms { padding-top: 46px !important; }
.bakery section.uv-promo { padding-bottom: 0 !important; }
.bakery .uv-promo-row { position: relative; top: 46px; }
.bakery section.uv-whatis { padding-top: 92px !important; }

/* ============================================================================
   9. ROUND-2 CORRECTIONS (from the staging render)
   ============================================================================ */

/* 9a. ACCORDION TOGGLE — WPBakery puts its +/- control on the LEFT, where it
   collided with the panel title ("+ILLNESS"). The live site has it on the right.
   ⚠ HISTORY: this block used to say `background:#FFFFFF !important; border:0 !important`
   on the plus pseudo-elements. WPBakery DRAWS the plus using border-top (horizontal
   bar) and border-left (vertical bar), so zeroing the borders deleted the icon
   entirely — the closed pills rendered with no "+" at all. Measured off the live
   home page accordion, the correct construction is:
       .vc_tta-controls-icon        20x20, absolute, right, translateY(-10px)
       ::before  border-top:  5px solid <colour>   (horizontal bar)
       ::after   border-left: 5px solid <colour>   (vertical bar)
   and the live site's closed-panel colour is --accent3 lime #C3DC7B. */
.bakery .uv-treat-accordion .vc_tta-panel-title > a { padding-right: 70px !important; position: relative; }
.bakery .uv-treat-accordion .vc_tta-controls-icon { left: auto !important; right: 30px !important; }
/* closed panels: lime plus, matching the live home page */
.bakery .uv-treat-accordion .vc_tta-controls-icon.vc_tta-controls-icon-plus::before {
    background: transparent !important;
    border-top: 5px solid var(--accent3) !important;
    border-left: 0 !important;
}
.bakery .uv-treat-accordion .vc_tta-controls-icon.vc_tta-controls-icon-plus::after {
    background: transparent !important;
    border-left: 5px solid var(--accent3) !important;
    border-top: 0 !important;
}
/* open panel sits on RED, where the live site's grey #666 icon is barely visible —
   using white there instead. Change to var(--accent3) for a literal match. */
.bakery .uv-treat-accordion .vc_tta-panel.vc_active .vc_tta-controls-icon::before {
    border-top-color: #FFFFFF !important;
}
.bakery .uv-treat-accordion .vc_tta-panel.vc_active .vc_tta-controls-icon::after {
    border-left-color: #FFFFFF !important;
}

/* 9b. ER VET — full-bleed. The row now carries
   full_width="stretch_row_content_no_spaces", so kill the container padding and
   let the two panels run to the viewport edges, flush against the circle. */
.bakery .uv-ervet-row .vc_column-inner { padding-left: 0 !important; padding-right: 0 !important; }
.bakery section.uv-ervet-section { padding: 0 !important; }
.uv-ervet-grid { align-items: stretch; }
/* panels fill their track completely so there is no white gap at the circle */
.uv-ervet-panel { align-items: center; }
.uv-ervet-media { background: linear-gradient(to right, var(--uv-red) 0 50%, var(--uv-blue-pale) 50% 100%); padding: 0 40px; }
@media (max-width: 979px) {
    .uv-ervet-media { background: linear-gradient(to bottom, var(--uv-red) 0 50%, var(--uv-blue-pale) 50% 100%); padding: 0; }
}

/* 9c. DISCLAIMER X MARK — drawn in CSS so there is no asset or data-URI to
   encode (the previous inline SVG data-URI double-escaped its colours and
   rendered as a solid black disc). */
.bakery .uv-x-icon {
    background: var(--uv-red);
    border-radius: 50%;
    height: 62px;
    position: relative;
    width: 62px;
}
.bakery .uv-x-icon::before,
.bakery .uv-x-icon::after {
    background: #FFFFFF;
    border-radius: 3px;
    content: "";
    height: 7px;
    left: 50%;
    position: absolute;
    top: 50%;
    width: 30px;
}
.bakery .uv-x-icon::before { transform: translate(-50%, -50%) rotate(45deg); }
.bakery .uv-x-icon::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* ============================================================================
   10. ROUND-3 CORRECTIONS
   ============================================================================ */

/* 10a. ICON SPANS — `.btn-ico` was only sized inside `.btn-bt`, so the pin used
   in the "Find an UrgentVet Location" H2 had no constraint and its inline SVG
   expanded to the full column width. Size the component itself, everywhere. */
.bakery .btn-ico {
    display: inline-block;
    flex: 0 0 auto;
    height: 26px;
    vertical-align: -0.16em;
    width: 26px;
}
.bakery .btn-ico svg { display: block; height: 100%; width: 100%; }
.bakery .btn-bt .btn-ico { height: 26px; width: 26px; }
/* the H2 pin is sized in px, not em — `body #content .btn-ico { font-size: 0 }`
   above (which stops the empty span adding a text node) would collapse any em. */
.bakery .uv-findloc-bar h2 .btn-ico { height: 44px; margin-right: 14px; width: 44px; }
@media (max-width: 979px) { .bakery .uv-findloc-bar h2 .btn-ico { height: 30px; margin-right: 8px; width: 30px; } }

/* 10b. BLOG CARDS — style guide "Blog Card": light grey rounded surface, image
   on top, h4-smaller title, 16px body, red "Read More >>". */
.bakery .uv-blog-row { align-items: stretch; margin: 0 -12px; }
.bakery .uv-blog-col { display: flex; padding: 0 12px !important; }
.bakery .uv-blog-col > .vc_column-inner { display: flex; flex-direction: column; height: 100%; width: 100%; }
.bakery .uv-blog-col > .vc_column-inner > .wpb_wrapper { display: flex; flex: 1; flex-direction: column; }
.bakery .uv-blog-card {
    background: var(--uv-offwhite);
    border-radius: 22px;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 22px 22px 26px;
}
.bakery .uv-blog-card img { display: block; height: auto; margin: 0 auto 14px; max-height: 120px; object-fit: contain; width: auto; max-width: 100%; }
body #content .uv-blog-card h4 { margin-bottom: 10px !important; }
body #content .uv-blog-card h4 a { color: var(--uv-ink) !important; text-decoration: none !important; }
body #content .uv-blog-card p { margin-bottom: 14px !important; }
.bakery .uv-blog-card .uv-blog-more { margin-top: auto; margin-bottom: 0; }
body #content .uv-blog-card .uv-blog-more a { color: var(--uv-red) !important; font-weight: 700 !important; text-decoration: none !important; }
@media (max-width: 979px) { .bakery .uv-blog-col { margin-bottom: 18px; } }

/* 10c. CAREERS — the cutout should sit larger and flush to the bottom edge. */
@media (min-width: 980px) { .bakery .uv-careers-photo { margin-top: -30px; } }

/* ============================================================================
   11. ORDER-INDEPENDENCE HARDENING
   ----------------------------------------------------------------------------
   brand-2026.css now loads from header.php (before wp_head), so styles-v2.css
   comes AFTER it. styles-v2.css carries ~54 `.btn-bt` rules that would otherwise
   win on order for the button geometry. Re-assert the geometry at a specificity
   that does not depend on load order.
   ============================================================================ */
body #content a.btn-bt,
body #content .bakery a.btn-bt {
    align-items: center !important;
    border: 0 !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    gap: 12px !important;
    justify-content: center !important;
    min-height: 56px !important;
    padding: 0 34px !important;
    text-decoration: none !important;
    width: auto !important;
}
body #content a.btn-bt.btn-sm { min-height: 48px !important; padding: 0 22px !important; }
body #content .uv-split-btn a { min-height: 56px !important; padding: 0 30px !important; text-decoration: none !important; }
@media (max-width: 480px) {
    body #content a.btn-bt, body #content .bakery a.btn-bt { padding: 0 24px !important; width: 100% !important; }
}

/* ============================================================================
   12. DOG CALLOUT — REBUILT TO MATCH THE COMP
   ----------------------------------------------------------------------------
   The first pass had this row wrong in three ways:
     1. the swoosh was a WHITE blob bulging from the left; the comp has RED across
        the TOP with the white sweeping up from the lower-left (the visible edge is
        the top arc of a very large white ellipse whose centre sits off to the left)
     2. the display type was roughly half the comp's size, and "RUFF." was being
        clipped by the colour boundary
     3. the dog was a small square; the comp has a TALL portrait card that runs
        almost the full height of the row and bleeds toward the right edge
   Everything below is scoped to .uv-dogcallout so it cannot leak.
   ============================================================================ */

.bakery section.uv-dogcallout {
    background-color: var(--uv-red);
    overflow: hidden;
    padding: 0 !important;
    position: relative;
}
/* replace the old ::before swoosh entirely */
.bakery section.uv-dogcallout::before {
    background: #FFFFFF;
    border-radius: 50%;
    content: "";
    height: 260%;
    left: -55%;
    position: absolute;
    top: 13%;
    transform: none;
    width: 200%;
    z-index: 0;
}
.bakery .uv-dogcallout-row {
    align-items: stretch;
    min-height: 700px;
    position: relative;
    z-index: 1;
}
.bakery .uv-dogcallout-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 90px 0 90px 0 !important;
}
.bakery .uv-dogcallout-text .wpb_text_column { width: 100%; }

body #content .uv-dogcallout-lead {
    color: var(--uv-ink) !important;
    font-size: 20px !important;
    line-height: 1.34 !important;
    margin-bottom: 26px !important;
    text-align: right !important;
}
body #content .uv-dogcallout-because {
    color: var(--uv-ink) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    margin-bottom: 40px !important;
    text-align: right !important;
}
body #content .uv-dogcallout-big {
    color: var(--uv-ink) !important;
    font-family: var(--uv-display) !important;
    font-size: 72px !important;
    font-weight: 400 !important;       /* "h2 class no bolding" */
    letter-spacing: -0.01em !important;
    line-height: 1.02 !important;
    margin-bottom: 0 !important;
    text-align: right !important;
}
body #content .uv-dogcallout-ruff {
    color: var(--uv-red) !important;
    display: block;
    font-family: var(--uv-display) !important;
    font-size: 96px !important;
    font-weight: 700 !important;
    letter-spacing: -0.015em !important;
    line-height: 1.0 !important;
    text-align: right !important;
}

/* tall portrait media card, bleeding toward the right edge */
.bakery .uv-dogcallout-media { display: flex; align-items: center; }
.bakery .uv-dogcallout-media .wpb_wrapper,
.bakery .uv-dogcallout-media .wpb_raw_code { width: 100%; }
.bakery .uv-dogcallout-media video,
.bakery .uv-dogcallout-media img {
    border-radius: 34px;
    display: block;
    height: 620px;
    object-fit: cover;
    width: 100%;
}

@media (max-width: 1400px) {
    body #content .uv-dogcallout-big  { font-size: 60px !important; }
    body #content .uv-dogcallout-ruff { font-size: 80px !important; }
    .bakery .uv-dogcallout-media video, .bakery .uv-dogcallout-media img { height: 540px; }
    .bakery .uv-dogcallout-row { min-height: 620px; }
}
@media (max-width: 979px) {
    .bakery section.uv-dogcallout::before { height: 60%; left: -30%; top: 8%; width: 160%; }
    .bakery .uv-dogcallout-row { min-height: 0; }
    .bakery .uv-dogcallout-text { padding: 40px 0 30px !important; text-align: left; }
    body #content .uv-dogcallout-lead,
    body #content .uv-dogcallout-because,
    body #content .uv-dogcallout-big,
    body #content .uv-dogcallout-ruff { text-align: left !important; }
    body #content .uv-dogcallout-big  { font-size: 38px !important; }
    body #content .uv-dogcallout-ruff { font-size: 54px !important; }
    .bakery .uv-dogcallout-media { padding-bottom: 40px; }
    .bakery .uv-dogcallout-media video, .bakery .uv-dogcallout-media img { height: 360px; }
}

/* ============================================================================
   13. CONTAINER WIDTH FOR THE 2026 ROWS
   ----------------------------------------------------------------------------
   The theme ships `.bakery .container { max-width: 1100px }`. The comp is drawn
   with the content filling far more of the page (the style guide's hero spec
   gives a 100px page margin), so on a wide screen the 1100px container left big
   dead zones of flat colour and made every row read as too small.
   Widened to 1720px with 100px gutters, and scoped to the uv-* sections ONLY so
   no existing page on the site changes.
   ============================================================================ */
.bakery section[class*="uv-"] > .container,
.bakery section[class*="uv-"] .vc_row > .container,
.bakery section[class*="uv-"] .container {
    max-width: 1720px;
    width: calc(100% - 200px);
}
@media (max-width: 1200px) {
    .bakery section[class*="uv-"] .container { width: calc(100% - 80px); }
}
@media (max-width: 767px) {
    .bakery section[class*="uv-"] .container { width: calc(100% - 40px); }
}
/* the ER Vet row and the map are deliberately edge-to-edge — exempt them */
.bakery section.uv-ervet-section .container,
.bakery section.uv-map .container { max-width: none; width: 100%; }

/* with the wider container the dog can grow to the comp's proportions */
@media (min-width: 1401px) {
    .bakery .uv-dogcallout-media video,
    .bakery .uv-dogcallout-media img { height: 700px; }
    .bakery .uv-dogcallout-row { min-height: 820px; }
}

/* ============================================================================
   14. SYMPTOM ROTATOR + PROMO TILES — REBUILT TO MATCH THE COMP
   ----------------------------------------------------------------------------
   First pass was wrong in both rows:
     - the rotator stacked the ACTIVE symptom on top with the greys under it;
       the comp has the active symptom as the MIDDLE line, baseline-aligned with
       "urgent pet care, for", with the previous symptom above and the next below
     - everything was roughly half the comp's size and the panel was too narrow
     - the promo tiles were small with tiny buttons, and sat entirely above the
       red row; the comp has large tiles whose lower half OVERLAPS the red
   Comp reference: grey panel = 89% of page width, 453px tall at 1877px wide.
   ============================================================================ */

.bakery section.uv-symptoms { padding-top: 40px !important; padding-bottom: 0 !important; }
.bakery .uv-symptoms-panel {
    align-items: center;
    background-color: var(--uv-grey);
    border-radius: 40px;
    display: flex;
    gap: 40px;
    justify-content: center;
    min-height: 420px;
    padding: 50px 70px;
}
body #content .uv-symptoms-label {
    color: var(--uv-ink) !important;
    flex: 0 0 auto;
    font-family: var(--uv-display) !important;
    font-size: 60px !important;
    font-weight: 400 !important;
    line-height: 1.0 !important;
    margin-bottom: 0 !important;
    text-align: right !important;
    white-space: nowrap;
}
.bakery .uv-symptoms-stack { display: flex; flex-direction: column; flex: 1 1 auto; justify-content: center; }
body #content .uv-sym {
    display: block;
    font-family: var(--uv-display) !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.04 !important;
    text-transform: uppercase !important;
    white-space: nowrap;
}
body #content .uv-sym-prev,
body #content .uv-sym-next { color: #C9CCD1 !important; font-size: 62px !important; }
body #content .uv-sym-active { color: var(--uv-red) !important; font-size: 86px !important; }

@media (max-width: 1200px) {
    .bakery .uv-symptoms-panel { min-height: 0; padding: 36px 40px; gap: 24px; }
    body #content .uv-symptoms-label { font-size: 38px !important; }
    body #content .uv-sym-prev, body #content .uv-sym-next { font-size: 38px !important; }
    body #content .uv-sym-active { font-size: 54px !important; }
}
@media (max-width: 979px) {
    .bakery .uv-symptoms-panel { border-radius: 26px; flex-direction: column; gap: 10px; padding: 28px 22px; text-align: center; }
    body #content .uv-symptoms-label { font-size: 24px !important; text-align: center !important; white-space: normal; }
    .bakery .uv-symptoms-stack { align-items: center; }
    body #content .uv-sym-prev, body #content .uv-sym-next { font-size: 26px !important; }
    body #content .uv-sym-active { font-size: 36px !important; }
}

/* --- PROMO TILES ---------------------------------------------------------
   Large rounded tiles; the lower ~45% sits over the red row below. */
.bakery section.uv-promo {
    padding-top: 0px !important;
    padding-bottom: 0 !important;
    position: relative;
    z-index: 2;
    margin-top: -230px;
}
.bakery .uv-promo-row { margin: 0 -16px; position: relative; top: 150px; }
.bakery .uv-promo-col { padding: 0 16px !important; }
.bakery .uv-promo-tile {
    background-color: var(--uv-blue);
    border-radius: 34px;
    height: 100%;
    padding: 46px 40px 50px;
    text-align: center;
}
body #content .uv-promo-tile h3 {
    color: #FFFFFF !important;
    font-size: 36px !important;
    line-height: 1.12 !important;
    margin-bottom: 30px !important;
    text-align: center !important;
}
/* the red row must start partway UP the tiles */
.bakery section.uv-whatis {
    padding-top: 100px !important;
}

@media (max-width: 1200px) {
    .bakery .uv-promo-row { top: 110px; }
    body #content .uv-promo-tile h3 { font-size: 27px !important; }
    .bakery .uv-promo-tile { padding: 34px 26px 38px; }
    .bakery section.uv-whatis { padding-top: 150px !important; }
}
@media (max-width: 979px) {
    .bakery section.uv-promo { padding-top: 40px !important; }
    .bakery .uv-promo-row { top: 60px; }
    .bakery .uv-promo-col { margin-bottom: 18px; }
    body #content .uv-promo-tile h3 { font-size: 24px !important; }
    .bakery section.uv-whatis { padding-top: 100px !important; }
}

/* ============================================================================
   15. "WHAT IS URGENT PET CARE?" — REBUILT
   ----------------------------------------------------------------------------
   With the container widened to 1720px this row broke: the 2/3 text column ran
   to ~1100px line lengths, and the map overlay (positioned right:-22%) sat on
   top of the copy. Comp has: photo left at ~1/3 and TALL, map tucked into the
   photo's bottom-right corner, copy in a readable measure to the right of it.
   ============================================================================ */

.bakery .uv-whatis-row { align-items: center; }

.bakery .uv-whatis-media { position: relative; }
.bakery .uv-whatis-photo {
    border-radius: 24px;
    display: block;
    height: 460px;
    object-fit: cover;
    width: 100%;
}
/* map tucks into the photo's bottom-right; never crosses into the copy column */
.bakery .uv-whatis-map {
    bottom: -132px;
    height: auto;
    position: absolute;
    right: -70px;
    width: 78%;
    z-index: 2;
}

.bakery .uv-whatis-copy { padding-left: 90px !important; }
.bakery .uv-whatis-copy .wpb_text_column { max-width: 760px; }
body #content .uv-whatis-copy h3 {
    font-size: 44px !important;
    line-height: 1.1 !important;
    margin-bottom: 20px !important;
}
body #content .uv-whatis-copy p { margin-bottom: 20px !important; }
body #content .uv-whatis-heading h2 { font-size: 62px !important; margin-bottom: 54px !important; }

@media (max-width: 1400px) {
    .bakery .uv-whatis-photo { height: 380px; }
    .bakery .uv-whatis-copy { padding-left: 60px !important; }
    body #content .uv-whatis-heading h2 { font-size: 48px !important; }
    body #content .uv-whatis-copy h3 { font-size: 34px !important; }
}
@media (max-width: 979px) {
    .bakery .uv-whatis-photo { height: 300px; }
    .bakery .uv-whatis-map { bottom: -26px; right: 0; width: 60%; }
    .bakery .uv-whatis-copy { padding-left: 0 !important; padding-top: 54px !important; }
    .bakery .uv-whatis-copy .wpb_text_column { max-width: none; }
    body #content .uv-whatis-heading h2 { font-size: 34px !important; margin-bottom: 26px !important; }
    body #content .uv-whatis-copy h3 { font-size: 26px !important; }
}

/* ============================================================================
   16. DEVELOPER-SUPPLIED OVERRIDES — 2026-09-17
   ----------------------------------------------------------------------------
   Pasted in verbatim by the developer. Do not refactor or "tidy" these; they are
   hand-tuned against the comp. Row padding here targets `.vc_row.wpb_row.<class>`
   (3 classes) which outranks the shell's row rules.
   ============================================================================ */

.vc_row.wpb_row.section-heading.uv-whatis-heading {
    padding-bottom: 0px;
}
.vc_row.wpb_row.uv-whatis-row {
    padding-top: 0px;
    padding-bottom: 160px;
}
.vc_row.wpb_row.uv-dogcallout-row {
    padding-bottom: 0px;
}
section.vc_section.uv-symptoms {
    padding-top: 0px !important;
}
.vc_row.wpb_row.uv-symptoms-row {
    padding-top: 0px;
}
body #content h1 {
    font-size: 52px !important;
}
.bakery .uv-hero-logo {
        filter: brightness(0) saturate(100%) invert(98%) sepia(100%) saturate(10%) hue-rotate(216deg) brightness(104%) contrast(104%);
}

/* ----------------------------------------------------------------------------
   16b. RESPONSIVE RESTORE FOR THE h1 ABOVE  (added by Claude, not supplied)
   The `body #content h1 { font-size: 52px }` rule above sits AFTER the responsive
   block in section 5, and carries the same specificity, so it was overriding the
   tablet/mobile h1 steps and leaving a 52px hero headline on a phone. These two
   rules re-assert the smaller steps. Delete them only if a 52px mobile h1 is
   actually wanted.
   ---------------------------------------------------------------------------- */
@media (max-width: 979px) {
    body #content h1 { font-size: 34px !important; }
}
@media (max-width: 480px) {
    body #content h1 { font-size: 30px !important; }
}

/* ============================================================================
   17. CONTEXT-AWARE BUTTON HOVER  (supersedes the `.on-dark` approach above)
   ----------------------------------------------------------------------------
   Rule from the developer:
       button on a BLUE row  -> hover: white background, BLUE text
       button on a RED  row  -> hover: white background, RED  text
   The hover colour follows the ROW's background, NOT the button variant, so a
   red `.default` button and a blue `.alternate` button sitting on the same blue
   row both go white-on-blue.

   These use `body #content <context> a.btn-bt:hover` (ID + 2 classes + element),
   which outranks the `body #content a.btn-bt.default:hover` base rules in
   section 8b, so the base red<->blue swap still applies everywhere else
   (white/grey rows), which is what the style guide's "HOVER (light background)"
   column specifies.

   `.on-dark` is kept working as a manual escape hatch but is no longer needed.
   ============================================================================ */

/* ---- BLUE contexts -> white bg, blue text -------------------------------- */
body #content section.uv-services a.btn-bt:hover,
body #content section.uv-services a.btn-bt:focus,
body #content section.uv-blog a.btn-bt:hover,
body #content section.uv-blog a.btn-bt:focus,
body #content .uv-promo-tile a.btn-bt:hover,
body #content .uv-promo-tile a.btn-bt:focus,
body #content section.accent2 a.btn-bt:hover,
body #content section.accent2 a.btn-bt:focus,
body #content .wpb_row.accent2 a.btn-bt:hover,
body #content .wpb_row.accent2 a.btn-bt:focus,
body #content .wpb_column.accent2 a.btn-bt:hover,
body #content .wpb_column.accent2 a.btn-bt:focus {
    background: #FFFFFF !important;
    color: var(--uv-blue) !important;
}

/* ---- RED contexts -> white bg, red text ---------------------------------- */
body #content section.uv-whatis a.btn-bt:hover,
body #content section.uv-whatis a.btn-bt:focus,
body #content section.uv-careers a.btn-bt:hover,
body #content section.uv-careers a.btn-bt:focus,
body #content section.uv-findloc a.btn-bt:hover,
body #content section.uv-findloc a.btn-bt:focus,
body #content .uv-ervet-panel--er a.btn-bt:hover,
body #content .uv-ervet-panel--er a.btn-bt:focus,
body #content section.accent1 a.btn-bt:hover,
body #content section.accent1 a.btn-bt:focus,
body #content .wpb_row.accent1 a.btn-bt:hover,
body #content .wpb_row.accent1 a.btn-bt:focus,
body #content .wpb_column.accent1 a.btn-bt:hover,
body #content .wpb_column.accent1 a.btn-bt:focus {
    background: #FFFFFF !important;
    color: var(--uv-red) !important;
}

/* The careers row's split pill follows the same red-row rule. */
body #content .uv-careers .uv-split-btn a:hover,
body #content .uv-careers .uv-split-btn a:focus {
    background: #FFFFFF !important;
    color: var(--uv-red) !important;
}

/* NOTE: .uv-dogcallout is a red SECTION, but its button area sits on the white
   swoosh, so it is deliberately NOT in the red list — a button added there
   should keep the standard light-background red<->blue swap. */

/* ============================================================================
   18. DEVELOPER-SUPPLIED OVERRIDES — 2026-09-17 (batch 4)
   ----------------------------------------------------------------------------
   ER Vet row full-bleed. `.vc_row-no-padding` is the class WPBakery adds because
   the row carries full_width="stretch_row_content_no_spaces".
   ============================================================================ */

.vc_row.wpb_row.uv-ervet-row.vc_row-no-padding {
    padding: 0px;
}

.vc_row.wpb_row.uv-ervet-row.vc_row-no-padding .container {
    max-width: 100%;
    width: 100%;
}

/* ============================================================================
   19. DEVELOPER-SUPPLIED OVERRIDES — 2026-09-18 (batch 5), verbatim
   ----------------------------------------------------------------------------
   Context: the developer swapped the inline-SVG button icons for Fontello
   (`<i class="icon-clock footer-icon">`), disabled the static `.uv-blog-row` in
   favour of `[most_recent_post]`, and made the map row full width in the
   builder. These rules follow those changes.
   ============================================================================ */

i.icon-clock.footer-icon {
    font-size: 32px;
}
body #content h4 {
    font-family: var(--uv-display) !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
}
body #content h3.location-search-header {
    font-size: 21px !important;
    line-height: 48px !important;
}


.card .card-bottom .card-bottom-tab {
    height: 30px;
    position: absolute;
    right: 0;
    width: auto;
    top: -30px;
    border-top-left-radius: 0px;
    background-color: #ea1c2d;
    color: #fff;
    padding: 5px 20px 0 35px;
    margin: 0;
    width: 100%;
    text-align: left;
}
.bakery .uv-icon-item img {
    width: 100%;
}
section.vc_section.uv-map .container {
    max-width: 100%;
    width: 100%;
}

/* ----------------------------------------------------------------------------
   19b. RESPONSIVE RESTORE FOR THE h4 ABOVE  (added by Claude, not supplied)
   Same trap as the h1 in 16b: `body #content h4 { font-size: 32px }` sits AFTER
   the responsive block in section 5 at equal specificity, so it was overriding
   the tablet/mobile h4 steps and leaving 32px h4s on a phone.
   h4 is now the same size as h3 on desktop, so these mirror h3's existing
   mobile steps (26px / 23px) to keep the two consistent. Adjust freely.
   ---------------------------------------------------------------------------- */
@media (max-width: 979px) {
    body #content h4 { font-size: 26px !important; }
}
@media (max-width: 480px) {
    body #content h4 { font-size: 23px !important; }
}

/* ----------------------------------------------------------------------------
   19c. MAP CONTAINER — make the full-width exemption actually win
   (added by Claude, not supplied)
   The developer's `section.vc_section.uv-map .container { max-width:100% }`
   (3 classes + 1 element) was being beaten by section 13's
   `.bakery section[class*="uv-"] .vc_row > .container` (4 classes + 1 element),
   so the map stayed at 1720px. Same for the ER Vet exemption. Re-stated here at
   a specificity that cannot lose, for both edge-to-edge rows.
   ---------------------------------------------------------------------------- */
.bakery section.vc_section.uv-map .container,
.bakery section.vc_section.uv-map .vc_row > .container,
.bakery section.vc_section.uv-ervet-section .container,
.bakery section.vc_section.uv-ervet-section .vc_row > .container {
    max-width: 100% !important;
    width: 100% !important;
}

/* ============================================================================
   20. DEVELOPER-SUPPLIED OVERRIDES — 2026-09-18 (batch 6)
   ----------------------------------------------------------------------------
   The panel-heading rule is global (no accordion class), so it also repaints the
   OTHER accordions on the site — including the live home page's, which was still
   the old teal because its colour came from a WPBakery `vc_tta-color-custom`
   Design-tab param compiled into that page's own CSS.
   ============================================================================ */

body #content div.vc_tta-panel-heading {
    background: #2FABDF;
    margin: 0px;
}
i.demo-icon.icon-location {
    font-size: 32px;
    width: auto;
    height: auto;
    /* NOTE: supplied as `var (--uv-red)` with a space between `var` and `(`, which
       is invalid CSS and gets dropped by the browser, leaving the icon its
       inherited colour. Corrected to `var(--uv-red)` — flagged to the developer. */
    color: var(--uv-red);
}

/* ============================================================================
   21. DEVELOPER-SUPPLIED OVERRIDES — 2026-09-18 (batch 7)
   ----------------------------------------------------------------------------
   Narrows the "what we treat" heading row. Carries an ID (#content) so it beats
   section 13's `.bakery section[class*="uv-"] .vc_row > .container` — the
   specificity landmine that broke the map container earlier.
   ============================================================================ */

body #content .vc_row.wpb_row.uv-treat-heading-row .container {
    max-width: 805px;
}
/* ============================================================================
   22. GMW LOCATION SEARCH FORM — one line, centred over the map
   ----------------------------------------------------------------------------
   Two separate faults, both in GeoMyWP's own markup:
     1. SEARCH wrapped to a second line because the three
        `.gmw-form-field-wrapper` divs are `float: left` and their widths
        (180 + 112 + 134 = 426px + margins) overflow the 429px `.gmw-form`.
     2. The bar sat hard left because GMW's `.row` is only 767px wide inside a
        1900px `.container`, so there was nothing centring it.
   Fix: drop the floats, lay the wrapper and the form out as nowrap flex rows,
   and centre the whole thing in the absolutely-positioned `.gmw-form-wrapper`.

   SCOPED to `section.uv-map` so the /locations/ and location-index pages, which
   use the same GMW form, are untouched. Broaden the scope if this treatment
   should apply there too.
   ============================================================================ */

/* --- centre the bar over the map ----------------------------------------- */
.bakery section.uv-map .gmw-form-wrapper .container {
    justify-content: center;
    max-width: 100%;
    width: 100%;
}
.bakery section.uv-map .gmw-form-wrapper .row {
    justify-content: center;
    margin: 0;
    width: auto;
}
.bakery section.uv-map .gmw-form-wrapper .col-12 {
    flex: 0 1 auto;
    max-width: none;
    padding: 0;
    width: auto;
}

/* --- label + form on ONE line -------------------------------------------- */
.bakery section.uv-map .outer-wrapper {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: 14px;
    justify-content: center;
    width: auto;
}
.bakery section.uv-map .outer-wrapper > h3.location-search-header {
    float: none;
    flex: 0 0 auto;
    margin: 0;
    white-space: nowrap;
}
.bakery section.uv-map .gmw-form {
    align-items: center;
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    width: auto;
}
/* kill the floats that forced the wrap */
.bakery section.uv-map .gmw-form .gmw-form-field-wrapper {
    float: none !important;
    flex: 0 0 auto;
    margin: 0 !important;
    width: auto;
}
.bakery section.uv-map .gmw-form .gmw-field-inner { margin: 0; }
/* hidden fields must not create flex gaps */
.bakery section.uv-map .gmw-form > .gmw-hidden-type-field,
.bakery section.uv-map .gmw-form > .gmw-submission-field { display: none !important; }

@media (max-width: 979px) {
    .bakery section.uv-map .outer-wrapper { flex-wrap: wrap; gap: 10px; }
    .bakery section.uv-map .gmw-form { flex-wrap: wrap; justify-content: center; }
}

/* ============================================================================
   23. BLOG ROW — [most_recent_post count="4" layout="cards"]
   ----------------------------------------------------------------------------
   The shortcode now emits all four cards inside one `.uv-blog-cards` wrapper
   (rather than four WPBakery columns), so the grid lives here. The card surface
   itself is still styled by section 10b `.uv-blog-card`.
   ============================================================================ */

.bakery .uv-blog-cards {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(4, 1fr);
}
/* the card is a flex column so "Read More" can pin to the bottom */
.bakery .uv-blog-cards .uv-blog-card {
    display: flex;
    flex-direction: column;
    height: 100%;
}
/* featured images are real photos here, not the cutouts the static row used —
   crop them to a consistent band so the four cards line up */
/* Equal-height featured images WITHOUT distortion.
   The fixed height is on the ANCHOR, and the <img> is forced to fill it with
   object-fit: cover — which preserves the aspect ratio and CROPS rather than
   stretching. !important is needed because section 10b's
   `.bakery .uv-blog-card img { height:auto; max-height:120px; object-fit:contain }`
   still matches these images (it was written for the old static cutout cards). */
.bakery .uv-blog-cards .uv-blog-card-img {
    border-radius: 14px;
    display: block;
    height: 200px;
    margin-bottom: 16px;
    overflow: hidden;
    width: 100%;
}
.bakery .uv-blog-cards .uv-blog-card-img img,
.bakery .uv-blog-cards .uv-blog-card .uv-blog-card-img img {
    display: block !important;
    height: 100% !important;
    margin: 0 !important;
    max-height: none !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center !important;
    width: 100% !important;
}
body #content .uv-blog-cards .uv-blog-card h4 { margin-bottom: 10px !important; }
body #content .uv-blog-cards .uv-blog-card h4 a { color: var(--uv-ink) !important; text-decoration: none !important; }
body #content .uv-blog-cards .uv-blog-card p { margin-bottom: 14px !important; }
.bakery .uv-blog-cards .uv-blog-more { margin-top: auto; margin-bottom: 0; }
body #content .uv-blog-cards .uv-blog-more a { color: var(--uv-red) !important; font-weight: 700 !important; text-decoration: none !important; }

@media (max-width: 1200px) { .bakery .uv-blog-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .bakery .uv-blog-cards { grid-template-columns: 1fr; } }

/* ============================================================================
   24. BLOG CAROUSEL (slick) — 12 posts, 4 visible
   ----------------------------------------------------------------------------
   The shortcode adds `.uv-blog-slider` and inits slick only when there are more
   than 4 posts, so the plain grid in section 23 still applies when there are 4
   or fewer. slick.min.js + slick.css/slick-theme.css are already enqueued
   site-wide by enqueue.php.
   ============================================================================ */

/* pre-init fallback: keep the 4-up grid until slick takes over, so there is no
   vertical-stack flash on load (slick runs after DOM ready) */
.bakery .uv-blog-cards.uv-blog-slider:not(.slick-initialized) {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(4, 1fr);
    overflow: hidden;
}
.bakery .uv-blog-cards.uv-blog-slider:not(.slick-initialized) .uv-blog-card:nth-child(n+5) { display: none; }
.bakery .uv-blog-cards.uv-blog-slider.slick-initialized { display: block; gap: 0; }

/* gap: positive margin on the slide, equal negative on the list, so the outer
   cards still line up with the container edges */
.bakery .uv-blog-slider .slick-list { margin: 0 -12px; }
.bakery .uv-blog-slider .slick-slide { margin: 0 12px; }

/* equal-height cards across the visible set.
   NOTE: the agency conventions warn against `.slick-slide > div { height:100% }`
   because it clips cards whose content EXPANDS at runtime. These cards are
   static, so the clamp is safe and gives a clean card grid. If expandable
   content is ever added here, drop these two rules and switch the slick init to
   `adaptiveHeight: true` instead. */
.bakery .uv-blog-slider .slick-track { display: flex; align-items: stretch; }
.bakery .uv-blog-slider .slick-slide { height: auto; }
.bakery .uv-blog-slider .slick-slide > div { display: flex; height: 100%; }
.bakery .uv-blog-slider .slick-slide .uv-blog-card { height: 100%; width: 100%; }

/* --- arrows: DISABLED ----------------------------------------------------
   `arrows: false` in the slick init (developer request 2026-09-18); the arrow
   styling that used to live here has been removed rather than left dead. */

/* --- dots ---------------------------------------------------------------- */
.bakery .uv-blog-slider .slick-dots { bottom: -42px; }
.bakery .uv-blog-slider .slick-dots li button::before {
    color: #FFFFFF;
    font-size: 12px;
    opacity: .65;
}
.bakery .uv-blog-slider .slick-dots li.slick-active button::before {
    color: var(--uv-red);
    opacity: 1;
}
.bakery section.uv-blog .uv-blog-cta { margin-top: 56px; }

@media (max-width: 1400px) { .bakery .uv-blog-cards.uv-blog-slider:not(.slick-initialized) { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 1100px) { .bakery .uv-blog-cards.uv-blog-slider:not(.slick-initialized) { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 680px)  { .bakery .uv-blog-cards.uv-blog-slider:not(.slick-initialized) { grid-template-columns: 1fr; } }

/* ============================================================================
   25. MOBILE / TABLET  (max-width: 979px)
   ----------------------------------------------------------------------------
   Consolidated mobile pass. Placed LAST so it wins over the per-section mobile
   blocks scattered above (sections 12, 14, 15, 23, 24), which had drifted out of
   agreement with each other.
   Developer request 2026-09-18: container at 87%, smaller accordion text, and
   equal top/bottom padding on the rows.
   ============================================================================ */

@media (max-width: 979px) {

    /* --- 1. CONTAINER: 87% ------------------------------------------------
       Overrides section 13's `calc(100% - 80px)` (which was ~79% on a 390px
       phone) and the theme's own `.bakery .container { width: 90% }`. */
    .bakery section[class*="uv-"] > .container,
    .bakery section[class*="uv-"] .vc_row > .container,
    .bakery section[class*="uv-"] .container {
        max-width: 87% !important;
        width: 87% !important;
    }
    /* the two deliberately edge-to-edge rows stay full bleed */
    .bakery section.vc_section.uv-map .container,
    .bakery section.vc_section.uv-map .vc_row > .container,
    .bakery section.vc_section.uv-ervet-section .container,
    .bakery section.vc_section.uv-ervet-section .vc_row > .container {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* --- 2. ACCORDION TEXT SMALLER ---------------------------------------- */
    body #content .uv-treat-accordion .vc_tta-panel-title > a {
        font-size: 17px !important;
        line-height: 1.25 !important;
        padding: 16px 56px 16px 20px !important;
    }
    .bakery .uv-treat-accordion .vc_tta-controls-icon { right: 18px !important; }
    body #content .uv-treat-accordion .vc_tta-panel-body li { font-size: 15px !important; }
    .bakery .uv-treat-accordion .vc_tta-panel-body { padding: 20px 22px !important; }

    /* --- 3. EQUAL TOP/BOTTOM ROW PADDING ----------------------------------
       Desktop used large asymmetric paddings (e.g. .uv-whatis 100px top /
       .uv-promo -230px margin) to build the tile-overlap effect. That overlap
       does not survive a single-column layout, so it is unwound here and every
       row gets a matching 40px top and bottom. */
    .bakery section[class*="uv-"] {
        padding-bottom: 40px !important;
        padding-top: 40px !important;
    }
    .bakery section[class*="uv-"] > .vc_row,
    .bakery section[class*="uv-"] .vc_row {
        padding-bottom: 0 !important;
        padding-top: 0 !important;
    }
    /* rows that must stay flush */
    .bakery section.uv-hero,
    .bakery section.uv-map,
    .bakery section.uv-ervet-section {
        padding-bottom: 0 !important;
        padding-top: 0 !important;
    }
    .bakery section.uv-findloc { padding-bottom: 22px !important; padding-top: 22px !important; }

    /* unwind the desktop promo-tile overlap (the -230px pull and the +150px
       row offset were never reset for mobile and dragged the tiles up into the
       symptom panel) */
    .bakery section.uv-promo { margin-top: 0 !important; }
    .bakery .uv-promo-row { top: 0 !important; margin: 0 !important; }
    .bakery .uv-promo-col { padding: 0 0 16px !important; }
    .bakery section.uv-whatis { padding-top: 40px !important; }

    /* --- 4. ODDS AND ENDS AT THIS WIDTH ----------------------------------- */
    .bakery .uv-dogcallout-media video,
    .bakery .uv-dogcallout-media img { height: auto; max-height: 360px; }
    .bakery .uv-whatis-copy { padding-left: 0 !important; }
    .bakery .uv-blog-cards { gap: 18px; }
    .bakery .uv-icon-item img { width: 72px !important; flex: 0 0 72px; }
}

/* ============================================================================
   26. MOBILE PADDING TWEAKS (max-width: 979px) — developer request 2026-09-18
   ----------------------------------------------------------------------------
   Sits after section 25 so it overrides that block's blanket
   `padding: 40px 0` on the uv-* sections.
   ============================================================================ */

@media (max-width: 979px) {

    /* ER Vet row — no top or bottom padding at all.
       Covers the WPBakery section, its row, and the <section class="uv-ervet">
       that the [uv_er_vet_compare] shortcode emits inside it. */
    .bakery section.uv-ervet-section,
    .bakery section.uv-ervet-section > .vc_row,
    .bakery section.uv-ervet-section .vc_row,
    .bakery section.uv-ervet-section .uv-ervet,
    .bakery .uv-ervet {
        padding-bottom: 0 !important;
        padding-top: 0 !important;
    }

    /* "urgent pet care, for ..." symptom rotator — no bottom padding */
    .bakery section.uv-symptoms,
    .bakery section.uv-symptoms > .vc_row,
    .bakery section.uv-symptoms .vc_row {
        padding-bottom: 0 !important;
    }

    /* promo tiles — no top padding */
    .bakery section.uv-promo,
    .bakery section.uv-promo > .vc_row,
    .bakery section.uv-promo .vc_row {
        padding-top: 0 !important;
    }
}

/* ============================================================================
   27. MAP CTA BUTTON ON MOBILE (max-width: 979px) — developer request
   ----------------------------------------------------------------------------
   The "Find a Location Near You" button must OVERLAY the map on mobile exactly
   as it does on desktop — absolutely positioned, not pushed into flow.

   Why it was invisible: it is `position: absolute` with `margin-top: -25px`,
   and `.uv-map-cta` inside it adds `margin-top: -86px`. Those two negative
   pulls are calibrated for the desktop layout; at mobile they dropped the
   button past the section's bottom edge, where it was clipped (only a sliver
   of red showed).

   Fix: keep it absolute, but anchor it to the BOTTOM of the map section with
   `bottom` instead of relying on negative margins, and pin the section as the
   positioning context. z-index sits above Leaflet's panes/controls (~400-1000).
   ============================================================================ */

@media (max-width: 979px) {

    /* positioning context = the map section itself */
    .bakery section.uv-map {
        overflow: visible !important;
        position: relative !important;
    }
    /* the CTA row must not reserve vertical space or the map grows */
    .bakery section.uv-map .uv-map-cta-row {
        margin: 0 !important;
        padding: 0 !important;
    }
    /* overlay, anchored to the bottom of the map */
    .bakery section.uv-map .map-button,
    .bakery .map-button {
        bottom: 26px !important;
        left: 0 !important;
        margin-top: 0 !important;
        position: absolute !important;
        right: 0 !important;
        text-align: center !important;
        top: auto !important;
        z-index: 1100 !important;
    }
    /* kill the desktop -86px lift; the `bottom` above does the positioning now */
    .bakery .uv-map-cta {
        margin-top: 0 !important;
        position: relative !important;
        text-align: center !important;
    }
    .bakery section.uv-map .map-button a.btn-bt {
        display: inline-flex !important;
        width: auto !important;
    }
}

/* ============================================================================
   28. GMW SEARCH FORM AT PHONE WIDTH (max-width: 480px)
   ----------------------------------------------------------------------------
   Section 22 just sets `flex-wrap: wrap` below 979px, which at phone width let
   the three controls wrap arbitrarily: a full-width ZIP field, a narrow Miles
   box floating mid-row, and SEARCH on its own line — all at different heights
   and radii.
   Deliberate layout here instead:
       row 1  label, centred
       row 2  ZIP (58%)  +  Miles (34%)
       row 3  SEARCH, full width
   with every control forced to the same height and pill radius.
   ============================================================================ */

@media (max-width: 480px) {

    /* keep the bar off the very edges of the map */
    .bakery section.uv-map .outer-wrapper {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
        margin: 0 auto;
        max-width: 340px;
        width: 88%;
    }
    .bakery section.uv-map .outer-wrapper > h3.location-search-header {
        text-align: center;
        white-space: normal;
        width: 100%;
    }
    body #content .uv-map .outer-wrapper > h3.location-search-header {
        font-size: 18px !important;
        line-height: 1.3 !important;
    }

    /* ZIP + Miles share a line; SEARCH takes its own */
    .bakery section.uv-map .gmw-form {
        align-items: stretch;
        column-gap: 8px;
        flex-wrap: wrap;
        row-gap: 8px;
        width: 100%;
    }
    .bakery section.uv-map .gmw-form .gmw-address-field-wrapper  { flex: 1 1 58%; min-width: 0; }
    .bakery section.uv-map .gmw-form .gmw-distance-field-wrapper { flex: 1 1 34%; min-width: 0; }
    .bakery section.uv-map .gmw-form .gmw-submit-field-wrapper   { flex: 1 1 100%; }
    .bakery section.uv-map .gmw-form .gmw-field-inner            { width: 100%; }

    /* one consistent control size + shape across all three */
    .bakery section.uv-map .gmw-form input.gmw-address-field,
    .bakery section.uv-map .gmw-form select.gmw-distance-field,
    .bakery section.uv-map .gmw-form input.gmw-submit-field {
        border-radius: 999px !important;
        box-sizing: border-box !important;
        height: 48px !important;
        line-height: 48px !important;
        margin: 0 !important;
        min-height: 48px !important;
        padding: 0 16px !important;
        width: 100% !important;
    }
    body #content .uv-map .gmw-form input.gmw-address-field,
    body #content .uv-map .gmw-form select.gmw-distance-field {
        font-size: 15px !important;
    }
    body #content .uv-map .gmw-form input.gmw-submit-field {
        font-size: 16px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
    }
}

/* ============================================================================
   29. BLOG CAROUSEL ARROWS / DOTS BY BREAKPOINT
   ----------------------------------------------------------------------------
   Developer request 2026-09-18: at <=480px show ARROWS (transparent
   background, RED glyph) and hide the dots. Above 480px stays dots-only, as before.
   The slick init now has `arrows: true` so the arrow DOM always exists — slick
   will not create it later if it is false at init — and visibility is handled
   purely here.
   ============================================================================ */

/* ABOVE 480px: dots only, arrows hidden (the desktop/tablet design) */
@media (min-width: 481px) {
    .bakery .uv-blog-slider .slick-prev,
    .bakery .uv-blog-slider .slick-next { display: none !important; }
}

/* 480px AND BELOW: arrows on, dots off */
@media (max-width: 480px) {

    .bakery .uv-blog-slider .slick-dots { display: none !important; }

    .bakery .uv-blog-slider .slick-prev,
    .bakery .uv-blog-slider .slick-next {
        background: transparent !important;
        border: 0 !important;
        border-radius: 50% !important;
        display: block !important;
        height: 40px !important;
        margin-top: 0 !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 40px !important;
        z-index: 5 !important;
    }
    .bakery .uv-blog-slider .slick-prev:hover,
    .bakery .uv-blog-slider .slick-next:hover,
    .bakery .uv-blog-slider .slick-prev:focus,
    .bakery .uv-blog-slider .slick-next:focus {
        background: transparent !important;
    }
    /* red glyph — slick-theme.css draws these with its own font, and sets
       colour + opacity on the ::before, so both have to be overridden */
    .bakery .uv-blog-slider .slick-prev::before,
    .bakery .uv-blog-slider .slick-next::before {
        color: var(--uv-red) !important;
        font-size: 20px !important;
        line-height: 1 !important;
        opacity: 1 !important;
    }
    /* sit them just inside the card edges so they do not overhang the section */
    .bakery .uv-blog-slider .slick-prev { left: -6px !important; right: auto !important; }
    .bakery .uv-blog-slider .slick-next { right: -6px !important; left: auto !important; }

    /* give the arrows somewhere to sit without covering the card text */
    .bakery .uv-blog-slider .slick-list { margin: 0 !important; }
    .bakery .uv-blog-slider .slick-slide { margin: 0 !important; }
}

/* ============================================================================
   30. DOG CALLOUT AT <=979px — red on top only, dog above the text
   ----------------------------------------------------------------------------
   Developer request 2026-09-18.
   The row is `background-color: var(--uv-red)` with a WHITE ellipse `::before`
   painted over it — the red you see is whatever the ellipse does not cover.
   The mobile ellipse was only 62% tall, so red showed at the TOP *and* the
   BOTTOM. Extending it well past the bottom leaves red on the top edge only.

   DOM order in the row is text-column then media-column, so the swap is done
   with `flex-direction: column-reverse` on the `.container` (which is the flex
   parent of the two columns on this theme) rather than by touching the markup —
   the page is developer-edited and must not be rewritten from here.
   ============================================================================ */

@media (max-width: 979px) {

    .bakery section.uv-dogcallout {
        background-color: var(--uv-red) !important;
        overflow: hidden !important;
        position: relative !important;
    }
    /* white ellipse: starts just below the top edge, runs far past the bottom */
    .bakery section.uv-dogcallout::before {
        background: #FFFFFF !important;
        border-radius: 50% !important;
        content: "" !important;
        height: 220% !important;
        left: -40% !important;
        position: absolute !important;
        top: 9% !important;
        transform: none !important;
        width: 180% !important;
        z-index: 0 !important;
    }

    /* dog on top, copy underneath */
    .bakery .uv-dogcallout-row > .container {
        display: flex !important;
        flex-direction: column-reverse !important;
    }
    .bakery .uv-dogcallout-row {
        position: relative;
        z-index: 1;
    }
    .bakery .uv-dogcallout-text,
    .bakery .uv-dogcallout-media {
        width: 100% !important;
    }
    .bakery .uv-dogcallout-media {
        padding: 0 0 26px !important;
    }
    .bakery .uv-dogcallout-text {
        padding: 0 0 10px !important;
    }
    .bakery .uv-dogcallout-media video,
    .bakery .uv-dogcallout-media img {
        border-radius: 24px;
        height: auto !important;
        max-height: 340px;
        object-fit: cover;
        width: 100%;
    }
}

/* ============================================================================
   31. HERO H1 AT 480px + BOTTOM PADDING AT 979px
   ----------------------------------------------------------------------------
   Developer request 2026-09-18.
   ============================================================================ */

@media (max-width: 480px) {
    /* Section 16b sets `body #content h1 { font-size: 30px }` at this width.
       Scoped to the hero so only the hero headline goes to 35px and any other
       h1 on the site keeps the 30px step. */
    body #content .uv-hero h1,
    body #content .uv-hero-inner h1 {
        font-size: 35px !important;
    }
}

@media (max-width: 979px) {
    /* no bottom padding on either row (section 25 gives every uv-* section
       40px top and bottom; these two opt out of the bottom) */
    .bakery section.uv-dogcallout,
    .bakery section.uv-dogcallout > .vc_row,
    .bakery section.uv-dogcallout .vc_row,
    .bakery section.uv-promo,
    .bakery section.uv-promo > .vc_row,
    .bakery section.uv-promo .vc_row {
        padding-bottom: 0 !important;
    }
}

/* ============================================================================
   32. BUTTON GAP AT 480px — developer request 2026-09-18
   ----------------------------------------------------------------------------
   Section 11 sets `gap: 12px !important` on the button flex row (the space
   between the label and the trailing icon). Collapsed to 0 at phone width.
   ============================================================================ */

@media (max-width: 480px) {
    body #content a.btn-bt,
    body #content .bakery a.btn-bt {
        gap: 0px !important;
    }
}

/* ============================================================================
   33. TREAT HEADING CENTRING, HERO LOGO, BUTTON PADDING
   ----------------------------------------------------------------------------
   Developer request 2026-09-18.
   ============================================================================ */

@media (max-width: 979px) {

    /* "what we treat" heading row — centre the text */
    .bakery .uv-treat-heading-row,
    .bakery .uv-treat-heading-row .uv-treat-heading,
    .bakery .uv-treat-heading-row .uv-treat-intro {
        text-align: center !important;
    }
    body #content .uv-treat-heading-row h2,
    body #content .uv-treat-heading-row p,
    body #content .uv-treat-heading h2,
    body #content .uv-treat-intro p {
        text-align: center !important;
    }

    /* hero logo
       NOTE: this also applies at <=480px, where section 7 previously set
       `max-width: 160px`. That 160px is now overridden — the logo is 300px on
       phones too. Re-add a <=480 rule below this section if a smaller phone
       logo is wanted. */
    .bakery .uv-hero-logo {
        margin-top: 30px !important;
        max-width: 300px !important;
    }
}

@media (max-width: 480px) {
    /* overrides section 11's `padding: 0 24px !important` at this width */
    body #content a.btn-bt,
    body #content .bakery a.btn-bt {
        padding: 0px 15px !important;
    }
}

/* ============================================================================
   34. CAREERS PHOTO FLUSH TO THE ROW BOTTOM (all widths) + BLOG CTA AT 480px
   ----------------------------------------------------------------------------
   Developer request 2026-09-18: the vets photo must sit flush against the
   bottom of the red row on desktop AND mobile. Two things were creating the gap:

     1. MOBILE — section 25 applies `padding-bottom: 40px !important` to every
        `uv-*` section, which re-added 40px under the photo even though section 7
        had already set `padding-bottom: 0` on this one.
     2. ALL WIDTHS — wpautop wraps the <img> in a <p>
        (`<div class="wpb_wrapper"><p><img class="uv-careers-photo" ...></p></div>`),
        and that paragraph's own bottom margin plus its line-height leave space
        under the image.

   Everything between the section and the <img> is therefore zeroed, and the
   image keeps `margin-bottom: -1px` to swallow any sub-pixel rounding seam.
   ============================================================================ */

.bakery section.uv-careers {
    padding-bottom: 0 !important;
}
.bakery section.uv-careers > .vc_row,
.bakery section.uv-careers .vc_row.uv-careers-row {
    padding-bottom: 0 !important;
}
.bakery .uv-careers-media,
.bakery .uv-careers-media > .vc_column-inner,
.bakery .uv-careers-media > .vc_column-inner > .wpb_wrapper,
.bakery .uv-careers-media .wpb_text_column,
.bakery .uv-careers-media .wpb_text_column > .wpb_wrapper {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
/* the wpautop paragraph around the image */
.bakery .uv-careers-media .wpb_text_column p,
.bakery .uv-careers-media .wpb_wrapper p {
    line-height: 0 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
.bakery .uv-careers-photo {
    display: block !important;
    margin-bottom: -1px !important;
    vertical-align: bottom !important;
}

@media (max-width: 979px) {
    /* beat section 25's blanket 40px bottom padding on uv-* sections */
    .bakery section.uv-careers,
    .bakery section.uv-careers > .vc_row,
    .bakery section.uv-careers .vc_row {
        padding-bottom: 0 !important;
    }
}

@media (max-width: 480px) {
    .bakery section.uv-blog .uv-blog-cta {
        margin-top: 0px !important;
    }
}

/* ============================================================================
   35. SEARCH FORM MUST BE VISIBLE AT EVERY WIDTH
   ----------------------------------------------------------------------------
   Developer report 2026-09-18: at ~1440px the top half of the GMW search bar was
   hidden behind the red "Find an UrgentVet Location" band above it.

   Cause: `.gmw-form-wrapper` is `position: absolute; top: 40px; margin: -30px 0 0`
   (GeoMyWP's own CSS), which lifts it up over the boundary between the red
   `.uv-findloc` section and the map. Its z-index: 10001 could not save it,
   because z-index only competes INSIDE a stacking context — and the red band and
   the map are siblings with no positioning, so plain document order decided who
   painted on top.

   Fix: give the map section its own stacking context ABOVE the red band, keep
   the form on top within it, and drop the wrapper's negative margin so it sits
   fully inside the map at any width.
   ============================================================================ */

.bakery section.uv-findloc {
    position: relative;
    z-index: 1;
}
.bakery section.uv-map {
    position: relative !important;
    z-index: 20 !important;
}
.bakery section.uv-map .gmw-form-wrapper {
    margin-top: 0 !important;
    top: 36px !important;
    z-index: 30 !important;
}
/* nothing between the section and the form may clip it */
.bakery section.uv-map,
.bakery section.uv-map .section-map,
.bakery section.uv-map .uv-map-row {
    overflow: visible !important;
}

@media (max-width: 979px) {
    .bakery section.uv-map .gmw-form-wrapper { top: 20px !important; }
}

/* ============================================================================
   36. ICON MODULE — UNIFORM ICON BOX SO THE COPY LINES UP (desktop)
   ----------------------------------------------------------------------------
   Developer report 2026-09-18: the three icons render at different widths, so
   "convenient" / "trusted" / "affordable" and their body copy start at three
   different left edges.

   The source images are identical (all 200x160) and the markup is identical
   (all `width="96" height="96"`), so the difference comes from how the flex
   main size was resolving: section 7 sets `flex: 0 0 96px` while the later
   developer rule sets `width: 100%`, and the two disagree.

   Rather than pick a winner, every icon is pinned to the SAME 140x140 box with
   `object-fit: contain`, which:
     - makes all three boxes identical, so the copy aligns,
     - scales nothing down (140px is larger than the widest current render),
     - cannot distort the artwork (contain preserves aspect ratio).
   The transparent padding baked into each PNG still varies, so the artwork may
   sit at slightly different visual sizes inside the box — that is in the source
   files, not the CSS, and would need the PNGs retrimmed to change.
   ============================================================================ */

@media (min-width: 980px) {
    .bakery .uv-icon-item {
        align-items: flex-start;
        display: flex;
        gap: 22px;
    }
    .bakery .uv-icon-item img {
        flex: 0 0 140px !important;
        height: 140px !important;
        max-height: 140px !important;
        max-width: 140px !important;
        min-width: 140px !important;
        object-fit: contain !important;
        object-position: center center !important;
        width: 140px !important;
    }
    .bakery .uv-icon-item .uv-icon-body { flex: 1 1 auto; min-width: 0; }
}

/* ============================================================================
   37. ICON MODULE PHOTO — PORTRAIT CROP (desktop), no distortion
   ----------------------------------------------------------------------------
   The comp shows this photo as a tall portrait; the source
   (uv-same-day-care-woman-cat.jpg) is landscape 1100x619.

   `object-fit: cover` on a portrait box CROPS to fill — it never stretches, so
   the image cannot distort. Only the sides are trimmed.

   `object-position: 40% center` was chosen by simulating the crop offline
   against the source file: at 40% the doorway stays on the left and the dog
   stays visible at lower-left, which is how the comp frames it. Centre (50%)
   clips the dog; 65% loses it entirely. Adjust this one value to re-frame.

   2/3 is the comp's ratio (~660x1050). Width is capped at 600px so the box does
   not become ~1290px tall inside the half-width column.
   ============================================================================ */

@media (min-width: 980px) {
    .bakery .uv-iconmodule-photo {
        aspect-ratio: 2 / 3;
        border-radius: 20px;
        display: block;
        height: auto;
        margin-left: auto;
        margin-right: auto;
        max-width: 600px;
        object-fit: cover !important;
        object-position: 40% center !important;
        width: 100%;
    }
    /* the photo column should not stretch the image to the row height */
    .bakery .uv-iconmodule-row .img-col { align-self: flex-start; }
}

/* ============================================================================
   38. MAP CTA BUTTON — RED DEFAULT / BLUE HOVER, ICON INVERTS
   ----------------------------------------------------------------------------
   Developer spec 2026-09-18:
       default : RED background,  BLUE pin
       hover   : BLUE background, RED  pin
   The icon always takes the opposite brand colour to the button, so it never
   disappears into the background (a red pin on the red default button was the
   original bug — section 20 sets `i.demo-icon.icon-location` red globally).

   Done in CSS rather than by editing the markup, because the page is
   developer-owned and a WPBakery save would revert a markup change.
   ============================================================================ */

/* default — red button, blue pin */
body #content .uv-map .map-button a.btn-bt,
body #content .uv-map .map-button a.btn-bt.default,
body #content .uv-map-cta a.btn-bt,
body #content .uv-map-cta a.btn-bt.default {
    background: var(--uv-red) !important;
    color: #FFFFFF !important;
}
body #content .uv-map .map-button a.btn-bt i,
body #content .uv-map-cta a.btn-bt i {
    color: var(--uv-blue) !important;
}

/* hover / focus — blue button, red pin */
body #content .uv-map .map-button a.btn-bt:hover,
body #content .uv-map .map-button a.btn-bt:focus,
body #content .uv-map .map-button a.btn-bt.default:hover,
body #content .uv-map .map-button a.btn-bt.default:focus,
body #content .uv-map-cta a.btn-bt:hover,
body #content .uv-map-cta a.btn-bt:focus,
body #content .uv-map-cta a.btn-bt.default:hover,
body #content .uv-map-cta a.btn-bt.default:focus {
    background: var(--uv-blue) !important;
    color: #FFFFFF !important;
}
body #content .uv-map .map-button a.btn-bt:hover i,
body #content .uv-map .map-button a.btn-bt:focus i,
body #content .uv-map-cta a.btn-bt:hover i,
body #content .uv-map-cta a.btn-bt:focus i {
    color: var(--uv-red) !important;
}

/* ============================================================================
   39. CAREERS SPLIT BUTTON — CENTRED UNDER THE HEADING
   ----------------------------------------------------------------------------
   The heading is centred in its column but `.uv-split-btn` sat hard left: it is
   `display: inline-flex`, and its wrapper was not centring inline content.
   Centring the wrapper's text-align picks up the inline-flex pill; the explicit
   auto margins cover the case where something later makes it a block.
   ============================================================================ */

.bakery .uv-careers-copy .wpb_text_column,
.bakery .uv-careers-copy .wpb_text_column > .wpb_wrapper {
    text-align: center;
}
body #content .uv-careers-copy h2 {
    text-align: center !important;
}
.bakery .uv-careers-copy .uv-split-btn {
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 980px) {
    /* fit-content + auto margins so the pill centres as a block too.
       Not applied below 980px, where section 7 gives it `width: 100%`. */
    .bakery .uv-careers-copy .uv-split-btn {
        width: -moz-fit-content;
        width: fit-content;
    }
}

/* ============================================================================
   40. PROMO TILES — BUTTONS ALIGNED ACROSS THE ROW (desktop)
   ----------------------------------------------------------------------------
   "what we treat" is one line while the other two headings wrap to two, so each
   button started at a different height.

   The tiles are already equal height (section 7's flex cascade on
   `.uv-promo-col`). Making each tile's inner `.wpb_wrapper` a flex column and
   giving the heading `margin-bottom: auto` pushes every button to the bottom of
   its tile, so the three line up regardless of how the copy wraps. The gap
   between heading and button then varies per tile, which is the trade-off for
   a hard bottom alignment.
   ============================================================================ */

@media (min-width: 980px) {

    .bakery .uv-promo-tile {
        display: flex;
        height: 100%;
    }
    .bakery .uv-promo-tile > .wpb_wrapper {
        display: flex;
        flex-direction: column;
        height: 100%;
        width: 100%;
    }
    /* soak up the spare height above the button */
    body #content .uv-promo-tile > .wpb_wrapper > h3 {
        margin-bottom: auto !important;
        padding-bottom: 24px;
    }
    .bakery .uv-promo-tile > .wpb_wrapper > a.btn-bt,
    .bakery .uv-promo-tile a.btn-bt {
        align-self: center;
        flex: 0 0 auto;
        margin-top: 0;
    }
}


/* ============================================================================
   41. FIND-A-LOCATION BAND: BLUE FORM + PIN/PAW ICON
   ----------------------------------------------------------------------------
   (a) The search bar was teal, not brand blue. Source:
       `assets/css/styles-v2.css` -> `.gmw-form-wrapper .location-search-header
       { background-color: #00a9c6 }`. That is #00a9c6, NOT #01aac7, so the
       site-wide accent2 sweep never matched it. The SEARCH submit picks up the
       same teal. Both re-pointed at var(--uv-blue) here.

   (b) The comp puts a pin-with-paw icon before "Find an UrgentVet Location".
       The developer's page edit removed the old inline SVG span, and the page is
       developer-owned, so the icon is added as a CSS ::before instead — a save
       from the WPBakery builder cannot strip it.
       Fontello (already loaded) has `icon-location` but NO paw glyph, and no
       pin+paw asset exists in the media library, so the mark is drawn inline as
       an SVG data URI.
   ============================================================================ */

/* (a) form -> brand blue */
.bakery .gmw-form-wrapper .location-search-header,
.bakery section.uv-map .location-search-header {
    background-color: var(--uv-blue) !important;
}
.bakery section.uv-map .gmw-form input.gmw-submit-field,
.bakery .gmw-form-wrapper input.gmw-submit-field {
    background-color: var(--uv-blue) !important;
    border-color: var(--uv-blue) !important;
    color: #FFFFFF !important;
}

/* (b) pin + paw before the heading */
body #content .uv-findloc-bar h2 {
    align-items: center;
    display: flex;
    gap: 18px;
    justify-content: center;
}
body #content .uv-findloc-bar h2::before {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2064%2064%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20fill-rule%3D%22evenodd%22%20d%3D%22M24%203C14.1%203%206%2011.1%206%2021c0%2013.5%2018%2035%2018%2035s18-21.5%2018-35c0-9.9-8.1-18-18-18zm0%2025a7.5%207.5%200%201%201%200-15%207.5%207.5%200%200%201%200%2015z%22%2F%3E%3Cg%20fill%3D%22%23ffffff%22%3E%3Cellipse%20cx%3D%2245%22%20cy%3D%2240%22%20rx%3D%224.4%22%20ry%3D%225.6%22%2F%3E%3Cellipse%20cx%3D%2255.5%22%20cy%3D%2239%22%20rx%3D%224.2%22%20ry%3D%225.4%22%2F%3E%3Cellipse%20cx%3D%2239%22%20cy%3D%2249%22%20rx%3D%223.8%22%20ry%3D%224.8%22%2F%3E%3Cellipse%20cx%3D%2261%22%20cy%3D%2248%22%20rx%3D%223.6%22%20ry%3D%224.6%22%2F%3E%3Cpath%20d%3D%22M50%2047c5.6%200%209%204%209%207.8%200%203.2-2.7%205.2-6.4%205.2-1.9%200-2.5-.6-2.7-.6s-.8.6-2.7.6c-3.7%200-6.4-2-6.4-5.2C40.8%2051%2044.4%2047%2050%2047z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    content: "";
    display: inline-block;
    flex: 0 0 auto;
    height: 0.95em;
    width: 0.95em;
}
@media (max-width: 979px) {
    body #content .uv-findloc-bar h2 { gap: 10px; }
    body #content .uv-findloc-bar h2::before { height: 0.85em; width: 0.85em; }
}

/* ============================================================================
   42. CAREERS PHOTO OVERLAPS THE ROW ABOVE (desktop) — like the comp
   ----------------------------------------------------------------------------
   The comp has the vets' heads breaking up out of the red band into the blue
   blog row above.

   A `margin-top: -30px` already existed on `.uv-careers-photo` (section 7), but
   it did nothing: section 7 also sets `overflow: hidden` on `.uv-careers`, which
   clipped anything extending past the section's top edge. So the fix is as much
   about the clipping as the offset.

   - overflow: visible so the image can escape the section
   - a larger negative top margin (~19% of the image height, matching the comp)
   - position/z-index so it paints OVER the blue row rather than under it
   The photo stays flush to the bottom — section 34 handles that and is untouched.
   ============================================================================ */

@media (min-width: 980px) {

    .bakery section.uv-careers {
        overflow: visible !important;
        position: relative;
        z-index: 2;
    }
    /* the row above must not clip the incoming image either */
    .bakery section.uv-blog { overflow: visible !important; }

    .bakery .uv-careers-media {
        position: relative;
        z-index: 3;
    }
    .bakery .uv-careers-photo {
        margin-top: -95px !important;
        position: relative;
        z-index: 3;
    }
}

@media (min-width: 1400px) {
    .bakery .uv-careers-photo { margin-top: -120px !important; }
}

/* ============================================================================
   43. CAREERS PHOTO — BOTTOM-FLUSH *AND* OVERLAPPING (desktop)
   ----------------------------------------------------------------------------
   Section 42 made the photo overlap the blue row above, but it then floated off
   the bottom of the red row.

   Cause: section 7's `.uv-careers-row { align-items: flex-end }` targets the
   `.vc_row`, whose only child on this theme is `.container` — the two columns
   are inside THAT. So the columns were never bottom-aligned; the rule had no
   effect on them. Once the image was pulled up 95px, nothing was holding its
   bottom edge to the row.

   Fix: bottom-align the actual flex parent (`.container`), and let the media
   column hug the bottom. The negative top margin then only extends the image
   UPWARD out of the section, which is the intended overlap.
   ============================================================================ */

@media (min-width: 980px) {

    .bakery .uv-careers-row > .container {
        align-items: flex-end !important;
        display: flex !important;
    }
    .bakery .uv-careers-media {
        align-self: flex-end !important;
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
    }
    .bakery .uv-careers-media > .vc_column-inner,
    .bakery .uv-careers-media > .vc_column-inner > .wpb_wrapper {
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        width: 100%;
    }
    /* image: flush to the bottom, extending up out of the section */
    .bakery .uv-careers-photo {
        display: block !important;
        margin-bottom: -1px !important;
        vertical-align: bottom !important;
    }
}

/* ============================================================================
   44. CAREERS PHOTO — CONTROLLED OVERLAP (desktop only, min-width 980px)
   ----------------------------------------------------------------------------
   Why section 42's `margin-top` barely moved it:
   once the column is bottom-aligned (section 43), a negative margin-top only
   SHRINKS the column — it does not lift the image relative to the row. The
   image's bottom stays pinned to the row bottom and its top therefore sits
   exactly `imageHeight` above that, so the only overlap you got was whatever
   the image height happened to exceed the row height by (~10px).

   The reliable technique is a visual offset plus a matching layout pull:
       top: -<N>px            moves the image UP by N without changing layout
       margin-bottom: -<N>px  shrinks the column by N so the section bottom
                              follows it up and the image stays FLUSH
   Net effect: bottom flush, top overlapping the blue row by exactly N.
   N is the single number to tune — nothing else needs to change.
   ============================================================================ */

@media (min-width: 980px) {
    .bakery .uv-careers-photo {
        margin-bottom: -110px !important;   /* keep N in sync with top */
        margin-top: 0 !important;           /* section 42's pull is now inert */
        position: relative !important;
        top: -110px !important;             /* N = overlap into the row above */
        z-index: 3;
    }
}

@media (min-width: 1400px) {
    .bakery .uv-careers-photo {
        margin-bottom: -140px !important;
        top: -140px !important;
    }
}

/* ============================================================================
   45. "WHAT TO EXPECT" AS A CAROUSEL AT <=979px
   ----------------------------------------------------------------------------
   The slider is initialised in assets/js/main.js on `.uv-expect-row > .container`
   (the flex parent of the step columns) and is unslicked again above 979px, so
   the desktop 4-up grid is completely untouched.

   `adaptiveHeight: true` is used here deliberately — unlike the blog cards,
   these steps have very different copy lengths, and the agency conventions call
   for adaptiveHeight on variable-height slides. That is also why this slider
   does NOT use the `.slick-slide > div { height: 100% }` clamp.
   ============================================================================ */

@media (max-width: 979px) {

    /* WPBakery lays the columns out with flex/width rules that fight slick's
       absolute track positioning — neutralise them once slick is running. */
    .bakery .uv-expect-row > .container.slick-initialized {
        display: block !important;
    }
    /* ⚠ DO NOT re-add `float: none` or `width: auto` here.
       slick makes each `.uv-expect-col` a slide, sets `float: left` on it and
       writes an INLINE width. `!important` beats inline styles, so overriding
       either one collapses every slide and the row renders as blank white space
       (that is exactly what happened on the first attempt). slick's inline width
       already outranks WPBakery's `.vc_col-sm-3 { width: 25% }`, so nothing
       needs overriding at all. */
    .bakery .uv-expect-row > .container.slick-initialized .uv-expect-col {
        max-width: none !important;
        padding: 0 10px !important;
    }
    .bakery .uv-expect-row > .container.slick-initialized .slick-list { width: 100%; }

    /* one step per view, centred */
    .bakery .uv-expect-row .uv-expect-col { text-align: center; }
    .bakery .uv-expect-row .uv-expect-col img {
        margin-left: auto;
        margin-right: auto;
        max-width: 240px;
    }

    /* dots below the slider */
    .bakery .uv-expect-row > .container .slick-dots {
        bottom: -38px;
        position: relative;
    }
    .bakery .uv-expect-row > .container .slick-dots li button::before {
        color: var(--uv-ink);
        font-size: 12px;
        opacity: .35;
    }
    .bakery .uv-expect-row > .container .slick-dots li.slick-active button::before {
        color: var(--uv-red);
        opacity: 1;
    }
    /* room for the dots without them colliding with the CTA below */
    .bakery .uv-expect-row { padding-bottom: 44px !important; }

    /* before slick boots, show only the first step so there is no tall stack */
    .bakery .uv-expect-row > .container:not(.slick-initialized) .uv-expect-col:nth-child(n+2) {
        display: none;
    }
}

/* ============================================================================
   46. SLICK DOTS — KILL THE INHERITED LIST PADDING (max-width: 979px)
   ----------------------------------------------------------------------------
   `ul.slick-dots` is still a <ul>, so it inherits the theme's generic list rule
   from style.css:  `.bakery ul:not(.social) { padding-left: 32px }`
   That 32px shifts the dot row off-centre. The same rule also applies the
   theme's list margins. Zeroed for every slick dot row inside the 2026 sections.
   ============================================================================ */

@media (max-width: 979px) {
    .bakery section[class*="uv-"] ul.slick-dots,
    .bakery .uv-expect-row > .container ul.slick-dots,
    .bakery .uv-blog-slider ul.slick-dots {
        list-style: none !important;
        margin-bottom: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        padding: 0 !important;
        text-align: center !important;
        width: 100% !important;
    }
    .bakery section[class*="uv-"] ul.slick-dots li {
        margin: 0 4px !important;
        padding: 0 !important;
    }
}

/* ============================================================================
   47. SEARCH LABEL — NO BLUE BLOCK ON MOBILE (max-width: 979px)
   ----------------------------------------------------------------------------
   Section 41 gives `.location-search-header` a solid blue background so the
   label reads as a pill next to the desktop search bar. Stacked on mobile that
   became a floating blue block behind the text, so it is dropped here.
   The label keeps its own text colour; only the block goes.
   ============================================================================ */

@media (max-width: 979px) {
    .bakery .gmw-form-wrapper .location-search-header,
    .bakery section.uv-map .location-search-header,
    .bakery section.uv-map .outer-wrapper > h3.location-search-header {
        background: none !important;
        background-color: transparent !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* ============================================================================
   48. MAP CTA — INSET FROM THE MAP EDGES ON MOBILE
   ----------------------------------------------------------------------------
   The button ran edge to edge because two rules combine:
     section 27  `.map-button { position: absolute; left: 0; right: 0 }`
     section 11  `body #content a.btn-bt { width: 100% !important }` at <=480px
   So the absolutely-positioned container spans the full map and the pill fills
   it. Insetting the CONTAINER is enough — the pill keeps its 100% width and
   simply has less room, so nothing else needs changing.
   ============================================================================ */

@media (max-width: 979px) {
    .bakery section.uv-map .map-button,
    .bakery .map-button {
        left: 24px !important;
        right: 24px !important;
    }
}

@media (max-width: 480px) {
    .bakery section.uv-map .map-button,
    .bakery .map-button {
        left: 16px !important;
        right: 16px !important;
    }
    /* keep it clear of Leaflet's attribution strip along the bottom edge */
    .bakery section.uv-map .map-button { bottom: 34px !important; }
}

/* ============================================================================
   49. PROMO TILES ON MOBILE — MATCH THE COMP (max-width: 979px)
   ----------------------------------------------------------------------------
   Three differences against the comp:
     1. the red row should begin PARTWAY DOWN the first tile. Section 25 had
        unwound the desktop overlap for mobile (the -230px pull and +150px row
        offset), which left all three tiles sitting on plain white.
     2. the gaps between tiles were far too large
     3. the tiles carried desktop-sized internal padding

   The overlap is done with a GRADIENT on the promo section rather than by
   pulling the red row up with negative margins. Negative margins here depend on
   the stacked tile height, which changes with the copy; a gradient stop is fixed
   and cannot drift. `.uv-whatis` below is the same red, so the two meet
   seamlessly and read as one band.
   ============================================================================ */

@media (max-width: 979px) {

    /* white down to the stop, red from there on — the stop is the single value
       to tune if the red should start higher or lower on the first tile */
    .bakery section.uv-promo {
        background: linear-gradient(
            to bottom,
            #FFFFFF 0,
            #FFFFFF 140px,
            var(--uv-red) 140px,
            var(--uv-red) 100%
        ) !important;
        padding-bottom: 0 !important;
        padding-top: 0 !important;
    }
    /* the red band must continue straight into the row below */
    .bakery section.uv-whatis { padding-top: 26px !important; }

    /* tighter stack */
    .bakery .uv-promo-row { margin: 0 !important; top: 0 !important; }
    .bakery .uv-promo-col {
        margin-bottom: 14px !important;
        padding: 0 !important;
    }
    .bakery .uv-promo-col:last-child { margin-bottom: 0 !important; }

    /* more compact tiles */
    .bakery .uv-promo-tile {
        border-radius: 28px !important;
        padding: 26px 22px 30px !important;
    }
    body #content .uv-promo-tile h3 {
        font-size: 22px !important;
        line-height: 1.18 !important;
        margin-bottom: 18px !important;
    }
    .bakery .uv-promo-tile a.btn-bt {
        margin-left: auto;
        margin-right: auto;
        width: 100% !important;
    }
}