/**
 * Collections Shop — Product Catalog
 *
 * Full-catalog shopping grid for all SkyyRose collections.
 * Used by template-collections-shop.php.
 *
 * @package SkyyRose_Flagship
 * @since   3.2.0
 */

/* ═══ COLLECTIONS CATALOG — FULL SHOP ═══ */

:root{
--void:#050505;--obsidian:#0A0A0A;--charcoal:#141414;--smoke:#1E1E1E;
--graphite:#2A2A2A;--ash:#7A7A7A;--slate:#7E7E7E;--mist:#888;--silver:#AAA;
--bone:#E8E4DF;--cream:#F5F0EB;--white:#FAFAFA;
--rose:#B76E79;--rose-dim:rgba(183,110,121,0.12);--rose-glow:rgba(183,110,121,0.35);
--blood:#8B0000;--blood-dim:rgba(139,0,0,0.12);
--gold:#D4AF37;--gold-dim:rgba(212,175,55,0.10);
--font-display:'Bebas Neue','Impact',sans-serif;
--font-editorial:'Cormorant Garamond','Georgia',serif;
--font-heading:'Playfair Display','Georgia',serif;
--font-body:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
--ease-expo:cubic-bezier(0.16,1,0.3,1);
--ease-smooth:cubic-bezier(0.25,0.1,0.25,1);
--nav-h:64px;
--container:min(90vw,1400px);
}

a:focus-visible,button:focus-visible{outline:2px solid var(--rose);outline-offset:3px;border-radius:2px}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Hero */
.shop-hero{padding:clamp(100px,15vw,160px) clamp(20px,4vw,48px) clamp(40px,6vw,80px);
text-align:center;position:relative}
.shop-hero::before{content:"";position:absolute;inset:0;
background:radial-gradient(ellipse at 50% 40%,rgba(183,110,121,.06) 0%,transparent 60%)}
.shop-hero-label{font-family:var(--font-body);font-size:10px;letter-spacing:6px;
text-transform:uppercase;color:var(--mist);margin-bottom:16px}
.shop-hero h1{font-family:var(--font-display);font-size:clamp(48px,10vw,96px);
letter-spacing:clamp(4px,1vw,12px);color:var(--white);line-height:.9;margin:0 0 20px}
.shop-hero-sub{font-family:var(--font-editorial);font-size:clamp(16px,2.5vw,22px);
color:var(--silver);font-style:italic;max-width:600px;margin:0 auto;line-height:1.6}
.shop-count{font-family:var(--font-body);font-size:12px;letter-spacing:2px;color:var(--ash);
margin-top:24px}

/* Collection Tabs */
.shop-tabs{position:sticky;top:var(--nav-h);z-index:100;
background:rgba(10,10,10,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
padding:16px clamp(20px,4vw,48px);display:flex;justify-content:center;
gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--graphite)}
.shop-tab{font-family:var(--font-body);font-size:11px;letter-spacing:3px;
text-transform:uppercase;color:var(--mist);background:transparent;
border:1px solid var(--graphite);padding:10px clamp(16px,2vw,28px);
border-radius:3px;cursor:pointer;transition:all .3s var(--ease-expo);white-space:nowrap}
.shop-tab:hover{border-color:var(--ash);color:var(--bone)}
.shop-tab.active{background:var(--white);color:var(--void);border-color:var(--white)}
.shop-tab[data-collection="black-rose"].active{background:var(--white);color:var(--void)}
.shop-tab[data-collection="love-hurts"].active{background:var(--blood);color:var(--white);border-color:var(--blood)}
.shop-tab[data-collection="signature"].active{background:var(--gold);color:var(--void);border-color:var(--gold)}

/* Product Grid */
.shop-grid-wrap{padding:clamp(32px,5vw,64px) clamp(20px,4vw,48px);max-width:1400px;margin:0 auto}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
gap:clamp(16px,2.5vw,28px)}

.shop-product{border:1px solid var(--graphite);border-radius:4px;overflow:hidden;
transition:border-color .4s,transform .4s var(--ease-expo);position:relative}
.shop-product:hover{border-color:var(--ash);transform:translateY(-4px)}
.shop-product.hidden{display:none}

