/*
Theme Name: Used Tire Shops Near Me
Theme URI: https://usedtireshops.us/
Author: Used Tire Shops Near Me
Author URI: https://usedtireshops.us/
Description: A fast classic directory theme for listing used tire shops across the United States. Hierarchical state and city archives, ACF-driven listing data, AJAX location filtering, JSON-LD structured data and built-in AdSense slots.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: used-tire-shops
Tags: directory, business-directory, custom-post-type, classic-theme, two-columns, right-sidebar, custom-menu, translation-ready
*/

/* -------------------------------------------------------------------------
   1. Design tokens
   ---------------------------------------------------------------------- */

:root {
    /* Brand — extended from the specified primary #0a9396 */
    --uts-primary:        #0a9396;
    --uts-primary-dark:   #005f73;
    --uts-primary-darker: #001219;
    --uts-primary-light:  #94d2bd;
    --uts-accent:         #ee9b00;
    --uts-accent-dark:    #ca6702;
    --uts-sand:           #e9d8a6;
    --uts-danger:         #ae2012;

    /* Neutrals */
    --uts-ink:      #14212b;
    --uts-body:     #3f5260;
    --uts-muted:    #6b7c88;
    --uts-line:     #e3e9ed;
    --uts-surface:  #ffffff;
    --uts-bg:       #f6f9fa;

    /* Type */
    --uts-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --uts-font-head: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;

    /* Spacing scale (4px base) */
    --uts-s1: .25rem; --uts-s2: .5rem;  --uts-s3: .75rem; --uts-s4: 1rem;
    --uts-s5: 1.5rem; --uts-s6: 2rem;   --uts-s7: 3rem;   --uts-s8: 4rem;
    --uts-s9: 6rem;

    /* Radius & elevation */
    --uts-r-sm: 6px; --uts-r-md: 12px; --uts-r-lg: 18px; --uts-r-full: 999px;
    --uts-shadow-1: 0 1px 2px rgba(0,18,25,.06), 0 1px 3px rgba(0,18,25,.08);
    --uts-shadow-2: 0 4px 12px rgba(0,18,25,.08), 0 2px 4px rgba(0,18,25,.04);
    --uts-shadow-3: 0 12px 32px rgba(0,18,25,.12);

    --uts-container: 1200px;
    --uts-transition: 180ms cubic-bezier(.4,0,.2,1);

    /* ---- Derived tokens -------------------------------------------------
       Roles built from the palette above so no component needs a literal
       colour. Measured contrast against --uts-surface (white), and the rule
       each token is held to:

         --uts-ink         16.4:1  headings; the only safe text on --uts-accent
         --uts-body         8.1:1  body copy AND every piece of small
                                   secondary text — meta, labels, captions,
                                   placeholders, the ad label
         --uts-primary-dark 7.3:1  links, primary button fill, search submit
         --uts-accent-dark  3.9:1  filled stars (a 3:1 non-text graphic)
         --uts-primary      3.7:1  focus ring, large display type, fills.
                                   NEVER small text — it misses 4.5:1
         --uts-muted        4.3:1  DECORATIVE ONLY — the aria-hidden chevrons
                                   and dot separators. Misses 4.5:1, so it
                                   must never carry text a reader needs
         --uts-accent       2.3:1  fills only; pair it with --uts-ink, never
                                   with white

       Two surfaces sit below 3:1 on purpose: --uts-line (a border) and
       --uts-star-empty (the unfilled rating track). Neither carries meaning
       on its own — the rating is printed as a numeral and announced through
       the widget's aria-label — so WCAG 1.4.11 does not apply to them.
       -------------------------------------------------------------------- */
    --uts-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    --uts-link:          var(--uts-primary-dark);
    --uts-link-hover:    var(--uts-primary-darker);
    --uts-focus:         var(--uts-primary);

    --uts-surface-alt:   #eef4f5;
    --uts-primary-tint:  #e4f1f1;
    --uts-accent-tint:   #fbf1da;

    --uts-star:          var(--uts-accent-dark);
    --uts-star-empty:    #ccd6dc;

    --uts-on-dark:       #ffffff;
    --uts-on-dark-soft:  rgba(255,255,255,.80);
    --uts-on-dark-faint: rgba(255,255,255,.60);
    --uts-on-dark-line:  rgba(255,255,255,.16);

    --uts-scrim-top:     rgba(0,18,25,.74);
    --uts-scrim-bottom:  rgba(0,18,25,.88);

    --uts-header-h:      4.5rem;
}

/* -------------------------------------------------------------------------
   2. Reset and base
   ---------------------------------------------------------------------- */

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

/* The browser's own [hidden] { display: none } is specificity (0,1,0), so any
   author rule that sets display on the same element — .uts-cookie{display:flex},
   .uts-to-top{display:inline-flex} — outranks it and the hidden attribute stops
   working. Everything the JS toggles with el.hidden depends on this. */
[hidden] {
    display: none !important;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: var(--uts-s5);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

body {
    margin: 0;
    background: var(--uts-bg);
    color: var(--uts-body);
    font-family: var(--uts-font-sans);
    font-size: 1rem;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--uts-s3);
    color: var(--uts-ink);
    font-family: var(--uts-font-head);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.015em;
    text-wrap: balance;
}

h1 { font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3rem); }
h2 { font-size: clamp(1.55rem, 1.15rem + 1.4vw, 2.25rem); }
h3 { font-size: clamp(1.3rem, 1.1rem + .7vw, 1.65rem); }
h4 { font-size: clamp(1.12rem, 1.02rem + .35vw, 1.3rem); }
h5 { font-size: clamp(1.02rem, .98rem + .15vw, 1.12rem); }
h6 { font-size: 1rem; }

p { margin: 0 0 var(--uts-s4); }

a {
    color: var(--uts-link);
    text-decoration-thickness: 1px;
    text-underline-offset: .16em;
    transition: color var(--uts-transition);
}

a:hover,
a:focus {
    color: var(--uts-link-hover);
}

img,
svg,
iframe {
    max-width: 100%;
    height: auto;
}

figure { margin: 0 0 var(--uts-s5); }

table {
    width: 100%;
    border-collapse: collapse;
}

:focus-visible {
    outline: 3px solid var(--uts-focus);
    outline-offset: 2px;
    border-radius: var(--uts-r-sm);
}

/* -------------------------------------------------------------------------
   3. Accessibility utilities
   ---------------------------------------------------------------------- */

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.uts-skip-link:focus {
    position: fixed !important;
    top: var(--uts-s3);
    left: var(--uts-s3);
    z-index: 999;
    width: auto;
    height: auto;
    padding: var(--uts-s3) var(--uts-s5);
    clip: auto;
    clip-path: none;
    background: var(--uts-primary-darker);
    color: var(--uts-on-dark);
    border-radius: var(--uts-r-md);
    font-weight: 600;
    text-decoration: none;
}

/* -------------------------------------------------------------------------
   4. Icons
   ---------------------------------------------------------------------- */

.uts-icon {
    display: inline-block;
    flex: none;
    vertical-align: -.18em;
}

.uts-star.is-full,
.uts-star.is-half { color: var(--uts-star); }

.uts-star.is-empty { color: var(--uts-star-empty); }

/* -------------------------------------------------------------------------
   5. Layout
   ---------------------------------------------------------------------- */

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

@media (min-width: 640px) {
    .uts-container { padding: 0 var(--uts-s5); }
}

.uts-main {
    display: block;
    min-height: 45vh;
    padding-bottom: var(--uts-s8);
}

.uts-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--uts-s7);
    padding-top: var(--uts-s6);
}

@media (min-width: 900px) {
    .uts-layout {
        grid-template-columns: minmax(0, 1fr) 20rem;
        gap: var(--uts-s6);
    }

    .uts-layout--full {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (min-width: 1200px) {
    .uts-layout { gap: var(--uts-s7); }
}

.uts-layout__main { min-width: 0; }

.uts-section { margin: 0 0 var(--uts-s8); }

.uts-section__head { margin-bottom: var(--uts-s5); }

.uts-section__title { margin-bottom: var(--uts-s2); }

.uts-section__sub {
    margin: 0;
    color: var(--uts-body);
}

.uts-section__more,
.uts-panel__more {
    margin: var(--uts-s5) 0 0;
}

/* -------------------------------------------------------------------------
   6. Header and navigation
   ---------------------------------------------------------------------- */

/* Deliberately NOT sticky: no position: fixed or sticky at any width. */
.uts-header {
    position: relative;
    background: var(--uts-surface);
    border-bottom: 1px solid var(--uts-line);
}

.uts-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--uts-s4);
    min-height: var(--uts-header-h);
}

