/* =========================================================
   Safaris — Marketplace landing, safari card, filter panel
   Companion sheet to ato-public.css. Enqueue AFTER it.

   Rules obeyed:
   - Zero hardcoded palette colours. Every colour is a
     --ato-* token, a green-keyed rgba(var(--shadow),...) tint or
     plain white for text sitting on the dark hero scrim.
   - Radii stay inside 3-14px (--ato-radius-sm .. -xl).
   - Container 1180px / 28px side padding (matches .pp-wrap).
   - Uppercase tracking labels never drop below 11px.
   ========================================================= */

/* ---------------------------------------------------------
   0. Marketplace scope + shared furniture
   --------------------------------------------------------- */

.ato-mk {
    font-family: var(--ato-font-body);
    color: var(--ato-text-main);
    font-size: var(--ato-fs-base);
    line-height: 1.65;
    background: var(--ato-bg-white);
}

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

/* Same measurements as .ato-container / theme .pp-wrap */
.ato-mk-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 28px;
}

.ato-mk-eyebrow {
    display: block;
    font-family: var(--ato-font-label);
    font-size: var(--ato-fs-label);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ato-secondary);
    margin: 0 0 14px;
}

/* ---------------------------------------------------------
   1. Hero search block
   --------------------------------------------------------- */

.ato-mk-hero {
    position: relative;
    isolation: isolate;
    padding: 88px 0 72px;
    overflow: hidden;
}

.ato-mk-hero-media {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* Dark scrim so white type stays legible over any photograph.
   Built on --olive-dark (12,51,43), never a neutral grey. */
.ato-mk-hero-scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg,
            rgba(var(--shadow), 0.72) 0%,
            rgba(var(--shadow), 0.58) 45%,
            rgba(var(--shadow), 0.80) 100%);
}

.ato-mk-hero-inner {
    text-align: center;
}

.ato-mk-hero h1,
.ato-mk-hero-title {
    font-family: var(--ato-font-heading);
    font-weight: 400;
    font-size: clamp(30px, 4.6vw, 53px);
    line-height: 1.12;
    letter-spacing: -0.005em;
    color: #fff;
    margin: 0 0 16px;
}

.ato-mk-hero-sub {
    font-family: var(--ato-font-body);
    font-size: var(--ato-fs-reading);
    line-height: 1.6;
    color: var(--ato-on-dark);
    max-width: 640px;
    margin: 0 auto 30px;
}

/* --- Segmented toggle: Safaris / Operators --- */

.ato-mk-toggle {
    display: inline-flex;
    padding: 4px;
    margin: 0 auto 26px;
    background: rgba(var(--shadow), 0.55);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--ato-radius-lg);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.ato-mk-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 132px;
    padding: 10px 26px;
    border: none;
    border-radius: var(--ato-radius-md);
    background: transparent;
    color: #fff;
    font-family: var(--ato-font-label);
    font-size: var(--ato-fs-label);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.22s ease, color 0.22s ease;
}

.ato-mk-toggle-btn:hover,
.ato-mk-toggle-btn:focus-visible {
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    text-decoration: none;
}

.ato-mk-toggle-btn.is-active,
.ato-mk-toggle-btn.is-active:hover {
    background: var(--ato-primary);
    color: #fff;
    box-shadow: var(--ato-shadow-sm);
}

/* --- Horizontal search bar --- */

.ato-mk-search {
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: 1060px;
    margin: 0 auto;
    background: var(--ato-bg-white);
    border: 1px solid var(--ato-border-color);
    border-radius: var(--ato-radius-lg);
    box-shadow: var(--ato-shadow-lg);
    overflow: hidden;
}

/* Tap target: the field's 14/18 padding and its 4px gap are now carried as
   custom properties rather than applied here. The select below consumes them
   as its own padding, so the whole 62.6px field IS the control instead of a
   23.6px select floating in a field of inert padding. The field's own box does
   not change: its height is still driven by the select's outer height, which
   is unchanged, and the label keeps its position to the pixel. */
.ato-mk-search-field {
    --mk-pad-y: 14px;
    --mk-pad-x: 18px;
    --mk-lbl-h: 11px;
    --mk-lbl-gap: 4px;
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    padding: 0;
    border-left: 1px solid var(--ato-border-color);
    text-align: left;
}

.ato-mk-search-field:first-child {
    border-left: none;
}

/* Lifted out of flow so the select can own the full field height. It keeps its
   exact position -- the field's former padding, now --mk-pad-* -- and
   pointer-events:none hands a tap on the label straight through to the select
   underneath instead of relying on label-for behaviour, which focuses a select
   but does not reliably open it. font-size is the same 11px, read from
   --mk-lbl-h, which is also what the select's top padding is built from, so
   the two can never drift apart. */
.ato-mk-search-label {
    position: absolute;
    top: var(--mk-pad-y);
    left: var(--mk-pad-x);
    right: var(--mk-pad-x);
    pointer-events: none;
    font-family: var(--ato-font-label);
    font-size: var(--mk-lbl-h);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ato-text-muted);
    line-height: 1;
}

/* Tap target, and the only one of the six that is a real resize rather than a
   hit zone. A <select> cannot carry a ::after -- generated content does not
   render on a form control -- so the box itself has to grow, and there was
   room for it: the field was already 62.6px and the select only 23.6px of it.
   Moving the field's padding onto the select makes the select's border box the
   whole field while every pixel of text stays where it was, because each
   padding edge is the old value plus the field padding it replaced.

   The caret is drawn as two background gradients and is positioned from the
   right and bottom edges, which have both moved outward, so both offsets are
   re-expressed against the same custom properties. Vertically the old
   `calc(50% + 1px)` centred the caret on a 23.6px box; the equivalent measured
   from the bottom of the new box is the field padding plus 8.3px. */
.ato-mk-search-select {
    width: 100%;
    max-width: 100%;
    border: none;
    outline: none;
    background: transparent;
    padding: calc(var(--mk-pad-y) + var(--mk-lbl-h) + var(--mk-lbl-gap) + 2px)
             calc(var(--mk-pad-x) + 20px)
             calc(var(--mk-pad-y) + 2px)
             var(--mk-pad-x);
    margin: 0;
    font-family: var(--ato-font-body);
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--ato-dark);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    text-overflow: ellipsis;
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - var(--mk-pad-x) - 9px) calc(100% - var(--mk-pad-y) - 8.3px),
                         calc(100% - var(--mk-pad-x) - 4px) calc(100% - var(--mk-pad-y) - 8.3px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

/* The +3px offset drew the ring clear of a 23.6px select sitting inside the
   field. The select is now the field, and `.ato-mk-search` clips with
   overflow:hidden, so an outward ring would be sliced off at the field edges.
   Drawn just inside instead -- same colour, same width. */
.ato-mk-search-select:focus-visible {
    outline: 2px solid var(--ato-primary);
    outline-offset: -2px;
    border-radius: var(--ato-radius-sm);
}

.ato-mk-search-field.is-set .ato-mk-search-label {
    color: var(--ato-primary);
}

.ato-mk-search-action {
    flex: 0 0 auto;
    display: flex;
    padding: 8px;
}

.ato-mk-search-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-width: 148px;
    padding: 0 26px;
    border: none;
    border-radius: var(--ato-radius-md);
    background: var(--ato-primary);
    color: #fff;
    font-family: var(--ato-font-label);
    font-size: var(--ato-fs-label);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s ease;
}

