/* =============================================================
   KASHI OF NORTH — MODERN UI/UX ENHANCEMENT LAYER
   Loaded after style.css. Widens layout, modernises grids,
   adds Swiper hero sliders + a lightbox gallery, and polishes
   responsiveness across Hotels / Places / Taxi / Businesses / News.
   ============================================================= */

:root {
    --kon-container-max: 1360px;
    --kon-container-pad: clamp(1rem, 4vw, 2.5rem);

    /* Swiper theme overrides to match the Himalayan palette */
    --swiper-theme-color: var(--kon-amber);
    --swiper-navigation-color: #fff;
    --swiper-navigation-size: 20px;
    --swiper-pagination-color: var(--kon-amber);
    --swiper-pagination-bullet-inactive-color: rgba(255,255,255,.55);
    --swiper-pagination-bullet-inactive-opacity: 1;
}

/* -------------------------------------------------------------
   0. WIDER, FLUID CONTAINER
   ------------------------------------------------------------- */
.kon-container {
    max-width: var(--kon-container-max);
    padding-inline: var(--kon-container-pad);
}

@media (min-width: 1600px) {
    :root { --kon-container-max: 1480px; }
}
@media (min-width: 1920px) {
    :root { --kon-container-max: 1600px; }
}

/* -------------------------------------------------------------
   0b. GLOBAL VIEWPORT SAFETY NET
   Prevents any element from forcing horizontal scroll and keeps
   media/iframes/tables from breaking the layout on small screens.

   IMPORTANT: this used to set `overflow-x: hidden` directly on
   `html` and `body`. Several mobile browsers (notably iOS Safari)
   stop treating `position: fixed` / `position: sticky` elements as
   anchored to the real viewport once `overflow` is set on body —
   they start scrolling away with the page instead of staying put.
   That's exactly what breaks .kon-sticky-bar (fixed) and
   .kon-tab-nav (sticky). Fix: keep html/body completely free of any
   `overflow` value, and put the horizontal-scroll guard on Astra's
   own page wrapper (#page) one level down instead — same visual
   result, but body is no longer a scroll container so fixed/sticky
   children behave correctly again.
   ------------------------------------------------------------- */
html {
    width: 100%;
}
body {
    width: 100%;
}
#page {
    overflow-x: hidden;
    width: 100%;
}
img, svg, video, iframe, embed, object, canvas {
    max-width: 100%;
    height: auto;
}
table {
    max-width: 100%;
}
.kon-acf-list,
.kon-hours-table,
pre, code {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
* {
    min-width: 0;
}

/* -------------------------------------------------------------
   0c. ASTRA PARENT THEME CONFLICT GUARDS
   Astra's content wrappers can clip full-width breakout sections
   (overflow) or fight our grids for box-sizing. These are safe,
   low-risk resets — they don't touch Astra's width/Customizer
   settings, only overflow + box-sizing + flex-shrink edge cases
   that would otherwise squash our custom template markup.
   ------------------------------------------------------------- */
#primary, #main, #content, .site-content,
#content .ast-container, #content .ast-row, #content .ast-separate-container {
    overflow: visible;
}
#primary, #main {
    min-width: 0;
    flex-shrink: 1;
}
*, *::before, *::after {
    box-sizing: border-box;
}

/* -------------------------------------------------------------
   0c-2. DESKTOP FULL-WIDTH SAFETY NET
   functions.php now forces Astra's "no-sidebar" + "page-builder"
   content layout on every custom template (front page, all
   archive-*/single-* CPT templates, taxonomy-location, search,
   and the two page templates). That is the real fix for the
   "compressed desktop / cards collapsing" bug — Astra's default
   Right-Sidebar + boxed layout was squeezing #primary into a
   ~65-70% flex column on desktop only (mobile always stacks the
   sidebar full-width, which is why mobile looked fine).

   This block is a belt-and-braces backup only: if a page is ever
   viewed before the layout meta/customizer cache updates, or a
   future template forgets to opt in, these rules stop #primary
   from ever being narrower than the viewport on desktop.
   ------------------------------------------------------------- */