.uts-brand {
    margin: 0;
    font-family: var(--uts-font-head);
    font-size: 1.0625rem;
    font-weight: 800;
    letter-spacing: -.02em;
}

.uts-brand__link {
    display: inline-flex;
    align-items: center;
    gap: var(--uts-s2);
    color: var(--uts-ink);
    text-decoration: none;
}

.uts-brand__link:hover { color: var(--uts-primary-dark); }

.uts-brand__mark {
    width: 2.25rem;
    height: 2.25rem;
    object-fit: contain;
}

.custom-logo-link img {
    max-height: 3rem;
    width: auto;
}

.uts-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    color: var(--uts-ink);
    background: none;
    border: 1px solid var(--uts-line);
    border-radius: var(--uts-r-md);
    cursor: pointer;
    transition: border-color var(--uts-transition), color var(--uts-transition);
}

.uts-nav-toggle:hover {
    border-color: var(--uts-primary);
    color: var(--uts-primary-dark);
}

.uts-nav-toggle .uts-icon--close,
.uts-nav-toggle[aria-expanded="true"] .uts-icon--menu { display: none; }

.uts-nav-toggle[aria-expanded="true"] .uts-icon--close { display: inline-block; }



/* -------------------------------------------------------------------------
   7. Search form
   ---------------------------------------------------------------------- */

.uts-search {
    display: flex;
    align-items: stretch;
    max-width: 26rem;
}

.uts-search__input {
    flex: 1 1 auto;
    min-width: 0;
    padding: var(--uts-s3) var(--uts-s4);
    background: var(--uts-surface);
    border: 1px solid var(--uts-line);
    border-right: 0;
    border-radius: var(--uts-r-md) 0 0 var(--uts-r-md);
    font: inherit;
    font-size: .9375rem;
    color: var(--uts-ink);
}

.uts-search__input::placeholder { color: var(--uts-body); }

.uts-search__submit {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    padding: 0 var(--uts-s4);
    background: var(--uts-primary-dark);
    color: var(--uts-on-dark);
    border: 1px solid var(--uts-primary-dark);
    border-radius: 0 var(--uts-r-md) var(--uts-r-md) 0;
    cursor: pointer;
    transition: background-color var(--uts-transition), border-color var(--uts-transition);
}

.uts-search__submit:hover {
    background: var(--uts-primary-darker);
    border-color: var(--uts-primary-darker);
}

/* -------------------------------------------------------------------------
   8. Buttons and chips
   ---------------------------------------------------------------------- */

.uts-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--uts-s2);
    padding: var(--uts-s3) var(--uts-s5);
    background: var(--uts-surface);
    color: var(--uts-ink);
    border: 1px solid var(--uts-line);
    border-radius: var(--uts-r-md);
    font-family: var(--uts-font-sans);
    font-size: .9375rem;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--uts-transition), border-color var(--uts-transition), color var(--uts-transition), box-shadow var(--uts-transition);
}

.uts-btn:hover,
.uts-btn:focus {
    border-color: var(--uts-primary);
    color: var(--uts-primary-dark);
}

/* White on --uts-primary-dark is 7.3:1 — the plain --uts-primary would be
   3.9:1 and fail AA at button label sizes. */
.uts-btn--primary {
    background: var(--uts-primary-dark);
    border-color: var(--uts-primary-dark);
    color: var(--uts-on-dark);
}

.uts-btn--primary:hover,
.uts-btn--primary:focus {
    background: var(--uts-primary-darker);
    border-color: var(--uts-primary-darker);
    color: var(--uts-on-dark);
    box-shadow: var(--uts-shadow-2);
}

/* --uts-accent needs dark text: ink on accent is 7.3:1, white is 2.3:1. */
.uts-btn--accent {
    background: var(--uts-accent);
    border-color: var(--uts-accent);
    color: var(--uts-ink);
}

.uts-btn--accent:hover,
.uts-btn--accent:focus {
    background: var(--uts-accent-dark);
    border-color: var(--uts-accent-dark);
    color: var(--uts-on-dark);
}

.uts-btn--ghost {
    background: transparent;
    border-color: var(--uts-line);
    color: var(--uts-ink);
}

.uts-btn--ghost:hover,
.uts-btn--ghost:focus {
    background: var(--uts-surface-alt);
    border-color: var(--uts-primary);
    color: var(--uts-primary-dark);
}

.uts-btn--small {
    padding: var(--uts-s2) var(--uts-s3);
    font-size: .875rem;
}

.uts-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--uts-s1);
    padding: var(--uts-s1) var(--uts-s3);
    background: var(--uts-primary-tint);
    color: var(--uts-primary-dark);
    border-radius: var(--uts-r-full);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
}

.uts-chip--muted {
    background: var(--uts-surface-alt);
    color: var(--uts-body);
}

.uts-chip--status {
    background: var(--uts-accent-tint);
    color: var(--uts-ink);
}

.uts-chip--link { transition: background-color var(--uts-transition), color var(--uts-transition); }

.uts-chip--link:hover,
.uts-chip--link:focus {
    background: var(--uts-primary-dark);
    color: var(--uts-on-dark);
}

.uts-chip__count {
    padding-left: var(--uts-s1);
    border-left: 1px solid currentColor;
    font-weight: 500;
    opacity: .7;
}

.uts-link-more {
    display: inline-flex;
    align-items: center;
    gap: var(--uts-s1);
    font-weight: 600;
    text-decoration: none;
}

.uts-link-more:hover { text-decoration: underline; }

/* -------------------------------------------------------------------------
   9. Breadcrumbs
   ---------------------------------------------------------------------- */

.uts-breadcrumbs {
    padding-top: var(--uts-s4);
    font-size: .875rem;
    color: var(--uts-body);
}

.uts-breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--uts-s1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.uts-breadcrumbs__item {
    display: inline-flex;
    align-items: center;
    gap: var(--uts-s1);
}

.uts-breadcrumbs a {
    color: var(--uts-body);
    text-decoration: none;
}

.uts-breadcrumbs a:hover {
    color: var(--uts-primary-dark);
    text-decoration: underline;
}

.uts-breadcrumbs__sep {
    display: inline-flex;
    color: var(--uts-muted);
}

/* -------------------------------------------------------------------------
   10. Hero and location filter
   ---------------------------------------------------------------------- */

.uts-hero {
    background-color: var(--uts-primary-darker);
    background-image: linear-gradient(180deg, var(--uts-scrim-top), var(--uts-scrim-bottom)), var(--uts-hero-image, none);
    background-position: center;
    background-size: cover;
    color: var(--uts-on-dark);
}

.uts-hero__inner {
    padding-top: var(--uts-s8);
    padding-bottom: var(--uts-s8);
    text-align: center;
}

@media (min-width: 900px) {
    .uts-hero__inner {
        padding-top: var(--uts-s9);
        padding-bottom: var(--uts-s9);
    }
}

.uts-hero__title {
    margin-bottom: var(--uts-s4);
    color: var(--uts-on-dark);
}

.uts-hero__lead {
    max-width: 62ch;
    margin: 0 auto var(--uts-s6);
    font-size: 1.0625rem;
    color: var(--uts-on-dark-soft);
}

.uts-locator {
    max-width: 56rem;
    margin: 0 auto;
    padding: var(--uts-s5);
    background: var(--uts-surface);
    border: 1px solid var(--uts-line);
    border-radius: var(--uts-r-lg);
    box-shadow: var(--uts-shadow-3);
    text-align: left;
    color: var(--uts-body);
}

.uts-locator__title {
    margin: 0 0 var(--uts-s4);
    color: var(--uts-ink);
    font-family: var(--uts-font-head);
    font-weight: 700;
    font-size: 1rem;
}

.uts-locator__row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--uts-s4);
    align-items: end;
}

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

    .uts-locator__field--action { grid-column: 1 / -1; }
}

@media (min-width: 900px) {
    .uts-locator__row { grid-template-columns: 1fr 1fr auto; }

    .uts-locator__field--action { grid-column: auto; }
}

