/* ============================================================
   Steel Shakti - Advanced Product Detail Page
   Mobile-first, B2B manufacturer appearance.
   ============================================================ */

:root{
  --ap-blue:#0b5ca7;
  --ap-blue-dark:#084a87;
  --ap-blue-soft:#e8f1fb;
  --ap-ink:#1b1f24;
  --ap-muted:#5b6470;
  --ap-line:#e3e7ec;
  --ap-bg:#ffffff;
  --ap-wa:#25d366;
  --ap-radius:10px;
}

.advanced-pdp-body{ background:#f6f8fa; }

.apdp-wrap{
  max-width:1200px; margin:0 auto; padding:8px 16px 48px; color:var(--ap-ink);
  font-size:16px; line-height:1.55;
}

.apdp-wrap *{ box-sizing:border-box; }

a.apdp-crumb a, .apdp-crumb a{ color:var(--ap-blue); text-decoration:none; }

/* ---- Breadcrumb ---- */
.apdp-breadcrumb{ max-width:1200px; margin:0 auto; padding:12px 16px 0; font-size:13px; color:var(--ap-muted); }
.apdp-crumb-list{ display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:0; padding:0; align-items:center; }
.apdp-crumb + .apdp-crumb::before{ content:"›"; margin-right:6px; color:var(--ap-muted); opacity:.7; }
.apdp-crumb a:hover{ text-decoration:underline; }
.apdp-crumb span{ color:var(--ap-ink); font-weight:500; }

/* ---- Hero grid ---- */
.apdp-hero{ background:#fff; border:1px solid var(--ap-line); border-radius:var(--ap-radius); padding:16px; margin-top:12px; }
.apdp-hero-grid{ display:grid; grid-template-columns:1fr; gap:18px; }

.apdp-main-fig{ margin:0 0 10px; }
.apdp-main-img{ width:100%; height:auto; max-height:560px; object-fit:contain; border-radius:8px; background:#fff; display:block; }
.apdp-thumbs{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; }
.apdp-thumb{ border:2px solid var(--ap-line); background:#fff; border-radius:8px; padding:2px; cursor:pointer; flex:0 0 auto; }
.apdp-thumb img{ width:64px; height:64px; object-fit:cover; border-radius:6px; display:block; }
.apdp-thumb.is-active{ border-color:var(--ap-blue); }

.apdp-h1{ margin:8px 0 8px; font-size:1.45rem; line-height:1.25; color:var(--ap-ink); }
.apdp-short{ color:var(--ap-muted); margin:0 0 14px; font-size:0.98rem; }

/* ---- Price ---- */
.apdp-price-box{ background:var(--ap-blue-soft); border:1px solid #cfe1f5; border-radius:8px; padding:12px 14px; margin-bottom:16px; }
.apdp-price{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.apdp-price-label{ font-size:13px; color:var(--ap-muted); }
.apdp-price-value{ font-size:1.6rem; font-weight:700; color:var(--ap-blue-dark); }
.apdp-sale-value{ color:var(--ap-muted); text-decoration:line-through; font-size:1rem; }
.apdp-price-tax{ color:var(--ap-muted); font-size:12px; }
.apdp-sku{ margin-top:6px; font-size:13px; color:var(--ap-muted); }
.apdp-price-quote{ font-size:1.2rem; font-weight:700; color:var(--ap-blue-dark); }
.apdp-getquote-note{ margin-top:4px; font-size:13px; color:var(--ap-muted); }

/* ---- Selectors ---- */
.apdp-selector{ border:0; margin:0 0 12px; padding:0; }
.apdp-selector-label{ font-weight:600; font-size:0.9rem; margin-bottom:8px; display:block; }
.apdp-grade-btns{ display:flex; flex-wrap:wrap; gap:8px; }
.apdp-grade-btn{
  border:1px solid var(--ap-line); background:#fff; color:var(--ap-ink);
  border-radius:8px; padding:9px 16px; cursor:pointer; font-size:0.95rem; font-weight:600;
  min-height:44px;
}
.apdp-grade-btn.is-active, .apdp-grade-btn[aria-checked="true"]{ border-color:var(--ap-blue); background:var(--ap-blue); color:#fff; }
.apdp-grade-btn:focus-visible{ outline:3px solid var(--ap-blue-soft); outline-offset:1px; }

.apdp-design-scroll{ display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; }
.apdp-design-opt{
  border:1px solid var(--ap-line); background:#fff; border-radius:8px; padding:6px; cursor:pointer;
  flex:0 0 auto; width:84px; text-align:center; min-height:80px; display:flex; flex-direction:column; align-items:center; gap:4px;
}
.apdp-design-opt img{ width:56px; height:56px; object-fit:contain; border-radius:6px; }
.apdp-design-code{ font-size:11px; font-weight:600; color:var(--ap-ink); word-break:break-word; }
.apdp-design-opt.is-active, .apdp-design-opt[aria-selected="true"]{ border-color:var(--ap-blue); box-shadow:0 0 0 2px var(--ap-blue-soft); }
.apdp-design-opt:focus-visible{ outline:3px solid var(--ap-blue-soft); outline-offset:1px; }

/* ---- Quick specs ---- */
.apdp-quick-specs{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin:14px 0; }
.apdp-quick-item{ background:#f7f9fb; border:1px solid var(--ap-line); border-radius:8px; padding:8px 10px; }
.apdp-quick-item dt{ font-size:12px; color:var(--ap-muted); text-transform:uppercase; letter-spacing:.02em; }
.apdp-quick-item dd{ margin:2px 0 0; font-weight:600; font-size:0.95rem; }

/* ---- CTAs ---- */
.apdp-ctas{ display:flex; flex-direction:column; gap:10px; margin-top:6px; }
.apdp-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius:8px; padding:12px 20px; font-size:1rem; font-weight:600; text-decoration:none;
  border:1px solid transparent; min-height:44px; transition:background .15s,color .15s,border-color .15s; line-height:1.2;
}
.apdp-btn-primary{ background:var(--ap-blue); color:#fff; }
.apdp-btn-primary:hover{ background:var(--ap-blue-dark); color:#fff; }
.apdp-btn-wa{ background:#fff; color:#128c4b; border-color:#cdeede; }
.apdp-btn-wa:hover{ background:#f1fbf5; color:#086b38; border-color:#b0dece; }
.apdp-btn-outline{ background:#fff; color:var(--ap-blue); border-color:var(--ap-blue); }
.apdp-btn-outline:hover{ background:var(--ap-blue-soft); }

/* ---- Sections ---- */
.apdp-section{
  background:#fff; border:1px solid var(--ap-line); border-radius:var(--ap-radius);
  padding:18px 16px; margin-top:14px;
}
.apdp-section-head{ margin-bottom:12px; }
.apdp-section-title{ font-size:1.2rem; margin:0; color:var(--ap-ink); }

.apdp-table-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.apdp-table{ width:100%; border-collapse:collapse; font-size:0.95rem; min-width:520px; }
.apdp-table th, .apdp-table td{ text-align:left; padding:11px 12px; border-bottom:1px solid var(--ap-line); }
.apdp-table thead th{ background:var(--ap-blue-soft); font-weight:600; color:var(--ap-blue-dark); }
.apdp-spec-table th{ width:40%; color:var(--ap-muted); font-weight:600; }
.apdp-spec-table tr:nth-child(even){ background:#fbfcfe; }

/* ---- Design groups ---- */
.apdp-design-group{ margin-top:18px; }
.apdp-digrust-group:first-child{ margin-top:0; }
.apdp-group-heading{ margin:0 0 4px; font-size:1.05rem; color:var(--ap-blue-dark); }
.apdp-group-desc{ margin:0 0 12px; color:var(--ap-muted); font-size:0.92rem; }
.apdp-design-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.apdp-design-card{ margin:0; border:1px solid var(--ap-line); border-radius:8px; overflow:hidden; background:#fff; }
.apdp-design-card-img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.apdp-design-card figcaption{ padding:10px; display:flex; flex-direction:column; gap:3px; }
.apdp-design-card-code{ font-weight:700; font-size:0.85rem; }
.apdp-design-card-name{ font-size:0.85rem; color:var(--ap-ink); }
.apdp-design-card-desc{ font-size:0.8rem; color:var(--ap-muted); }
.apdp-design-card-logo{ font-size:0.75rem; color:var(--ap-wa); font-weight:600; }

/* ---- Description prose ---- */
.apdp-desc{ }
.apdp-prose{ font-size:0.98rem; color:var(--ap-ink); }
.apdp-prose img{ max-width:100%; height:auto; }

/* ---- Category link ---- */
.apdp-category-link{ display:flex; justify-content:center; }

/* ---- Desktop ---- */
@media (min-width:820px){
  .apdp-hero-grid{ grid-template-columns:1fr 1fr; gap:28px; }
  .apdp-h1{ font-size:1.8rem; }
  .apdp-quick-specs{ grid-template-columns:repeat(2,1fr); }
  .apdp-design-grid{ grid-template-columns:repeat(3,1fr); }
  .apdp-wrap{ padding:8px 28px 56px; }
}

@media (min-width:960px){
  .apdp-ctas{ flex-direction:row; }
  .apdp-btn{ flex:1; }
}

@media (min-width:1100px){
  .apdp-design-grid{ grid-template-columns:repeat(4,1fr); }
}