body.ast-page-builder-template #primary,
body.ast-page-builder-template #main,
body.ast-page-builder-template #content .ast-container {
    max-width: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
}
@media (min-width: 921px) {
    #primary {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }
    #secondary {
        display: none !important;
    }
}

/* -------------------------------------------------------------
   0c-3. FORCE VERTICAL STACKING (top-to-bottom, no side-by-side)
   Whatever is putting the homepage's top-level sections in a row
   instead of stacking them (a flex/grid rule on #primary or #content
   coming from Astra, a plugin, or a caching/minify quirk), this
   rule wins regardless of source: #primary itself and every
   direct top-level section it contains are forced to plain
   block-level, full-width, one-per-row layout. Nothing here
   changes the internal card GRIDS inside each section — only the
   sections' own stacking behaviour.

   Astra nests page-template output as #primary > #main > (our
   markup), or sometimes #primary > .site-main > (our markup)
   depending on version/hooks — #primary's own children are just
   that one wrapper, so forcing #primary > * alone left the *real*
   row-instead-of-column culprit (#main's children — hero, the
   breadcrumb/quickfacts container, the sticky tab bar, the
   main-layout container all becoming flex/grid siblings) untouched.
   This is exactly what caused the single-listing templates' top
   section (breadcrumb + quick facts) to render as its own narrow
   left column next to the tab bar/content instead of stacking above
   them. Covering #main/.site-main/#content's direct children too
   closes that gap without guessing which wrapper is the real one.
   ------------------------------------------------------------- */
#primary, #main, .site-main, #content, #content .ast-container {
    display: block !important;
    column-count: auto !important;
    columns: auto !important;
}
#primary > *:not(script):not(style):not(noscript):not(template),
#main > *:not(script):not(style):not(noscript):not(template),
.site-main > *:not(script):not(style):not(noscript):not(template),
#content > *:not(script):not(style):not(noscript):not(template),
#content .ast-container > *:not(script):not(style):not(noscript):not(template) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    float: none !important;
    column-count: auto !important;
    columns: auto !important;
}
/* Belt-and-braces: the :not() exclusions above stop this rule from ever
   un-hiding a <script>/<style>/<noscript> in the first place (root-cause
   fix — this is where the JSON-LD schema block was leaking onto the page
   as visible text). This global rule is a second safety net in case any
   other broad "force every child visible" rule gets added later. */
script, style, noscript, template {
    display: none !important;
}

/* -------------------------------------------------------------
   0c-4. UNCONDITIONAL KILL-SWITCH, KEYED OFF OUR OWN BODY CLASS
   Doesn't rely on Astra's own layout body classes (which depend on
   the astra_page_layout/astra_get_content_layout filters actually
   having been read for the current cached copy of the page) — only
   on the `.kon-full-width-template` class this theme adds itself
   via `body_class`. Whatever left a sidebar-shaped column (or
   anything applying column-count/columns to text/card containers)
   next to our content, this wins regardless of source.
   ------------------------------------------------------------- */
body.kon-full-width-template #secondary,
body.kon-full-width-template .widget-area {
    display: none !important;
}
body.kon-full-width-template #primary,
body.kon-full-width-template #main,
body.kon-full-width-template .site-main,
body.kon-full-width-template #content,
body.kon-full-width-template #content .ast-container,
body.kon-full-width-template .kon-location-hero,
body.kon-full-width-template .kon-location-tabs,
body.kon-full-width-template .kon-location-section,
body.kon-full-width-template .kon-container {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    column-count: auto !important;
    columns: auto !important;
}
.kon-cards-grid, .kon-driver-grid, .kon-biz-grid, .kon-related-cards,
.kon-home-news-grid, .kon-home-biz-row, .kon-gallery-grid {
    column-count: auto !important;
    columns: auto !important;
}
.kon-home-hero,
.kon-home-section,
section[class^="kon-home"],
section[class*=" kon-home"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
    float: none !important;
    clear: both;
}

