/*
 * Growth AI Gallery Pro — frontend stylesheet.
 *
 * Loaded on every page that renders a Free Gallery or Album (the bootstrap
 * marks the Pro Asset_Loader needed from priority-5 callbacks on
 * gawpg_render_layout / gawpg_render_album_layout).
 *
 * Sections, in order:
 *   1. Layout renderers — Masonry, Justified, Carousel
 *   2. Pro hover effects on the Free Gallery items
 *   3. Pro overlay-dark override (mask colour + opacity vars)
 *   4. Album Pro defaults — clean cards by default
 *   5. Album Pro hover effects
 *   6. Blur-reveal icon variants (5 icons, Gallery + Album)
 *   7. Title position variants (9 positions, Gallery + Album)
 *   8. Defensive resets
 */

/* ── 1. Layout renderers ─────────────────────────────────────────────── */

/* --gawpg-cols-eff is resolved per breakpoint by the Free stylesheet
   (desktop → --gawpg-cols, tablet → --gawpg-cols-tablet, mobile →
   --gawpg-cols-mobile with a 2-column default), so masonry follows the
   same responsive column counts as the grid. Masonry.js re-layouts on
   window resize, picking up the media-query width changes. */
.gawpg-wrapper.gawpg-layout-masonry {
    column-count: var(--gawpg-cols-eff, var(--gawpg-cols, 3));
    column-gap: var(--gawpg-gap, 12px);
}
.gawpg-wrapper.gawpg-layout-masonry .gawpg-item {
    break-inside: avoid;
    margin: 0 0 var(--gawpg-gap, 12px) 0;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
}
.gawpg-wrapper.gawpg-layout-masonry.is-masonry-ready {
    column-count: initial;
    column-gap: initial;
}
.gawpg-wrapper.gawpg-layout-masonry.is-masonry-ready .gawpg-item {
    margin: 0;
    width: calc((100% - (var(--gawpg-cols-eff, var(--gawpg-cols, 3)) - 1) * var(--gawpg-gap, 12px)) / var(--gawpg-cols-eff, var(--gawpg-cols, 3)));
}
.gawpg-wrapper.gawpg-layout-masonry .gawpg-item img {
    display: block;
    width: 100%;
    height: auto;
}

.gawpg-wrapper.gawpg-layout-justified { width: 100%; }
.gawpg-wrapper.gawpg-layout-justified .gawpg-item {
    box-sizing: border-box;
    overflow: hidden;
}
.gawpg-wrapper.gawpg-layout-justified .gawpg-item img { display: block; }

.gawpg-wrapper.gawpg-layout-carousel { width: 100%; overflow: hidden; }
.gawpg-wrapper.gawpg-layout-carousel .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: stretch;
    height: auto;
}
.gawpg-wrapper.gawpg-layout-carousel .gawpg-item {
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
}
.gawpg-wrapper.gawpg-layout-carousel .gawpg-item img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}
.gawpg-wrapper.gawpg-layout-carousel .swiper-button-prev,
.gawpg-wrapper.gawpg-layout-carousel .swiper-button-next {
    color: #ffffff;
    background: rgba(10, 15, 46, 0.55);
    width: 40px;
    height: 40px;
    border-radius: 50%;
}
.gawpg-wrapper.gawpg-layout-carousel .swiper-button-prev::after,
.gawpg-wrapper.gawpg-layout-carousel .swiper-button-next::after {
    font-size: 16px;
    font-weight: 700;
}
.gawpg-wrapper.gawpg-layout-carousel .swiper-pagination-bullet-active {
    background: #4B10CC;
}

/* ── 2. Pro hover effects on Gallery items ───────────────────────────── */

.gawpg-hover-zoom .gawpg-item:hover img { transform: scale(1.08); }

.gawpg-hover-slide-up .gawpg-item { position: relative; overflow: hidden; }
.gawpg-hover-slide-up .gawpg-caption {
    background: rgba(10, 15, 46, 0.85);
    transform: translateY(110%);
    transition: transform 0.35s ease;
}
.gawpg-hover-slide-up .gawpg-item:hover .gawpg-caption { transform: translateY(0); }

/*
 * Blur + reveal baseline. The ::before pseudo paints the icon. mask-image
 * is the only property we leave for the icon variants to override (see
 * section 6); the rest of the mask geometry is locked here so swapping
 * the icon never resets size / position / repeat.
 */
