/*==================================================
  SUNSHINE MAKEUP STUDIO - LUXURY MARQUEE GALLERY
  Pixel-Perfect Dual Vertical Infinite Marquee Layout
==================================================*/

.sunshine-gallery-section {
    position: relative;
    padding: 100px 0;
    background: #FAF4F0 !important;
    border-top: 1px solid rgba(212, 175, 122, 0.35);
    border-bottom: 1px solid rgba(212, 175, 122, 0.35);
    overflow: hidden;
}

/* Background Decorative Glow */
.sunshine-gallery-section::before {
    content: "";
    position: absolute;
    top: -100px;
    left: -100px;
    width: 450px;
    height: 450px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(139, 29, 56, 0.04) 0%, transparent 70%);
    pointer-events: none;
}

.sunshine-gallery-section::after {
    content: "";
    position: absolute;
    bottom: -100px;
    right: -100px;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 175, 122, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

/* --------------------------------------------------
   LEFT COLUMN: EDITORIAL CONTENT & 2x2 FEATURES
-------------------------------------------------- */
.sunshine-gallery-content {
    padding-right: 25px;
}

.sunshine-gallery-tag {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.sunshine-gallery-tag .tag-text {
    font-family: 'Poppins', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    color: #8B1D38 !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    display: inline-block !important;
}

.sunshine-gallery-tag .tag-line {
    width: 35px;
    height: 1.5px;
    background: #8B1D38 !important;
    display: inline-block;
}

.sunshine-gallery-title {
    font-family: 'Playfair Display', serif !important;
    font-size: 40px !important;
    font-weight: 700 !important;
    color: #1F1F1F !important;
    margin-bottom: 14px !important;
    line-height: 1.25 !important;
}

.sunshine-gallery-title .title-burgundy {
    color: #8B1D38 !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    display: inline !important;
}

.sunshine-gallery-desc {
    font-family: 'Poppins', sans-serif !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
    color: #555555 !important;
    margin-bottom: 30px !important;
    max-width: 520px;
}

/* 2x2 Feature Highlights Grid */
.sunshine-gallery-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 24px;
    margin-bottom: 35px;
}

.gallery-feature-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.gallery-feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #FFFFFF;
    border: 1px solid rgba(139, 29, 56, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8B1D38;
    font-size: 18px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(139, 29, 56, 0.06);
    transition: all 0.3s ease;
}

.gallery-feature-item:hover .gallery-feature-icon {
    background: #8B1D38;
    color: #FFFFFF;
    border-color: #8B1D38;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(139, 29, 56, 0.2);
}

.gallery-feature-text h4 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: #1F1F1F !important;
    margin-bottom: 3px !important;
    line-height: 1.3 !important;
}

.gallery-feature-text p {
    font-family: 'Poppins', sans-serif !important;
    font-size: 12.5px !important;
    color: #666666 !important;
    line-height: 1.45 !important;
    margin: 0 !important;
}

/* Action Buttons */
.sunshine-gallery-actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.sunshine-gallery-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: linear-gradient(135deg, #8B1D38 0%, #A32847 100%) !important;
    color: #FFFFFF !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 13px 26px !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 8px 20px rgba(139, 29, 56, 0.25) !important;
}

.sunshine-gallery-btn span,
.sunshine-gallery-btn i {
    color: #FFFFFF !important;
}

