/* ============================================================
   STONE CEO — GLOBAL HERO
============================================================ */

.stone-hero,
.stone-hero * {
    box-sizing: border-box;
}

.stone-hero {
    position: relative;

    width: 100vw;
    height: 100vh;
    height: 100svh;
    min-height: 680px;

    margin-left: calc(50% - 50vw);

    overflow: hidden;

    background: #f4f3f0;
    color: #191914;

    isolation: isolate;
}


/* ============================================================
   MAIN STATIC TITLE
============================================================ */

.stone-hero-title {
    position: absolute;

    top: 15vh;
    left: 5vw;

    width: 90vw;

    margin: 0;

    z-index: 2;

    font-family:
        var(--e-global-typography-primary-font-family),
        Georgia,
        serif;

    font-size: clamp(90px, 10vw, 180px) !important;
    font-weight: 400;

    line-height: .88;
    letter-spacing: -.055em;

    white-space: nowrap;

    pointer-events: none;
}


/* ============================================================
   MAIN FLOATING STONE
============================================================ */

.stone-hero-visual {
    position: absolute;

    top: 22vh;
    left: 50%;

    width: min(72vw, 1280px);

    transform: translateX(-50%);

    z-index: 3;

    transform-style: preserve-3d;
    will-change: transform;
}

.stone-hero-image {
    display: block;

    width: 100%;
    height: auto;

    max-width: none;

    object-fit: contain;

    user-select: none;
    pointer-events: none;

    transform-origin: center;

    will-change:
        transform,
        opacity;
}


/* ============================================================
   PRODUCT INFORMATION
============================================================ */

.stone-hero-info {
    position: absolute;

    left: 5vw;
    bottom: 10vh;

    width: min(340px, 28vw);

    z-index: 6;
}


/* COUNTER */

.stone-hero-count {
    display: flex;

    align-items: center;

    gap: 5px;

    margin-bottom: 14px;

    font-size: 11px;
    line-height: 1;

    letter-spacing: .12em;

    white-space: nowrap;
}


/* ============================================================
   STONE NAME — SPLIT TEXT AREA
============================================================ */

.stone-hero-name-mask {
    position: relative;

    width: 100%;

    margin: 0 0 14px;

    overflow: hidden;
}

.stone-hero-name {
    margin: 0;

    font-family:
        var(--e-global-typography-primary-font-family),
        Georgia,
        serif;

    font-size: clamp(27px, 2.6vw, 47px);
    font-weight: 400;
    
    line-height: 1.1;
    letter-spacing: -.025em;
}


/*
 * custom.js will later generate:
 * <span class="word">
 * <span class="char">T</span>
 * ...
 */

/* ============================================================
   STONE NAME — SPLIT TEXT
============================================================ */

.stone-hero-name-mask {
    position: relative;

    width: 100%;

    overflow: hidden;

    margin: 0 0 14px;
}

.stone-hero-name {
    margin: 0;

    font-family:
        var(--e-global-typography-primary-font-family),
        Georgia,
        serif;

    font-size: clamp(27px, 2.6vw, 47px);
    font-weight: 400;

    line-height: 1.12;
    letter-spacing: -.025em;
}

.stone-hero-name .word {
    display: inline-block;

    white-space: nowrap;

    vertical-align: top;
}

.stone-hero-name .char-clip {
    display: inline-block;

    overflow: hidden;

    vertical-align: top;
}

.stone-hero-name .char {
    display: inline-block;

    vertical-align: top;

    transform: translateZ(0);

    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;

    will-change:
        transform,
        opacity;
}


/* ============================================================
   DESCRIPTION
============================================================ */

.stone-hero-description {
    max-width: 320px;

    margin: 0 0 19px;

    font-size: 13px;

    line-height: 1.5;

    will-change: opacity;
}


/* ============================================================
   EXPLORE LINK
============================================================ */

.stone-hero-link {
    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 11px;

    color: inherit;

    text-decoration: none;

    font-size: 10px;
    line-height: 1;

    letter-spacing: .16em;

    text-transform: uppercase;
}

.stone-hero-link-text {
    position: relative;
}

.stone-hero-link-text::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: -6px;

    width: 100%;
    height: 1px;

    background: currentColor;

    transform: scaleX(0);
    transform-origin: right;

    transition:
        transform .45s cubic-bezier(.22, 1, .36, 1);
}

