/* =========================================================
   EDIUSFA — 14-PRODUCT-DETAIL
   Page-specific styles for single product (single-product.php).
   -----------------------------------------------------------------
   Source of truth: ediusfa-product-detail.html (PRODUCT DETAIL
   PAGE-SPECIFIC STYLES block, lines 794–1033)
   -----------------------------------------------------------------
   NOTE: The following rules live in earlier files and are NOT
   redefined here (no duplication):
     - .pdp-container, .pdp-header            (03-components.css, 04-header.css)
     - .pdp-breadcrumb-bar                     (12-archive.css)
     - .header-search-toggle + comp-mobile-searchbar (04-header.css)
     - .comp-footer overrides                  (05-footer.css)
     - .mobile-sticky-nav + body padding-bottom (05-footer.css)
     - .prod-card, .prod-thumb, .badge, .price,
       .stars, .track-tag, .btn, .icon-btn,
       .tabs, .tab, .accordion, .filter-title,
       .range-slider, .range-values           (03-components.css)
     - .prod-card-cover + .prod-card .add-btn  (03-components.css, 11-homepage.css)
   This file only adds styles UNIQUE to the product detail page.
   -----------------------------------------------------------------

   @package    EdiusFA
   @subpackage assets/css
   @since      0.4.0
   @version    0.4.0
   ========================================================= */

/* ---------- Hero layout: preview + buy box ---------- */
.pdp-hero{padding:32px 0 8px; display:grid; grid-template-columns:1.5fr 1fr; gap:36px; align-items:flex-start;}
@media (max-width:980px){ .pdp-hero{grid-template-columns:1fr; gap:24px;} }

