/*=========================================================
    SOKO IMARA
    PRODUCT DETAILS PAGE
=========================================================*/


/*=========================================================
    VARIABLES
=========================================================*/

:root{

    --primary:#F4A100;
    --primary-hover:#DE9300;

    --success:#16A34A;
    --danger:#DC2626;

    --dark:#111827;

    --text:#475467;

    --muted:#98A2B3;

    --border:#EAECF0;

    --background:#F7F8FC;

    --white:#FFFFFF;

    --radius:18px;

    --shadow:
        0 8px 30px rgba(15,23,42,.06);

}


/*=========================================================
    RESET
=========================================================*/

*{

    margin:0;

    padding:0;

    box-sizing:border-box;

}

img{

    display:block;

    max-width:100%;

}

a{

    text-decoration:none;

    color:inherit;

}

button{

    border:none;

    cursor:pointer;

    font:inherit;

}


/*=========================================================
    PAGE
=========================================================*/

.desktop-product-page{

    background:var(--background);

    padding:35px 0 60px;

}

.desktop-product-page .container{

    width:100%;

    max-width:1600px;

    margin:auto;

    padding:0 20px;

}


/*=========================================================
    TOP LAYOUT
=========================================================*/

.product-top-section{

    display:grid;

    grid-template-columns:

        minmax(520px,1.5fr)

        minmax(380px,1fr)

        340px;

    gap:30px;

    align-items:start;

}


/*=========================================================
    SIDEBAR
=========================================================*/

.product-right-sidebar{

    display:flex;

    flex-direction:column;

    gap:24px;

}


/*=========================================================
    COMMON CARD
=========================================================*/

.product-gallery,
.product-info,
.seller-card,
.safety-card,
.related-card,
.product-description-card{

    background:var(--white);

    border-radius:20px;

    box-shadow:var(--shadow);

}
/*=========================================================
    PRODUCT GALLERY
=========================================================*/

.product-gallery{

    padding:20px;

}


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

.gallery-main-image{

    position:relative;

    width:100%;

    aspect-ratio:4 / 3;

    overflow:hidden;

    border-radius:18px;

    background:#F4F4F4;

}

.gallery-main-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.35s;

}

.gallery-main-image:hover img{

    transform:scale(1.04);

}


/*=========================================================
    CONDITION BADGE
=========================================================*/

.gallery-badge{

    position:absolute;

    top:18px;

    left:18px;

    z-index:10;

    padding:8px 18px;

    border-radius:30px;

    font-size:12px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.4px;

}

.gallery-badge.used{

    background:#F4A100;

    color:#fff;

}

.gallery-badge.new{

    background:#16A34A;

    color:#fff;

}


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

.gallery-arrow{

    position:absolute;

    top:50%;

    transform:translateY(-50%);

    width:46px;

    height:46px;

    border:none;

    border-radius:50%;

    background:#fff;

    color:#111827;

    display:flex;

    justify-content:center;

    align-items:center;

    box-shadow:0 8px 25px rgba(0,0,0,.15);

    transition:.25s;

    z-index:20;

}

.gallery-arrow:hover{

    background:var(--primary);

    color:#fff;

}

.gallery-arrow.left{

    left:18px;

}

.gallery-arrow.right{

    right:18px;

}


/*=========================================================
    THUMBNAILS
=========================================================*/

.gallery-thumbnails{

    display:flex;

    gap:12px;

    margin-top:18px;

    overflow-x:auto;

    scrollbar-width:none;

}

.gallery-thumbnails::-webkit-scrollbar{

    display:none;

}

.gallery-thumb{

    width:90px;

    height:90px;

    flex-shrink:0;

    overflow:hidden;

    border-radius:14px;

    border:2px solid transparent;

    cursor:pointer;

    transition:.25s;

}

.gallery-thumb img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.gallery-thumb:hover{

    border-color:var(--primary);

}

.gallery-thumb.active{

    border-color:var(--primary);

}


/*=========================================================
    EXTRA PHOTOS
=========================================================*/

.gallery-more{

    width:90px;

    height:90px;

    flex-shrink:0;

    border-radius:14px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#EEF2F6;

    color:#475467;

    font-size:22px;

    font-weight:700;

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

.product-info{

    padding:24px;

}


/*=========================================================
    CATEGORY
=========================================================*/

.info-category{

    display:inline-flex;

    align-items:center;

    padding:6px 14px;

    border-radius:30px;

    background:#FFF7E5;

    color:var(--primary);

    font-size:11px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.5px;

    margin-bottom:12px;

}


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

.info-title{

    font-size:24px;

    line-height:1.35;

    color:var(--dark);

    font-weight:700;

    margin-bottom:14px;

}


/*=========================================================
    VERIFIED
=========================================================*/

.verified-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:6px 14px;

    border-radius:30px;

    background:#ECFDF3;

    color:var(--success);

    font-size:13px;

    font-weight:600;

    margin-bottom:16px;

}