.stone-hero-link:hover
.stone-hero-link-text::after {
    transform: scaleX(1);
    transform-origin: left;
}

.stone-hero-link-arrow {
    display: inline-block;

    transition:
        transform .45s cubic-bezier(.22, 1, .36, 1);
}

.stone-hero-link:hover
.stone-hero-link-arrow {
    transform: translateX(7px);
}


/* ============================================================
   STATIC BRAND SIGNATURE
============================================================ */

.stone-hero-brand {
    position: absolute;

    right: 6vw;
    bottom: 22vh;

    display: flex;

    align-items: baseline;

    gap: 10px;

    z-index: 6;

    white-space: nowrap;
}

.stone-hero-brand-by {
    font-family:
        var(--e-global-typography-primary-font-family),
        Georgia,
        serif;

    font-size: clamp(31px, 3vw, 56px);

    font-style: italic;
    font-weight: 400;

    line-height: 1;
}

.stone-hero-brand-name {
    font-family:
        var(--e-global-typography-primary-font-family),
        Georgia,
        serif;

    font-size: clamp(30px, 3vw, 55px);
    font-weight: 400;

    line-height: 1;
}


/* ============================================================
   HERO ARROWS
============================================================ */

.stone-hero-arrow {
    position: absolute;
    top: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    padding: 0 !important;
    margin: 0;

    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;

    background: transparent !important;

    color: #191914 !important;

    opacity: 1 !important;
    visibility: visible !important;

    cursor: pointer;

    transform: translateY(-50%);
    z-index: 8;

    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
}

.stone-hero-arrow-left {
    left: 2.3vw;
}

.stone-hero-arrow-right {
    right: 2.3vw;
}

.stone-hero-arrow svg {
    display: block;

    width: 30px;
    height: 30px;

    fill: none !important;
    stroke: #191914 !important;
    stroke-width: 1;
    stroke-linecap: round;
    stroke-linejoin: round;

    opacity: 1 !important;

    transition:
        transform .5s cubic-bezier(.22, 1, .36, 1);
}


/* HOVER */

@media (hover: hover) and (pointer: fine) {

    .stone-hero-arrow-left:hover svg {
        transform: translateX(-8px);
    }

    .stone-hero-arrow-right:hover svg {
        transform: translateX(8px);
    }

}


/* IMPORTANT — prevent theme focus styles */

.stone-hero-arrow:hover,
.stone-hero-arrow:focus,
.stone-hero-arrow:focus-visible,
.stone-hero-arrow:active {
    color: #191914 !important;

    background: transparent !important;

    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;

    opacity: 1 !important;
}

.stone-hero-arrow:hover svg,
.stone-hero-arrow:focus svg,
.stone-hero-arrow:focus-visible svg,
.stone-hero-arrow:active svg {
    stroke: #191914 !important;
    opacity: 1 !important;
}


/* ============================================================
   BOTTOM GROUND
============================================================ */

.stone-hero-ground {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: clamp(95px, 11vh, 145px);

    /*overflow: hidden;*/

    z-index: 4;

    pointer-events: none;

    will-change: transform, opacity;
}


.stone-hero-ground-image {
    position: absolute;

    left: 0;
    bottom: 0;

    display: block;

    width: 100%;
    height: auto;

    max-width: none;

    /*
     * IMPORTANT:
     * Do NOT use object-fit: cover here.
     * Do NOT use object-position here.
     *
     * The transparent part of the source image remains
     * outside the visible wrapper and the rocky ridge
     * naturally lands at the top of the ground section.
     */
    object-fit: initial;

    opacity: 1;

    user-select: none;
    pointer-events: none;
}

/* ============================================================
   SCROLL INDICATOR
============================================================ */

.stone-hero-scroll {
    position: absolute;

    left: 50%;
    bottom: 0;

    display: flex;

    flex-direction: column;
    align-items: center;

    gap: 10px;

    transform: translateX(-50%);

    z-index: 7;

    pointer-events: none;
}

.stone-hero-scroll-text {
    font-size: 9px;

    line-height: 1;

    letter-spacing: .2em;
}


/* TRACK */

.stone-hero-scroll-line {
    position: relative;

    display: block;

    width: 1px;
    height: 72px;

    overflow: hidden;

    background:
        rgba(25, 25, 20, .18);
}


/* MOVING LINE */

