/* ═══════════════════════════════════════════════════════════
   REPPIN STUDIOS — storefront.css
   Venue storefront page. Venue accent comes from --accent /
   --accent-deep / --on-accent-* (set at runtime from
   venue-config.js theme{}). Requires base.css first.
   ═══════════════════════════════════════════════════════════ */

/* ── Hero ── */
.store-hero{position:relative;padding:100px 48px 40px;overflow:hidden;min-height:400px;display:flex;align-items:center}
.store-hero-bg{position:absolute;inset:0;z-index:0;background:radial-gradient(ellipse 80% 70% at 60% 40%,color-mix(in srgb,var(--accent) 35%,transparent) 0%,transparent 60%),radial-gradient(ellipse 50% 60% at 20% 80%,rgba(196,18,48,0.08) 0%,transparent 50%),radial-gradient(ellipse 60% 50% at 80% 20%,color-mix(in srgb,var(--accent-deep) 20%,transparent) 0%,transparent 60%);animation:heroShift 12s ease-in-out infinite alternate}
.store-hero-photo{position:absolute;inset:0;z-index:0;background-image:var(--hero-photo);background-size:cover;background-position:center 30%;opacity:0.12;filter:grayscale(0.4) brightness(0.7);mask-image:linear-gradient(to bottom,rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.4) 60%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0.7) 0%,rgba(0,0,0,0.4) 60%,transparent 100%)}
@keyframes heroShift{0%{filter:hue-rotate(0deg) brightness(1)}50%{filter:hue-rotate(-3deg) brightness(1.05)}100%{filter:hue-rotate(2deg) brightness(0.97)}}
.store-hero-grid{position:absolute;inset:0;z-index:1;background-image:linear-gradient(rgba(255,255,255,0.015) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,0.015) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse 70% 60% at 60% 40%,black 20%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse 70% 60% at 60% 40%,black 20%,transparent 70%)}
.store-hero-content{position:relative;z-index:10;display:flex;flex-direction:column;gap:20px}
.store-eyebrow{font-size:12px;letter-spacing:0.28em;text-transform:uppercase;color:var(--cream);display:flex;align-items:center;gap:14px;font-weight:600;opacity:0;animation:fadeUp 0.7s var(--ease-out-expo) 0.2s both}
.store-eyebrow::before{content:'';width:36px;height:1.5px;background:linear-gradient(90deg,var(--red),rgba(196,18,48,0.3))}
.store-hero h1{font-family:'Bebas Neue',sans-serif;font-size:clamp(56px,9vw,130px);line-height:0.95;letter-spacing:-0.01em;opacity:0;animation:fadeUp 0.9s var(--ease-out-expo) 0.35s both}
.store-hero h1 em{font-family:'Instrument Serif',serif;font-style:italic;color:var(--red);display:inline-block;transition:color 0.4s ease;padding:0 0.05em}
.venue-logo-img{max-width:clamp(320px,45vw,650px);height:auto;display:block;opacity:0;animation:fadeUp 0.9s var(--ease-out-expo) 0.35s both;filter:drop-shadow(0 4px 30px rgba(0,0,0,0.3))}
.store-hero-sub{font-size:16px;font-weight:300;line-height:1.72;max-width:520px;color:rgba(245,240,232,0.7);opacity:0;animation:fadeUp 0.8s var(--ease-out-expo) 0.5s both}
.store-hero-meta{display:flex;gap:24px;align-items:center;opacity:0;animation:fadeUp 0.8s var(--ease-out-expo) 0.6s both;margin-top:8px}
.meta-tag{font-size:10px;letter-spacing:0.22em;text-transform:uppercase;color:rgba(245,240,232,0.45);border:1px solid rgba(255,255,255,0.1);padding:6px 14px;backdrop-filter:blur(8px);background:rgba(255,255,255,0.02)}

/* ── Venue stat bar (accent background; text colors adapt via --on-accent-*) ── */
.venue-bar{display:flex;width:100%;background:linear-gradient(135deg,var(--accent),var(--accent-deep));opacity:0;animation:fadeUp 0.7s var(--ease-out-expo) 0.7s both}
.venue-stat{flex:1;display:flex;flex-direction:column;gap:4px;padding:20px 32px;border-right:1px solid var(--on-accent-border);transition:background 0.3s ease}
.venue-stat:last-child{border-right:none}
.venue-stat:hover{background:var(--on-accent-hover)}
.venue-stat-label{font-size:10px;letter-spacing:0.2em;text-transform:uppercase;color:var(--on-accent-soft)}
.venue-stat-val{font-family:'Instrument Serif',serif;font-size:16px;font-style:italic;color:var(--on-accent-strong)}
.venue-bar-rule{width:100%;height:1px;background:rgba(255,255,255,0.06);margin-top:8px}

