/* =========================================================
   Item page – trust redesign (template/item-details/item-details.php)
   Everything is scoped under .pd-page and prefixed pd- so it never collides
   with Bootstrap / style.css (.card, .btn, .badge, .alert, .breadcrumb …).
   Supplier state is ONE class on .pd-page: pd-verified / pd-unverified.
   Served via base_url() (ships with the code deploy, not the CDN).
   ========================================================= */
.pd-page {
    --pd-navy: #0D1B36; --pd-slate: #5F6973; --pd-text: #344054; --pd-muted: #98A2B3;
    --pd-blue: #2563EB; --pd-blue-soft: #F2F6FE; --pd-blue-line: #D6E2FB;
    --pd-yellow: #F9C909; --pd-red: #C74A34;
    --pd-bg: #F2F4F7; --pd-card: #FFFFFF; --pd-line: #E4E7EC; --pd-input-line: #D0D5DD; --pd-tile: #F7F8FA;
    --pd-green: #15803D; --pd-green-soft: #E8F7EE;
    --pd-amber: #B45309; --pd-amber-text: #92400E; --pd-amber-soft: #FFF7E8; --pd-amber-line: #F5C26B;
    --pd-gold-text: #8A6A00; --pd-gold-soft: #FEF3C7;
    --pd-radius: 16px;
    background: var(--pd-bg);
    color: var(--pd-navy);
    font-family: 'Poppins', Inter, system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    padding-bottom: 8px;
}
.pd-page *, .pd-page *::before, .pd-page *::after { box-sizing: border-box; }
.pd-page a { color: inherit; text-decoration: none; }
.pd-page a:hover { text-decoration: none; }
.pd-page svg { flex-shrink: 0; }
.pd-page h1, .pd-page h2, .pd-page h3, .pd-page h4, .pd-page p, .pd-page ul, .pd-page ol { margin: 0; }
.pd-page ul { padding: 0; }
.pd-wrap { max-width: 1240px; margin: 0 auto; padding: 0 16px; }

/* Scenario switching */
.pd-verified .pd-only-unverified { display: none !important; }
.pd-unverified .pd-only-verified { display: none !important; }