.stone-hero-scroll-line::after {
    content: "";

    position: absolute;

    inset: 0;

    background: #191914;

    transform: translateY(-100%);

    animation:
        stoneHeroScrollLine
        1.8s
        cubic-bezier(.76, 0, .24, 1)
        infinite;
}


@keyframes stoneHeroScrollLine {

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

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

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

}


/* ============================================================
   LAPTOP
============================================================ */

@media (max-width: 1400px) {

    .stone-hero-title {
        font-size: 9vw;
    }

    .stone-hero-visual {
        top: 24vh;

        width: 72vw;
    }

    .stone-hero-info {
        bottom: 11vh;
    }

    .stone-hero-brand {
        right: 5vw;
        bottom: 22vh;
    }

}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1024px) {

    .stone-hero {
        min-height: 720px;
    }


    .stone-hero-title {
        top: 12vh;

        font-size: 10vw;
    }


    .stone-hero-visual {
        top: 27vh;

        width: 84vw;
    }


    .stone-hero-info {
        left: 5vw;
        bottom: 11vh;

        width: 310px;
    }


    .stone-hero-name {
        font-size: 32px;
    }


    .stone-hero-brand {
        right: 5vw;
        bottom: 21vh;
    }


    .stone-hero-brand-by {
        font-size: 34px;
    }

    .stone-hero-brand-name {
        font-size: 32px;
    }


    .stone-hero-ground {
        height: 100px;
    }


    .stone-hero-ground-image {
        max-width: none !important;
        width: 125%;
        left: -12.5%;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767px) {

    .stone-hero {
        height: 100svh;

        min-height: 680px;
    }


    /* TITLE */

    .stone-hero-title {
        top: 11vh;
        left: 5vw;

        width: 90vw;

        font-size: clamp(55px, 16vw, 90px);

        line-height: .88;

        white-space: normal;
    }


    /* STONE */

    .stone-hero-visual {
        top: 29vh;

        width: 108vw;
    }


    /* INFO */

    .stone-hero-info {
        left: 6vw;
        bottom: 10vh;

        width: 56vw;
    }


    .stone-hero-count {
        margin-bottom: 9px;

        font-size: 9px;
    }


    .stone-hero-name {
        font-size: clamp(25px, 7vw, 31px);
    }


    .stone-hero-name-mask {
        margin-bottom: 9px;
    }


    .stone-hero-description {
        display: none;
    }


    .stone-hero-link {
        font-size: 8px;

        letter-spacing: .13em;
    }


    /* BRAND */

    .stone-hero-brand {
        right: 5vw;
        bottom: 19vh;

        gap: 6px;
    }


    .stone-hero-brand-by {
        font-size: 23px;
    }


    .stone-hero-brand-name {
        font-size: 21px;
    }


    /* ARROWS */

    .stone-hero-arrow {
        top: 50%;

        width: 38px;
        height: 38px;
    }


    .stone-hero-arrow svg {
        width: 24px;
        height: 24px;
    }


    .stone-hero-arrow-left {
        left: 1vw;
    }


    .stone-hero-arrow-right {
        right: 1vw;
    }


    /* GROUND */

    .stone-hero-ground {
        height: 82px;
    }


    .stone-hero-ground-image {
        width: 170%;
        left: -35%;
    }


    /* SCROLL */

    .stone-hero-scroll-text {
        font-size: 7px;
    }


    .stone-hero-scroll-line {
        height: 50px;
    }

}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 480px) {

    .stone-hero-title {
        top: 12vh;

        font-size: 16vw;
    }


    .stone-hero-visual {
        top: 40%;
        width: 95vw;
    }


    .stone-hero-info {
        width: 58vw;
    }


    .stone-hero-brand {
        bottom: 18vh;
    }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .stone-hero-scroll-line::after {
        animation: none;
    }

}






/* ============================================================
   STONE CEO — COLLECTIONS
============================================================ */

.stone-collections,
.stone-collections * {
    box-sizing: border-box;
}

.stone-collections {
    position: relative;

    display: grid;
    grid-template-columns: 46% 54%;

    width: 100%;
    /*min-height: 100vh;*/

    /*padding: 7vw 5vw;*/

    background: #ffffff;
    color: #000000;

    overflow: hidden;
}


/* ============================================================
   LEFT VISUAL
============================================================ */

.stone-collections-visual {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
    min-height: 650px;

    perspective: 1200px;

    transform-style: preserve-3d;

    will-change: transform;
}