/* ── Filter bar ── */
.filter-bar{padding:24px 48px;border-bottom:1px solid rgba(255,255,255,0.06);display:flex;align-items:center;justify-content:space-between;gap:24px}
.filter-tabs{display:flex;gap:4px}
.filter-tab{font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:rgba(245,240,232,0.4);padding:10px 20px;cursor:pointer;transition:all 0.3s var(--ease-out-expo);background:none;border:1px solid transparent;font-family:'DM Sans',sans-serif;font-weight:600}
.filter-tab:hover{color:rgba(245,240,232,0.7);border-color:rgba(255,255,255,0.06)}
.filter-tab.active{color:var(--cream);background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.1)}
.filter-right{font-size:11px;letter-spacing:0.14em;text-transform:uppercase;color:rgba(245,240,232,0.35);font-weight:500}

/* ── Product grid ── */
.products-section{padding:60px 48px 100px}
.products-eyebrow{margin-bottom:40px;opacity:0;animation:fadeUp 0.7s var(--ease-out-expo) 0.2s both}
.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr));gap:32px}
.product-card-link{text-decoration:none;color:inherit}
.product-card{background:var(--dark-card);position:relative;overflow:hidden;cursor:pointer;transition:all 0.5s var(--ease-out-expo);border:1px solid rgba(255,255,255,0.04)}
.product-card:hover{border-color:rgba(255,255,255,0.08);transform:translateY(-4px);box-shadow:0 20px 60px rgba(0,0,0,0.4)}
.product-card::after{content:'';position:absolute;bottom:0;left:0;right:0;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform 0.5s var(--ease-out-expo)}
.product-card:hover::after{transform:scaleX(1)}
.product-images{position:relative;background:var(--cream);aspect-ratio:1;overflow:hidden}
.product-images img{width:100%;height:100%;object-fit:cover;transition:opacity 0.5s ease,transform 0.6s var(--ease-out-expo)}
.product-images .img-back{position:absolute;inset:0;opacity:0}
.product-card:hover .img-front{opacity:0}
.product-card:hover .img-back{opacity:1}
.product-card.no-back-image:hover .img-front{opacity:1}
.product-card:hover .product-images img{transform:scale(1.02)}
.product-badge{position:absolute;top:16px;left:16px;z-index:2;font-size:9px;letter-spacing:0.22em;text-transform:uppercase;font-weight:700;padding:6px 12px;background:var(--red);color:white}
.product-badge.artist{background:var(--accent)}
.product-info{padding:28px 24px;display:flex;flex-direction:column;gap:12px}
.product-artist{font-size:10px;letter-spacing:0.22em;text-transform:uppercase;color:var(--red);font-weight:600;display:flex;align-items:center;gap:8px}
.product-artist::before{content:'';width:16px;height:1px;background:var(--red)}
.product-name{font-family:'Instrument Serif',serif;font-size:22px;font-style:italic;color:var(--cream);line-height:1.2;transition:color 0.3s ease}
.product-card:hover .product-name{color:white}
.product-desc{font-size:13px;line-height:1.65;color:rgba(245,240,232,0.5);font-weight:300}
.product-price{font-family:'Bebas Neue',sans-serif;font-size:28px;color:var(--cream);letter-spacing:0.02em}