.ato-mk-search-submit:hover,
.ato-mk-search-submit:focus-visible {
    background: var(--ato-primary-hover);
}

.ato-mk-search-submit svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

/* --- Quick-link chips --- */

.ato-mk-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin: 26px auto 0;
    max-width: 900px;
}

.ato-mk-chips-label {
    font-family: var(--ato-font-label);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ato-on-dark);
    margin-right: 4px;
}

.ato-mk-chip {
    display: inline-flex;
    align-items: center;
    padding: 7px 15px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: var(--ato-radius-sm);
    background: rgba(var(--shadow), 0.42);
    color: #fff;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.2;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.ato-mk-chip:hover,
.ato-mk-chip:focus-visible {
    background: var(--ato-primary);
    border-color: var(--ato-primary);
    color: #fff;
    text-decoration: none;
}

/* ---------------------------------------------------------
   2. "Discover Uganda Safaris" section
   --------------------------------------------------------- */

.ato-mk-section {
    padding: 66px 0 84px;
}

.ato-mk-section-head {
    max-width: 720px;
    margin: 0 0 34px;
}

.ato-mk-section-head.is-centered {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.ato-mk-section-title {
    font-family: var(--ato-font-heading);
    font-weight: 500;
    font-size: clamp(28px, 3.4vw, 42px);
    line-height: 1.12;
    color: var(--ato-title-color);
    margin: 0 0 12px;
}

.ato-mk-section-intro {
    font-size: var(--ato-fs-reading);
    line-height: 1.65;
    color: var(--ato-text-main);
    margin: 0;
}

/* Results toolbar above the grid */
.ato-mk-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 0 18px;
    margin: 0 0 22px;
    border-bottom: 1px solid var(--ato-border-color);
}

.ato-mk-count {
    font-family: var(--ato-font-label);
    font-size: var(--ato-fs-label);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ato-text-muted);
    margin: 0;
}

.ato-mk-count strong {
    color: var(--ato-dark);
}

.ato-mk-sort-wrap {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.ato-mk-sort-wrap label {
    font-family: var(--ato-font-label);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ato-text-muted);
}

.ato-mk-sort {
    font-family: var(--ato-font-body);
    font-size: 13.5px;
    color: var(--ato-dark);
    background: var(--ato-bg-white);
    border: 1px solid var(--ato-border-color);
    border-radius: var(--ato-radius-sm);
    padding: 8px 12px;
    cursor: pointer;
}

.ato-mk-sort:focus-visible {
    outline: 2px solid var(--ato-primary);
    outline-offset: 2px;
}

/* Active-filter pills (each removes itself with a plain link) */
.ato-mk-active {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 22px;
}

.ato-mk-active-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border: 1px solid var(--ato-border-color);
    border-radius: var(--ato-radius-sm);
    background: var(--ato-bg-light);
    color: var(--ato-dark);
    font-size: 12.5px;
    text-decoration: none;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.ato-mk-active-pill:hover {
    border-color: var(--ato-primary);
    color: var(--ato-primary);
    text-decoration: none;
}

.ato-mk-active-pill .x {
    font-size: 14px;
    line-height: 1;
    color: var(--ato-text-muted);
}

.ato-mk-active-clear {
    font-family: var(--ato-font-label);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ato-primary);
    text-decoration: none;
    align-self: center;
    padding: 6px 4px;
}

.ato-mk-active-clear:hover {
    color: var(--ato-primary-hover);
    text-decoration: underline;
}

/* Sidebar column: slightly narrower than the default 280px so the
   main column still fits a genuine 3-up grid inside 1180px. */
.ato-mk .ato-tours-page-wrapper.with-sidebar {
    grid-template-columns: 250px 1fr;
    gap: 32px;
}

/* Card grid: 3-up desktop, 2-up tablet, 1-up mobile */
.ato-mk .ato-tours-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--ato-grid-gap);
}

@media (max-width: 1079px) {
    .ato-mk .ato-tours-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 699px) {
    .ato-mk .ato-tours-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---------------------------------------------------------
   3. Safari card (.at-tour / .ato-tour-card)
   The base card shell was never defined anywhere — the rules
   in ato-public.css only layer overlays on top of a shell the
   theme was assumed to provide. It is defined here.
   --------------------------------------------------------- */

a.at-tour.ato-tour-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--ato-bg-white);
    border: 1px solid var(--ato-border-color);
    border-radius: var(--ato-radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: var(--ato-text-main);
    box-shadow: var(--ato-shadow-sm);
}

a.at-tour.ato-tour-card:hover,
a.at-tour.ato-tour-card:focus-within {
    box-shadow: var(--ato-shadow-md);
    transform: translateY(-3px);
    border-color: rgba(var(--shadow), 0.16);
    text-decoration: none;
}

a.at-tour.ato-tour-card .at-tour-img {
    position: relative;
    line-height: 0;
    aspect-ratio: 3 / 2;
    background: var(--ato-bg-light);
}

/*
 * height:100% here was indeterminate, and that is the uneven card heights.
 *
 * The parent declares aspect-ratio 3/2 but no height. A percentage height
 * resolves against a definite parent height, an aspect-ratio alone does not
 * make one, so this fell back to auto and the photograph's OWN intrinsic
 * ratio sized the box instead. Measured on one grid: 1.15, 1.333, 1.497 and
 * 1.5 side by side, all claiming to be 3/2.
 *
 * Giving the image the ratio directly makes it definite. Positioning is left
 * alone on purpose: the tag chip, wishlist button, gallery badge and operator
 * disc are absolutely positioned in this same box with tuned stacking, so
 * this must not become an absolute fill.
 */
a.at-tour.ato-tour-card .at-tour-img img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

a.at-tour.ato-tour-card:hover .at-tour-img img {
    transform: scale(1.045);
}

/* Top-left chip stack: the activity tag, then the cross-border country note.
   The container carries the position so neither chip has to know the other's
   height, presence, or whether .ato-featured has pushed the stack down. */
