/* =========================================================
   Hard House Nation — site stylesheet
   ========================================================= */

:root{
  --bg:#050810; --bg-panel:#0b0e18; --bg-panel-2:#111524; --line:#1c2032;
  --fg:#f4f5f8; --muted:#8b90a0;
  --magenta:#ff2f92; --cyan:#28e0ff;
  --grad: linear-gradient(90deg, var(--cyan), var(--magenta));
  --max:1240px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--bg); color:var(--fg); font-family:'Inter',sans-serif; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
h1,h2,h3,h4{font-family:'Rajdhani',sans-serif; font-weight:700; text-transform:uppercase; letter-spacing:.02em; margin:0;}
.eyebrow{font-family:'Space Grotesk',sans-serif; font-size:12px; letter-spacing:.35em; text-transform:uppercase; color:var(--muted);}
a{color:inherit;}
img{max-width:100%; display:block;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 32px;}
.wrap-narrow{max-width:940px; margin:0 auto; padding:0 32px;}
:focus-visible{outline:2px solid var(--cyan); outline-offset:3px;}

/* ---------- Nav / header ---------- */
header{position:fixed; top:0; left:0; right:0; z-index:100; background:rgba(5,8,16,.72); backdrop-filter:blur(10px); border-bottom:1px solid var(--line);}

/* Slim bar above the main nav row, holding just the social icons. Its
   own height (icon + padding) is baked into the .hero/.page-banner
   top-padding values below, since the header is fixed and everything
   else needs to clear it. */
.top-bar{border-bottom:1px solid var(--line);}
.top-bar .wrap{display:flex; justify-content:flex-end; align-items:center; padding-top:8px; padding-bottom:8px;}
.social-icons-topbar .social-icon{width:28px; height:28px;}
.social-icons-topbar .social-icon svg{width:15px; height:15px;}

nav.wrap{display:flex; align-items:center; justify-content:space-between; height:96px;}
.nav-logo img{height:52px;}
.nav-links{display:flex; gap:36px; list-style:none; margin:0; padding:0; font-family:'Space Grotesk',sans-serif; font-size:13px; letter-spacing:.14em; text-transform:uppercase;}
.nav-links a{text-decoration:none; color:var(--fg); opacity:.8; transition:opacity .2s, color .2s;}
.nav-links a:hover, .nav-links a.active{opacity:1; color:var(--cyan);}

.nav-toggle{display:none; background:none; border:none; color:var(--fg); cursor:pointer; padding:8px;}
.nav-toggle svg{width:24px; height:24px;}
.cart-icon{position:relative; display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; color:var(--fg); text-decoration:none; opacity:.85; transition:opacity .2s ease, color .2s ease;}
.cart-icon:hover{opacity:1; color:var(--cyan);}
.cart-icon svg{width:21px; height:21px;}
.cart-count{position:absolute; top:2px; right:2px; min-width:15px; height:15px; padding:0 3px; border-radius:50%; background:var(--magenta); color:#fff; font-family:'Space Grotesk',sans-serif; font-size:9px; font-weight:700; display:flex; align-items:center; justify-content:center; line-height:1;}

.social-icons{display:flex; align-items:center; gap:6px;}
.social-icon{display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; color:var(--fg); opacity:.75; transition:opacity .2s ease, color .2s ease;}
.social-icon:hover{opacity:1; color:var(--cyan);}
.social-icon svg{width:18px; height:18px;}
.social-icons-mobile{margin-top:22px;}
.social-icons-footer{gap:4px;}

.mobile-panel{display:none; position:fixed; inset:80px 0 0 0; z-index:99; background:var(--bg); padding:32px; flex-direction:column; gap:26px;}
.mobile-panel.open{display:flex;}
.mobile-panel a{font-family:'Rajdhani',sans-serif; font-size:26px; font-weight:600; text-transform:uppercase; text-decoration:none; color:var(--fg);}

/* ---------- Buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:'Rajdhani',sans-serif; font-weight:700; font-size:15px; letter-spacing:.06em; text-transform:uppercase; padding:14px 27px; text-decoration:none; cursor:pointer; border:1px solid transparent; border-radius:2px; transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;}
.btn-primary{background:linear-gradient(90deg, #ff3fb4, #ff3450); color:#0a0410;}
.btn-primary:hover{transform:translateY(-2px); box-shadow:0 10px 30px -8px rgba(255,52,80,.55);}
.btn-outline{background:transparent; color:#eef1fb; border:1px solid rgba(120,170,255,.14);}
.btn-outline:hover{border-color:var(--cyan); color:var(--cyan); transform:translateY(-2px);}
.btn-sm{padding:11px 22px; font-size:12px;}

/* ---------- Hero (home) ---------- */
.hero{padding:172px 0 56px; position:relative; overflow:hidden;}
.hero-bg{position:absolute; inset:0; z-index:0;}
.hero-bg img,
.hero-bg video{width:100%; height:100%; object-fit:cover; object-position:center 30%;}
.hero-bg::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(5,8,16,.15) 0%, rgba(5,8,16,.25) 40%, rgba(5,8,16,.72) 90%, var(--bg) 100%), linear-gradient(90deg, rgba(5,8,16,.55) 0%, rgba(5,8,16,.05) 55%);}
.hero-grid{position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:64px; align-items:center;}
.hero-eyebrow{margin-bottom:22px;}
.hero-title{font-size:clamp(32px,4.6vw,54px); line-height:1.05; color:var(--fg); margin-bottom:26px;}
.hero-title .amp{background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero-copy p{color:var(--muted); font-size:16px; line-height:1.7; max-width:480px; margin:0 0 40px;}
.hero-stats{display:grid; grid-template-columns:repeat(4,auto); gap:32px; margin-bottom:44px;}
.stat-label{font-family:'Space Grotesk',sans-serif; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:8px;}
.stat-value{font-family:'Rajdhani',sans-serif; font-weight:600; font-size:19px; letter-spacing:.02em; text-transform:uppercase; color:var(--fg);}
.hero-ctas{display:flex; gap:18px; flex-wrap:wrap;}

.hero-poster{position:relative; border:1px solid var(--line); padding:10px; background:var(--bg-panel);}
.hero-poster img{width:100%; display:block;}
.hero-poster::after{content:''; position:absolute; inset:0; box-shadow: inset 0 0 60px rgba(255,47,146,.06); pointer-events:none;}

/* Portrait poster is the desktop default, capped and right-aligned so
   its edge lines up with the "Buy Tickets" button in the header, and
   sized so it doesn't dominate the viewport height on large screens.
   Landscape poster is hidden until the layout collapses to a single
   column, where it fills the width rather than leaving dead space
   either side like a narrow portrait crop would. */
.hero-poster-portrait{max-width:420px; margin:0 0 0 auto;}
.hero-poster-landscape{display:none;}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr; gap:48px;}
  .hero{padding:164px 0 64px;}
  .hero-stats{grid-template-columns:repeat(2,auto); row-gap:24px;}
  .hero-poster-portrait{display:none;}
  .hero-poster-landscape{display:block; max-width:100%; margin:0 auto;}
}