.gawpg-hover-blur-reveal .gawpg-item,
.gawpg-album-hover-blur-reveal .gawpg-album-card { position: relative; overflow: hidden; }
.gawpg-hover-blur-reveal .gawpg-item img,
.gawpg-album-hover-blur-reveal .gawpg-album-card__cover {
    transition: filter 0.35s ease, transform 0.35s ease;
}
.gawpg-hover-blur-reveal .gawpg-item:hover img,
.gawpg-album-hover-blur-reveal .gawpg-album-card:hover .gawpg-album-card__cover {
    filter: blur(3px) brightness(0.6);
    transform: scale(1.04);
}
.gawpg-hover-blur-reveal .gawpg-item::before,
.gawpg-album-hover-blur-reveal .gawpg-album-card::before {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 56px; height: 56px;
    margin: -28px 0 0 -28px;
    background-color: #ffffff;
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
    z-index: 3;
}
.gawpg-hover-blur-reveal .gawpg-item:hover::before,
.gawpg-album-hover-blur-reveal .gawpg-album-card:hover::before {
    opacity: 1;
}

/* ── 3. Pro overlay-dark override (mask colour + opacity vars) ──────── */

.gawpg-wrapper.gawpg-hover-overlay-dark .gawpg-item::after {
    background: var(--gawpg-overlay-color, rgba(10, 15, 46, 0.55));
}
.gawpg-wrapper.gawpg-hover-overlay-dark .gawpg-item:hover::after {
    opacity: var(--gawpg-overlay-opacity, 1);
}

/* ── 4. Album Pro defaults ──────────────────────────────────────────── */

/*
 * The Free album ships with a permanent linear-gradient on __info so the
 * title is readable on top of any cover. Pro buyers expect album cards
 * to mirror gallery items (clean image, title only when a hover effect
 * paints it on). The Pro bootstrap loads this stylesheet on every page
 * with an album, so this baseline kicks in automatically — Free zip is
 * unaffected.
 */
.gawpg-album-wrapper .gawpg-album-card__info {
    background: transparent;
}
.gawpg-album-wrapper .gawpg-album-card__title,
.gawpg-album-wrapper .gawpg-album-card__desc {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.75);
}

/* ── 5. Album Pro hover effects ─────────────────────────────────────── */

.gawpg-album-hover-zoom .gawpg-album-card { overflow: hidden; }
.gawpg-album-hover-zoom .gawpg-album-card__cover {
    transition: transform 0.4s ease;
}
.gawpg-album-hover-zoom .gawpg-album-card:hover .gawpg-album-card__cover {
    transform: scale(1.05);
}

/*
 * Overlay-dark: __info becomes the hover overlay itself, replacing its
 * (now-transparent) baseline with the user-chosen solid colour and
 * fading in on hover.
 */
.gawpg-album-hover-overlay-dark .gawpg-album-card { position: relative; overflow: hidden; }
.gawpg-album-hover-overlay-dark .gawpg-album-card__info {
    background: var(--gawpg-overlay-color, rgba(10, 15, 46, 0.55));
    opacity: 0;
    transition: opacity 0.3s ease;
}
.gawpg-album-hover-overlay-dark .gawpg-album-card:hover .gawpg-album-card__info {
    opacity: var(--gawpg-overlay-opacity, 1);
}
/* Title/desc readability inside the solid overlay — no shadow needed. */
.gawpg-album-hover-overlay-dark .gawpg-album-card__title,
.gawpg-album-hover-overlay-dark .gawpg-album-card__desc {
    text-shadow: none;
}

.gawpg-album-hover-slide-up .gawpg-album-card { position: relative; overflow: hidden; }
.gawpg-album-hover-slide-up .gawpg-album-card__info {
    transform: translateY(110%);
    transition: transform 0.35s ease;
}
.gawpg-album-hover-slide-up .gawpg-album-card:hover .gawpg-album-card__info {
    transform: translateY(0);
}

/* ── 6. Blur-reveal icon variants (Gallery + Album, prefix_class) ───── */

.gawpg-pro-blur-icon-magnify .gawpg-hover-blur-reveal .gawpg-item::before,
.gawpg-pro-blur-icon-magnify.gawpg-album-hover-blur-reveal .gawpg-album-card::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M15.5%2014h-.79l-.28-.27a6.471%206.471%200%200%200%201.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505%206.505%200%200%200-7.27%207.27c.34%202.8%202.56%205.12%205.34%205.59a6.471%206.471%200%200%200%205.34-1.48l.27.28v.79l4.25%204.25c.41.41%201.08.41%201.49%200%20.41-.41.41-1.08%200-1.49L15.5%2014zm-6%200C7.01%2014%205%2011.99%205%209.5S7.01%205%209.5%205%2014%207.01%2014%209.5%2011.99%2014%209.5%2014z%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M15.5%2014h-.79l-.28-.27a6.471%206.471%200%200%200%201.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505%206.505%200%200%200-7.27%207.27c.34%202.8%202.56%205.12%205.34%205.59a6.471%206.471%200%200%200%205.34-1.48l.27.28v.79l4.25%204.25c.41.41%201.08.41%201.49%200%20.41-.41.41-1.08%200-1.49L15.5%2014zm-6%200C7.01%2014%205%2011.99%205%209.5S7.01%205%209.5%205%2014%207.01%2014%209.5%2011.99%2014%209.5%2014z%22%2F%3E%3C%2Fsvg%3E");
}