a.at-tour.ato-tour-card .ato-card-chips {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    max-width: calc(100% - 72px);
}

/* A featured card already gets .ato-featured-ribbon top-left, so push the whole
   stack down out of its way. */
a.at-tour.ato-tour-card.ato-featured .ato-card-chips {
    top: 48px;
}

/* Top-left activity tag chip */
a.at-tour.ato-tour-card .ato-tag-chip {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    max-width: calc(100% - 72px);
    padding: 5px 11px;
    border-radius: var(--ato-radius-sm);
    background: var(--ato-bg-white);
    color: var(--ato-dark);
    font-family: var(--ato-font-label);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-shadow: var(--ato-shadow-sm);
}

/* The tag chip now lives inside .ato-card-chips, which holds the position. Its
   own absolute placement above is kept only so any template still rendering the
   chip on its own keeps working; inside the stack it is overridden here.
   The .ato-featured offset moves with the container, not with this chip. */
a.at-tour.ato-tour-card .ato-card-chips .ato-tag-chip,
a.at-tour.ato-tour-card.ato-featured .ato-card-chips .ato-tag-chip {
    position: static;
    top: auto;
    left: auto;
    max-width: 100%;
}

/* "Also visits Kenya & Rwanda" on the seven cross-border itineraries.

   Deliberately NOT white-space: nowrap like the tag chip above it. That chip
   holds one short activity name and may safely ellipsis; this one holds country
   names, and clipping "Also visits Kenya & Rwa..." would lose the fact the chip
   exists to carry. It wraps to a second line instead, which costs nothing
   because the stack is absolutely positioned inside a fixed-ratio media box.

   Lower-contrast and lighter-weight than the activity chip on purpose: it is a
   qualifier on the title, not a headline. */
a.at-tour.ato-tour-card .ato-country-chip {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    padding: 4px 10px;
    border-radius: var(--ato-radius-sm);
    background: rgba(var(--shadow), 0.78);
    color: #fff;
    font-family: var(--ato-font-label);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.35;
    white-space: normal;
    backdrop-filter: blur(8px);
    box-shadow: var(--ato-shadow-sm);
}

/* Top-right wishlist heart */
a.at-tour.ato-tour-card .ato-wishlist-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--ato-radius-full);
    background: var(--ato-bg-white);
    color: var(--ato-text-muted);
    cursor: pointer;
    box-shadow: var(--ato-shadow-sm);
    transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

a.at-tour.ato-tour-card .ato-wishlist-btn svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

a.at-tour.ato-tour-card .ato-wishlist-btn:hover,
a.at-tour.ato-tour-card .ato-wishlist-btn:focus-visible {
    color: var(--ato-danger);
    transform: scale(1.08);
}

a.at-tour.ato-tour-card .ato-wishlist-btn.active {
    color: var(--ato-danger);
}

a.at-tour.ato-tour-card .ato-wishlist-btn.active svg {
    fill: currentColor;
}

a.at-tour.ato-tour-card .ato-wishlist-btn.ato-loading {
    opacity: 0.55;
    pointer-events: none;
}

/* Circular operator logo overlapping the image's bottom-left */
a.at-tour.ato-tour-card .ato-card-oplogo {
    position: absolute;
    left: 16px;
    bottom: -22px;
    z-index: 3;
    width: 44px;
    height: 44px;
    border-radius: var(--ato-radius-full);
    overflow: hidden;
    background: var(--ato-bg-white);
    border: 2px solid var(--ato-bg-white);
    box-shadow: var(--ato-shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

a.at-tour.ato-tour-card .ato-card-oplogo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

a.at-tour.ato-tour-card .ato-card-oplogo .ato-oplogo-initial {
    font-family: var(--ato-font-heading);
    font-size: 19px;
    font-weight: 600;
    line-height: 1;
    color: var(--ato-primary);
}

/* Body: leave room for the overlapping logo */
a.at-tour.ato-tour-card .at-tour-body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
    padding: 32px 18px 12px;
}

a.at-tour.ato-tour-card .at-tour-body h3 {
    font-family: var(--ato-font-heading);
    font-weight: 600;
    font-size: 21px;
    line-height: 1.22;
    letter-spacing: 0;
    color: var(--ato-title-color);
    margin: 0;
    min-height: 2.44em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

a.at-tour.ato-tour-card:hover .at-tour-body h3 {
    color: var(--ato-primary);
}

/* Operator line + verified tick */
a.at-tour.ato-tour-card .at-tour-op {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    color: var(--ato-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

a.at-tour.ato-tour-card .at-tour-op .op-name {
    overflow: hidden;
    text-overflow: ellipsis;
}

a.at-tour.ato-tour-card .at-tour-op .vbadge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: var(--ato-radius-full);
    background: var(--ato-primary);
    color: #fff;
    font-size: 9px;
    line-height: 1;
}

/* Rating row */
a.at-tour.ato-tour-card .at-tour-rate {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: 12.5px;
    color: var(--ato-text-muted);
}

a.at-tour.ato-tour-card .at-tour-rate .score {
    font-weight: 700;
    color: var(--ato-dark);
}

/* Meta row: destination · duration */
a.at-tour.ato-tour-card .at-tour-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    font-family: var(--ato-font-label);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ato-text-muted);
}

a.at-tour.ato-tour-card .at-tour-meta-row .dot {
    color: var(--ato-rule);
}

/* Footer: price, cancellation affordance, CTA */
a.at-tour.ato-tour-card .at-tour-foot {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px 18px 18px;
    margin-top: auto;
    border-top: 1px solid var(--ato-border-color);
}

a.at-tour.ato-tour-card .at-tour-px {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 7px;
    font-family: var(--ato-font-heading);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.1;
    color: var(--ato-primary);
}

/* The base sheet sets this label to 0.48rem (~7.7px), below the
   11px floor in the type scale. Restored here. */
a.at-tour.ato-tour-card .at-tour-px small,
a.at-tour.ato-tour-card .at-tour-px .from {
    font-family: var(--ato-font-label);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ato-text-muted);
    margin: 0;
    line-height: 1;
}

a.at-tour.ato-tour-card .at-tour-px .pp {
    font-family: var(--ato-font-body);
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--ato-text-muted);
}

/* .ato-card-cancel removed with the "Free cancellation available" line it
   styled: this marketplace takes no booking and cannot promise a cancellation
   policy that belongs to the operator. */

/* CTA rendered as a span (nested <button>/<a> is invalid inside <a>) */
a.at-tour.ato-tour-card .ato-card-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 11px 18px;
    border-radius: var(--ato-radius-md);
    background: var(--ato-primary);
    color: #fff;
    font-family: var(--ato-font-label);
    font-size: var(--ato-fs-label);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    line-height: 1;
    transition: background 0.2s ease;
}