.uts-locator__field { margin: 0; }

.uts-locator__label {
    display: block;
    margin-bottom: var(--uts-s1);
    color: var(--uts-body);
    font-size: .8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.uts-locator__select {
    width: 100%;
    padding: var(--uts-s3) var(--uts-s3);
    background: var(--uts-surface);
    border: 1px solid var(--uts-line);
    border-radius: var(--uts-r-md);
    font: inherit;
    font-size: .9375rem;
    color: var(--uts-ink);
    transition: border-color var(--uts-transition);
}

.uts-locator__select:hover:enabled { border-color: var(--uts-primary); }

.uts-locator__select:disabled {
    background: var(--uts-surface-alt);
    color: var(--uts-body);
    cursor: not-allowed;
}

.uts-locator__field--action .uts-btn { width: 100%; }

.uts-locator__status {
    margin: var(--uts-s3) 0 0;
    min-height: 1.2em;
    font-size: .875rem;
    color: var(--uts-body);
}

.uts-locator__status.is-error { color: var(--uts-danger); }

/* -------------------------------------------------------------------------
   11. Archive headers
   ---------------------------------------------------------------------- */

.uts-archive-head {
    padding: var(--uts-s6) 0 var(--uts-s5);
    background: var(--uts-surface);
    border-bottom: 1px solid var(--uts-line);
}

.uts-archive-head__meta {
    margin: 0 0 var(--uts-s5);
    color: var(--uts-body);
    font-size: .9375rem;
}

.uts-archive-head__desc { margin-bottom: var(--uts-s5); }

.uts-archive-head__search { max-width: 30rem; }

.uts-page-head { margin-bottom: var(--uts-s5); }

.uts-page-title { margin-bottom: var(--uts-s2); }

/* -------------------------------------------------------------------------
   12. Grids and cards

   auto-fill + minmax lets every grid reflow on its own, so the same rule
   works full-width and inside the narrower sidebar layout. Desktop targets
   at the 1200px container: listings 3, terms 4, posts 3.
   ---------------------------------------------------------------------- */

.uts-grid {
    display: grid;
    gap: var(--uts-s5);
    grid-template-columns: 1fr;
}

@media (min-width: 640px) {
    .uts-grid--listings,
    .uts-grid--results { grid-template-columns: repeat(auto-fill, minmax(18.75rem, 1fr)); }

    .uts-grid--posts { grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); }

    .uts-grid--terms { grid-template-columns: repeat(auto-fill, minmax(13.75rem, 1fr)); }
}

.uts-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--uts-surface);
    border: 1px solid var(--uts-line);
    border-radius: var(--uts-r-lg);
    box-shadow: var(--uts-shadow-1);
    transition: transform var(--uts-transition), box-shadow var(--uts-transition), border-color var(--uts-transition);
}

.uts-card:hover {
    transform: translateY(-2px);
    border-color: var(--uts-primary-light);
    box-shadow: var(--uts-shadow-3);
}

.uts-card__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 10;
    background: var(--uts-surface-alt);
    overflow: hidden;
}

.uts-card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--uts-transition);
}

.uts-card:hover .uts-card__media img { transform: scale(1.03); }

.uts-card__status {
    position: absolute;
    top: var(--uts-s3);
    left: var(--uts-s3);
    padding: var(--uts-s1) var(--uts-s3);
    background: var(--uts-primary-darker);
    color: var(--uts-on-dark);
    border-radius: var(--uts-r-full);
    font-size: .75rem;
    font-weight: 600;
}

.uts-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: var(--uts-s2);
    padding: var(--uts-s4) var(--uts-s5) var(--uts-s5);
}

.uts-card__title {
    margin: 0;
    font-size: 1.125rem;
    line-height: 1.3;
}

.uts-card__title a {
    color: var(--uts-ink);
    text-decoration: none;
}

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

.uts-card__address,
.uts-card__excerpt,
.uts-card__meta {
    margin: 0;
    font-size: .9375rem;
    color: var(--uts-body);
}

.uts-card__address {
    display: flex;
    align-items: flex-start;
    gap: var(--uts-s2);
}

.uts-card__address .uts-icon {
    margin-top: .18em;
    color: var(--uts-primary);
}

.uts-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--uts-s2);
    margin-top: auto;
    padding-top: var(--uts-s2);
}

.uts-card--taxonomy {
    padding: var(--uts-s5);
    text-align: left;
}

.uts-card--taxonomy .uts-card__title { font-size: 1.0625rem; }

.uts-card--taxonomy.is-state { border-left: 3px solid var(--uts-primary); }

.uts-card--post .entry-meta {
    margin: 0;
    font-size: .8125rem;
    color: var(--uts-body);
}

.entry-meta__sep { margin: 0 var(--uts-s2); color: var(--uts-muted); }

/* -------------------------------------------------------------------------
   13. Rating
   ---------------------------------------------------------------------- */

.uts-rating {
    display: inline-flex;
    align-items: center;
    gap: var(--uts-s2);
    font-size: .875rem;
    color: var(--uts-body);
}

.uts-stars {
    display: inline-flex;
    align-items: center;
    gap: .0625rem;
}

.uts-rating__value {
    color: var(--uts-ink);
    font-weight: 700;
}

.uts-rating__count { color: var(--uts-body); }

/* -------------------------------------------------------------------------
   14. Single listing
   ---------------------------------------------------------------------- */

.uts-listing__hero {
    position: relative;
    background: var(--uts-primary-darker);
}

.uts-listing__hero-media {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.uts-listing__hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .3;
}

.uts-listing__hero-body {
    position: relative;
    padding-top: var(--uts-s7);
    padding-bottom: var(--uts-s7);
    color: var(--uts-on-dark);
}

.uts-listing__logo {
    width: 4rem;
    height: 4rem;
    margin-bottom: var(--uts-s4);
    padding: var(--uts-s1);
    background: var(--uts-surface);
    border-radius: var(--uts-r-md);
    object-fit: contain;
}

.uts-listing__title {
    margin-bottom: var(--uts-s3);
    color: var(--uts-on-dark);
}

.uts-listing__tagline {
    display: flex;
    flex-wrap: wrap;
    gap: var(--uts-s2);
    margin: 0 0 var(--uts-s4);
}

.uts-listing__rating { margin-bottom: var(--uts-s3); }

.uts-listing__rating .uts-rating,
.uts-listing__rating .uts-rating__value,
.uts-listing__rating .uts-rating__count { color: var(--uts-on-dark); }

.uts-listing__address {
    display: flex;
    align-items: flex-start;
    gap: var(--uts-s2);
    max-width: 60ch;
    margin: 0 0 var(--uts-s5);
    color: var(--uts-on-dark-soft);
}

.uts-listing__address .uts-icon { margin-top: .22em; }

.uts-listing__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--uts-s3);
}

.uts-listing__actions .uts-btn--ghost {
    border-color: var(--uts-on-dark-line);
    color: var(--uts-on-dark);
}

.uts-listing__actions .uts-btn--ghost:hover,
.uts-listing__actions .uts-btn--ghost:focus {
    background: var(--uts-on-dark-line);
    border-color: var(--uts-on-dark);
    color: var(--uts-on-dark);
}

.uts-panel {
    margin: 0 0 var(--uts-s5);
    padding: var(--uts-s5);
    background: var(--uts-surface);
    border: 1px solid var(--uts-line);
    border-radius: var(--uts-r-lg);
}

.uts-panel__title {
    display: flex;
    align-items: center;
    gap: var(--uts-s2);
    margin: 0 0 var(--uts-s4);
    font-size: 1.25rem;
}

.uts-panel__note {
    margin: calc(var(--uts-s2) * -1) 0 var(--uts-s4);
    font-size: .875rem;
    color: var(--uts-body);
}

/* Opening hours */

.uts-hours th,
.uts-hours td {
    padding: var(--uts-s2) 0;
    text-align: left;
    border-bottom: 1px solid var(--uts-line);
    font-size: .9375rem;
}

.uts-hours th {
    width: 45%;
    color: var(--uts-body);
    font-weight: 600;
}

.uts-hours td { color: var(--uts-ink); }

.uts-hours tr:last-child th,
.uts-hours tr:last-child td { border-bottom: 0; }

