/* EsigaraHane Phase 15 - product detail, reviews, Q&A */

.esh-product-page{
    padding:26px 0 54px;
    background:#fff;
}

.esh-product-breadcrumb{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
    margin-bottom:26px;
    color:#8a9198;
    font-size:10px;
}

.esh-product-breadcrumb a{
    color:#7c848c;
    text-decoration:none;
}

.esh-product-breadcrumb a:hover{
    color:#f4772e;
}

.esh-product-breadcrumb strong{
    color:#353a40;
}

.esh-product-main{
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(390px,.95fr);
    gap:54px;
    align-items:start;
}

.esh-product-gallery{
    display:grid;
    grid-template-columns:82px minmax(0,1fr);
    gap:14px;
    min-width:0;
}

.esh-product-thumbs{
    display:flex;
    flex-direction:column;
    gap:10px;
    max-height:660px;
    overflow:auto;
    padding-right:2px;
}

.esh-product-thumb{
    width:78px;
    height:78px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:4px;
    border:1px solid #e0e4e8;
    border-radius:10px;
    background:#fff;
    cursor:pointer;
}

.esh-product-thumb.active,
.esh-product-thumb:hover{
    border-color:#f4772e;
    box-shadow:0 0 0 2px rgba(244,119,46,.08);
}

.esh-product-thumb img{
    width:100%;
    height:100%;
    object-fit:contain;
}

.esh-product-thumb-placeholder{
    width:78px;
    height:78px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px dashed #d9dde1;
    border-radius:10px;
    color:#9aa0a6;
    font-size:9px;
}

.esh-product-main-image-wrap{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    aspect-ratio:1/1;
    overflow:hidden;
    border:1px solid #eef0f2;
    border-radius:14px;
    background:#fff;
}

.esh-product-main-image{
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
}

.esh-product-main-placeholder{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    color:#a0a6ad;
    background:#f6f7f8;
}

.esh-product-info{
    min-width:0;
    padding-top:4px;
}

.esh-product-title-line{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
}

.esh-product-title-copy{
    min-width:0;
}

.esh-product-title-copy h1{
    margin:0;
    color:#24282d;
    font-size:clamp(30px,3vw,46px);
    line-height:1.06;
    letter-spacing:-.045em;
}

.esh-product-brand-card{
    width:108px;
    height:82px;
    flex:0 0 108px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:10px;
    border:1px solid #e5e8eb;
    border-radius:12px;
    background:#fff;
}

.esh-product-brand-card img{
    max-width:100%;
    max-height:100%;
    object-fit:contain;
}

.esh-product-brand-card strong{
    color:#353a40;
    font-size:12px;
    text-align:center;
}

.esh-product-brand-mobile{
    display:none;
    margin-top:6px;
    color:#858c94;
    font-size:9px;
}

.esh-product-brand-mobile strong{
    color:#f4772e;
}

.esh-product-rating-link{
    display:inline-flex;
    align-items:center;
    gap:9px;
    margin-top:18px;
    color:#6e757c;
    text-decoration:none;
    font-size:10px;
}

.esh-product-rating-link:hover{
    color:#f4772e;
}

.esh-stars{
    display:inline-flex;
    gap:1px;
    color:#d5d9de;
    letter-spacing:-1px;
}

.esh-stars span{
    color:#d5d9de;
}

.esh-stars span.filled{
    color:#f4b400;
}

.esh-stars.large{
    font-size:20px;
}

.esh-stars.small{
    font-size:14px;
}

.esh-product-price{
    margin-top:20px;
    color:#f4772e;
    font-size:30px;
    font-weight:900;
    letter-spacing:-.035em;
}

.esh-product-lead{
    margin:18px 0 0;
    color:#6f777f;
    font-size:11px;
    line-height:1.75;
}

.esh-product-buy-form{
    margin-top:24px;
}

.esh-product-option{
    display:grid;
    grid-template-columns:130px minmax(0,1fr);
    gap:14px;
    align-items:center;
    margin:0!important;
}

.esh-product-option>span{
    color:#343a40;
    font-size:11px;
    font-weight:850;
}

.esh-product-option select{
    min-height:48px;
}

.esh-variant-note{
    margin:7px 0 0 144px;
    color:#8a9198;
    font-size:8px;
}

.esh-product-stock{
    display:flex;
    align-items:center;
    gap:9px;
    margin-bottom:12px;
    font-size:10px;
}

.esh-product-stock span{
    color:#868d95;
}

.esh-product-stock strong{
    color:#30363c;
}

.esh-product-buy-row{
    display:grid;
    grid-template-columns:82px minmax(0,1fr);
    gap:10px;
    margin-top:16px;
}

.esh-product-buy-row input{
    min-height:48px;
    text-align:center;
}

.esh-product-buy-row .add-cart-button{
    min-height:48px;
}

.esh-product-meta{
    display:grid;
    gap:7px;
    margin-top:22px;
    padding-top:17px;
    border-top:1px solid #eceff1;
}