a.at-tour.ato-tour-card:hover .ato-card-cta {
    background: var(--ato-primary-hover);
}

/* ---------------------------------------------------------
   4. Filter panel — palette + type-scale pass
   Only overrides. Structure, ids, names and JS hooks are
   untouched so includes/filters-ajax.php keeps working.
   --------------------------------------------------------- */

.ato-sidebar-filters.ato-filters-v2 {
    background: var(--ato-bg-white);
    border: 1px solid var(--ato-border-color);
    border-radius: var(--ato-radius-lg);
    overflow: hidden;
    font-size: var(--ato-fs-small);
}

.ato-sidebar-filters.ato-filters-v2 .ato-filters-header {
    background: var(--ato-primary) !important;
    padding: 15px 16px;
}

.ato-sidebar-filters.ato-filters-v2 .ato-filters-header h3 {
    font-family: var(--ato-font-label);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #fff;
}

.ato-sidebar-filters.ato-filters-v2 .ato-reset-link {
    font-family: var(--ato-font-label);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    border-radius: var(--ato-radius-sm);
    padding: 4px 10px;
}

.ato-sidebar-filters.ato-filters-v2 .ato-filter-title {
    font-family: var(--ato-font-label);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ato-dark);
    background: var(--ato-bg-light);
    padding: 13px 16px;
}

.ato-sidebar-filters.ato-filters-v2 .ato-filter-title:hover {
    background: var(--ato-bg-light);
    color: var(--ato-primary);
}

.ato-sidebar-filters.ato-filters-v2 .ato-filter-section {
    border-bottom: 1px solid var(--ato-border-color);
}

.ato-sidebar-filters.ato-filters-v2 .ato-filter-content {
    padding: 12px 16px 16px;
}

.ato-sidebar-filters.ato-filters-v2 .ato-range-inputs input {
    font-family: var(--ato-font-body);
    font-size: 13px;
    padding: 9px 10px;
    border: 1px solid var(--ato-border-color);
    border-radius: var(--ato-radius-sm);
    color: var(--ato-dark);
    background: var(--ato-bg-white);
}

/* The base sheet focuses these inputs with a leftover rust rgba
   (196,60,46). Re-keyed to the green palette. */
.ato-sidebar-filters.ato-filters-v2 .ato-range-inputs input:focus {
    border-color: var(--ato-primary);
    box-shadow: 0 0 0 3px rgba(var(--shadow), 0.10);
}

.ato-sidebar-filters.ato-filters-v2 .ato-range-inputs .sep {
    color: var(--ato-rule);
}

.ato-sidebar-filters.ato-filters-v2 .ato-checkbox {
    font-size: 13px;
    color: var(--ato-text-main);
    padding: 7px 0;
}

.ato-sidebar-filters.ato-filters-v2 .ato-checkbox:hover {
    color: var(--ato-primary);
}

.ato-sidebar-filters.ato-filters-v2 .ato-checkbox input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--ato-primary);
}

.ato-sidebar-filters.ato-filters-v2 .ato-checkbox .count {
    font-family: var(--ato-font-label);
    font-size: 11px;
    font-weight: 600;
    color: var(--ato-text-muted);
    background: var(--ato-bg-light);
    border-radius: var(--ato-radius-sm);
    padding: 2px 7px;
}

.ato-sidebar-filters.ato-filters-v2 .ato-show-more {
    font-family: var(--ato-font-label);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ato-primary);
}

.ato-sidebar-filters.ato-filters-v2 .ato-show-more:hover {
    color: var(--ato-secondary-hover);
}

.ato-sidebar-filters.ato-filters-v2 .ato-filters-footer {
    background: var(--ato-bg-light);
    border-top: 1px solid var(--ato-border-color);
    padding: 14px 16px;
}

.ato-sidebar-filters.ato-filters-v2 .ato-filters-footer .ato-button {
    font-family: var(--ato-font-label);
    font-size: var(--ato-fs-label);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-radius: var(--ato-radius-md);
    padding: 12px 18px;
}

.ato-sidebar-filters.ato-filters-v2 .ato-filter-list::-webkit-scrollbar-track {
    background: var(--ato-bg-light);
}

.ato-sidebar-filters.ato-filters-v2 .ato-filter-list::-webkit-scrollbar-thumb {
    background: var(--ato-rule);
}

.ato-sidebar-filters.ato-filters-v2 .ato-filter-list::-webkit-scrollbar-thumb:hover {
    background: var(--ato-primary);
}

/* Duration presets — fill the min/max day inputs */
.ato-filter-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 10px;
    padding: 0;
    list-style: none;
}

.ato-duration-preset {
    appearance: none;
    border: 1px solid var(--ato-border-color);
    background: var(--ato-bg-white);
    border-radius: var(--ato-radius-sm);
    color: var(--ato-text-main);
    font-family: var(--ato-font-body);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.1;
    padding: 6px 10px;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}

.ato-duration-preset:hover,
.ato-duration-preset:focus-visible {
    border-color: var(--ato-primary);
    color: var(--ato-primary);
}

.ato-duration-preset.is-active {
    background: var(--ato-primary);
    border-color: var(--ato-primary);
    color: #fff;
}

/* Mobile filter toggle */
.ato-mk .ato-mobile-filter-toggle {
    font-family: var(--ato-font-label);
    font-size: var(--ato-fs-label);
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-radius: var(--ato-radius-md);
}

/* ---------------------------------------------------------
   5. Empty state / loading
   --------------------------------------------------------- */