.uts-hours tr.is-today th,
.uts-hours tr.is-today td {
    color: var(--uts-primary-dark);
    font-weight: 700;
}

/* Attributes */

.uts-attributes {
    display: grid;
    gap: var(--uts-s5);
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.uts-attributes__label {
    margin: 0 0 var(--uts-s2);
    color: var(--uts-body);
    font-size: .8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

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

.uts-attributes__list li {
    display: flex;
    align-items: flex-start;
    gap: var(--uts-s2);
    padding: var(--uts-s1) 0;
    font-size: .9375rem;
}

.uts-attributes__list .uts-icon {
    margin-top: .28em;
    color: var(--uts-primary);
}

/* Popular times */

.uts-popular {
    display: grid;
    gap: var(--uts-s4);
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.uts-popular__label {
    margin: 0 0 var(--uts-s1);
    color: var(--uts-body);
    font-size: .8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.uts-popular__bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 4rem;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--uts-surface-alt);
    border-radius: var(--uts-r-sm);
    overflow: hidden;
}

.uts-popular__bar {
    display: flex;
    flex: 1 1 0;
    align-items: flex-end;
    height: 100%;
}

.uts-popular__bar span {
    display: block;
    width: 100%;
    background: var(--uts-primary);
    border-radius: var(--uts-r-sm) var(--uts-r-sm) 0 0;
}

/* Topics, related places, nearby */

.uts-topics {
    display: flex;
    flex-wrap: wrap;
    gap: var(--uts-s2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.uts-also,
.uts-nearby {
    margin: 0;
    padding: 0;
    list-style: none;
}

.uts-also li,
.uts-nearby__item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--uts-s3);
    padding: var(--uts-s2) 0;
    border-bottom: 1px solid var(--uts-line);
    font-size: .9375rem;
}

.uts-also li:last-child,
.uts-nearby__item:last-child { border-bottom: 0; }

.uts-also__rating,
.uts-nearby__rating {
    flex: none;
    padding: 0 var(--uts-s2);
    background: var(--uts-surface-alt);
    border-radius: var(--uts-r-full);
    color: var(--uts-body);
    font-size: .8125rem;
    font-weight: 700;
}

.uts-map {
    overflow: hidden;
    border-radius: var(--uts-r-md);
    border: 1px solid var(--uts-line);
}

.uts-map iframe { display: block; }

/* Facts sidebar */

.uts-facts__list { margin: 0; }

.uts-facts__list dt {
    margin-top: var(--uts-s3);
    color: var(--uts-body);
    font-size: .78125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.uts-facts__list dt:first-child { margin-top: 0; }

.uts-facts__list dd {
    margin: 0;
    color: var(--uts-ink);
    font-size: .9375rem;
}

.uts-facts__truncate { overflow-wrap: anywhere; }

.uts-facts__terms {
    display: flex;
    flex-wrap: wrap;
    gap: var(--uts-s2);
    margin: var(--uts-s5) 0 0;
    padding-top: var(--uts-s4);
    border-top: 1px solid var(--uts-line);
}

.uts-listing__aside > * + * { margin-top: var(--uts-s5); }

@media (min-width: 900px) {
    .uts-listing__aside {
        position: sticky;
        top: var(--uts-s5);
        align-self: start;
    }
}

/* -------------------------------------------------------------------------
   15. Prose
   ---------------------------------------------------------------------- */

.uts-prose {
    max-width: 72ch;
    color: var(--uts-body);
}

.uts-prose > *:last-child { margin-bottom: 0; }

.uts-prose h2 { margin-top: var(--uts-s7); }
.uts-prose h3 { margin-top: var(--uts-s6); }

.uts-prose ul,
.uts-prose ol {
    margin: 0 0 var(--uts-s4);
    padding-left: var(--uts-s5);
}

.uts-prose li { margin-bottom: var(--uts-s1); }

.uts-prose blockquote {
    margin: var(--uts-s6) 0;
    padding: var(--uts-s1) 0 var(--uts-s1) var(--uts-s5);
    border-left: 3px solid var(--uts-primary);
    color: var(--uts-ink);
    font-size: 1.0625rem;
}

.uts-prose code,
.uts-prose kbd {
    padding: .125rem var(--uts-s1);
    background: var(--uts-surface-alt);
    border-radius: var(--uts-r-sm);
    color: var(--uts-ink);
    font-family: var(--uts-font-mono);
    font-size: .9em;
}

.uts-prose pre {
    padding: var(--uts-s4);
    overflow-x: auto;
    background: var(--uts-primary-darker);
    color: var(--uts-on-dark);
    border-radius: var(--uts-r-md);
    font-family: var(--uts-font-mono);
    font-size: .875rem;
    line-height: 1.6;
}

.uts-prose pre code {
    padding: 0;
    background: none;
    color: inherit;
}

.uts-prose table th,
.uts-prose table td {
    padding: var(--uts-s3);
    border: 1px solid var(--uts-line);
    text-align: left;
}

.uts-prose table th {
    background: var(--uts-surface-alt);
    color: var(--uts-ink);
}

.uts-columns {
    display: grid;
    gap: var(--uts-s6);
    grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
    max-width: none;
}

.uts-columns h3 { margin-top: 0; }

.uts-columns p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------------------
   16. Blog post and comments
   ---------------------------------------------------------------------- */

.uts-post__head { margin-bottom: var(--uts-s5); }

.uts-post__media { margin-bottom: var(--uts-s6); }

.uts-post__media img { border-radius: var(--uts-r-lg); }

.uts-post__footer { margin-top: var(--uts-s6); }

.uts-post__terms {
    margin: 0 0 var(--uts-s2);
    font-size: .9375rem;
    color: var(--uts-body);
}

.uts-postnav {
    margin: var(--uts-s8) 0;
    padding-top: var(--uts-s6);
    border-top: 1px solid var(--uts-line);
}

.uts-postnav .nav-links {
    display: grid;
    gap: var(--uts-s4);
}

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

    .uts-postnav .nav-next { text-align: right; }
}

.uts-postnav a { text-decoration: none; }

.uts-postnav__label {
    display: block;
    color: var(--uts-body);
    font-size: .78125rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.uts-postnav__title { font-weight: 600; }

.uts-comments {
    margin-top: var(--uts-s8);
    padding-top: var(--uts-s6);
    border-top: 1px solid var(--uts-line);
}

.uts-comments__list,
.uts-comments__list .children {
    margin: 0 0 var(--uts-s6);
    padding: 0;
    list-style: none;
}

.uts-comments__list .children { margin: var(--uts-s5) 0 0 var(--uts-s5); }

.uts-comments__list li.comment { margin-bottom: var(--uts-s5); }

.uts-comments__list .comment-body {
    padding: var(--uts-s4) var(--uts-s5);
    background: var(--uts-surface);
    border: 1px solid var(--uts-line);
    border-radius: var(--uts-r-md);
}

.uts-comments__list .comment-author img {
    margin-right: var(--uts-s2);
    border-radius: var(--uts-r-full);
    vertical-align: middle;
}

.uts-comments__list .comment-meta {
    margin-bottom: var(--uts-s3);
    font-size: .875rem;
    color: var(--uts-body);
}

.uts-comment-form__notes {
    font-size: .875rem;
    color: var(--uts-body);
}

.comment-form p { margin-bottom: var(--uts-s4); }

.comment-form label {
    display: block;
    margin-bottom: var(--uts-s1);
    color: var(--uts-ink);
    font-weight: 600;
    font-size: .9375rem;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: var(--uts-s3);
    background: var(--uts-surface);
    border: 1px solid var(--uts-line);
    border-radius: var(--uts-r-md);
    font: inherit;
    font-size: .9375rem;
    color: var(--uts-ink);
}

.comment-form .submit {
    padding: var(--uts-s3) var(--uts-s5);
    background: var(--uts-primary-dark);
    color: var(--uts-on-dark);
    border: 0;
    border-radius: var(--uts-r-md);
    font-family: var(--uts-font-sans);
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--uts-transition);
}

.comment-form .submit:hover { background: var(--uts-primary-darker); }

/* -------------------------------------------------------------------------
   17. Forms and notices
   ---------------------------------------------------------------------- */

.uts-form__row { margin-bottom: var(--uts-s4); }

.uts-form__row label {
    display: block;
    margin-bottom: var(--uts-s1);
    color: var(--uts-ink);
    font-weight: 600;
    font-size: .9375rem;
}

.uts-form__row input,
.uts-form__row textarea,
.uts-form__row select {
    width: 100%;
    padding: var(--uts-s3);
    background: var(--uts-surface);
    border: 1px solid var(--uts-line);
    border-radius: var(--uts-r-md);
    font: inherit;
    font-size: .9375rem;
    color: var(--uts-ink);
    transition: border-color var(--uts-transition);
}

.uts-form__row input:hover,
.uts-form__row textarea:hover { border-color: var(--uts-primary); }

.uts-form__row textarea { resize: vertical; }

.uts-form__row--submit { margin-bottom: 0; }

.uts-required { color: var(--uts-danger); }

/* Honeypot: off-screen, never display:none — some bots skip hidden fields. */
.uts-form__hp {
    position: absolute !important;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.uts-notice {
    margin: 0 0 var(--uts-s5);
    padding: var(--uts-s4) var(--uts-s5);
    border: 1px solid;
    border-radius: var(--uts-r-md);
    font-size: .9375rem;
}

.uts-notice p:last-child,
.uts-notice ul { margin-bottom: 0; }

.uts-notice ul { padding-left: var(--uts-s5); }

.uts-notice--success {
    background: var(--uts-primary-tint);
    border-color: var(--uts-primary-light);
    color: var(--uts-primary-dark);
}

.uts-notice--error {
    background: var(--uts-accent-tint);
    border-color: var(--uts-accent);
    color: var(--uts-danger);
}

/* -------------------------------------------------------------------------
   18. Pagination
   ---------------------------------------------------------------------- */

.uts-pagination { margin-top: var(--uts-s7); }

/* the_posts_pagination() renders nav.uts-pagination > .nav-links > a. */
.uts-pagination .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--uts-s1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.uts-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.625rem;
    height: 2.625rem;
    padding: 0 var(--uts-s3);
    background: var(--uts-surface);
    border: 1px solid var(--uts-line);
    border-radius: var(--uts-r-md);
    color: var(--uts-ink);
    font-size: .9375rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color var(--uts-transition), color var(--uts-transition);
}

.uts-pagination a.page-numbers:hover {
    border-color: var(--uts-primary);
    color: var(--uts-primary-dark);
}

.uts-pagination .page-numbers.current {
    background: var(--uts-primary-dark);
    border-color: var(--uts-primary-dark);
    color: var(--uts-on-dark);
}

.uts-pagination .page-numbers.dots {
    background: none;
    border-color: transparent;
    color: var(--uts-body);
}

/* -------------------------------------------------------------------------
   19. Empty state and 404
   ---------------------------------------------------------------------- */

.uts-none {
    padding: var(--uts-s7) var(--uts-s5);
    background: var(--uts-surface);
    border: 1px dashed var(--uts-line);
    border-radius: var(--uts-r-lg);
    text-align: center;
}

.uts-none__body {
    max-width: 46ch;
    margin: 0 auto;
    color: var(--uts-body);
}

.uts-none__body .uts-search { margin: 0 auto var(--uts-s5); }

.uts-404 {
    padding-top: var(--uts-s7);
    text-align: center;
}

.uts-404__code {
    margin: 0;
    color: var(--uts-primary);
    font-family: var(--uts-font-head);
    font-size: clamp(3.5rem, 2rem + 8vw, 6rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.04em;
}

.uts-404__lead {
    max-width: 52ch;
    margin: 0 auto var(--uts-s6);
    color: var(--uts-body);
}

.uts-404__search {
    display: flex;
    justify-content: center;
    margin-bottom: var(--uts-s6);
}

.uts-404 .uts-locator { margin-bottom: var(--uts-s8); }

.uts-404 .uts-section { text-align: left; }

/* -------------------------------------------------------------------------
   20. Sidebar and widgets
   ---------------------------------------------------------------------- */

.uts-sidebar > * + * { margin-top: var(--uts-s5); }

.widget {
    padding: var(--uts-s5);
    background: var(--uts-surface);
    border: 1px solid var(--uts-line);
    border-radius: var(--uts-r-lg);
    font-size: .9375rem;
    color: var(--uts-body);
}

.widget-title {
    margin: 0 0 var(--uts-s4);
    color: var(--uts-body);
    font-size: .875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

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

.widget li {
    padding: var(--uts-s1) 0;
    border-bottom: 1px solid var(--uts-line);
}

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

.widget a { text-decoration: none; }

.widget a:hover { text-decoration: underline; }

@media (min-width: 900px) {
    .uts-sidebar {
        position: sticky;
        top: var(--uts-s5);
        align-self: start;
    }
}

/* -------------------------------------------------------------------------
   22. Footer, back-to-top, cookie bar
   ---------------------------------------------------------------------- */

.uts-footer {
    padding: var(--uts-s8) 0 var(--uts-s6);
    background: var(--uts-primary-darker);
    color: var(--uts-on-dark-soft);
    font-size: .9375rem;
}

.uts-footer a {
    color: var(--uts-on-dark);
    text-decoration: none;
}

.uts-footer a:hover {
    color: var(--uts-primary-light);
    text-decoration: underline;
}

.uts-footer__widgets {
    display: grid;
    gap: var(--uts-s6);
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    margin-bottom: var(--uts-s7);
}

.uts-footer__widgets .widget {
    padding: 0;
    background: none;
    border: 0;
    color: inherit;
}

.uts-footer__widgets .widget li { border-bottom-color: var(--uts-on-dark-line); }

.uts-footer__heading,
.uts-footer__widgets .widget-title {
    color: var(--uts-on-dark);
    font-size: .875rem;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.uts-footer__state-list {
    display: grid;
    gap: var(--uts-s1) var(--uts-s5);
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    margin: 0 0 var(--uts-s7);
    padding: 0;
    list-style: none;
}

.uts-footer__bottom {
    display: grid;
    gap: var(--uts-s5);
    padding-top: var(--uts-s6);
    border-top: 1px solid var(--uts-on-dark-line);
}

@media (min-width: 900px) {
    .uts-footer__bottom {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
    }
}

.uts-footer__copy { margin: 0 0 var(--uts-s1); }

.uts-footer__disclaimer {
    max-width: 70ch;
    margin: 0;
    font-size: .875rem;
    color: var(--uts-on-dark-faint);
}

.uts-footer__nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--uts-s4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.uts-to-top {
    position: fixed;
    right: var(--uts-s4);
    bottom: var(--uts-s4);
    z-index: 30;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.875rem;
    height: 2.875rem;
    background: var(--uts-primary-dark);
    color: var(--uts-on-dark);
    border: 0;
    border-radius: var(--uts-r-full);
    cursor: pointer;
    box-shadow: var(--uts-shadow-3);
    transition: background-color var(--uts-transition), transform var(--uts-transition);
}

.uts-to-top:hover {
    background: var(--uts-primary);
    transform: translateY(-2px);
}

/* -------------------------------------------------------------------------
   23. WordPress core classes
   ---------------------------------------------------------------------- */

.alignleft {
    float: left;
    margin: .3em var(--uts-s5) var(--uts-s4) 0;
}

.alignright {
    float: right;
    margin: .3em 0 var(--uts-s4) var(--uts-s5);
}

.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.alignwide {
    width: auto;
    max-width: calc(var(--uts-container) - var(--uts-s8));
}

.alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.wp-caption { max-width: 100%; }

.wp-caption-text,
.wp-block-image figcaption {
    margin-top: var(--uts-s2);
    color: var(--uts-body);
    font-size: .875rem;
    text-align: center;
}

.sticky .uts-card { border-color: var(--uts-primary-light); }

.bypostauthor > .comment-body { border-left: 3px solid var(--uts-primary); }

.gallery {
    display: grid;
    gap: var(--uts-s3);
    grid-template-columns: repeat(auto-fill, minmax(8.75rem, 1fr));
    margin-bottom: var(--uts-s5);
}

.gallery-item { margin: 0; }

.gallery-caption {
    font-size: .8125rem;
    color: var(--uts-body);
}

.uts-page-links {
    margin: var(--uts-s5) 0;
    font-weight: 600;
}

.uts-page-links a { padding: 0 var(--uts-s1); }

.wp-block-button__link {
    background: var(--uts-primary-dark);
    border-radius: var(--uts-r-md);
    color: var(--uts-on-dark);
}

.wp-block-separator {
    border: 0;
    border-top: 1px solid var(--uts-line);
    margin: var(--uts-s7) auto;
}

.wp-block-pullquote,
.wp-block-quote {
    border-left: 3px solid var(--uts-primary);
    padding-left: var(--uts-s5);
}

/* Editor: keep the writing column in step with the front end. */
.editor-styles-wrapper {
    background: var(--uts-bg);
    color: var(--uts-body);
    font-family: var(--uts-font-sans);
    font-size: 1rem;
    line-height: 1.7;
}

.editor-styles-wrapper h1,
.editor-styles-wrapper h2,
.editor-styles-wrapper h3,
.editor-styles-wrapper h4,
.editor-styles-wrapper h5,
.editor-styles-wrapper h6 {
    font-family: var(--uts-font-head);
    color: var(--uts-ink);
    letter-spacing: -.015em;
    line-height: 1.2;
}

/* -------------------------------------------------------------------------
   24. Formatter output
   ---------------------------------------------------------------------- */

/* Current-status badge. The spec asks for a green pill; the palette's green
   is --uts-primary, so the tint pairing carries it at 6.3:1. */
.uts-status {
    display: inline-flex;
    align-items: center;
    gap: var(--uts-s2);
    margin: 0 0 var(--uts-s4);
    padding: var(--uts-s1) var(--uts-s3);
    border-radius: var(--uts-r-full);
    font-size: .8125rem;
    font-weight: 700;
}

.uts-status::before {
    content: "";
    width: .5rem;
    height: .5rem;
    border-radius: var(--uts-r-full);
    background: currentColor;
}

.uts-status--open {
    background: var(--uts-primary-tint);
    color: var(--uts-primary-dark);
}

.uts-status--closed {
    background: var(--uts-surface-alt);
    color: var(--uts-body);
}

/* Available / unavailable attributes */

.uts-attributes__list li.is-available .uts-icon { color: var(--uts-primary); }

.uts-attributes__list li.is-unavailable {
    color: var(--uts-muted);
    text-decoration: line-through;
    text-decoration-color: var(--uts-line);
}

.uts-attributes__list li.is-unavailable .uts-icon {
    color: var(--uts-muted);
    text-decoration: none;
}

/* Contact list */

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

.uts-contact__item {
    display: flex;
    align-items: baseline;
    gap: var(--uts-s2);
    padding: var(--uts-s2) 0;
    border-bottom: 1px solid var(--uts-line);
    font-size: .9375rem;
    overflow-wrap: anywhere;
}

.uts-contact__item:last-child { border-bottom: 0; }

.uts-contact__item .uts-icon { color: var(--uts-primary); }

.uts-facts__contact {
    margin-top: var(--uts-s5);
    padding-top: var(--uts-s4);
    border-top: 1px solid var(--uts-line);
}

.uts-facts__subtitle {
    margin: 0 0 var(--uts-s2);
    color: var(--uts-body);
    font-size: .78125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* Rating separator */

.uts-rating__sep {
    color: var(--uts-muted);
    margin: 0 calc(var(--uts-s1) * -1);
}

/* Related-search chips are not links, so they get no hover affordance. */
.uts-topics--plain .uts-chip { cursor: default; }

/* Locator without the AJAX city select */

@media (min-width: 900px) {
    .uts-locator--simple .uts-locator__row { grid-template-columns: 1fr auto; }
}

/* -------------------------------------------------------------------------
   25. Phase 6 — header, footer, cards, blog
   ---------------------------------------------------------------------- */

/* Top bar --------------------------------------------------------------- */

.uts-topbar {
    background: var(--uts-primary-darker);
    color: var(--uts-on-dark-soft);
    font-size: .8125rem;
}

.uts-topbar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--uts-s2);
    min-height: 2.25rem;
    padding-top: var(--uts-s1);
    padding-bottom: var(--uts-s1);
}

.uts-topbar p { margin: 0; }

.uts-topbar__phone {
    display: inline-flex;
    align-items: center;
    gap: var(--uts-s1);
    font-weight: 600;
}

.uts-topbar a { color: var(--uts-on-dark); text-decoration: none; }

.uts-topbar a:hover { color: var(--uts-primary-light); text-decoration: underline; }

/* Header actions -------------------------------------------------------- */

.uts-header__actions {
    display: flex;
    align-items: center;
    gap: var(--uts-s2);
    margin-left: auto;
}

.uts-search-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    color: var(--uts-ink);
    background: none;
    border: 1px solid var(--uts-line);
    border-radius: var(--uts-r-md);
    cursor: pointer;
    transition: border-color var(--uts-transition), color var(--uts-transition);
}

.uts-search-toggle:hover {
    border-color: var(--uts-primary);
    color: var(--uts-primary-dark);
}

.uts-search-toggle .uts-icon--close,
.uts-search-toggle[aria-expanded="true"] .uts-icon--search { display: none; }

.uts-search-toggle[aria-expanded="true"] .uts-icon--close { display: inline-block; }

.uts-header__search {
    padding: var(--uts-s4) 0;
    background: var(--uts-surface-alt);
    border-top: 1px solid var(--uts-line);
}

.uts-header__search .uts-search { max-width: 100%; }

/* Slide-in navigation panel --------------------------------------------- */

.uts-nav {
    position: fixed;
    inset: 0 0 0 auto;
    z-index: 60;
    width: min(20rem, 88vw);
    visibility: hidden;
    transform: translateX(100%);
    transition: transform var(--uts-transition), visibility var(--uts-transition);
    background: var(--uts-surface);
    box-shadow: var(--uts-shadow-3);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.uts-nav.is-open {
    visibility: visible;
    transform: translateX(0);
}

.uts-nav__panel { padding: var(--uts-s6) var(--uts-s5); }

body.uts-scroll-locked {
    position: fixed;
    width: 100%;
    overflow: hidden;
}

.uts-nav__list,
.uts-nav__list-wrap ul {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.uts-nav__list li { position: relative; }

.uts-nav__list a,
.uts-nav__list-wrap a {
    display: block;
    padding: var(--uts-s3) 0;
    padding-right: var(--uts-s7);
    color: var(--uts-ink);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid var(--uts-line);
}

.uts-nav__list a:hover,
.uts-nav__list .current-menu-item > a,
.uts-nav__list .current_page_item > a {
    color: var(--uts-primary-dark);
}

.uts-submenu-toggle {
    position: absolute;
    top: var(--uts-s2);
    right: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    color: var(--uts-body);
    background: none;
    border: 1px solid transparent;
    border-radius: var(--uts-r-sm);
    cursor: pointer;
    transition: transform var(--uts-transition), color var(--uts-transition);
}

.uts-submenu-toggle:hover { color: var(--uts-primary-dark); }

.uts-submenu-toggle[aria-expanded="true"] { transform: rotate(180deg); }

.uts-nav__list .sub-menu {
    display: none;
    margin: 0 0 0 var(--uts-s4);
    padding: 0;
    list-style: none;
}

.uts-nav__list li.is-open > .sub-menu { display: block; }

.uts-nav__list .sub-menu a { font-weight: 500; }

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

    .uts-nav {
        position: static;
        width: auto;
        visibility: visible;
        transform: none;
        background: none;
        box-shadow: none;
        overflow: visible;
    }

    .uts-nav__panel { padding: 0; }

    .uts-nav__list,
    .uts-nav__list-wrap ul {
        flex-direction: row;
        align-items: center;
        gap: var(--uts-s5);
    }

    .uts-nav__list a,
    .uts-nav__list-wrap a {
        padding: var(--uts-s2) 0;
        padding-right: 0;
        border-bottom: 0;
    }

    .uts-nav__list .menu-item-has-children > a { padding-right: var(--uts-s5); }

    .uts-submenu-toggle {
        top: 50%;
        width: 1.5rem;
        height: 1.5rem;
        margin-top: -.75rem;
    }

    .uts-submenu-toggle[aria-expanded="true"] { transform: translateY(0) rotate(180deg); }

    .uts-nav__list .sub-menu {
        position: absolute;
        top: 100%;
        left: calc(var(--uts-s3) * -1);
        z-index: 20;
        min-width: 13rem;
        margin: 0;
        padding: var(--uts-s2) var(--uts-s3);
        background: var(--uts-surface);
        border: 1px solid var(--uts-line);
        border-radius: var(--uts-r-md);
        box-shadow: var(--uts-shadow-2);
    }

    .uts-nav__list .sub-menu li { position: static; }
}

/* Hero ------------------------------------------------------------------ */

.uts-hero {
    min-height: max(500px, min(70vh, 640px));
    display: flex;
    align-items: center;
    background-color: var(--uts-primary-darker);
    background-image: linear-gradient(180deg, var(--uts-scrim-top), var(--uts-scrim-bottom)), var(--uts-hero-image, none);
    background-position: center;
    background-size: cover;
    color: var(--uts-on-dark);
}

.uts-hero__inner { width: 100%; }

/* Parallax on desktop only: background-attachment: fixed is janky or
   outright broken on iOS Safari, so small screens get a static background. */
@media (min-width: 900px) {
    .uts-hero { background-attachment: fixed; }
}

@media (prefers-reduced-motion: reduce) {
    .uts-hero { background-attachment: scroll; }
}

.uts-hero__cta { margin: var(--uts-s6) 0 0; }

.uts-btn--large {
    padding: var(--uts-s4) var(--uts-s6);
    font-size: 1.0625rem;
}

.uts-btn--block { width: 100%; }

/* Search section -------------------------------------------------------- */

.uts-search-section {
    margin-top: calc(var(--uts-s7) * -1);
    position: relative;
    z-index: 5;
}

.uts-search-section__inner {
    padding: var(--uts-s6);
    background: var(--uts-surface);
    border: 1px solid var(--uts-line);
    border-radius: var(--uts-r-lg);
    box-shadow: var(--uts-shadow-3);
}

.uts-search-section__title { margin-bottom: var(--uts-s4); }

.uts-locator__field { position: relative; }

.uts-locator__spinner {
    position: absolute;
    right: var(--uts-s3);
    bottom: .95rem;
    width: 1rem;
    height: 1rem;
    border: 2px solid var(--uts-line);
    border-top-color: var(--uts-primary);
    border-radius: var(--uts-r-full);
    animation: uts-spin .7s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
    .uts-locator__spinner { animation: none; }
}

.uts-locator--noscript { margin-top: var(--uts-s4); }

/* Grids ----------------------------------------------------------------- */

@media (min-width: 640px) {
    /* Cities: 4 across at 1200, 2 at 900, 1 below 640. */
    .uts-grid--cities { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }

    /* States: 3 across at 1200. */
    .uts-grid--states { grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); }

    /* Popular listings: 4 across at 1200. */
    .uts-grid--popular { grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }

    /* Nearby: 2 across on desktop, 1 on mobile. */
    .uts-grid--nearby { grid-template-columns: repeat(auto-fill, minmax(24rem, 1fr)); }
}

/* Stretched-link cards --------------------------------------------------- */

.uts-card { position: relative; }

.uts-card__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
}

/* Anything interactive that is not the stretched link sits above it. */
.uts-card__website,
.uts-card__category a,
.uts-card__rating {
    position: relative;
    z-index: 2;
}

.uts-card:focus-within {
    border-color: var(--uts-primary);
    box-shadow: var(--uts-shadow-3);
}

/* The stretched link keeps its own focus ring around the title text, so
   the indicator never depends on :has() being supported. */
.uts-card:focus-within {
    outline: 2px solid var(--uts-focus);
    outline-offset: 3px;
}

/* 3:2 for listing and city cards. */
.uts-card--listing .uts-card__media,
.uts-card--nearby .uts-card__media,
.uts-card--taxonomy.has-image .uts-card__media {
    aspect-ratio: 3 / 2;
}

.uts-card__website {
    display: inline-flex;
    align-items: center;
    gap: var(--uts-s1);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
}

.uts-card__website:hover { text-decoration: underline; }

.uts-card__category {
    margin: 0;
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.uts-card__category a {
    color: var(--uts-primary-dark);
    text-decoration: none;
}

.uts-card__chevron {
    position: absolute;
    top: var(--uts-s5);
    right: var(--uts-s5);
    display: inline-flex;
    color: var(--uts-muted);
    transition: transform var(--uts-transition), color var(--uts-transition);
}

.uts-card--taxonomy.has-image .uts-card__chevron { top: auto; bottom: var(--uts-s5); }

.uts-card:hover .uts-card__chevron {
    transform: translateX(3px);
    color: var(--uts-primary-dark);
}

.uts-card--taxonomy .uts-card__body { padding: var(--uts-s5); padding-right: var(--uts-s7); }

.uts-card--taxonomy.has-image { padding: 0; }

.uts-card--lead .uts-card__title { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); }

@media (min-width: 900px) {
    .uts-card--lead {
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        align-items: stretch;
    }

    .uts-card--lead .uts-card__media { height: 100%; aspect-ratio: auto; }

    .uts-card--lead .uts-card__body { padding: var(--uts-s6); justify-content: center; }
}

.uts-lead { margin-bottom: var(--uts-s6); }

/* A-Z jump bar ----------------------------------------------------------- */

.uts-azbar {
    position: relative;
    margin-bottom: var(--uts-s6);
    padding: var(--uts-s3) var(--uts-s4);
    background: var(--uts-surface);
    border: 1px solid var(--uts-line);
    border-radius: var(--uts-r-md);
}

.uts-azbar__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--uts-s1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.uts-azbar__list a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    border-radius: var(--uts-r-sm);
    color: var(--uts-primary-dark);
    font-weight: 700;
    text-decoration: none;
}

.uts-azbar__list a:hover {
    background: var(--uts-primary-tint);
}

.uts-letter-group__title {
    padding-bottom: var(--uts-s2);
    border-bottom: 2px solid var(--uts-line);
    font-size: 1.25rem;
}

/* Back links ------------------------------------------------------------- */

.uts-backlink { margin: var(--uts-s6) 0 var(--uts-s7); }

.uts-backlink a {
    display: inline-flex;
    align-items: center;
    gap: var(--uts-s1);
    font-weight: 600;
    text-decoration: none;
}

.uts-backlink a:hover { text-decoration: underline; }

.uts-backlink__icon { transform: rotate(180deg); }

.uts-backlink--center { text-align: center; }

.uts-backlink--center a { text-decoration: none; }

/* Listing page ----------------------------------------------------------- */

.uts-listing__head { padding-top: var(--uts-s6); }

.uts-listing__figure {
    margin: 0 0 var(--uts-s5);
    overflow: hidden;
    border-radius: var(--uts-r-lg);
    aspect-ratio: 16 / 9;
}

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

.uts-layout--listing { padding-top: var(--uts-s5); }

.uts-facts__rating {
    padding-bottom: var(--uts-s4);
    margin-bottom: var(--uts-s4);
    border-bottom: 1px solid var(--uts-line);
}

.uts-facts__block + .uts-facts__block {
    margin-top: var(--uts-s5);
    padding-top: var(--uts-s4);
    border-top: 1px solid var(--uts-line);
}

.uts-facts__address,
.uts-facts__phone {
    display: flex;
    align-items: flex-start;
    gap: var(--uts-s2);
    margin: 0 0 var(--uts-s3);
    font-size: .9375rem;
}

.uts-facts__address .uts-icon,
.uts-facts__phone .uts-icon {
    margin-top: .2em;
    color: var(--uts-primary);
}

.uts-price {
    display: inline-flex;
    gap: .1em;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.uts-price__mark.is-on { color: var(--uts-primary-dark); }

.uts-price__mark.is-off { color: var(--uts-star-empty); }

.uts-nearby-section { margin-top: var(--uts-s7); }

/* Blog post -------------------------------------------------------------- */

.uts-post-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--uts-s2) var(--uts-s4);
    margin: 0;
    font-size: .875rem;
    color: var(--uts-body);
}