/* ---------- Video preview (signature element) ---------- */
.preview-stage{
  position:relative; aspect-ratio:16/9; border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--line-strong); background:linear-gradient(135deg, var(--cyan-900), #1a1206);
  transition:background var(--dur-med) var(--ease);
}
.preview-stage.scene-1{background:linear-gradient(135deg, var(--cyan-900), #1a1206);}
.preview-stage.scene-2{background:linear-gradient(135deg, var(--amber-900), #06232a);}
.preview-stage.scene-3{background:linear-gradient(135deg, #2c1018, #0a2a2e);}
.preview-stage.scene-4{background:linear-gradient(135deg, var(--cyan-700), var(--amber-600));}
.preview-topbar{position:absolute; top:14px; inset-inline:14px; display:flex; justify-content:space-between; align-items:flex-start; z-index:2;}
.preview-badges{display:flex; gap:8px;}
.preview-play{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:2;
}
.preview-play-btn{
  width:78px; height:78px; border-radius:50%; background:rgba(7,10,16,.5); backdrop-filter:blur(6px);
  border:1.5px solid rgba(255,255,255,.55); display:flex; align-items:center; justify-content:center;
  color:#fff; transition:transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.preview-play-btn:hover{transform:scale(1.06); background:rgba(7,10,16,.65);}
.preview-play-btn svg{margin-inline-start:4px;}
.preview-stage.is-playing .preview-play-btn{opacity:0; pointer-events:none;}
.preview-scan{
  position:absolute; inset:0; background:repeating-linear-gradient(180deg, rgba(255,255,255,.025) 0 2px, transparent 2px 4px);
  pointer-events:none; opacity:.5;
}
.preview-chrome{
  position:absolute; bottom:0; inset-inline:0; padding:14px 16px 12px; z-index:2;
  background:linear-gradient(to top, rgba(4,6,10,.85), transparent);
}
.preview-progress-track{position:relative; height:4px; border-radius:99px; background:rgba(255,255,255,.22); margin-bottom:10px; cursor:pointer;}
.preview-progress-fill{position:absolute; inset-inline-start:0; top:0; bottom:0; width:14%; background:var(--cyan); border-radius:99px; transition:width .1s linear;}
.preview-progress-fill::after{content:""; position:absolute; inset-inline-end:-5px; top:50%; transform:translateY(-50%); width:11px; height:11px; border-radius:50%; background:var(--cyan); box-shadow:0 0 0 3px rgba(47,217,236,.25);}
.preview-controls{display:flex; align-items:center; justify-content:space-between; color:#fff;}
.preview-controls-left{display:flex; align-items:center; gap:12px;}
.preview-controls button{color:#fff; opacity:.9; display:flex; align-items:center;}
.preview-controls button:hover{opacity:1; color:var(--cyan);}
.preview-time{font-family:var(--font-mono); font-size:11.5px; color:rgba(255,255,255,.85); direction:ltr;}

.pdp-gallery{display:flex; gap:10px; margin-top:12px; overflow-x:auto; padding-bottom:4px;}
.gallery-thumb{
  flex-shrink:0; width:96px; height:60px; border-radius:9px; border:2px solid transparent; cursor:pointer;
  position:relative; overflow:hidden; transition:border-color var(--dur-fast) var(--ease);
}
.gallery-thumb.g1{background:linear-gradient(135deg, var(--cyan-900), #1a1206);}
.gallery-thumb.g2{background:linear-gradient(135deg, var(--amber-900), #06232a);}
.gallery-thumb.g3{background:linear-gradient(135deg, #2c1018, #0a2a2e);}
.gallery-thumb.g4{background:linear-gradient(135deg, var(--cyan-700), var(--amber-600));}
.gallery-thumb.g5{background:linear-gradient(135deg, var(--amber-600), #2c1e09);}
.gallery-thumb::after{content:""; position:absolute; inset:0; background:rgba(6,9,14,.15);}
.gallery-thumb.is-active{border-color:var(--cyan);}
.gallery-thumb.is-active::after{background:transparent;}
.gallery-caption{margin-top:10px; font-size:12px; color:var(--ink-faint); display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px;}

/* ---------- Buy box ---------- */
.buy-box{
  background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:24px; position:sticky; top:88px;
}
.buy-box-top{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:10px; gap:10px;}
.buy-box h1{font-size:21px; font-weight:800; line-height:1.5; margin:10px 0 10px;}
.buy-box-rating{display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--ink-faint); margin-bottom:14px;}
.buy-box-rating .stars{font-size:13px;}
.buy-box-summary{font-size:13.5px; color:var(--ink-dim); line-height:1.8; margin-bottom:18px;}

.quick-specs{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px;}
.quick-spec{
  display:flex; align-items:center; gap:9px; background:var(--bg-elevated-2); border:1px solid var(--line);
  border-radius:9px; padding:10px 11px;
}
.quick-spec svg{color:var(--cyan); flex-shrink:0;}
.quick-spec .qs-label{display:block; font-size:10.5px; color:var(--ink-faint);}
.quick-spec .qs-value{display:block; font-size:12.5px; font-weight:700; color:var(--ink); font-family:var(--font-mono);}

.buy-box hr{border:none; border-top:1px solid var(--line); margin:18px 0;}

.buy-price-row{display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;}
.buy-price-row .price-wrap{gap:2px;}
.buy-price-row .price{font-size:22px;}
.buy-price-row .price-old{font-size:13px;}

.version-select{margin-bottom:18px;}
.version-select .filter-title{margin-bottom:10px; display:block;}
.version-pills{display:flex; gap:8px; flex-wrap:wrap;}
.version-pill{position:relative;}
.version-pill input{position:absolute; opacity:0; width:0; height:0;}
.version-pill span{
  display:inline-flex; align-items:center; padding:8px 14px; border-radius:99px; border:1px solid var(--line-strong);
  font-size:12.5px; font-family:var(--font-mono); color:var(--ink-dim); cursor:pointer; transition:all var(--dur-fast) var(--ease);
}
.version-pill input:checked + span{background:var(--cyan); border-color:var(--cyan); color:var(--ink-on-accent); font-weight:700;}
.version-pill:hover span{border-color:var(--cyan);}

.buy-actions{display:flex; flex-direction:column; gap:10px; margin-bottom:20px;}
.buy-actions-row{display:flex; gap:10px;}
.buy-actions-row .btn{flex:1;}
.wishlist-btn.is-active{border-color:var(--danger); color:var(--danger);}
.wishlist-btn.is-active svg{fill:var(--danger);}

.trust-list{display:flex; flex-direction:column; gap:11px;}
.trust-list li{display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--ink-dim);}
.trust-list svg{color:var(--success); flex-shrink:0;}

/* ---------- Section shells ---------- */
.pdp-section{padding:48px 0; border-top:1px solid var(--line);}
.pdp-section-title{font-size:22px; font-weight:800; margin-bottom:22px; display:flex; align-items:center; gap:10px;}
.pdp-section-title .track-tag{font-weight:600;}

/* ---------- Tabs content ---------- */
.pdp-tabs .tabs{margin-bottom:26px;}
.pdp-tab-panel{display:none;}
.pdp-tab-panel.is-active{display:block; animation:pdpFadeIn .25s var(--ease);}
@keyframes pdpFadeIn{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);}}

.desc-text{color:var(--ink-dim); font-size:14.5px; line-height:1.9; max-width:760px;}
.desc-text + .desc-text{margin-top:14px;}

.feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
@media (max-width:760px){ .feature-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .feature-grid{grid-template-columns:1fr;} }
/* Override the .feature-card hover-lift from 03-components.css for the product
   detail page — here the card is a static info tile, not an interactive one. */
.pdp-tabs .feature-card{padding:18px;}
.pdp-tabs .feature-card:hover{border-color:var(--line); transform:none;}
.pdp-tabs .feature-card svg{color:var(--cyan); margin-bottom:12px;}
.pdp-tabs .feature-card h4{font-size:14px; margin-bottom:6px;}
.pdp-tabs .feature-card p{font-size:12.5px; color:var(--ink-faint); line-height:1.7;}

.included-list{display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; max-width:640px;}
@media (max-width:520px){ .included-list{grid-template-columns:1fr;} }
.included-list li{display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--ink-dim);}
.included-list svg{color:var(--success); flex-shrink:0;}

.spec-table{width:100%; max-width:680px; border-collapse:collapse;}
.spec-table tr{border-bottom:1px solid var(--line);}
.spec-table tr:last-child{border-bottom:none;}
.spec-table td{padding:13px 4px; font-size:13.5px;}
.spec-table td:first-child{color:var(--ink-faint); width:40%;}
.spec-table td:last-child{color:var(--ink); font-weight:600; font-family:var(--font-mono);}

.compat-badges{display:flex; flex-wrap:wrap; gap:9px; margin-bottom:18px;}
.compat-note{display:flex; gap:10px; background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius-md); padding:15px 16px; max-width:640px; font-size:13px; color:var(--ink-dim); line-height:1.8;}
.compat-note svg{color:var(--amber); flex-shrink:0; margin-top:2px;}

.install-steps{display:flex; flex-direction:column; gap:16px; max-width:660px;}
.install-step{display:flex; gap:16px;}
.install-step-num{
  width:32px; height:32px; border-radius:9px; background:var(--bg-elevated-2); border:1px solid var(--line-strong);
  color:var(--cyan); font-family:var(--font-mono); font-weight:700; font-size:13px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.install-step h4{font-size:14px; margin-bottom:4px;}
.install-step p{font-size:13px; color:var(--ink-faint); line-height:1.8;}

/* ---------- FAQ ---------- */
.pdp-faq .accordion{max-width:760px;}

/* ---------- Reviews ---------- */
.reviews-summary{display:grid; grid-template-columns:220px 1fr; gap:36px; margin-bottom:32px; align-items:center;}
@media (max-width:700px){ .reviews-summary{grid-template-columns:1fr;} }
.reviews-score{text-align:center;}
.reviews-score .big-num{font-family:var(--font-mono); font-size:48px; font-weight:700; color:var(--ink); line-height:1;}
.reviews-score .stars{font-size:16px; display:block; margin:10px 0 6px;}
.reviews-score span.small{font-size:12px; color:var(--ink-faint);}
.rating-bars{display:flex; flex-direction:column; gap:8px;}
.rating-bar-row{display:flex; align-items:center; gap:10px; font-size:12px; color:var(--ink-faint);}
.rating-bar-row .mono{width:14px; flex-shrink:0;}
.rating-bar-track{flex:1; height:6px; border-radius:99px; background:var(--bg-elevated-2); overflow:hidden;}
.rating-bar-fill{height:100%; background:var(--amber); border-radius:99px;}

.review-list{display:flex; flex-direction:column; gap:18px; max-width:760px;}
.review-card{background:var(--bg-elevated); border:1px solid var(--line); border-radius:var(--radius-md); padding:18px;}
.review-head{display:flex; align-items:center; gap:12px; margin-bottom:10px;}
.review-meta b{font-size:13.5px; display:block;}
.review-meta span{font-size:11.5px; color:var(--ink-faint);}
.review-card .stars{font-size:12px; margin-bottom:8px; display:block;}
.review-card p{font-size:13.5px; color:var(--ink-dim); line-height:1.85;}
.review-helpful{margin-top:10px; display:flex; align-items:center; gap:8px; font-size:12px; color:var(--ink-faint);}
.review-helpful button{display:flex; align-items:center; gap:6px; color:var(--ink-faint);}
.review-helpful button:hover{color:var(--cyan);}

/* ---------- Related / more from category ---------- */
.pdp-scroll-row{display:flex; gap:16px; overflow-x:auto; padding-bottom:8px;}
.pdp-scroll-row .prod-card{flex:0 0 220px;}
.related-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
@media (max-width:900px){ .related-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:520px){ .related-grid{grid-template-columns:1fr 1fr;} }

/* ---------- Mobile sticky purchase bar ---------- */
.sticky-buy-bar{
  display:none; position:fixed; bottom:0; inset-inline:0; z-index:var(--z-header);
  background:var(--bg-sunken); border-top:1px solid var(--line-strong);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  align-items:center; gap:10px; box-shadow:0 -8px 24px rgba(3,5,9,.4);
}
.sticky-buy-bar .price-wrap{flex-shrink:0;}
.sticky-buy-bar .price{font-size:16px;}
.sticky-buy-bar .price-old{font-size:10.5px;}
.sticky-buy-bar .btn{white-space:nowrap;}

@media (max-width:980px){
  .sticky-buy-bar{display:flex;}
  /* Override .pdp-hero buy-box sticky positioning on mobile so the sticky-buy-bar doesn't overlap */
  body{padding-bottom:74px;}
  .buy-box{position:static;}
}


/* v1.3.0 — real product images in gallery (no empty gradients) */
.gallery-thumb{
  position:relative;
  overflow:hidden;
  background:#111826 !important;
  border:2px solid transparent;
  padding:0;
  cursor:pointer;
}
.gallery-thumb img{display:block;width:100%;height:100%;object-fit:cover;}
.gallery-thumb.is-active{border-color:var(--cyan);}
.gallery-thumb::after{display:none !important;} /* kill overlay that hid images */
.preview-stage.has-image{background-color:#0B0F17;}
.preview-stage .preview-main-img{pointer-events:none;}
.pdp-gallery:empty{display:none;}