/* ═══════════════════════════════════════════════
   ELITE TECH-INNOVATIONS — product-details.css
═══════════════════════════════════════════════ */

/* ── PAGE HERO (same system) ── */
.page-hero { min-height:60vh; padding:0 48px 60px; display:flex; flex-direction:column; justify-content:flex-end; position:relative; z-index:2; background:var(--bg); overflow:hidden; }
.page-hero-grid { position:absolute; inset:0; background-image:linear-gradient(var(--border2) 1px,transparent 1px),linear-gradient(90deg,var(--border2) 1px,transparent 1px); background-size:64px 64px; }
.hero-nodes { position:absolute; inset:0; pointer-events:none; }
.page-hero-orb { position:absolute; right:-120px; top:50%; transform:translateY(-50%); width:700px; height:700px; border-radius:50%; border:1px solid var(--border); display:flex; align-items:center; justify-content:center; pointer-events:none; }
.page-hero-orb::before { content:''; width:500px; height:500px; border-radius:50%; border:1px solid var(--border); position:absolute; }
.page-hero-orb::after  { content:''; width:300px; height:300px; border-radius:50%; border:1px solid var(--border); position:absolute; }
.orb-core { width:120px; height:120px; border-radius:50%; background:var(--accent); opacity:0.07; animation:pulse-orb 4s ease-in-out infinite; }
@keyframes pulse-orb { 0%,100%{transform:scale(1);opacity:0.07} 50%{transform:scale(1.2);opacity:0.14} }
.hero-node { position:absolute; width:5px; height:5px; background:var(--accent); border-radius:50%; opacity:0; animation:nodeAppear 4s ease-in-out infinite; }
@keyframes nodeAppear { 0%,100%{opacity:0;transform:scale(0)} 50%{opacity:0.55;transform:scale(1)} }
.hero-conn { position:absolute; height:1px; background:linear-gradient(90deg,transparent,var(--accent),transparent); opacity:0; transform-origin:left; animation:lineFlow 3s ease-in-out infinite; }
@keyframes lineFlow { 0%,100%{opacity:0;transform:scaleX(0)} 40%,60%{opacity:0.22;transform:scaleX(1)} }
.breadcrumb { display:inline-flex; align-items:center; gap:8px; background:var(--white); border:1px solid var(--border); padding:6px 14px; border-radius:100px; font-size:12px; color:var(--muted2); font-weight:500; position:absolute; top:80px; left:48px; z-index:10; text-decoration:none; }
.breadcrumb a { color:var(--muted2); text-decoration:none; transition:color 0.2s; }
.breadcrumb a:hover { color:var(--accent); }
.breadcrumb-sep { color:var(--muted2); opacity:0.4; }
.breadcrumb span { color:var(--ink2); font-weight:600; }
.page-hero-inner { position:relative; z-index:1; max-width:820px; }
.page-hero h1 { font-family:'Cabinet Grotesk',sans-serif; font-size:clamp(40px,5.5vw,76px); font-weight:900; line-height:0.96; letter-spacing:-3px; color:var(--ink); }
.section-tag { display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:600; color:var(--accent); letter-spacing:1.5px; text-transform:uppercase; margin-bottom:20px; }
.section-tag::before { content:''; width:20px; height:1.5px; background:var(--accent); }

/* ── PRODUCT HERO/OVERVIEW ── */
.pd-main { position:relative; z-index:2; background:rgba(255,255,255,0.94) !important; padding:90px 48px; }
.pd-overview { display:grid; grid-template-columns:1fr 1fr; gap:72px; align-items:start; margin-bottom:90px; }

/* Gallery — main photo with a thumbnail rail beside it. Thumbnails are
   the additional car photos uploaded in admin; hovering (or tapping, on
   touch devices) one swaps the main image area to show it. The rail
   sits after the main image in source order, so it naturally renders on
   the right in LTR and mirrors to the left in RTL, like the rest of the
   site's layout. */