.esh-product-meta>div{
    display:grid;
    grid-template-columns:82px minmax(0,1fr);
    gap:10px;
    font-size:9px;
}

.esh-product-meta span{
    color:#92989e;
}

.esh-product-meta strong{
    color:#4c535a;
    font-weight:700;
}

.esh-product-tabs{
    margin-top:50px;
    border-top:1px solid #e5e8eb;
}

.esh-product-tab-nav{
    display:flex;
    justify-content:center;
    gap:36px;
    overflow:auto;
    border-bottom:1px solid #e5e8eb;
}

.esh-product-tab-nav button{
    position:relative;
    min-height:68px;
    border:0;
    background:transparent;
    color:#666d74;
    white-space:nowrap;
    cursor:pointer;
    font-size:12px;
    font-weight:850;
}

.esh-product-tab-nav button::before{
    content:"";
    position:absolute;
    top:-1px;
    left:0;
    right:0;
    height:3px;
    background:#f4772e;
    transform:scaleX(0);
    transition:transform .16s ease;
}

.esh-product-tab-nav button.active{
    color:#272c31;
}

.esh-product-tab-nav button.active::before{
    transform:scaleX(1);
}

.esh-product-tab-panel{
    display:none;
}

.esh-product-tab-panel.active{
    display:block;
}

.esh-tab-content{
    padding:32px 0 8px;
}

.esh-tab-content>h2,
.esh-review-header h2,
.esh-question-title h2{
    margin:0 0 18px;
    color:#272c31;
    font-size:22px;
    letter-spacing:-.025em;
}

.esh-product-description{
    max-width:980px;
    color:#555d65;
    font-size:11px;
    line-height:1.85;
}

.esh-additional-table{
    max-width:780px;
    border:1px solid #e5e8eb;
    border-radius:12px;
    overflow:hidden;
}

.esh-additional-table>div{
    display:grid;
    grid-template-columns:180px minmax(0,1fr);
    gap:14px;
    padding:12px 14px;
    border-bottom:1px solid #eceff1;
}

.esh-additional-table>div:last-child{
    border-bottom:0;
}

.esh-additional-table span{
    color:#8a9198;
    font-size:10px;
}

.esh-additional-table strong{
    color:#353b42;
    font-size:10px;
}

.esh-review-header{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:18px;
    margin-bottom:20px;
}

.esh-review-summary{
    display:flex;
    align-items:center;
    gap:10px;
}

.esh-review-summary>strong{
    color:#252a2f;
    font-size:28px;
}

.esh-review-summary small{
    color:#818890;
    font-size:9px;
}

.esh-review-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 360px;
    gap:28px;
    align-items:start;
}

.esh-review-list,
.esh-question-list{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.esh-review-card,
.esh-question-card{
    padding:16px;
    border:1px solid #e3e6e9;
    border-radius:12px;
    background:#fff;
}

.esh-review-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
}

.esh-review-top strong{
    color:#2d3237;
    font-size:11px;
}

.esh-review-top time{
    color:#9aa0a6;
    font-size:8px;
}

.esh-verified-badge{
    display:inline-flex;
    margin-left:7px;
    padding:3px 6px;
    border-radius:999px;
    background:#eaf8ef;
    color:#178447;
    font-size:7px;
    font-weight:850;
}

.esh-review-card .esh-stars{
    margin-top:7px;
}

.esh-review-card h3{
    margin:9px 0 0;
    color:#30363c;
    font-size:11px;
}

.esh-review-card p{
    margin:7px 0 0;
    color:#646c74;
    font-size:10px;
    line-height:1.65;
}

.esh-review-images{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-top:11px;
}

.esh-review-images a{
    width:78px;
    height:78px;
    overflow:hidden;
    border:1px solid #e0e4e8;
    border-radius:9px;
    background:#f5f6f7;
}

.esh-review-images img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.esh-interaction-form-card{
    position:sticky;
    top:18px;
    padding:18px;
    border:1px solid #e2e5e8;
    border-radius:13px;
    background:#fafbfc;
}

.esh-interaction-form-card h3{
    margin:0;
    color:#2d3237;
    font-size:16px;
}

.esh-interaction-form-card>p{
    margin:6px 0 14px;
    color:#858c94;
    font-size:9px;
    line-height:1.55;
}

.esh-interaction-form-card form{
    display:flex;
    flex-direction:column;
    gap:10px;
}

.esh-interaction-form-card label{
    display:flex!important;
    flex-direction:column;
    gap:5px;
    margin:0!important;
    color:#495159;
    font-size:9px!important;
    font-weight:800!important;
}

.esh-interaction-form-card input,
.esh-interaction-form-card textarea{
    width:100%;
    border:1px solid #dbe0e4;
    border-radius:9px;
    background:#fff;
    padding:10px 11px;
    font:inherit;
    color:#2f353b;
}

.esh-interaction-form-card label small{
    color:#92989f;
    font-size:8px;
    font-weight:500;
}

.esh-rating-input{
    display:flex;
    flex-direction:column;
    gap:5px;
}

.esh-rating-input>span{
    color:#495159;
    font-size:9px;
    font-weight:800;
}