/* ---------- Marquee strip ---------- */
.marquee{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-panel); overflow:hidden; white-space:nowrap; position:relative; z-index:2;}
.marquee-track{display:inline-flex; gap:60px; padding:14px 0; animation:scroll 26s linear infinite;}
.marquee-track span{font-family:'Space Grotesk',sans-serif; font-size:13px; letter-spacing:.28em; text-transform:uppercase; color:var(--muted); display:inline-flex; align-items:center; gap:60px;}
.marquee-track span b{color:var(--fg);}
@keyframes scroll{from{transform:translateX(0);} to{transform:translateX(-50%);}}

/* ---------- Generic section / heading ---------- */
section{padding:100px 0;}
.section-head{text-align:center; max-width:640px; margin:0 auto 56px;}
.section-head h2{font-size:clamp(30px,4.2vw,50px); margin-top:14px;}
.section-head p{color:var(--muted); margin-top:16px; font-size:15px; line-height:1.6;}

/* ---------- Lineup (home) ---------- */
#lineup{background:var(--bg);}
.lineup-block{text-align:center; margin-bottom:64px;}
.lineup-block .eyebrow{margin-bottom:20px;}
.headliner-logos{display:flex; align-items:center; justify-content:center; gap:36px; flex-wrap:wrap; margin-top:8px;}
.headliner-logos img{height:150px; width:auto; filter:drop-shadow(0 0 20px rgba(255,47,146,.18));}
.headliner-logos .amp{font-family:'Rajdhani',sans-serif; font-weight:600; font-size:30px; color:var(--muted);}

.lineup-list{text-align:center; margin-bottom:44px;}
.lineup-list .eyebrow{margin-bottom:16px;}
.lineup-names{font-family:'Rajdhani',sans-serif; font-weight:600; font-size:20px; letter-spacing:.03em; text-transform:uppercase; color:var(--fg); line-height:1.9;}
.lineup-names .sep{color:var(--muted); margin:0 14px; font-family:'Space Grotesk',sans-serif; font-size:13px;}

@media (max-width:480px){
  .lineup-names{font-size:16px; letter-spacing:.02em; line-height:1.7;}
  .lineup-names .sep{margin:0 8px;}
}

.lineup-stats{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:64px;}
.lineup-stat{background:var(--bg-panel); padding:28px 20px; text-align:center;}
.lineup-stat .stat-label{justify-content:center; margin-bottom:10px;}
.lineup-stat .stat-value{font-size:17px;}

@media (max-width:760px){
  .lineup-stats{grid-template-columns:repeat(2,1fr);}
  .headliner-logos img{height:100px;}
}