.verified-badge i{

    color:var(--success);

}


/*=========================================================
    PRICE
=========================================================*/

.info-price{

    font-size:34px;

    font-weight:700;

    color:var(--dark);

    margin-bottom:16px;

}


/*=========================================================
    META
=========================================================*/

.product-meta{

    display:flex;

    flex-wrap:wrap;

    align-items:center;

    gap:10px;

    color:#667085;

    font-size:13px;

    margin-bottom:18px;

}

.product-meta span{

    display:flex;

    align-items:center;

    gap:6px;

}

.meta-dot{

    color:#CBD5E1;

}


/*=========================================================
    DIVIDER
=========================================================*/

.product-divider{

    border:none;

    border-top:1px solid var(--border);

    margin:18px 0;

}


/*=========================================================
    SPECIFICATIONS
=========================================================*/

.product-specs{

    display:flex;

    flex-direction:column;

}

.spec-row{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:10px 0;

    border-bottom:1px solid #F2F4F7;

}

.spec-row:last-child{

    border-bottom:none;

}

.spec-row span{

    color:#667085;

    font-size:14px;

}

.spec-row strong{

    color:var(--dark);

    font-size:14px;

    font-weight:600;

}


/*=========================================================
    BUTTONS
=========================================================*/

.product-actions{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10px;

    margin-top:20px;

}

.btn-call,
.btn-whatsapp{

    height:46px;

    border-radius:10px;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    font-size:14px;

    font-weight:600;

    transition:.25s;

}

.btn-call{

    background:var(--primary);

    color:#fff;

}

.btn-call:hover{

    background:var(--primary-hover);

}

.btn-whatsapp{

    background:#22C55E;

    color:#fff;

}

.btn-whatsapp:hover{

    background:#16A34A;

}

.btn-inquiry{

    width:100%;

    height:46px;

    margin-top:10px;

    border-radius:10px;

    background:#162252;

    color:#fff;

    font-size:14px;

    font-weight:600;

    transition:.25s;

}

.btn-inquiry:hover{

    background:#0F1A42;

}

.product-extra-actions{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:10px;

    margin-top:10px;

}

.btn-save,
.btn-share{

    height:42px;

    border:1px solid var(--border);

    background:#fff;

    border-radius:10px;

    color:#475467;

    font-size:14px;

    font-weight:600;

    transition:.25s;

}

.btn-save:hover,
.btn-share:hover{

    border-color:var(--primary);

    color:var(--primary);

}


/*=========================================================
    PHONE RESULT
=========================================================*/

.seller-phone-result{

    margin-top:15px;

    text-align:center;

    font-size:14px;

    font-weight:600;

    color:var(--dark);

}
/*=========================================================
    SELLER CARD
=========================================================*/

.seller-card{

    padding:24px;

}

/*=========================================================
    HEADING
=========================================================*/

.seller-heading{

    font-size:18px;

    font-weight:700;

    color:var(--dark);

    margin-bottom:24px;

}

/*=========================================================
    AVATAR
=========================================================*/

.seller-avatar{

    width:100px;

    height:100px;

    margin:0 auto 18px;

    border-radius:50%;

    overflow:hidden;

    background:#F8FAFC;

    border:3px solid #F1F5F9;

}

.seller-avatar img{

    width:100%;

    height:100%;

    object-fit:cover;

}

/*=========================================================
    NAME
=========================================================*/

.seller-name{

    text-align:center;

    font-size:20px;

    font-weight:700;

    color:var(--dark);

    margin-bottom:8px;

}

/*=========================================================
    VERIFIED
=========================================================*/

.seller-verified{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    color:var(--success);

    font-size:13px;

    font-weight:600;

    margin-bottom:20px;

}

.seller-verified i{

    color:var(--success);

}

/*=========================================================
    DIVIDER
=========================================================*/

.seller-divider{

    border:none;

    border-top:1px solid var(--border);

    margin:18px 0;

}

/*=========================================================
    STATS
=========================================================*/

.seller-stat{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:12px 0;

    border-bottom:1px solid #F3F4F6;

}