/* Badges & buttons */
.pd-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 18px; }
.pd-badge.green { background: var(--pd-green-soft); color: var(--pd-green); }
.pd-badge.gold { background: var(--pd-gold-soft); color: var(--pd-gold-text); }
.pd-badge.amber { background: #FFF4E5; color: var(--pd-amber); }
.pd-badge.grey { background: var(--pd-bg); color: var(--pd-slate); }
.pd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; border-radius: 8px; font-weight: 600; font-size: 14px; line-height: 20px; transition: .15s; border: 1px solid transparent; cursor: pointer; font-family: inherit; }
.pd-btn.primary { background: var(--pd-blue); color: #fff !important; }
.pd-btn.primary:hover { background: #1D4FD8; }
.pd-btn.secondary { background: #fff; color: var(--pd-blue) !important; border-color: var(--pd-blue); }
.pd-btn.secondary:hover { background: var(--pd-blue-soft); }
.pd-btn.ghost { background: var(--pd-bg); color: var(--pd-navy) !important; }
.pd-btn.ghost:hover { background: #E4E7EC; }
.pd-btn.block { width: 100%; }
.pd-link { display: inline-flex; align-items: center; gap: 6px; color: var(--pd-blue) !important; font-weight: 600; font-size: 13px; }

/* Breadcrumb */
.pd-crumb { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; padding: 20px 0 16px; font-size: 13px; color: var(--pd-slate); list-style: none; }
.pd-crumb li { display: flex; align-items: center; gap: 6px; }
.pd-crumb svg { color: var(--pd-muted); }
.pd-crumb a:hover { color: var(--pd-blue); }
.pd-crumb li:last-child a { color: var(--pd-navy); font-weight: 500; }

/* Layout */
.pd-main { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.pd-col { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.pd-card { background: var(--pd-card); border: 1px solid var(--pd-line); border-radius: var(--pd-radius); }
.pd-sticky { position: sticky; top: 150px; }

/* Product summary */
.pd-summary { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 28px; padding: 24px; }
.pd-gallery { position: relative; min-width: 0; }
.pd-gallery > .pd-badge { position: absolute; top: 16px; left: 16px; z-index: 2; }
.pd-gallery .slider-for .produc_img { position: relative; aspect-ratio: 1 / 1; height: auto !important; width: 100%; background: var(--pd-tile) !important; border-radius: 12px; display: flex !important; align-items: center; justify-content: center; overflow: hidden; }
.pd-gallery .slider-for .produc_img img { max-width: 85%; max-height: 85%; width: auto !important; height: auto; object-fit: contain; margin: auto; }
.pd-gallery .slider-for .produc_img iframe { width: 100%; height: 100%; border: 0; }
.pd-gallery .slider-for .produc_img > a { position: absolute; right: 16px; bottom: 16px; }
.pd-gallery .slider-for .produc_img > a i { position: static !important; width: 40px; height: 40px; border-radius: 50%; background: #fff; border: 1px solid var(--pd-line) !important; display: flex; align-items: center; justify-content: center; color: var(--pd-navy); font-size: 16px; }
.pd-gallery .slider-nav { margin-top: 12px !important; position: relative; padding: 0 28px; }
.pd-gallery .slider-nav .item { padding: 0 5px; background: transparent !important; outline: none; }
.pd-gallery .slider-nav .small_products { width: 100% !important; max-width: 72px; height: auto !important; aspect-ratio: 1 / 1; border-radius: 10px; background: var(--pd-tile); border: 1px solid var(--pd-line) !important; overflow: hidden; cursor: pointer; }
.pd-gallery .slider-nav .small_products img { width: auto !important; height: auto !important; max-width: 80%; max-height: 80%; object-fit: contain; }
.pd-gallery .slider-nav .slick-current .small_products { border: 2px solid var(--pd-blue) !important; }
.pd-gallery .slider-nav .slide-arrow { top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; background: #fff !important; z-index: 2; color: var(--pd-slate); }
.pd-gallery .slider-nav .prev-arrow { left: 0; }
.pd-gallery .slider-nav .next-arrow { right: 0; }

.pd-info { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.pd-eyebrow { font-size: 11px; font-weight: 600; color: var(--pd-blue); letter-spacing: .06em; text-transform: uppercase; }
.pd-info h1 { font-size: 26px; line-height: 34px; font-weight: 600; color: var(--pd-navy); word-break: break-word; }
.pd-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 13px; color: var(--pd-slate); }
.pd-meta .dot { color: var(--pd-muted); }

.pd-price-box { padding: 16px; border-radius: 12px; background: var(--pd-blue-soft); border: 1px solid var(--pd-blue-line); display: flex; flex-direction: column; gap: 4px; }
.pd-price-box .pd-price { font-size: 20px; font-weight: 600; color: var(--pd-navy); }
.pd-price-box .pd-price-off { font-size: 13px; font-weight: 500; }
.pd-price-box .pd-price-off b { color: var(--pd-red); }
.pd-price-box p { font-size: 13px; color: var(--pd-slate); line-height: 20px; }
.pd-price-box .in { color: var(--pd-green); font-weight: 600; }
.pd-price-box .out { color: var(--pd-red); font-weight: 600; }

.pd-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pd-fact { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--pd-line); border-radius: 10px; min-width: 0; }
.pd-fact .ic { width: 32px; height: 32px; border-radius: 8px; background: var(--pd-bg); display: flex; align-items: center; justify-content: center; color: var(--pd-blue); flex-shrink: 0; }
.pd-fact small { display: block; font-size: 11px; color: var(--pd-slate); }
.pd-fact b { font-size: 14px; font-weight: 600; word-break: break-word; }

.pd-offers { padding: 12px 14px; border-radius: 10px; background: #FFF4F2; border: 1px solid #F6CFC7; }
.pd-offers h3 { font-size: 13px; font-weight: 600; color: var(--pd-red); margin-bottom: 6px; }
.pd-offers li { list-style: none; display: flex; gap: 8px; font-size: 13px; color: var(--pd-text); margin-bottom: 4px; }
.pd-offers li svg { color: var(--pd-red); margin-top: 3px; }

.pd-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.pd-actions .btn-addtowishlist.fav svg { color: var(--pd-red); fill: var(--pd-red); }
/* needShare renders its own trigger inside #share-product */
.pd-share { position: relative; }
.pd-share #share-product { position: static; }
.pd-share .need-share-button_button { position: absolute !important; inset: 0; width: 100% !important; height: 100% !important; opacity: 0; cursor: pointer; z-index: 1; }
.pd-share .need-share-button_dropdown { z-index: 5; }

/* Protection */
.pd-protect { padding: 24px; }
.pd-protect-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.pd-protect-head .ic { width: 44px; height: 44px; border-radius: 50%; background: var(--pd-navy); color: var(--pd-yellow); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pd-protect-head h2 { font-size: 18px; font-weight: 600; color: var(--pd-navy); }
.pd-protect-head p { font-size: 13px; color: var(--pd-slate); }
.pd-protect-head .pd-link { margin-left: auto; white-space: nowrap; }
.pd-protect.warn { border-color: var(--pd-amber-line); background: linear-gradient(180deg, var(--pd-amber-soft) 0, #fff 120px); }
.pd-protect.warn .pd-protect-head .ic { background: var(--pd-amber); color: #fff; }
.pd-protect.warn .pd-protect-head h2 { color: var(--pd-amber-text); }
.pd-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.pd-step { background: var(--pd-tile); border-radius: 12px; padding: 16px; display: flex; flex-direction: column; gap: 8px; }
.pd-step svg { color: var(--pd-blue); }
.pd-step h3 { font-size: 14px; font-weight: 600; color: var(--pd-navy); }
.pd-step p { font-size: 12px; line-height: 18px; color: var(--pd-slate); }

/* Details / tabs (Bootstrap tabs, restyled) */
.pd-tabs-card .nav-tabs { display: flex; flex-wrap: nowrap; gap: 28px; padding: 0 24px; margin: 0; border-bottom: 1px solid var(--pd-line); overflow-x: auto; list-style: none; }
.pd-tabs-card .nav-tabs .nav-item { margin: 0 !important; }
.pd-tabs-card .nav-tabs .nav-link { display: block; padding: 16px 0 14px; margin: 0 0 -1px; color: var(--pd-slate); font-size: 14px; font-weight: 400; background: none !important; border: none !important; border-bottom: 2px solid transparent !important; border-radius: 0; white-space: nowrap; }
.pd-tabs-card .nav-tabs .nav-link.active { color: var(--pd-blue); font-weight: 600; border-bottom-color: var(--pd-blue) !important; }
.pd-tabs-card .tab-pane { border: none !important; }
.pd-tab-body { padding: 24px; display: flex; flex-direction: column; gap: 20px; }
.pd-tab-body h3 { font-size: 16px; font-weight: 600; color: var(--pd-navy); }
.pd-tab-body hr { display: none; }
.pd-spec { width: 100%; border-collapse: separate; border-spacing: 0; border: 1px solid var(--pd-line); border-radius: 10px; overflow: hidden; font-size: 13px; }
.pd-spec td { padding: 12px 16px; vertical-align: top; border: none; }
.pd-spec tr:nth-child(odd) { background: var(--pd-tile); }
.pd-spec td:first-child { width: 220px; color: var(--pd-slate); }
.pd-spec td:last-child { font-weight: 500; color: var(--pd-navy); }
.pd-spec ol { float: none !important; margin: 0; padding-left: 18px; }
.pd-desc { color: var(--pd-text); line-height: 22px; overflow-wrap: anywhere; }
.pd-desc img { max-width: 100%; height: auto; }
.pd-desc table { max-width: 100%; }

/* RFQ */
.pd-rfq { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.pd-rfq h2 { font-size: 18px; font-weight: 600; color: var(--pd-navy); }
.pd-rfq .sub { font-size: 12px; color: var(--pd-slate); }
.pd-field > label { display: block; font-size: 12px; font-weight: 500; color: var(--pd-text); margin-bottom: 6px; }
.pd-input { display: flex; align-items: center; border: 1px solid var(--pd-input-line); border-radius: 8px; padding: 0 12px; height: 44px; background: #fff; position: relative; }
.pd-input select, .pd-input input { border: none !important; outline: none; font: inherit; flex: 1; background: transparent; min-width: 0; height: 100%; box-shadow: none !important; }
.pd-input .nice-select { border: none !important; padding-left: 0 !important; width: 100%; height: 42px; line-height: 42px; background: transparent; float: none; font-size: 14px; }
.pd-input .nice-select .list { width: 100%; max-height: 260px; overflow-y: auto; }
/* quantity: keeps .qty-input + i.less / i.more for item-details.js */
.pd-qty.qty-input { padding: 0 6px; }
.pd-qty.qty-input input.order-quantity { text-align: center; font-weight: 500; font-size: 15px; border: none !important; width: 100%; }
.pd-qty.qty-input i { position: static !important; width: 30px; height: 30px !important; display: flex !important; align-items: center; justify-content: center; color: var(--pd-slate); border-radius: 6px; cursor: pointer; padding: 0 !important; margin: 0 !important; font-size: 18px; }
.pd-qty.qty-input i:hover { background: var(--pd-bg); }
.pd-rfq .pd-btn span { padding: 0 !important; }
.pd-note { display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: 10px; background: var(--pd-tile); color: var(--pd-slate); font-size: 12px; line-height: 18px; }
.pd-note.warn { background: var(--pd-amber-soft); color: var(--pd-amber-text); }
.pd-note.warn svg { color: var(--pd-amber); }
/* RFQ result blocks toggled by the page JS */
.pd-rfq .ruquest_form_main2, .pd-rfq .ruquest_form_main3 { padding: 14px; border-radius: 10px; background: var(--pd-green-soft); text-align: center; }
.pd-rfq .ruquest_form_main3 { background: var(--pd-amber-soft); }
.pd-rfq .text_1 { font-weight: 600; margin-top: 4px; }
.pd-rfq .text_2 { font-size: 13px; color: var(--pd-text); }
/* "Sell Similar" partial (copy-product-btn.php) comes with Bootstrap col classes */
.pd-ss > div { padding: 0 !important; margin: 0 !important; max-width: none; flex: none; }
.pd-ss a { display: flex !important; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px !important; border-radius: 8px !important; font-size: 14px !important; background: var(--pd-bg) !important; border: 1px solid transparent !important; color: var(--pd-navy) !important; }
.pd-ss a:hover { background: #E4E7EC !important; }
.pd-ss a span { padding: 0 !important; }

/* Supplier card */
.pd-supplier { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.pd-supplier .label { font-size: 12px; font-weight: 500; color: var(--pd-slate); }
.pd-supplier .head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.pd-supplier .avatar { width: 48px; height: 48px; border-radius: 50%; background: var(--pd-navy); color: #fff; font-weight: 600; font-size: 16px; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.pd-supplier .avatar.img { background: #fff; border: 1px solid var(--pd-line); }
.pd-supplier .avatar img { width: 100%; height: 100%; object-fit: contain; }
.pd-supplier .name { font-size: 16px; font-weight: 600; color: var(--pd-navy); line-height: 22px; word-break: break-word; }
.pd-supplier .name a:hover { color: var(--pd-blue); }
.pd-supplier .loc { font-size: 12px; color: var(--pd-slate); display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.pd-supplier .loc .flag { margin: 0 2px 0 0; }
.pd-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.pd-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 8px; }
.pd-stat { background: var(--pd-tile); border-radius: 8px; padding: 10px 6px; text-align: center; }
.pd-stat b { display: block; font-size: 15px; font-weight: 600; color: var(--pd-navy); }
.pd-stat small { font-size: 11px; color: var(--pd-slate); }
.pd-checks h4 { font-size: 12px; font-weight: 600; color: var(--pd-slate); margin-bottom: 10px; }
.pd-checks li { list-style: none; display: flex; align-items: center; gap: 10px; font-size: 13px; margin-bottom: 10px; }
.pd-checks .tick { width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.pd-checks .done .tick { background: var(--pd-green-soft); color: var(--pd-green); }
.pd-checks .pending { color: var(--pd-slate); }
.pd-checks .pending .tick { background: var(--pd-bg); color: var(--pd-muted); }
.pd-supplier .btns { display: flex; flex-direction: column; gap: 8px; }
/* the chat button's inner HTML is swapped by openChat()/closeChat() with .text-white spans */
.pd-supplier .chat-with-supplier-btn { width: 100%; }
.pd-supplier .chat-with-supplier-btn .text-white { color: inherit !important; padding: 0 !important; }
.pd-nostock p { padding: 14px; border-radius: 10px; background: var(--pd-blue-soft); font-size: 13px; color: var(--pd-text); }

/* Similar products */
.pd-similar { padding: 40px 0 24px; }
.pd-similar-head { display: flex; align-items: center; margin-bottom: 20px; }
.pd-similar-head h2 { font-size: 20px; font-weight: 600; color: var(--pd-navy); }
.pd-similar-head .pd-link { margin-left: auto; }
.pd-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.pd-pcard { background: #fff; border: 1px solid var(--pd-line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transition: .15s; }
.pd-pcard:hover { box-shadow: 0 6px 20px rgba(13, 27, 54, .08); transform: translateY(-2px); }
.pd-pcard .img { height: 150px; background: var(--pd-bg); display: flex; align-items: center; justify-content: center; }
.pd-pcard .img img { max-width: 80%; max-height: 80%; object-fit: contain; }
.pd-pcard .body { padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.pd-pcard .moq { font-size: 11px; color: var(--pd-slate); }
.pd-pcard .title { font-size: 13px; font-weight: 500; line-height: 18px; color: var(--pd-navy); }
.pd-pcard .price { font-size: 13px; font-weight: 600; color: var(--pd-blue); }

/* Mobile RFQ copy lives in the left column; desktop copy in the aside */
.pd-rfq-mob { display: none; }

/* RTL */
[dir="rtl"] .pd-page .pd-crumb svg, [dir="rtl"] .pd-page .pd-link svg, [dir="rtl"] .pd-page .pd-btn .pd-arrow { transform: scaleX(-1); }
[dir="rtl"] .pd-gallery > .pd-badge { left: auto; right: 16px; }
[dir="rtl"] .pd-protect-head .pd-link, [dir="rtl"] .pd-similar-head .pd-link { margin-left: 0; margin-right: auto; }

/* Responsive */
@media (max-width: 1100px) {
    .pd-main { grid-template-columns: 1fr; }
    .pd-sticky { position: static; }
    .pd-summary { grid-template-columns: 1fr; }
    .pd-gallery { max-width: 480px; width: 100%; margin: 0 auto; }
    .pd-grid { grid-template-columns: repeat(3, 1fr); }
    .pd-rfq-desk { display: none; }
    .pd-rfq-mob { display: flex; }
}
@media (max-width: 720px) {
    .pd-summary, .pd-protect, .pd-rfq { padding: 16px; }
    .pd-info h1 { font-size: 21px; line-height: 28px; }
    .pd-steps { grid-template-columns: 1fr 1fr; }
    .pd-facts { grid-template-columns: 1fr; }
    .pd-grid { grid-template-columns: repeat(2, 1fr); }
    .pd-spec td:first-child { width: 45%; }
    .pd-protect-head { flex-wrap: wrap; }
    .pd-protect-head .pd-link { margin-left: 0; }
    .pd-tabs-card .nav-tabs { padding: 0 16px; gap: 20px; }
    .pd-tab-body { padding: 16px; }
}