.uts-post-meta__author {
    display: inline-flex;
    align-items: center;
    gap: var(--uts-s2);
    font-weight: 600;
}

.uts-post-meta__avatar { border-radius: var(--uts-r-full); }

.uts-post-meta a { color: var(--uts-body); text-decoration: none; }

.uts-post-meta a:hover { color: var(--uts-primary-dark); text-decoration: underline; }

.uts-post-meta__updated { font-style: italic; }

.uts-post__media {
    margin-bottom: var(--uts-s6);
    overflow: hidden;
    border-radius: var(--uts-r-lg);
}

.uts-post__media figcaption {
    margin-top: var(--uts-s2);
    font-size: .875rem;
    color: var(--uts-body);
    text-align: center;
}

.uts-post__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--uts-s2);
    margin: var(--uts-s6) 0;
}

.uts-post__tags a {
    display: inline-flex;
    padding: var(--uts-s1) var(--uts-s3);
    background: var(--uts-surface-alt);
    border-radius: var(--uts-r-full);
    color: var(--uts-body);
    font-size: .8125rem;
    text-decoration: none;
}

.uts-post__tags a:hover { background: var(--uts-primary-tint); color: var(--uts-primary-dark); }

/* Table of contents ------------------------------------------------------ */

.uts-toc {
    margin: var(--uts-s6) 0;
    padding: var(--uts-s5);
    background: var(--uts-surface-alt);
    border-left: 3px solid var(--uts-primary);
    border-radius: var(--uts-r-md);
}