.stone-collections-image {
    display: block;

    width: min(92%, 760px);
    height: auto;

    max-width: none;
    max-height: 70vh;

    object-fit: contain;

    user-select: none;
    pointer-events: none;

    transform-origin: center;

    will-change:
        transform,
        opacity;
}


/* ============================================================
   RIGHT LIST
============================================================ */

.stone-collections-list {
    display: flex;
    flex-direction: column;
    justify-content: center;

    min-width: 0;

    padding-left: clamp(50px, 6vw, 115px);
}


/* ============================================================
   ROW
============================================================ */

.stone-collections .stone-collections-item {
    position: relative;

    display: flex !important;
    flex-direction: row !important;

    align-items: center !important;
    justify-content: space-between !important;

    width: 100% !important;

    min-height: clamp(92px, 8vw, 128px);

    padding: 0 !important;
    margin: 0 !important;

    text-align: left !important;

    border: 0 !important;
    border-radius: 0 !important;

    outline: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    color: #000000 !important;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;

    -webkit-tap-highlight-color: transparent;
}


/* DIVIDER */

.stone-collections-item::before {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    height: 1px;

    background: rgba(0, 0, 0, .13);

    pointer-events: none;
}

.stone-collections-item:first-child::after {
    content: "";

    position: absolute;

    left: 0;
    right: 0;
    top: 0;

    height: 1px;

    background: rgba(0, 0, 0, .13);

    pointer-events: none;
}


/* REMOVE ELEMENTOR / THEME BUTTON STATES */

.stone-collections .stone-collections-item:hover,
.stone-collections .stone-collections-item:focus,
.stone-collections .stone-collections-item:focus-visible,
.stone-collections .stone-collections-item:active {

    border: 0 !important;

    outline: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    color: #000000 !important;
}


/* ============================================================
   TITLE MASK
============================================================ */

.stone-collections-title-mask {
    position: relative;

    display: block;

    flex: 1 1 auto;

    min-width: 0;

    height: 1.08em;

    overflow: hidden;

    font-family:
        var(--e-global-typography-primary-font-family),
        Georgia,
        serif;

    font-size: clamp(50px, 4.4vw, 82px);
    font-weight: 400;

    line-height: 1;

    letter-spacing: -.045em;

    text-align: left;
}


/* BOTH COPIES */

.stone-collections-title {
    position: absolute;

    left: 0;
    top: 0;

    display: block;

    width: 100%;

    text-align: left;

    white-space: nowrap;

    will-change:
        transform,
        opacity;
}


/* LIGHT COPY */

/* ============================================================
   COLLECTION TITLE STATES
   GSAP controls movement — CSS controls only visibility/color
============================================================ */

.stone-collections-title-light {
    color: rgba(0, 0, 0, .20);

    opacity: 1;

    transform: none;
}

.stone-collections-title-dark {
    color: #000000;

    opacity: 0;

    transform: none;
}


/* ACTIVE ROW */

.stone-collections-item.is-active
.stone-collections-title-light {
    opacity: 0;
}

.stone-collections-item.is-active
.stone-collections-title-dark {
    opacity: 1;
}


/* ============================================================
   COUNT
============================================================ */

.stone-collections-count {
    flex: 0 0 auto;

    margin-left: 24px;

    min-width: 45px;

    text-align: right;

    font-size: 11px;
    font-weight: 400;

    line-height: 1;

    letter-spacing: .08em;

    color: rgba(0, 0, 0, .25);

    will-change:
        color,
        opacity;
}

