/* The theme's sticky header (position: fixed) is meant to stay pinned near
   the top of the viewport. Its own JS sometimes leaves a stale inline top
   offset (varies with zoom) when the browser's zoom level changes without
   the script recalculating — the header then appears to float partway down
   the page instead of staying pinned. Forcing a fixed top here always wins
   over that stale inline style.
   It has to be 44px, not 0: the logo inside the header is deliberately
   oversized and pulled up via `margin-top:-44px` on .nm-header-1-wrap so it
   "pops out" above the bar — that only works with >=44px of clearance above
   the header. At top:0 there's nothing above the viewport edge to bleed
   into, so the top of the logo (and the language-flag icons next to it)
   was getting clipped clean off. On phones the theme uses a smaller
   -10px pull instead of -44px (its own @media(max-width:767px) rules),
   so the clearance needed there is smaller too. */
.wa_sticky_header {
    top: 64px !important;
}
@media (max-width: 767px) {
    .wa_sticky_header {
        top: 32px !important;
    }
}

/* Instagram carousels keep auto-scrolling on phones too (dm-ig-carousel.js
   handles pausing it on touch-drag and resuming after), same as desktop —
   just needs touch-action so the browser doesn't fight the drag. */
.dm-ig-track {
    touch-action: pan-y;
}

/* On phones, the theme shrinks EVERY .dm-ig-slide (including link-only
   Instagram embeds) down to 180x230px — fine for an uploaded photo/video,
   but Instagram's own embed widget always renders at ~326px wide and a tall
   variable height regardless of that container, so it was getting silently
   clipped down to a sliver by the container's overflow:hidden. Give embed
   slides room to actually show the real post instead. */
@media (max-width: 768px) {
    .dm-ig-slide.dm-ig-slide-embed {
        width: 326px !important;
        height: auto !important;
        overflow: visible;
    }
}

/* When Instagram's own embed.js fails to turn a post into a real embed
   (blocked by an ad blocker, a slow/failed load, or Instagram's own
   inconsistent behavior — happens to real visitors, not just us testing),
   dm-ig-carousel.js swaps the empty slide for one of these link-out cards
   instead of leaving blank space, and drops the slide back to the normal
   .dm-ig-slide sizing (dm-ig-carousel.js removes dm-ig-slide-embed) so it
   matches every other card's height instead of the taller, mostly-empty
   box the embed's own height:auto allowance left behind. This just needs
   to fill that normal-size slide. */
.dm-ig-fallback-link {
    height: 100%;
    border-radius: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: background .2s;
}
.dm-ig-fallback-link:hover {
    background: linear-gradient(135deg, #242424, #333);
    color: #ccc;
}

/* Every carousel video autoplays muted (required for autoplay to work at
   all without a user gesture) — this button lets a visitor turn its sound
   on if they actually want it, off again if not. */
.dm-ig-slide-video {
    position: relative;
}
.dm-ig-mute-btn {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, .55);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 4;
}
.dm-ig-mute-btn:hover {
    background: rgba(0, 0, 0, .75);
}

/* Visible caption under a video slide — real on-page text (unlike a
   <video>'s lack of an alt attribute), so it actually contributes to SEO
   instead of the description going nowhere. Single line with an ellipsis
   so a long caption can't push the fixed-size slide taller; left room on
   the right so it doesn't sit under the mute button. */
.dm-ig-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 6px 40px 6px 10px;
    background: linear-gradient(transparent, rgba(0, 0, 0, .75));
    color: #fff;
    font-size: 11px;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
    z-index: 3;
}