/* ==========================================================
   PAGE STYLES — allproducts.php
   Shared chrome (topbar / navbar / footer / toast / marquee)
   now lives in assets/css/style.css
   ========================================================== */

/* ---- page-specific overrides of the shared chrome ---- */
/* ── MARQUEE ── */
    .marquee-wrap { background:var(--orange); overflow:hidden; white-space:nowrap; padding:10px 0; }
.marquee-item { font-family:'Orbitron',sans-serif; font-size:10px; font-weight:700; letter-spacing:2px; color:#fff; padding:0 32px; text-transform:uppercase; }

.nav-lnk:hover, .nav-lnk.active { color: var(--teal) !important; background: var(--teal-soft); }
/* ── PAGE HERO ── */
    .page-hero {
      background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 55%, #0993a0 100%);
      padding: 64px 0 52px; position: relative; overflow: hidden;
    }
.page-hero::before {
      content: ''; position: absolute; inset: 0;
      background-image:
        radial-gradient(ellipse at 10% 90%, rgba(240,112,32,.15) 0%, transparent 50%),
        radial-gradient(ellipse at 90% 10%, rgba(13,184,200,.12) 0%, transparent 50%);
    }
.breadcrumb-Nex { display:flex; align-items:center; gap:8px; font-family:'Rajdhani',sans-serif; font-size:13px; font-weight:600; letter-spacing:1px; color:rgba(255,255,255,.5); margin-bottom:18px; position:relative; z-index:1; }
.breadcrumb-Nex a { color:var(--teal); text-decoration:none; }
.breadcrumb-Nex a:hover { color:#fff; }
.page-hero h1 { font-family:'Orbitron',sans-serif; font-size:clamp(1.8rem,4vw,3rem); font-weight:900; color:#fff; line-height:1.15; margin-bottom:12px; position:relative; z-index:1; }
.page-hero h1 em { font-style:normal; color:var(--orange); }
.page-hero p { font-size:15px; color:rgba(255,255,255,.65); max-width:560px; line-height:1.85; position:relative; z-index:1; }
.hero-stats-row { display:flex; gap:32px; flex-wrap:wrap; margin-top:32px; position:relative; z-index:1; }
.hero-stat { text-align:center; }
.hero-stat-num { font-family:'Orbitron',sans-serif; font-size:1.6rem; font-weight:900; color:var(--teal); line-height:1; }
.hero-stat-lbl { font-family:'Rajdhani',sans-serif; font-size:11px; font-weight:600; letter-spacing:2px; color:rgba(255,255,255,.45); text-transform:uppercase; margin-top:3px; }
/* ── FILTER BAR ── */
    .filter-bar { background:#fff; border-bottom:1px solid var(--border); padding:18px 0; position:sticky; top:71px; z-index:100; box-shadow:0 2px 8px rgba(13,35,81,.04); }
.filter-wrap { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.filter-btn {
      font-family:'Rajdhani',sans-serif; font-size:13px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
      border:1.5px solid var(--border); background:#fff; color:var(--text-muted);
      border-radius:24px; padding:7px 18px; cursor:pointer; transition:all .25s;
      display:inline-flex; align-items:center; gap:7px;
    }
.filter-btn:hover { border-color:var(--teal); color:var(--teal); background:var(--teal-soft); }
.filter-btn.active { background:var(--teal); border-color:var(--teal); color:#fff; }
.filter-btn i { font-size:11px; }
.search-box { margin-left:auto; position:relative; }
.search-box input {
      font-family:'DM Sans',sans-serif; font-size:14px; border:1.5px solid var(--border);
      border-radius:24px; padding:8px 18px 8px 38px; outline:none; width:220px;
      transition:all .3s; color:var(--text);
    }
.search-box input:focus { border-color:var(--teal); width:260px; box-shadow:0 0 0 3px rgba(13,184,200,.1); }
.search-box i { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--text-muted); font-size:13px; }
@media(max-width:576px){ .search-box { margin-left:0; width:100%; } .search-box input { width:100%; } .search-box input:focus { width:100%; } }
/* ── PRODUCTS GRID ── */
    .products-sec { padding:60px 0 80px; background:var(--bg); }
.section-count { font-family:'Rajdhani',sans-serif; font-size:13px; font-weight:600; color:var(--text-muted); letter-spacing:1px; margin-bottom:28px; }
.section-count span { color:var(--navy); font-weight:700; }
.prod-card {
      background:#fff; border:1px solid var(--border); border-radius:18px;
      overflow:hidden; height:100%; display:flex; flex-direction:column;
      transition:all .35s cubic-bezier(.25,.8,.25,1);
      position:relative;
    }
.prod-card:hover { transform:translateY(-8px); box-shadow:0 24px 60px rgba(13,35,81,.14); border-color:rgba(13,184,200,.35); }
.prod-card-img {
      height:200px; position:relative; overflow:hidden;
      background:linear-gradient(135deg,var(--navy) 0%,var(--navy-mid) 60%,#0993a0 100%);
      display:flex; align-items:center; justify-content:center;
    }
.prod-card-img .icon-main { font-size:72px; color:rgba(13,184,200,.25); transition:all .4s; z-index:1; position:relative; }
.prod-card:hover .prod-card-img .icon-main { color:rgba(13,184,200,.5); transform:scale(1.08); }
.prod-card-img::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 70% 30%,rgba(240,112,32,.12) 0%,transparent 60%); }
.card-badge { position:absolute; top:14px; left:14px; background:var(--orange); color:#fff; font-family:'Orbitron',sans-serif; font-size:9px; font-weight:700; letter-spacing:1.5px; padding:4px 12px; border-radius:20px; text-transform:uppercase; }
.card-badge.teal { background:rgba(13,184,200,.9); }
.card-badge.green { background:#22c55e; }
.card-badge.purple { background:#8b5cf6; }
.card-isi { position:absolute; top:14px; right:14px; background:rgba(255,255,255,.15); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.25); color:#fff; font-family:'Rajdhani',sans-serif; font-size:10px; font-weight:700; letter-spacing:1px; padding:4px 10px; border-radius:6px; }
.prod-card-body { padding:24px 22px; flex:1; display:flex; flex-direction:column; }
.prod-cat-tag { font-family:'Rajdhani',sans-serif; font-size:11px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--teal); margin-bottom:8px; }
.prod-card-title { font-family:'Orbitron',sans-serif; font-size:15px; font-weight:800; color:var(--navy); line-height:1.35; margin-bottom:10px; }
.prod-card-desc { font-size:13px; color:var(--text-muted); line-height:1.8; flex:1; margin-bottom:16px; }
.prod-specs-mini { display:flex; flex-direction:column; gap:6px; margin-bottom:18px; border-top:1px solid var(--border); padding-top:14px; }
.spec-row { display:flex; justify-content:space-between; align-items:center; font-size:12px; }
.spec-row .sl { color:var(--text-muted); }
.spec-row .sv { font-family:'Rajdhani',sans-serif; font-weight:700; color:var(--navy); font-size:13px; }
.prod-pills { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:18px; }
.pp { background:var(--teal-soft); border:1px solid rgba(13,184,200,.25); color:var(--teal-dark); border-radius:20px; font-family:'Rajdhani',sans-serif; font-size:11px; font-weight:700; padding:4px 10px; letter-spacing:.3px; }
.prod-card-actions { display:flex; gap:10px; }
.btn-card-cart {
      flex:1; font-family:'Rajdhani',sans-serif; font-size:13px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
      background:var(--teal); color:var(--navy)!important; border:none; border-radius:8px; padding:11px 14px;
      text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:6px;
      box-shadow:0 4px 16px rgba(13,184,200,.3); transition:all .3s; cursor:pointer;
    }
.btn-card-cart:hover { background:#0dd4e6; transform:translateY(-1px); }
.btn-card-quote {
      font-family:'Rajdhani',sans-serif; font-size:13px; font-weight:700; letter-spacing:1px; text-transform:uppercase;
      background:transparent; color:var(--orange)!important; border:1.5px solid var(--orange); border-radius:8px; padding:11px 14px;
      text-decoration:none; display:inline-flex; align-items:center; justify-content:center; gap:6px;
      transition:all .3s; cursor:pointer;
    }
.btn-card-quote:hover { background:var(--orange); color:#fff!important; transform:translateY(-1px); }
/* Hidden for filter */
    .prod-card-wrap { display:block; }
.prod-card-wrap.hidden { display:none; }
/* ── FEATURED BANNER ── */
    .featured-banner {
      background:linear-gradient(135deg,var(--navy) 0%,var(--navy-mid) 60%,#0993a0 100%);
      border-radius:20px; padding:40px 44px; position:relative; overflow:hidden;
      display:flex; align-items:center; gap:32px; flex-wrap:wrap;
      box-shadow:0 20px 60px rgba(13,35,81,.18); margin-bottom:48px;
    }
.featured-banner::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 80% 50%,rgba(240,112,32,.15) 0%,transparent 60%); }
.fb-icon { font-size:72px; color:rgba(13,184,200,.25); flex-shrink:0; position:relative; z-index:1; }
.fb-content { flex:1; min-width:240px; position:relative; z-index:1; }
.fb-tag { display:inline-block; background:var(--orange); color:#fff; font-family:'Rajdhani',sans-serif; font-size:10px; font-weight:700; letter-spacing:2px; text-transform:uppercase; padding:4px 14px; border-radius:20px; margin-bottom:12px; }
.fb-title { font-family:'Orbitron',sans-serif; font-size:clamp(1.1rem,2.5vw,1.6rem); font-weight:800; color:#fff; line-height:1.3; margin-bottom:10px; }
.fb-desc { font-size:14px; color:rgba(255,255,255,.6); line-height:1.8; margin-bottom:20px; }
.btn-fb { font-family:'Rajdhani',sans-serif; font-size:14px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; background:var(--teal); color:var(--navy)!important; border:none; border-radius:8px; padding:11px 26px; text-decoration:none; display:inline-flex; align-items:center; gap:8px; box-shadow:0 6px 24px rgba(13,184,200,.3); transition:all .3s; }
.btn-fb:hover { background:#0dd4e6; transform:translateY(-2px); }
@media(max-width:767px){ .fb-icon { display:none; } .featured-banner { padding:28px; } }
/* ── SECTION DIVIDER ── */
    .cat-divider { display:flex; align-items:center; gap:16px; margin:48px 0 28px; }
.cat-divider-line { flex:1; height:1px; background:var(--border); }
.cat-divider-label { font-family:'Orbitron',sans-serif; font-size:11px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--text-muted); white-space:nowrap; display:flex; align-items:center; gap:8px; }
.cat-divider-label i { color:var(--teal); }
/* ── FAQ ── */
    .faq-sec { padding:80px 0 90px; background:#fff; }
.sec-badge { display:inline-block; background:var(--teal-soft); border:1px solid rgba(13,184,200,.35); color:var(--teal-dark); font-family:'Rajdhani',sans-serif; font-size:11px; font-weight:700; letter-spacing:3px; text-transform:uppercase; padding:5px 16px; border-radius:20px; margin-bottom:14px; }
.sec-title { font-family:'Orbitron',sans-serif; font-size:clamp(1.5rem,3.2vw,2.3rem); font-weight:800; line-height:1.2; color:var(--navy); }
.sec-title em { font-style:normal; color:var(--orange); }
.sec-line { width:52px; height:3px; border-radius:2px; background:linear-gradient(90deg,var(--teal),var(--orange)); margin:14px 0 0; }
.sec-line.center { margin:14px auto 0; }
.faq-wrap { max-width:800px; margin:0 auto; }
.faq-item { border:1px solid var(--border); border-radius:14px; margin-bottom:12px; overflow:hidden; transition:all .3s; }
.faq-item:hover { border-color:rgba(13,184,200,.4); box-shadow:0 4px 20px rgba(13,35,81,.07); }
.faq-item.open { border-color:var(--teal); box-shadow:0 6px 24px rgba(13,184,200,.12); }
.faq-q {
      display:flex; align-items:center; justify-content:space-between; gap:16px;
      padding:20px 24px; cursor:pointer; background:#fff;
      font-family:'Orbitron',sans-serif; font-size:13px; font-weight:700; color:var(--navy); line-height:1.5;
      transition:background .25s;
    }
.faq-item.open .faq-q { background:rgba(13,184,200,.04); color:var(--teal-dark); }
.faq-q-icon { width:32px; height:32px; border-radius:50%; background:var(--teal-soft); border:1px solid rgba(13,184,200,.3); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:12px; color:var(--teal); transition:all .35s; }
.faq-item.open .faq-q-icon { background:var(--teal); color:#fff; transform:rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .4s cubic-bezier(.4,0,.2,1); }
.faq-item.open .faq-a { max-height:400px; }
.faq-a-inner { padding:0 24px 22px; font-size:14px; color:var(--text-muted); line-height:1.85; }
.faq-a-inner strong { color:var(--navy); }
/* ── CTA STRIP ── */
    .cta-strip {
      background:linear-gradient(135deg,var(--navy) 0%,var(--navy-mid) 60%,#0993a0 100%);
      padding:70px 0; text-align:center; position:relative; overflow:hidden;
    }
.cta-strip::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 20% 50%,rgba(240,112,32,.12) 0%,transparent 60%),radial-gradient(ellipse at 80% 50%,rgba(13,184,200,.1) 0%,transparent 60%); }
.cta-strip h2 { font-family:'Orbitron',sans-serif; font-size:clamp(1.5rem,3.2vw,2.2rem); font-weight:900; color:#fff; margin-bottom:12px; position:relative; z-index:1; }
.cta-strip p { font-size:15px; color:rgba(255,255,255,.65); max-width:500px; margin:0 auto 32px; line-height:1.85; position:relative; z-index:1; }
.cta-btns { display:flex; justify-content:center; gap:14px; flex-wrap:wrap; position:relative; z-index:1; }
.btn-cta-primary { font-family:'Rajdhani',sans-serif; font-size:15px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; background:var(--teal); color:var(--navy)!important; border:none; border-radius:8px; padding:13px 32px; text-decoration:none; display:inline-flex; align-items:center; gap:8px; box-shadow:0 6px 24px rgba(13,184,200,.35); transition:all .3s; }
.btn-cta-primary:hover { background:#0dd4e6; transform:translateY(-2px); }
.btn-cta-outline { font-family:'Rajdhani',sans-serif; font-size:15px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; background:transparent; color:#fff!important; border:2px solid rgba(255,255,255,.4); border-radius:8px; padding:11px 28px; text-decoration:none; display:inline-flex; align-items:center; gap:8px; transition:all .3s; }
.btn-cta-outline:hover { border-color:var(--orange); color:var(--orange)!important; }
/* Reveal */
    .reveal { opacity:0; transform:translateY(24px); transition:opacity .6s ease,transform .6s ease; }
.reveal.d1 { transition-delay:.1s; }
.reveal.d2 { transition-delay:.2s; }
.reveal.d3 { transition-delay:.3s; }
.reveal.visible { opacity:1; transform:none; }
@media(max-width:767px){
      .featured-banner { padding:24px 20px; }
      .faq-q { padding:16px 18px; font-size:12px; }
      .faq-a-inner { padding:0 18px 18px; }
      .filter-wrap { gap:6px; }
      .filter-btn { font-size:11px; padding:6px 12px; }
    }