/* -------------------------------------------------------------
   0d. THIRD-PARTY FLOATING WIDGET ISOLATION
   WhatsApp/chat-widget plugins are a very common source of
   "everything got squeezed" bugs when their markup isn't taken
   out of document flow. This forces the common plugin containers
   into fixed positioning regardless of what the plugin itself
   sets, so they can never affect our grid/flex layouts.
   ------------------------------------------------------------- */
.whatsapp-chat-widget, .whatsapp_chat_widget, .wame, .wa-float,
.floating-wa, .floating-whatsapp, .cs-whatsapp-chat, .joinchat,
[class*="whatsapp-widget"], [class*="wa-chat"], [id*="whatsapp-chat"] {
    position: fixed !important;
    z-index: 999999 !important;
}

.kon-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: clamp(1rem, 2vw, 1.75rem);
}

@media (min-width: 1500px) {
    .kon-cards-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px) {
    .kon-cards-grid { grid-template-columns: 1fr; gap: 1.1rem; }
}

.kon-cards-grid.kon-cards-grid,
.kon-driver-grid.kon-driver-grid,
.kon-biz-grid.kon-biz-grid {
    gap: clamp(1rem, 2vw, 1.75rem);
}

.kon-card.kon-card,
.kon-driver-card-archive.kon-driver-card-archive,
.kon-biz-card.kon-biz-card {
    border-radius: var(--kon-radius-xl);
    box-shadow: var(--kon-shadow-card);
    transition: box-shadow .28s ease, transform .28s ease;
    will-change: transform;
}

.kon-card.kon-card:hover,
.kon-driver-card-archive.kon-driver-card-archive:hover,
.kon-biz-card.kon-biz-card:hover {
    box-shadow: var(--kon-shadow-strong);
    transform: translateY(-5px);
}

.kon-card__thumb {
    border-radius: var(--kon-radius-xl) var(--kon-radius-xl) 0 0;
}

.kon-card__thumb img,
.kon-biz-card__media img,
.kon-gallery-grid__item img,
.kon-driver-card-archive img {
    animation: kon-fade-in .5s ease both;
}
@keyframes kon-fade-in {
    from { opacity: 0; transform: scale(1.02); }
    to   { opacity: 1; transform: scale(1); }
}

.kon-card:hover .kon-card__thumb img {
    transform: scale(1.06);
}

/* Wider desktop grids for driver / business cards */
@media (min-width: 1500px) {
    .kon-driver-grid { grid-template-columns: repeat(3, 1fr); }
    .kon-biz-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px) {
    .kon-driver-grid, .kon-biz-grid { grid-template-columns: 1fr; }
}

/* News list rows — subtle modern polish */
.kon-news-list-item {
    border-radius: var(--kon-radius-lg);
    transition: box-shadow .25s ease, transform .25s ease;
}
.kon-news-list-item:hover {
    box-shadow: var(--kon-shadow-hover);
    transform: translateY(-2px);
}
.kon-news-list-item__img img {
    transition: transform .45s ease;
}
.kon-news-list-item:hover .kon-news-list-item__img img {
    transform: scale(1.05);
}

/* -------------------------------------------------------------
   1b. HOMEPAGE GRIDS — extra step for very small phones
   ------------------------------------------------------------- */
@media (max-width: 420px) {
    .kon-home-categories__grid,
    .kon-home-biz-row {
        grid-template-columns: 1fr !important;
    }
    .kon-home-categories__grid {
        margin-top: var(--kon-space-md) !important;
    }
}
@media (max-width: 640px) {
    .kon-home-news-grid { grid-template-columns: 1fr; }
}
@media (min-width: 761px) and (max-width: 1024px) {
    .kon-home-news-grid { grid-template-columns: repeat(2, 1fr); }
    .kon-home-biz-row { grid-template-columns: repeat(3, 1fr); }
}