.stone-collections-item.is-active
.stone-collections-count {
    color: #000000;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1024px) {

    .stone-collections {
        grid-template-columns: 44% 56%;

        min-height: auto;

        padding: 80px 4vw;
    }

    .stone-collections-visual {
        min-height: 550px;
    }

    .stone-collections-image {
        width: 100%;
    }

    .stone-collections-list {
        padding-left: 5vw;
    }

    .stone-collections-title-mask {
        font-size: clamp(40px, 5vw, 58px);
    }

    .stone-collections .stone-collections-item {
        min-height: 88px;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767px) {

    .stone-collections {
        display: flex;
        flex-direction: column;

        min-height: auto;

        padding:
            70px 5vw 85px;
    }

    .stone-collections-visual {
        min-height: 0;

        height: 24vh;

        margin-bottom: 45px;
    }

    .stone-collections-image {
        width: 100%;

        max-height: 43vh;
    }

    .stone-collections-list {
        padding-left: 0;
    }

    .stone-collections .stone-collections-item {
        min-height: 76px;
    }

    .stone-collections-title-mask {
        font-size: clamp(32px, 10vw, 46px);
    }

    .stone-collections-count {
        min-width: 30px;

        margin-left: 12px;

        font-size: 9px;
    }

}



/* ============================================================
   STONE CEO — PROJECTS SECTION
============================================================ */

.stone-projects,
.stone-projects * {
    box-sizing: border-box;
}

.stone-projects {
    position: relative;

    width: 100%;
    padding: 0;
    margin: 0;

    background: #f4f3f0;
    color: #000;
}


/* ============================================================
   TRACK
============================================================ */

.stone-projects-track {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;

    width: 100%;
    min-height: 78vh;

    overflow: hidden;
}


/* ============================================================
   PANEL
============================================================ */

.stone-project-panel {
    position: relative;

    /* Equal panels by default */
    flex: 1 1 0;
    width: auto !important;
    min-width: 0;
    transition: none !important;
    
    min-width: 0;

    min-height: 78vh;

    overflow: hidden;
    cursor: pointer;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;

    isolation: isolate;
}


/* Dark overlay */
.stone-project-panel::before {
    content: "";

    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, 0.18);

    z-index: 1;
    pointer-events: none;

    transition: opacity .45s ease;
}


/* Active panel overlay becomes lighter */
.stone-project-panel.is-active::before {
    background: rgba(0, 0, 0, 0.08);
}


/* ============================================================
   INFO
============================================================ */

.stone-project-info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    z-index: 2;

    padding: 28px 28px 32px;

    color: #fff;

    transform: translateY(18px);
    opacity: 0;

    transition:
        transform .45s ease,
        opacity .45s ease;
}


/* Active panel info visible */
.stone-project-panel.is-active .stone-project-info {
    transform: translateY(0);
    opacity: 1;
}


/* Optional title */
.stone-project-title {
    margin: 0 0 8px;

    font-family:
        var(--e-global-typography-primary-font-family),
        Georgia,
        serif;

    font-size: clamp(24px, 2vw, 34px);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -.02em;

    color: #fff;
}


/* Optional meta */
.stone-project-meta {
    margin: 0;

    font-size: 11px;
    line-height: 1.4;
    letter-spacing: .14em;
    text-transform: uppercase;

    color: rgba(255, 255, 255, .78);
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1024px) {

    .stone-projects-track {
        min-height: 64vh;
    }

    .stone-project-panel {
        min-height: 64vh;
    }

    .stone-project-info {
        padding: 22px 22px 26px;
    }

    .stone-project-title {
        font-size: 24px;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767px) {

    .stone-projects-track {
        flex-direction: column !important;
        min-height: auto;
    }

    .stone-project-panel {
        flex: 0 0 auto;
        width: 100% !important;
        min-height: 320px;
    }

    .stone-project-panel::before {
        background: rgba(0, 0, 0, 0.16);
    }

    .stone-project-info {
        opacity: 1;
        transform: none;
    }

}






/* =========================================
   COLLECTION CARD
========================================= */

.collection-card {
    cursor: pointer;
}

/* Image */
/*.collection-card-media {*/
/*    overflow: hidden;*/
/*}*/

.collection-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1);
    will-change: transform;
}

/* Title */
.collection-card-title .elementor-heading-title {
    position: relative;
    overflow: hidden;
}

.collection-title-track {
    display: block;
    position: relative;
    overflow: hidden;
}

.collection-title-line {
    display: block;
    width: 100%;
}

.collection-title-next {
    position: absolute;
    top: 0;
    left: 0;
}











/* ============================================================
   STONE CEO — PRODUCT FAN CAROUSEL
============================================================ */

.stone-product-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 80px 0 110px;
}


/* ============================================================
   STAGE
============================================================ */

.stone-product-carousel-stage {
    position: relative;
    width: 100%;
    height: 600px;
}


/* ============================================================
   PRODUCT CARD
============================================================ */

.stone-product-card {
    position: absolute;

    top: 50%;
    left: 50%;

    width: clamp(220px, 19vw, 330px);

    transform-origin: 50% 50%;

    will-change:
        transform,
        opacity;

    visibility: hidden;
}


/* ============================================================
   IMAGE
============================================================ */

