/* ???????????????????????????????????????????????????????????
   Product Details Page  —  product-details.css
   Two-panel independent scroll layout
   Theme: #ff5e14 orange  |  #010e2a navy
??????????????????????????????????????????????????????????? */

/* ?? Two-panel scroll wrapper ???????????????????????????? */
.pd-scroll-wrapper {
    display: flex;
    gap: 0;
    height: calc(100vh - 76px);   /* 76px = fixed navbar height */
    overflow: hidden;
    background: #f8fafc;
}

/* ?? LEFT PANEL ?????????????????????????????????????????? */
.pd-left {
    flex: 1 1 0;
    min-width: 0;
    overflow-y: auto;
    padding: 32px 36px 48px;
    scroll-behavior: smooth;
}
.pd-left::-webkit-scrollbar { width: 5px; }
.pd-left::-webkit-scrollbar-track { background: transparent; }
.pd-left::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 4px; }
.pd-left::-webkit-scrollbar-thumb:hover { background: #cbd5e1; }

/* ?? RIGHT PANEL ????????????????????????????????????????? */
.pd-right {
    width: 340px;
    flex-shrink: 0;
    overflow-y: auto;
    border-left: 1px solid #e8edf2;
    background: #fff;
    scroll-behavior: smooth;
}
.pd-right::-webkit-scrollbar { width: 4px; }
.pd-right::-webkit-scrollbar-track { background: transparent; }
.pd-right::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 4px; }
.pd-right::-webkit-scrollbar-thumb:hover { background: #cbd5e1; }

/* ?? Left: Category chip ????????????????????????????????? */
.pd-cat-chip {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,94,20,.09);
    color: #ff5e14;
    border: 1px solid rgba(255,94,20,.2);
    border-radius: 20px;
    padding: 4px 14px;
    font-size: 12.5px; font-weight: 700;
    text-decoration: none;
    margin-bottom: 14px;
    transition: background .2s;
}
.pd-cat-chip:hover { background: rgba(255,94,20,.16); color: #ff5e14; }

/* ?? Left: Product Title ????????????????????????????????? */
.pd-title {
    font-size: clamp(1.4rem, 2.5vw, 2rem);
    font-weight: 800;
    color: #0f172a;
    line-height: 1.25;
    margin-bottom: 12px;
}

/* ?? Left: Short desc ???????????????????????????????????? */
.pd-short-desc {
    font-size: 15px;
    color: #64748b;
    line-height: 1.7;
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid #f1f5f9;
}

/* ── Left: Main Image ──────────────────────────────────── */
.pd-main-image-wrap {
    border-radius: 14px;
    overflow: hidden;
    background: #f1f5f9;
    margin-bottom: 12px;
    aspect-ratio: 4/3;
    position: relative;
}
.pd-main-image-wrap img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .4s ease;
}
.pd-main-image-wrap:hover img { transform: scale(1.03); }

/* ── Inner split inside left panel ────────────────────── */
.pd-inner-split {
    display: flex;
    gap: 28px;
    align-items: flex-start;
    margin-bottom: 0;
}
.pd-inner-content {
    flex: 1 1 0;
    min-width: 0;
}
.pd-inner-image {
    width: 340px;
    flex-shrink: 0;
    position: sticky;
    top: 16px;
}

/* ── Quick info badges under image ─────────────────────── */
.pd-img-badges {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 10px;
}
.pd-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 11.5px; font-weight: 700;
}
.pd-badge.featured {
    background: rgba(245,158,11,.1);
    color: #d97706;
    border: 1px solid rgba(245,158,11,.25);
}
.pd-badge.category {
    background: rgba(255,94,20,.08);
    color: #ff5e14;
    border: 1px solid rgba(255,94,20,.2);
}

/* ?? Left: Gallery thumbnails ???????????????????????????? */
.pd-gallery-thumbs {
    display: flex; gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 24px;
    scrollbar-width: thin;
}
.pd-gallery-thumbs::-webkit-scrollbar { height: 4px; }
.pd-gallery-thumbs::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 4px; }

