.hmg-gallery-container {
    margin: 0 auto;
    max-width: 100%;
    width: var(--hmg-container-width, 100%);
    padding: 0 15px;
    box-sizing: border-box;
}

/* True full-bleed: breaks the gallery out of the theme's boxed content
   wrapper (e.g. Blocksy's .container) so it spans the full browser width,
   not just 100% of whatever narrower parent the theme puts it in. */
.hmg-full-bleed {
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

/* Main title styling */
.hmg-main-title {
    margin-bottom: 20px;
    font-weight: 600;
    line-height: 1.3;
}

/* Title + Filter Bar on one row */
.hmg-title-filter-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
    margin: 0 auto 20px;
    padding: 0 15px;
    box-sizing: border-box;
}
.hmg-title-filter-row .hmg-title-inline {
    margin-bottom: 0;
    flex: 0 1 auto;
}
.hmg-title-filter-row .hmg-filter-bar {
    margin: 0;
    flex: 1 1 auto;
    width: auto;
}
@media (max-width: 640px) {
    .hmg-title-filter-row { flex-direction: column; align-items: flex-start; }
}

.hmg-masonry-wrapper {
    column-count: var(--hmg-columns, 3);
    column-gap: var(--hmg-gap, 20px);
    width: 100%;
}

/* === Justified Grid Layout === */
.hmg-justified-wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--hmg-gap, 20px) !important;
    width: 100%;
    align-items: flex-start;
}

.hmg-justified-wrapper::after {
    display: none !important;
}

.hmg-justified-wrapper .hmg-item {
    display: block !important;
    margin-bottom: 0 !important;
    flex-grow: var(--hmg-aspect-ratio, 1.5);
    flex-shrink: 1;
    flex-basis: auto;
    height: var(--hmg-row-height, 250px);
    width: calc(var(--hmg-row-height, 250px) * var(--hmg-aspect-ratio, 1.5));
    min-width: 40px;
    max-width: 100%;
    box-sizing: border-box !important;
}

.hmg-masonry-wrapper .hmg-item {
    display: inline-block !important;
    width: 100% !important;
    margin-bottom: var(--hmg-gap, 20px) !important;
    break-inside: avoid-column !important;
    -webkit-column-break-inside: avoid !important;
    page-break-inside: avoid !important;
    aspect-ratio: var(--hmg-aspect-ratio, 1.5);
    box-sizing: border-box !important;
    vertical-align: top;
}

.hmg-masonry-wrapper .hmg-image-link,
.hmg-masonry-wrapper .hmg-transparent-bg,
.hmg-justified-wrapper .hmg-image-link,
.hmg-justified-wrapper .hmg-transparent-bg {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.hmg-masonry-wrapper .hmg-item img,
.hmg-justified-wrapper .hmg-item img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

.hmg-item {
    break-inside: avoid-column;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    margin-bottom: var(--hmg-gap, 20px);
    position: relative;
    overflow: hidden !important;
    border: none !important;
    border-radius: var(--hmg-image-radius, 0px) !important;
    box-sizing: border-box !important;
}

/* The frame is drawn as an inset ring rather than a real border on purpose.
   A border sits inside the tile's box, so it shrinks the area the image fills
   by a couple of pixels on each side — but only the tile has the aspect-ratio,
   not that shrunken area. The two shapes then disagree slightly and
   object-fit:cover trims the difference off the top and bottom. An inset ring
   paints over the image instead of displacing it, so the image box keeps
   exactly the ratio the tile was sized with and nothing gets trimmed. */
.hmg-item::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border: var(--hmg-image-border-width, 0px) var(--hmg-image-border-style, solid) var(--hmg-image-border-color, #cccccc);
    border-radius: var(--hmg-image-radius, 0px);
    pointer-events: none;
    z-index: 4;
}

.hmg-image-link {
    display: block;
    position: relative;
    text-decoration: none;
}

/* The PNG checkerboard backdrop must behave as a transparent pass-through box,
   never as an extra layout box that shrink-wraps its image. */
.hmg-transparent-bg {
    display: block;
    position: relative;
    line-height: 0;
}

.hmg-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.35s ease;
}