.gawpg-pro-blur-icon-plus .gawpg-hover-blur-reveal .gawpg-item::before,
.gawpg-pro-blur-icon-plus.gawpg-album-hover-blur-reveal .gawpg-album-card::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M19%2013h-6v6h-2v-6H5v-2h6V5h2v6h6v2z%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M19%2013h-6v6h-2v-6H5v-2h6V5h2v6h6v2z%22%2F%3E%3C%2Fsvg%3E");
}

.gawpg-pro-blur-icon-eye .gawpg-hover-blur-reveal .gawpg-item::before,
.gawpg-pro-blur-icon-eye.gawpg-album-hover-blur-reveal .gawpg-album-card::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M12%204.5C7%204.5%202.7%207.6%201%2012c1.7%204.4%206%207.5%2011%207.5s9.3-3.1%2011-7.5c-1.7-4.4-6-7.5-11-7.5zm0%2012.5a5%205%200%201%201%200-10%205%205%200%200%201%200%2010zm0-8a3%203%200%201%200%200%206%203%203%200%200%200%200-6z%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M12%204.5C7%204.5%202.7%207.6%201%2012c1.7%204.4%206%207.5%2011%207.5s9.3-3.1%2011-7.5c-1.7-4.4-6-7.5-11-7.5zm0%2012.5a5%205%200%201%201%200-10%205%205%200%200%201%200%2010zm0-8a3%203%200%201%200%200%206%203%203%200%200%200%200-6z%22%2F%3E%3C%2Fsvg%3E");
}

.gawpg-pro-blur-icon-expand .gawpg-hover-blur-reveal .gawpg-item::before,
.gawpg-pro-blur-icon-expand.gawpg-album-hover-blur-reveal .gawpg-album-card::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M7%2014H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12%207h-3v2h5v-5h-2v3zM14%205v2h3v3h2V5h-5z%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M7%2014H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12%207h-3v2h5v-5h-2v3zM14%205v2h3v3h2V5h-5z%22%2F%3E%3C%2Fsvg%3E");
}

.gawpg-pro-blur-icon-heart .gawpg-hover-blur-reveal .gawpg-item::before,
.gawpg-pro-blur-icon-heart.gawpg-album-hover-blur-reveal .gawpg-album-card::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M12%2021.35l-1.45-1.32C5.4%2015.36%202%2012.28%202%208.5%202%205.42%204.42%203%207.5%203c1.74%200%203.41.81%204.5%202.09C13.09%203.81%2014.76%203%2016.5%203%2019.58%203%2022%205.42%2022%208.5c0%203.78-3.4%206.86-8.55%2011.54L12%2021.35z%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M12%2021.35l-1.45-1.32C5.4%2015.36%202%2012.28%202%208.5%202%205.42%204.42%203%207.5%203c1.74%200%203.41.81%204.5%202.09C13.09%203.81%2014.76%203%2016.5%203%2019.58%203%2022%205.42%2022%208.5c0%203.78-3.4%206.86-8.55%2011.54L12%2021.35z%22%2F%3E%3C%2Fsvg%3E");
}

/* Default to magnifier when the user hasn't picked one yet
   (i.e. the gallery has Free defaults and Pro layer is fresh).        */