.ato-mk .ato-loading-content {
    opacity: 0.45;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.ato-mk .ato-no-results-box {
    border: 1px solid var(--ato-border-color);
    border-radius: var(--ato-radius-lg);
    background: var(--ato-bg-light);
    padding: 48px 28px;
    text-align: center;
}

/* ---------------------------------------------------------
   6. Responsive
   --------------------------------------------------------- */

/* Search bar collapses to stacked full-width fields under 820px */
@media (max-width: 819px) {
    .ato-mk-search {
        flex-direction: column;
        border-radius: var(--ato-radius-md);
    }

    .ato-mk-search-field {
        --mk-pad-y: 12px;
        --mk-pad-x: 16px;
        flex: 1 1 auto;
        width: 100%;
        border-left: none;
        border-top: 1px solid var(--ato-border-color);
    }

    .ato-mk-search-field:first-child {
        border-top: none;
    }

    .ato-mk-search-action {
        width: 100%;
        padding: 10px 12px 12px;
    }

    .ato-mk-search-submit {
        width: 100%;
        min-width: 0;
        padding: 14px 20px;
    }
}

@media (max-width: 900px) {
    .ato-mk .ato-tours-page-wrapper.with-sidebar {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
}

@media (max-width: 767px) {
    .ato-mk-hero {
        padding: 56px 0 48px;
    }

    .ato-mk-wrap {
        padding: 0 20px;
    }

    .ato-mk-section {
        padding: 44px 0 56px;
    }

    .ato-mk-toggle-btn {
        min-width: 0;
        flex: 1 1 0;
        padding: 10px 18px;
    }

    .ato-mk-toggle {
        display: flex;
        width: 100%;
        max-width: 320px;
    }

    .ato-mk-chips {
        justify-content: flex-start;
    }

    .ato-mk-toolbar {
        justify-content: flex-start;
    }
}

@media (prefers-reduced-motion: reduce) {
    a.at-tour.ato-tour-card,
    a.at-tour.ato-tour-card .at-tour-img img,
    a.at-tour.ato-tour-card:hover .at-tour-img img {
        transition: none;
        transform: none;
    }
}

/* ------------------------------------------------------------------ guides
   Names an operator publishes on its own site. Deliberately typographic, with
   no portraits and no avatar circles: some photo-to-name pairings on the source
   pages are by page position only, so a face here could caption the wrong
   person. Names carry the weight instead.

   Three of the six launch operators publish nobody, so this list is simply
   absent on their safaris — do not add a placeholder person or a silhouette
   avatar to "balance" the layout.
   ------------------------------------------------------------------------- */
.ato-guides {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 14px;
}

.ato-guide {
    background: var(--ato-bg-light);
    border: 1px solid var(--ato-border-color);
    border-left: 3px solid var(--ato-primary);
    border-radius: 3px;
    padding: 13px 15px;
    min-width: 0;
}

.ato-guide__name {
    display: block;
    font-family: var(--ato-font-heading);
    font-size: var(--ato-fs-reading);
    font-weight: 600;
    color: var(--ato-title-color);
    line-height: 1.25;
    /* Ugandan names are often published surname-first and can be long; wrap
       rather than truncate, because a clipped name is a misspelt name. */
    overflow-wrap: break-word;
}

.ato-guide__role {
    display: block;
    font-family: var(--ato-font-body);
    font-size: var(--ato-fs-small);
    color: var(--ato-text-muted);
    margin-top: 4px;
    line-height: 1.4;
}

/* Inside the operator profile's tab panel the column is narrower. */
.ato-guides--panel {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}

.ato-op-note {
    font-size: var(--ato-fs-small);
    color: var(--ato-text-muted);
    margin: 14px 0 0;
}

@media (max-width: 520px) {
    .ato-guides,
    .ato-guides--panel {
        grid-template-columns: 1fr;
    }
}

/* ---------------------------------------------- card foot, unpriced cards
   31 of 43 safaris carry no published price, so a card with no price row is the
   normal case, not the exception. The price row is gone from those cards, but the
   space it occupied is still reserved — otherwise the horizontal rule above the
   footer lands ~39px lower on unpriced cards, and a row mixing the two gets a
   visibly ragged set of dividers even though the cards themselves are the same
   height and the buttons already line up.

   The spacer is a non-breaking space carrying the price row's exact typography,
   so its line box is computed the same way the price row's is. Change the price
   font-size or line-height and this tracks it automatically — no frozen pixel
   value to go stale. Measured: price row 28.6px + 10px flex gap = 38.6px.
   ------------------------------------------------------------------------- */
a.at-tour.ato-tour-card .at-tour-foot:not(:has(.at-tour-px))::before {
    content: "\00a0";
    display: block;
    font-family: var(--ato-font-heading);
    font-size: 26px;
    font-weight: 600;
    line-height: 1.1;
    /* purely a spacer: never announced, never selectable */
    speak: never;
    user-select: none;
    pointer-events: none;
}

/* =========================================================
   Illustrated guide cards
   Destination directory + Things To Do.

   Enqueued on those two pages by ATO_Guides::enqueue_card_styles(),
   because this sheet's own condition in safaris.php covers only tour
   views and the safari-grid shortcodes. Rules here refine
   ato-guides.css, so every selector is scoped to .ato-dest-directory
   or .ato-things-to-do: that keeps them winning on specificity rather
   than on source order, which would otherwise depend on which sheet
   the browser received first.

   Same card language as the theme's .ugsa-hub-card: photograph on
   top, hairline border, small radius, lift on hover.
   Zero hardcoded palette colours.
   ========================================================= */

/* ---- 1. the shared card shell ---- */

.ato-dest-directory .ato-card,
.ato-things-to-do .ato-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    /* NO overflow:hidden here. It clipped any absolutely-positioned ::after
       hit zone on a control at the card's edge back to the card box, without
       changing the rule, the rect or the markup -- a 44px target that a
       finger still misses. The only thing it was doing visually was rounding
       the media image's top corners, which .ato-card-media now does itself.
       Verified before removal: no descendant of any of the 111 cards on
       /destinations/ extends outside the card box, so nothing is revealed. */
    background: var(--ato-bg-white);
    border: 1px solid var(--ato-border-color);
    border-radius: var(--ato-radius-md);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.ato-dest-directory .ato-card:hover,
.ato-things-to-do .ato-card:hover,
.ato-dest-directory .ato-card:focus-within,
.ato-things-to-do .ato-card:focus-within {
    transform: translateY(-3px);
    border-color: var(--ato-secondary);
    box-shadow: 0 12px 28px rgba(var(--shadow), .13);
}

@media (prefers-reduced-motion: reduce) {

    .ato-dest-directory .ato-card,
    .ato-things-to-do .ato-card {
        transition: none;
    }

    .ato-dest-directory .ato-card:hover,
    .ato-things-to-do .ato-card:hover,
    .ato-dest-directory .ato-card:focus-within,
    .ato-things-to-do .ato-card:focus-within {
        transform: none;
    }
}

/* ---- 2. the thumbnail ---- */

/* The aspect ratio is declared on the box rather than inherited from the
   file, so the row height is known before the photograph arrives and
   nothing on the page moves when it does. */
.ato-dest-directory .ato-card-media,
.ato-things-to-do .ato-card-media {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 26 / 17;
    overflow: hidden;
    background: var(--ato-bg-light);
    /* The card used to round these corners by clipping. It no longer clips
       anything, so the media rounds its own top corners. Bottom corners stay
       square: the body sits directly beneath. */
    border-top-left-radius: var(--ato-radius-md);
    border-top-right-radius: var(--ato-radius-md);
}

.ato-dest-directory .ato-card-media-img,
.ato-things-to-do .ato-card-media-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.ato-dest-directory .ato-card:hover .ato-card-media-img,
.ato-things-to-do .ato-card:hover .ato-card-media-img {
    transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {

    .ato-dest-directory .ato-card-media-img,
    .ato-things-to-do .ato-card-media-img {
        transition: none;
    }

    .ato-dest-directory .ato-card:hover .ato-card-media-img,
    .ato-things-to-do .ato-card:hover .ato-card-media-img {
        transform: none;
    }
}

/* ---- 3. the placeholder, for a term with no photograph yet ---- */

/* Identical box to the image so the grid keeps its rhythm; a card with no
   picture must not be shorter than its neighbours. Six tints of the one
   brand green, picked from the name, so a given place always draws the
   same block instead of changing between loads. */
.ato-dest-directory .ato-card-media--none,
.ato-things-to-do .ato-card-media--none {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ato-bg-light);
    border-bottom: 1px solid var(--ato-border-color);
}

.ato-dest-directory .ato-card-media--t0,
.ato-things-to-do .ato-card-media--t0 {
    background-image: linear-gradient(135deg, rgba(var(--shadow), .04), rgba(var(--shadow), .12));
}

.ato-dest-directory .ato-card-media--t1,
.ato-things-to-do .ato-card-media--t1 {
    background-image: linear-gradient(135deg, rgba(var(--shadow), .06), rgba(var(--shadow), .15));
}

.ato-dest-directory .ato-card-media--t2,
.ato-things-to-do .ato-card-media--t2 {
    background-image: linear-gradient(160deg, rgba(var(--shadow), .05), rgba(var(--shadow), .13));
}

.ato-dest-directory .ato-card-media--t3,
.ato-things-to-do .ato-card-media--t3 {
    background-image: linear-gradient(110deg, rgba(var(--shadow), .07), rgba(var(--shadow), .16));
}

.ato-dest-directory .ato-card-media--t4,
.ato-things-to-do .ato-card-media--t4 {
    background-image: linear-gradient(135deg, rgba(var(--shadow), .03), rgba(var(--shadow), .10));
}

.ato-dest-directory .ato-card-media--t5,
.ato-things-to-do .ato-card-media--t5 {
    background-image: linear-gradient(200deg, rgba(var(--shadow), .06), rgba(var(--shadow), .14));
}

.ato-dest-directory .ato-card-media-letter,
.ato-things-to-do .ato-card-media-letter {
    font-family: var(--ato-font-heading);
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1;
    color: var(--ato-primary);
    opacity: .34;
    user-select: none;
}

/* ---- 4. destination directory ---- */

/* The directory lists 52 places, so it is set three to a row inside the
   theme's 780px prose column rather than two: at two columns the page ran to
   26 rows of card once the photographs went in. Things To Do stays at two,
   because each of its entries carries a paragraph of description.

   min() keeps a track from ever being wider than its container, which is
   what stops a 222px minimum forcing a sideways scroll on a narrow phone. */
.ato-dest-directory .ato-guide-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(222px, 100%), 1fr));
    gap: 18px;
}