.seller-stat:last-of-type{

    border-bottom:none;

}

.seller-stat span{

    color:#667085;

    font-size:14px;

}

.seller-stat strong{

    color:var(--dark);

    font-size:14px;

    font-weight:700;

}

/*=========================================================
    VIEW SHOP BUTTON
=========================================================*/

.btn-view-shop{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    width:100%;

    height:46px;

    margin-top:22px;

    background:var(--primary);

    color:#fff;

    border-radius:10px;

    font-size:14px;

    font-weight:600;

    transition:.25s;

}

.btn-view-shop:hover{

    background:var(--primary-hover);

    color:#fff;

}
/*=========================================================
    SAFETY CARD
=========================================================*/

.safety-card{

    padding:24px;

}

.safety-heading{

    display:flex;

    align-items:center;

    gap:10px;

    margin-bottom:18px;

    font-size:18px;

    font-weight:700;

    color:var(--dark);

}

.safety-heading i{

    color:var(--primary);

}

.safety-list{

    list-style:none;

    margin:0;

    padding:0;

}

.safety-list li{

    display:flex;

    align-items:flex-start;

    gap:10px;

    margin-bottom:14px;

    color:var(--text);

    font-size:14px;

    line-height:1.6;

}

.safety-list li:last-child{

    margin-bottom:0;

}

.safety-list li::before{

    content:"✓";

    width:20px;

    height:20px;

    flex-shrink:0;

    display:flex;

    justify-content:center;

    align-items:center;

    border-radius:50%;

    background:#ECFDF3;

    color:var(--success);

    font-size:12px;

    font-weight:700;

}


/*=========================================================
    RELATED PRODUCTS
=========================================================*/

.related-card{

    padding:24px;

}

.related-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:20px;

}

.related-header h3{

    font-size:18px;

    font-weight:700;

    color:var(--dark);

}

.related-header a{

    color:var(--primary);

    font-size:13px;

    font-weight:600;

}

.related-header a:hover{

    color:var(--primary-hover);

}


/*=========================================================
    RELATED ITEM
=========================================================*/

.related-item{

    display:flex;

    gap:12px;

    padding:14px 0;

    border-top:1px solid var(--border);

    transition:.25s;

}

.related-item:first-of-type{

    border-top:none;

    padding-top:0;

}

.related-item:hover{

    transform:translateX(3px);

}


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

.related-image{

    width:84px;

    height:72px;

    overflow:hidden;

    border-radius:10px;

    flex-shrink:0;

    background:#F4F4F4;

}

.related-image img{

    width:100%;

    height:100%;

    object-fit:cover;

}


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

.related-info{

    flex:1;

}

.related-info h4{

    font-size:13px;

    line-height:1.45;

    color:var(--dark);

    margin-bottom:6px;

}

.related-price{

    font-size:16px;

    font-weight:700;

    color:var(--primary);

    margin-bottom:5px;

}

.related-location{

    display:flex;

    align-items:center;

    gap:6px;

    color:#667085;

    font-size:12px;

}

.related-location i{

    color:var(--primary);

}


/*=========================================================
    EMPTY STATE
=========================================================*/

.related-empty{

    text-align:center;

    padding:30px 10px;

    color:#98A2B3;

}

.related-empty i{

    font-size:34px;

    margin-bottom:10px;

}
/*=========================================================
    MAIN PAGE LAYOUT
=========================================================*/

.product-layout{

    display:grid;

    grid-template-columns:minmax(0,1fr) 340px;

    gap:30px;

    align-items:start;

}

/*=========================================================
    LEFT SIDE
=========================================================*/

.product-main{

    display:flex;

    flex-direction:column;

    gap:30px;

    min-width:0;

}

/*=========================================================
    GALLERY + INFO
=========================================================*/

.product-top{

    display:grid;

    grid-template-columns:1.45fr 1fr;

    gap:30px;

    align-items:start;

    min-width:0;

}

/*=========================================================
    RIGHT SIDEBAR
=========================================================*/

.product-sidebar{

    display:flex;

    flex-direction:column;

    gap:24px;

    width:340px;

}
/*=========================================================
    PRODUCT DESCRIPTION
=========================================================*/

.product-description-card{

    background:#fff;

    border-radius:20px;

    box-shadow:0 8px 30px rgba(15,23,42,.06);

    padding:30px;

    margin-top:30px;

}


/*=========================================================
    TABS
=========================================================*/

.description-tabs{

    display:flex;

    align-items:center;

    gap:35px;

    border-bottom:1px solid #EAECF0;

    margin-bottom:25px;

}