.pd-thumb {
    flex-shrink: 0;
    width: 72px; height: 52px;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color .2s, transform .2s;
}
.pd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-thumb.active, .pd-thumb:hover { border-color: #ff5e14; transform: translateY(-2px); }

/* ?? Left: Content Tabs ?????????????????????????????????? */
.pd-tabs {
    display: flex; gap: 0;
    border-bottom: 2px solid #f1f5f9;
    margin-bottom: 24px;
}
.pd-tab-btn {
    padding: 10px 22px;
    border: none; background: transparent;
    font-size: 13.5px; font-weight: 700;
    color: #64748b; cursor: pointer;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -2px;
    transition: color .2s, border-color .2s;
    display: flex; align-items: center; gap: 6px;
}
.pd-tab-btn i { font-size: 14px; }
.pd-tab-btn:hover  { color: #ff5e14; }
.pd-tab-btn.active { color: #ff5e14; border-bottom-color: #ff5e14; }

.pd-tab-panel { display: none; }
.pd-tab-panel.active { display: block; }

/* ?? Left: Description / Features / Specs content ??????? */
.pd-content-body {
    font-size: 14.5px;
    color: #374151;
    line-height: 1.8;
}
.pd-content-body p { margin-bottom: 14px; }
.pd-content-body strong { color: #0f172a; }

/* Features — render each line as a tick item */
.pd-feature-list {
    list-style: none;
    padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 10px;
}
.pd-feature-list li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 14px; color: #374151;
}
.pd-feature-list li::before {
    content: '';
    flex-shrink: 0;
    width: 20px; height: 20px; margin-top: 1px;
    background: rgba(255,94,20,.1);
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23ff5e14' d='M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
}

/* Specifications — two-column table */
.pd-spec-table {
    width: 100%;
    border-collapse: collapse;
}
.pd-spec-table tr:nth-child(even) td { background: #f8fafc; }
.pd-spec-table td {
    padding: 9px 14px;
    font-size: 13.5px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: top;
}
.pd-spec-table td:first-child {
    font-weight: 700;
    color: #374151;
    width: 45%;
    white-space: nowrap;
}
.pd-spec-table td:last-child { color: #64748b; }
.pd-spec-table tr:last-child td { border-bottom: none; }

/* ???????????????????????????????????????????????
   SPECIFICATIONS — Enhanced Design
??????????????????????????????????????????????? */

/* Toolbar: search + copy */
.pd-spec-toolbar {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 18px; flex-wrap: wrap;
}
.pd-spec-search-wrap {
    flex: 1; min-width: 160px;
    position: relative;
}
.pd-spec-search-wrap i {
    position: absolute; left: 11px; top: 50%;
    transform: translateY(-50%);
    color: #94a3b8; font-size: 13px; pointer-events: none;
}
.pd-spec-search {
    width: 100%; padding: 8px 12px 8px 32px;
    border: 1.5px solid #e2e8f0; border-radius: 8px;
    font-size: 13px; color: #374151; background: #f8fafc;
    outline: none; transition: border-color .2s, background .2s;
}
.pd-spec-search:focus { border-color: #ff5e14; background: #fff; }
.pd-spec-search::placeholder { color: #94a3b8; }

.pd-spec-copy-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px;
    border: 1.5px solid #e2e8f0; border-radius: 8px;
    background: #fff; color: #64748b;
    font-size: 12.5px; font-weight: 600; cursor: pointer;
    transition: all .2s; white-space: nowrap;
}
.pd-spec-copy-btn:hover { border-color: #ff5e14; color: #ff5e14; background: rgba(255,94,20,.04); }
.pd-spec-copy-btn.copied { border-color: #059669; color: #059669; background: rgba(5,150,105,.06); }

.pd-spec-count {
    font-size: 12px; color: #94a3b8;
    white-space: nowrap;
}
.pd-spec-count strong { color: #ff5e14; }

/* Spec container */
.pd-spec-container { display: flex; flex-direction: column; gap: 20px; }

/* Section group */
.pd-spec-group { }

/* Section header */
.pd-spec-section-head {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 0 8px;
    margin-bottom: 4px;
    border-bottom: 2px solid #ff5e14;
}
.pd-spec-section-icon {
    width: 28px; height: 28px; border-radius: 7px;
    background: rgba(255,94,20,.1);
    display: flex; align-items: center; justify-content: center;
    color: #ff5e14; font-size: 13px; flex-shrink: 0;
}
.pd-spec-section-label {
    font-size: 12px; font-weight: 800;
    text-transform: uppercase; letter-spacing: .8px;
    color: #0f172a;
}
.pd-spec-section-count {
    margin-left: auto;
    font-size: 11px; font-weight: 700;
    background: rgba(255,94,20,.1); color: #ff5e14;
    padding: 2px 8px; border-radius: 10px;
}

/* Spec rows */
.pd-spec-row {
    display: flex; align-items: stretch;
    border-radius: 10px; overflow: hidden;
    border: 1px solid #f1f5f9;
    margin-bottom: 6px;
    transition: box-shadow .18s, border-color .18s;
}
.pd-spec-row:hover {
    border-color: #fde8dc;
    box-shadow: 0 2px 10px rgba(255,94,20,.07);
}
.pd-spec-row.hidden { display: none; }

.pd-spec-key {
    width: 44%; min-width: 120px; flex-shrink: 0;
    display: flex; align-items: center; gap: 8px;
    padding: 11px 14px;
    background: #f8fafc;
    border-right: 1px solid #f1f5f9;
    font-size: 13px; font-weight: 700; color: #374151;
}
.pd-spec-key-icon {
    width: 22px; height: 22px; border-radius: 5px;
    background: rgba(255,94,20,.08);
    display: flex; align-items: center; justify-content: center;
    color: #ff5e14; font-size: 11px; flex-shrink: 0;
}
.pd-spec-val {
    flex: 1; display: flex; align-items: center;
    padding: 11px 14px;
    background: #fff;
    font-size: 13.5px; font-weight: 600; color: #0f172a;
}

/* No results */
.pd-spec-no-results {
    text-align: center; padding: 32px 0;
    color: #94a3b8; font-size: 13px;
    display: none;
}
.pd-spec-no-results i { font-size: 1.8rem; display: block; margin-bottom: 8px; color: #e2e8f0; }

/* ?? Left: CTA buttons ??????????????????????????????????? */
.pd-cta-bar {
    display: flex; gap: 12px; flex-wrap: wrap;
    padding-top: 28px;
    border-top: 1px solid #f1f5f9;
    margin-top: 28px;
}
.pd-btn-quote {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 28px;
    background: linear-gradient(135deg, #ff5e14, #ff7b3d);
    color: #fff; border: none; border-radius: 10px;
    font-size: 14px; font-weight: 700; text-decoration: none;
    box-shadow: 0 4px 14px rgba(255,94,20,.3);
    transition: transform .2s, box-shadow .2s;
}
.pd-btn-quote:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(255,94,20,.4); color: #fff; }

.pd-btn-whatsapp {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 12px 28px;
    background: #25d366;
    color: #fff; border: none; border-radius: 10px;
    font-size: 14px; font-weight: 700; text-decoration: none;
    box-shadow: 0 4px 14px rgba(37,211,102,.28);
    transition: transform .2s, box-shadow .2s;
}
.pd-btn-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(37,211,102,.38); color: #fff; }

/* ??????????????????????????????????????
   RIGHT PANEL  —  Related Products
?????????????????????????????????????? */
.pd-related-header {
    position: sticky; top: 0; z-index: 10;
    background: #fff;
    padding: 18px 20px 14px;
    border-bottom: 1px solid #f1f5f9;
}
.pd-related-title {
    font-size: 14px; font-weight: 800;
    color: #0f172a; letter-spacing: .3px;
    display: flex; align-items: center; gap: 8px;
}
.pd-related-title i { color: #ff5e14; font-size: 15px; }
.pd-related-sub {
    font-size: 11.5px; color: #94a3b8; margin-top: 2px;
}

/* ?? Related product card ???????????????????????????????? */
.pd-rel-card {
    display: flex; gap: 12px;
    align-items: flex-start;
    flex-direction: column;
    padding: 14px 16px;
    border-bottom: 1px solid #f8fafc;
    text-decoration: none;
    transition: background .18s;
    cursor: pointer;
}
.pd-rel-card:hover { background: #fff8f5; text-decoration: none; }
.pd-rel-card.current { background: rgba(255,94,20,.05); pointer-events: none; }

/* Row inside card: thumb + info side by side */
.pd-rel-top {
    display: flex; gap: 12px;
    align-items: flex-start;
    width: 100%;
}

.pd-rel-thumb {
    flex-shrink: 0;
    width: 80px; height: 58px;
    border-radius: 8px;
    overflow: hidden;
    background: #f1f5f9;
    border: 1.5px solid #f1f5f9;
}
.pd-rel-thumb img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}

.pd-rel-info { flex: 1; min-width: 0; }
.pd-rel-name {
    font-size: 13px; font-weight: 700;
    color: #0f172a;
    line-height: 1.35;
    margin-bottom: 5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pd-rel-card:hover .pd-rel-name { color: #ff5e14; }

.pd-rel-short {
    font-size: 11.5px; color: #94a3b8;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 6px;
}
.pd-rel-link {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%;
    margin-top: 8px;
    padding: 7px 0;
    border-radius: 7px;
    border: 1.5px solid rgba(255,94,20,.25);
    background: rgba(255,94,20,.05);
    font-size: 12px; font-weight: 700;
    color: #ff5e14;
    transition: background .18s, border-color .18s;
}
.pd-rel-card:hover .pd-rel-link,
.card:hover .pd-rel-link {
    background: #ff5e14;
    border-color: #ff5e14;
    color: #fff;
}

/* ?? Empty related ??????????????????????????????????????? */
.pd-related-empty {
    padding: 40px 20px;
    text-align: center;
    color: #94a3b8;
    font-size: 13px;
}
.pd-related-empty i { font-size: 2rem; display: block; margin-bottom: 8px; }

/* ??????????????????????????????????????
   RESPONSIVE
?????????????????????????????????????? */
@media (max-width: 991.98px) {
    .pd-scroll-wrapper {
        flex-direction: column;
        height: auto;
        overflow: visible;
    }
    .pd-left {
        overflow-y: visible;
        height: auto;
        padding: 24px 20px 32px;
    }
    .pd-right {
        width: 100%;
        border-left: none;
        border-top: 2px solid #f1f5f9;
        height: auto;
        overflow-y: visible;
        max-height: none;
    }
    .pd-related-header { position: static; }
    .pd-inner-split {
        flex-direction: column-reverse;
    }
    .pd-inner-image {
        width: 100%;
        position: static;
    }
    .pd-main-image-wrap { aspect-ratio: 16/9; }
}

@media (max-width: 575.98px) {
    .pd-left  { padding: 18px 14px 28px; }
    .pd-title { font-size: 1.3rem; }
    .pd-tab-btn { padding: 9px 14px; font-size: 12.5px; }
    .pd-cta-bar { flex-direction: column; }
    .pd-btn-quote, .pd-btn-whatsapp { justify-content: center; }
}