.ato-dest-directory .ato-guide-item-link {
    display: block;
    margin: 0;
    text-decoration: none;
    color: inherit;
}

.ato-dest-directory .ato-guide-item-link:focus-visible {
    outline: 2px solid var(--ato-primary);
    outline-offset: -3px;
}

.ato-dest-directory .ato-card-head {
    display: block;
    padding: 15px 18px 0;
}

.ato-dest-directory .ato-guide-item-name {
    font-size: 1.1875rem;
}

.ato-dest-directory .ato-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 8px 18px 16px;
}

.ato-dest-directory .ato-guide-item-desc {
    margin: 0 0 14px;
}

/* Pushed to the bottom so the badge row lines up across a row of cards
   whose descriptions run to different lengths. */
.ato-dest-directory .ato-card-foot {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 10px;
    margin: auto 0 0;
}

.ato-dest-directory .ato-guide-item-badge {
    margin-right: 0;
}

/* ---- 5. things to do ---- */

.ato-things-to-do .ato-ttd-list {
    grid-template-columns: repeat(auto-fill, minmax(min(288px, 100%), 1fr));
    gap: 22px;
}

.ato-things-to-do .ato-ttd-media {
    position: relative;
    display: block;
}

/* The running number moves off the text column and onto the photograph,
   which frees the full card width for the title. */
.ato-things-to-do .ato-ttd-num {
    position: absolute;
    left: 12px;
    bottom: -17px;
    z-index: 1;
    width: 34px;
    height: 34px;
    font-size: 0.9375rem;
    box-shadow: 0 3px 10px rgba(var(--shadow), .28);
}

.ato-things-to-do .ato-ttd-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 26px 18px 18px;
    min-width: 0;
}

.ato-things-to-do .ato-ttd-desc {
    margin: 0 0 12px;
}

.ato-things-to-do .ato-ttd-link {
    align-self: flex-start;
    margin-top: auto;
}

/* ---- 6. the photographer credit on a card ---- */

/* CC BY and CC BY-SA require the attribution to be visible wherever the
   work is shown, and a thumbnail grid is showing it. Set small and quiet,
   but present, and clickable through to the source and the deed. */
.ato-dest-directory .ato-card-credit,
.ato-things-to-do .ato-card-credit {
    order: 99;
    margin: 12px 0 0;
    padding-top: 9px;
    border-top: 1px solid var(--ato-border-color);
    font-size: 0.625rem;
    line-height: 1.45;
    text-align: left;
    color: var(--ato-text-muted);
}

/* ---- 7. narrow widths ---- */