/* Mobile auto-flip (front→back as card scrolls past) */
@media(max-width:768px){
  .product-images .img-front{transition:opacity 0.3s ease}
  .product-images .img-back{transition:opacity 0.3s ease}
  .product-card.auto-flipped .product-images .img-front{opacity:0}
  .product-card.auto-flipped .product-images .img-back{opacity:1}
  .product-card.no-back-image.auto-flipped .product-images .img-front{opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .product-images .img-front,.product-images .img-back{transition:none!important}
}

/* ── About / story ── */
.about-venue{padding:120px 48px;background:var(--dark);position:relative;overflow:hidden}
.about-venue::before{content:'';position:absolute;top:-100px;right:-100px;width:500px;height:500px;background:radial-gradient(circle,color-mix(in srgb,var(--accent) 12%,transparent),transparent 60%);pointer-events:none}
.about-inner{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
.about-text{display:flex;flex-direction:column;gap:16px}
.about-text .section-eyebrow{font-size:12px;letter-spacing:0.28em;text-transform:uppercase;color:var(--cream);margin-bottom:0;display:flex;align-items:center;gap:14px;font-weight:600}
.about-text .section-eyebrow::before{content:'';width:32px;height:1.5px;background:linear-gradient(90deg,var(--red),rgba(196,18,48,0.3))}
.about-text h2{font-family:'Bebas Neue',sans-serif;font-size:clamp(42px,6vw,80px);line-height:0.95;letter-spacing:0.01em}
.about-text h2 em{font-family:'Instrument Serif',serif;font-style:italic;color:var(--red)}
.about-body{font-size:15px;line-height:1.8;color:rgba(245,240,232,0.65);font-weight:300;margin-top:8px}
.about-details{display:flex;gap:40px;margin-top:28px}
.about-detail{display:flex;flex-direction:column;gap:4px}
.about-detail-label{font-size:10px;letter-spacing:0.22em;text-transform:uppercase;color:rgba(245,240,232,0.35);font-weight:600}
.about-detail-val{font-family:'Instrument Serif',serif;font-size:15px;font-style:italic;color:rgba(245,240,232,0.75)}

/* ── Carousel ── */
.about-carousel{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,0.04)}
.carousel-track{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden}
.carousel-slide{position:absolute;inset:0;opacity:0;transition:opacity 0.6s ease}
.carousel-slide.active{opacity:1}
.carousel-slide img{width:100%;height:100%;object-fit:cover}
.carousel-controls{display:flex;align-items:center;justify-content:center;gap:16px;padding:16px 0;background:rgba(0,0,0,0.3);position:absolute;bottom:0;left:0;right:0;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.carousel-arrow{width:36px;height:36px;border:1px solid rgba(255,255,255,0.15);background:rgba(0,0,0,0.3);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all 0.3s ease}
.carousel-arrow:hover{border-color:var(--red);background:rgba(196,18,48,0.15)}
.carousel-arrow svg{width:16px;height:16px;stroke:var(--cream);fill:none;stroke-width:2}
.carousel-dots{display:flex;gap:6px}
.carousel-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,0.25);cursor:pointer;transition:all 0.3s ease;border:none;padding:0}
.carousel-dot.active{background:var(--red);box-shadow:0 0 8px rgba(196,18,48,0.4)}

/* ── Marquee ── */
.marquee-wrap{background:var(--black);border-top:1px solid rgba(255,255,255,0.06);border-bottom:1px solid rgba(255,255,255,0.06);overflow:hidden;padding:14px 0;position:relative}
.marquee-wrap::before,.marquee-wrap::after{content:'';position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none}
.marquee-wrap::before{left:0;background:linear-gradient(90deg,var(--black),transparent)}
.marquee-wrap::after{right:0;background:linear-gradient(-90deg,var(--black),transparent)}
.marquee-track{display:flex;gap:48px;animation:marquee 28s linear infinite;white-space:nowrap}
.marquee-track span{font-family:'Bebas Neue',sans-serif;font-size:13px;letter-spacing:0.18em;color:rgba(255,255,255,0.6);flex-shrink:0}
.marquee-track .dot{color:var(--red);opacity:0.7}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee-track{animation:none}}

/* ── Responsive ── */
@media(max-width:900px){
  .about-inner{grid-template-columns:1fr;gap:48px}
}
@media(max-width:768px){
  .store-hero{padding:72px 20px 36px}
  .venue-logo-img{max-width:min(340px,85vw)}
  .filter-tab{white-space:nowrap;padding:10px 14px;font-size:10px;letter-spacing:0.14em}
  .filter-bar{padding:16px 20px;flex-direction:column;align-items:flex-start;gap:12px}
  .filter-tabs{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;max-width:100%}
  .filter-tabs::-webkit-scrollbar{display:none}
  .filter-right{display:none}
  .products-section{padding:32px 20px 80px}
  .products-grid{grid-template-columns:1fr 1fr;gap:12px}
  .product-info{padding:16px 12px}
  .product-name{font-size:16px}
  .product-price{font-size:22px}
  .product-desc{display:none}
  .about-venue{padding:60px 20px}
  .about-inner{grid-template-columns:1fr;gap:32px}
  .about-details{flex-wrap:wrap;gap:20px}
  .venue-bar{flex-wrap:wrap}
  .venue-stat{flex:1 1 50%;padding:14px 16px;border-bottom:1px solid var(--on-accent-border)}
  .venue-stat-val{font-size:14px}
  .about-text h2{font-size:clamp(48px,10vw,80px)}
  .store-hero-meta{flex-wrap:nowrap;gap:8px}
  .meta-tag{font-size:9px;padding:5px 10px;letter-spacing:0.15em}
  .marquee-track{gap:32px}
}
@media(max-width:480px){
  .products-grid{grid-template-columns:1fr}
  .store-hero h1{font-size:clamp(36px,10vw,60px)}
  .venue-logo-img{max-width:min(320px,85vw)}
  .about-details{flex-direction:column;gap:16px}
  .store-hero-sub{font-size:14px}
}