/* =============================================================
   product-detail.css  — EJB Home Lightings
   Connected to: product-detail.php  |  $page_css = 'product-detail'
   Covers: gallery layout, thumbnails, product info panel,
           modal lightbox with nav arrows, responsive rules
============================================================= */

/* ---- LAYOUT ---- */
.pd-wrap{max-width:1100px;margin:0 auto;padding:40px 24px 80px;}
.pd-breadcrumb{font-size:.82rem;color:var(--text-muted);margin-bottom:28px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.pd-breadcrumb a{color:var(--text-muted);text-decoration:none;transition:color .2s;}
.pd-breadcrumb a:hover{color:var(--orange);}
.bc-current{color:var(--orange);font-weight:500;}

.pd-main{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:start;margin-bottom:70px;}

/* ---- GALLERY ---- */
.pd-gallery{display:flex;flex-direction:column;gap:12px;}

.gallery-main{
    border-radius:12px;overflow:hidden;border:1px solid var(--border);
    aspect-ratio:4/3;background:var(--light);
    display:flex;align-items:center;justify-content:center;
    position:relative;cursor:zoom-in;
}
.gallery-main-img{
    width:100%;height:100%;object-fit:cover;
    transition:transform .35s ease;
    display:block;
}
.gallery-main:hover .gallery-main-img{transform:scale(1.04);}
.gallery-main-video{width:100%;height:100%;object-fit:contain;cursor:default;}
.gallery-placeholder{font-size:6rem;color:var(--border);}
.gallery-zoom-hint{
    position:absolute;bottom:10px;right:10px;
    background:rgba(0,0,0,.5);color:#fff;
    font-size:.7rem;padding:4px 10px;border-radius:20px;
    pointer-events:none;
    transition:opacity .3s;
}
.gallery-main:hover .gallery-zoom-hint{opacity:0;}

/* Thumbnails */
.gallery-thumbs{display:flex;gap:10px;flex-wrap:wrap;}
.thumb{
    width:80px;height:60px;border-radius:8px;overflow:hidden;
    border:2px solid var(--border);cursor:pointer;transition:all .22s;
    background:var(--light);flex-shrink:0;
}
.thumb:hover{border-color:var(--orange);}
.thumb-active{border-color:var(--orange)!important;box-shadow:0 0 0 2px rgba(232,116,26,.25);}
.thumb img{width:100%;height:100%;object-fit:cover;}
.thumb-video-placeholder{
    width:100%;height:100%;background:var(--navy);
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
}
.thumb-play{font-size:1.2rem;color:var(--orange);}
.thumb-vid-label{font-size:.55rem;color:rgba(255,255,255,.6);letter-spacing:.05em;text-transform:uppercase;}

/* ---- PRODUCT INFO ---- */
.pd-cat-badge{
    display:inline-block;background:var(--orange-bg);color:var(--orange);
    font-size:.72rem;font-weight:600;padding:4px 12px;border-radius:20px;
    letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px;
}
.pd-name{font-family:'Poppins',sans-serif;font-size:clamp(1.4rem,3vw,2rem);font-weight:700;color:var(--navy);margin-bottom:18px;line-height:1.25;}
.pd-price-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:16px;}
.pd-price{font-family:'Poppins',sans-serif;font-size:2rem;font-weight:700;color:var(--orange);}
.pd-price-quote{font-size:1rem;color:var(--text-muted);font-style:italic;}
.pd-stock{font-size:.82rem;padding:6px 14px;border-radius:var(--radius);}
.pd-stock.in{background:#f0fdf4;border:1px solid #86efac;color:#166534;}
.pd-stock.out{background:#fef2f2;border:1px solid #fca5a5;color:#991b1b;}
.pd-divider{height:1px;background:var(--border);margin:20px 0;}
.pd-desc{color:var(--text-muted);font-size:.93rem;line-height:1.9;margin-bottom:20px;}
.pd-specs{background:var(--light);border:1px solid var(--border);border-left:3px solid var(--orange);border-radius:var(--radius);padding:14px 18px;margin-bottom:20px;}
.pd-specs-label{font-size:.75rem;font-weight:600;color:var(--navy);text-transform:uppercase;letter-spacing:.06em;margin-bottom:6px;}
.pd-specs-val{font-size:.87rem;color:var(--text-muted);}
.pd-media-info{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px;}
.media-badge{background:rgba(27,42,74,.08);color:var(--navy);font-size:.75rem;font-weight:500;padding:4px 12px;border-radius:20px;}
.pd-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
.pd-btn-main{flex:1;justify-content:center;min-width:140px;}
.pd-btn-sec{flex:1;justify-content:center;min-width:140px;}
.pd-back-link a{font-size:.82rem;color:var(--text-muted);text-decoration:none;transition:color .2s;}
.pd-back-link a:hover{color:var(--orange);}

/* ---- RELATED ---- */
.pd-related{border-top:1px solid var(--border);padding-top:48px;}
.pd-related-title{font-family:'Poppins',sans-serif;font-size:1.4rem;font-weight:700;color:var(--navy);margin-bottom:24px;}

/* ================================================================
   MODAL LIGHTBOX
================================================================ */
.modal-overlay{
    position:fixed;inset:0;
    background:rgba(5,10,22,.92);
    display:flex;align-items:center;justify-content:center;
    z-index:9999;
    opacity:0;pointer-events:none;
    transition:opacity .25s ease;
    backdrop-filter:blur(6px);
    padding:20px;
}
.modal-overlay.active{opacity:1;pointer-events:all;}

.modal-box{
    position:relative;
    max-width:90vw;max-height:90vh;
    display:flex;flex-direction:column;align-items:center;
    animation:modalIn .28s ease;
}
@keyframes modalIn{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}

.modal-close{
    position:absolute;top:-42px;right:0;
    background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
    color:#fff;font-size:1rem;width:36px;height:36px;border-radius:50%;
    cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;
    z-index:10;
}
.modal-close:hover{background:var(--orange);border-color:var(--orange);}

.modal-nav{
    position:absolute;top:50%;transform:translateY(-50%);
    background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
    color:#fff;font-size:2rem;width:46px;height:46px;
    border-radius:50%;cursor:pointer;transition:all .2s;
    display:flex;align-items:center;justify-content:center;
    z-index:10;line-height:1;
}
.modal-nav:hover{background:var(--orange);border-color:var(--orange);}
.modal-prev{left:-60px;}
.modal-next{right:-60px;}
.modal-nav.hidden{display:none;}

.modal-content{
    display:flex;align-items:center;justify-content:center;
    max-width:85vw;max-height:80vh;
}
.modal-img{
    max-width:85vw;max-height:80vh;
    object-fit:contain;border-radius:8px;
    box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.modal-vid{
    max-width:85vw;max-height:80vh;
    border-radius:8px;
    box-shadow:0 20px 60px rgba(0,0,0,.6);
    background:#000;
}

.modal-counter{
    margin-top:14px;font-size:.78rem;color:rgba(255,255,255,.5);
    letter-spacing:.08em;
}

/* ================================================================
   RESPONSIVE
================================================================ */
@media(max-width:800px){
    .pd-main{grid-template-columns:1fr;gap:32px;}
    .pd-gallery{order:1;}
    .pd-info{order:2;}
    .pd-price{font-size:1.6rem;}
    .modal-prev{left:-44px;}.modal-next{right:-44px;}
    .modal-nav{width:36px;height:36px;font-size:1.5rem;}
}
@media(max-width:500px){
    .pd-wrap{padding:24px 16px 60px;}
    .gallery-main{aspect-ratio:1/1;}
    .thumb{width:60px;height:46px;}
    .pd-actions{flex-direction:column;}
    .modal-prev{left:-36px;width:32px;height:32px;font-size:1.2rem;}
    .modal-next{right:-36px;width:32px;height:32px;font-size:1.2rem;}
    .modal-close{top:-36px;}
}