/* ============================================================
   PRODUCT DETAIL — Alibaba-format layout, VERDE WIRE skin
   ============================================================ */

/* ---- Breadcrumb ---- */
.pd-crumb { padding: var(--s-4) 0; font-size: var(--fs-sm); color: var(--ink-500); border-bottom: 1px solid var(--line); }
.pd-crumb a { color: var(--ink-600); }
.pd-crumb a:hover { color: var(--brand-strong); }
.pd-crumb .sep { margin: 0 0.55rem; color: var(--ink-300); }
.pd-crumb [aria-current] { color: var(--ink-800); font-weight: 600; }

/* ---- Main two-column ---- */
.pd-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(1.5rem, 4vw, 3.5rem); padding-block: var(--s-6) var(--s-8); align-items: start; }

/* ---- Gallery (left) ---- */
.pd-gallery { position: sticky; top: calc(var(--header-h) + 18px); }
.pd-stage { position: relative; aspect-ratio: 1 / 1; border: none; border-radius: var(--r-lg); overflow: hidden; background: #fff; }
.pd-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--s-3); margin-top: var(--s-4); }
.pd-thumb { aspect-ratio: 1 / 1; border: 1px solid transparent; border-radius: var(--r-md); overflow: hidden; background: var(--surface-2); cursor: pointer; padding: 0; display: grid; place-items: center; transition: border-color var(--ease) 0.2s, transform var(--ease) 0.2s; }
.pd-thumb:hover { transform: translateY(-2px); border-color: var(--red-300); }
.pd-thumb.active { border-color: var(--brand); }

/* ---- Image placeholder ---- */
.pd-img { width: 100%; height: 100%; display: grid; place-items: center; gap: 0.5rem; padding: 0; text-align: center; background: #fff; color: var(--ink-400); }
.pd-img svg { width: 26%; max-width: 96px; height: auto; color: var(--brand); opacity: 0.55; }
.pd-img span { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; }

/* ---- Info (right) ---- */
.pd-title { font-size: clamp(1.5rem, 2.4vw, 2.15rem); line-height: 1.18; color: var(--ink-900); }
.pd-keywords { margin-top: var(--s-3); color: var(--ink-500); font-size: var(--fs-base); }

.pd-rating { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-4); font-size: var(--fs-sm); color: var(--ink-600); }
.pd-stars { color: var(--warning); letter-spacing: 2px; font-size: 1.05rem; }
.pd-rating .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--line-strong); }

/* Price box */
.pd-pricebox { margin-top: var(--s-5); background: linear-gradient(180deg, var(--red-50), var(--surface)); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); box-shadow: var(--shadow-1); }
.pd-price { font-family: var(--font-display); font-weight: 700; color: var(--brand); font-size: clamp(1.55rem, 3vw, 2.15rem); line-height: 1; }
.pd-moq { margin-top: var(--s-4); font-size: var(--fs-sm); color: var(--ink-600); display: flex; align-items: center; gap: var(--s-2); }
.pd-moq svg { width: 16px; height: 16px; color: var(--brand); }

/* Key attributes grid */
.pd-attrs { margin-top: var(--s-5); display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.pd-attr { background: var(--surface); padding: 0.7rem var(--s-4); }
.pd-attr dt { font-size: var(--fs-xs); color: var(--ink-400); text-transform: uppercase; letter-spacing: 0.04em; }
.pd-attr dd { margin: 0.15rem 0 0; font-weight: 600; color: var(--ink-800); font-size: var(--fs-sm); }

/* Buy box */
.pd-buy { display: flex; gap: var(--s-3); margin-top: var(--s-5); flex-wrap: wrap; }
.pd-buy .btn { flex: 1; min-width: 170px; justify-content: center; }

/* Seller card */
.pd-seller { margin-top: var(--s-6); border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--s-5); background: var(--surface); box-shadow: var(--shadow-1); }
.pd-seller__top { display: flex; align-items: center; gap: var(--s-4); }
.pd-seller__logo { width: 56px; height: 56px; border-radius: var(--r-md); background: #fff; color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; flex: none; overflow: hidden; border: 1px solid var(--line); }
.pd-seller__logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-seller__name { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); color: var(--ink-900); }
.pd-seller__meta { font-size: var(--fs-xs); color: var(--ink-500); margin-top: 3px; }
.pd-badge-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: var(--s-3); }
.pd-badge { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--fs-xs); font-weight: 600; padding: 0.3rem 0.6rem; border-radius: var(--r-pill); background: var(--brand-soft); color: var(--brand-strong); }
.pd-badge svg { width: 13px; height: 13px; }
.pd-seller__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); margin-top: var(--s-4); text-align: center; }
.pd-seller__stats div { background: var(--surface-2); border-radius: var(--r-md); padding: var(--s-3); }
.pd-seller__stats b { display: block; color: var(--brand); font-family: var(--font-display); font-size: 1.15rem; }
.pd-seller__stats span { font-size: var(--fs-xs); color: var(--ink-500); }
.pd-seller__actions { display: flex; gap: var(--s-3); margin-top: var(--s-4); }
.pd-seller__actions .btn { flex: 1; justify-content: center; }

