/*
        New styles for the project modal to match the requested layout.
    */

    .modal-header {
        display: flex;
        flex-direction: column;
        gap: var(--space-6);
        margin: 0 0 var(--space-6);
    }

    .modal-subtitle {
        margin: .25rem 0 0;
        font-size: var(--font-size-lg);
        opacity: .8;
        line-height: 1.35;
    }

    .modal-title-group {
        text-align: center;
    }

    #modal-title {
        margin-top: 0;
        margin-bottom: 0.5rem;
        font-size: 1.8rem;
        line-height: 1.2;
        font-weight: 500;
    }


    .modal-hero {
        width: 100%;
        border-radius: var(--radius-lg);
        overflow: hidden;
        margin: 0 auto;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }

    /* Optional: on extremely tall viewports, keep hero from dominating screen */
    @media (min-width: 1400px) and (min-height: 900px) {
        .modal-hero {
            max-height: min(90vh, 1000px);
        }
    }

    .modal-hero img {
        aspect-ratio: 14 / 7;
        width: 100%;
        height: auto;
        object-fit: cover;
        display: block;
    }

    /* Landscape Header Enhancement for Projects Modal */
    .modal-hero.landscape-header {
        aspect-ratio: 16/9;
        position: relative;
        overflow: hidden;
    }

    .modal-hero.landscape-header img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        transition: transform 0.3s ease;
    }

    .modal-hero.landscape-header:hover img {
        transform: scale(1.02);
    }

    /* Ensure hero stays within padding and scales proportionally */
    .modal-header .modal-hero {
        margin: 0 0 var(--space-4);
        width: 100%;
    }

    .modal-header .modal-hero img {
        width: 100%;
        height: auto !important;
        max-height: none !important;
        display: block;
    }

    .modal-body {
        display: grid;
        grid-template-columns: 1fr 420px;
        grid-auto-rows: auto;
        gap: 2rem 2.25rem;
        align-items: start;
    }

    /* Hero occupies full width first row */
    .modal-body>.modal-hero {
        grid-column: 1 / -1;
    }

    /* Description (left column), side content (right column) */
    .modal-body>.modal-desc {
        grid-column: 1;
        max-width: 60ch;
    }

    .modal-body>.modal-side {
        grid-column: 2;
        display: flex;
        flex-direction: column;
        gap: var(--space-6);
    }

    /* When only one of plan/gallery present, spacing still consistent */
    .modal-body>.modal-side:empty {
        display: none;
    }

    .modal-left {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
    }

    .modal-aside {
        display: flex;
        flex-direction: column;
        gap: 1.75rem;
    }

    .modal-hero-single {
        margin: 0;
    }

    .modal-hero-single img {
        width: 100%;
        border-radius: var(--radius-md);
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    }

    /* Plan Carousel */
    .plan-carousel {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .plan-carousel-bottom {
        grid-column: 1 / -1;
        margin-top: .5rem;
        padding-top: .25rem;
    }

    .plan-carousel-bottom .plan-swiper {
        width: 100%;
    }

    .plan-carousel .plan-swiper {
        width: 100%;
    }

    .plan-carousel .plan-slide figure {
        margin: 0 0 .5rem;
        aspect-ratio: 16/9;
        border-radius: var(--radius-md);
        overflow: hidden;
        background: #000;
    }

    .plan-carousel .plan-slide img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    .plan-slide-caption {
        font-size: .8rem;
        letter-spacing: .5px;
        text-transform: uppercase;
        opacity: .75;
        text-align: center;
    }

    /* Static group (≤3) */
    .plan-static-group {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 1rem;
    }

    .plan-static {
        margin: 0;
        text-align: center;
    }

    .plan-static img {
        width: 100%;
        aspect-ratio: 16/10;
        object-fit: cover;
        border-radius: var(--radius-md);
        display: block;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    }

    .plan-static figcaption {
        margin-top: .4rem;
        font-size: .75rem;
        letter-spacing: .5px;
        opacity: .7;
        text-transform: uppercase;
    }

    /* Pagination bullets inside plan swiper reuse existing token colors */
    .plan-carousel .swiper-pagination-bullet {
        width: 10px !important;
        height: 10px !important;
        flex-shrink: 0;
        flex-grow: 0;
        margin: 0 2px !important;
        background: var(--color-brand-ink);
        opacity: .45;
    }

    .plan-carousel .swiper-pagination-bullet-active {
        background: var(--color-brand-surface);
        border: 2px solid var(--color-brand-ink);
        opacity: 1;
    }

    .modal-col-left .modal-desc {
        font-size: var(--font-size-base);
        line-height: 1.7;
        text-align: justify;
    }

    .modal-col-right {
        width: 100%;
        display: flex;
        justify-content: flex-end;
        align-items: flex-start;
        padding-right: var(--space-8);
    }

    /* Three-column layout structure: Upper row (text + icon table) + Lower centered section (technical drawings) */
    .modal-body-three-columns {
        display: flex;
        flex-direction: column;
        gap: var(--space-8);
    }

    .modal-body-upper-row {
        display: flex;
        flex-direction: row;
        gap: var(--space-6);
        min-height: fit-content;
    }

    .modal-body-three-columns .modal-col-left {
        flex: 1 1 75%;
        min-width: 0;
    }

    .modal-body-three-columns .modal-col-middle {
        flex: 0 0 25%;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100%;
    }

    .modal-body-lower-section {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        overflow: visible;
    }

    .modal-body-three-columns .modal-col-right {
        width: 100%;
        max-width: 500px;
        padding-right: 0;
        justify-content: center;
        overflow: visible;
    }

    .modal-technical-drawings {
        width: 100%;
        max-width: 500px;
        margin-left: 0;
        padding-bottom: 1.5rem;
        /* establish containing block for absolutely positioned label */
        position: relative;
        /* allow nav buttons to escape this box if needed */
        overflow: visible;
    }

    .modal-technical-drawings h3 {
        font-size: var(--font-size-lg);
        font-weight: 600;
        color: var(--color-text);
        margin: 0;
        text-align: center;
    }

    .modal-technical-drawings .technical-drawings-swiper {
        aspect-ratio: 1 / 1;
        width: 100%;
        position: relative;
        overflow: visible;
        padding-bottom: 1rem;
    }

    .technical-drawings-swiper .swiper-slide {
        position: relative;
        aspect-ratio: 1/1;
    }

    .technical-drawings-swiper .technical-drawing {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        border-radius: var(--radius-md);
    }

    /* Modifier for drawings that must be fully visible without cropping */
    .technical-drawings-swiper .technical-drawing--contain {
        object-fit: contain;
        background-color: #fff;
        border-radius: var(--radius-md);
        /* ensures letterboxing blends nicely */
    }

    .drawing-label {
        position: static;
        background: none;
        color: var(--color-text, #0F0814);
        padding: 0.5rem 0 0 0;
        font-size: var(--font-size-small);
        font-weight: 500;
        text-align: center;
        opacity: 0.85;
    }

    .technical-drawings-swiper .swiper-button-next,
    .technical-drawings-swiper .swiper-button-prev {
        position: absolute;
        top: calc(50% + 0.5rem) !important;
        /* Center on image area, accounting for label height */
        margin-top: 0 !important;
        transform: translateY(-50%) !important;
        width: 44px;
        height: 44px;
        background-color: rgba(255, 255, 255, 0.9);
        border-radius: 50%;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        z-index: 10;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--color-brand-ink);
        transition: all var(--transition-base) var(--ease-in-out);
    }

    /* Desktop positioning for technical drawings navigation */
    @media (min-width: 769px) {
        .technical-drawings-swiper .swiper-button-next {
            right: -50px;
        }

        .technical-drawings-swiper .swiper-button-prev {
            left: -50px;
        }
    }

    .technical-drawings-swiper .swiper-button-next:hover,
    .technical-drawings-swiper .swiper-button-prev:hover {
        background-color: white;
        transform: translateY(-50%) scale(1.05) !important;
    }

    .technical-drawings-swiper .swiper-button-next::after,
    .technical-drawings-swiper .swiper-button-prev::after {
        font-size: 22px;
        font-weight: bold;
        color: var(--color-brand-ink);
    }

    .technical-drawings-swiper .swiper-button-prev::after {
        content: '←';
    }

    .technical-drawings-swiper .swiper-button-next::after {
        content: '→';
    }

    .modal-technical-drawings .technical-drawings-swiper {
        aspect-ratio: 1 / 1;
        width: 100%;
        position: relative;
    }

    .modal-technical-drawings .swiper-pagination {
        position: relative;
        left: auto;
        transform: none;
        margin-top: var(--space-12);
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 4px;
        z-index: 10;
        white-space: normal;
        word-wrap: break-word;
        bottom: 0 !important;
    }

    .modal-technical-drawings .swiper-pagination-bullet,
    .technical-drawings-swiper .swiper-pagination-bullet {
        width: 10px !important;
        height: 10px !important;
        flex-shrink: 0;
        flex-grow: 0;
        margin: 0 2px !important;
        background-color: var(--color-brand-surface, rgba(248, 248, 248, 0.8));
        opacity: 0.7;
        border-radius: 50%;
        transition: all 0.2s ease;
        border: 1px solid var(--color-brand-ink, #0F0814);
    }


    .modal-technical-drawings .swiper-pagination-bullet-active,
    .technical-drawings-swiper .swiper-pagination-bullet-active {
        background-color: var(--color-brand-ink, white);
        opacity: 1;
        transform: scale(1.1);
    }

    /* Modal Gallery */
    .modal-gallery {
        width: 100%;
    }

    .modal-gallery .swiper-slide figure {
        margin: 0;
    }

    .modal-gallery .swiper-slide img {
        width: 100%;
        height: auto;
        border-radius: var(--radius-md);
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    }

    .modal-gallery .swiper-pagination-bullet {
        width: 10px !important;
        height: 10px !important;
        flex-shrink: 0;
        flex-grow: 0;
        margin: 0 2px !important;
        background: var(--color-brand-ink);
        opacity: .4;
    }

    .modal-gallery .swiper-pagination-bullet-active {
        background: var(--color-brand-surface);
        border: 2px solid var(--color-brand-ink);
        opacity: 1;
    }

    /* ===== Modal Footer & Gallery Grid ===== */
    .modal-footer {
        grid-column: 1 / -1;
        border-top: 1px solid var(--color-border);
    }

    .modal-footer h3 {
        font-size: var(--font-size-lg);
        text-align: center;
        margin-bottom: var(--space-6);
        color: var(--color-text);
    }

    .footer-gallery-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-6);
    }

    .gallery-item {
        display: flex;
        flex-direction: column;
        text-align: center;
    }

    .gallery-item .gallery-image {
        width: 100%;
        height: 300px;
        object-fit: cover;
        object-position: center;
        border-radius: var(--radius-md);
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
        margin-bottom: var(--space-4);
        transition: transform var(--transition-base) var(--ease-in-out),
            box-shadow var(--transition-base) var(--ease-in-out);
    }

    .gallery-item .gallery-image:hover {
        transform: scale(1.02);
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    }

    /* Taller gallery images for specific projects */
    .gallery-item .gallery-image--tall {
        height: 400px;
    }

    .gallery-item .gallery-description {
        padding: var(--space-4) var(--space-2);
        font-size: var(--font-size-small);
        color: var(--color-text-muted);
        margin: 0;
        flex-grow: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 1.4;
    }

    .gallery-swiper-container {
        position: relative;
        overflow: hidden;
        /* Prevent slides from peeking out */
    }

    .gallery-swiper .swiper-wrapper {
        display: flex;
        /* Ensure slides are in a row */
    }

    .gallery-swiper .swiper-slide {
        flex-shrink: 0;
        /* Prevent slides from shrinking */
        box-sizing: border-box;
        text-align: center;
        /* The explicit width is causing issues with Swiper's calculation. 
        Let Swiper handle the slide width based on slidesPerView. */
        /* width: calc((100% - var(--space-6) * 2) / 3); */
    }

    .footer-gallery-next,
    .footer-gallery-prev {
        position: absolute;
        top: 150px !important;
        /* Center on 300px image (150px = center of image) */
        margin-top: 0 !important;
        transform: translateY(-50%) !important;
        width: 44px;
        height: 44px;
        background-color: rgba(255, 255, 255, 0.9);
        border-radius: 50%;
        box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        z-index: 10;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--color-brand-ink);
        transition: all var(--transition-base) var(--ease-in-out);
    }

    .footer-gallery-next:hover,
    .footer-gallery-prev:hover {
        background-color: white;
        transform: translateY(-50%) scale(1.05) !important;
    }

    .footer-gallery-prev {
        left: 16px;
    }

    .footer-gallery-next {
        right: 16px;
    }

    .footer-gallery-next::after,
    .footer-gallery-prev::after {
        font-size: 22px;
        font-weight: bold;
        color: var(--color-brand-ink);
    }

    .footer-gallery-prev::after {
        content: '←';
    }

    .footer-gallery-next::after {
        content: '→';
    }

    /* Icon table styling */
    .modal-icon-table {
        width: 100%;
        max-width: 240px;
        margin: 0 auto;
    }

    .modal-icon-table table {
        width: 100%;
        border: none;
        border-collapse: collapse;
    }

    .modal-icon-table td {
        width: 50%;
        text-align: center;
        vertical-align: top;
        border: none;
        padding: 0.75rem 0.5rem;
    }

    .icon-table-cell {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .icon-table-cell img {
        width: 32px;
        height: 32px;
        display: block;
    }

    .icon-table-text {
        font-size: 0.875rem;
        text-align: center;
        line-height: 1.3;
        font-weight: 500;
        color: var(--color-text);
    }

    /* At tablet size, move icon table above technical drawings but keep horizontal layout */
    @media
    /*(max-width: 1024px) and */
    (min-width: 769px) {
        .modal-body-three-columns {
            gap: 2rem;
        }

        .modal-body-upper-row {
            gap: 1.5rem;
            text-align: center;
            align-items: center;
        }

        .modal-col-left {
            max-width: 100%;
        }

        .modal-col-middle {
            max-width: 100%;
            justify-content: center;
        }

        .modal-col-right {
            max-width: 500px;
        }

        .modal-technical-drawings {
            max-width: 500px;
            margin: 0 auto;
        }

        .modal-icon-table {
            max-width: 300px;
            margin: 0 auto;
        }
    }

    @media (max-width: 768px) {
        .modal-hero img {
            aspect-ratio: auto;
        }

        .modal-body {
            grid-template-columns: 1fr;
        }

        .modal-body-three-columns {
            gap: 1.5rem;
        }

        .modal-body-upper-row {
            flex-direction: column;
            gap: 1.5rem;
        }

        .modal-col-left,
        .modal-col-middle,
        .modal-col-right {
            flex: 1 1 auto;
            max-width: 100%;
            min-width: 0;
        }

        .modal-col-middle {
            justify-content: center;
        }

        .modal-col-right {
            justify-content: center;
            overflow: hidden;
        }


        .modal-technical-drawings {
            margin-left: 0;
            max-width: 100%;
        }
    }

    @media (max-width: 480px) {
        .modal-body-three-columns {
            gap: 1rem;
        }

        .modal-body-upper-row {
            gap: 1rem;
        }
    }

    /* Ensure modal never causes horizontal scroll */
    .modal-body-three-columns {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: visible;
    }

    @media (max-width: 768px) {
        .footer-gallery-prev {
            left: 10px;
        }

        .footer-gallery-next {
            right: 10px;
        }

        .footer-gallery-grid {
            grid-template-columns: 1fr;
            gap: var(--space-5);
        }

        .gallery-swiper .swiper-slide {
            width: 100%;
        }

        .technical-drawing-caption {
            font-size: var(--font-size-small);
            padding: 0 var(--space-2);
        }
    }


    /* Projects modal (centralized from inline) */
    .projects-fullview {
        margin-top: 0 !important;
        display: none;
        position: fixed;
        inset: 0;
        background: var(--color-overlay);
        backdrop-filter: blur(3px);
        z-index: 99999 !important;
        padding: var(--space-4);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .projects-fullview.is-open {
        display: flex;
        /* Use flex for alignment */
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }

    .projects-fullview-inner {
        background: var(--color-surface);
        border-radius: var(--radius-xl);
        max-width: clamp(1024px, 92vw, 1800px);
        width: 100%;
        margin: var(--space-8) auto;
        margin-top: 0;
        margin-bottom: 0;
        padding: clamp(1.2rem, 2vw, 2.2rem);
        position: relative;
        box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        color: var(--color-text);
        box-sizing: border-box;
        overflow-x: hidden;
        z-index: 100000 !important;
    }

    /* Modal close button */
    .fullview-close {
        /* Sticky so it stays visible while scrolling */
        position: -webkit-sticky;
        position: sticky;
        top: 0.35rem;
        /* tighter to top */
        right: 0.4rem;
        /* closer to corner */
        left: auto;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255, 255, 255, 0.65);
        backdrop-filter: blur(2px);
        border: none;
        font-size: 2rem;
        line-height: 1;
        cursor: pointer;
        color: var(--color-text);
        padding: 0.2rem 0.5rem 0.3rem;
        /* more compact */
        border-radius: var(--radius-md, 8px);
        transition: background 0.25s ease, color 0.25s ease;
        z-index: 100001;
        /* Avoid affecting layout width; don't float so content below doesn't wrap */
        float: none;
        /* Push to the right edge within its container without using floats */
        margin-left: auto;
    }

    .fullview-close:hover {
        background: rgba(0, 0, 0, 0.06);
    }

    /* iPhone 11 specific fixes for pagination dots */
    @media (max-width: 414px) and (max-height: 896px) {
        .modal-technical-drawings .swiper-pagination {
            bottom: 25px !important;
            margin-bottom: 10px;
        }

        .projects-fullview-inner {
            padding-bottom: 3rem !important;
        }

        .modal-gallery .swiper-pagination {
            bottom: 25px !important;
            margin-bottom: 10px;
        }
    }

    /* MOBILE FULLSCREEN - JavaScript-controlled viewport */
    @media (max-width: 768px) {
        .projects-fullview {
            padding: 0.5rem !important;
            /* Height and padding will be controlled by JavaScript */
        }

        .projects-fullview.is-open {
            display: block !important;
            align-items: unset !important;
            justify-content: unset !important;
        }

        .projects-fullview-inner {
            margin: 0 auto !important;
            padding: 1.5rem 1rem 2rem 1rem !important;
            width: calc(100% - 1rem) !important;
            max-width: none !important;
            height: auto !important;
            border-radius: var(--radius-md);
            box-sizing: border-box;
            position: relative;
            /* Overflow will be controlled by JavaScript */
        }

        .fullview-close {
            font-size: 1.55rem;
            padding: 0.35rem 0.55rem 0.45rem;
            top: 0.35rem;
            right: 0.35rem;
            background: rgba(255, 255, 255, 0.8);
            margin-left: auto;
        }
    }

    /* Ensure content does not wrap around the close button if any floats exist */
    .modal-header,
    .modal-body {
        clear: both;
    }

    /* ===== Global Swiper Pagination Fixes ===== */
    /* Prevent bullet stretching on mobile when many images */
    .swiper-pagination-horizontal {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        padding: 0 10px !important;
    }

    .swiper-pagination-bullet {
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        width: 10px !important;
        height: 10px !important;
        margin: 0 2px !important;
    }

    /* Mobile-specific pagination adjustments */
    @media (max-width: 480px) {
        .swiper-pagination-horizontal {
            gap: 2px !important;
            padding: 0 8px !important;
        }

        .swiper-pagination-bullet {
            width: 8px !important;
            height: 8px !important;
            margin: 0 1px !important;
        }

        /* Smaller bullets for very small screens */
        @media (max-width: 360px) {
            .swiper-pagination-bullet {
                width: 6px !important;
                height: 6px !important;
                margin: 0 1px !important;
            }
        }
    }

    /* Hide pagination and show navigation arrows on mobile when there are many slides */
    @media (max-width: 768px) {

        /* Hide arrows by default on mobile */
        .modal-gallery .swiper-button-next,
        .modal-gallery .swiper-button-prev,
        .plan-carousel .plan-swiper .swiper-button-next,
        .plan-carousel .plan-swiper .swiper-button-prev,
        .projects-mobile-slider .swiper-button-next,
        .projects-mobile-slider .swiper-button-prev {
            display: none;
        }

        .swiper-container.has-many-slides .swiper-pagination,
        .modal-gallery.has-many-slides .swiper-pagination,
        .plan-carousel .plan-swiper.has-many-slides .swiper-pagination,
        .projects-mobile-slider.has-many-slides .swiper-pagination {
            display: none !important;
        }

        .swiper-container.has-many-slides .swiper-button-next,
        .swiper-container.has-many-slides .swiper-button-prev,
        .modal-gallery.has-many-slides .swiper-button-next,
        .modal-gallery.has-many-slides .swiper-button-prev,
        .plan-carousel .plan-swiper.has-many-slides .swiper-button-next,
        .plan-carousel .plan-swiper.has-many-slides .swiper-button-prev,
        .projects-mobile-slider.has-many-slides .swiper-button-next,
        .projects-mobile-slider.has-many-slides .swiper-button-prev {
            display: flex !important;
        }

        /* Style for navigation arrows on mobile when pagination is hidden */
        .swiper-container.has-many-slides .swiper-button-next,
        .swiper-container.has-many-slides .swiper-button-prev,
        .modal-gallery.has-many-slides .swiper-button-next,
        .modal-gallery.has-many-slides .swiper-button-prev,
        .plan-carousel .plan-swiper.has-many-slides .swiper-button-next,
        .plan-carousel .plan-swiper.has-many-slides .swiper-button-prev,
        .projects-mobile-slider.has-many-slides .swiper-button-next,
        .projects-mobile-slider.has-many-slides .swiper-button-prev {
            width: 40px;
            height: 40px;
            background: rgba(255, 255, 255, 0.95);
            border-radius: 50%;
            color: var(--color-brand-ink);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            transition: all 0.3s ease;
            z-index: 10;
        }

        .swiper-container.has-many-slides .swiper-button-next:after,
        .swiper-container.has-many-slides .swiper-button-prev:after,
        .modal-gallery.has-many-slides .swiper-button-next:after,
        .modal-gallery.has-many-slides .swiper-button-prev:after,
        .plan-carousel .plan-swiper.has-many-slides .swiper-button-next:after,
        .plan-carousel .plan-swiper.has-many-slides .swiper-button-prev:after,
        .projects-mobile-slider.has-many-slides .swiper-button-next:after,
        .projects-mobile-slider.has-many-slides .swiper-button-prev:after {
            font-size: 16px;
            font-weight: bold;
        }

        .swiper-container.has-many-slides .swiper-button-next:hover,
        .swiper-container.has-many-slides .swiper-button-prev:hover,
        .modal-gallery.has-many-slides .swiper-button-next:hover,
        .modal-gallery.has-many-slides .swiper-button-prev:hover,
        .plan-carousel .plan-swiper.has-many-slides .swiper-button-next:hover,
        .plan-carousel .plan-swiper.has-many-slides .swiper-button-prev:hover,
        .projects-mobile-slider.has-many-slides .swiper-button-next:hover,
        .projects-mobile-slider.has-many-slides .swiper-button-prev:hover {
            background: white;
            transform: scale(1.05);
        }

        /* Position arrows for different swiper types */
        .modal-gallery.has-many-slides .swiper-button-next,
        .projects-mobile-slider.has-many-slides .swiper-button-next {
            right: 10px;
        }

        .modal-gallery.has-many-slides .swiper-button-prev,
        .projects-mobile-slider.has-many-slides .swiper-button-prev {
            left: 10px;
        }

        .plan-carousel .plan-swiper.has-many-slides .swiper-button-next {
            right: 10px;
        }

        .plan-carousel .plan-swiper.has-many-slides .swiper-button-prev {
            left: 10px;
        }

        /* Generic override so any swiper with has-many-slides hides bullets regardless of base layout */
        .has-many-slides .swiper-pagination {
            display: none !important;
        }

        .has-many-slides .swiper-button-next,
        .has-many-slides .swiper-button-prev {
            display: flex !important;
        }
    }