/*
 * collection.css
 * Styles for the product collection / PLP page
 * Extracted from collection.html inline <style> block
 * Duplicates of shared.css/colors.css removed
 */

/* ═══ NAV override: collection page starts with semi-transparent nav ═══ */
/* override: intentional for collection page — nav starts blurred unlike homepage */
nav{background:rgba(5,5,5,.3);backdrop-filter:blur(0.75rem);border-bottom:0.0625rem solid transparent}
.nav-links a.active{color:var(--plat)}
.nav-links a.active::after{transform:scaleX(1)}

/* ═══ HERO ═══ */
.plp-hero{position:relative;min-height:62vh;display:flex;align-items:center;overflow:hidden;padding-top:4.5rem}
.plp-hero-bg{position:absolute;inset:0;z-index:0;background:linear-gradient(to bottom,rgba(5,5,5,.88),rgba(5,5,5,.7)),url('../images/about-hero.png') center/cover no-repeat;transform:scale(1.05)}
.plp-hero-vgr{position:absolute;inset:0;z-index:1;background:linear-gradient(to bottom,transparent 60%,var(--bg) 100%)}
.plp-hero-ct{position:relative;z-index:2;padding:0 3.25rem;width:100%;max-width:80rem;margin:0 auto}
.plp-hero-ct .tlabel{display:block;margin-bottom:1.25rem;opacity:0;animation:sUp .6s .3s forwards}
.plp-hero-ct h1{font-family:'Bebas Neue',sans-serif;font-size:clamp(4rem,9vw,9rem);line-height:.88;color:var(--plat);opacity:0;animation:sUp .8s .45s forwards}
.plp-hero-ct h1 em{color:var(--ember);font-style:normal}
.plp-hero-ct p{font-size:1rem;color:var(--silver);max-width:32.5rem;line-height:1.85;margin-top:1.375rem;opacity:0;animation:sUp .7s .65s forwards}

/* ═══ CATEGORY TABS ═══ */
.cat-sec{padding:5rem 0 2.5rem;background:var(--bg)}
.cat-bar{display:flex;justify-content:center;gap:0;border-bottom:0.0625rem solid var(--faint);flex-wrap:wrap}
.cat-btn{position:relative;font-family:'Bebas Neue',sans-serif;font-size:1.4rem;letter-spacing:.12em;color:var(--silver);background:transparent;border:none;padding:1.5rem 3rem;transition:color .3s;text-transform:uppercase}
.cat-btn:hover{color:var(--plat)}
.cat-btn.active{color:var(--plat)}
.cat-btn::after{content:'';position:absolute;bottom:-0.0625rem;left:0;right:0;height:0.125rem;background:var(--ember);transform:scaleX(0);transition:transform .4s cubic-bezier(.16,1,.3,1)}
.cat-btn.active::after{transform:scaleX(1)}
.cat-desc{text-align:center;max-width:37.5rem;margin:2rem auto 0;color:var(--silver);font-size:.9rem;line-height:1.8;min-height:3.6em;transition:opacity .4s}

/* ═══ PRODUCT GRID ═══ */
.grid-sec{padding:2.5rem 0 8rem;background:var(--bg);min-height:37.5rem}
.prod-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(24rem,1fr));gap:2.25rem 0.1875rem;opacity:1;transform:none;transition:opacity .4s,transform .4s;justify-items:center}
.prod-grid.switching{opacity:0;transform:translateY(0.75rem)}
@media(min-width:64.0625rem){
  .grid-sec .wrap{max-width:120rem;padding:0 1.25rem}
  .prod-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem .75rem;justify-items:stretch}
  .prod-grid .pc{width:100%;max-width:none}
  .prod-grid .pc-img{height:24rem}
}

/* ═══ MODAL ═══ */
#p-modal{position:fixed;inset:0;z-index:900;background:rgba(5,5,5,.95);backdrop-filter:blur(1rem);opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s;overflow-y:auto}
#p-modal.open{opacity:1;visibility:visible}
.p-modal-inner{max-width:75rem;margin:0 auto;padding:6.25rem 3.25rem 3.75rem;position:relative}
.p-modal-close{position:fixed;top:1.75rem;right:2.25rem;width:3rem;height:3rem;border:0.0625rem solid var(--faint);background:var(--l1);color:var(--silver);display:flex;align-items:center;justify-content:center;transition:all .25s;z-index:10}
.p-modal-close:hover{border-color:var(--border-e);color:var(--ember);transform:rotate(90deg)}
.p-modal-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:4rem;align-items:start}
.p-info .tlabel{margin-bottom:1rem;display:block}
.p-info h2{font-family:'Bebas Neue',sans-serif;font-size:clamp(2.8rem,4vw,4.2rem);line-height:.92;color:var(--plat);margin-bottom:0.5rem}
.p-info h2 em{color:var(--ember);font-style:normal}