.gawpg-hover-blur-reveal .gawpg-item::before,
.gawpg-album-hover-blur-reveal .gawpg-album-card::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M15.5%2014h-.79l-.28-.27a6.471%206.471%200%200%200%201.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505%206.505%200%200%200-7.27%207.27c.34%202.8%202.56%205.12%205.34%205.59a6.471%206.471%200%200%200%205.34-1.48l.27.28v.79l4.25%204.25c.41.41%201.08.41%201.49%200%20.41-.41.41-1.08%200-1.49L15.5%2014zm-6%200C7.01%2014%205%2011.99%205%209.5S7.01%205%209.5%205%2014%207.01%2014%209.5%2011.99%2014%209.5%2014z%22%2F%3E%3C%2Fsvg%3E");
            mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22black%22%20d%3D%22M15.5%2014h-.79l-.28-.27a6.471%206.471%200%200%200%201.48-5.34c-.47-2.78-2.79-5-5.59-5.34a6.505%206.505%200%200%200-7.27%207.27c.34%202.8%202.56%205.12%205.34%205.59a6.471%206.471%200%200%200%205.34-1.48l.27.28v.79l4.25%204.25c.41.41%201.08.41%201.49%200%20.41-.41.41-1.08%200-1.49L15.5%2014zm-6%200C7.01%2014%205%2011.99%205%209.5S7.01%205%209.5%205%2014%207.01%2014%209.5%2011.99%2014%209.5%2014z%22%2F%3E%3C%2Fsvg%3E");
}

/* ── 7. Title position variants ─────────────────────────────────────── */

/* Gallery caption — absolutely positioned inside .gawpg-item.           */
.gawpg-pro-title-pos-top-left .gawpg-hover-overlay-dark .gawpg-caption {
    top: 12px; bottom: auto; left: 12px; right: auto; text-align: left;
}
.gawpg-pro-title-pos-top-center .gawpg-hover-overlay-dark .gawpg-caption {
    top: 12px; bottom: auto; left: 0; right: 0; text-align: center;
}
.gawpg-pro-title-pos-top-right .gawpg-hover-overlay-dark .gawpg-caption {
    top: 12px; bottom: auto; left: auto; right: 12px; text-align: right;
}
.gawpg-pro-title-pos-middle-left .gawpg-hover-overlay-dark .gawpg-caption {
    top: 50%; bottom: auto; left: 12px; right: auto; text-align: left;
    transform: translateY(-50%) !important;
}
.gawpg-pro-title-pos-middle-center .gawpg-hover-overlay-dark .gawpg-caption {
    top: 50%; bottom: auto; left: 0; right: 0; text-align: center;
    transform: translateY(-50%) !important;
}
.gawpg-pro-title-pos-middle-right .gawpg-hover-overlay-dark .gawpg-caption {
    top: 50%; bottom: auto; left: auto; right: 12px; text-align: right;
    transform: translateY(-50%) !important;
}
.gawpg-pro-title-pos-bottom-left .gawpg-hover-overlay-dark .gawpg-caption {
    bottom: 12px; top: auto; left: 12px; right: auto; text-align: left;
}
.gawpg-pro-title-pos-bottom-center .gawpg-hover-overlay-dark .gawpg-caption {
    bottom: 12px; top: auto; left: 0; right: 0; text-align: center;
}
.gawpg-pro-title-pos-bottom-right .gawpg-hover-overlay-dark .gawpg-caption {
    bottom: 12px; top: auto; left: auto; right: 12px; text-align: right;
}

/* Album __info — flex column inside .gawpg-album-card.                  */
.gawpg-pro-title-pos-top-left.gawpg-album-hover-overlay-dark .gawpg-album-card__info {
    justify-content: flex-start; align-items: flex-start; text-align: left;
}
.gawpg-pro-title-pos-top-center.gawpg-album-hover-overlay-dark .gawpg-album-card__info {
    justify-content: flex-start; align-items: center; text-align: center;
}
.gawpg-pro-title-pos-top-right.gawpg-album-hover-overlay-dark .gawpg-album-card__info {
    justify-content: flex-start; align-items: flex-end; text-align: right;
}
.gawpg-pro-title-pos-middle-left.gawpg-album-hover-overlay-dark .gawpg-album-card__info {
    justify-content: center; align-items: flex-start; text-align: left;
}
.gawpg-pro-title-pos-middle-center.gawpg-album-hover-overlay-dark .gawpg-album-card__info {
    justify-content: center; align-items: center; text-align: center;
}
.gawpg-pro-title-pos-middle-right.gawpg-album-hover-overlay-dark .gawpg-album-card__info {
    justify-content: center; align-items: flex-end; text-align: right;
}
.gawpg-pro-title-pos-bottom-left.gawpg-album-hover-overlay-dark .gawpg-album-card__info {
    justify-content: flex-end; align-items: flex-start; text-align: left;
}
.gawpg-pro-title-pos-bottom-center.gawpg-album-hover-overlay-dark .gawpg-album-card__info {
    justify-content: flex-end; align-items: center; text-align: center;
}
.gawpg-pro-title-pos-bottom-right.gawpg-album-hover-overlay-dark .gawpg-album-card__info {
    justify-content: flex-end; align-items: flex-end; text-align: right;
}