/* -------------------------------------------------------------
   2. HERO SLIDER (Swiper) — replaces static hero image when a
      listing has more than one photo. Title overlay is untouched.
   ------------------------------------------------------------- */
.kon-hero-slider {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.kon-hero-slider .swiper-slide {
    position: relative;
    width: 100%;
    height: 100%;
}
.kon-hero-slider .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.72;
}
.kon-hero-slider .swiper-pagination {
    bottom: var(--kon-space-lg) !important;
    right: var(--kon-space-lg) !important;
    left: auto !important;
    width: auto !important;
    display: flex;
    gap: .3rem;
    z-index: 3;
}
.kon-hero-slider .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    opacity: 1;
    transition: width .25s ease, background .25s ease;
}
.kon-hero-slider .swiper-pagination-bullet-active {
    width: 22px;
    border-radius: var(--kon-radius-pill);
    background: var(--kon-amber);
}
.kon-hero-slider__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(20,35,10,.35);
    border: 1px solid rgba(255,255,255,.35);
    backdrop-filter: blur(6px);
    cursor: pointer;
    transition: background .2s ease;
}
.kon-hero-slider__nav:hover { background: rgba(20,35,10,.6); }
.kon-hero-slider__nav--prev { left: var(--kon-space-lg); }
.kon-hero-slider__nav--next { right: var(--kon-space-lg); }
.kon-hero-slider__nav::after { font-size: 16px; }
.kon-hero-slider__count {
    position: absolute;
    top: var(--kon-space-lg);
    right: var(--kon-space-lg);
    z-index: 3;
    background: rgba(20,35,10,.5);
    color: #fff;
    font-size: .74rem;
    font-weight: 600;
    padding: .35em .75em;
    border-radius: var(--kon-radius-pill);
    backdrop-filter: blur(6px);
}
.kon-hero-slider__empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
    opacity: .15;
    color: #fff;
}

@media (max-width: 640px) {
    .kon-hero-slider__nav { display: none; }
    .kon-hero-slider__count { font-size: .68rem; }
}

/* -------------------------------------------------------------
   3. BENTO-STYLE PHOTO GALLERY GRID
   ------------------------------------------------------------- */
.kon-gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 130px;
    gap: .5rem;
    border-radius: var(--kon-radius-lg);
}
.kon-gallery-grid__item {
    position: relative;
    padding: 0;
    border: none;
    cursor: pointer;
    overflow: hidden;
    border-radius: var(--kon-radius-md);
    background: var(--kon-pine-light);
}
.kon-gallery-grid__item:first-child {
    grid-column: span 2;
    grid-row: span 2;
}
.kon-gallery-grid__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease, opacity .5s ease;
}
.kon-gallery-grid__item:hover img {
    transform: scale(1.08);
}
.kon-gallery-grid__item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(20,35,10,0);
    transition: background .2s ease;
}
.kon-gallery-grid__item:hover::after {
    background: rgba(20,35,10,.12);
}
.kon-gallery-grid__more {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(20,35,10,.55);
    color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
}

@media (max-width: 760px) {
    .kon-gallery-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; }
}
@media (max-width: 480px) {
    .kon-gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 90px; }
    .kon-gallery-grid__item:first-child { grid-column: span 2; grid-row: span 1; }
}

/* -------------------------------------------------------------
   4. FULL-SCREEN LIGHTBOX
   ------------------------------------------------------------- */