.uts-toc__title {
    margin: 0 0 var(--uts-s3);
    font-size: .875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--uts-body);
}

.uts-toc__list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: uts-toc;
}

.uts-toc__item { margin-bottom: var(--uts-s1); }

.uts-toc__item.is-level-3 { padding-left: var(--uts-s5); font-size: .9375rem; }

.uts-toc__item a { text-decoration: none; }

.uts-toc__item a:hover { text-decoration: underline; }

/* Responsive tables in prose */
.uts-table-wrap {
    overflow-x: auto;
    margin-bottom: var(--uts-s5);
    -webkit-overflow-scrolling: touch;
}

.uts-table-wrap table { margin-bottom: 0; }

/* Share links ------------------------------------------------------------ */

.uts-share {
    margin: var(--uts-s7) 0;
    padding: var(--uts-s5) 0;
    border-top: 1px solid var(--uts-line);
    border-bottom: 1px solid var(--uts-line);
}

.uts-share__title {
    margin: 0 0 var(--uts-s3);
    font-size: .875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--uts-body);
}

.uts-share__list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--uts-s2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.uts-share__link {
    display: inline-flex;
    align-items: center;
    gap: var(--uts-s1);
    padding: var(--uts-s2) var(--uts-s4);
    background: var(--uts-surface);
    border: 1px solid var(--uts-line);
    border-radius: var(--uts-r-full);
    color: var(--uts-ink);
    font: inherit;
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: border-color var(--uts-transition), color var(--uts-transition);
}