/* ---- Generic section ---- */
.pd-section { padding-block: var(--s-7); border-top: 1px solid var(--line); }
.pd-section > .wrap > h2 { font-size: var(--fs-xl); margin-bottom: var(--s-5); }

/* Spec table */
.pd-spectable { width: 100%; border-collapse: collapse; border: 1px solid oklch(82% 0.02 250); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 0 0 1px oklch(82% 0.02 250); }
.pd-spectable th, .pd-spectable td { padding: var(--s-4) var(--s-5); text-align: start; font-size: var(--fs-sm); border-bottom: 1px solid oklch(92% 0.015 250); vertical-align: top; }
.pd-spectable th { width: 30%; background: var(--surface-2); color: var(--ink-600); font-weight: 600; }
.pd-spectable td { color: var(--ink-800); }
.pd-spectable tr:last-child th, .pd-spectable tr:last-child td { border-bottom: none; }
.pd-spectable tr:hover td, .pd-spectable tr:hover th { background: var(--surface-3); }

/* Tabs */
.pd-tabs { display: flex; gap: var(--s-1); border-bottom: 2px solid var(--line); flex-wrap: wrap; }
.pd-tab { padding: var(--s-3) var(--s-5); background: none; border: none; font-weight: 600; font-size: var(--fs-base); color: var(--ink-600); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: color var(--ease) 0.2s, border-color var(--ease) 0.2s; }
.pd-tab:hover { color: var(--ink-900); }
.pd-tab.active { color: var(--brand-strong); border-bottom-color: var(--brand); }
.pd-panels { padding-top: var(--s-6); }
.pd-panel { display: none; }
.pd-panel.active { display: block; }
.pd-panel p { color: var(--ink-600); line-height: 1.75; margin-bottom: var(--s-4); }
.pd-panel h3 { margin: var(--s-5) 0 var(--s-3); font-size: var(--fs-lg); }
.pd-panel ul { margin: 0 0 var(--s-4); padding-inline-start: 1.2rem; color: var(--ink-600); line-height: 1.7; }
.pd-panel li { margin-bottom: 0.4rem; }

/* ---- Responsive ---- */
@media (max-width: 1023px) {
  .pd-main { grid-template-columns: 1fr; }
  .pd-gallery { position: static; }
  .pd-attrs { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .pd-thumbs { grid-template-columns: repeat(4, 1fr); }
  .pd-seller__stats { grid-template-columns: 1fr 1fr; }
  .pd-buy .btn { min-width: 100%; }
}

.pd-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pd-img img { image-rendering: auto; }

/* ---- Specs Tags (from admin specs field) ---- */
.pd-specs-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.6rem 0 0;
}
.spec-tag {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--primary, #1a73e8);
  background: rgba(26, 115, 232, 0.08);
  border: 1px solid rgba(26, 115, 232, 0.18);
  border-radius: 999px;
  line-height: 1.5;
  letter-spacing: 0.01em;
  transition: all 0.2s ease;
}
.spec-tag:hover {
  background: rgba(26, 115, 232, 0.14);
  border-color: rgba(26, 115, 232, 0.35);
}