.kon-lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 16, 8, 0.94);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease;
}
.kon-lightbox.is-open {
    opacity: 1;
    visibility: visible;
}
body.kon-lightbox-open {
    overflow: hidden;
}
.kon-lightbox__swiper {
    width: 100%;
    height: 100%;
}
.kon-lightbox__swiper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4vh 4vw;
}
.kon-lightbox__swiper .swiper-slide img {
    max-width: 100%;
    max-height: 88vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--kon-radius-md);
    box-shadow: var(--kon-shadow-strong);
}
.kon-lightbox__close {
    position: absolute;
    top: var(--kon-space-lg);
    right: var(--kon-space-lg);
    z-index: 2;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.3);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    transition: background .2s ease;
}
.kon-lightbox__close:hover { background: rgba(255,255,255,.22); }
.kon-lightbox__counter {
    position: absolute;
    top: var(--kon-space-lg);
    left: var(--kon-space-lg);
    z-index: 2;
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
    background: rgba(255,255,255,.1);
    padding: .4em .9em;
    border-radius: var(--kon-radius-pill);
}

@media (max-width: 640px) {
    .kon-lightbox__close, .kon-lightbox__counter { top: var(--kon-space-md); }
    .kon-lightbox__close { right: var(--kon-space-md); width: 38px; height: 38px; font-size: 1.3rem; }
    .kon-lightbox__counter { left: var(--kon-space-md); }
}

/* -------------------------------------------------------------
   4b. SINGLE-IMAGE HEROES (Taxi / News) — subtle Ken Burns zoom
   ------------------------------------------------------------- */
@keyframes kon-ken-burns {
    from { transform: scale(1); }
    to   { transform: scale(1.08); }
}
.kon-taxi-hero__img,
.kon-single-hero__img {
    animation: kon-ken-burns 14s ease-in-out infinite alternate;
}
.kon-news-hero img {
    transition: transform .5s ease;
}
.kon-news-hero:hover img {
    transform: scale(1.03);
}

/* -------------------------------------------------------------
   5. FILTER BAR / CHIPS — fluid on small screens
   ------------------------------------------------------------- */
@media (max-width: 540px) {
    .kon-filter-bar { flex-direction: column; align-items: stretch; }
    .kon-filter-select { min-width: 0; width: 100%; }
    .kon-filter-actions { width: 100%; }
    .kon-filter-actions .kon-btn { flex: 1; text-align: center; }
}

/* -------------------------------------------------------------
   7. FULL-WIDTH DOWN SECTIONS
   Every stacked section gets an edge-to-edge background while its
   content stays boxed at --kon-container-max. Most templates already
   do this by pairing a full-width wrapper (<section>/<div>) with a
   nested .kon-container. .kon-full-bleed is for the rare case where
   a section needs a full-width background WITHOUT a nested container
   in the markup — it breaks out of any parent and re-applies the
   same gutters .kon-container would have, so content still lines up.
   ------------------------------------------------------------- */
.kon-full-bleed {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-inline: calc(max((100vw - var(--kon-container-max)) / 2, 0px) + var(--kon-container-pad));
    box-sizing: border-box;
}

/* Location hub: alternate full-width backgrounds down the page,
   same rhythm as the homepage sections. */
.kon-location-section:nth-of-type(2n) {
    background: var(--kon-glacier);
}
.kon-location-section {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-inline: calc(max((100vw - var(--kon-container-max)) / 2, 0px) + var(--kon-container-pad));
    box-sizing: border-box;
}

/* -------------------------------------------------------------
   8. HORIZONTAL SCROLL SYSTEM
   Generic utility + specific conversions for strips, chip/tab
   bars, and in-card photo galleries. Touch-friendly momentum
   scroll, snap points, no visible scrollbar, soft edge fade.
   Extra class-doubled selectors (.x.x) raise specificity above
   the inline <style> blocks templates print in the page body.
   ------------------------------------------------------------- */
.kon-scroll-x {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x proximity;
}
.kon-scroll-x::-webkit-scrollbar { display: none; }
.kon-scroll-x > * { scroll-snap-align: start; flex-shrink: 0; }