.uts-share__link:hover {
    border-color: var(--uts-primary);
    color: var(--uts-primary-dark);
}

.uts-share__link.is-copied {
    border-color: var(--uts-primary-dark);
    color: var(--uts-primary-dark);
}

/* Author box ------------------------------------------------------------- */

.uts-author {
    display: flex;
    gap: var(--uts-s4);
    margin: var(--uts-s6) 0;
    padding: var(--uts-s5);
    background: var(--uts-surface);
    border: 1px solid var(--uts-line);
    border-radius: var(--uts-r-lg);
}

.uts-author__avatar {
    flex: none;
    border-radius: var(--uts-r-full);
}

.uts-author__name { margin: 0 0 var(--uts-s1); font-size: 1.05rem; }

.uts-author__name a { text-decoration: none; }

.uts-author__bio { margin: 0; font-size: .9375rem; }

/* Sidebar widgets -------------------------------------------------------- */

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

.uts-recent__item {
    padding: var(--uts-s2) 0;
    border-bottom: 1px solid var(--uts-line);
}

.uts-recent__item:last-child { border-bottom: 0; }

.uts-recent__item a { display: block; font-weight: 600; text-decoration: none; }

.uts-recent__item time {
    display: block;
    font-size: .8125rem;
    color: var(--uts-body);
}