.esh-rating-input>div{
    display:flex;
    flex-direction:row-reverse;
    justify-content:flex-end;
    gap:2px;
}

.esh-rating-input input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.esh-rating-input label{
    display:block!important;
    color:#d4d8dc!important;
    cursor:pointer;
    font-size:25px!important;
    line-height:1;
}

.esh-rating-input input:checked ~ label,
.esh-rating-input label:hover,
.esh-rating-input label:hover ~ label{
    color:#f4b400!important;
}

.esh-orange-submit{
    min-height:42px;
    border:0;
    border-radius:9px;
    background:#f4772e;
    color:#fff;
    cursor:pointer;
    font-size:10px;
    font-weight:850;
}

.esh-orange-submit:hover{
    background:#df6220;
}

.esh-empty-interaction{
    padding:22px;
    border:1px dashed #d7dce0;
    border-radius:11px;
    color:#858c94;
    text-align:center;
    font-size:10px;
}

.esh-question-title{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

.esh-question-title span{
    color:#8a9198;
    font-size:9px;
}

.esh-question-line,
.esh-answer-line{
    display:grid;
    grid-template-columns:30px minmax(0,1fr);
    gap:10px;
}

.esh-answer-line{
    margin-top:13px;
    padding-top:13px;
    border-top:1px solid #eceff1;
}

.esh-q-label,
.esh-a-label{
    width:28px;
    height:28px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    font-size:10px;
    font-weight:900;
}

.esh-q-label{
    background:#fff0e6;
    color:#d75c17;
}

.esh-a-label{
    background:#ebf6ef;
    color:#16864b;
}

.esh-question-line strong,
.esh-answer-line strong{
    color:#31373d;
    font-size:10px;
}

.esh-question-line p,
.esh-answer-line p{
    margin:5px 0 0;
    color:#626a72;
    font-size:10px;
    line-height:1.6;
}

.esh-question-line time{
    display:block;
    margin-top:6px;
    color:#9aa0a6;
    font-size:8px;
}

.esh-answer-pending{
    margin-top:12px;
    padding:9px 10px;
    border-radius:8px;
    background:#f5f6f7;
    color:#848b92;
    font-size:9px;
}

.esh-product-pagination{
    margin-top:10px;
}

.esh-product-pagination nav{
    font-size:9px;
}

@media(max-width:980px){
    .esh-product-main{
        grid-template-columns:1fr;
        gap:30px;
    }

    .esh-product-info{
        max-width:760px;
    }

    .esh-review-layout{
        grid-template-columns:1fr;
    }

    .esh-interaction-form-card{
        position:static;
    }
}

@media(max-width:700px){
    .esh-product-page{
        padding-top:16px;
    }

    .esh-product-gallery{
        grid-template-columns:1fr;
    }

    .esh-product-thumbs{
        order:2;
        flex-direction:row;
        max-height:none;
        overflow:auto;
    }

    .esh-product-thumb,
    .esh-product-thumb-placeholder{
        width:64px;
        height:64px;
        flex:0 0 64px;
    }

    .esh-product-title-line{
        display:block;
    }

    .esh-product-brand-card{
        display:none;
    }

    .esh-product-brand-mobile{
        display:block;
    }

    .esh-product-title-copy h1{
        font-size:30px;
    }

    .esh-product-price{
        font-size:26px;
    }

    .esh-product-option{
        grid-template-columns:1fr;
        gap:7px;
    }

    .esh-variant-note{
        margin-left:0;
    }

    .esh-product-tab-nav{
        justify-content:flex-start;
        gap:24px;
        padding:0 4px;
    }

    .esh-product-tab-nav button{
        min-height:58px;
        font-size:10px;
    }

    .esh-additional-table>div{
        grid-template-columns:120px minmax(0,1fr);
    }

    .esh-review-summary{
        flex-wrap:wrap;
    }
}

/* PRODUCT-GALLERY-V2 */
.esh-product-main-image-wrap{
    position:relative;
    overflow:hidden;
}

.esh-product-main-image{
    transition:transform .30s ease;
    transform-origin:center center;
    will-change:transform;
}

@media (hover:hover) and (pointer:fine){
    .esh-product-main-image:hover{
        transform:scale(1.14);
    }
}

.esh-gallery-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:8;
    width:44px;
    height:44px;
    border:1px solid rgba(0,0,0,.09);
    border-radius:50%;
    background:rgba(255,255,255,.94);
    color:#242424;
    font-size:34px;
    line-height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 4px 16px rgba(0,0,0,.10);
    opacity:.90;
    transition:opacity .2s ease,transform .2s ease,background .2s ease;
}

.esh-gallery-arrow:hover{
    opacity:1;
    background:#fff;
}

.esh-gallery-prev{left:16px}
.esh-gallery-next{right:16px}

@media (max-width:768px){
    .esh-gallery-arrow{
        width:38px;
        height:38px;
        font-size:29px;
    }

    .esh-gallery-prev{left:8px}
    .esh-gallery-next{right:8px}
}