/* ---------- Merch cards (home + archive) ---------- */
#merch{background:var(--bg-panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.merch-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:56px;}
.merch-grid--single{grid-template-columns:minmax(0,340px); justify-content:center;}
.product-card{background:var(--bg); border:1px solid var(--line); position:relative; overflow:hidden; transition:transform .25s ease, border-color .25s ease;}
.product-card:hover{transform:translateY(-6px); border-color:#2a2e3f;}
.product-media{aspect-ratio:1/1; overflow:hidden; background:#000; display:flex; align-items:center; justify-content:center;}
.product-media img{width:100%; height:100%; object-fit:cover;}
.product-media.placeholder{background:radial-gradient(circle at 50% 40%, #12151f, #0a0c14 70%);}
.badge-logo{width:44%; opacity:.92;}
.product-info{padding:22px 24px; border-top:1px solid var(--line);}
.product-info-top{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.product-info h4{font-size:17px; letter-spacing:.03em;}
.product-single-cart .woocommerce-variation-add-to-cart{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.product-price{font-family:'Space Grotesk',sans-serif; color:var(--cyan); font-weight:600; font-size:15px;}
.view-product{display:inline-flex; align-items:center; gap:8px; font-family:'Space Grotesk',sans-serif; font-size:12px; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; color:var(--fg); opacity:.75; transition:opacity .2s ease, color .2s ease, gap .2s ease;}
.view-product:hover{opacity:1; color:var(--cyan); gap:12px;}
.view-product svg{width:14px; height:14px;}
.merch-cta{text-align:center;}
.merch-note{text-align:center; color:var(--muted); font-size:14px; margin-top:8px;}
.merch-note a{color:var(--cyan); text-decoration:none;}
.merch-note a:hover{text-decoration:underline;}

/* Whole card is now a link */
.product-card{text-decoration:none; color:inherit; display:block;}

/* Hover image fade */
.product-media{position:relative; overflow:hidden;}
.product-media-track{position:relative; width:100%; height:100%;}
.product-media-slide{position:absolute; inset:0; opacity:0; transition:opacity .5s ease;}
.product-media-slide:first-child{opacity:1;}
.product-card:hover .product-media.has-hover .product-media-slide:first-child{opacity:0;}
.product-card:hover .product-media.has-hover .product-media-slide:last-child{opacity:1;}

/* "View Product" hover state now triggers off the whole card, not
   itself — it's a <span> now, not its own link */
.product-card:hover .view-product{opacity:1; color:var(--cyan); gap:12px;}

/* "View Product" hover state now triggers off the whole card, not
   itself — it's a <span> now, not its own link */
.product-card:hover .view-product{opacity:1; color:var(--cyan); gap:12px;}

@media (max-width:900px){
  .merch-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:760px){
  .merch-grid{grid-template-columns:1fr;}
}

/* ---------- Subscribe (home) ---------- */
#subscribe{position:relative; overflow:hidden;}
.subscribe-bg{position:absolute; inset:0; z-index:0;}
.subscribe-bg img{width:100%; height:100%; object-fit:cover; object-position:center 30%;}
.subscribe-bg::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(5,8,16,.1) 0%, rgba(5,8,16,.15) 60%, var(--bg) 100%);}
.subscribe-box{position:relative; z-index:2; max-width:880px; margin:0 auto; text-align:center; border:1px solid var(--line); padding:64px 64px; background:rgba(5,8,16,.70); backdrop-filter:blur(2px);}
.subscribe-box h2{font-size:clamp(26px,3.6vw,38px); margin-top:14px;}
.subscribe-box p{color:var(--muted); margin-top:14px; font-size:15px; line-height:1.6; max-width:520px; margin-left:auto; margin-right:auto;}
form.subscribe-form{display:flex; gap:14px; margin-top:36px; text-align:left; align-items:end;}
.field{flex:1 1 auto; display:flex; flex-direction:column; gap:8px;}
.field label{font-family:'Space Grotesk',sans-serif; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted);}
.field input{background:#0d0f18; border:1px solid #22263a; color:var(--fg); padding:0 16px; height:52px; line-height:50px; font-family:'Inter',sans-serif; font-size:15px; transition:border-color .2s ease; width:100%;}
.field input:focus{border-color:var(--cyan);}
.field input::placeholder{color:#4d5163;}
.subscribe-form .btn{
  border:none; white-space:nowrap; flex:0 0 auto;
  height:52px; padding:0 27px; display:inline-flex; align-items:center; justify-content:center; line-height:1;
}
.form-note{font-size:12px; color:#5c6072; margin-top:14px;}
.form-success{display:none; margin-top:36px; padding:18px 20px; border:1px solid var(--cyan); color:var(--cyan); font-family:'Space Grotesk',sans-serif; font-size:13px; letter-spacing:.08em; text-transform:uppercase;}

@media (max-width:640px){
  form.subscribe-form{flex-direction:column; align-items:stretch;}
  .subscribe-box{padding:44px 28px;}
}

/* ---------- Gravity Forms — global reskin ----------
   Gravity Forms' own theme (Orbital) ships its own CSS which can load
   after ours and win on specificity, so everything below is deliberately
   specific and !important to guarantee it wins. This applies to EVERY
   Gravity Forms instance on the site (contact page, subscribe box,
   anywhere else you drop a [gravityforms] shortcode) — it's no longer
   gated behind a wrapper class, so styling stays consistent wherever a
   form appears. The form's own title and description (if enabled on the
   form) ARE the heading/paragraph shown — they're styled to match rather
   than hidden, so whichever one you leave on in Gravity Forms is what
   visitors see. */
.gform_wrapper{margin:0 !important; text-align:left !important;}

/* The homepage Subscribe box is a centered, boxed layout by design —
   this is the one place forms should be center-aligned. Anywhere else
   (e.g. a Contact page) keeps the left-aligned default above, which
   reads more naturally in a normal page layout. */
#subscribe .gform_wrapper,
.gf-wrap .gform_wrapper{text-align:center !important;}

.gform_wrapper .gform_heading{margin:0 0 36px !important;}
.gform_wrapper .gform_title{
  font-family:'Rajdhani',sans-serif !important; font-weight:700 !important; text-transform:uppercase !important;
  letter-spacing:.02em !important; color:var(--fg) !important;
  font-size:clamp(26px,3.6vw,38px) !important; margin:14px 0 0 !important;
}
.gform_wrapper .gform_description{
  color:var(--muted) !important; margin:14px 0 0 !important; font-size:15px !important; line-height:1.6 !important;
}
#subscribe .gform_wrapper .gform_description,
.gf-wrap .gform_wrapper .gform_description{margin-left:auto !important; margin-right:auto !important; max-width:520px !important;}

.gform_wrapper form{display:flex !important; flex-wrap:wrap !important; align-items:flex-end !important; gap:14px !important; text-align:left !important;}
.gform_wrapper form .gform_body{flex:1 1 auto !important; min-width:0 !important;}
.gform_wrapper form .gform_body .gform_fields{
  display:flex !important; gap:14px !important; flex-wrap:wrap !important;
  list-style:none !important; padding:0 !important; margin:0 !important;
}
.gform_wrapper form .gform_body .gfield{
  flex:1 1 200px !important; width:auto !important; max-width:none !important; margin:0 !important; padding:0 !important;
}
.gform_wrapper form .gform_body .gfield.gfield--type-textarea,
.gform_wrapper form .gform_body .gfield_textarea{flex-basis:100% !important; width:100% !important;}

@media (max-width:480px){
  .gform_wrapper form .gform_body .gfield{flex-basis:100% !important;}
  #subscribe .gform_wrapper form .gform_body .gfield.gfield--type-email,
  #subscribe .gform_wrapper form .gform_body .gfield_email,
  .gf-wrap .gform_wrapper form .gform_body .gfield.gfield--type-email,
  .gf-wrap .gform_wrapper form .gform_body .gfield_email{flex-basis:100% !important;}
}

/* Email on its own line rather than sitting side-by-side with Name —
   applies generally (e.g. a Contact page form). The homepage Subscribe
   box keeps its original side-by-side First Name + Email + button
   layout, since that's a deliberate, more compact design there. */
.gform_wrapper form .gform_body .gfield.gfield--type-email,
.gform_wrapper form .gform_body .gfield_email{flex-basis:100% !important; width:100% !important;}
#subscribe .gform_wrapper form .gform_body .gfield.gfield--type-email,
#subscribe .gform_wrapper form .gform_body .gfield_email,
.gf-wrap .gform_wrapper form .gform_body .gfield.gfield--type-email,
.gf-wrap .gform_wrapper form .gform_body .gfield_email{flex-basis:200px !important; width:auto !important;}
.gform_wrapper .gfield_label,
.gform_wrapper label.gfield_label{
  font-family:'Space Grotesk',sans-serif !important; font-size:11px !important; letter-spacing:.18em !important;
  text-transform:uppercase !important; color:var(--muted) !important; margin:0 0 8px !important;
  display:block !important; font-weight:400 !important;
}
.gform_wrapper .gfield_required{
  color:var(--magenta) !important; font-style:normal !important; font-size:11px !important; margin-left:4px !important;
}

.gform_wrapper .ginput_container{margin:0 !important;}
.gform_wrapper .ginput_container input[type="text"],
.gform_wrapper .ginput_container input[type="email"],
.gform_wrapper .ginput_container textarea{
  background:#0d0f18 !important; border:1px solid #22263a !important; color:var(--fg) !important; padding:0 16px !important;
  height:52px !important; line-height:50px !important; font-family:'Inter',sans-serif !important; font-size:15px !important;
  width:100% !important; border-radius:0 !important; box-shadow:none !important; transition:border-color .2s ease;
}
.gform_wrapper .ginput_container textarea{height:140px !important; line-height:1.5 !important; padding:14px 16px !important;}
.gform_wrapper .ginput_container input[type="text"]:focus,
.gform_wrapper .ginput_container input[type="email"]:focus,
.gform_wrapper .ginput_container textarea:focus{border-color:var(--cyan) !important; outline:none !important;}

/* Orbital theme's optional per-field icons (envelope, message bubble,
   etc) — hidden so nothing floats inside the input. Turn "Input Icons"
   off in the form's own Appearance settings if you'd rather they never
   render at all, but this covers it either way. */
.gform_wrapper .ginput_container svg,
.gform_wrapper .ginput_container .gform-icon,
.gform_wrapper .gfield-icon{display:none !important;}

.gform_wrapper .gform_footer{margin:0 !important; padding:0 !important; flex:0 0 auto !important; display:flex !important;}
/* Gravity Forms' own theme puts a margin-bottom on the footer's
   button/input specifically (not just the footer container), which is
   what was throwing off the vertical alignment with the input fields —
   matched here at equal specificity plus !important to guarantee it's
   zeroed out regardless of theme version. */
.gform_wrapper.gravity-theme .gform_footer button,
.gform_wrapper.gravity-theme .gform_footer input,
.gform_wrapper.gravity-theme .gform_page_footer button,
.gform_wrapper.gravity-theme .gform_page_footer input,
.gform_wrapper .gform_footer button,
.gform_wrapper .gform_footer input{margin:0 !important;}
.gform_wrapper .gform_button{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  font-family:'Rajdhani',sans-serif !important; font-weight:700 !important; font-size:15px !important;
  letter-spacing:.06em !important; text-transform:uppercase !important;
  height:52px !important; padding:0 27px !important; line-height:1 !important;
  border:none !important; border-radius:2px !important; cursor:pointer !important;
  background:linear-gradient(90deg, #ff3fb4, #ff3450) !important; color:#0a0410 !important;
  transition:transform .18s ease, box-shadow .18s ease; box-shadow:none !important;
}
.gform_wrapper .gform_button:hover{transform:translateY(-2px); box-shadow:0 10px 30px -8px rgba(255,52,80,.55) !important;}

.gform_wrapper .validation_error{
  color:var(--magenta) !important; font-family:'Space Grotesk',sans-serif !important; font-size:13px !important;
  margin:0 0 16px !important; border:none !important; padding:0 !important;
}
.gform_wrapper .gfield_description.validation_message{color:var(--magenta) !important; font-size:12px !important; margin-top:6px !important;}
/* Gravity Forms appends the form ID to this as an *id* attribute
   (e.g. id="gform_confirmation_message_1"), not a class — so it needs
   an id-based attribute selector, not a class one, to match regardless
   of form ID. Styled to match the site's own .form-success placeholder
   message. Only the message itself gets the bordered box — the wrapper
   around it is reset to plain so they don't nest into a double border. */
[id*="gform_confirmation_wrapper"]{
  display:block !important; margin:0 !important; padding:0 !important; border:none !important; background:transparent !important;
}
[id*="gform_confirmation_message"]{
  display:block !important; margin:36px 0 0 !important; padding:18px 20px !important;
  border:1px solid var(--cyan) !important; background:transparent !important;
  color:var(--cyan) !important; font-family:'Space Grotesk',sans-serif !important;
  font-size:13px !important; letter-spacing:.08em !important; text-transform:uppercase !important;
  text-align:center !important; line-height:1.5 !important;
}
@media (max-width:640px){
  .gform_wrapper form{flex-direction:column !important; align-items:stretch !important;}
  .gform_wrapper form .gform_body .gform_fields{flex-direction:column !important;}
}

/* ---------- Page banner (merch archive / standard page) ---------- */
.page-banner{position:relative; padding:212px 0 64px; overflow:hidden; border-bottom:1px solid var(--line);}
.page-banner-bg{position:absolute; inset:0; z-index:0;}
.page-banner-bg img{width:100%; height:100%; object-fit:cover; object-position:center 25%; opacity:.5;}
.page-banner-bg::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(5,8,16,.55) 0%, rgba(5,8,16,.55) 75%, var(--bg) 100%);}
.page-banner .wrap{position:relative; z-index:2; text-align:center;}
.page-banner h1{font-size:clamp(34px,5vw,58px); margin-top:14px;}
.page-banner p{color:var(--muted); margin:16px auto 0; max-width:560px; font-size:15px; line-height:1.6;}

/* ---------- Prose / content page (standard page) ---------- */
.prose{color:var(--muted); font-size:16px; line-height:1.8;}
.prose p{margin:0 0 22px;}
.prose h2{color:var(--fg); font-size:26px; margin:48px 0 18px;}
.prose h2:first-child{margin-top:0;}

.content-img{width:100%; border:1px solid var(--line); margin:40px 0; overflow:hidden;}
.content-img img{width:100%; display:block; aspect-ratio:16/9; object-fit:cover;}
.content-img-caption{padding:14px 18px; border-top:1px solid var(--line); font-family:'Space Grotesk',sans-serif; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);}
.content-img-row{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:40px 0;}
.content-img-row .content-img{margin:0;}
@media (max-width:640px){
  .content-img-row{grid-template-columns:1fr;}
}

/* Images + captions added via the normal WordPress editor (Gutenberg's
   image block, or classic-editor [caption] shortcode) inside a Rich Text
   block or the default page content — themed to match .content-img above
   without the editor needing to know our custom class names. */
.prose figure.wp-block-image,
.prose .wp-caption{
  width:100% !important; border:1px solid var(--line); margin:40px 0; overflow:hidden; background:var(--bg-panel);
}
.prose figure.wp-block-image img,
.prose .wp-caption img{width:100%; height:auto; display:block; margin:0;}
.prose figure.wp-block-image figcaption,
.prose .wp-caption-text{
  padding:14px 18px; border-top:1px solid var(--line); font-family:'Space Grotesk',sans-serif;
  font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
  text-align:left; margin:0;
}

.info-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:56px;}
.info-item{background:var(--bg-panel); padding:28px 24px;}
.info-item .eyebrow{margin-bottom:10px;}
.info-item a{color:var(--fg); text-decoration:none; font-family:'Space Grotesk',sans-serif; font-size:15px;}
.info-item a:hover{color:var(--cyan);}

.cta-band{text-align:center; border:1px solid var(--line); background:var(--bg-panel); padding:56px 40px; margin-top:80px;}
.cta-band h2{font-size:28px; margin-top:12px;}
.cta-band p{color:var(--muted); margin:14px 0 30px; font-size:15px;}
.cta-band .btn-row{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line); padding:56px 0 40px;}
.footer-grid{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px;}
.footer-logo img{height:34px; opacity:.85;}
.footer-links{display:flex; gap:28px; list-style:none; padding:0; margin:0; font-family:'Space Grotesk',sans-serif; font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted);}
.footer-links a{text-decoration:none;}
.footer-links a:hover{color:var(--cyan);}
.footer-bottom{margin-top:36px; padding-top:28px; border-top:1px solid var(--line); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:12px; color:#4d5163; font-family:'Space Grotesk',sans-serif; letter-spacing:.05em;}

/* ---------- Responsive: nav / layout ---------- */
@media (max-width:760px){
  .nav-links{display:none;}
  .top-bar{display:none;}
  .nav-toggle{display:block;}
  .nav-logo img{height:40px;}
  nav.wrap{height:80px;}
  section{padding:80px 0;}
  .hero{padding:120px 0 64px;}
  .footer-grid{flex-direction:column; align-items:flex-start;}
  .page-banner{padding:140px 0 48px;}
  .info-grid{grid-template-columns:1fr;}
}

/* ---------- WooCommerce — notices ---------- */
.woocommerce-message,
.woocommerce-error,
.woocommerce-info{
  list-style:none; margin:0 0 24px; padding:16px 20px; border:1px solid var(--line); background:var(--bg-panel);
  color:var(--fg); font-family:'Space Grotesk',sans-serif; font-size:13px; letter-spacing:.02em; display:flex; align-items:center; flex-wrap:wrap; gap:12px;
}
.woocommerce-message{border-color:var(--cyan); color:var(--cyan);}
.woocommerce-error{border-color:var(--magenta); color:var(--magenta);}
.woocommerce-message::before,
.woocommerce-error::before,
.woocommerce-info::before{position:static; top:auto; left:auto; margin-right:2px;}
.woocommerce-message::after,
.woocommerce-error::after,
.woocommerce-info::after{display:none;}
.woocommerce-message a.button,
.woocommerce-error a.button{
  display:inline-flex; padding:8px 16px; border:1px solid currentColor; color:inherit; text-decoration:none;
  font-family:'Rajdhani',sans-serif; text-transform:uppercase; letter-spacing:.06em; font-size:12px; font-weight:700;
  background:transparent !important;
}
.woocommerce-message a.button:hover,
.woocommerce-error a.button:hover{
  color:#ff3fb3 !important; border-color:#ff3fb3 !important; background:transparent !important;
}
.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li{margin:0;}

/* ---------- WooCommerce — checkout fields ---------- */
/* Covers both the classic shortcode checkout (plain selects, select2
   for Country/State) and the block-based Cart & Checkout (combobox
   fields built on wc-block-components-text-input), since either can
   be in use depending on how the Checkout page was built. */
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="password"],
.woocommerce-checkout input[type="number"],
.woocommerce-checkout textarea,
.woocommerce-checkout select,
.woocommerce-checkout .select2-selection,
.woocommerce-checkout .select2-container--default .select2-selection--single,
.wc-block-components-text-input input[type="text"],
.wc-block-components-text-input input[type="email"],
.wc-block-components-text-input input[type="tel"],
.wc-block-components-text-input input[type="number"],
.wc-block-components-text-input input[type="url"],
.wc-block-components-combobox-control input,
.wc-block-components-select select,
.wc-blocks-components-select__select{
  background:transparent !important; border:1px solid var(--muted) !important; color:var(--fg) !important;
  border-radius:0 !important; box-shadow:none !important; color-scheme:dark;
}
.wc-blocks-components-select__container{background:transparent !important; border-radius:0 !important;}
.woocommerce-checkout input[type="text"]::placeholder,
.woocommerce-checkout input[type="email"]::placeholder,
.woocommerce-checkout input[type="tel"]::placeholder,
.woocommerce-checkout input[type="password"]::placeholder,
.woocommerce-checkout input[type="number"]::placeholder,
.woocommerce-checkout textarea::placeholder,
.wc-block-components-text-input input::placeholder{color:var(--muted) !important; opacity:1;}
.woocommerce-checkout select option{background:var(--bg-panel); color:var(--fg);}
.woocommerce-checkout .select2-selection__rendered{color:var(--fg) !important;}

/* ---------- WooCommerce — pagination (shop archive) ---------- */
.shop-pagination{margin-top:20px;}
.shop-pagination .nav-links{display:flex; justify-content:center; gap:8px; list-style:none; padding:0;}
.shop-pagination .page-numbers{
  display:inline-flex; align-items:center; justify-content:center; min-width:40px; height:40px; padding:0 10px;
  border:1px solid var(--line); color:var(--fg); text-decoration:none; font-family:'Space Grotesk',sans-serif;
  font-size:13px; transition:border-color .2s ease, color .2s ease;
}
.shop-pagination .page-numbers.current,
.shop-pagination .page-numbers:hover{border-color:var(--cyan); color:var(--cyan);}

/* Sale price strikethrough — used on both the merch-grid product cards
   and the single product page price. */
.product-price del,
.product-single-price del{color:var(--muted); opacity:.6; margin-right:8px; font-weight:400; text-decoration:line-through;}
.product-price ins,
.product-single-price ins{text-decoration:none;}

/* ---------- WooCommerce — single product page ---------- */
.product-single-grid{display:grid; grid-template-columns:1fr 1fr; gap:48px; margin-bottom:64px; align-items:start;}
.product-single-image{position:relative; border:1px solid var(--line); background:#000; aspect-ratio:1/1; overflow:hidden; display:flex; align-items:center; justify-content:center;}
.product-single-image img{width:100%; height:100%; object-fit:cover;}
.product-single-image.placeholder{background:radial-gradient(circle at 50% 40%, #12151f, #0a0c14 70%);}
.product-single-image.placeholder img{width:44%; height:auto; object-fit:contain;}

.product-thumbs{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:12px;}
.product-thumb{position:relative; aspect-ratio:1/1; padding:0; border:1px solid var(--line); background:#000; overflow:hidden; cursor:pointer; transition:border-color .2s ease, opacity .2s ease;}
.product-thumb img{width:100%; height:100%; object-fit:cover; display:block; opacity:.6; transition:opacity .2s ease;}
.product-thumb:hover img{opacity:.85;}
.product-thumb.active{border-color:var(--cyan);}
.product-thumb.active img{opacity:1;}

@media (max-width:900px){
  .product-thumbs{grid-template-columns:repeat(6,1fr); gap:10px;}
}
@media (max-width:480px){
  .product-thumbs{grid-template-columns:repeat(5,1fr); gap:8px;}
}

.product-single-price{font-family:'Space Grotesk',sans-serif; color:var(--cyan); font-weight:600; font-size:24px; margin-bottom:20px;}
.product-single-excerpt{color:var(--muted); font-size:15px; line-height:1.7; margin-bottom:28px;}
.product-single-excerpt p:last-child{margin-bottom:0;}

.product-single-cart form.cart{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-bottom:8px;}
.product-single-cart .quantity{margin:0;}
.product-single-cart .quantity .qty{
  background:#0d0f18; border:1px solid #22263a; color:var(--fg); height:52px; width:70px; text-align:center;
  font-family:'Inter',sans-serif; font-size:15px; padding:0 8px;
}
.product-single-cart .quantity .qty:focus{border-color:var(--cyan); outline:none;}
.product-single-cart button.single_add_to_cart_button{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:15px; letter-spacing:.06em; text-transform:uppercase;
  height:52px; padding:0 32px; border:none; border-radius:2px; cursor:pointer;
  background:linear-gradient(90deg, #ff3fb4, #ff3450); color:#0a0410;
  transition:transform .18s ease, box-shadow .18s ease;
}
.product-single-cart button.single_add_to_cart_button:hover{background:#1d81a5 !important; color:#fff; transform:translateY(-2px); box-shadow:0 10px 30px -8px rgba(29,129,165,.55);}
.product-single-cart button.single_add_to_cart_button:disabled{opacity:.5; cursor:not-allowed; transform:none; box-shadow:none;}
.product-single-cart a.added_to_cart{color:#1d81a5;}
.product-single-cart a.added_to_cart:visited{color:#1d81a5;}
.product-single-cart a.added_to_cart:hover{color:#1d81a5; opacity:.8;}

.product-single-cart .stock{
  display:inline-block; margin-top:6px; font-family:'Space Grotesk',sans-serif; font-size:12px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
}
.product-single-cart .stock.out-of-stock{color:var(--magenta);}

/* Variable products — attribute select table Gravity-Forms-style reskin */
.product-single-cart table.variations{width:100%; margin-bottom:16px; border-collapse:collapse;}
.product-single-cart table.variations th{
  text-align:left; font-family:'Space Grotesk',sans-serif; font-size:11px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); padding:8px 12px 8px 0; font-weight:400; vertical-align:middle;
}
.product-single-cart table.variations td{padding:8px 0;}
.product-single-cart table.variations select{
  background:#0d0f18; border:1px solid #22263a; color:var(--fg); height:44px; padding:0 12px;
  font-family:'Inter',sans-serif; font-size:14px; width:100%; max-width:260px;
}
.product-single-cart table.variations select:focus{border-color:var(--cyan); outline:none;}
.product-single-cart .reset_variations{
  font-family:'Space Grotesk',sans-serif; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); margin-left:10px; text-decoration:none;
}
.product-single-cart .reset_variations:hover{color:var(--cyan);}
.product-single-cart .woocommerce-variation-price{margin:10px 0; font-family:'Space Grotesk',sans-serif; color:var(--cyan); font-size:18px;}
.product-single-cart .woocommerce-variation-availability{margin:6px 0; font-size:13px; color:var(--muted);}
.product-single-cart .woocommerce-variation-description p{color:var(--muted); font-size:14px; line-height:1.6;}

.product-single-meta{
  margin-top:24px; padding-top:24px; border-top:1px solid var(--line);
  font-family:'Space Grotesk',sans-serif; font-size:12px; letter-spacing:.04em; color:var(--muted);
}
.product-single-meta > span{display:block; margin-bottom:6px;}
.product-single-meta a{color:var(--fg); text-decoration:none;}
.product-single-meta a:hover{color:var(--cyan);}

.product-single-description{margin-top:16px;}

@media (max-width:900px){
  .product-single-grid{grid-template-columns:1fr; gap:32px;}
}

/* ---------- Galleries archive — album grid ---------- */
.album-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:56px;}
.album-card{display:block; text-decoration:none; color:inherit; background:var(--bg-panel-2); border:1px solid var(--line); overflow:hidden; transition:transform .25s ease, border-color .25s ease;}
.album-card:hover{transform:translateY(-6px); border-color:#2a2e3f;}
.album-media{position:relative; aspect-ratio:1/1; overflow:hidden; background:#000;}
.album-media img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease;}
.album-card:hover .album-media img{transform:scale(1.05);}
.album-overlay{position:absolute; inset:0; display:flex; align-items:flex-end; padding:16px; background:linear-gradient(180deg, rgba(5,8,16,0) 55%, rgba(5,8,16,.85) 100%); pointer-events:none;}
.album-count{display:inline-flex; align-items:center; gap:8px; font-family:'Space Grotesk',sans-serif; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg);}
.album-count svg{width:15px; height:15px;}
.album-info{padding:20px 24px; border-top:1px solid var(--line);}
.album-info-top{display:flex; align-items:center; justify-content:space-between; gap:16px;}
.album-info h3{font-size:17px; letter-spacing:.03em;}
.album-card:hover .view-product{opacity:1; color:var(--cyan); gap:12px;}
.album-meta{display:flex; flex-wrap:wrap; gap:16px; margin-top:12px;}
.album-meta-item{display:inline-flex; align-items:center; gap:7px; font-family:'Space Grotesk',sans-serif; font-size:12px; letter-spacing:.04em; color:var(--muted);}
.album-meta-item svg{width:14px; height:14px; flex-shrink:0;}
.album-back{font-family:'Space Grotesk',sans-serif; font-size:12px; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; color:var(--muted); transition:color .2s ease;}
.album-back:hover{color:var(--cyan);}

@media (max-width:900px){
  .album-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .album-grid{grid-template-columns:1fr;}
}

/* ---------- Single gallery — meta, intro, thumbnail grid + lightbox ---------- */
.gallery-meta{display:flex; justify-content:center; flex-wrap:wrap; gap:20px; margin-top:18px;}
.gallery-meta .album-meta-item{font-size:13px;}

.gallery-intro{text-align:center; max-width:760px; margin:0 auto;}

.wrap-wide{max-width:1560px; margin:0 auto; padding:0 32px;}

.gallery-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:40px;}
.gallery-thumb{display:block; aspect-ratio:1/1; border:1px solid var(--line); overflow:hidden; cursor:zoom-in; background:#000;}
.gallery-thumb img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease, opacity .25s ease;}
.gallery-thumb:hover img{transform:scale(1.05); opacity:.92;}

@media (max-width:1024px){ .gallery-grid{grid-template-columns:repeat(3,1fr);} }
@media (max-width:760px){ .gallery-grid{grid-template-columns:repeat(2,1fr); gap:12px;} }
@media (max-width:480px){ .gallery-grid{grid-template-columns:1fr;} }

.lightbox{display:none; position:fixed; inset:0; z-index:200; background:rgba(5,8,16,.95); align-items:center; justify-content:center; padding:40px;}
.lightbox.open{display:flex;}
.lightbox-figure{display:flex; flex-direction:column; align-items:center; max-width:90vw; max-height:86vh; margin:0;}
.lightbox-img{max-width:90vw; max-height:78vh; object-fit:contain; border:1px solid var(--line);}
.lightbox-caption{display:none; width:100%; margin:0; padding:14px 18px; border-top:1px solid var(--line); font-family:'Space Grotesk',sans-serif; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); text-align:left;}
.lightbox-caption.is-visible{display:block;}
.lightbox-close,
.lightbox-prev,
.lightbox-next{position:fixed; background:rgba(11,14,24,.8); border:1px solid var(--line); color:var(--fg); cursor:pointer; display:flex; align-items:center; justify-content:center; transition:border-color .2s ease, color .2s ease;}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover{border-color:var(--cyan); color:var(--cyan);}
.lightbox-close{top:24px; right:24px; width:44px; height:44px;}
.lightbox-close svg{width:18px; height:18px;}
.lightbox-prev,
.lightbox-next{top:50%; transform:translateY(-50%); width:52px; height:52px;}
.lightbox-prev{left:24px;}
.lightbox-next{right:24px;}
.lightbox-prev svg,
.lightbox-next svg{width:22px; height:22px;}

@media (max-width:640px){
  .lightbox{padding:16px;}
  .lightbox-prev,
  .lightbox-next{width:42px; height:42px;}
  .lightbox-prev{left:10px;}
  .lightbox-next{right:10px;}
  .lightbox-caption{font-size:13px; padding:6px 14px;}
  .lightbox-close{top:14px; right:14px;}
}

/* ---------- Blog archive & single post ---------- */
.post-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:56px;}
.post-card{display:block; text-decoration:none; color:inherit; background:var(--bg-panel-2); border:1px solid var(--line); overflow:hidden; transition:transform .25s ease, border-color .25s ease;}
.post-card:hover{transform:translateY(-6px); border-color:#2a2e3f;}
.post-media{position:relative; aspect-ratio:16/9; overflow:hidden; background:#000;}
.post-media img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease;}
.post-card:hover .post-media img{transform:scale(1.05);}
.post-badge{
  position:absolute; top:14px; left:14px; padding:6px 12px; background:rgba(5,8,16,.75); border:1px solid var(--line);
  font-family:'Space Grotesk',sans-serif; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--cyan);
}
.post-info{padding:20px 24px;}
.post-meta{margin-bottom:10px;}
.post-info h3{font-size:17px; letter-spacing:.03em; margin-bottom:10px;}
.post-excerpt{color:var(--muted); font-size:14px; line-height:1.6; margin-bottom:16px;}
.post-card:hover .view-product{opacity:1; color:var(--cyan); gap:12px;}

@media (max-width:900px){
  .post-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  .post-grid{grid-template-columns:1fr;}
}

.post-tags{display:flex; flex-wrap:wrap; gap:10px; margin-top:40px; padding-top:24px; border-top:1px solid var(--line);}
.post-tag{
  display:inline-flex; padding:7px 14px; border:1px solid var(--line); color:var(--muted); text-decoration:none;
  font-family:'Space Grotesk',sans-serif; font-size:12px; letter-spacing:.06em; text-transform:uppercase; transition:border-color .2s ease, color .2s ease;
}
.post-tag:hover{border-color:var(--cyan); color:var(--cyan);}
.post-single-footer{margin-top:32px;}