.shop-product-img{position:relative;aspect-ratio:3/4;background:var(--charcoal);
display:flex;align-items:center;justify-content:center;overflow:hidden}
.shop-product-img svg{width:30%;opacity:.06}
.shop-product-img .badge{position:absolute;top:12px;right:12px;font-family:var(--font-body);
font-size:8px;letter-spacing:2px;text-transform:uppercase;padding:5px 12px;border-radius:2px}
.badge-new{background:var(--rose);color:var(--white)}
.badge-ltd{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:var(--bone)}
.badge-core{background:var(--gold);color:var(--void)}

.shop-product-body{padding:clamp(16px,2vw,24px)}
.shop-product-col{font-family:var(--font-body);font-size:9px;letter-spacing:3px;
text-transform:uppercase;color:var(--mist);margin-bottom:6px}
.shop-product-name{font-family:var(--font-heading);font-size:clamp(16px,1.8vw,20px);
color:var(--bone);margin-bottom:12px;line-height:1.3}
.shop-product-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.shop-product-price{font-family:var(--font-display);font-size:16px;letter-spacing:2px;color:var(--white)}
.shop-product-spec{font-family:var(--font-body);font-size:10px;letter-spacing:1px;color:var(--ash)}
.shop-product-actions{display:flex;gap:8px}
.shop-action-btn{flex:1;padding:10px 0;font-family:var(--font-body);font-size:10px;
letter-spacing:2px;text-transform:uppercase;border:1px solid var(--graphite);
background:transparent;color:var(--mist);border-radius:2px;cursor:pointer;transition:all .3s}
.shop-action-btn:hover{border-color:var(--ash);color:var(--bone)}
.shop-action-primary{background:var(--rose);border-color:var(--rose);color:var(--white)}
.shop-action-primary:hover{background:var(--bone);border-color:var(--bone);color:var(--void)}

/* Collection Banners */
.shop-banner{padding:clamp(32px,5vw,56px) clamp(20px,4vw,48px);text-align:center;
border-top:1px solid var(--graphite);border-bottom:1px solid var(--graphite);
margin:clamp(24px,4vw,48px) 0}
.shop-banner-label{font-family:var(--font-body);font-size:9px;letter-spacing:5px;
text-transform:uppercase;color:var(--mist);margin-bottom:8px}
.shop-banner h2{font-family:var(--font-display);font-size:clamp(28px,5vw,48px);
letter-spacing:clamp(3px,.8vw,8px);color:var(--white);margin:0 0 8px;line-height:1}
.shop-banner-desc{font-family:var(--font-editorial);font-size:clamp(14px,1.5vw,17px);
color:var(--silver);font-style:italic;max-width:500px;margin:0 auto}
.shop-banner-link{display:inline-flex;align-items:center;gap:8px;margin-top:16px;
font-family:var(--font-body);font-size:11px;letter-spacing:3px;text-transform:uppercase;
color:var(--rose);text-decoration:none;transition:gap .3s}
.shop-banner-link:hover{gap:14px}

/* CTA */
.shop-cta{padding:clamp(64px,10vw,120px) clamp(20px,4vw,48px);text-align:center;
position:relative}
.shop-cta::before{content:"";position:absolute;inset:0;
background:radial-gradient(ellipse at 50% 50%,rgba(183,110,121,.08) 0%,transparent 60%)}
.shop-cta-label{font-family:var(--font-body);font-size:10px;letter-spacing:6px;
text-transform:uppercase;color:var(--mist);margin-bottom:12px}
.shop-cta h2{font-family:var(--font-display);font-size:clamp(36px,7vw,64px);
letter-spacing:clamp(3px,.8vw,8px);color:var(--white);margin:0 0 16px}
.shop-cta-desc{font-family:var(--font-editorial);font-size:clamp(15px,1.8vw,19px);
color:var(--silver);font-style:italic;max-width:500px;margin:0 auto 28px;line-height:1.6}
.shop-cta-btn{display:inline-block;font-family:var(--font-body);font-size:12px;
letter-spacing:4px;text-transform:uppercase;color:var(--void);
background:var(--bone);padding:16px 48px;text-decoration:none;
border-radius:2px;transition:all .4s var(--ease-expo)}
.shop-cta-btn:hover{background:var(--rose);color:var(--white);transform:translateY(-2px)}

/* Grain Overlay */
.shop-grain{position:fixed;inset:0;z-index:9990;pointer-events:none;opacity:.015;
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Responsive */
@media(max-width:600px){.shop-grid{grid-template-columns:1fr 1fr}}
@media(max-width:400px){.shop-grid{grid-template-columns:1fr}}