.stone-product-image {
    position: relative;

    width: 100%;
    aspect-ratio: 0.72;

    overflow: hidden;

    border-radius: 30px;

    background: #ece8e2;
}


.stone-product-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.7s cubic-bezier(
        0.22,
        1,
        0.36,
        1
    );
}


/* subtle image hover */

.stone-product-card:hover
.stone-product-image img {
    transform: scale(1.035);
}


/* ============================================================
   PRODUCT TITLE
============================================================ */

.stone-product-title {
    margin: 18px 0 0;

    font-size: clamp(
        16px,
        1.25vw,
        21px
    );

    font-weight: 400;

    line-height: 1.15;

    text-align: center;

    color: #1c1c1c;
}


/* ============================================================
   CONTROLS
============================================================ */

.stone-product-carousel-controls {
    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 12px;

    margin-top: 35px;

    z-index: 20;
}


.stone-product-prev,
.stone-product-next {

    display: flex;

    align-items: center;
    justify-content: center;

    width: 52px;
    height: 52px;

    padding: 0;

    border: 1px solid rgba(20,20,20,.25);

    border-radius: 50%;

    background: transparent;

    color: #181818;

    font-size: 20px;

    cursor: pointer;

    transition:
        background-color .3s ease,
        color .3s ease,
        border-color .3s ease,
        transform .3s ease;
}


.stone-product-prev:hover,
.stone-product-next:hover {

    background: #181818;

    color: #fff;

    border-color: #181818;

    transform: scale(1.06);
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1024px) {

    .stone-product-carousel {
        padding:
            60px 0
            80px;
    }

    .stone-product-carousel-stage {
        height: 520px;
    }

    .stone-product-card {
        width: clamp(
            210px,
            28vw,
            280px
        );
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767px) {

    .stone-product-carousel {
        padding:
            45px 0
            65px;
    }

    .stone-product-carousel-stage {
        height: 440px;
    }

    .stone-product-card {
        width: min(
            68vw,
            270px
        );
    }

    .stone-product-image {
        border-radius: 22px;
    }

    .stone-product-title {
        margin-top: 14px;

        font-size: 16px;
    }

    .stone-product-carousel-controls {
        margin-top: 20px;
    }

    .stone-product-prev,
    .stone-product-next {
        width: 46px;
        height: 46px;
    }

}



/* ============================================================
   STONE CEO — SERVICES BACKGROUND HOVER
============================================================ */

.services-hover-section {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

/* Background layers added automatically by JS */
.services-hover-section > .stone-service-bg {
    position: absolute !important;
    inset: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.85s ease-in-out;
}

/* Existing Elementor content stays above background */
.services-hover-section > :not(.stone-service-bg) {
    position: relative;
    z-index: 2;
}

/* Service titles */
.services-hover-section .service-hover-title {
    cursor: pointer;
}

/* ==========================================
   STONE CEO — SERVICES OVERLAY
========================================== */

.services-hover-section::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 1;
    pointer-events: none;
}

/* Keep Elementor headings and content above overlay */
.services-hover-section > :not(.stone-service-bg) {
    position: relative;
    z-index: 2;
}







/* ============================================================
   STONE CEO — PRODUCT COVERFLOW
   Dynamic class-based version
============================================================ */

.stone-coverflow,
.stone-coverflow * {
    box-sizing: border-box;
}


/* ============================================================
   MAIN SECTION
============================================================ */

.stone-coverflow {
    position: relative;

    width: 100%;
    max-width: 100%;

    padding: 70px 0 60px;

    overflow: hidden;

    background: #ffffff;
    color: #000000;
}


/* ============================================================
   3D STAGE
============================================================ */

.stone-coverflow-stage {
    position: relative;

    width: 100%;
    height: clamp(420px, 42vw, 580px);

    overflow: hidden;

    perspective: 1800px;
    perspective-origin: 50% 50%;
}


/* ============================================================
   TRACK
============================================================ */

.stone-coverflow-track {
    position: relative;

    width: 100%;
    height: 100%;

    transform-style: preserve-3d;
}


/* ============================================================
   PRODUCT CARD — BASE
============================================================ */

.stone-coverflow-card {
    position: absolute;

    top: 50%;
    left: 50%;

    width: clamp(175px, 17vw, 290px);

    aspect-ratio: 0.72;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    cursor: pointer;

    transform:
        translate(-50%, -50%)
        scale(.4);

    transform-style: preserve-3d;
    transform-origin: center center;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    z-index: 0;

    will-change:
        transform,
        opacity;

    transition:
        transform .8s cubic-bezier(.22, 1, .36, 1),
        opacity .45s ease;

    appearance: none;
    -webkit-appearance: none;

    -webkit-tap-highlight-color: transparent;
}


/* Remove WordPress / Elementor button states */

.stone-coverflow-card:hover,
.stone-coverflow-card:focus,
.stone-coverflow-card:focus-visible,
.stone-coverflow-card:active {
    border: 0 !important;
    outline: 0 !important;

    background: transparent !important;

    box-shadow: none !important;
}


/* ============================================================
   CARD INNER
============================================================ */

.stone-coverflow-card-inner {
    position: relative;

    display: block;

    width: 100%;
    height: 100%;

    overflow: hidden;

    background: #ffffff;

    transform-style: preserve-3d;
    transform-origin: center center;

    will-change: transform;
}


/* ============================================================
   PRODUCT IMAGE
============================================================ */

.stone-coverflow-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    user-select: none;
    pointer-events: none;

    -webkit-user-drag: none;
}