.tab-btn{

    background:none;

    border:none;

    padding:0 0 14px;

    cursor:pointer;

    font-size:17px;

    font-weight:600;

    color:#667085;

    position:relative;

    transition:.25s;

}

.tab-btn:hover{

    color:#F4A100;

}

.tab-btn.active{

    color:#F4A100;

}

.tab-btn.active::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-1px;

    width:100%;

    height:3px;

    background:#F4A100;

    border-radius:20px;

}


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

.tab-content{

    display:none;

    font-size:15px;

    line-height:1.9;

    color:#475467;

}

.tab-content.active{

    display:block;

}


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

.tab-content p{

    margin-bottom:16px;

}

.tab-content ul{

    padding-left:20px;

    margin-bottom:16px;

}

.tab-content li{

    margin-bottom:8px;

}


/*=========================================================
    SPECIFICATION TABLE
=========================================================*/

.specification-table{

    width:100%;

    border-collapse:collapse;

}

.specification-table tr{

    border-bottom:1px solid #F2F4F7;

}

.specification-table tr:last-child{

    border-bottom:none;

}

.specification-table td{

    padding:14px 0;

    font-size:14px;

}

.specification-table td:first-child{

    width:220px;

    color:#667085;

    font-weight:500;

}

.specification-table td:last-child{

    color:#111827;

    font-weight:600;

}


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

@media(max-width:768px){

    .product-description-card{

        padding:20px;

    }

    .description-tabs{

        gap:20px;

    }

    .tab-btn{

        font-size:15px;

    }

    .specification-table td{

        display:block;

        width:100%;

        padding:8px 0;

    }

}
/* =========================================================
   PRODUCT SPECIFICATIONS
   ========================================================= */

.product-specifications-section {
    margin-top: 30px;
}

.product-specifications-card {
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(15, 23, 42, .06);
    padding: 30px;
}

.product-specifications-header {
    margin-bottom: 20px;
}

.product-specifications-header h3 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #111827;
}

.product-specifications-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid #e5e7eb;
}

.product-specification-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 14px 16px;
    border-bottom: 1px solid #e5e7eb;
}

.product-specification-item:nth-child(odd) {
    border-right: 1px solid #e5e7eb;
}

.product-specification-label {
    color: #6b7280;
    font-size: 14px;
    font-weight: 500;
}

.product-specification-value {
    color: #111827;
    font-size: 14px;
    font-weight: 600;
    text-align: right;
}

@media (max-width: 768px) {

    .product-specifications-section {
        margin-top: 20px;
    }

    .product-specifications-card {
        padding: 20px;
        border-radius: 16px;
    }

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

    .product-specification-item:nth-child(odd) {
        border-right: none;
    }

    .product-specification-item {
        padding: 12px 0;
    }

}

/* =========================================================
   COMPACT PRODUCT INFO CARD
   Match information card height to product gallery
   ========================================================= */

@media (min-width: 992px) {

    /*
     * Make gallery and information card stretch
     * to the same height.
     */
    .product-top {
        align-items: stretch;
    }

    .product-top > .product-gallery,
    .product-top > .product-info {
        height: 100%;
        box-sizing: border-box;
    }

    /*
     * Compact information card.
     */
    .product-info {
        padding: 18px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    /*
     * Reduce title spacing.
     */
    .product-info .info-title {
        font-size: 22px;
        line-height: 1.25;
        margin-bottom: 8px;
    }

    /*
     * Reduce category spacing.
     */
    .product-info .info-category {
        margin-bottom: 8px;
        padding: 5px 11px;
    }

    /*
     * Reduce price spacing.
     */
    .product-info .info-price {
        margin-bottom: 8px;
    }

    /*
     * Reduce meta spacing.
     */
    .product-info .product-meta {
        margin-bottom: 8px;
    }

    /*
     * Compact specification rows.
     */
    .product-info .product-specs {
        margin-top: 4px;
    }

    .product-info .spec-row {
        padding: 5px 0;
        min-height: 0;
        line-height: 1.25;
    }

    /*
     * Keep action area compact.
     */
    .product-info .product-actions {
        margin-top: auto;
    }

    .product-info .product-divider {
        margin: 9px 0;
    }

    .product-info .btn-inquiry {
        margin-top: 8px;
    }

    .product-info .product-extra-actions {
        margin-top: 8px;
    }

}


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

@media (max-width: 991px) {

    .product-info {
        height: auto;
    }

}