/* ── 8. Defensive resets ────────────────────────────────────────────── */

/*
 * Common WP themes paint a 1px border or box-shadow on <button> or
 * <article> elements (sometimes only "buttons inside a card"). The Pro
 * border control owns the border properties when enabled (it sets
 * `border-style: solid; border-width: ...`, which beats the reset on
 * Elementor's higher-specificity selector). When disabled, the user must
 * see ZERO border, shadow, or outline — we hard-pin the baseline here.
 */
.gawpg-album-wrapper .gawpg-album-card,
.gawpg-album-wrapper .gawpg-album-card__link,
.gawpg-album-wrapper .gawpg-album-card__cover,
.gawpg-wrapper .gawpg-item,
.gawpg-wrapper .gawpg-item a,
.gawpg-wrapper .gawpg-item img {
    border: 0 none;
    box-shadow: none;
    outline-style: none;
    outline-width: 0;
}
/* Keyboard focus indicator preserved via :focus-visible only. */
.gawpg-album-card__link:focus:not(:focus-visible),
.gawpg-item a:focus:not(:focus-visible) {
    outline: none;
}

/* ── 9. Lightbox thumbnails strip (Phase 3) ─────────────────────────── */

/*
 * Appended to .pswp by frontend-pro.js when the lightbox_thumbnails
 * feature is on. .pswp itself is position: fixed inset: 0 — the strip
 * sticks to the bottom and scrolls horizontally if there are many
 * thumbs. The strip is OUTSIDE the .gawpg-wrapper, so the wrapper-level
 * styles don't apply and we keep colours hardcoded to the dark theme.
 */
.pswp .gawpg-pro-thumbs {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    padding: 10px;
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    z-index: 1700;
    align-items: center;
    min-height: 78px;
    scrollbar-width: thin;
}
.pswp .gawpg-pro-thumbs::-webkit-scrollbar { height: 6px; }
.pswp .gawpg-pro-thumbs::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 3px;
}

.pswp .gawpg-pro-thumb {
    flex-shrink: 0;
    width: 64px;
    height: 54px;
    border: 0;
    padding: 0;
    margin: 0;
    cursor: pointer;
    border-radius: 5px;
    overflow: hidden;
    opacity: 0.5;
    background: transparent;
    box-shadow: 0 0 0 0 transparent;
    transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.pswp .gawpg-pro-thumb:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}
.pswp .gawpg-pro-thumb.is-active {
    opacity: 1;
    box-shadow: 0 0 0 2px #00C4F0;
}
.pswp .gawpg-pro-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Push the PhotoSwipe content up so it doesn't hide behind the strip. */
.pswp .pswp__container { margin-bottom: 78px; }

/* On very narrow viewports the strip becomes a slim bar to reclaim
   screen real estate for the slide itself. */
@media (max-width: 480px) {
    .pswp .gawpg-pro-thumbs { min-height: 64px; padding: 6px; gap: 6px; }
    .pswp .gawpg-pro-thumb { width: 52px; height: 44px; }
    .pswp .pswp__container { margin-bottom: 64px; }
}

/* ── 10. Toast for share / copy-to-clipboard ─────────────────────────── */

.gawpg-pro-toast {
    position: fixed;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    background: rgba(10, 15, 46, 0.95);
    color: #fff;
    padding: 12px 22px;
    border-radius: 24px;
    font-size: 14px;
    font-family: 'Plus Jakarta Sans', -apple-system, sans-serif;
    z-index: 100000;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: none;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    max-width: 80vw;
    text-align: center;
}
.gawpg-pro-toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ── 11. PhotoSwipe button polish (top bar + arrows) ─────────────────── */

/*
 * PhotoSwipe 5 default buttons are 50×60 (top bar) and 75×100 (arrows).
 * Border-radius: 999px on a non-square element produces an oval, not a
 * circle. To get a perfectly round button, we force the button to be
 * square AND re-center the icon via flex (position: static) so we don't
 * depend on PhotoSwipe's absolute SVG offsets that assume the default
 * dimensions.
 */
.pswp {
    --pswp-icon-color: #ffffff;
    --pswp-icon-color-secondary: rgba(0, 0, 0, 0.35);
    --pswp-icon-stroke-color: rgba(0, 0, 0, 0.45);
    --pswp-icon-stroke-width: 0;
}