/* Soft fade at the trailing edge, hinting there's more to scroll */
.kon-scroll-fade {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
}
.kon-scroll-fade--start {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 28px, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 28px, #000 calc(100% - 28px), transparent 100%);
}
[class*="kon-scroll"].kon-is-dragging,
.kon-archive-chips.kon-is-dragging,
.kon-subtax-list.kon-is-dragging,
.kon-dest-strip.kon-is-dragging,
.kon-home-categories__grid.kon-is-dragging,
.kon-gallery-grid.kon-is-dragging {
    cursor: grabbing;
    scroll-snap-type: none;
    user-select: none;
}

/* -- Filter / tab / category chip bars (hotels, places, taxi,
      businesses, news, location-hub sub-areas) -- */
.kon-archive-chips.kon-archive-chips,
.kon-subtax-list.kon-subtax-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x proximity;
    padding-block: 2px; /* room for focus rings */
}
.kon-archive-chips.kon-archive-chips::-webkit-scrollbar,
.kon-subtax-list.kon-subtax-list::-webkit-scrollbar { display: none; }
.kon-archive-chips.kon-archive-chips .kon-archive-chip,
.kon-subtax-list.kon-subtax-list li {
    flex-shrink: 0;
    scroll-snap-align: start;
}

/* -- Destination / category strips ("Instagram stories row") -- */
.kon-dest-strip.kon-dest-strip {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    scroll-snap-type: x proximity;
    gap: var(--kon-space-md);
    padding-bottom: 4px;
}
.kon-dest-strip.kon-dest-strip::-webkit-scrollbar { display: none; }
.kon-dest-strip.kon-dest-strip .kon-dest-strip__card {
    flex: 0 0 clamp(160px, 42vw, 220px);
    scroll-snap-align: start;
}
@media (min-width: 900px) {
    .kon-dest-strip.kon-dest-strip .kon-dest-strip__card { flex-basis: 220px; }
}

@media (max-width: 640px) {
    .kon-home-categories__grid.kon-home-categories__grid {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        scroll-snap-type: x proximity;
        gap: var(--kon-space-md);
    }
    .kon-home-categories__grid.kon-home-categories__grid::-webkit-scrollbar { display: none; }
    .kon-home-categories__grid.kon-home-categories__grid .kon-category-card {
        flex: 0 0 42vw;
        scroll-snap-align: start;
    }
}

/* -- In-card photo galleries: bento grid on desktop/tablet,
      swipeable horizontal strip on phones -- */
@media (max-width: 760px) {
    .kon-gallery-grid.kon-gallery-grid {
        display: flex;
        flex-wrap: nowrap;
        grid-auto-rows: unset;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        scroll-snap-type: x mandatory;
        gap: .6rem;
        border-radius: 0;
    }
    .kon-gallery-grid.kon-gallery-grid::-webkit-scrollbar { display: none; }
    .kon-gallery-grid.kon-gallery-grid .kon-gallery-grid__item {
        flex: 0 0 78vw;
        aspect-ratio: 4 / 3;
        grid-column: unset !important;
        grid-row: unset !important;
        scroll-snap-align: center;
    }
}

/* -------------------------------------------------------------
   9. LAPTOP & DESKTOP RESPONSIVE REFINEMENTS (≥1024px)
   The scroll-strip conversions above are a phone/tablet pattern —
   on laptops and desktops there's usually enough width to just
   show everything, so those components switch back to a normal
   fluid grid instead of forcing a scrollbar. Also closes a couple
   of gaps in the fixed-column grids and tightens the two-column
   sidebar layouts right after they collapse from desktop to stacked.
   ------------------------------------------------------------- */

/* Destination strip: horizontal "stories" scroll on phones/tablets,
   a proper responsive grid once there's room to show it all. */
@media (min-width: 1024px) {
    .kon-dest-strip.kon-dest-strip {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        overflow-x: visible;
        gap: var(--kon-space-md);
    }
    .kon-dest-strip.kon-dest-strip .kon-dest-strip__card {
        flex: initial;
    }
}

/* Sidebar layouts (single listings + destination page): give the
   sidebar a little less room right after it collapses to a
   two-column layout, so the main content doesn't feel squeezed
   on 13"–14" laptop widths. */