/* === Image Fit ===
   cover  = fill the tile, crop overflow (uniform grid, default)
   contain = show the whole image, letterboxed (nothing ever cropped) */
.hmg-fit-cover .hmg-item img   { object-fit: cover; }
.hmg-fit-contain .hmg-item img { object-fit: contain; }
/* Letterbox colour fills the space around a "contained" image. Tiles that carry
   the transparency checkerboard are left alone so the checker pattern stays the
   backdrop there rather than a flat colour. */
.hmg-fit-contain .hmg-item { background-color: var(--hmg-contain-bg, #f6f7f8); }

/* === Hover effects (opt-in per setting; 'none' means no transform at all) === */
.hmg-hovfx-zoom .hmg-image-link:hover img        { transform: scale(1.06); }
.hmg-hovfx-zoomout .hmg-image-link img           { transform: scale(1.06); }
.hmg-hovfx-zoomout .hmg-image-link:hover img     { transform: scale(1); }
.hmg-hovfx-lift .hmg-item                        { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hmg-hovfx-lift .hmg-item:hover                  { transform: translateY(-6px); box-shadow: 0 12px 28px rgba(0,0,0,0.18); }
.hmg-hovfx-zoomlift .hmg-item                    { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.hmg-hovfx-zoomlift .hmg-item:hover              { transform: translateY(-6px); box-shadow: 0 12px 28px rgba(0,0,0,0.18); }
.hmg-hovfx-zoomlift .hmg-image-link:hover img    { transform: scale(1.06); }

/* === Overlay Container (holds background, category & title) === */
.hmg-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    display: flex;
    justify-content: center;
    padding: 15px;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 2;
}
.hmg-overlay-inner {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Title block position within the tile */
.hmg-tpos-bottom .hmg-overlay { align-items: flex-end; }
.hmg-tpos-center .hmg-overlay { align-items: center; }
.hmg-tpos-top    .hmg-overlay { align-items: flex-start; }

/* Text alignment */
.hmg-talign-left   .hmg-overlay { justify-content: flex-start; }
.hmg-talign-left   .hmg-overlay-inner { text-align: left; }
.hmg-talign-center .hmg-overlay { justify-content: center; }
.hmg-talign-center .hmg-overlay-inner { text-align: center; }
.hmg-talign-right  .hmg-overlay { justify-content: flex-end; }
.hmg-talign-right  .hmg-overlay-inner { text-align: right; }

/* === Background Overlay Layer (color + opacity set by admin) === */
.hmg-color-layer {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: var(--hmg-hover-color, rgba(0,0,0,0.5));
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
    pointer-events: none;
}
.hmg-image-link:hover .hmg-color-layer,
.hmg-image-link:focus-visible .hmg-color-layer,
.hmg-hover-always .hmg-color-layer {
    opacity: var(--hmg-hover-opacity, 0.6);
}

/* Overlay styles — gradient/bar variants only darken where the text sits, so
   the artwork stays visible (much nicer for a stock-image gallery). */
.hmg-ovl-none .hmg-color-layer { display: none; }
.hmg-ovl-gradient .hmg-color-layer {
    background: linear-gradient(to top,
        var(--hmg-hover-color, #000) 0%,
        rgba(0,0,0,0) 55%);
}
.hmg-ovl-bar .hmg-color-layer {
    top: auto;
    height: 42%;
    background: linear-gradient(to top,
        var(--hmg-hover-color, #000) 0%,
        rgba(0,0,0,0) 100%);
}
.hmg-ovl-gradient.hmg-tpos-top .hmg-color-layer,
.hmg-ovl-bar.hmg-tpos-top .hmg-color-layer {
    /* keep the darkened band under the text when the text sits at the top */
    transform: scaleY(-1);
}

/* === Category chip (optional) === */
.hmg-item-cat {
    position: relative;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: inherit;
    transition: opacity 0.28s ease, transform 0.28s ease;
}
.hmg-item-cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    max-width: 100%;
    color: var(--hmg-item-cat-color, #fff);
    font-size: var(--hmg-item-cat-size, 11px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.3px;
}
.hmg-item-cat-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Chip variants get a subtle pill so the label stays readable on any artwork */
.hmg-catstyle-chip .hmg-item-cat-chip,
.hmg-catstyle-chip_icon .hmg-item-cat-chip,
.hmg-catstyle-icon_only .hmg-item-cat-chip {
    background: var(--hmg-item-cat-bg, rgba(0,0,0,0.55));
    padding: 4px 8px;
    border-radius: 999px;
    backdrop-filter: blur(2px);
}
.hmg-catstyle-icon_only .hmg-item-cat-chip { padding: 5px; }

.hmg-item-cat-icon-img,
.hmg-item-cat-icon-svg {
    width: calc(var(--hmg-item-cat-size, 11px) + 3px);
    height: calc(var(--hmg-item-cat-size, 11px) + 3px);
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}
.hmg-item-cat-icon-svg { fill: currentColor; }

/* === Title === */
.hmg-title {
    position: relative;
    z-index: 2;
    color: var(--hmg-title-color, #fff);
    font-size: var(--hmg-item-title-size, 14px);
    font-weight: var(--hmg-item-title-weight, 600);
    line-height: 1.35;
    max-width: 100%;
    overflow-wrap: anywhere;
    transition: opacity 0.28s ease, transform 0.28s ease;
    will-change: opacity, transform;
}

/* Hidden-by-default state.
   Scoped to the grid wrapper and marked !important so a theme's own
   ".entry-title { opacity: 1 }"-style rules can't out-specify it and leave the
   text stuck permanently on screen. The reveal rules below are scoped just as
   tightly, so they still win when the tile is actually hovered. */
.hmg-masonry-wrapper .hmg-title,
.hmg-masonry-wrapper .hmg-item-cat,
.hmg-justified-wrapper .hmg-title,
.hmg-justified-wrapper .hmg-item-cat {
    opacity: 0 !important;
    visibility: hidden;
}

/* Reveal animation for the whole text block */
.hmg-tanim-slide-up .hmg-title,
.hmg-tanim-slide-up .hmg-item-cat     { transform: translateY(10px); }
.hmg-tanim-slide-down .hmg-title,
.hmg-tanim-slide-down .hmg-item-cat   { transform: translateY(-10px); }
.hmg-tanim-none .hmg-title,
.hmg-tanim-none .hmg-item-cat         { transition: none; }

.hmg-masonry-wrapper .hmg-image-link:hover .hmg-title,
.hmg-masonry-wrapper .hmg-image-link:hover .hmg-item-cat,
.hmg-masonry-wrapper .hmg-image-link:focus-visible .hmg-title,
.hmg-masonry-wrapper .hmg-image-link:focus-visible .hmg-item-cat,
.hmg-justified-wrapper .hmg-image-link:hover .hmg-title,
.hmg-justified-wrapper .hmg-image-link:hover .hmg-item-cat,
.hmg-justified-wrapper .hmg-image-link:focus-visible .hmg-title,
.hmg-justified-wrapper .hmg-image-link:focus-visible .hmg-item-cat,
.hmg-hover-always .hmg-title,
.hmg-hover-always .hmg-item-cat {
    opacity: 1 !important;
    visibility: visible;
    transform: translateY(0);
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .hmg-title,
    .hmg-item-cat,
    .hmg-item,
    .hmg-item img,
    .hmg-badge {
        transition: none !important;
        transform: none !important;
    }
}

/* Enhanced Pagination Styles */
.hmg-pagination {
    margin-top: 40px;
    text-align: center;
    clear: both;
}

.hmg-pagination a,
.hmg-pagination span {
    display: inline-block;
    margin: 0 3px;
    padding: 8px 12px;
    text-decoration: none;
    border: 1px solid;
    min-width: 1.5em;
    line-height: 1.5;
    text-align: center;
    transition: all 0.3s ease;
}

.hmg-pagination .current,
.hmg-pagination a:hover {
    color: #fff !important;
}

.hmg-load-more-button {
    display: inline-block;
    padding: 12px 24px;
    color: #fff;
    border: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hmg-loading {
    margin-top: 20px;
    font-style: italic;
}

.hmg-infinite-scroll-trigger {
    height: 50px;
    margin-top: 30px;
}

/* Responsive Columns */
@media (max-width: 1024px) {
    .hmg-masonry-wrapper {
        column-count: 2;
    }
}

@media (max-width: 768px) {
    .hmg-masonry-wrapper {
        column-count: 1;
    }
    
    .hmg-pagination a,
    .hmg-pagination span {
        padding: 6px 10px;
        margin: 0 2px;
    }
}

/* Rounded corners for grid images */
.hmg-image-link img {
    border-radius: var(--hmg-image-radius);
}

/* Ensure round corners are consistent across all layers */
.hmg-image-link img,
.hmg-overlay,
.hmg-color-layer {
    border-radius: var(--hmg-image-radius, 0px);
    overflow: hidden;
}

/* Explicitly remove any theme-level borders/shadows around the entire gallery area */
.hmg-gallery-container,
.hmg-outer-container,
.hmg-masonry-wrapper,
.hmg-justified-wrapper {
    border: none !important;
    box-shadow: none !important;
}

/* === Search Bar Layout === */
.hmg-search-bar-container {
    display: flex !important;
    justify-content: center !important;
    margin-top: 25px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-bottom: var(--hmg-section-gap, 35px) !important;
    max-width: var(--hmg-search-width, 600px) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0 15px !important;
}

.hmg-search-form {
    display: flex !important;
    width: 100% !important;
    align-items: center !important;
    border: 2px solid var(--hmg-search-border, #e0e0e0) !important;
    border-radius: 6px !important;
    /* overflow stays visible so the category dropdown panel isn't clipped;
       corner rounding is instead applied to the first/last child below */
    overflow: visible !important;
    background: #ffffff !important;
    transition: border-color 0.3s ease !important;
    height: 48px !important;
    box-sizing: border-box !important;
}

.hmg-search-form > .hmg-inline-dropdown:first-child .hmg-inline-dropdown-toggle,
.hmg-search-form > .hmg-search-input:first-child {
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
}

.hmg-search-form > .hmg-search-submit:last-child {
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
}

.hmg-search-form:focus-within {
    border-color: var(--hmg-search-border-focus, #2ecc71) !important;
}

.hmg-search-input {
    flex-grow: 1 !important;
    border: none !important;
    padding: 10px 16px !important;
    font-size: 15px !important;
    outline: none !important;
    background: transparent !important;
    box-shadow: none !important;
    height: 44px !important;
    box-sizing: border-box !important;
    color: #333333 !important;
}

.hmg-search-cat-select {
    border: none !important;
    border-left: 1px solid #e0e0e0 !important;
    padding: 0 15px !important;
    font-size: 14px !important;
    outline: none !important;
    background: #fcfcfc !important;
    height: 44px !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    max-width: 160px !important;
    color: #555555 !important;
    border-radius: 0 !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23777' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    background-size: 14px !important;
    padding-right: 30px !important;
}

.hmg-search-submit {
    background: var(--hmg-search-btn-color, #2ecc71) !important;
    border: none !important;
    width: 46px !important;
    height: 44px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.3s ease !important;
    color: #ffffff !important;
    padding: 0 !important;
    outline: none !important;
}

.hmg-search-submit:hover {
    background: var(--hmg-search-btn-hover, #27ae60) !important;
}

.hmg-search-submit svg {
    width: 20px !important;
    height: 20px !important;
    fill: currentColor !important;
}

@media (max-width: 580px) {
    .hmg-search-form {
        height: auto !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }
    
    .hmg-search-input {
        width: 100% !important;
        border-bottom: 1px solid #e0e0e0 !important;
    }
    
    .hmg-search-cat-select {
        flex-grow: 1 !important;
        border-left: none !important;
        max-width: 100% !important;
        height: 40px !important;
    }
    
    .hmg-search-submit {
        flex-grow: 0 !important;
        width: 50px !important;
        height: 40px !important;
    }
}

/* ===================================================================
 * Performance: skip rendering work for off-screen grid items
 * =================================================================== */
.hmg-item {
    content-visibility: auto;
    contain-intrinsic-size: 1px 320px;
}

/* ===================================================================
 * Badges
 * =================================================================== */
.hmg-badge {
    position: absolute;
    z-index: 3;
    display: inline-block;
    background: var(--hmg-badge-bg, #2ecc71);
    color: var(--hmg-badge-color, #fff);
    font-size: var(--hmg-badge-font-size, 11px);
    line-height: 1;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 5px 9px;
    border-radius: var(--hmg-badge-radius, 4px);
    pointer-events: none;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

/* Positions */
.hmg-badge-pos-top-left     { top: var(--hmg-badge-offset, 10px); left: var(--hmg-badge-offset, 10px); }
.hmg-badge-pos-top-right    { top: var(--hmg-badge-offset, 10px); right: var(--hmg-badge-offset, 10px); }
.hmg-badge-pos-top-center   { top: var(--hmg-badge-offset, 10px); left: 50%; transform: translateX(-50%); }
.hmg-badge-pos-bottom-left  { bottom: var(--hmg-badge-offset, 10px); left: var(--hmg-badge-offset, 10px); }
.hmg-badge-pos-bottom-right { bottom: var(--hmg-badge-offset, 10px); right: var(--hmg-badge-offset, 10px); }
.hmg-badge-pos-bottom-center{ bottom: var(--hmg-badge-offset, 10px); left: 50%; transform: translateX(-50%); }
.hmg-badge-pos-center-left  { top: 50%; left: var(--hmg-badge-offset, 10px); transform: translateY(-50%); }
.hmg-badge-pos-center-right { top: 50%; right: var(--hmg-badge-offset, 10px); transform: translateY(-50%); }
.hmg-badge-pos-center       { top: 50%; left: 50%; transform: translate(-50%, -50%); }

/* Sizes */
.hmg-badge-size-small  { padding: 3px 7px; font-size: calc(var(--hmg-badge-font-size, 11px) - 2px); }
.hmg-badge-size-large  { padding: 7px 12px; font-size: calc(var(--hmg-badge-font-size, 11px) + 3px); }

/* Visibility / animation (default: only shown on hover) */
.hmg-badge-anim-fade { opacity: 0; transition: opacity 0.25s ease; }
.hmg-badge-anim-slide { opacity: 0; transform: translateY(6px); transition: opacity 0.25s ease, transform 0.25s ease; }
.hmg-badge-anim-slide.hmg-badge-pos-top-center,
.hmg-badge-anim-slide.hmg-badge-pos-bottom-center { transform: translate(-50%, 6px); }
.hmg-badge-anim-slide.hmg-badge-pos-center-left,
.hmg-badge-anim-slide.hmg-badge-pos-center-right { transform: translateY(calc(-50% + 6px)); }
.hmg-badge-anim-slide.hmg-badge-pos-center { transform: translate(-50%, calc(-50% + 6px)); }

.hmg-image-link:hover .hmg-badge-anim-fade { opacity: 1; }
.hmg-image-link:hover .hmg-badge-anim-slide { opacity: 1; }
.hmg-image-link:hover .hmg-badge-anim-slide.hmg-badge-pos-top-center,
.hmg-image-link:hover .hmg-badge-anim-slide.hmg-badge-pos-bottom-center { transform: translate(-50%, 0); }
.hmg-image-link:hover .hmg-badge-anim-slide.hmg-badge-pos-center-left,
.hmg-image-link:hover .hmg-badge-anim-slide.hmg-badge-pos-center-right { transform: translateY(-50%); }
.hmg-image-link:hover .hmg-badge-anim-slide.hmg-badge-pos-center { transform: translate(-50%, -50%); }

/* "Always visible" badges (visibility=always adds .hmg-badge-visible from PHP) */
.hmg-badge-anim-none { opacity: 1; }
.hmg-badge-visible.hmg-badge-anim-fade,
.hmg-badge-visible.hmg-badge-anim-slide {
    opacity: 1 !important;
    transform: none !important;
}
.hmg-badge-visible.hmg-badge-pos-top-center,
.hmg-badge-visible.hmg-badge-pos-bottom-center { transform: translateX(-50%) !important; }
.hmg-badge-visible.hmg-badge-pos-center-left,
.hmg-badge-visible.hmg-badge-pos-center-right { transform: translateY(-50%) !important; }
.hmg-badge-visible.hmg-badge-pos-center { transform: translate(-50%, -50%) !important; }
.hmg-badge-no-shadow { box-shadow: none; }

/* ===================================================================
 * Premium Search Dropdown
 * =================================================================== */
.hmg-search-bar-container { position: relative !important; flex-direction: column !important; }
.hmg-search-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 15px;
    right: 15px;
    background: var(--hmg-dropdown-bg, #fff);
    border-radius: var(--hmg-dropdown-radius, 12px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.14);
    padding: 16px;
    z-index: 50;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    pointer-events: none;
}
.hmg-search-dropdown.hmg-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.hmg-dropdown-section-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #999;
    margin: 10px 0 8px;
    font-weight: 700;
}
.hmg-dropdown-section-label:first-child { margin-top: 0; }

.hmg-dropdown-chips {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: thin;
}
.hmg-dropdown-cats { flex-wrap: wrap; overflow-x: visible; }

.hmg-chip {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    background: var(--hmg-chip-color, #f1f3f5);
    color: #333;
    font-size: 13px;
    padding: 7px 14px;
    border-radius: 20px;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
}
.hmg-chip:hover {
    background: var(--hmg-chip-hover, #2ecc71);
    color: #fff;
    transform: translateY(-1px);
}

.hmg-search-suggestions { display: flex; flex-direction: column; gap: 2px; }
.hmg-suggestion-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 6px;
    border-radius: 8px;
    text-decoration: none;
    color: #333;
    transition: background 0.15s ease;
}
.hmg-suggestion-item:hover { background: #f6f7f8; }
.hmg-suggestion-item img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
    background: #eee;
}
.hmg-suggestion-item .hmg-suggestion-title {
    font-size: 13.5px;
    line-height: 1.3;
}
.hmg-suggestion-empty { padding: 10px 6px; color: #999; font-size: 13px; }

/* ===================================================================
 * Universal Filter Bar
 * =================================================================== */
.hmg-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hmg-filter-gap, 10px);
    justify-content: center;
    margin: 0 auto var(--hmg-section-gap, 30px);
    max-width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
}
.hmg-filter-item {
    background: var(--hmg-filter-bg, #f1f3f5);
    color: var(--hmg-filter-text, #333);
    border: none;
    padding: 9px 18px;
    border-radius: var(--hmg-filter-radius, 20px);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}
.hmg-filter-bar.hmg-filter-align-left { justify-content: flex-start; }
.hmg-filter-bar.hmg-filter-align-center { justify-content: center; }
.hmg-filter-bar.hmg-filter-align-right { justify-content: flex-end; }
.hmg-filter-item:hover { transform: translateY(-2px); }
.hmg-filter-item.active {
    background: var(--hmg-filter-active-bg, #2ecc71);
    color: var(--hmg-filter-active-text, #fff);
}

.hmg-filter-bar.hmg-filter-style-tabs {
    border-bottom: 2px solid #eee;
    gap: 0;
}
.hmg-filter-bar.hmg-filter-style-tabs .hmg-filter-item {
    background: transparent;
    border-radius: 0;
    padding: 10px 18px;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
}
.hmg-filter-bar.hmg-filter-style-tabs .hmg-filter-item.active {
    background: transparent;
    color: var(--hmg-filter-active-bg, #2ecc71);
    border-bottom-color: var(--hmg-filter-active-bg, #2ecc71);
}

.hmg-filter-bar.hmg-filter-style-buttons .hmg-filter-item {
    border-radius: 4px;
}

/* ===================================================================
 * Category Image Tabs
 * =================================================================== */
.hmg-category-tabs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--hmg-tabs-item-gap, 18px);
    justify-content: center;
    margin: 0 auto var(--hmg-section-gap, 30px);
    max-width: var(--hmg-tabs-max-width, 100%);
    width: 100%;
    padding: 0 15px;
    box-sizing: border-box;
}

.hmg-category-tabs.hmg-tabs-align-left { justify-content: flex-start; }
.hmg-category-tabs.hmg-tabs-align-center { justify-content: center; }
.hmg-category-tabs.hmg-tabs-align-right { justify-content: flex-end; }

/* Tag Image Tabs Grid mode wraps its items in an inner flex container so the
   "Load More" button (rendered as a sibling, after this whole block) can append
   fresh items straight into it. */
.hmg-tagtabs-grid {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hmg-tabs-item-gap, 18px);
    width: 100%;
    justify-content: inherit;
}

.hmg-tagtabs-loadmore-wrap {
    text-align: center;
    margin: 0 0 var(--hmg-section-gap, 30px);
}
.hmg-tagtabs-loadmore-wrap .hmg-loading {
    display: inline-block;
    margin-left: 10px;
    color: #777;
    font-size: 13px;
}

/* Carousel mode: single row, horizontally scrollable, with arrow buttons */
.hmg-category-tabs.hmg-tabs-carousel {
    flex-wrap: nowrap;
}
.hmg-category-tabs-track {
    display: flex;
    align-items: flex-start;
    gap: var(--hmg-tabs-item-gap, 18px);
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    -ms-overflow-style: none;
    scrollbar-width: none;
    padding: 4px 0;
}
.hmg-category-tabs-track::-webkit-scrollbar { display: none; }
.hmg-category-tabs.hmg-tabs-carousel .hmg-category-tab {
    flex-shrink: 0;
    scroll-snap-align: start;
}
.hmg-category-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #333;
    cursor: pointer;
}
.hmg-category-tab-thumb {
    width: var(--hmg-tab-size, 90px);
    height: var(--hmg-tab-size, 90px);
    overflow: hidden;
    border: 3px solid transparent;
    transition: border-color 0.2s ease, transform 0.2s ease;
    background: #f1f3f5;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hmg-category-tab:hover .hmg-category-tab-thumb,
.hmg-category-tab.active .hmg-category-tab-thumb {
    border-color: var(--hmg-tabs-active-color, #2ecc71);
    transform: translateY(-3px);
}
.hmg-category-tab-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hmg-tabs-shape-rounded .hmg-category-tab-thumb { border-radius: 14px; }
.hmg-tabs-shape-circle .hmg-category-tab-thumb  { border-radius: 50%; }
.hmg-tabs-shape-square .hmg-category-tab-thumb  { border-radius: 0; }
.hmg-category-tab-label { font-size: 13px; font-weight: 600; text-align: center; }

@media (max-width: 580px) {
    .hmg-search-dropdown { left: 0; right: 0; }
    .hmg-category-tabs { gap: 12px; }
}

/* ===================================================================
 * Inline Dropdowns (search bar): badge-type filter on the LEFT,
 * WordPress category dropdown on the RIGHT — same shared styling.
 * =================================================================== */
.hmg-inline-dropdown {
    position: relative;
    flex-shrink: 0;
}
.hmg-badge-dropdown { border-right: 1px solid var(--hmg-search-border, #e0e0e0); }
.hmg-cat-dropdown { border-left: 1px solid var(--hmg-search-border, #e0e0e0); }

.hmg-inline-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 44px;
    padding: 0 14px;
    background: var(--hmg-catdd-bg, #f8f9fa);
    color: var(--hmg-catdd-text, #333);
    border: none;
    cursor: pointer;
    font-size: 14px;
    max-width: 170px;
    box-sizing: border-box;
    transition: background 0.2s ease, color 0.2s ease;
}
.hmg-inline-dropdown-toggle:hover,
.hmg-inline-dropdown.hmg-open .hmg-inline-dropdown-toggle {
    background: var(--hmg-catdd-hover-bg, #2ecc71);
    color: var(--hmg-catdd-hover-text, #fff);
}
.hmg-inline-dropdown-icon { font-size: 16px; width: 16px; height: 16px; }
.hmg-inline-dropdown-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 110px;
}
.hmg-inline-dropdown-caret { font-size: 10px; margin-left: 2px; transition: transform 0.2s ease; }
.hmg-inline-dropdown.hmg-open .hmg-inline-dropdown-caret { transform: rotate(180deg); }

.hmg-inline-dropdown-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 220px;
    max-height: 320px;
    overflow-y: auto;
    background: #fff;
    border-radius: var(--hmg-catdd-radius, 6px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.16);
    z-index: 60;
    padding: 6px;
    display: none;
}
/* Right-side dropdown (WP categories) opens aligned to its right edge so it doesn't overflow off-screen */
.hmg-inline-dropdown-panel-right { left: auto; right: 0; }
.hmg-inline-dropdown.hmg-open .hmg-inline-dropdown-panel { display: block; }

.hmg-inline-dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--hmg-catdd-radius, 6px);
    cursor: pointer;
    font-size: 13.5px;
    color: var(--hmg-catdd-text, #333);
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}
.hmg-inline-dropdown-item:hover,
.hmg-inline-dropdown-item.active {
    background: var(--hmg-catdd-hover-bg, #2ecc71);
    color: var(--hmg-catdd-hover-text, #fff);
}
.hmg-inline-dropdown-item .hmg-inline-dropdown-icon-img {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
}
.hmg-cat-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

@media (max-width: 580px) {
    .hmg-inline-dropdown { border: none !important; border-bottom: 1px solid var(--hmg-search-border, #e0e0e0) !important; width: 100%; }
    .hmg-inline-dropdown-toggle { width: 100%; max-width: 100%; justify-content: space-between; }
    .hmg-inline-dropdown-panel-right { left: 0; right: auto; }
}

/* ===================================================================
 * Related Categories / Tags Row — full-width horizontal carousel
 * =================================================================== */
.hmg-related-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 auto var(--hmg-section-gap, 25px);
    width: 100%;
    max-width: var(--hmg-search-width, 100%);
    padding: 0 15px;
    box-sizing: border-box;
}
.hmg-related-row .hmg-related-label {
    font-size: 12.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--hmg-related-label, #888);
    white-space: nowrap;
    flex-shrink: 0;
}
.hmg-related-track {
    display: flex;
    align-items: center;
    gap: var(--hmg-related-gap, 8px);
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    -ms-overflow-style: none;
    scrollbar-width: none;
}
.hmg-related-track::-webkit-scrollbar { display: none; }

.hmg-related-chip {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    flex-shrink: 0;
    scroll-snap-align: start;
    background: var(--hmg-related-bg, #f1f3f5);
    color: var(--hmg-related-text, #333);
    font-size: 13px;
    padding: 6px 14px;
    border-radius: var(--hmg-related-radius, 18px);
    text-decoration: none;
    transition: background 0.18s ease, color 0.18s ease, transform 0.15s ease;
}
.hmg-related-chip:hover {
    background: var(--hmg-related-hover-bg, #2ecc71);
    color: var(--hmg-related-hover-text, #fff);
    transform: translateY(-1px);
}

.hmg-related-arrow {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #e2e4e7;
    background: #fff;
    color: #555;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}
.hmg-related-arrow:hover {
    background: var(--hmg-related-hover-bg, #2ecc71);
    color: var(--hmg-related-hover-text, #fff);
    border-color: transparent;
}
.hmg-related-arrow[disabled] { opacity: 0.35; cursor: default; }
.hmg-related-arrow[disabled]:hover { background: #fff; color: #555; border-color: #e2e4e7; }

/* v2.5: optional image hover zoom (Settings → Layout → Image Hover Zoom) */
.hmg-hover-zoom .hmg-item img { transition: transform .35s ease; }
.hmg-hover-zoom .hmg-item:hover img { transform: scale(1.05); }
.hmg-hover-zoom .hmg-item .hmg-image-link,
.hmg-hover-zoom .hmg-item .hmg-transparent-bg { overflow: hidden; }