.uts-count {
    float: right;
    color: var(--uts-body);
    font-size: .8125rem;
}

.uts-tagcloud {
    display: flex;
    flex-wrap: wrap;
    gap: var(--uts-s2);
    margin: 0;
}

/* Footer ----------------------------------------------------------------- */

.uts-footer__columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--uts-s6);
    padding-bottom: var(--uts-s6);
}

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

@media (min-width: 900px) {
    .uts-footer__columns { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}

.uts-footer__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--uts-s2);
    margin-bottom: var(--uts-s3);
    color: var(--uts-on-dark);
    font-family: var(--uts-font-head);
    font-size: 1.0625rem;
    font-weight: 800;
    text-decoration: none;
}

.uts-footer__about {
    margin: 0;
    max-width: 40ch;
    font-size: .875rem;
    color: var(--uts-on-dark-soft);
}

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

.uts-footer__list li { padding: var(--uts-s1) 0; }

.uts-footer__list--contact li {
    display: flex;
    align-items: center;
    gap: var(--uts-s2);
}

.uts-footer__list--contact .uts-icon { color: var(--uts-primary-light); }

.uts-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--uts-s3);
    padding-top: var(--uts-s5);
    border-top: 1px solid var(--uts-on-dark-line);
}

.uts-footer__bottom-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--uts-s4);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .875rem;
}

.uts-footer__disclaimer {
    max-width: 80ch;
    margin: var(--uts-s5) 0 0;
    font-size: .8125rem;
    color: var(--uts-on-dark-faint);
}

/* Contact form ----------------------------------------------------------- */

.uts-form__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 var(--uts-s4);
}

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

.uts-form__consent label {
    display: flex;
    align-items: flex-start;
    gap: var(--uts-s2);
    font-weight: 400;
    font-size: .9375rem;
}

.uts-form__consent input {
    width: auto;
    margin-top: .25em;
}

.uts-optional {
    color: var(--uts-body);
    font-weight: 400;
    font-size: .8125rem;
}

/* -------------------------------------------------------------------------
   26. Phase 7-8 — ads, cookie bar, back to top
   ---------------------------------------------------------------------- */

/* Ad slots ---------------------------------------------------------------
   Generous whitespace and a label keep units visibly separate from content,
   and min-height on the frame reserves the box so nothing shifts. */

.uts-ad {
    display: block;
    margin: var(--uts-s7) 0;
    padding: var(--uts-s4) 0;
    border-top: 1px solid var(--uts-line);
    border-bottom: 1px solid var(--uts-line);
    text-align: center;
}

.uts-ad__label {
    display: block;
    margin-bottom: var(--uts-s2);
    color: var(--uts-body);
    font-size: .6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.uts-ad__frame {
    display: block;
    width: 100%;
}

.uts-ad--header,
.uts-ad--footer {
    max-width: var(--uts-container);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--uts-s4);
    padding-right: var(--uts-s4);
}

/* An in-grid unit spans the full row rather than posing as a card. */
.uts-ad--between_cards {
    grid-column: 1 / -1;
    margin: var(--uts-s4) 0;
}

.uts-ad--sidebar {
    margin: var(--uts-s5) 0 0;
}

/* Back to top ------------------------------------------------------------ */

/* Zero-height sentinel the IntersectionObserver watches; it must not affect
   layout in any way. */
.uts-scroll-sentinel {
    position: absolute;
    top: 400px;
    left: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
    visibility: hidden;
}

/* Cookie bar ------------------------------------------------------------- */

.uts-cookie {
    position: fixed;
    left: var(--uts-s4);
    right: var(--uts-s4);
    bottom: var(--uts-s4);
    z-index: 50;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--uts-s4);
    max-width: 48rem;
    margin: 0 auto;
    padding: var(--uts-s4) var(--uts-s5);
    background: var(--uts-surface);
    border: 1px solid var(--uts-line-strong, var(--uts-line));
    border-radius: var(--uts-r-lg);
    box-shadow: var(--uts-shadow-3);
}

.uts-cookie__text {
    flex: 1 1 18rem;
    margin: 0;
    font-size: .875rem;
    color: var(--uts-body);
}

.uts-cookie__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--uts-s2);
}

/* While the bar is visible, keep it clear of the footer and lift the
   back-to-top button above it. */
body.uts-has-cookie-bar { padding-bottom: 8.5rem; }

body.uts-has-cookie-bar .uts-to-top { bottom: 9.5rem; }

@media (min-width: 640px) {
    body.uts-has-cookie-bar { padding-bottom: 6.5rem; }

    body.uts-has-cookie-bar .uts-to-top { bottom: 7.5rem; }
}