img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* =========================================================
   Section wrapper
   ========================================================= */
.tabbed-gallery {
    max-width: 1320px;
    margin: 100px auto;
}

/* ---- Header ---- */
.tabbed-gallery__header {
    margin-bottom: 56px;
}

.tabbed-gallery__title {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 32px;
    line-height: 101%;
    color: #232426;
    margin: 0 0 14px;
    letter-spacing: -0.01em;
}

.tabbed-gallery__desc {
    font-family: Archivo;
    font-size: 18px;
    color: #75787B;
    margin: 0;
    line-height: 23px;
    font-weight: 300;
}

/* =========================================================
   Body: tabs (left) + content (right)
   ========================================================= */
.tabbed-gallery__body {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 40px;
    align-items: center;
    min-height: 600px;
}

/* ---- Tabs (desktop = vertical) ---- */
.tabbed-gallery__tabs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 204px;
}

.tabbed-gallery__tab {
    padding: 16px;
    font-family: Archivo;
    font-size: 18px;
    font-weight: 400;
    color: #8C8E90;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    text-align: left;
    transition: color 200ms ease, background 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
    white-space: nowrap;
    letter-spacing: 0.01em;
    width: 100%;
}

.tabbed-gallery__tab:hover {
    color: #1a1a1a;
}

.tabbed-gallery__tab.is-active {
    background: #ffffff;
    color: #232426;
    font-weight: 600;
    border-color: #E6E7EB;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
    font-family: Archivo;
}

/* ---- Content area ---- */
.tabbed-gallery__content {
    position: relative;
    min-height: 480px;
}

.tabbed-gallery__panel {
    opacity: 0;
    animation: tabbed-gallery-fade-in 500ms cubic-bezier(.4, 0, .2, 1) forwards;
}