/* Top-bar buttons (close, zoom, custom Pro icons) — perfect circles. */
.pswp .pswp__button,
.pswp__button--gawpg-fullscreen,
.pswp__button--gawpg-download,
.pswp__button--gawpg-share {
    width: 44px !important;
    height: 44px !important;
    margin: 8px 4px !important;
    padding: 0 !important;
    background: rgba(10, 15, 46, 0.55);
    -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
    border: 0;
    border-radius: 50%;
    opacity: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}

/* Reset PhotoSwipe's absolute icon offsets — let flex center it. */
.pswp .pswp__button .pswp__icn,
.pswp__button--gawpg-fullscreen .pswp__icn,
.pswp__button--gawpg-download .pswp__icn,
.pswp__button--gawpg-share .pswp__icn {
    position: static !important;
    width: 22px !important;
    height: 22px !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    color: var(--pswp-icon-color);
    fill: currentColor;
}

.pswp .pswp__button:hover,
.pswp .pswp__button:focus-visible,
.pswp__button--gawpg-fullscreen:hover,
.pswp__button--gawpg-fullscreen:focus-visible,
.pswp__button--gawpg-download:hover,
.pswp__button--gawpg-download:focus-visible,
.pswp__button--gawpg-share:hover,
.pswp__button--gawpg-share:focus-visible {
    background: #ffffff;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35),
                0 0 0 2px rgba(0, 196, 240, 0.45);
    outline: none;
    transform: translateY(-1px);
    --pswp-icon-color: #0A0F2E;
    --pswp-icon-color-secondary: rgba(0, 196, 240, 0.2);
    --pswp-icon-stroke-color: rgba(0, 0, 0, 0.15);
}
.pswp .pswp__button:active {
    transform: translateY(0) scale(0.96);
}

/* ── Arrows — same circle treatment, slightly bigger ─────────────────── */

.pswp .pswp__button--arrow {
    width: 56px !important;
    height: 56px !important;
    margin: 0 12px !important;
    padding: 0 !important;
    background: rgba(10, 15, 46, 0.6);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    border-radius: 50%;
    opacity: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
}
.pswp .pswp__button--arrow .pswp__icn {
    position: static !important;
    width: 28px !important;
    height: 28px !important;
    top: auto !important;
    left: auto !important;
    margin: 0 !important;
    color: var(--pswp-icon-color);
    fill: currentColor;
}
.pswp .pswp__button--arrow:hover,
.pswp .pswp__button--arrow:focus-visible {
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4),
                0 0 0 2px rgba(0, 196, 240, 0.5);
    outline: none;
    --pswp-icon-color: #0A0F2E;
    --pswp-icon-color-secondary: transparent;
    --pswp-icon-stroke-color: rgba(0, 0, 0, 0.15);
}

/* ── Carousel layout arrows (Swiper) get the same polish ─────────────── */

.gawpg-wrapper.gawpg-layout-carousel .swiper-button-prev,
.gawpg-wrapper.gawpg-layout-carousel .swiper-button-next {
    background: rgba(10, 15, 46, 0.7);
    -webkit-backdrop-filter: blur(8px);
            backdrop-filter: blur(8px);
    color: #ffffff;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    transition: background 0.2s ease, color 0.2s ease,
                transform 0.2s ease, box-shadow 0.2s ease;
}
.gawpg-wrapper.gawpg-layout-carousel .swiper-button-prev:hover,
.gawpg-wrapper.gawpg-layout-carousel .swiper-button-next:hover {
    background: #ffffff;
    color: #0A0F2E;
    transform: scale(1.08);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35),
                0 0 0 2px rgba(0, 196, 240, 0.5);
}
.gawpg-wrapper.gawpg-layout-carousel .swiper-button-prev::after,
.gawpg-wrapper.gawpg-layout-carousel .swiper-button-next::after {
    font-size: 18px;
    font-weight: 700;
}

/* ── Pro video items ──
   Inline players for Vimeo (iframe), self-hosted (Plyr) and custom iframe.
   Aspect-ratio keeps them at 16:9 in any layout that doesn't override it. */
.gawpg-item--video {
    position: relative;
    overflow: hidden;
    background: #000;
}
.gawpg-item--vimeo,
.gawpg-item--iframe {
    aspect-ratio: 16 / 9;
}
.gawpg-item--vimeo > a,
.gawpg-item--vimeo > a > img,
.gawpg-item--iframe > iframe {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 0;
}
.gawpg-item--selfhosted video.gawpg-plyr {
    width: 100%;
    height: auto;
    display: block;
}
.gawpg-item--selfhosted .plyr {
    --plyr-color-main: #4B10CC;
    width: 100%;
}

