/* ═══════════════════════════════════════
   PRODUCTS — Redesigned Catalog Page v2
   ═══════════════════════════════════════ */

/* Section 1: Page Hero */
.pg-hero{position:relative;background:linear-gradient(160deg,#172030 0%,#1A2A42 40%,#1E3050 100%);padding:clamp(120px,14vh,160px) 0 clamp(48px,6vw,64px);overflow:hidden}
.pg-hero::after{content:'';position:absolute;top:0;right:0;width:55%;height:100%;z-index:1;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cpath d='M60 10L110 35V85L60 110L10 85V35Z' fill='none' stroke='%2300D4AA' stroke-width='.5'/%3E%3Ccircle cx='60' cy='10' r='3' fill='%2300D4AA'/%3E%3Ccircle cx='110' cy='35' r='3' fill='%2300D4AA'/%3E%3Ccircle cx='110' cy='85' r='3' fill='%2300D4AA'/%3E%3Ccircle cx='60' cy='110' r='3' fill='%2300D4AA'/%3E%3Ccircle cx='10' cy='85' r='3' fill='%2300D4AA'/%3E%3Ccircle cx='10' cy='35' r='3' fill='%2300D4AA'/%3E%3C/svg%3E");
  background-size:100px}

/* ══ HERO FX LAYER ══ */
.pg-hero-fx{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}

/* Gradient orbs */
.pg-fx-orb{position:absolute;border-radius:50%;filter:blur(80px);animation:orbFloat 14s ease-in-out infinite}
.pg-fx-orb.orb-1{width:480px;height:480px;top:-12%;right:-6%;background:radial-gradient(circle,#00D4AA,transparent 70%);opacity:.15;animation-duration:14s}
.pg-fx-orb.orb-2{width:320px;height:320px;bottom:0;right:18%;background:radial-gradient(circle,#4f8aff,transparent 70%);opacity:.1;animation-duration:18s;animation-delay:-6s}
.pg-fx-orb.orb-3{width:200px;height:200px;top:25%;left:52%;background:radial-gradient(circle,#00D4AA,transparent 70%);opacity:.08;animation-duration:22s;animation-delay:-10s}
@keyframes orbFloat{0%,100%{transform:translate(0,0) scale(1)}25%{transform:translate(18px,-22px) scale(1.06)}50%{transform:translate(-12px,18px) scale(.94)}75%{transform:translate(22px,12px) scale(1.04)}}

/* Dot grid */
.pg-fx-dots{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.045) 1px,transparent 1px);background-size:28px 28px;opacity:.6}

/* Scan line */
.pg-fx-scan{position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 0%,rgba(0,212,170,.1) 25%,rgba(0,212,170,.22) 50%,rgba(0,212,170,.1) 75%,transparent 100%);animation:scanMove 7s linear infinite;opacity:.7}
@keyframes scanMove{0%{top:-2%}100%{top:102%}}

/* Molecular nodes */
.pg-fx-node{position:absolute;width:5px;height:5px;border-radius:50%;background:var(--accent);opacity:0;animation:nodeAppear 5s ease-in-out infinite}
.pg-fx-node::before{content:'';position:absolute;top:50%;left:50%;width:50px;height:1px;background:linear-gradient(90deg,rgba(0,212,170,.4),transparent);transform-origin:left center}
.pg-fx-node::after{content:'';position:absolute;top:50%;left:50%;width:6px;height:6px;border-radius:50%;border:1px solid rgba(0,212,170,.2);transform:translate(-50%,-50%);animation:nodeRing 5s ease-in-out infinite}
.pg-fx-node.n1{top:15%;right:10%;animation-delay:0s}.pg-fx-node.n1::before{transform:rotate(-30deg)}
.pg-fx-node.n2{top:32%;right:30%;animation-delay:1.2s}.pg-fx-node.n2::before{transform:rotate(40deg);width:60px}
.pg-fx-node.n3{top:58%;right:7%;animation-delay:2.4s}.pg-fx-node.n3::before{transform:rotate(-55deg);width:38px}
.pg-fx-node.n4{top:22%;right:45%;animation-delay:3.6s}.pg-fx-node.n4::before{transform:rotate(20deg);width:45px}
.pg-fx-node.n5{top:70%;right:32%;animation-delay:1.8s}.pg-fx-node.n5::before{transform:rotate(-18deg);width:32px}
.pg-fx-node.n6{top:42%;right:16%;animation-delay:4.2s}.pg-fx-node.n6::before{transform:rotate(65deg);width:50px}
@keyframes nodeAppear{0%,100%{opacity:0;transform:scale(.4)}20%,80%{opacity:.6;transform:scale(1)}50%{opacity:.9;transform:scale(1.3)}}
@keyframes nodeRing{0%,100%{opacity:0;width:6px;height:6px}20%,80%{opacity:.3}50%{opacity:.5;width:28px;height:28px}}

/* Corner accents */
.pg-fx-corner{position:absolute;width:90px;height:90px;opacity:.15}
.pg-fx-corner::before{content:'';position:absolute;width:100%;height:1px;background:linear-gradient(90deg,var(--accent),transparent)}
.pg-fx-corner::after{content:'';position:absolute;width:1px;height:100%;background:linear-gradient(180deg,var(--accent),transparent)}
.pg-fx-corner.tl{top:24px;right:24px}.pg-fx-corner.tl::before{top:0;right:0}.pg-fx-corner.tl::after{top:0;right:0}
.pg-fx-corner.br{bottom:24px;left:24px;transform:rotate(180deg)}

/* Pulse rings */
.pg-fx-ring{position:absolute;border-radius:50%;border:1px solid rgba(0,212,170,.08);animation:ringPulse 5s ease-out infinite}
.pg-fx-ring.r1{top:28%;right:22%;width:130px;height:130px}
.pg-fx-ring.r1::after{content:'';position:absolute;inset:18px;border-radius:50%;border:1px solid rgba(0,212,170,.05);animation:ringPulse 5s ease-out 1.2s infinite}
.pg-fx-ring.r2{bottom:18%;right:40%;width:90px;height:90px;animation-delay:2.5s;animation-duration:6s}
@keyframes ringPulse{0%{transform:scale(.6);opacity:.6}100%{transform:scale(2);opacity:0}}

/* Rising particles */
.pg-fx-particle{position:absolute;width:2px;height:2px;border-radius:50%;background:var(--accent);animation:particleRise linear infinite;opacity:0}
.pg-fx-particle.p1{left:62%;animation-duration:9s;animation-delay:0s}
.pg-fx-particle.p2{left:74%;animation-duration:11s;animation-delay:1.5s;width:3px;height:3px}
.pg-fx-particle.p3{left:85%;animation-duration:8s;animation-delay:3s}
.pg-fx-particle.p4{left:55%;animation-duration:12s;animation-delay:2s;width:1.5px;height:1.5px}
.pg-fx-particle.p5{left:90%;animation-duration:10s;animation-delay:4.5s;width:2.5px;height:2.5px}
.pg-fx-particle.p6{left:68%;animation-duration:13s;animation-delay:6s}
.pg-fx-particle.p7{left:78%;animation-duration:9.5s;animation-delay:7.5s;width:1.5px;height:1.5px}
.pg-fx-particle.p8{left:58%;animation-duration:11.5s;animation-delay:1s;width:2.5px;height:2.5px}
@keyframes particleRise{0%{bottom:-4%;opacity:0;transform:translateX(0)}10%{opacity:.5}50%{opacity:.35;transform:translateX(15px)}90%{opacity:.1}100%{bottom:104%;opacity:0;transform:translateX(-10px)}}

/* SVG DNA Helix */
.pg-fx-dna{position:absolute;top:5%;right:7%;width:90px;height:auto;opacity:.7;animation:dnaFloat 18s ease-in-out infinite}
@keyframes dnaFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-14px) rotate(1.5deg)}}

/* SVG Hex Ring */
.pg-fx-hexring{position:absolute;bottom:8%;right:22%;width:160px;height:auto;opacity:.6;animation:hexSpin 45s linear infinite}
@keyframes hexSpin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}

/* SVG Molecular chain */
.pg-fx-chain{position:absolute;bottom:18%;left:42%;width:clamp(280px,40vw,500px);height:auto;opacity:.45;animation:chainDrift 25s ease-in-out infinite}
@keyframes chainDrift{0%,100%{transform:translateX(0) translateY(0)}33%{transform:translateX(12px) translateY(-6px)}66%{transform:translateX(-8px) translateY(4px)}}

/* Bottom glow bar */
.pg-fx-glow-bar{position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent 5%,rgba(0,212,170,.25) 30%,rgba(0,212,170,.45) 50%,rgba(0,212,170,.25) 70%,transparent 95%);z-index:3}
.pg-fx-glow-bar::before{content:'';position:absolute;bottom:0;left:20%;right:20%;height:20px;background:linear-gradient(180deg,transparent,rgba(0,212,170,.04));filter:blur(8px)}