@keyframes tabbed-gallery-fade-in {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---- Quote ---- */
.tabbed-gallery__quote {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 23px;
    line-height: 34px;
    color: #323232;
    font-weight: 400;
    position: relative;
    padding: 0 40px;
    letter-spacing: -1%;
    margin: 0;
}


.tabbed-gallery__quote:not(.tabbed-gallery__quote--has-icon)::before {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 56px;
    color: #b5b5b5;
    font-weight: 500;
    line-height: 1;
    position: absolute;
    content: '\201C\201C';
    top: -8px;
    left: 0;
    letter-spacing: -6px;
}


.tabbed-gallery__quote-icon {
    width: 53px !important;
    height: 43px !important;
    pointer-events: none;
    user-select: none;
}

.tabbed-gallery__quote-icon--open {
    position: absolute;
    display: block;
    top: 4px;
    left: -13px;
    transform: rotate(180deg);
}

.tabbed-gallery__quote-icon--close {
    transform: rotate(0);
}

/* Default typographic CLOSING glyph - rendered as a real span (not a CSS
   ::after) precisely because it's positioned by JS against the actual
   end of the text (see .tabbed-gallery__quote-mark--close below) */
.tabbed-gallery__quote-glyph--close {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 56px;
    color: #b5b5b5;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -6px;
    pointer-events: none;
    user-select: none;
}

/* Closing mark (icon image or typographic glyph) - its exact position is
   computed in JS from where the quote text visually ends (see
   watchQuoteCloseIcon in tabbed-gallery.js) - starts hidden to avoid a
   flash at the default top-left before that measurement runs. This is
   the ORIGINAL mobile mechanism, untouched - hidden on desktop below
   (see the min-width block) in favor of the separate desktop-only copy
   right after it, which is pure CSS and needs none of this. */
.tabbed-gallery__quote-mark--close {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 150ms ease;
}

/* Desktop-only copy (see closeMarkDesktopHtml in tabbed-gallery.js) -
   nested inside the quote text, so it flows inline right after the last
   word and wraps with the text on its own. Hidden on mobile below (see
   the 768px breakpoint), where the original mark above takes over. */
.tabbed-gallery__quote-mark--close-desktop {
    display: inline-block;
    vertical-align: text-top;
    margin-left: 2px;
}

@media (min-width: 769px) {
    .tabbed-gallery__quote-mark--close {
        display: none;
    }
}

.tabbed-gallery__quote-text {
    position: relative;
    z-index: 1;
}

/* =========================================================
   Layout A  (Tabs 1, 3, 5)
   quote | img1 (tall) | img2 (extra tall spans 2 rows)
   img3 (wide) | img4 (product) | img2
   ========================================================= */
.tabbed-gallery__gallery--a {
    display: grid;
    grid-template-columns: 1.05fr 1.05fr 1.2fr;
    grid-template-rows: 285px 260px;
    gap: 15px;
    grid-template-areas:
        "quote img1 img2"
        "img3  img4 img2";
    padding-top: 20px;
    row-gap: 0;
}

.tabbed-gallery__gallery--a .tabbed-gallery__quote {
    grid-area: quote;
    align-self: center;
    padding: 20px 7px 20px 44px;
    width: 80%;
    left: 15%;
}

.tabbed-gallery__gallery--a .tabbed-gallery__img--1 {
    grid-area: img1;
    width: 241px;
    height: 265px;
}

.tabbed-gallery__gallery--a .tabbed-gallery__img--2 {
    grid-area: img2;
    width: 350px;
    height: 545px;
}

/* Same transparent-padding-in-source-asset issue as gallery--b img--2 - zoom
   past it so the photo bleeds edge-to-edge; hover zoom bumped by the same
   relative amount so it still matches the other cells' hover feel. */
.tabbed-gallery__gallery--a .tabbed-gallery__img--2 img {
    transform: scale(1.08);
}

.tabbed-gallery__gallery--a .tabbed-gallery__img--2:hover img {
    transform: scale(1.112);
}

.tabbed-gallery__gallery--a .tabbed-gallery__img--3 {
    grid-area: img3;
    width: 442px;
    height: 265px;
    position: relative;
    top: -6px;
}

.tabbed-gallery__gallery--a .tabbed-gallery__img--4 {
    grid-area: img4;
    width: 249px;
    height: 270px;
    position: relative;
    left: 15px;
}

/* =========================================================
   Layout B  (Tabs 2, 4, 6)
   quote | img1 (wide, spans cols 2-4)
   img2 | img3 (wide) | img4 (product tall)
   ========================================================= */
.tabbed-gallery__gallery--b {
    display: grid;
    grid-template-columns: 1fr 1.15fr 1.15fr 0.75fr;
    grid-template-rows: 260px 300px;
    gap: 20px;
    grid-template-areas:
        "quote img1 img1 img1"
        "img2  img3 img3 img4";
    padding-top: 20px;
}

.tabbed-gallery__gallery--b .tabbed-gallery__quote {
    grid-area: quote;
    align-self: center;
    padding: 20px 20px 20px 44px;
    font-size: 24px;
    left: 6%;
}

.tabbed-gallery__gallery--b .tabbed-gallery__img--1 {
    grid-area: img1;
    max-width: 622px;
    height: 265px;
    justify-self: end;
}

.tabbed-gallery__gallery--b .tabbed-gallery__img--2 {
    grid-area: img2;
    width: 350px;
    height: 314px;
    position: relative;
    top: -46px;
}

/* This asset has transparent padding baked into the source PNG - object-fit:
   cover already fills the box, but part of what it shows is that transparent
   margin. Zoom past it so the photo bleeds edge-to-edge; hover zoom is bumped
   by the same relative amount so it still matches the other cells' hover feel. */
.tabbed-gallery__gallery--b .tabbed-gallery__img--2 img {
    transform: scale(1.08);
}

.tabbed-gallery__gallery--b .tabbed-gallery__img--2:hover img {
    transform: scale(1.112);
}

.tabbed-gallery__gallery--b .tabbed-gallery__img--3 {
    grid-area: img3;
    width: 387px;
    height: 263px;
}

.tabbed-gallery__gallery--b .tabbed-gallery__img--4 {
    grid-area: img4;
    width: 247px;
}

/* ---- Image cells ---- */
.tabbed-gallery__img {
    width: 100%;
    height: 100%;
    border-radius: 14px;
    overflow: hidden;
    /* background: #641717; */
    position: relative;
}

.tabbed-gallery__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 400ms cubic-bezier(.4, 0, .2, 1);
}