.sunshine-gallery-btn:hover {
    background: linear-gradient(135deg, #6E132A 0%, #8B1D38 100%) !important;
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(139, 29, 56, 0.35) !important;
}

.sunshine-gallery-btn-outline {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: transparent !important;
    color: #8B1D38 !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    padding: 12px 24px !important;
    border-radius: 50px !important;
    border: 1.5px solid #8B1D38 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.sunshine-gallery-btn-outline span,
.sunshine-gallery-btn-outline i {
    color: #8B1D38 !important;
}

.sunshine-gallery-btn-outline:hover {
    background: #8B1D38 !important;
    color: #FFFFFF !important;
    transform: translateY(-2px);
}

.sunshine-gallery-btn-outline:hover span,
.sunshine-gallery-btn-outline:hover i {
    color: #FFFFFF !important;
}


/* --------------------------------------------------
   RIGHT COLUMN: DUAL VERTICAL MARQUEE STAGE
-------------------------------------------------- */
.sunshine-marquee-stage {
    position: relative;
    height: 580px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    overflow: hidden;
    padding: 10px 0;
    border-radius: 24px;
}

/* Gradient Top & Bottom Fade Overlays */
.sunshine-marquee-stage::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(180deg, #FAF4F0 0%, rgba(250, 244, 240, 0) 100%);
    z-index: 5;
    pointer-events: none;
}

.sunshine-marquee-stage::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: linear-gradient(0deg, #FAF4F0 0%, rgba(250, 244, 240, 0) 100%);
    z-index: 5;
    pointer-events: none;
}

/* Marquee Columns */
.marquee-col {
    position: relative;
    overflow: hidden;
    height: 100%;
}

.marquee-track {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Track 1: Bottom to Top (Down to Up) */
.marquee-up .marquee-track {
    animation: marqueeScrollUp 28s linear infinite;
}

/* Track 2: Top to Bottom (Up to Down) */
.marquee-down .marquee-track {
    animation: marqueeScrollDown 28s linear infinite;
}

/* Pause On Hover */
.sunshine-marquee-stage:hover .marquee-track,
.marquee-col:hover .marquee-track {
    animation-play-state: paused !important;
}

/* Keyframes for seamless looping */
@keyframes marqueeScrollUp {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-50%);
    }
}

@keyframes marqueeScrollDown {
    0% {
        transform: translateY(-50%);
    }

    100% {
        transform: translateY(0);
    }
}

/* Individual Gallery Cards */
.sunshine-gallery-card {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(139, 29, 56, 0.08);
    border: 3px solid #FFFFFF;
    background: #FFFFFF;
    transition: all 0.35s ease;
    flex-shrink: 0;
}

.sunshine-gallery-card a {
    display: block;
    position: relative;
    width: 100%;
    height: 220px;
    overflow: hidden;
    text-decoration: none;
    cursor: pointer;
}

.sunshine-gallery-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Hover Zoom & Overlay Icon */
.sunshine-gallery-card .card-hover-overlay {
    position: absolute;
    inset: 0;
    background: rgba(139, 29, 56, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;
}

.sunshine-gallery-card .card-hover-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #FFFFFF;
    color: #8B1D38;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transform: scale(0.7);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.sunshine-gallery-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 35px rgba(139, 29, 56, 0.18);
    border-color: #D4AF7A;
}

.sunshine-gallery-card:hover img {
    transform: scale(1.08);
}

.sunshine-gallery-card:hover .card-hover-overlay {
    opacity: 1;
}

.sunshine-gallery-card:hover .card-hover-icon {
    transform: scale(1);
}


/* --------------------------------------------------
   RESPONSIVE DESIGN (Tablets & Mobile)
-------------------------------------------------- */
@media (max-width: 1199.98px) {
    .sunshine-gallery-title {
        font-size: 34px !important;
    }

    .sunshine-marquee-stage {
        height: 520px;
    }

    .sunshine-gallery-card a {
        height: 190px;
    }
}

@media (max-width: 991.98px) {
    .sunshine-gallery-section {
        padding: 70px 0;
    }

    .sunshine-gallery-content {
        padding-right: 0;
        margin-bottom: 45px;
        text-align: center;
    }

    .sunshine-gallery-desc {
        margin-left: auto;
        margin-right: auto;
    }

    .sunshine-gallery-features {
        text-align: left;
        max-width: 520px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 30px;
    }

    .sunshine-gallery-actions {
        justify-content: center;
    }

    .sunshine-marquee-stage {
        height: 480px;
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 575.98px) {
    .sunshine-gallery-title {
        font-size: 28px !important;
    }

    .sunshine-gallery-features {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .sunshine-marquee-stage {
        height: 440px;
        gap: 12px;
    }

    .marquee-track {
        gap: 12px;
    }

    .sunshine-gallery-card a {
        height: 155px;
    }
}


/* ==========================================================================
   SUNSHINE MAKEUP STUDIO & ACADEMY - GALLERY PAGE EXCLUSIVE STYLES
   Harmonized Color Palette Matching Homepage, About, Services & Contact Theme
   (Royal Burgundy #8B1D38, Champagne Gold #DEBC97, Warm Cream #FAF3EF)
   ========================================================================== */

:root {
    --gallery-burgundy-dark: #580B1B;
    --gallery-burgundy-main: #8B1D38;
    --gallery-burgundy-hover: #A32444;
    --gallery-gold-accent: #DEBC97;
    --gallery-gold-dark: #C89D66;
    --gallery-gold-vibrant: #D4AF37;

    --gallery-warm-bg-start: #FFFDFB;
    --gallery-warm-bg-mid: #FAF3EF;
    --gallery-warm-bg-end: #F4ECE4;
    --gallery-card-bg: #FFFFFF;
    --gallery-border: #EAE0D8;

    --gallery-text-dark: #1E1315;
    --gallery-text-body: #5A4C4F;
    --gallery-text-muted: #7A696C;
}

/* --------------------------------------------------------------------------
   1. GALLERY HERO / HEADER SECTION (EXACT MOCKUP MATCH)
   -------------------------------------------------------------------------- */
.sunshine-gallery-hero-section {
    position: relative !important;
    background: linear-gradient(135deg, #FFF7F4 0%, #FEEDE6 50%, #FDE4DB 100%) !important;
    padding: 55px 0 65px 0 !important;
    overflow: hidden !important;
    font-family: 'Poppins', sans-serif !important;
    color: #554C4E !important;
    border-bottom: 1px solid #F3DDD3 !important;
}

/* Background Soft Organic Blush Halo & Watermarks */
.gallery-hero-blush-swoop {
    position: absolute !important;
    right: -60px !important;
    top: -40px !important;
    width: 720px !important;
    height: 650px !important;
    border-radius: 50% !important;
    background: radial-gradient(circle, rgba(254, 219, 214, 0.65) 0%, rgba(254, 232, 227, 0.3) 60%, transparent 80%) !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.gallery-hero-decor {
    position: absolute !important;
    pointer-events: none !important;
    z-index: 1 !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
}

.gallery-hero-decor.floral-left {
    top: -10px !important;
    left: -20px !important;
    width: 290px !important;
    height: 290px !important;
    opacity: 0.26 !important;
    background-image: url("data:image/svg+xml,%3Csvg width='320' height='320' viewBox='0 0 320 320' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M-10 10C35 40 75 90 90 145C100 185 85 220 50 250C30 270 5 285 -20 290' stroke='%23BA1B4D' stroke-width='1.4' stroke-opacity='0.45'/%3E%3Cpath d='M90 145C130 110 180 85 235 80C265 75 295 85 315 105' stroke='%23BA1B4D' stroke-width='1.2' stroke-opacity='0.35'/%3E%3Cpath d='M45 65C70 45 105 50 125 75C140 95 135 125 115 140' stroke='%23BA1B4D' stroke-width='1' stroke-opacity='0.3' stroke-dasharray='3 3'/%3E%3Cpath d='M80 180C110 160 145 170 165 200C180 225 170 255 145 270' stroke='%23BA1B4D' stroke-width='1' stroke-opacity='0.3' stroke-dasharray='3 3'/%3E%3Ccircle cx='90' cy='145' r='3' fill='%23BA1B4D' fill-opacity='0.4'/%3E%3Ccircle cx='125' cy='75' r='2.5' fill='%23BA1B4D' fill-opacity='0.4'/%3E%3C/svg%3E") !important;
}

.gallery-hero-decor.floral-right {
    bottom: -30px !important;
    right: -20px !important;
    width: 280px !important;
    height: 280px !important;
    opacity: 0.25 !important;
    background-image: url("data:image/svg+xml,%3Csvg width='340' height='340' viewBox='0 0 340 340' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M360 360C300 280 240 200 280 100C300 50 240 60 200 90' stroke='%238B1D38' stroke-width='1.2' stroke-opacity='0.6'/%3E%3Cpath d='M310 320C250 250 190 180 170 100' stroke='%238B1D38' stroke-width='1' stroke-opacity='0.4' stroke-dasharray='3 3'/%3E%3C/svg%3E") !important;
}

/* Floating Sparkles */
.gallery-hero-sparkle {
    position: absolute !important;
    color: #D4904C !important;
    text-shadow: 0 0 8px rgba(212, 144, 76, 0.45) !important;
    pointer-events: none !important;
    z-index: 1 !important;
    user-select: none !important;
    animation: gallerySparklePulse 3.5s infinite alternate ease-in-out !important;
}

.gallery-hero-sparkle.sp-1 {
    top: 35px !important;
    left: 24px !important;
    font-size: 17px !important;
    opacity: 0.75 !important;
    animation-delay: 0s !important;
}

.gallery-hero-sparkle.sp-2 {
    top: 48% !important;
    left: 47% !important;
    font-size: 15px !important;
    opacity: 0.65 !important;
    animation-delay: 1.2s !important;
}

.gallery-hero-sparkle.sp-3 {
    top: 180px !important;
    left: 55px !important;
    font-size: 13px !important;
    opacity: 0.55 !important;
    animation-delay: 2.2s !important;
}

@keyframes gallerySparklePulse {
    0% {
        transform: scale(0.85);
        opacity: 0.35;
    }

    100% {
        transform: scale(1.18);
        opacity: 0.85;
    }
}

/* Drifting Rose Petals */
.gallery-hero-petal {
    position: absolute !important;
    width: 24px !important;
    height: 24px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    pointer-events: none !important;
    z-index: 2 !important;
    opacity: 0.7 !important;
    animation: galleryPetalFloat 7s ease-in-out infinite alternate !important;
    background-image: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6 26C3 18 9 6 24 5C28 13 25 24 15 28C11 29 8 28 6 26Z' fill='%23C93E57' fill-opacity='0.65'/%3E%3C/svg%3E") !important;
}

.gallery-hero-petal.petal-1 {
    top: 22px !important;
    right: 38% !important;
    transform: rotate(25deg) !important;
    animation-duration: 6s !important;
}

.gallery-hero-petal.petal-2 {
    bottom: 25px !important;
    left: 44% !important;
    transform: rotate(-15deg) !important;
    animation-duration: 7.5s !important;
    animation-delay: 1s !important;
}

.gallery-hero-petal.petal-3 {
    top: 60px !important;
    left: 9% !important;
    transform: rotate(45deg) !important;
    animation-duration: 8s !important;
    animation-delay: 2s !important;
}

.gallery-hero-petal.petal-4 {
    bottom: 35px !important;
    right: 10% !important;
    transform: rotate(-30deg) !important;
    animation-duration: 6.8s !important;
    animation-delay: 1.5s !important;
}

@keyframes galleryPetalFloat {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    100% {
        transform: translateY(-16px) rotate(14deg);
    }
}

/* --------------------------------------------------------------------------
   HERO LEFT COLUMN: TAG, BREADCRUMBS, HEADING, DESCRIPTION & 4 MICRO PILLARS
   -------------------------------------------------------------------------- */
.gallery-hero-content {
    position: relative !important;
    z-index: 2 !important;
    padding-right: 15px !important;
}

.gallery-hero-breadcrumb-wrap {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
    flex-wrap: wrap !important;
}

.gallery-hero-tag {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    background: rgba(255, 241, 237, 0.95) !important;
    border: 1.2px solid #F4C4B8 !important;
    padding: 5px 16px !important;
    border-radius: 50px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #8B1D38 !important;
    letter-spacing: 0.8px !important;
    text-transform: uppercase !important;
    box-shadow: 0 2px 8px rgba(139, 29, 56, 0.04) !important;
}

.gallery-hero-tag .tag-icon {
    font-size: 11.5px !important;
    color: #8B1D38 !important;
    line-height: 1 !important;
}

.breadcrumb-dash {
    color: #E2B2A6 !important;
    font-size: 14px !important;
    font-weight: 300 !important;
    line-height: 1 !important;
}

.gallery-hero-breadcrumb {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 11.5px !important;
}

.gallery-hero-breadcrumb .bc-link {
    color: #554C4E !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: color 0.25s ease !important;
}

.gallery-hero-breadcrumb .bc-link:hover {
    color: #8B1D38 !important;
}

.gallery-hero-breadcrumb .bc-sep {
    color: #D3A59B !important;
    font-size: 11px !important;
}

.gallery-hero-breadcrumb .bc-current {
    color: #8B1D38 !important;
    font-weight: 700 !important;
    letter-spacing: 0.3px !important;
}

/* Main Heading */
.gallery-hero-title {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 38px !important;
    font-weight: 700 !important;
    color: #1A1516 !important;
    line-height: 1.22 !important;
    margin-bottom: 14px !important;
    letter-spacing: -0.3px !important;
}

.gallery-hero-title .script-artistry-wrap {
    position: relative !important;
    display: inline-block !important;
}

.gallery-hero-title .script-artistry {
    font-family: 'Alex Brush', cursive !important;
    font-size: 58px !important;
    color: #941C35 !important;
    font-weight: 400 !important;
    display: inline-block !important;
    margin-left: 2px !important;
    line-height: 0.9 !important;
    vertical-align: -3px !important;
}

.gallery-hero-title .script-heart {
    font-size: 26px !important;
    color: #941C35 !important;
    font-weight: 300 !important;
    display: inline-block !important;
    margin-left: 4px !important;
    transform: rotate(12deg) translateY(-8px) !important;
    line-height: 1 !important;
}

.gallery-hero-title .script-underline-flourish {
    position: absolute !important;
    bottom: -6px !important;
    left: 4px !important;
    width: 98% !important;
    height: 16px !important;
    pointer-events: none !important;
}

/* Description */
.gallery-hero-desc {
    font-family: 'Poppins', sans-serif !important;
    font-size: 13.5px !important;
    line-height: 1.7 !important;
    color: #554C4E !important;
    margin-bottom: 24px !important;
    max-width: 530px !important;
}

/* 4 Micro Feature Pillars (Rounded Cards) */
.gallery-hero-pillars {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
    margin-top: 10px !important;
}

.gallery-pillar-card {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(8px) !important;
    border: 1.2px solid #F3DAD1 !important;
    border-radius: 16px !important;
    padding: 14px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    box-shadow: 0 4px 14px rgba(139, 29, 56, 0.05) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease !important;
}

.gallery-pillar-card:hover {
    transform: translateY(-3px) !important;
    background: #FFFFFF !important;
    border-color: #8B1D38 !important;
    box-shadow: 0 10px 22px rgba(139, 29, 56, 0.12) !important;
}

.gallery-pillar-card .pillar-icon-box {
    width: 42px !important;
    height: 42px !important;
    border-radius: 50% !important;
    background: #FEECE8 !important;
    border: 1.2px solid #F7CBC1 !important;
    color: #8B1D38 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 15px !important;
    margin-bottom: 8px !important;
    box-shadow: 0 4px 10px rgba(139, 29, 56, 0.06) !important;
    transition: transform 0.3s ease, background-color 0.3s ease, color 0.3s ease !important;
}

.gallery-pillar-card:hover .pillar-icon-box {
    background: #8B1D38 !important;
    color: #FFFFFF !important;
    border-color: #8B1D38 !important;
    transform: scale(1.08) !important;
}

.gallery-pillar-card .pillar-name {
    font-family: 'Poppins', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #282122 !important;
    line-height: 1.28 !important;
    white-space: normal !important;
}

/* --------------------------------------------------------------------------
   HERO RIGHT COLUMN: GRAND DOME ARCH & FLOATING THUMBNAIL CARDS
   (Signature look card and action buttons removed per user request)
   -------------------------------------------------------------------------- */
.gallery-hero-visual-wrap {
    position: relative !important;
    width: 100% !important;
    max-width: 500px !important;
    height: 460px !important;
    margin: 0 auto !important;
    z-index: 2 !important;
}

/* Soft Glow Halo behind Arch */
.gallery-arch-halo {
    position: absolute !important;
    top: 10px !important;
    right: 15px !important;
    width: 390px !important;
    height: 430px !important;
    border-radius: 140px 240px 50px 50px !important;
    background: radial-gradient(circle, rgba(246, 203, 195, 0.45) 0%, rgba(254, 230, 225, 0.1) 70%, transparent 100%) !important;
    filter: blur(14px) !important;
    z-index: 1 !important;
    pointer-events: none !important;
}

/* Botanical Watercolor Roses */
.gallery-flower-decor {
    position: absolute !important;
    pointer-events: none !important;
    z-index: 3 !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
}

.gallery-flower-decor.rose-top-right {
    top: -10px !important;
    right: -20px !important;
    width: 130px !important;
    height: 130px !important;
    opacity: 0.88 !important;
    background-image: url("data:image/svg+xml,%3Csvg width='140' height='140' viewBox='0 0 140 140' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 35C65 18 90 20 102 34C114 48 112 70 98 84C84 98 60 100 45 88C30 75 32 50 50 35Z' fill='%23F6BEB1' fill-opacity='0.45'/%3E%3Cpath d='M58 44C68 32 85 34 94 45C102 56 100 70 90 80C80 90 66 90 56 80C46 70 48 54 58 44Z' fill='%23E98F82' fill-opacity='0.6'/%3E%3Cpath d='M65 52C72 45 82 46 88 54C92 60 90 70 82 75C75 80 68 76 64 70C60 64 62 56 65 52Z' fill='%23BA2A46' fill-opacity='0.75'/%3E%3Cpath d='M25 80C10 88 2 75 10 60C18 50 32 60 25 80Z' fill='%237D9667' fill-opacity='0.65'/%3E%3Cpath d='M105 85C118 92 125 80 118 68C110 58 100 68 105 85Z' fill='%238FA875' fill-opacity='0.6'/%3E%3C/svg%3E") !important;
}

.gallery-flower-decor.rose-bottom-right {
    bottom: 0px !important;
    right: -25px !important;
    width: 115px !important;
    height: 115px !important;
    opacity: 0.85 !important;
    background-image: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 28C52 14 72 16 82 26C92 36 90 54 80 65C70 76 50 78 38 68C28 58 30 40 40 28Z' fill='%23F6BEB1' fill-opacity='0.4'/%3E%3Cpath d='M46 35C54 25 68 26 75 34C80 42 80 54 72 62C65 68 54 68 47 62C40 54 42 42 46 35Z' fill='%23E98F82' fill-opacity='0.55'/%3E%3Cpath d='M52 42C58 36 66 38 70 44C74 50 70 58 64 60C58 62 52 60 50 54C48 48 50 44 52 42Z' fill='%23C93E57' fill-opacity='0.7'/%3E%3Cpath d='M85 70C98 75 102 62 95 52C88 45 80 55 85 70Z' fill='%238DA378' fill-opacity='0.6'/%3E%3C/svg%3E") !important;
}

.gallery-flower-decor.rose-left {
    top: 140px !important;
    left: -20px !important;
    width: 95px !important;
    height: 95px !important;
    opacity: 0.75 !important;
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 65C15 55 10 35 25 20C40 5 65 10 75 25C85 40 75 65 60 75C45 85 35 75 30 65Z' fill='%23F4B5A6' fill-opacity='0.45'/%3E%3Cpath d='M35 55C25 45 25 30 38 22C50 15 65 20 70 32C75 45 68 60 55 65C45 70 38 62 35 55Z' fill='%23E9897E' fill-opacity='0.6'/%3E%3Cpath d='M42 45C38 38 42 28 50 25C58 22 65 28 65 35C65 42 58 48 50 48C45 48 43 46 42 45Z' fill='%23D4586B' fill-opacity='0.75'/%3E%3Cpath d='M15 70C5 75 0 65 5 55C10 48 20 55 15 70Z' fill='%238DA378' fill-opacity='0.65'/%3E%3C/svg%3E") !important;
}

/* Grand Burgundy & Gold Dome Arch Frame */
.gallery-arch-outer-frame {
    position: absolute !important;
    top: 15px !important;
    right: 15px !important;
    width: 380px !important;
    height: 420px !important;
    border-radius: 140px 240px 30px 40px !important;
    border: 6px solid #6E0E24 !important;
    box-shadow: inset 0 0 0 2px #DFB34E, 0 20px 48px rgba(110, 14, 36, 0.28) !important;
    overflow: hidden !important;
    z-index: 2 !important;
    background: #6E0E24 !important;
    transition: transform 0.4s ease !important;
}

.gallery-arch-inner-mat {
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    border-radius: 134px 234px 24px 34px !important;
    position: relative !important;
}

.arch-model-photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: 84% 28% !important;
    display: block !important;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.gallery-arch-outer-frame:hover .arch-model-photo {
    transform: scale(1.05) !important;
}

/* Two Vertically Stacked Floating Thumbnail Cards */
.gallery-hero-thumbs-col {
    position: absolute !important;
    top: 55px !important;
    left: -15px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    z-index: 4 !important;
}

.gallery-hero-thumb-card {
    width: 135px !important;
    height: 125px !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    border: 4px solid #FFFFFF !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18) !important;
    transition: transform 0.35s ease, box-shadow 0.35s ease !important;
}

.gallery-hero-thumb-card:hover {
    transform: translateY(-3px) scale(1.05) !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22) !important;
}

.gallery-hero-thumb-card .thumb-photo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.gallery-hero-thumb-card .eye-photo {
    object-position: 33% 40% !important;
    transform: scale(1.4) !important;
    transform-origin: 33% 40% !important;
}

.gallery-hero-thumb-card .profile-photo {
    object-position: 50% 15% !important;
}

/* --------------------------------------------------------------------------
   2. OUR GALLERY EDITORIAL SHOWCASE (FULL HEIGHT & WIDTH MASONRY GRID)
   -------------------------------------------------------------------------- */
.sunshine-gallery-page-section {
    position: relative !important;
    background: #FAF4F0 !important;
    padding: 65px 0 85px 0 !important;
    overflow: hidden !important;
}

/* Subtle Ambient Glow */
.sunshine-gallery-page-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 800px;
    height: 350px;
    background: radial-gradient(ellipse at top, rgba(222, 188, 151, 0.22) 0%, transparent 70%);
    pointer-events: none;
}

/* Section Header */
.gallery-section-heading {
    text-align: center;
    margin-bottom: 45px;
    position: relative;
    z-index: 3;
}

.gallery-section-tag {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.gallery-section-tag .tag-line {
    width: 32px;
    height: 1.5px;
    background: var(--gallery-burgundy-main);
    display: inline-block;
}

.gallery-section-tag .tag-text {
    font-family: 'Poppins', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--gallery-burgundy-main);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.gallery-section-title {
    font-family: 'Playfair Display', Georgia, serif !important;
    font-size: 38px !important;
    font-weight: 700 !important;
    color: var(--gallery-text-dark) !important;
    margin-bottom: 12px !important;
    line-height: 1.25 !important;
}

.gallery-section-title .script-highlight {
    font-family: 'Alex Brush', cursive !important;
    font-size: 50px !important;
    font-weight: 400 !important;
    color: var(--gallery-burgundy-main) !important;
    display: inline-block !important;
    line-height: 1 !important;
}

.gallery-section-desc {
    font-family: 'Poppins', sans-serif !important;
    font-size: 14.5px !important;
    line-height: 1.7 !important;
    color: var(--gallery-text-body) !important;
    max-width: 660px;
    margin: 0 auto;
}

/* --------------------------------------------------------------------------
   LUXURY EDITORIAL MASONRY GRID (FULL HEIGHT & FULL WIDTH)
   -------------------------------------------------------------------------- */
.sunshine-masonry-grid {
    column-count: 3;
    column-gap: 26px;
    position: relative;
    z-index: 3;
}

.sunshine-masonry-item {
    break-inside: avoid;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    display: inline-block;
    width: 100%;
    margin-bottom: 26px;
}

.sunshine-gallery-card-item {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    background: #FFFFFF;
    border: 1.5px solid rgba(212, 175, 122, 0.35);
    box-shadow: 0 8px 24px rgba(139, 29, 56, 0.06);
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.sunshine-gallery-card-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 38px rgba(139, 29, 56, 0.16);
    border-color: var(--gallery-gold-accent);
}

/* Image Link & Uncropped Image */
.sunshine-gallery-link {
    display: block;
    position: relative;
    width: 100%;
    overflow: hidden;
    text-decoration: none !important;
    cursor: pointer;
    background: #EAE0D8;
}

.sunshine-gallery-full-img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.sunshine-gallery-card-item:hover .sunshine-gallery-full-img {
    transform: scale(1.04);
}

/* Subtle Dark Burgundy Vignette Hover Overlay */
.sunshine-gallery-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(88, 11, 27, 0.88) 0%, rgba(139, 29, 56, 0.45) 50%, rgba(139, 29, 56, 0.08) 100%);
    opacity: 0;
    transition: opacity 0.35s ease;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 18px 20px;
}

.sunshine-gallery-card-item:hover .sunshine-gallery-overlay {
    opacity: 1;
}

/* Zoom Lightbox Icon Badge */
.gallery-zoom-badge {
    align-self: flex-end;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #FFFFFF;
    color: var(--gallery-burgundy-main);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
    transform: translateY(-8px) scale(0.85);
    transition: all 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.sunshine-gallery-card-item:hover .gallery-zoom-badge {
    transform: translateY(0) scale(1);
}

.gallery-zoom-badge:hover {
    background: var(--gallery-gold-accent) !important;
    color: var(--gallery-burgundy-dark) !important;
    transform: scale(1.1) !important;
}

/* Caption Bottom Area */
.gallery-item-caption {
    transform: translateY(12px);
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.sunshine-gallery-card-item:hover .gallery-item-caption {
    transform: translateY(0);
}

.gallery-item-caption .caption-tag {
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: #DEBC97;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    display: block;
    margin-bottom: 2px;
}

.gallery-item-caption .caption-title {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 17.5px;
    font-weight: 700;
    color: #FFFFFF;
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.gallery-item-caption .caption-studio {
    font-family: 'Poppins', sans-serif;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.88);
    display: flex;
    align-items: center;
    gap: 6px;
}

.gallery-item-caption .caption-studio i {
    color: #DEBC97;
    font-size: 11px;
}

/* --------------------------------------------------------------------------
   3. BOTTOM LUXURY CALLOUT BANNER (CTA)
   -------------------------------------------------------------------------- */
.gallery-bottom-cta {
    position: relative;
    background: linear-gradient(135deg, #8B1D38 0%, #580B1B 100%);
    border-radius: 22px;
    padding: 38px 42px;
    margin-top: 45px;
    box-shadow: 0 20px 45px rgba(139, 29, 56, 0.25);
    border: 2px solid rgba(222, 188, 151, 0.4);
    overflow: hidden;
    z-index: 5;
}

.gallery-bottom-cta::before {
    content: "";
    position: absolute;
    top: -50px;
    right: -50px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(222, 188, 151, 0.2) 0%, transparent 70%);
    pointer-events: none;
}

.gallery-bottom-cta-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 24px;
    position: relative;
    z-index: 2;
}

.gallery-bottom-cta-text h3 {
    font-family: 'Playfair Display', serif !important;
    font-size: 27px !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    margin-bottom: 6px !important;
}

.gallery-bottom-cta-text h3 .script-touch {
    font-family: 'Alex Brush', cursive !important;
    font-size: 38px !important;
    color: #DEBC97 !important;
    font-weight: 400 !important;
}

.gallery-bottom-cta-text p {
    font-family: 'Poppins', sans-serif !important;
    font-size: 14px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    margin: 0 !important;
    max-width: 550px;
}

.gallery-bottom-cta-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.gallery-btn-gold {
    background: linear-gradient(135deg, #DEBC97 0%, #C89D66 100%) !important;
    color: #580B1B !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    padding: 12px 26px !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.3s ease !important;
}

.gallery-btn-gold:hover {
    background: linear-gradient(135deg, #FFFFFF 0%, #FAF3EF 100%) !important;
    color: #8B1D38 !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.3) !important;
}

.gallery-btn-outline-white {
    background: transparent !important;
    color: #FFFFFF !important;
    border: 1.5px solid rgba(255, 255, 255, 0.75) !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    padding: 11px 24px !important;
    border-radius: 50px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.3s ease !important;
}

.gallery-btn-outline-white:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #FFFFFF !important;
    border-color: #FFFFFF !important;
    transform: translateY(-2px);
}


/* --------------------------------------------------------------------------
   4. RESPONSIVE MEDIA QUERIES FOR GALLERY PAGE
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .gallery-hero-title {
        font-size: 32px !important;
    }

    .gallery-hero-title .script-artistry {
        font-size: 50px !important;
    }

    .gallery-hero-title .script-heart {
        font-size: 22px !important;
    }

    .gallery-hero-desc {
        font-size: 13px !important;
    }

    .gallery-hero-pillars {
        gap: 8px !important;
    }

    .gallery-pillar-card {
        padding: 12px 6px !important;
    }

    .gallery-pillar-card .pillar-icon-box {
        width: 38px !important;
        height: 38px !important;
        font-size: 13px !important;
    }

    .gallery-pillar-card .pillar-name {
        font-size: 10.5px !important;
    }

    .gallery-hero-visual-wrap {
        max-width: 440px !important;
        height: 410px !important;
    }

    .gallery-arch-outer-frame {
        width: 330px !important;
        height: 375px !important;
        right: 10px !important;
    }

    .gallery-arch-halo {
        width: 340px !important;
        height: 380px !important;
    }

    .gallery-hero-thumb-card {
        width: 120px !important;
        height: 110px !important;
    }

    .gallery-hero-thumbs-col {
        left: -10px !important;
        top: 45px !important;
    }

    .gallery-section-title {
        font-size: 34px !important;
    }

    .gallery-section-title .script-highlight {
        font-size: 44px !important;
    }

    .sunshine-masonry-grid {
        column-gap: 20px;
    }

    .sunshine-masonry-item {
        margin-bottom: 20px;
    }
}

@media (max-width: 991.98px) {
    .sunshine-gallery-hero-section {
        padding: 40px 0 50px 0 !important;
    }

    .gallery-hero-content {
        text-align: center !important;
        padding-right: 0 !important;
        margin-bottom: 35px !important;
    }

    .gallery-hero-breadcrumb-wrap {
        justify-content: center !important;
    }

    .gallery-hero-title {
        font-size: 30px !important;
    }

    .gallery-hero-title .script-artistry {
        font-size: 48px !important;
    }

    .gallery-hero-desc {
        margin-left: auto !important;
        margin-right: auto !important;
        max-width: 580px !important;
    }

    .gallery-hero-pillars {
        max-width: 540px !important;
        margin: 20px auto 0 auto !important;
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 10px !important;
    }

    .gallery-hero-visual-wrap {
        margin: 0 auto !important;
        max-width: 440px !important;
        height: 410px !important;
    }

    .sunshine-masonry-grid {
        column-count: 2;
        column-gap: 18px;
    }

    .sunshine-masonry-item {
        margin-bottom: 18px;
    }

    .gallery-bottom-cta {
        padding: 30px 22px;
        text-align: center;
    }

    .gallery-bottom-cta-content {
        justify-content: center;
    }

    .gallery-bottom-cta-text p {
        margin: 0 auto !important;
    }

    .gallery-bottom-cta-actions {
        justify-content: center;
    }
}

@media (max-width: 767.98px) {
    .sunshine-gallery-hero-section {
        padding: 30px 0 40px 0 !important;
    }

    .gallery-hero-breadcrumb-wrap {
        gap: 8px !important;
    }

    .gallery-hero-title {
        font-size: 25px !important;
    }

    .gallery-hero-title .script-artistry {
        font-size: 40px !important;
    }

    .gallery-hero-title .script-heart {
        font-size: 20px !important;
    }

    .gallery-hero-desc {
        font-size: 12.5px !important;
        line-height: 1.6 !important;
        margin-bottom: 18px !important;
    }

    .gallery-hero-pillars {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
        max-width: 400px !important;
    }

    .gallery-pillar-card {
        flex-direction: row !important;
        text-align: left !important;
        padding: 10px 14px !important;
        gap: 10px !important;
        justify-content: flex-start !important;
    }

    .gallery-pillar-card .pillar-icon-box {
        margin-bottom: 0 !important;
        flex-shrink: 0 !important;
        width: 36px !important;
        height: 36px !important;
        font-size: 13px !important;
    }

    .gallery-pillar-card .pillar-name br {
        display: none !important;
    }

    .gallery-pillar-card .pillar-name {
        font-size: 11px !important;
    }

    .gallery-hero-visual-wrap {
        max-width: 360px !important;
        height: 350px !important;
    }

    .gallery-arch-outer-frame {
        width: 270px !important;
        height: 320px !important;
        right: 5px !important;
        border-width: 4px !important;
        border-radius: 100px 180px 24px 30px !important;
    }

    .gallery-arch-inner-mat {
        border-radius: 96px 174px 20px 26px !important;
    }

    .gallery-arch-halo {
        width: 280px !important;
        height: 330px !important;
    }

    .gallery-hero-thumbs-col {
        left: 0px !important;
        top: 35px !important;
        gap: 12px !important;
    }

    .gallery-hero-thumb-card {
        width: 100px !important;
        height: 95px !important;
        border-width: 3px !important;
        border-radius: 14px !important;
    }

    .sunshine-masonry-grid {
        column-count: 2;
        column-gap: 14px;
    }

    .sunshine-masonry-item {
        margin-bottom: 14px;
    }
}

@media (max-width: 575.98px) {
    .gallery-hero-breadcrumb-wrap {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important;
    }

    .gallery-hero-tag {
        padding: 4px 12px !important;
        font-size: 10px !important;
    }

    .gallery-hero-breadcrumb {
        font-size: 10.5px !important;
    }

    .gallery-hero-title {
        font-size: 22px !important;
    }

    .gallery-hero-title .script-artistry {
        font-size: 34px !important;
    }

    .gallery-hero-title .script-heart {
        font-size: 16px !important;
    }

    .gallery-hero-pillars {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
        max-width: 100% !important;
    }

    .gallery-pillar-card {
        padding: 8px 10px !important;
        gap: 8px !important;
    }

    .gallery-pillar-card .pillar-icon-box {
        width: 32px !important;
        height: 32px !important;
        font-size: 11px !important;
    }

    .gallery-pillar-card .pillar-name {
        font-size: 10px !important;
    }

    .gallery-hero-visual-wrap {
        max-width: 320px !important;
        height: 300px !important;
    }

    .gallery-arch-outer-frame {
        width: 235px !important;
        height: 275px !important;
        border-radius: 80px 150px 20px 25px !important;
        border-width: 4px !important;
    }

    .gallery-arch-inner-mat {
        border-radius: 76px 146px 16px 21px !important;
    }

    .gallery-hero-thumbs-col {
        left: 0px !important;
        top: 25px !important;
        gap: 10px !important;
    }

    .gallery-hero-thumb-card {
        width: 85px !important;
        height: 80px !important;
        border-radius: 12px !important;
    }

    .gallery-flower-decor.rose-top-right {
        width: 80px !important;
        height: 80px !important;
    }

    .gallery-flower-decor.rose-bottom-right {
        width: 70px !important;
        height: 70px !important;
    }

    .gallery-flower-decor.rose-left {
        display: none !important;
    }

    .sunshine-masonry-grid {
        column-count: 1;
        column-gap: 0;
    }

    .sunshine-masonry-item {
        margin-bottom: 18px;
    }
}

/* ==================================================
   LUXURY VENOBOX LIGHTBOX FULL-IMAGE STYLING
   Fixes cropped portrait/vertical images on home and gallery pages
   ================================================== */
.vbox-overlay {
    background: rgba(14, 10, 13, 0.94) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    z-index: 999999 !important;
}

.vbox-container {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    z-index: 20 !important;
}

.vbox-content {
    width: auto !important;
    height: auto !important;
    max-width: calc(100vw - 140px) !important;
    max-height: calc(100vh - 80px) !important;
    position: relative !important;
    overflow: visible !important;
    margin: 0 auto !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.vbox-container img,
.vbox-content img,
img.vbox-figlio {
    max-width: calc(100vw - 160px) !important;
    max-height: calc(100vh - 90px) !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
    border-radius: 8px !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(222, 188, 151, 0.3) !important;
    transition: opacity 0.3s ease !important;
}

.vbox-figlio {
    box-shadow: none !important;
    background: transparent !important;
}

/* Luxury Round Floating Prev/Next Buttons */
.vbox-prev,
.vbox-next {
    position: fixed !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin-top: 0 !important;
    width: 52px !important;
    height: 52px !important;
    background: rgba(88, 11, 27, 0.75) !important;
    border: 1.5px solid rgba(222, 188, 151, 0.6) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    z-index: 9999999 !important;
    backdrop-filter: blur(4px) !important;
}

.vbox-prev:hover,
.vbox-next:hover {
    background: #8B1D38 !important;
    border-color: #DEBC97 !important;
    transform: translateY(-50%) scale(1.1) !important;
    box-shadow: 0 8px 25px rgba(139, 29, 56, 0.5) !important;
}

.vbox-prev {
    left: 20px !important;
}

.vbox-next {
    right: 20px !important;
}

.vbox-prev span,
.vbox-next span {
    border-top-color: #FFFFFF !important;
    border-right-color: #FFFFFF !important;
    border-width: 2.5px !important;
    width: 13px !important;
    height: 13px !important;
    top: 50% !important;
    margin-top: -6px !important;
}

.vbox-prev span {
    left: 19px !important;
}

.vbox-next span {
    right: 19px !important;
}

/* Luxury Round Close Button */
.vbox-close {
    position: fixed !important;
    top: 18px !important;
    right: 22px !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: rgba(88, 11, 27, 0.75) !important;
    border: 1.5px solid rgba(222, 188, 151, 0.6) !important;
    color: #FFFFFF !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    z-index: 9999999 !important;
    backdrop-filter: blur(4px) !important;
}

.vbox-close:hover {
    background: #8B1D38 !important;
    border-color: #DEBC97 !important;
    color: #FFFFFF !important;
    transform: rotate(90deg) scale(1.08) !important;
}

/* Luxury Numeration Tag */
.vbox-left {
    position: fixed !important;
    top: 20px !important;
    left: 24px !important;
    z-index: 9999999 !important;
}

.vbox-num {
    background: rgba(88, 11, 27, 0.75) !important;
    border: 1px solid rgba(222, 188, 151, 0.5) !important;
    color: #DEBC97 !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 6px 14px !important;
    border-radius: 30px !important;
    letter-spacing: 1px !important;
    backdrop-filter: blur(4px) !important;
}

/* Responsive Overrides */
@media (max-width: 767.98px) {
    .vbox-content {
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100vh - 100px) !important;
    }

    .vbox-container img,
    .vbox-content img,
    img.vbox-figlio {
        max-width: calc(100vw - 20px) !important;
        max-height: calc(100vh - 110px) !important;
    }

    .vbox-prev {
        left: 10px !important;
        width: 42px !important;
        height: 42px !important;
    }

    .vbox-next {
        right: 10px !important;
        width: 42px !important;
        height: 42px !important;
    }

    .vbox-close {
        top: 12px !important;
        right: 12px !important;
        width: 38px !important;
        height: 38px !important;
        font-size: 20px !important;
    }

    .vbox-left {
        top: 14px !important;
        left: 14px !important;
    }

    .vbox-num {
        font-size: 11px !important;
        padding: 4px 10px !important;
    }
}