/* Mobile: reduce FX */
@media(max-width:640px){
  .pg-fx-dna,.pg-fx-hexring,.pg-fx-chain,.pg-fx-corner.br,.pg-fx-ring.r2{display:none}
  .pg-fx-orb.orb-1{width:280px;height:280px}
  .pg-fx-orb.orb-2{width:180px;height:180px}
  .pg-fx-particle.p4,.pg-fx-particle.p6,.pg-fx-particle.p7,.pg-fx-particle.p8{display:none}
}

/* Hero Content */
.pg-hero-in{position:relative;z-index:2;max-width:640px}
.pg-hero .breadcrumb{display:flex;align-items:center;gap:6px;margin-bottom:16px}
.pg-hero .breadcrumb a{font-size:.78rem;color:var(--tw-3);transition:color .2s;font-weight:500}
.pg-hero .breadcrumb a:hover{color:var(--accent)}
.pg-hero .breadcrumb span{font-size:.78rem;color:var(--tw-2);font-weight:500}
.pg-hero .breadcrumb svg{width:10px;height:10px;color:var(--tw-3);flex-shrink:0;opacity:.4}
.pg-hero h1{font-weight:700;font-size:clamp(2rem,4vw,3rem);line-height:1.08;letter-spacing:-.04em;color:#fff;margin-bottom:12px}
.pg-hero-desc{font-size:1rem;line-height:1.8;color:var(--tw-3);max-width:460px}
.pg-stats{display:flex;align-items:center;gap:24px;margin-top:clamp(28px,4vw,44px);padding-top:20px;border-top:1px solid rgba(255,255,255,.06)}
.pg-stat{font-size:.82rem;font-weight:500;color:var(--tw-3);display:flex;align-items:center;gap:8px}
.pg-stat strong{font-weight:700;color:#fff}
.pg-stat-dot{width:3px;height:3px;border-radius:50%;background:var(--tw-3);opacity:.4}

/* Section 2: Category Pills */
.cat-nav{background:var(--white);border-bottom:1px solid var(--b2);position:relative;z-index:40}
.cat-nav-in{display:flex;align-items:center;gap:10px;padding:14px 0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.cat-nav-in::-webkit-scrollbar{display:none}
.cat-pill{font-family:var(--font);font-size:.8rem;font-weight:600;padding:8px 20px;border-radius:100px;border:1.5px solid var(--b1);background:var(--white);color:var(--t3);cursor:pointer;transition:all .25s var(--ease);white-space:nowrap;display:flex;align-items:center;gap:6px}
.cat-pill:hover{border-color:var(--accent);color:var(--accent)}
.cat-pill.active{background:var(--accent);color:var(--hero-1);border-color:var(--accent);font-weight:700}
.cat-pill-count{font-size:.68rem;opacity:.6}

/* Section 3: Shop Layout */
.shop{display:grid;grid-template-columns:200px 1fr;gap:0;min-height:70vh;background:var(--white)}
.sidebar{border-right:1px solid var(--b2);padding:20px 20px 20px 0;position:sticky;top:calc(72px + 52px);align-self:start;max-height:calc(100vh - 124px);overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--t4) transparent}
.sidebar::-webkit-scrollbar{width:3px}.sidebar::-webkit-scrollbar-thumb{background:var(--t4);border-radius:2px}
.sb-group{margin-bottom:20px}.sb-group:last-child{margin-bottom:0}
.sb-title{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.12em;color:var(--t3);margin-bottom:10px}
.sb-opts{display:flex;flex-direction:column;gap:0}
.sb-opt{display:flex;align-items:center;gap:8px;padding:7px 0;cursor:pointer;transition:color .2s;font-size:.84rem;color:var(--t3);border:none;background:none;width:100%;text-align:left;font-family:var(--font)}
.sb-opt:hover{color:var(--t1)}
.sb-opt input[type="checkbox"]{appearance:none;-webkit-appearance:none;width:16px;height:16px;border:1.5px solid var(--b1);border-radius:4px;flex-shrink:0;position:relative;cursor:pointer;transition:all .2s;background:transparent}
.sb-opt input[type="checkbox"]:checked{background:var(--accent);border-color:var(--accent)}
.sb-opt input[type="checkbox"]:checked::after{content:'';position:absolute;top:2px;left:4.5px;width:5px;height:8px;border:solid var(--white);border-width:0 2px 2px 0;transform:rotate(45deg)}
.sb-opt .count{margin-left:auto;font-size:.7rem;color:var(--t4);font-weight:500}
.sb-divider{height:1px;background:var(--b2);margin:0 0 20px}
.sb-clear{font-size:.76rem;font-weight:700;color:var(--accent);cursor:pointer;background:none;border:none;padding:0;min-height:32px;transition:opacity .2s;font-family:var(--font)}
.sb-clear:hover{opacity:.6}

/* Toolbar */
.toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 0 14px 24px;border-bottom:1px solid var(--b2);flex-wrap:wrap}
.toolbar-left{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.toolbar-count{font-size:.82rem;color:var(--t3);font-weight:500}
.active-filters{display:flex;gap:6px;flex-wrap:wrap}
.active-pill{display:flex;align-items:center;gap:5px;padding:5px 14px;background:var(--accent-soft);border:1px solid var(--accent-mid);border-radius:100px;font-size:.74rem;font-weight:600;color:var(--accent);cursor:pointer;transition:all .2s;font-family:var(--font)}
.active-pill:hover{background:var(--accent-mid)}.active-pill svg{width:11px;height:11px}
.toolbar-right{display:flex;align-items:center;gap:12px}
.sort-select{font-family:var(--font);font-size:.82rem;color:var(--t2);border:1px solid var(--b1);border-radius:var(--radius-xs);padding:8px 30px 8px 14px;background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%236C7F94'/%3E%3C/svg%3E") no-repeat right 10px center;appearance:none;-webkit-appearance:none;cursor:pointer;min-height:36px}
.view-toggle{display:flex;border:1px solid var(--b1);border-radius:var(--radius-xs);overflow:hidden}
.view-btn{width:36px;height:36px;display:grid;place-items:center;background:var(--white);border:none;cursor:pointer;color:var(--t4);transition:all .2s}
.view-btn.active{background:var(--accent);color:var(--white)}.view-btn svg{width:14px;height:14px}

/* Product Grid */
.prod-area{padding-left:24px}
.prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding-top:24px;padding-bottom:clamp(60px,8vw,100px)}

/* Section 4: Product Cards */
.p-item{border-radius:var(--radius);overflow:hidden;background:var(--white);border:1px solid var(--b2);box-shadow:var(--sh-sm);transition:all .4s var(--ease);cursor:pointer;position:relative}
.p-item a.p-link{position:absolute;inset:0;z-index:3}
@media(hover:hover){.p-item:hover{box-shadow:var(--sh-lg);transform:translateY(-4px)}}
.p-img{aspect-ratio:1/1;overflow:hidden;background:var(--gray);position:relative}
.p-img img{width:100%;height:100%;object-fit:cover;filter:saturate(.65);transition:all .6s var(--ease)}
@media(hover:hover){.p-item:hover .p-img img{filter:saturate(.85);transform:scale(1.04)}}
.p-badges{position:absolute;top:10px;left:10px;display:flex;gap:4px;z-index:2}
.p-badge{font-size:.65rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:5px 12px;color:#fff;border-radius:100px}
.p-badge.hot{background:rgba(255,90,60,.85)}.p-badge.new{background:rgba(0,212,170,.85);color:var(--hero-1)}
.p-info{padding:16px 18px}
.p-cat{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);margin-bottom:5px}
.p-name{font-size:.96rem;font-weight:600;color:var(--t1);line-height:1.3;margin-bottom:4px}
.p-cas{font-size:.66rem;font-weight:500;color:var(--t4);letter-spacing:.02em;margin-bottom:6px;font-family:'SF Mono',SFMono-Regular,Consolas,monospace,var(--font)}
.p-desc{font-size:.84rem;color:var(--t3);line-height:1.6;margin-bottom:12px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.p-meta{display:flex;align-items:center;gap:12px;padding-top:12px;border-top:1px solid var(--b2)}
.p-purity{font-size:.82rem;font-weight:700;color:var(--t1);display:flex;align-items:center;gap:5px}
.p-purity svg{width:14px;height:14px;color:var(--accent)}
.p-stock{display:flex;align-items:center;gap:5px;font-size:.72rem;font-weight:600;margin-left:auto}
.p-stock-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.p-stock.instock .p-stock-dot{background:#22C55E;box-shadow:0 0 6px rgba(34,197,94,.4)}.p-stock.instock{color:#16A34A}
.p-stock.preorder .p-stock-dot{background:#F59E0B;box-shadow:0 0 6px rgba(245,158,11,.4)}.p-stock.preorder{color:#D97706}

/* List View */
.prod-grid.list-view{grid-template-columns:1fr;gap:12px}
.prod-grid.list-view .p-item{display:grid;grid-template-columns:180px 1fr;gap:0;align-items:stretch}
.prod-grid.list-view .p-img{aspect-ratio:auto;height:100%;min-height:140px}
.prod-grid.list-view .p-img img{height:100%;width:100%}
.prod-grid.list-view .p-info{padding:18px 24px;display:flex;flex-direction:column;justify-content:center}
.prod-grid.list-view .p-name{font-size:1.02rem}
.prod-grid.list-view .p-desc{-webkit-line-clamp:1;font-size:.86rem}
.prod-grid.list-view .p-meta{border-top:none;padding-top:0;margin-top:auto}

/* Empty */
.empty{grid-column:1/-1;text-align:center;padding:80px 20px}
.empty-icon{width:64px;height:64px;border-radius:16px;background:var(--accent-soft);display:grid;place-items:center;margin:0 auto 18px}
.empty-icon svg{width:28px;height:28px;color:var(--accent)}
.empty h3{font-size:1.15rem;color:var(--t1);margin-bottom:8px}.empty p{font-size:.92rem;color:var(--t3)}

/* Section 5: CTA */

/* Section 6: Trust Badges */
.trust-bar{background:var(--bg);border-top:1px solid var(--b2)}
.trust-bar-in{display:flex;align-items:center;justify-content:center;gap:clamp(20px,4vw,48px);padding:clamp(28px,4vw,44px) 0;flex-wrap:wrap}
.trust-item{display:flex;align-items:center;gap:10px;font-size:.86rem;font-weight:500;color:var(--t2)}
.trust-item svg{width:20px;height:20px;color:var(--accent);flex-shrink:0}
.trust-item strong{font-weight:700;color:var(--t1)}

/* Mobile Filter */
.mob-filter-btn{display:none;align-items:center;gap:7px;font-size:.82rem;font-weight:600;color:var(--t1);padding:9px 18px;border:1px solid var(--b1);border-radius:var(--radius-xs);background:var(--white);cursor:pointer;transition:all .2s;font-family:var(--font)}
.mob-filter-btn svg{width:15px;height:15px;color:var(--accent)}.mob-filter-btn:hover{border-color:var(--accent)}
.filter-overlay{display:none}

/* ══ RESPONSIVE ══ */
@media(max-width:1024px){.prod-grid{grid-template-columns:1fr 1fr}.prod-grid.list-view .p-item{grid-template-columns:160px 1fr}}
@media(max-width:900px){
  .shop{grid-template-columns:1fr}.sidebar{display:none}.prod-area{padding-left:0}.toolbar{padding:12px 0}
  .mob-filter-btn{display:flex}
  .filter-overlay{display:block;position:fixed;inset:0;z-index:200;background:rgba(17,29,46,.15);backdrop-filter:blur(4px);opacity:0;pointer-events:none;transition:opacity .3s}
  .filter-overlay.show{opacity:1;pointer-events:auto}
  .sidebar.mob-open{display:flex;flex-direction:column;position:fixed;top:0;left:0;z-index:201;width:280px;height:100vh;max-height:100vh;background:var(--white);border-right:1px solid var(--b2);padding:20px;overflow-y:auto;box-shadow:4px 0 40px rgba(17,29,46,.08)}
  .mob-sb-close{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;padding-bottom:14px;border-bottom:1px solid var(--b2)}
  .mob-sb-close h3{font-size:1rem;font-weight:700;color:var(--t1)}
  .mob-sb-close button{width:34px;height:34px;display:grid;place-items:center;background:none;border:1px solid var(--b1);border-radius:var(--radius-xs);cursor:pointer;color:var(--t3);transition:all .2s}
  .mob-sb-close button:hover{border-color:var(--accent);color:var(--accent)}.mob-sb-close button svg{width:14px;height:14px}
}
@media(max-width:640px){
  .pg-hero{padding:clamp(100px,14vh,130px) 0 clamp(36px,5vw,48px)}
  .pg-hero h1{font-size:clamp(1.7rem,6vw,2.2rem)}.pg-stats{flex-wrap:wrap;gap:12px 20px}
  .prod-grid{grid-template-columns:1fr 1fr;gap:12px}.prod-grid.list-view .p-item{grid-template-columns:100px 1fr}
  .trust-bar-in{gap:16px 28px}.trust-item{font-size:.78rem}
  .cat-pill{padding:7px 16px;font-size:.76rem}
  .p-info{padding:12px 14px}.p-name{font-size:.88rem}.p-desc{font-size:.8rem;-webkit-line-clamp:1}.p-cas{display:none}
}
@media(max-width:374px){.prod-grid,.prod-grid.list-view{grid-template-columns:1fr}.trust-bar-in{flex-direction:column;gap:12px}}