@media (min-width: 861px) and (max-width: 1180px) {
    .kon-single-layout.kon-single-layout {
        grid-template-columns: 1fr 280px;
        gap: var(--kon-space-xl);
    }
    .kon-dest-layout.kon-dest-layout {
        grid-template-columns: 1fr 260px;
        gap: var(--kon-space-xl);
    }
}

/* -------------------------------------------------------------
   6. REDUCED MOTION
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .kon-card, .kon-driver-card-archive, .kon-biz-card,
    .kon-gallery-grid__item img, .kon-card__thumb img,
    .kon-news-list-item, .kon-hero-slider .swiper-slide img {
        transition: none !important;
        animation: none !important;
    }
}

/* -------------------------------------------------------------
   10. ASTRA HEADER — DESKTOP ALIGNMENT / SPACING POLISH
   The child theme doesn't ship its own header.php (Astra's Header
   Builder renders the nav), so this only tidies spacing/alignment;
   it doesn't touch Astra's own responsive breakpoint behaviour.
   ------------------------------------------------------------- */
@media (min-width: 921px) {
    .main-header-bar .ast-container,
    .site-header .ast-container {
        max-width: var(--kon-container-max);
        padding-inline: var(--kon-container-pad);
    }
    .main-header-bar .main-navigation ul.menu > li > a {
        padding-top: .9rem;
        padding-bottom: .9rem;
        letter-spacing: .01em;
    }
}

/* -------------------------------------------------------------
   11. ASTRA FOOTER WIDGET AREA — RESPONSIVE GRID SAFETY NET
   Astra assigns footer widget column widths with inline percentage
   styles based on the Customizer "columns" setting. On some
   boxed/legacy setups those percentage columns can wrap unevenly
   or look squeezed next to our new full-width content sections.
   This turns the footer widget row into a proper auto-fit grid so
   columns stay equal-width on desktop and stack cleanly on mobile,
   without needing to know the exact column count chosen in the
   Customizer.
   ------------------------------------------------------------- */
.ast-builder-footer-row .footer-widget-area,
.footer-adv-overlay .footer-widget-area {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--kon-space-xl, 2rem);
    width: 100% !important;
    float: none !important;
}
.ast-builder-footer-row .footer-widget-area > * {
    width: 100% !important;
    margin: 0 !important;
}
.footer-adv, footer.site-footer, #colophon {
    width: 100%;
    max-width: 100%;
    overflow: visible; /* was `hidden` — if footer children collapse in
        height (floated widget columns, negative margins, etc.) an
        overflow:hidden parent clips its own content to nothing, which
        is what made the footer disappear. `visible` never clips. */
}
/* Clearfix so the footer's own height never collapses to 0 in the first
   place, regardless of whether Astra's footer columns are floated. */
.footer-adv::after, footer.site-footer::after, #colophon::after {
    content: "";
    display: table;
    clear: both;
}

/* -------------------------------------------------------------
   BREADCRUMB (kon_breadcrumb() in functions.php)
   Used on single-listing pages AND taxonomy-location.php — lives
   here (always loaded) rather than in a page-type-specific
   stylesheet so it's never missing depending on which template
   calls it. Was completely unstyled by default (plain <ol>/<li>
   bullets + serif font).
   ------------------------------------------------------------- */
.kon-breadcrumb {
    margin: var(--kon-space-lg) 0 var(--kon-space-md);
}
.kon-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .3rem;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .82rem;
    color: var(--kon-slate-light);
}
.kon-breadcrumb a {
    color: var(--kon-slate-mid);
    font-weight: 500;
}
.kon-breadcrumb a:hover { color: var(--kon-pine); }
.kon-breadcrumb li { display: flex; align-items: center; gap: .3rem; }
.kon-breadcrumb [aria-current="page"] {
    color: var(--kon-slate);
    font-weight: 600;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kon-bc-sep { opacity: .5; }