/* ==========================================================
   ELENA PRODUCT DETAILS — PAGE-SPECIFIC DESIGN
   ========================================================== */

.epd-page{
    --epd-navy:#071a2d;
    --epd-green:#0f9b72;
    --epd-blue:#1479eb;
    --epd-orange:#ff811a;
    --epd-text:#14263a;
    --epd-muted:#687684;
    --epd-line:#e2e8ed;
    color:var(--epd-text);
}


/* Top breadcrumb */

.epd-topbar{
    background:#fff;
    border-bottom:1px solid var(--epd-line);
}

.epd-breadcrumb{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:8px;
    min-height:54px;
    color:#9aa5ae;
    font-size:10px;
    font-weight:700;
}

.epd-breadcrumb a{
    color:#687684;
    text-decoration:none;
}

.epd-breadcrumb a:hover{
    color:var(--epd-green);
}

.epd-breadcrumb strong{
    max-width:420px;
    overflow:hidden;
    color:var(--epd-navy);
    white-space:nowrap;
    text-overflow:ellipsis;
}


/* ==========================================================
   OVERVIEW
   ========================================================== */

.epd-overview{
    padding:62px 0 68px;
    background:
        radial-gradient(
            circle at 90% 8%,
            rgba(20,121,235,.04),
            transparent 22%
        ),
        #f7f9fb;
}

.epd-overview-grid{
    display:grid;
    grid-template-columns:minmax(0,.94fr) minmax(0,1.06fr);
    align-items:start;
    gap:62px;
}


/* Gallery */

.epd-gallery{
    position:sticky;
    top:105px;
}

.epd-gallery-choice{
    position:absolute;
    width:1px;
    height:1px;
    opacity:0;
    pointer-events:none;
}

.epd-gallery-stage{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    height:505px;
    padding:38px;
    overflow:hidden;
    background:#fff;
    border:1px solid #dde5eb;
    box-shadow:0 14px 35px rgba(7,26,45,.07);
}

.epd-gallery-slide{
    display:none;
    width:100%;
    height:100%;
    object-fit:contain;
    animation:epdImageIn .24s ease;
}

@keyframes epdImageIn{
    from{
        opacity:.45;
        transform:scale(.985);
    }
    to{
        opacity:1;
        transform:scale(1);
    }
}

.epd-gallery-thumbs{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:13px;
    padding-bottom:3px;
    overflow-x:auto;
    scrollbar-width:thin;
}