/* Related Products — compact single-row carousel */
.pd-related { position: relative; padding-inline: 28px; }
.pd-related__track#pdRelated {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.pd-related__track#pdRelated::-webkit-scrollbar { display: none; }
.pd-related__track#pdRelated > .product-card {
  flex: 0 0 200px;
  max-width: 200px;
  min-width: 160px;
  scroll-snap-align: start;
}
#pdRelated .product-card { border-radius: var(--r-sm); border: 1px solid var(--line); }
#pdRelated .product-card__img { aspect-ratio: 1 / 1; }
#pdRelated .product-card__body { padding: 8px 10px; }
#pdRelated .product-card__cat { margin-bottom: 2px; font-size: 0.65rem; letter-spacing: 0.04em; text-transform: uppercase; }
#pdRelated .product-card__title { font-size: 0.82rem; margin-bottom: 4px; line-height: 1.3; }
#pdRelated .product-card__desc { display: none; }
#pdRelated .product-card__actions .btn { padding-block: 6px; font-size: 0.75rem; }

/* arrows — brand-red chevron text, always visible */
.pd-related__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 28px; height: 44px;
  display: grid; place-items: center;
  background: none;
  border: none;
  color: var(--brand, #c0392b);
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 1.7rem;
  font-weight: 300;
  line-height: 1;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity .15s, transform .15s;
}
.pd-related__arrow:hover { opacity: 1; transform: translateY(-50%) scale(1.2); }
.pd-related__arrow:disabled { opacity: 0.18; cursor: default; }
.pd-related__arrow--prev { left: 0; }
.pd-related__arrow--next { right: 0; }
[dir="rtl"] .pd-related__arrow--prev { left: auto; right: 0; }
[dir="rtl"] .pd-related__arrow--next { right: auto; left: 0; }

@media (max-width: 1023px) {
  .pd-related__track#pdRelated > .product-card { flex: 0 0 170px; max-width: 170px; min-width: 140px; }
}
@media (max-width: 520px) {
  .pd-related { padding-inline: 22px; }
  .pd-related__track#pdRelated > .product-card { flex: 0 0 150px; max-width: 150px; min-width: 130px; }
  .pd-related__arrow { width: 24px; height: 38px; font-size: 1.4rem; }
}

/* Product Description — rich content area (images + text from admin) */
#description { background: var(--paper, #fff); }
.pd-desc {
  font-size: var(--fs-base, 1rem);
  line-height: 1.7;
  color: var(--ink-700, #333);
}
.pd-desc img {
  max-width: 100% !important;
  height: auto !important;
  border-radius: var(--r-md, 8px);
  margin: var(--s-3, 12px) 0;
}
.pd-desc p { margin: 0.5em 0; }
.pd-desc h2, .pd-desc h3 { margin-top: 1em; color: var(--ink-900, #111); }
.pd-desc ul, .pd-desc ol { padding-left: 1.5em; margin: 0.5em 0; }
.pd-desc table { width: 100%; border-collapse: collapse; margin: 0.75em 0; }
.pd-desc th, .pd-desc td { border: 1px solid var(--line, #e0e0e0); padding: 8px 12px; text-align: left; font-size: 0.95em; }
.pd-desc th { background: var(--surface-2, #f7f7f7); font-weight: 600; }

/* PDF button icon size fix */
#pdPdfIcon{width:36px!important;height:36px!important;display:inline-block;vertical-align:-4px;}

/* ── Mobile chat widget: full-screen overlay on detail pages ── */
@media (max-width: 768px) {
  /* Kill horizontal panning: body already has overflow-x:hidden, but that
     does NOT clip position:fixed off-canvas elements (e.g. mobile nav,
     chat panel). The root scroller (html) must clip them. */
  html { overflow-x: hidden; }

  /* Spec table: long pipe-delimited values must wrap, never force overflow */
  .pd-spectable { table-layout: fixed; }
  .pd-spectable th,
  .pd-spectable td { word-break: break-word; overflow-wrap: anywhere; }

  /* FAB button: always visible, above everything */
  #chatFab.chat-fab {
    position: fixed !important;
    bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
    right: 16px !important;
    z-index: 99999 !important;
    width: 56px !important;
    height: 56px !important;
    display: grid !important;
    place-items: center !important;
  }
  /* Panel: true full screen — ONLY when open (.open). Never show by default. */
  #chatPanel.chat-panel.open {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    height: 100dvh !important;
    border-radius: 0 !important;
    z-index: 99999 !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    display: flex !important;
    flex-direction: column !important;
  }
  /* Chat body: scrollable, fills available space */
  #chatBody.chat-body {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    min-height: 0 !important;
  }
  /* Input area: always visible at bottom */
  .chat-input {
    flex: none !important;
    padding: 12px 16px !important;
    border-top: 1px solid var(--line, #e0e0e0) !important;
  }
}