@media (max-width: 640px) {

    .ato-dest-directory .ato-guide-grid,
    .ato-things-to-do .ato-ttd-list {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .ato-dest-directory .ato-card-media,
    .ato-things-to-do .ato-card-media {
        /* A touch shallower once the card runs full width, so the
           photograph does not push the words below the fold on a phone. */
        aspect-ratio: 16 / 9;
    }

    .ato-dest-directory .ato-card-media-letter,
    .ato-things-to-do .ato-card-media-letter {
        font-size: 2.25rem;
    }
}

/* Base mark, duplicated here because this sheet loads on the archive and
   homepage where ato-public.css's copy is also present — identical rules, so
   whichever wins produces the same result. */
.ato-vbadge{display:inline-flex;align-items:center;gap:7px;padding:5px 12px 5px 8px;border-radius:999px;background:rgba(var(--shadow, 36, 22, 9), .055);border:1px solid var(--ato-border-color, rgba(var(--shadow, 36, 22, 9), .18));color:var(--ato-dark, #241609);font-size:12.5px;font-weight:600;line-height:1.2;text-transform:none;vertical-align:middle;white-space:nowrap}
.ato-vbadge-mark{width:19px;height:19px;flex:0 0 auto;display:block}
.ato-vbadge-mark path:first-child{fill:var(--ato-accent, #a8750f)}
.ato-vbadge-mark .ato-vbadge-tick{fill:none;stroke:var(--ato-bg-white, #fffaf0);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.ato-vbadge-text{display:inline-block}

/* --- badge variants: one mark, four placements -------------------------- */

/* Beside an operator name in body copy: no tinted pill, just the seal and the
   words, because it sits inside a sentence rather than beside a heading. */
.ato-vbadge--inline {
    background: none;
    border: 0;
    padding: 0;
    gap: 6px;
    font-size: 12px;
}

.ato-vbadge--inline .ato-vbadge-mark {
    width: 16px;
    height: 16px;
}

/* Over a photograph. The soft tint is invisible on an image, so this variant is
   opaque, and the border goes because the fill already separates it. */
.ato-vbadge--on-image {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    background: var(--ato-bg-white, #fffaf0);
    border: 0;
    box-shadow: 0 2px 8px rgba(var(--shadow, 36, 22, 9), .22);
    padding: 5px 11px 5px 8px;
    font-size: 11.5px;
}

/* Tight card furniture: the seal alone, with the label for assistive tech only.
   No pill — at this size a background would read as a smudge. */
.ato-vbadge--mark {
    background: none;
    border: 0;
    padding: 0;
    gap: 0;
}

.ato-vbadge--mark .ato-vbadge-mark {
    width: 15px;
    height: 15px;
}

/* The safari card's operator line is small and tight, so pull the seal onto the
   text baseline rather than letting it stretch the row. */
a.at-tour.ato-tour-card .at-tour-op .ato-vbadge--mark {
    vertical-align: middle;
    margin-left: 5px;
    position: relative;
    top: -1px;
}

/* ==========================================================================
   Tap targets -- round 18b
   ========================================================================== */

/* #5 Wishlist heart: 32x32 as shipped. It is absolutely positioned over the
   card image and lives inside the card's own <a>, so growing the box would
   enlarge the visible white disc and, because it is pinned by top/right, slide
   it inward at the same time. The box is left alone and a transparent 44x44
   ::after is centred on it instead. At top:12 / right:12 that zone stops 6px
   short of the media box on both edges, so it never leaves the image, and the
   only clicks it takes from the card link are the ones already in the heart's
   own corner. The tag chip and featured ribbon are top-LEFT and are not
   touched.

   Round 19: widened 44 -> 46. Measured live, the 44px zone came back as
   exactly 44x44 at 768 and 1024 and 45x44 elsewhere -- sitting on the floor
   with nothing left for subpixel rounding. 46px starts the zone 5px inside
   the media box on both edges and puts its left edge 51px from the card's
   right edge; the tag chip is capped at calc(100% - 72px) from left:12 and so
   can reach no closer than 60px from that edge. 9px of clearance either way.
   Do not grow this further without re-checking that gap. */
a.at-tour.ato-tour-card .ato-wishlist-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 46px;
    height: 46px;
}

/* #6 Duration presets: 39.5-46.4 x 27.2. Padding would have worked across but
   not down -- a 44px chip makes the preset row 17px taller and pushes the
   min/max inputs and every filter group below them down the sidebar -- and
   widening the chips would slide chips 2 to 4 along the row. So this is a hit
   zone in both axes and nothing in the sidebar moves at all.

   The four chips sit on one line with a 6px gap. A 44px zone on the narrowest
   chip reaches 2.25px into that gap from each side, so neighbouring zones stop
   1.5px short of each other: they abut at worst and never overlap, which would
   put the wrong preset under the tap. Vertically the zone reaches 8.4px above
   the chips, into .ato-filter-content's 12px top padding, and 8.4px below,
   into the row's own 10px bottom margin -- neither the accordion header above
   nor the day inputs below is reached. min-width rather than width so the
   46.4px chip keeps its own, larger, box. */
.ato-duration-preset {
    position: relative;
}

.ato-duration-preset::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    min-width: 44px;
    height: 44px;
}

/* ==========================================================================
   Tap targets -- round 19 (marketplace listing surfaces)

   Everything below was sized against LIVE HIT AREA: elementFromPoint walked
   outward from each control's centre, in the page, at 320/375/414/768/1024/
   1280/1440. A ::after zone enlarges what a finger can hit without changing
   getBoundingClientRect(), so a rect-only audit reports failures that are not
   there and misses ones that are.

   Two structural facts make the sidebar rules below cost nothing outside the
   panel, and both must stay true or these rules start moving the page:
     - .ato-sticky-sidebar is max-height:calc(100vh - 60px) and
       #ato-filters-form is flex:1 1 auto / overflow-y:auto, so the panel's
       height comes from the viewport, never from its contents.
     - every .ato-filter-list is max-height capped and scrolls, so taller rows
       change the scroll extent inside the box, not the box.
   ========================================================================== */

/* #1 Hero quick-link chips: 82.5-151.7 x 30.6. Wide enough already, 13.4px
   short vertically. Padding would change the chips' visual weight, so this is
   a zone -- but the chips wrap, and at 320/375/414 they sit on two or three
   rows separated by the flex gap. A 44px zone on a 30.6px chip reaches 6.7px
   into that gap from each side, which overlaps a 10px gap by 3.4px and would
   put the lower chip under a tap aimed at the upper one.

   So the row gap is derived from the same custom property as the zone and the
   two cannot drift: 44 - 31 + 1 = 14px, and neighbouring zones stop 0.6px
   short of each other. The column gap is untouched at 10px because the zone
   is exactly the chip's own width. At 1280/1440 the chips fit on one line and
   row-gap has no effect at all. */
.ato-mk-chips {
    --mk-chip-zone: 44px;
    /* the chip's own border-box height: 12.5px/1.2 text, 7px padding and 1px
       border on each side */
    --mk-chip-h: 31px;
    row-gap: calc(var(--mk-chip-zone) - var(--mk-chip-h) + 1px);
}

.ato-mk-chip {
    position: relative;
}

.ato-mk-chip::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    min-width: var(--mk-chip-zone);
    height: var(--mk-chip-zone);
}

/* #2 Safaris / Operators segmented toggle: 135.2-155.2 x 39. The two buttons
   abut inside .ato-mk-toggle's 4px padding with no gap between them, so the
   zone is the button's own width (left/right 0, never a centred width that
   could bleed sideways) and grows only up and down: 2.5px each way, into that
   padding. Growing the buttons instead would have made the pill 5px taller
   and pushed the hero's search bar and chips down with it. */
.ato-mk-toggle-btn {
    position: relative;
}

.ato-mk-toggle-btn::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    height: 44px;
}

/* #3 Hero search submit. 44px at most widths but 43px at 414, because it is a
   stretch item in .ato-mk-search and takes the field row's height. A zone
   rather than a min-height: min-height would change the search bar's height
   at that one width and nowhere else, which is exactly the kind of
   breakpoint-only shift this pass is not allowed to introduce.
   .ato-mk-search-action pads the button by 8px on every side, so the 0.5px
   the zone adds is nowhere near .ato-mk-search's overflow:hidden edge. */
.ato-mk-search-submit {
    position: relative;
}

.ato-mk-search-submit::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    height: 44px;
}

/* #4 Filter accordion headers: 333.6 x 40. A zone was the obvious answer and
   is wrong here: .ato-filter-section elements abut, so on a collapsed section
   two headers touch and their zones would overlap by 4px, handing a tap on
   one section's header to the other. The header is grown instead, 13px of
   padding to 16px, which lands it at 46 rather than exactly on the floor.
   The form is a fixed-height scroller, so the 6px per header is absorbed by
   its scroll extent and nothing outside the panel moves. */
.ato-sidebar-filters.ato-filters-v2 .ato-filter-title {
    padding: 16px;
}

/* #5 Checkbox rows -- 77 of them, the bulk of this page's controls.
   36.15px tall and abutting with no gap, so a zone on one row would overlap
   its neighbours by 7.85px on each side and put the wrong term under a tap.
   The row itself is made 44px instead.

   That also fixes the 15x15 <input> inside it, and is the only thing that
   could have: the input is wrapped by its <label>, so a tap anywhere on the
   row already toggles it. What was missing was the row's height, not a second
   zone stacked on the box.

   The lists are max-height capped and scroll, so the caps are re-derived from
   the same row height and each list still shows the number of rows it showed
   before -- four by default, five once "+ More" is pressed. */
.ato-sidebar-filters.ato-filters-v2 {
    --mk-row-h: 44px;
}

.ato-sidebar-filters.ato-filters-v2 .ato-checkbox {
    box-sizing: border-box;
    min-height: var(--mk-row-h);
}

.ato-sidebar-filters.ato-filters-v2 .ato-filter-list {
    max-height: calc(var(--mk-row-h) * 5 + 1px);
}

.ato-sidebar-filters.ato-filters-v2 .ato-filter-list.default-show-5 {
    max-height: calc(var(--mk-row-h) * 4 + 1px);
}

/* #6 Price and duration number inputs: 142 x 36.4. <input> is a replaced
   element and takes no ::before/::after, so there is no zone to give it and
   the box has to grow. min-height rather than extra padding, so the 13px text
   stays optically centred and does not move; box-sizing restated because this
   rule must hold outside .ato-mk's reset too. */
.ato-sidebar-filters.ato-filters-v2 .ato-range-inputs input {
    box-sizing: border-box;
    min-height: 44px;
}

/* #7 "+ More": 51.3 x 25.6, 4px below a scrolling term list and 16px above
   the next section's header. A centred 44px zone would reach 9.2px up and
   cover the bottom of the list's last visible row, stealing a tap from a
   checkbox; the same zone hung downward would reach the next header. So it is
   anchored to the list's bottom edge -- the offset is the button's own
   margin, written once as a custom property so the two cannot drift apart --
   and runs 44px down from there, stopping 2.6px clear of the next section. */
.ato-sidebar-filters.ato-filters-v2 .ato-show-more {
    --mk-showmore-gap: 4px;
    position: relative;
    margin-top: var(--mk-showmore-gap);
}

.ato-sidebar-filters.ato-filters-v2 .ato-show-more::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: calc(-1 * var(--mk-showmore-gap));
    height: 44px;
}

/* #8 Reset: 83.2 x 34.4, alone on its side of the filters header's 15px
   vertical padding. A centred 44px zone reaches 4.8px each way and touches
   nothing. The zone is the button's own width, so it never reaches across the
   row to the "Filter Safaris" heading. */
.ato-sidebar-filters.ato-filters-v2 .ato-reset-link {
    position: relative;
}

.ato-sidebar-filters.ato-filters-v2 .ato-reset-link::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    height: 44px;
}

/* #9 Apply Filters: 240 x 38.4. This one cannot take a zone. .ato-button
   carries overflow:hidden in the base sheet -- it clips the white sheen its
   own ::before sweeps across on hover -- and that would clip a ::after hit
   zone too, silently, back to the button's own 38.4px: the rect would read
   38.4, the rule would read 44, and the tap would still miss. So the button
   grows, by min-height, inside the sticky footer's 14px padding. The footer
   is the last flex item in a fixed-height form, so this changes how much of
   the scroll area it covers, not where the panel ends. */
.ato-sidebar-filters.ato-filters-v2 .ato-filters-footer .ato-button {
    box-sizing: border-box;
    min-height: 44px;
}

/* #10 Sort control: 183.2 x 36. A <select> takes no ::before/::after either --
   generated content does not render on a form control -- so like the number
   inputs it has to grow. min-height rather than padding, because the UA
   centres a select's text in its box and padding would fight the caret it
   draws itself.

   This is the one rule in round 19 that moves the page: .ato-mk-sort is the
   tallest item in .ato-mk-toolbar, so the toolbar and the results grid below
   it drop by 8px. The alternative was to take those 8px back out of the
   toolbar's 18px bottom padding, which buys nothing -- it trades a shift for
   a gap that no longer matches the rest of the page's rhythm. */
.ato-mk-sort {
    box-sizing: border-box;
    min-height: 44px;
}

/* #11 Active-filter pills and the Clear link. These only exist on a filtered
   view (/safaris/?destination=...), which is why they are not in the counts
   taken on the bare listing: 159.5 x 34.2 and 81.7 x 30.1.

   Same shape of problem as the hero chips and the same answer. They wrap, so
   the row gap is derived from the zone height and the SHORTEST of the two
   boxes -- the Clear link at 30px, which overhangs by 6.95px on each side --
   giving 15px and 1.1px of clearance between the zones of stacked rows. The
   column gap stays at 8px: the zone is the item's own width plus the 1px it
   needs to reach back over its border, which still leaves 6px between the
   pill's zone and the Clear link's.

   left/right:-1px rather than 0 because an absolutely positioned box resolves
   its insets against the PADDING box, so on the bordered pill a plain 0 would
   stop just inside the border. */
.ato-mk-active {
    --mk-pill-zone: 44px;
    /* the shorter of the two boxes: the Clear link, 11px text + 6px padding */
    --mk-pill-h: 30px;
    row-gap: calc(var(--mk-pill-zone) - var(--mk-pill-h) + 1px);
}

.ato-mk-active-pill,
.ato-mk-active-clear {
    position: relative;
}

.ato-mk-active-pill::after,
.ato-mk-active-clear::after {
    content: "";
    position: absolute;
    top: 50%;
    left: -1px;
    right: -1px;
    transform: translateY(-50%);
    height: var(--mk-pill-zone);
}