.pd-gallery { position:relative; display:flex; gap:14px; align-items:flex-start; }
.pd-gallery-main { flex:1; min-width:0; border-radius:20px; overflow:hidden; aspect-ratio:4/3.2; background:var(--bg2); border:1px solid var(--border2); position:relative; }
.pd-gallery-main img { width:100%; height:100%; object-fit:cover; transition:opacity 0.25s, transform 0.5s; }
.pd-gallery-main:hover img { transform:scale(1.03); }
.pd-gallery-badge { position:absolute; top:18px; left:18px; background:var(--accent); color:#fff; font-size:11px; font-weight:700; padding:6px 14px; border-radius:100px; letter-spacing:0.5px; text-transform:uppercase; }
html[dir="rtl"] .pd-gallery-badge { left:auto; right:18px; }

.pd-gallery-thumbs { display:flex; flex-direction:column; gap:10px; width:76px; flex-shrink:0; max-height:100%; overflow-y:auto; }
.pd-thumb { width:76px; height:64px; border-radius:10px; overflow:hidden; background:var(--bg2); border:2px solid transparent; cursor:pointer; transition:border-color 0.2s, transform 0.2s; flex-shrink:0; }
.pd-thumb:hover, .pd-thumb.active { border-color:var(--accent); }
.pd-thumb:hover { transform:translateY(-1px); }
.pd-thumb img { width:100%; height:100%; object-fit:cover; display:block; }

/* Info column */
.pd-info {}
.pd-cat-row { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.pd-cat-pill { font-size:11px; font-weight:700; color:var(--accent); background:var(--accent-pale); padding:6px 14px; border-radius:100px; letter-spacing:0.6px; text-transform:uppercase; }
.pd-rating { display:flex; align-items:center; gap:6px; font-size:13px; color:var(--muted); }
.pd-rating-stars { color:#F5A623; letter-spacing:1px; }

.pd-title { font-family:'Cabinet Grotesk',sans-serif; font-size:clamp(32px,3.2vw,46px); font-weight:900; letter-spacing:-1.6px; line-height:1.08; color:var(--ink); margin-bottom:18px; }
.pd-tagline { font-size:16px; color:var(--muted); line-height:1.7; margin-bottom:32px; }

.pd-stats-row { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-bottom:32px; }
.pd-stat { background:var(--bg); border:1px solid var(--border2); border-radius:14px; padding:18px 16px; }
.pd-stat-num { font-family:'Cabinet Grotesk',sans-serif; font-size:24px; font-weight:800; color:var(--accent); letter-spacing:-1px; }
.pd-stat-label { font-size:11.5px; color:var(--muted); margin-top:4px; font-weight:500; }

.pd-actions { display:flex; gap:12px; margin-bottom:32px; }
.pd-btn-primary {
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--accent); color:#fff; padding:15px 28px; border:none;
  border-radius:100px; font-family:'Instrument Sans',sans-serif; font-weight:600; font-size:14.5px;
  cursor:pointer; transition:all 0.25s; text-decoration:none;
}
.pd-btn-primary:hover { background:var(--accent-light); transform:translateY(-2px); box-shadow:0 12px 32px rgba(184,132,43,0.3); }
.pd-btn-ghost {
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--white); color:var(--ink); padding:14px 24px; border:1.5px solid var(--border);
  border-radius:100px; font-family:'Instrument Sans',sans-serif; font-weight:500; font-size:14.5px;
  cursor:pointer; transition:all 0.25s; text-decoration:none;
}
.pd-btn-ghost:hover { border-color:var(--ink); }

.pd-highlights { display:flex; flex-direction:column; gap:12px; padding-top:24px; border-top:1px solid var(--border2); }
.pd-highlight { display:flex; align-items:flex-start; gap:12px; font-size:14px; color:var(--ink2); font-weight:500; }
.pd-highlight-icon { width:20px; height:20px; border-radius:6px; background:var(--accent-pale); flex-shrink:0; display:flex; align-items:center; justify-content:center; margin-top:1px; }
.pd-highlight-icon svg { width:11px; height:11px; }

/* ── TABS ── */
.pd-tabs-section { margin-bottom:90px; }
.pd-tabs-nav { display:flex; gap:8px; border-bottom:1px solid var(--border2); margin-bottom:40px; }
.pd-tab-btn {
  padding:14px 24px; font-family:'Instrument Sans',sans-serif; font-size:14.5px; font-weight:600;
  color:var(--muted); background:none; border:none; cursor:pointer;
  border-bottom:2px solid transparent; transition:all 0.2s; margin-bottom:-1px;
}
.pd-tab-btn.active { color:var(--accent); border-bottom-color:var(--accent); }
.pd-tab-btn:hover { color:var(--ink); }
.pd-tab-panel { display:none; }
.pd-tab-panel.active { display:block; animation:tabFadeIn 0.4s ease; }
@keyframes tabFadeIn { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }

.pd-tab-panel p { font-size:15px; color:var(--muted); line-height:1.85; margin-bottom:18px; }
.pd-feature-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:24px; }
.pd-feature-card { background:var(--bg); border:1px solid var(--border2); border-radius:16px; padding:24px; transition:all 0.3s; }
.pd-feature-card:hover { border-color:var(--border); transform:translateY(-3px); box-shadow:0 12px 32px rgba(0,0,0,0.06); }
.pd-feature-icon { font-size:24px; margin-bottom:14px; }
.pd-feature-title { font-family:'Cabinet Grotesk',sans-serif; font-size:16px; font-weight:800; color:var(--ink); margin-bottom:8px; letter-spacing:-0.3px; }
.pd-feature-text { font-size:13px; color:var(--muted); line-height:1.65; }