/* ============================================================
   ACTIVE CARD — CENTER
============================================================ */

.stone-coverflow-card.is-active {
    transform:
        translate(-50%, -50%)
        translateX(0)
        translateZ(180px)
        rotateY(0deg)
        scale(1);

    opacity: 1;
    visibility: visible;

    pointer-events: auto;

    z-index: 10;
}


/* ============================================================
   PREVIOUS 01
============================================================ */

.stone-coverflow-card.is-prev-1 {
    transform:
        translate(-50%, -50%)
        translateX(-72%)
        translateZ(30px)
        rotateY(18deg)
        scale(.76);

    opacity: .92;
    visibility: visible;

    pointer-events: auto;

    z-index: 8;
}


/* ============================================================
   PREVIOUS 02
============================================================ */

.stone-coverflow-card.is-prev-2 {
    transform:
        translate(-50%, -50%)
        translateX(-138%)
        translateZ(-130px)
        rotateY(28deg)
        scale(.56);

    opacity: .62;
    visibility: visible;

    pointer-events: auto;

    z-index: 5;
}


/* ============================================================
   NEXT 01
============================================================ */

.stone-coverflow-card.is-next-1 {
    transform:
        translate(-50%, -50%)
        translateX(72%)
        translateZ(30px)
        rotateY(-18deg)
        scale(.76);

    opacity: .92;
    visibility: visible;

    pointer-events: auto;

    z-index: 8;
}


/* ============================================================
   NEXT 02
============================================================ */

.stone-coverflow-card.is-next-2 {
    transform:
        translate(-50%, -50%)
        translateX(138%)
        translateZ(-130px)
        rotateY(-28deg)
        scale(.56);

    opacity: .62;
    visibility: visible;

    pointer-events: auto;

    z-index: 5;
}


/* ============================================================
   NON-VISIBLE PRODUCTS
============================================================ */

.stone-coverflow-card.is-hidden {
    transform:
        translate(-50%, -50%)
        translateZ(-250px)
        scale(.35);

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    z-index: 0;
}


/* ============================================================
   SUBTLE ACTIVE IMAGE PRESENCE
============================================================ */

.stone-coverflow-card.is-active
.stone-coverflow-card-inner {
    transform: scale(1);
}


/* ============================================================
   ACTIVE PRODUCT INFORMATION
============================================================ */

.stone-coverflow-content {
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;

    gap: 16px;

    width: 100%;

    padding:
        2px 20px 0;

    text-align: center;

    z-index: 20;
}


/* ============================================================
   ACTIVE PRODUCT TITLE
============================================================ */

.stone-coverflow-title {
    margin: 0 !important;
    padding: 0;

    font-family:
        var(--e-global-typography-primary-font-family),
        Georgia,
        serif;

    font-size: clamp(26px, 2.15vw, 40px);
    font-weight: 400;

    line-height: 1;

    letter-spacing: -.035em;

    color: #000000;
}


/* ============================================================
   EXPLORE BUTTON
============================================================ */

.stone-coverflow-button {
    position: relative;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 14px;

    min-height: 44px;

    padding:
        14px 24px;

    border: 1px solid #000000;

    background: transparent;

    color: #000000;

    text-decoration: none !important;

    font-size: 10px;
    font-weight: 400;

    line-height: 1;

    letter-spacing: .15em;

    text-transform: uppercase;

    transition:
        background-color .4s cubic-bezier(.22, 1, .36, 1),
        color .4s cubic-bezier(.22, 1, .36, 1),
        gap .4s cubic-bezier(.22, 1, .36, 1);
}