/* ═══ WHY NO CHECKOUT ═══ */
.why-sec{background:var(--l1);padding:8rem 0;position:relative;overflow:hidden}
.why-sec::before{content:'';position:absolute;top:0;left:0;right:0;height:0.0625rem;background:linear-gradient(90deg,transparent,var(--ember),transparent)}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:5rem;align-items:center;margin-top:3.75rem}
.why-img{position:relative;height:32.5rem;overflow:hidden;border:0.0625rem solid var(--faint)}
.why-img img{width:100%;height:100%;object-fit:cover;filter:brightness(.6) saturate(.55);transition:transform 12s ease}
.why-img:hover img{transform:scale(1.05)}
.why-img::after{content:'';position:absolute;inset:0;background:linear-gradient(to right,transparent 50%,var(--l1) 100%)}
.why-content h3{font-family:'Bebas Neue',sans-serif;font-size:clamp(2rem,3.5vw,3.2rem);line-height:.95;color:var(--plat);margin-bottom:1.5rem}
.why-content h3 em{color:var(--ember);font-style:normal}
.why-content p{font-size:.9rem;color:var(--silver);line-height:1.88;margin-bottom:1.125rem;max-width:30rem}
.why-stats{display:grid;grid-template-columns:1fr 1fr;gap:0.125rem;background:var(--faint);margin-top:2.25rem}
.ws{background:var(--bg);padding:1.75rem 1.5rem;text-align:center}
.ws-n{font-family:'Bebas Neue',sans-serif;font-size:2.8rem;color:var(--plat);line-height:1}
.ws-l{font-family:'IBM Plex Mono',monospace;font-size:.58rem;letter-spacing:.18em;color:var(--silver);text-transform:uppercase;margin-top:0.5rem}

/* ═══ SCARCITY BAR ═══ */
.scarcity-bar{background:var(--ember);padding:1.125rem 0;text-align:center;position:relative;overflow:hidden}
.scarcity-bar p{font-family:'IBM Plex Mono',monospace;font-size:.65rem;letter-spacing:.22em;text-transform:uppercase;color:var(--bg);display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap}
.scarcity-bar .dot{width:0.25rem;height:0.25rem;border-radius:50%;background:rgba(5,5,5,.35)}

/* ═══ KEYFRAMES ═══ */
@keyframes sUp{from{opacity:0;transform:translateY(1.75rem)}to{opacity:1;transform:none}}

/* ═══ RESPONSIVE ═══ */
@media(max-width:64rem) and (min-width:48rem){
  .plp-hero-ct{background:linear-gradient(180deg,rgba(7,7,7,.9),rgba(12,12,12,.7));border:0.0625rem solid var(--faint);border-left:0.25rem solid var(--ember);border-radius:1.25rem;padding:2.25rem 2rem;box-shadow:0 2rem 4rem rgba(0,0,0,.55)}
}

@media(max-width:64rem){
  .plp-hero-ct{padding:0 1.75rem}
  .prod-grid{grid-template-columns:1fr 1fr;gap:1.75rem 0.75rem;justify-items:stretch}
  .pc{width:100%;max-width:none}
  .pc-img{height:19rem;cursor:pointer}
  .pc-name{font-size:1.3rem}
  .pc-price{font-size:1.4rem}
  .p-modal-grid{grid-template-columns:1fr}
  .p-gallery{position:static}
  .why-grid{grid-template-columns:1fr;gap:3rem}
  .why-img{height:22.5rem}
  .why-img::after{background:linear-gradient(to top,transparent 0%,var(--l1) 100%)}
}
@media(max-width:48rem){
  .plp-hero-ct{padding:0 1.375rem}
  .prod-grid{grid-template-columns:1fr;gap:1.25rem;opacity:1 !important;transform:none !important}
  .pc{width:100%;max-width:none}
  .pc-img{height:18rem;padding:0}
  .pc-body{padding:0.75rem 0.75rem 0.9rem}
  .pc-name{font-size:1.15rem}
  .pc-price{font-size:1.3rem}
  .pc-btn{font-size:.72rem;padding:0.6rem 1rem}
  .pc-cat{font-size:.48rem}
  .cat-bar{gap:0.625rem;border-bottom:none}
  .cat-btn{padding:0.875rem 1rem;font-size:.92rem;border:0.0625rem solid var(--faint);background:var(--l1);border-radius:62.4375rem;flex:1 1 calc(33.333% - 0.625rem);min-width:0}
  .cat-btn::after{display:none}
  .cat-btn.active{border-color:var(--ember);background:var(--ember);color:var(--bg)}
  .cat-desc{margin-top:1.375rem;min-height:auto}
  .p-modal-inner{padding:5rem 1.375rem 2.5rem}
  .p-main-img{height:18.75rem}
  .why-stats{grid-template-columns:1fr}
  .p-cta-row{flex-direction:column}
  .p-cta-row .btn-p,.p-cta-row .btn-o{width:100%;justify-content:center}
}
@media(max-width:26rem){
  .prod-grid{grid-template-columns:1fr;gap:1rem}
  .pc-img{height:16rem;padding:0}
  .pc-body{padding:0.9rem 1rem 1rem}
  .pc-name{font-size:1.4rem}
  .pc-price{font-size:1.5rem}
  .pc-btn{font-size:.75rem;padding:0.6rem 1rem}
}