.pd-specs-table { display:flex; flex-direction:column; gap:0; border:1px solid var(--border2); border-radius:16px; overflow:hidden; }
.pd-spec-row { display:grid; grid-template-columns:200px 1fr; padding:18px 24px; border-bottom:1px solid var(--border2); }
.pd-spec-row:last-child { border-bottom:none; }
.pd-spec-row:nth-child(odd) { background:var(--bg); }
.pd-spec-label { font-size:13px; font-weight:700; color:var(--ink2); }
.pd-spec-value { font-size:13.5px; color:var(--muted); }

.pd-faq-item { border-bottom:1px solid var(--border2); padding:20px 0; }
.pd-faq-q { display:flex; align-items:center; justify-content:space-between; cursor:pointer; font-family:'Cabinet Grotesk',sans-serif; font-size:15.5px; font-weight:700; color:var(--ink); }
.pd-faq-q svg { transition:transform 0.3s; flex-shrink:0; }
.pd-faq-item.open .pd-faq-q svg { transform:rotate(45deg); }
.pd-faq-a { font-size:14px; color:var(--muted); line-height:1.7; max-height:0; overflow:hidden; transition:max-height 0.3s ease, padding-top 0.3s ease; }
.pd-faq-item.open .pd-faq-a { max-height:200px; padding-top:14px; }

/* ── RELATED PRODUCTS ── */
.pd-related { margin-top:0; }
.pd-related-h { font-family:'Cabinet Grotesk',sans-serif; font-size:clamp(26px,2.6vw,38px); font-weight:900; letter-spacing:-1.4px; color:var(--ink); margin-bottom:36px; }
.pd-related-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.pd-related-card {
  background:var(--white); border:1px solid var(--border2); border-radius:18px; overflow:hidden;
  transition:all 0.35s; text-decoration:none; display:block; color:inherit;
}
.pd-related-card:hover { border-color:var(--border); transform:translateY(-5px); box-shadow:0 20px 48px rgba(0,0,0,0.08); }
.pd-related-img { height:170px; overflow:hidden; background:var(--bg2); }
.pd-related-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s; }
.pd-related-card:hover .pd-related-img img { transform:scale(1.06); }
.pd-related-body { padding:20px; }
.pd-related-cat { font-size:10.5px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:0.6px; margin-bottom:6px; }
.pd-related-title { font-family:'Cabinet Grotesk',sans-serif; font-size:15.5px; font-weight:800; color:var(--ink); line-height:1.3; }

