/* =========================================================
   SEFA PRODUCT DETAIL V16 - CLEAN & PREMIUM REDESIGN
   Unified gold palette, refined typography, modern layout.
   Classes are sfx-* to avoid all old CSS conflicts.
========================================================= */
:root{
  --sfx-black:#070707;
  --sfx-dark:#111;
  --sfx-gold:#D4AF37;
  --sfx-gold-light:#f0d66b;
  --sfx-gold-gradient:linear-gradient(135deg, #B8960B, #D4AF37);
  --sfx-text:#1a1a1a;
  --sfx-muted:#666;
  --sfx-line:#e9e9e9;
  --sfx-bg:#f8f8f6;
  --sfx-white:#fff;
  --sfx-radius:10px;
}

/* Reset */
html body .sfx-product,
html body .sfx-product *{box-sizing:border-box!important;}
html body .sfx-product{
  margin:0!important;padding:0!important;background:var(--sfx-white)!important;color:var(--sfx-text)!important;
  font-family:'Poppins',Arial,sans-serif!important;overflow-x:hidden!important;
}
html body .sfx-product h1,
html body .sfx-product h2,
html body .sfx-product h3,
html body .sfx-product strong,
html body .sfx-product .sfx-btn,
html body .sfx-product .sfx-pill{font-family:'Montserrat',Arial,sans-serif!important;}

/* Container */
.sfx-container{width:100%!important;max-width:1400px!important;margin:0 auto!important;padding-left:40px!important;padding-right:40px!important;}

/* Hero */
.sfx-hero{background:var(--sfx-white)!important;padding:20px 0 28px!important;position:relative!important;}

/* Breadcrumb */
.sfx-breadcrumb{display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:8px!important;margin:0 0 22px!important;font:700 11px/1 'Montserrat',Arial,sans-serif!important;letter-spacing:.06em!important;text-transform:uppercase!important;color:#999!important;}
.sfx-breadcrumb a{color:#666!important;text-decoration:none!important;transition:.2s!important}
.sfx-breadcrumb a:hover{color:var(--sfx-gold)!important}
.sfx-breadcrumb span{color:var(--sfx-gold)!important;font-size:10px!important}
.sfx-breadcrumb strong{color:var(--sfx-dark)!important}

/* === 3-Column Layout === */
.sfx-layout{display:grid!important;grid-template-columns:minmax(480px,1fr) minmax(320px,.75fr) minmax(260px,.42fr)!important;gap:32px!important;align-items:start!important;}

/* --- Gallery --- */
.sfx-gallery{background:var(--sfx-white)!important;width:100%!important;position:relative!important;}
.sfx-stage{position:relative!important;min-height:500px!important;background:#fff!important;border:1px solid var(--sfx-line)!important;border-radius:var(--sfx-radius)!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;}
.sfx-main-img{position:relative!important;z-index:1!important;width:95%!important;max-height:480px!important;object-fit:contain!important;padding:10px!important;}

/* Arrows */
.sfx-arrow{position:absolute!important;top:50%!important;transform:translateY(-50%)!important;width:44px!important;height:44px!important;border:1px solid var(--sfx-line)!important;border-radius:50%!important;background:var(--sfx-white)!important;color:var(--sfx-gold)!important;box-shadow:0 4px 12px rgba(0,0,0,.08)!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:15px!important;z-index:5!important;cursor:pointer!important;transition:.25s!important}
.sfx-arrow:hover{background:var(--sfx-gold)!important;color:var(--sfx-white)!important;border-color:var(--sfx-gold)!important}
.sfx-prev{left:14px!important}.sfx-next{right:14px!important}

/* Thumbnails */
.sfx-thumbs{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:10px!important;margin-top:12px!important;}
.sfx-thumb{height:72px!important;border:1px solid var(--sfx-line)!important;border-radius:8px!important;background:var(--sfx-bg)!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;cursor:pointer!important;transition:.2s!important;padding:0!important;}
.sfx-thumb.active,.sfx-thumb:hover{border-color:var(--sfx-gold)!important;box-shadow:0 4px 12px rgba(212,175,55,.18)!important}
.sfx-thumb img{width:80%!important;height:80%!important;object-fit:contain!important;}

/* --- Info Panel --- */
.sfx-info{padding-top:6px!important;background:var(--sfx-white)!important;}

/* Category Pill */
.sfx-pill{display:inline-flex!important;background:var(--sfx-gold)!important;color:var(--sfx-dark)!important;border-radius:4px!important;padding:5px 14px!important;font-size:10px!important;font-weight:800!important;text-transform:uppercase!important;letter-spacing:.08em!important;margin-bottom:14px!important;}

/* Product Title - REDUCED from 52-88px to 28-40px */
.sfx-info h1{font-size:clamp(28px,3vw,40px)!important;line-height:1.05!important;letter-spacing:-1px!important;font-weight:900!important;text-transform:uppercase!important;color:var(--sfx-dark)!important;margin:0 0 12px!important;max-width:600px!important;}

/* Gold underline */
.sfx-line{width:60px!important;height:3px!important;background:var(--sfx-gold)!important;margin:0 0 16px!important;border-radius:2px!important;}

/* Subtitle */
.sfx-info h2{font-size:16px!important;line-height:1.4!important;font-weight:700!important;color:#333!important;margin:0 0 12px!important;}

/* Description */
.sfx-info p{font-size:14px!important;line-height:1.7!important;font-weight:400!important;color:var(--sfx-muted)!important;max-width:520px!important;margin:0 0 20px!important;}

/* Feature Grid */
.sfx-features{display:grid!important;gap:10px!important;margin-top:16px!important;}
.sfx-feature{display:grid!important;grid-template-columns:44px 1fr!important;gap:12px!important;align-items:center!important;}
.sfx-feature>span{width:44px!important;height:44px!important;border-radius:8px!important;background:var(--sfx-gold)!important;color:var(--sfx-white)!important;display:flex!important;align-items:center!important;justify-content:center!important;font-size:18px!important;box-shadow:0 4px 10px rgba(212,175,55,.2)!important;}
.sfx-feature strong{display:block!important;font-size:13px!important;line-height:1.25!important;font-weight:800!important;text-transform:uppercase!important;color:var(--sfx-dark)!important;}
.sfx-feature small{display:block!important;font-size:12px!important;color:var(--sfx-muted)!important;margin-top:2px!important;font-weight:500!important;}

/* --- Sidebar Card --- */
.sfx-sidecard{background:var(--sfx-white)!important;border:1px solid var(--sfx-line)!important;border-radius:var(--sfx-radius)!important;padding:20px!important;box-shadow:0 8px 24px rgba(0,0,0,.04)!important;margin-top:6px!important;}

/* Capacity Badge */
.sfx-capacity{text-align:center!important;border:1px solid var(--sfx-line)!important;border-radius:var(--sfx-radius)!important;padding:20px 10px!important;margin-bottom:16px!important;background:var(--sfx-bg)!important;}
.sfx-capacity i{display:block!important;font-size:32px!important;color:var(--sfx-gold)!important;margin-bottom:6px!important}
.sfx-capacity strong{display:block!important;font-size:26px!important;font-weight:900!important;color:var(--sfx-dark)!important;letter-spacing:-0.5px!important}
.sfx-capacity span{display:block!important;font-size:11px!important;font-weight:800!important;text-transform:uppercase!important;color:var(--sfx-muted)!important;margin-top:3px!important;letter-spacing:.06em!important}

/* Side List */
.sfx-side-list{display:grid!important;gap:12px!important;padding:4px 0 14px!important}
.sfx-side-list div{display:grid!important;grid-template-columns:32px 1fr!important;column-gap:10px!important}
.sfx-side-list i{grid-row:span 2!important;color:var(--sfx-gold)!important;font-size:20px!important;margin-top:1px!important}
.sfx-side-list strong{font-size:12px!important;text-transform:uppercase!important;font-weight:800!important;color:var(--sfx-dark)!important}
.sfx-side-list small{font-size:11px!important;color:var(--sfx-muted)!important}

/* Action Buttons */
.sfx-btn{width:100%!important;min-height:50px!important;border-radius:6px!important;text-decoration:none!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:9px!important;margin-top:10px!important;font-size:12px!important;font-weight:800!important;text-transform:uppercase!important;letter-spacing:.04em!important;line-height:1.12!important;transition:.25s!important;border:1px solid transparent!important}
.sfx-btn i{font-size:20px!important}
.sfx-wa{background:var(--sfx-gold)!important;color:var(--sfx-dark)!important}
.sfx-dark{background:var(--sfx-dark)!important;color:var(--sfx-white)!important}
.sfx-outline{background:var(--sfx-white)!important;color:var(--sfx-dark)!important;border-color:var(--sfx-line)!important}
.sfx-btn:hover{transform:translateY(-2px)!important;box-shadow:0 6px 16px rgba(0,0,0,.1)!important;}
.sfx-wa:hover{background:var(--sfx-dark)!important;color:var(--sfx-gold)!important}

/* === Spec Bar === */
.sfx-specbar{background:var(--sfx-dark)!important;border-top:2px solid var(--sfx-gold)!important;border-bottom:2px solid var(--sfx-gold)!important;padding:22px 0!important;color:var(--sfx-white)!important;margin:16px 0 0!important;}
.sfx-specgrid{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;align-items:stretch!important;gap:0!important;}
.sfx-specitem{min-height:82px!important;text-align:center!important;padding:4px 12px!important;border-right:1px solid rgba(255,255,255,.15)!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;color:var(--sfx-white)!important;}
.sfx-specitem:last-child{border-right:0!important}
.sfx-specitem i{font-size:20px!important;color:var(--sfx-gold)!important;margin-bottom:6px!important}
.sfx-specitem span{font-size:10px!important;text-transform:uppercase!important;font-weight:700!important;color:rgba(255,255,255,.7)!important;position:relative!important;padding-bottom:6px!important}
.sfx-specitem span:after{content:""!important;position:absolute!important;left:50%!important;bottom:0!important;width:24px!important;height:2px!important;background:var(--sfx-gold)!important;transform:translateX(-50%)!important}
.sfx-specitem strong{font-size:16px!important;font-weight:900!important;margin-top:6px!important;color:var(--sfx-white)!important;line-height:1.15!important;}

/* === Body Content === */
.sfx-body{background:var(--sfx-white)!important;padding:36px 0 24px!important}
.sfx-bodygrid{display:grid!important;grid-template-columns:1fr 1fr 260px!important;gap:32px!important;align-items:start!important;}

/* Section headings */
.sfx-body h3,.sfx-related h3{font-size:20px!important;font-weight:900!important;text-transform:uppercase!important;letter-spacing:-.3px!important;margin:0 0 22px!important;color:var(--sfx-dark)!important;position:relative!important;padding-bottom:14px!important;}
.sfx-body h3:after,.sfx-related h3:after{content:""!important;position:absolute!important;left:0!important;bottom:0!important;width:36px!important;height:2px!important;background:var(--sfx-gold)!important;}

/* Description */
.sfx-desc p{font-size:14px!important;line-height:1.8!important;color:#444!important;margin:0 0 28px!important;}

/* Applications */
.sfx-apps{display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:10px!important}
.sfx-apps div{border:1px solid var(--sfx-line)!important;border-radius:8px!important;padding:14px 8px!important;text-align:center!important;min-height:86px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;gap:6px!important;background:var(--sfx-bg)!important;transition:.2s!important}
.sfx-apps div:hover{border-color:var(--sfx-gold)!important}
.sfx-apps i{font-size:22px!important;color:var(--sfx-gold)!important}
.sfx-apps span{font-size:12px!important;font-weight:700!important;color:var(--sfx-dark)!important}

/* Tech Table */
.sfx-tech table{width:100%!important;border-collapse:collapse!important;font-size:13px!important}
.sfx-tech th,.sfx-tech td{padding:10px 12px!important;border:0!important}
.sfx-tech th{width:48%!important;font-weight:700!important;color:#333!important;background:#f4f4f2!important}
.sfx-tech td{background:var(--sfx-bg)!important;color:var(--sfx-dark)!important;font-weight:800!important}
.sfx-tech tr:nth-child(even) th{background:#eaeae8!important}
.sfx-tech tr:nth-child(even) td{background:#f0f0ee!important}

/* Drawing */
.sfx-drawing>div{border:1px solid var(--sfx-line)!important;border-radius:var(--sfx-radius)!important;background:var(--sfx-bg)!important;padding:14px!important;text-align:center!important;}
.sfx-drawing img{max-width:100%!important;max-height:240px!important;object-fit:contain!important;filter:grayscale(.8) contrast(1.05)!important}
.sfx-drawing strong,.sfx-drawing small{display:block!important;margin-top:8px!important;color:var(--sfx-dark)!important;font-size:13px!important}
.sfx-drawing small{font-weight:600!important;color:var(--sfx-muted)!important;margin-top:3px!important;font-size:11px!important}

/* === Related Products === */
.sfx-related{background:var(--sfx-white)!important;padding:10px 0 44px!important}
.sfx-related-grid{display:grid!important;grid-template-columns:repeat(5,1fr)!important;gap:14px!important;margin-top:22px!important;}
.sfx-related-card{border:1px solid var(--sfx-line)!important;border-radius:var(--sfx-radius)!important;background:var(--sfx-white)!important;text-decoration:none!important;color:var(--sfx-dark)!important;padding:16px!important;min-height:200px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:space-between!important;transition:.25s!important}
.sfx-related-card:hover{border-color:var(--sfx-gold)!important;box-shadow:0 8px 20px rgba(0,0,0,.06)!important;transform:translateY(-3px)!important}
.sfx-related-card img{height:110px!important;max-width:100%!important;object-fit:contain!important}
.sfx-related-card strong{font-size:13px!important;text-align:center!important;font-weight:800!important;color:var(--sfx-dark)!important;margin-top:8px!important}
.sfx-related-card span{font-size:11px!important;color:var(--sfx-gold)!important;font-weight:700!important;margin-top:4px!important}

/* Hide old blocks */
.sefa-bottom-cta,.sefa-trust-band{display:none!important;}

/* === RESPONSIVE === */
@media(max-width:1320px){
  .sfx-layout{grid-template-columns:1fr 1fr!important}
  .sfx-sidecard{grid-column:1/-1!important;display:grid!important;grid-template-columns:200px 1fr 1fr!important;gap:14px!important;align-items:center!important}
  .sfx-capacity{margin:0!important}.sfx-btn{margin-top:0!important}
  .sfx-bodygrid{grid-template-columns:1fr 1fr!important}
  .sfx-drawing{grid-column:1/-1!important}
  .sfx-related-grid{grid-template-columns:repeat(3,1fr)!important}
  .sfx-specgrid{grid-template-columns:repeat(3,1fr)!important;row-gap:14px!important}
}
@media(max-width:900px){
  .sfx-container{padding-left:16px!important;padding-right:16px!important}
  .sfx-layout{grid-template-columns:1fr!important;gap:22px!important}
  .sfx-stage{min-height:360px!important}
  .sfx-main-img{max-height:400px!important;width:95%!important}
  .sfx-info h1{font-size:28px!important;letter-spacing:-.8px!important}
  .sfx-sidecard{display:block!important}
  .sfx-capacity{margin-bottom:12px!important}.sfx-btn{margin-top:10px!important}
  .sfx-bodygrid{grid-template-columns:1fr!important}
  .sfx-apps{grid-template-columns:repeat(2,1fr)!important}
  .sfx-related-grid{grid-template-columns:repeat(2,1fr)!important}
  .sfx-specgrid{grid-template-columns:repeat(2,1fr)!important}
}
@media(max-width:560px){
  .sfx-stage{min-height:280px!important}
  .sfx-main-img{max-height:300px!important;width:96%!important}
  .sfx-thumbs{grid-template-columns:repeat(4,1fr)!important;gap:6px!important}
  .sfx-thumb{height:56px!important}
  .sfx-info h1{font-size:24px!important}
  .sfx-info p{font-size:13px!important}
  .sfx-related-grid{grid-template-columns:1fr!important}
  .sfx-apps{grid-template-columns:1fr!important}
  .sfx-specitem{border-right:0!important;border-bottom:1px solid rgba(255,255,255,.1)!important}
}