.epd-gallery-thumb{
    display:flex;
    align-items:center;
    justify-content:center;
    flex:0 0 78px;
    width:78px;
    height:72px;
    padding:7px;
    cursor:pointer;
    background:#fff;
    border:1px solid #dce3e9;
    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.epd-gallery-thumb:hover{
    border-color:rgba(15,155,114,.45);
    transform:translateY(-2px);
}

.epd-gallery-thumb img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.epd-gallery-empty{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:505px;
    padding:40px;
    background:#fff;
    border:1px solid #dde5eb;
}

.epd-gallery-empty img{
    max-width:70%;
    max-height:330px;
    object-fit:contain;
}


/* Summary */

.epd-summary{
    padding:8px 0;
}

.epd-category{
    display:inline-flex;
    align-items:center;
    min-height:28px;
    margin-bottom:14px;
    padding:0 10px;
    color:#0c785c;
    font-size:9px;
    font-weight:800;
    letter-spacing:.04em;
    text-decoration:none;
    text-transform:uppercase;
    background:#e8f6f1;
}

.epd-summary h1{
    max-width:660px;
    margin:0 0 14px;
    color:var(--epd-navy);
    font-size:clamp(36px,4vw,54px);
    font-weight:800;
    line-height:1.08;
    letter-spacing:-1px;
}

.epd-code{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:7px;
    margin-bottom:20px;
    color:#84919c;
    font-size:10px;
}

.epd-code i{
    color:var(--epd-green);
}

.epd-code strong{
    color:#4d5e6d;
    font-weight:800;
}

.epd-summary-text{
    max-width:650px;
    margin:0 0 24px;
    color:#657482;
    font-size:14px;
    line-height:1.75;
}

.epd-meta{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    margin-bottom:25px;
    border-top:1px solid #dfe5ea;
    border-left:1px solid #dfe5ea;
}

.epd-meta > div{
    min-height:76px;
    padding:15px 17px;
    background:#fff;
    border-right:1px solid #dfe5ea;
    border-bottom:1px solid #dfe5ea;
}

.epd-meta span{
    display:block;
    margin-bottom:4px;
    color:#98a3ad;
    font-size:9px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.epd-meta strong{
    display:block;
    color:#304354;
    font-size:12px;
    font-weight:800;
    line-height:1.45;
}

.epd-meta .epd-available{
    color:var(--epd-green);
}

.epd-actions{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
}

.epd-primary-action,
.epd-secondary-action{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-height:46px;
    padding:0 19px;
    font-size:11px;
    font-weight:800;
    text-decoration:none;
    transition:
        transform .22s ease,
        background .22s ease,
        color .22s ease,
        border-color .22s ease;
}

.epd-primary-action{
    color:#fff;
    background:linear-gradient(
        90deg,
        var(--epd-green),
        var(--epd-blue)
    );
    border:1px solid transparent;
}

.epd-primary-action:hover{
    color:#fff;
    transform:translateY(-2px);
}

.epd-secondary-action{
    color:var(--epd-navy);
    background:#fff;
    border:1px solid #cfd8e0;
}

.epd-secondary-action:hover{
    color:var(--epd-green);
    border-color:rgba(15,155,114,.40);
    transform:translateY(-2px);
}

.epd-support-note{
    display:flex;
    align-items:center;
    gap:13px;
    margin-top:24px;
    padding-top:19px;
    border-top:1px solid #e1e6eb;
}

.epd-support-note > span{
    display:grid;
    place-items:center;
    flex:0 0 39px;
    width:39px;
    height:39px;
    color:var(--epd-green);
    background:#eaf7f2;
    border-radius:50%;
}

.epd-support-note strong{
    display:block;
    margin-bottom:2px;
    color:var(--epd-navy);
    font-size:11px;
    font-weight:800;
}

.epd-support-note p{
    margin:0;
    color:#7a8792;
    font-size:10px;
}


/* ==========================================================
   CONTENT
   ========================================================== */

.epd-content{
    padding:70px 0 80px;
    background:#fff;
}

.epd-section{
    width:min(100%,980px);
    margin:0 auto 58px;
}

.epd-section:last-of-type{
    margin-bottom:0;
}

.epd-section-heading{
    margin-bottom:22px;
}

.epd-section-heading span{
    display:inline-flex;
    align-items:center;
    gap:9px;
    margin-bottom:7px;
    color:var(--epd-green);
    font-size:9px;
    font-weight:800;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.epd-section-heading span::before{
    content:"";
    width:27px;
    height:2px;
    background:var(--epd-orange);
}

.epd-section-heading h2{
    margin:0;
    color:var(--epd-navy);
    font-size:clamp(27px,3vw,36px);
    font-weight:800;
    line-height:1.15;
    letter-spacing:-.55px;
}

.epd-text-card{
    padding:28px 31px;
    color:#61717f;
    font-size:13px;
    line-height:1.82;
    background:#f7f9fb;
    border-left:3px solid var(--epd-green);
}

.epd-feature-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    border-top:1px solid var(--epd-line);
    border-left:1px solid var(--epd-line);
}

.epd-feature-item{
    display:flex;
    align-items:flex-start;
    gap:12px;
    min-height:94px;
    padding:19px 20px;
    background:#fff;
    border-right:1px solid var(--epd-line);
    border-bottom:1px solid var(--epd-line);
}

.epd-feature-item > span{
    display:grid;
    place-items:center;
    flex:0 0 26px;
    width:26px;
    height:26px;
    color:var(--epd-green);
    font-size:9px;
    background:#eaf7f2;
    border-radius:50%;
}

.epd-feature-item p{
    margin:2px 0 0;
    color:#516372;
    font-size:12px;
    line-height:1.65;
}


/* Tables */

.epd-table-card{
    overflow:hidden;
    background:#fff;
    border:1px solid var(--epd-line);
    box-shadow:0 7px 20px rgba(7,26,45,.04);
}

.epd-table{
    width:100%;
    margin:0;
    border-collapse:collapse;
}

.epd-table th,
.epd-table td{
    padding:14px 17px;
    vertical-align:top;
    text-align:left;
    border-bottom:1px solid #e7ecf0;
}

.epd-table thead th{
    color:#fff;
    font-size:10px;
    font-weight:800;
    letter-spacing:.03em;
    background:var(--epd-navy);
}

.epd-table tbody td{
    color:#61717f;
    font-size:11px;
    line-height:1.55;
}

.epd-table tbody td:first-child{
    color:#344657;
    font-weight:800;
}

.epd-table tbody tr:nth-child(even){
    background:#f8fafb;
}

.epd-table tbody tr:last-child td{
    border-bottom:0;
}


/* CTA */

.epd-cta{
    width:min(100%,980px);
    margin:65px auto 0;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:center;
    gap:40px;
    padding:32px 36px;
    color:#fff;
    background:linear-gradient(
        110deg,
        #0f8d6d,
        #1479eb
    );
}

.epd-cta span{
    display:block;
    margin-bottom:5px;
    color:#d7fff0;
    font-size:9px;
    font-weight:800;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.epd-cta h2{
    margin:0 0 6px;
    color:#fff;
    font-size:25px;
    font-weight:800;
}

.epd-cta p{
    margin:0;
    color:rgba(255,255,255,.86);
    font-size:11px;
    line-height:1.6;
}

.epd-cta > a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:9px;
    min-height:44px;
    padding:0 19px;
    color:#0b3857;
    font-size:11px;
    font-weight:800;
    text-decoration:none;
    background:#fff;
}


/* ==========================================================
   SIMILAR PRODUCTS
   ========================================================== */

.epd-similar{
    padding:68px 0 76px;
    background:#f5f8fa;
    border-top:1px solid #e7ecf0;
}

.epd-similar-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:30px;
    margin-bottom:26px;
}

.epd-similar-heading > div > span{
    display:inline-flex;
    align-items:center;
    gap:9px;
    margin-bottom:7px;
    color:var(--epd-green);
    font-size:9px;
    font-weight:800;
    letter-spacing:.13em;
    text-transform:uppercase;
}

.epd-similar-heading > div > span::before{
    content:"";
    width:27px;
    height:2px;
    background:var(--epd-orange);
}

.epd-similar-heading h2{
    margin:0 0 5px;
    color:var(--epd-navy);
    font-size:32px;
    font-weight:800;
}

.epd-similar-heading p{
    margin:0;
    color:#7b8791;
    font-size:11px;
}

.epd-view-category{
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:41px;
    padding:0 16px;
    color:var(--epd-navy);
    font-size:10px;
    font-weight:800;
    text-decoration:none;
    background:#fff;
    border:1px solid #d4dce3;
}

.epd-similar-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px;
}