/* ── CTA ── */
.pd-cta { position:relative; z-index:2; background:rgba(246,244,238,0.65) !important; padding:80px 48px; }
.pd-cta-inner { background:var(--ink); border-radius:24px; padding:64px; display:grid; grid-template-columns:1fr auto; gap:48px; align-items:center; position:relative; overflow:hidden; }
.pd-cta-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.03) 1px,transparent 1px); background-size:48px 48px; }
.pd-cta-glow { position:absolute; right:64px; top:50%; transform:translateY(-50%); width:280px; height:280px; border-radius:50%; background:radial-gradient(circle,rgba(184,132,43,0.3),transparent 70%); pointer-events:none; }
.pd-cta-text { position:relative; z-index:1; }
.pd-cta-tag { font-size:11px; color:rgba(255,255,255,0.35); font-weight:600; text-transform:uppercase; letter-spacing:1.5px; margin-bottom:16px; }
.pd-cta-h { font-family:'Cabinet Grotesk',sans-serif; font-size:clamp(28px,2.8vw,42px); font-weight:900; color:#fff; letter-spacing:-1.5px; line-height:1.05; margin-bottom:12px; }
.pd-cta-sub { font-size:15px; color:rgba(255,255,255,0.45); line-height:1.6; }
.pd-cta-btns { position:relative; z-index:1; display:flex; flex-direction:column; gap:12px; flex-shrink:0; }
.btn-blue { background:var(--accent); color:#fff; padding:14px 28px; border:none; font-family:'Instrument Sans',sans-serif; font-weight:600; font-size:14px; border-radius:100px; cursor:pointer; transition:all 0.25s; white-space:nowrap; text-decoration:none; text-align:center; display:block; }
.btn-blue:hover { background:var(--accent-light); transform:translateY(-2px); box-shadow:0 12px 32px rgba(184,132,43,0.4); }
.btn-ghost-w { background:rgba(255,255,255,0.07); color:rgba(255,255,255,0.7); padding:13px 28px; border:1.5px solid rgba(255,255,255,0.1); font-family:'Instrument Sans',sans-serif; font-weight:500; font-size:14px; border-radius:100px; cursor:pointer; transition:all 0.25s; white-space:nowrap; text-align:center; text-decoration:none; display:block; }
.btn-ghost-w:hover { border-color:rgba(255,255,255,0.35); color:#fff; }

/* Reveal */
.reveal { opacity:0; transform:translateY(28px); transition:opacity 0.75s ease,transform 0.75s ease; }
.reveal.in { opacity:1; transform:translateY(0); }

/* Loading / not-found state */
.pd-not-found { text-align:center; padding:140px 48px; }
.pd-not-found h2 { font-family:'Cabinet Grotesk',sans-serif; font-size:32px; font-weight:900; color:var(--ink); margin-bottom:16px; }
.pd-not-found p { font-size:15px; color:var(--muted); margin-bottom:32px; }

@media (max-width: 1024px) {
  .pd-main { padding:64px 32px; }
  .pd-overview { grid-template-columns:1fr; gap:44px; }
  .pd-feature-grid { grid-template-columns:1fr; }
  .pd-related-grid { grid-template-columns:repeat(2,1fr); }
  .pd-spec-row { grid-template-columns:140px 1fr; }
  .pd-cta-inner { padding:48px; gap:32px; }
  .breadcrumb { left: 32px; }
}
@media (max-width: 860px) {
  .page-hero { padding:130px 20px 48px; min-height:auto; justify-content:flex-start; }
  .breadcrumb { left: 20px; }
  .page-hero-orb { display:none; }
  .pd-main { padding:48px 20px; }
  .pd-actions { flex-direction:column; }
  .pd-stats-row { grid-template-columns:repeat(3,1fr); gap:10px; }
  .pd-tabs-nav { overflow-x:auto; -webkit-overflow-scrolling:touch; flex-wrap:nowrap; }
  .pd-tab-btn { white-space:nowrap; padding:12px 18px; }
  .pd-related-grid { grid-template-columns:1fr; }
  .pd-cta { padding:56px 20px; }
  .pd-cta-inner { grid-template-columns:1fr; padding:36px 24px; text-align:left; border-radius:20px; }
  .pd-cta-btns { flex-direction:row; flex-wrap:wrap; }
  .pd-cta-glow { display:none; }

  /* Gallery: main photo full-width on top, thumbnail rail becomes a
     horizontal scroll strip underneath instead of a side column. Snap
     scrolling + an edge fade make it read as an intentional swipeable
     strip instead of content that's just abruptly cut off — the fade
     is only switched on by JS when the strip actually overflows (see
     shared.js), so a car with just 1-2 extra photos that fully fit
     doesn't get a pointless fade on its last, fully-visible thumbnail. */
  .pd-gallery { flex-direction:column; }
  .pd-gallery-thumbs {
    flex-direction:row; width:100%; max-height:none;
    overflow-x:auto; overflow-y:hidden;
    gap:10px; padding:2px 2px 8px;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
  }
  .pd-gallery-thumbs.has-overflow {
    mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent 100%);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent 100%);
  }
  html[dir="rtl"] .pd-gallery-thumbs.has-overflow {
    mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent 100%);
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 32px), transparent 100%);
  }
  .pd-thumb { width:68px; height:58px; scroll-snap-align:start; }
}
@media (max-width: 480px) {
  .breadcrumb { left: 16px; top: 76px; font-size: 11px; padding: 5px 12px; }
  .pd-stats-row { grid-template-columns:1fr 1fr; }
  .pd-cta-btns { flex-direction:column; }
  .pd-spec-row { grid-template-columns:1fr; gap:4px; }
}