/* BUTTON HOVER */

@media (hover: hover) and (pointer: fine) {

    .stone-coverflow-button:hover {
        gap: 21px;

        background: #000000;

        color: #ffffff;
    }

}


/* ============================================================
   BUTTON ARROW
============================================================ */

.stone-coverflow-button-arrow {
    display: inline-block;

    transition:
        transform .4s cubic-bezier(.22, 1, .36, 1);
}


@media (hover: hover) and (pointer: fine) {

    .stone-coverflow-button:hover
    .stone-coverflow-button-arrow {
        transform: translateX(3px);
    }

}


/* ============================================================
   LAPTOP
============================================================ */

@media (max-width: 1400px) {

    .stone-coverflow-stage {
        height: clamp(400px, 43vw, 540px);
    }


    .stone-coverflow-card {
        width: clamp(165px, 18vw, 270px);
    }

}


/* ============================================================
   TABLET
============================================================ */

@media (max-width: 1024px) {

    .stone-coverflow {
        padding:
            60px 0 55px;
    }


    .stone-coverflow-stage {
        height: 500px;
    }


    .stone-coverflow-card {
        width: clamp(180px, 28vw, 270px);
    }


    .stone-coverflow-card.is-prev-1 {
        transform:
            translate(-50%, -50%)
            translateX(-65%)
            rotateY(14deg)
            scale(.75);
    }


    .stone-coverflow-card.is-next-1 {
        transform:
            translate(-50%, -50%)
            translateX(65%)
            rotateY(-14deg)
            scale(.75);
    }


    .stone-coverflow-card.is-prev-2 {
        transform:
            translate(-50%, -50%)
            translateX(-118%)
            rotateY(22deg)
            scale(.52);

        opacity: .5;
    }


    .stone-coverflow-card.is-next-2 {
        transform:
            translate(-50%, -50%)
            translateX(118%)
            rotateY(-22deg)
            scale(.52);

        opacity: .5;
    }

}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 767px) {

    .stone-coverflow {
        padding:
            50px 0 45px;
    }


    .stone-coverflow-stage {
        height: 410px;

        perspective: 1200px;
    }


    .stone-coverflow-card {
        width: min(61vw, 255px);
    }


    /* ACTIVE */

    .stone-coverflow-card.is-active {
        transform:
            translate(-50%, -50%)
            scale(1);

        opacity: 1;

        z-index: 10;
    }


    /* LEFT */

    .stone-coverflow-card.is-prev-1 {
        transform:
            translate(-50%, -50%)
            translateX(-62%)
            rotateY(10deg)
            scale(.72);

        opacity: .65;

        z-index: 6;
    }


    /* RIGHT */

    .stone-coverflow-card.is-next-1 {
        transform:
            translate(-50%, -50%)
            translateX(62%)
            rotateY(-10deg)
            scale(.72);

        opacity: .65;

        z-index: 6;
    }


    /* Hide ±2 on mobile */

    .stone-coverflow-card.is-prev-2,
    .stone-coverflow-card.is-next-2 {
        opacity: 0;
        visibility: hidden;

        pointer-events: none;
    }


    .stone-coverflow-title {
        font-size:
            clamp(24px, 7vw, 32px);
    }


    .stone-coverflow-button {
        padding:
            13px 20px;

        font-size: 9px;
    }

}


/* ============================================================
   SMALL MOBILE
============================================================ */

@media (max-width: 480px) {

    .stone-coverflow-stage {
        height: 370px;
    }


    .stone-coverflow-card {
        width: min(64vw, 230px);
    }


    .stone-coverflow-card.is-prev-1 {
        transform:
            translate(-50%, -50%)
            translateX(-58%)
            scale(.68);
    }


    .stone-coverflow-card.is-next-1 {
        transform:
            translate(-50%, -50%)
            translateX(58%)
            scale(.68);
    }

}


/* ============================================================
   REDUCED MOTION
============================================================ */

@media (prefers-reduced-motion: reduce) {

    .stone-coverflow-card,
    .stone-coverflow-button,
    .stone-coverflow-button-arrow {
        transition: none !important;
    }

}