.epd-similar-card{
    display:flex;
    flex-direction:column;
    overflow:hidden;
    background:#fff;
    border:1px solid #e0e6eb;
    box-shadow:0 7px 22px rgba(7,26,45,.05);
    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.epd-similar-card:hover{
    transform:translateY(-5px);
    box-shadow:0 15px 32px rgba(7,26,45,.09);
}

.epd-similar-image{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    height:220px;
    padding:24px 20px 17px;
    overflow:hidden;
    text-decoration:none;
    background:linear-gradient(
        180deg,
        #fff,
        #f9fbfc
    );
    border-bottom:1px solid #edf1f4;
}

.epd-similar-image > span{
    position:absolute;
    top:12px;
    left:12px;
    z-index:2;
    max-width:calc(100% - 24px);
    padding:5px 8px;
    overflow:hidden;
    color:#0c785c;
    font-size:8px;
    font-weight:800;
    white-space:nowrap;
    text-overflow:ellipsis;
    background:#e9f6f1;
}

.epd-similar-image img{
    width:100%;
    height:100%;
    object-fit:contain;
    transition:transform .3s ease;
}

.epd-similar-card:hover
.epd-similar-image img{
    transform:scale(1.06);
}

.epd-similar-body{
    display:flex;
    flex:1;
    flex-direction:column;
    padding:17px 18px 18px;
}

.epd-similar-body h3{
    margin:0 0 8px;
    font-size:16px;
    font-weight:800;
    line-height:1.4;
}

.epd-similar-body h3 a{
    color:var(--epd-navy);
    text-decoration:none;
}

.epd-similar-body p{
    margin:0 0 15px;
    color:#7d8994;
    font-size:9px;
}

.epd-similar-link{
    display:inline-flex;
    align-items:center;
    gap:7px;
    width:max-content;
    margin-top:auto;
    color:var(--epd-blue);
    font-size:10px;
    font-weight:800;
    text-decoration:none;
}

.epd-similar-link:hover{
    gap:10px;
    color:var(--epd-green);
}


/* ==========================================================
   NOT FOUND
   ========================================================== */

.epd-not-found{
    padding:90px 0;
    background:#f7f9fb;
}

.epd-not-found-card{
    max-width:560px;
    margin:0 auto;
    padding:50px 30px;
    text-align:center;
    background:#fff;
    border:1px solid var(--epd-line);
}

.epd-not-found-card > span{
    display:grid;
    place-items:center;
    width:68px;
    height:68px;
    margin:0 auto 18px;
    color:var(--epd-green);
    font-size:24px;
    background:#eaf7f2;
    border-radius:50%;
}

.epd-not-found-card h1{
    margin:0 0 8px;
    color:var(--epd-navy);
    font-size:28px;
    font-weight:800;
}

.epd-not-found-card p{
    margin:0;
    color:var(--epd-muted);
    font-size:12px;
}

.epd-not-found-card a{
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:43px;
    margin-top:20px;
    padding:0 17px;
    color:#fff;
    font-size:10px;
    font-weight:800;
    text-decoration:none;
    background:var(--epd-navy);
}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media(max-width:991px){

    .epd-overview{
        padding:50px 0 58px;
    }

    .epd-overview-grid{
        grid-template-columns:1fr;
        gap:38px;
    }

    .epd-gallery{
        position:relative;
        top:auto;
        max-width:680px;
    }

    .epd-gallery-stage{
        height:470px;
    }

    .epd-summary{
        max-width:760px;
    }

    .epd-content{
        padding:58px 0 68px;
    }

    .epd-similar-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .epd-cta{
        grid-template-columns:1fr;
        gap:22px;
    }

}

@media(max-width:767px){

    .epd-feature-grid{
        grid-template-columns:1fr;
    }

    .epd-similar-heading{
        align-items:flex-start;
        flex-direction:column;
        gap:17px;
    }

}

@media(max-width:575px){

    .epd-breadcrumb{
        min-height:48px;
    }

    .epd-breadcrumb strong{
        max-width:190px;
    }

    .epd-overview{
        padding:38px 0 45px;
    }

    .epd-gallery-stage{
        height:345px;
        padding:24px;
    }

    .epd-gallery-thumb{
        flex-basis:65px;
        width:65px;
        height:61px;
    }

    .epd-summary h1{
        font-size:35px;
    }

    .epd-summary-text{
        font-size:13px;
    }

    .epd-meta{
        grid-template-columns:1fr;
    }

    .epd-actions{
        align-items:stretch;
        flex-direction:column;
    }

    .epd-primary-action,
    .epd-secondary-action{
        width:100%;
    }

    .epd-content{
        padding:46px 0 54px;
    }

    .epd-section{
        margin-bottom:45px;
    }

    .epd-text-card{
        padding:22px 20px;
    }

    .epd-table th,
    .epd-table td{
        padding:12px 13px;
    }

    .epd-cta{
        margin-top:48px;
        padding:27px 22px;
    }

    .epd-cta > a{
        width:100%;
    }

    .epd-similar{
        padding:50px 0 56px;
    }

    .epd-similar-grid{
        grid-template-columns:1fr;
    }

}