.tabbed-gallery__img:hover img {
    transform: scale(1.03);
}

/* Product cutout image: contain, no crop, transparent-friendly */
.tabbed-gallery__img--product {
    background: #fafafa;
    border-radius: 14px;
}

.tabbed-gallery__img--product img {
    object-fit: contain;
}

.tabbed-gallery__img--product:hover img {
    transform: none;
}

/* =========================================================
   Responsive: tablet
   ========================================================= */
@media (max-width: 1024px) {
    .tabbed-gallery {
        padding: 20px;
        margin: 0;
    }

    .tabbed-gallery__title {
        font-size: 36px;
    }

    .tabbed-gallery__body {
        grid-template-columns: 200px 1fr;
        gap: 28px;
    }

    .tabbed-gallery__gallery--a,
    .tabbed-gallery__gallery--b {
        grid-template-rows: 240px 220px;
        gap: 14px;
    }

    .tabbed-gallery__quote {
        font-size: 22px;
        padding: 0 28px;
    }

    .tabbed-gallery__gallery--b .tabbed-gallery__quote {
        font-size: 20px;
    }
}

/* =========================================================
   Responsive: mobile
   Single layout for all tabs
   ========================================================= */
@media (max-width: 768px) {
    .tabbed-gallery {
        padding: 0;
        margin: 40px 0;
    }

    .tabbed-gallery__header {
        margin-bottom: 24px;
        padding: 0 16px;
    }

    .tabbed-gallery__title {
        font-size: 22px;
        line-height: 111%;
        margin-bottom: 8px;
        text-align: center;
    }

    .tabbed-gallery__desc {
        font-size: 14px;
        line-height: 18px;
        text-align: center;
    }

    /* Stack: tabs on top (scrollable), then content */
    .tabbed-gallery__body {
        grid-template-columns: 1fr;
        gap: 24px;
        min-height: unset;
    }

    /* Horizontal scrollable tabs */
    .tabbed-gallery__tabs {
        flex-direction: row;
        gap: 10px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
        padding-inline: 16px;
        margin: 0 -2px;
        scrollbar-width: none;
        max-width: unset;
        margin-bottom: 5px;
    }

    /* top used to be hardcoded here (55px !important) instead of using
       positionQuoteCloseIcon's own computed value - that only matched
       quotes that happened to wrap to the same number of lines it was
       tuned against; anything shorter/longer landed the mark far below
       (or above) the actual last line. Letting JS's real measurement
       through instead so it's correct for any quote. */
    .tabbed-gallery__quote-mark--close-desktop {
        display: none;
    }
    .tabbed-gallery__tabs::-webkit-scrollbar {
        display: none;
    }

    .tabbed-gallery__gallery--b .tabbed-gallery__img--4 {
        grid-area: img2;
    }

    .tabbed-gallery__gallery--b .tabbed-gallery__img--2 {
        grid-area: img4;
    }

    .tabbed-gallery__gallery--b .tabbed-gallery__img--1 {
        grid-area: img3;
    }

    .tabbed-gallery__gallery--b .tabbed-gallery__img--3 {
        grid-area: img1;
    }

    .tabbed-gallery__tab {
        flex-shrink: 0;
        padding: 7px 18px;
        font-size: 16px;
        color: #74798A;
        border: 1px solid #E6E6E8;
        background: transparent;
        line-height: 126%;
        font-weight: 500;
        border-radius: 44px;
    }

    .tabbed-gallery__tab.is-active {
        background: #EEEEEF;
        border: 1px solid #E6E6E8;
        font-weight: 500;
        color: #000000;
    }

    /* Content min height reset */
    .tabbed-gallery__content {
        min-height: 0;
        padding: 0 16px;
    }

    /* Reset desktop-only sizing/offsets so they don't leak into mobile -
       the fixed widths/heights and relative top/left nudges added for the
       desktop layout are unguarded and otherwise out-specificity the
       aspect-ratio rules below */
    .tabbed-gallery__gallery--a .tabbed-gallery__img--1,
    .tabbed-gallery__gallery--a .tabbed-gallery__img--2,
    .tabbed-gallery__gallery--a .tabbed-gallery__img--3,
    .tabbed-gallery__gallery--a .tabbed-gallery__img--4,
    .tabbed-gallery__gallery--b .tabbed-gallery__img--1,
    .tabbed-gallery__gallery--b .tabbed-gallery__img--2,
    .tabbed-gallery__gallery--b .tabbed-gallery__img--3,
    .tabbed-gallery__gallery--b .tabbed-gallery__img--4 {
        width: 100%;
        height: 100%;
        max-width: none;
        justify-self: stretch;
        position: static;
        top: auto;
        left: auto;
        border-radius: 3px;
    }

    /* Mobile gallery: unified layout - single grid template
       regardless of Layout A or B */
    .tabbed-gallery__gallery--a,
    .tabbed-gallery__gallery--b {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto;
        grid-template-areas:
            "quote quote"
            "img1  img2"
            "img3  img4";
        gap: 6px;
        padding-top: 0;
    }

    /* Quote centered on mobile */
    .tabbed-gallery__gallery--a .tabbed-gallery__quote,
    .tabbed-gallery__gallery--b .tabbed-gallery__quote {
        grid-area: quote;
        text-align: center;
        font-size: 18px;
        line-height: 25px;
        padding: 8px 28px 20px;
        margin: 0 auto;
        width: auto;
        max-width: 320px;
        margin-bottom: 0;
        font-weight: 400;
        left: unset;
    }

    .tabbed-gallery__quote:not(.tabbed-gallery__quote--has-icon)::before {
        font-size: 34px;
        top: -6px;
        left: 0;
    }

    .tabbed-gallery__quote-glyph--close {
        font-size: 34px;
    }

    .tabbed-gallery__quote-icon {
        width: 36px !important;
        height: 30px !important;
    }

    .tabbed-gallery__quote-icon--open {
        top: -6px;
        left: -6px;
    }

    /* Image aspect ratios for mobile: square thumbnails on the top row,
       taller portrait shots on the bottom row */
    .tabbed-gallery__img--1,
    .tabbed-gallery__img--2 {
        aspect-ratio: 1 / 1;
    }

    .tabbed-gallery__img--3,
    .tabbed-gallery__img--4 {
        aspect-ratio: 3 / 4;
    }

    .tabbed-gallery__img {
        border-radius: 10px;
    }

    .tabbed-gallery__gallery--a .tabbed-gallery__img--1 {
        position: relative;
        height: 150px;
        top: 40px
    }

    .tabbed-gallery__gallery--a .tabbed-gallery__img--2 {
        position: relative;
        height: 220px;
    }

    .tabbed-gallery__gallery--a .tabbed-gallery__img--3 {
        position: relative;
        height: 180px;
        top: -30px;
    }

    .tabbed-gallery__gallery--a .tabbed-gallery__img--4 {
        position: relative;
        height: 196px;
    }

    .tabbed-gallery__gallery--b .tabbed-gallery__img--1 {
        height: 170px;
        position: relative;
        bottom: -30px;
    }

    .tabbed-gallery__gallery--b .tabbed-gallery__img--2 {
        height: 220px;
        position: relative;
    }

    .tabbed-gallery__gallery--b .tabbed-gallery__img--3 {
        height: 160px;
        position: relative;
        top: 65px;
    }

    .tabbed-gallery__gallery--b .tabbed-gallery__img--4 {
        height: 195px;
        position: relative;
    }
}