/* ── Album Pro click modes (inline + modal) ── */
.gawpg-album-inline-panel {
    grid-column: 1 / -1;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
    padding: 0 8px;
}
.gawpg-album-inline-panel.is-open { max-height: 2000px; padding: 16px 8px; }
.gawpg-album-inline-panel.is-loading,
.gawpg-album-inline-panel.is-error { padding: 32px 8px; text-align: center; }
.gawpg-album-inline-spinner {
    width: 32px; height: 32px; margin: 0 auto;
    border: 3px solid rgba(75,16,204,.2); border-top-color: #4B10CC;
    border-radius: 50%; animation: gawpg-spin 0.9s linear infinite;
}
@keyframes gawpg-spin { to { transform: rotate(360deg); } }

.gawpg-pro-modal-open { overflow: hidden; }
.gawpg-pro-modal-overlay {
    position: fixed; inset: 0; background: rgba(10,15,46,0.85);
    z-index: 99998; display: flex; align-items: center; justify-content: center;
    padding: 24px; animation: gawpg-fade-in 0.2s ease;
}
.gawpg-pro-modal {
    background: #fff; border-radius: 12px; max-width: 1100px;
    width: 100%; max-height: 90vh; overflow: auto; position: relative;
    padding: 24px;
}
.gawpg-pro-modal__close {
    position: absolute; top: 8px; right: 12px; background: transparent;
    border: 0; font-size: 28px; cursor: pointer; color: #0A0F2E;
    line-height: 1;
}
@keyframes gawpg-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* ── Filter bar ── */
.gawpg-pro-filter-bar {
    display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px;
}
.gawpg-pro-filter-bar button {
    border: 1px solid rgba(75,16,204,0.3); background: transparent;
    color: #0A0F2E; padding: 6px 14px; border-radius: 999px;
    cursor: pointer; font-size: 13px;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.gawpg-pro-filter-bar button:hover { border-color: #4B10CC; }
.gawpg-pro-filter-bar button.is-active {
    background: #4B10CC; color: #fff; border-color: #4B10CC;
}
.gawpg-album-card.is-filtered-out { display: none; }

/* ── Entrance animations ── */
[class*="gawpg-pro-entrance-"] .gawpg-item,
[class*="gawpg-pro-entrance-"] .gawpg-album-card {
    opacity: 0;
    transition-property: opacity, transform, filter;
    transition-duration: var(--gawpg-entrance-duration, 500ms);
    transition-delay: var(--gawpg-entrance-delay, 0ms);
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.gawpg-pro-entrance-fade .gawpg-item,
.gawpg-pro-entrance-fade .gawpg-album-card { transform: none; }
.gawpg-pro-entrance-slide-up .gawpg-item,
.gawpg-pro-entrance-slide-up .gawpg-album-card { transform: translateY(28px); }
.gawpg-pro-entrance-zoom .gawpg-item,
.gawpg-pro-entrance-zoom .gawpg-album-card { transform: scale(0.92); }
.gawpg-pro-entrance-blur .gawpg-item,
.gawpg-pro-entrance-blur .gawpg-album-card { filter: blur(12px); }
[class*="gawpg-pro-entrance-"] .gawpg-item.is-visible,
[class*="gawpg-pro-entrance-"] .gawpg-album-card.is-visible {
    opacity: 1; transform: none; filter: none;
}
@media (prefers-reduced-motion: reduce) {
    [class*="gawpg-pro-entrance-"] .gawpg-item,
    [class*="gawpg-pro-entrance-"] .gawpg-album-card {
        opacity: 1 !important; transform: none !important; filter: none !important;
        transition: none !important;
    }
}

/* ── Watermark ── */
.gawpg-watermark {
    position: absolute; inset: 0; display: flex; align-items: center;
    justify-content: center; color: #fff; font-weight: 700; font-size: 22px;
    transform: rotate(-30deg); text-shadow: 0 2px 6px rgba(0,0,0,0.4);
    pointer-events: none; user-select: none; opacity: 0.25;
    letter-spacing: 0.1em; text-transform: uppercase;
}

/* ── Right-click + drag disable visual hint ── */
.gawpg-pro-protect-yes .gawpg-item img,
.gawpg-pro-protect-yes .gawpg-album-card__cover {
    -webkit-user-select: none; user-select: none;
    -webkit-user-drag: none; user-drag: none;
}

/* ── Lazy load fade-in ── */
.gawpg-pro-lazy-yes img { opacity: 0.001; transition: opacity 0.4s ease; }
.gawpg-pro-lazy-yes img.is-loaded,
.gawpg-pro-lazy-yes img[src]:not([data-lazy-pending]) { opacity: 1; }

/* ── Load-more button + infinite hidden state ── */
.gawpg-pro-load-more {
    display: block; margin: 24px auto; padding: 10px 28px;
    background: #4B10CC; color: #fff; border: 0; border-radius: 999px;
    font-size: 14px; font-weight: 600; cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
}
.gawpg-pro-load-more:hover { background: #7B3AE0; }
.gawpg-pro-load-more:active { transform: scale(0.98); }
.gawpg-item.is-hidden { display: none; }

/* Extended aspect ratios that Pro unlocks. */
[data-pro-aspect="21:9"]  { aspect-ratio: 21 / 9; }
[data-pro-aspect="9:16"]  { aspect-ratio: 9 / 16; }
[data-pro-aspect="2:1"]   { aspect-ratio: 2 / 1; }
[data-pro-aspect="5:4"]   { aspect-ratio: 5 / 4; }
[data-pro-aspect="golden"]{ aspect-ratio: 1.618 / 1; }

/* =========================================================================
   Album card styles (Pro) — feature: album_card_styles
   Free ships only the "minimal" style; these three are the structural
   variants from the design mockups. Scoped to the wrapper style class set
   by the renderer (.gawpg-album-style-<style>).
   ========================================================================= */

/* ---------- Style: hover-reveal (reuses the Free minimal DOM) ---------- */
.gawpg-album-style-hover-reveal .gawpg-album-card__info {
  background: rgba(6, 9, 31, 0);
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 8px;
  opacity: 0;
  transition: opacity .4s ease, background .4s ease;
}
.gawpg-album-style-hover-reveal .gawpg-album-card:hover .gawpg-album-card__info {
  opacity: 1;
  background: rgba(6, 9, 31, 0.55);
}
.gawpg-album-style-hover-reveal .gawpg-album-card__count {
  align-self: center;
  margin-bottom: 0;
  background: linear-gradient(135deg, #4B10CC, #00C4F0);
  color: #fff;
  border: 0;
}
.gawpg-album-style-hover-reveal .gawpg-album-card__desc {
  color: #cbd5e1;
  margin-top: 2px;
}

/* ---------- Style: side-by-side (image on top, text block below) ---------- */
.gawpg-album-style-side-by-side .gawpg-album-card {
  display: flex;
  min-height: 0;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.gawpg-album-style-side-by-side .gawpg-album-card:hover {
  border-color: #9B5AE9;
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -10px rgba(123, 58, 224, 0.3);
}
.gawpg-album-style-side-by-side .gawpg-album-card__link {
  position: static;
  inset: auto;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: auto;
}
.gawpg-album-style-side-by-side .gawpg-album-card__thumb {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.gawpg-album-style-side-by-side .gawpg-album-card__body {
  display: block;
  padding: 20px;
}
.gawpg-album-style-side-by-side .gawpg-album-card__title {
  font-size: 17px;
  margin: 0 0 6px;
  color: #fff;
  text-shadow: none;
}
.gawpg-album-style-side-by-side .gawpg-album-card__desc {
  margin: 0 0 14px;
  color: #cbd5e1;
  font-size: 13px;
  line-height: 1.5;
}
.gawpg-album-style-side-by-side .gawpg-album-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.gawpg-album-style-side-by-side .gawpg-album-card__count {
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  align-self: auto;
  color: #00C4F0;
  font-size: 12px;
}
.gawpg-album-style-side-by-side .gawpg-album-card__open {
  color: #cbd5e1;
  font-size: 12px;
}

/* ---------- Style: slide-up bar (count badge + sliding premium bar) ---------- */
.gawpg-album-style-slide-up .gawpg-album-card__badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  padding: 4px 10px;
  border-radius: 99px;
  background: rgba(6, 9, 31, 0.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
}
.gawpg-album-style-slide-up .gawpg-album-card__bar {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  padding: 14px 16px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(75, 16, 204, 0.95), rgba(123, 58, 224, 0.95));
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: #fff;
  transform: translateY(calc(100% + 16px));
  transition: transform .4s cubic-bezier(0.4, 0, 0.2, 1);
}
.gawpg-album-style-slide-up .gawpg-album-card:hover .gawpg-album-card__bar {
  transform: translateY(0);
}
.gawpg-album-style-slide-up .gawpg-album-card__bar .gawpg-album-card__title {
  font-size: 15px;
  text-shadow: none;
}
.gawpg-album-style-slide-up .gawpg-album-card__bar .gawpg-album-card__desc {
  margin: 2px 0 0;
  font-size: 12px;
  opacity: .85;
}