/*
Theme Name: CGCoverArt
Theme URI: https://cgcoverart.com
Author: Chafik Graphics
Description: Premium WooCommerce theme for CGCoverArt.com — exclusive premade cover art for musicians.
Version: 3.0.0
Requires at least: 6.3
Tested up to: 6.7
WC requires at least: 8.0
WC tested up to: 9.6
Requires PHP: 8.1
License: GNU General Public License v2 or later
Text Domain: cgcoverart
Tags: woocommerce, music, dark, custom-logo
*/

/* ══════════════════════════════════════════
   TOKENS
══════════════════════════════════════════ */
:root {
  --clr-bg:          #080808;
  --clr-bg2:         #0d0d0d;
  --clr-bg3:         #111111;
  --clr-bg4:         #181818;
  --clr-border:      rgba(255,255,255,.09);
  --clr-border2:     rgba(255,255,255,.15);
  --clr-glass:       rgba(255,255,255,.04);
  --clr-glass-hover: rgba(255,255,255,.07);
  --clr-white:       #f5f5f0;
  --clr-muted:       rgba(245,245,240,.45);
  --clr-accent:      #C8FF00;
  --clr-accent-dim:  rgba(200,255,0,.12);
  --clr-accent-h:    #d4ff1a;
  --clr-red:         #FF3C3C;

  --ff-display: 'Anton', sans-serif;
  --ff-body:    'DM Sans', sans-serif;
  --ff-mono:    'Space Mono', monospace;

  --nav-h: 72px;
  --radius: 14px;
  --radius-sm: 8px;
  --radius-pill: 50px;

  --ease: cubic-bezier(.16,1,.3,1);
  --ease-in: cubic-bezier(.7,0,.84,0);
  --dur: .25s;
  --dur-slow: .45s;

  --wrap: 1360px;
  --gap: clamp(1.25rem, 4vw, 5rem);
}

/* ══════════════════════════════════════════
   RESET
══════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--ff-body);
  background:var(--clr-bg);
  color:var(--clr-white);
  font-size:1rem;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
/* subtle noise texture */
body::after{
  content:'';position:fixed;inset:0;pointer-events:none;z-index:9998;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' 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)' opacity='.4'/%3E%3C/svg%3E");
  opacity:.022;
}
img,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{cursor:pointer;border:none;background:none;font-family:inherit}
input,select,textarea{font-family:inherit}
h1,h2,h3,h4,h5,h6{
  font-family:var(--ff-display);
  font-weight:400;
  text-transform:uppercase;
  line-height:.95;
  letter-spacing:-.01em;
  color:var(--clr-white);
}

/* ══════════════════════════════════════════
   LAYOUT
══════════════════════════════════════════ */
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gap)}
.section{padding-block:clamp(4rem,8vw,7rem)}
.section--sm{padding-block:clamp(2rem,4vw,3.5rem)}
.section--xs{padding-block:clamp(1rem,2vw,2rem)}

/* ══════════════════════════════════════════
   ANNOUNCEMENT BAR
══════════════════════════════════════════ */
.ann-bar{
  background:var(--clr-accent);
  color:var(--clr-bg);
  text-align:center;
  padding:.6rem var(--gap);
  font-family:var(--ff-mono);
  font-size:.6rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  position:relative;z-index:200;
  font-weight:700;
}
.ann-bar strong{font-weight:700}
.ann-bar__close{
  position:absolute;right:1rem;top:50%;transform:translateY(-50%);
  color:var(--clr-bg);opacity:.6;font-size:1rem;
  padding:.25rem;line-height:1;
  transition:opacity var(--dur);
}
.ann-bar__close:hover{opacity:1}

/* ══════════════════════════════════════════
   HEADER
══════════════════════════════════════════ */
.site-header{
  position:sticky;top:0;z-index:100;
  height:var(--nav-h);
  background:rgba(8,8,8,.78);
  backdrop-filter:blur(28px) saturate(180%);
  -webkit-backdrop-filter:blur(28px) saturate(180%);
  border-bottom:1px solid var(--clr-border);
  transition:box-shadow var(--dur);
}
.site-header.scrolled{box-shadow:0 4px 48px rgba(0,0,0,.55)}

.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;height:100%;
}

/* Logo */
.site-logo{
  display:flex;align-items:center;gap:.6rem;
  flex-shrink:0;text-decoration:none;line-height:1;
}
.site-logo img{
  height:44px;width:auto;
  max-width:180px;
  object-fit:contain;
  display:block;
}
.logo-text{
  font-family:var(--ff-display);
  font-size:1.25rem;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:var(--clr-white);
}
.logo-text span{color:var(--clr-accent)}

/* Nav */
.primary-nav{display:flex;align-items:center;gap:2rem}
.primary-nav a{
  font-size:.78rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--clr-muted);
  transition:color var(--dur);
}
.primary-nav a:hover,
.primary-nav .current-menu-item>a{color:var(--clr-white)}

/* Header actions */
.header-actions{display:flex;align-items:center;gap:.6rem}

.btn-cart{
  display:flex;align-items:center;gap:.4rem;
  color:var(--clr-white);
  font-family:var(--ff-mono);
  font-size:.7rem;letter-spacing:.08em;
  padding:.55rem 1rem;
  border:1px solid var(--clr-border);
  border-radius:var(--radius-pill);
  transition:border-color var(--dur),color var(--dur);
  position:relative;
}
.btn-cart:hover{border-color:var(--clr-accent);color:var(--clr-accent)}
.cart-count{
  background:var(--clr-accent);
  color:var(--clr-bg);
  font-size:.55rem;font-weight:700;
  width:16px;height:16px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}

.btn-shop-now{
  display:inline-flex;align-items:center;gap:.4rem;
  background:var(--clr-accent);
  color:var(--clr-bg);
  font-family:var(--ff-mono);
  font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  padding:.6rem 1.25rem;
  border-radius:var(--radius-pill);
  transition:background var(--dur),transform var(--dur);
}
.btn-shop-now:hover{background:var(--clr-accent-h);transform:translateY(-1px)}

/* Hamburger */
.hamburger{
  display:none;flex-direction:column;gap:5px;
  width:34px;padding:4px;cursor:pointer;
}
.hamburger span{
  display:block;height:2px;background:var(--clr-white);
  border-radius:2px;transition:all var(--dur);transform-origin:center;
}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0;transform:scaleX(0)}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Mobile drawer */
.mobile-nav{
  display:none;position:fixed;
  inset:var(--nav-h) 0 0;
  background:var(--clr-bg2);
  z-index:99;padding:2rem var(--gap);
  overflow-y:auto;
  border-top:1px solid var(--clr-border);
}
.mobile-nav.open{display:block;animation:slideDown .25s var(--ease)}
@keyframes slideDown{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
.mobile-nav a{
  display:flex;align-items:center;justify-content:space-between;
  font-family:var(--ff-display);font-size:2rem;text-transform:uppercase;
  color:var(--clr-white);
  border-bottom:1px solid var(--clr-border);
  padding:.6rem 0;
  transition:color var(--dur),padding-left var(--dur);
}
.mobile-nav a:hover{color:var(--clr-accent);padding-left:.5rem}
.mobile-nav__btns{display:flex;flex-direction:column;gap:.75rem;margin-top:2rem}

/* Search overlay */
.search-overlay{
  position:fixed;inset:0;background:rgba(8,8,8,.97);
  z-index:600;display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity var(--dur);
}
.search-overlay.open{opacity:1;pointer-events:all}
.search-wrap{width:min(680px,90vw);padding:2rem}
.search-wrap label{
  display:block;font-family:var(--ff-mono);font-size:.58rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--clr-accent);
  margin-bottom:1rem;
}
.search-form-inner{
  display:flex;align-items:center;gap:.75rem;
  border-bottom:2px solid var(--clr-accent);padding-bottom:.75rem;
}
.search-form-inner input[type=search]{
  flex:1;background:none;border:none;outline:none;
  font-family:var(--ff-display);font-size:clamp(2rem,5vw,3.5rem);
  text-transform:uppercase;color:var(--clr-white);
  caret-color:var(--clr-accent);
}
.search-form-inner input::placeholder{color:rgba(255,255,255,.2)}
.search-close{color:var(--clr-muted);font-size:1.5rem;padding:.5rem;transition:color var(--dur)}
.search-close:hover{color:var(--clr-white)}

@media(max-width:900px){.primary-nav,.btn-shop-now{display:none}.hamburger{display:flex}}

/* ══════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.85rem 1.75rem;
  font-family:var(--ff-body);font-weight:700;
  font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;
  border-radius:var(--radius-pill);
  border:none;cursor:pointer;
  transition:all var(--dur);
  white-space:nowrap;text-decoration:none;
}
.btn--primary{background:var(--clr-accent);color:var(--clr-bg)}
.btn--primary:hover{background:var(--clr-accent-h);transform:translateY(-2px);box-shadow:0 12px 32px rgba(200,255,0,.22)}
.btn--ghost{background:var(--clr-glass);color:var(--clr-white);border:1px solid var(--clr-border)}
.btn--ghost:hover{border-color:var(--clr-border2);background:var(--clr-glass-hover)}
.btn--dark{background:var(--clr-bg3);color:var(--clr-white);border:1px solid var(--clr-border)}
.btn--dark:hover{border-color:var(--clr-accent);color:var(--clr-accent)}
.btn--lg{padding:1.1rem 2.2rem;font-size:.88rem}
.btn--block{width:100%;justify-content:center}
.btn--sm{padding:.6rem 1.2rem;font-size:.72rem}

/* WooCommerce global button override */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit{
  display:inline-flex!important;align-items:center!important;justify-content:center!important;
  gap:.5rem!important;
  padding:.85rem 1.75rem!important;
  font-family:var(--ff-body)!important;font-weight:700!important;
  font-size:.82rem!important;letter-spacing:.06em!important;text-transform:uppercase!important;
  border-radius:var(--radius-pill)!important;
  background:var(--clr-accent)!important;color:var(--clr-bg)!important;
  border:none!important;cursor:pointer;
  transition:all var(--dur)!important;
  white-space:nowrap;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover{
  background:var(--clr-accent-h)!important;
  transform:translateY(-2px)!important;
  box-shadow:0 12px 32px rgba(200,255,0,.2)!important;
}
.woocommerce a.button.alt{background:var(--clr-white)!important;color:var(--clr-bg)!important}
.woocommerce a.button.alt:hover{background:#fff!important}

/* ══════════════════════════════════════════
   FORMS
══════════════════════════════════════════ */
input[type=text],input[type=email],input[type=password],
input[type=tel],input[type=number],input[type=search],
select,textarea,
.woocommerce-input-wrapper input,
.woocommerce-input-wrapper select,
.woocommerce-input-wrapper textarea{
  width:100%;
  background:var(--clr-glass);
  color:var(--clr-white);
  border:1px solid var(--clr-border);
  border-radius:var(--radius-sm);
  padding:.8rem 1rem;
  font-family:var(--ff-body);font-size:.9rem;
  outline:none;appearance:none;-webkit-appearance:none;
  transition:border-color var(--dur);
}
input:focus,select:focus,textarea:focus{border-color:var(--clr-accent)}
input::placeholder,textarea::placeholder{color:var(--clr-muted)}
label,.woocommerce form .form-row label{
  display:block;
  font-family:var(--ff-mono);font-size:.6rem;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--clr-muted);margin-bottom:.4rem;
}
textarea{min-height:120px;resize:vertical}

/* ══════════════════════════════════════════
   SECTION LABELS & HEADINGS
══════════════════════════════════════════ */
.section-label{
  display:inline-flex;align-items:center;gap:.6rem;
  font-family:var(--ff-mono);font-size:.6rem;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--clr-accent);margin-bottom:1rem;
}
.section-label::after{
  content:'';width:32px;height:1px;
  background:var(--clr-accent);opacity:.5;
}
.section-title{
  font-family:var(--ff-display);
  font-size:clamp(2.2rem,5vw,4.5rem);
  text-transform:uppercase;line-height:.92;
  color:var(--clr-white);margin-bottom:.75rem;
}
.section-sub{
  font-size:.95rem;color:var(--clr-muted);
  line-height:1.7;max-width:500px;
}
.sec-header{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:1.5rem;margin-bottom:2.5rem;flex-wrap:wrap;
}

/* ══════════════════════════════════════════
   TICKER
══════════════════════════════════════════ */
.ticker{
  background:var(--clr-glass);
  border-block:1px solid var(--clr-border);
  padding:.75rem 0;overflow:hidden;
}
.ticker__track{
  display:flex;gap:2rem;
  width:max-content;
  animation:ticker 30s linear infinite;
}
.ticker__track:hover{animation-play-state:paused}
.ticker__item{
  display:flex;align-items:center;gap:1.75rem;
  font-family:var(--ff-mono);font-size:.6rem;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--clr-muted);white-space:nowrap;
}
.ticker__dot{color:var(--clr-accent);font-size:.5rem}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ══════════════════════════════════════════
   HERO
══════════════════════════════════════════ */
.hero{
  min-height:calc(100vh - var(--nav-h));
  display:grid;grid-template-columns:1fr 1fr;
  position:relative;overflow:hidden;
}
/* ambient glow */
.hero::before{
  content:'';position:absolute;
  width:700px;height:700px;
  background:radial-gradient(circle,rgba(200,255,0,.07) 0%,transparent 70%);
  top:-100px;right:-150px;pointer-events:none;z-index:0;
}
.hero::after{
  content:'';position:absolute;
  width:400px;height:400px;
  background:radial-gradient(circle,rgba(255,60,60,.05) 0%,transparent 70%);
  bottom:50px;left:80px;pointer-events:none;z-index:0;
}

.hero__left{
  display:flex;flex-direction:column;justify-content:center;
  padding:5rem var(--gap) 5rem max(var(--gap), calc((100vw - var(--wrap)) / 2 + var(--gap)));
  position:relative;z-index:2;
}

.hero__badge{
  display:inline-flex;align-items:center;gap:.6rem;
  background:var(--clr-glass);border:1px solid var(--clr-border);
  backdrop-filter:blur(12px);
  padding:.55rem 1rem;border-radius:var(--radius-pill);
  font-family:var(--ff-mono);font-size:.58rem;
  letter-spacing:.1em;color:var(--clr-accent);
  margin-bottom:2rem;width:fit-content;
}
.hero__badge-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--clr-accent);
  animation:pulse 2s infinite;flex-shrink:0;
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.7)}}

.hero__title{
  font-family:var(--ff-display);
  font-size:clamp(3.5rem,7vw,7rem);
  text-transform:uppercase;
  line-height:.9;letter-spacing:-.02em;
  color:var(--clr-white);margin-bottom:1.5rem;
}
.hero__title .accent{color:var(--clr-accent)}
.hero__title .stroke{
  -webkit-text-stroke:1.5px var(--clr-white);
  color:transparent;display:block;
}

.hero__sub{
  font-size:1rem;color:var(--clr-muted);
  line-height:1.7;max-width:420px;margin-bottom:2.5rem;
}

.hero__actions{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}

.hero__stats{
  display:flex;gap:2.5rem;
  margin-top:3rem;padding-top:2rem;
  border-top:1px solid var(--clr-border);
}
.stat__num{
  font-family:var(--ff-display);font-size:2rem;
  color:var(--clr-accent);line-height:1;
}
.stat__label{
  font-family:var(--ff-mono);font-size:.55rem;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--clr-muted);margin-top:.25rem;
}

/* Hero right — cover mosaic */
.hero__right{
  position:relative;overflow:hidden;
  background:var(--clr-bg2);
}
.hero__right::before{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to right,var(--clr-bg) 0%,transparent 20%);
}
.hero__mosaic{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:repeat(3,1fr);
  gap:3px;
  position:absolute;inset:0;
}
.mosaic-cell{
  overflow:hidden;background:var(--clr-bg3);
  position:relative;
}
.mosaic-cell:first-child{grid-row:1/3}
.mosaic-cell img{
  width:100%;height:100%;
  object-fit:cover;
  transition:transform var(--dur-slow) var(--ease),filter var(--dur-slow);
  filter:saturate(.85);
}
.mosaic-cell:hover img{transform:scale(1.06);filter:saturate(1.1)}
/* placeholder gradient when no image */
.mosaic-cell:nth-child(1):not(:has(img)){background:linear-gradient(135deg,#0f3460,#533483)}
.mosaic-cell:nth-child(2):not(:has(img)){background:linear-gradient(135deg,#1a0533,#6b0fa5)}
.mosaic-cell:nth-child(3):not(:has(img)){background:linear-gradient(135deg,#1c1c00,#C8FF00 200%)}
.mosaic-cell:nth-child(4):not(:has(img)){background:linear-gradient(135deg,#3d1500,#ff6b00)}
.mosaic-cell:nth-child(5){grid-column:1/3;background:linear-gradient(135deg,#111,#1a1a1a)}

.hero__live-tag{
  position:absolute;bottom:1.5rem;right:1.5rem;z-index:3;
  background:rgba(8,8,8,.88);border:1px solid var(--clr-border);
  backdrop-filter:blur(12px);border-radius:var(--radius-sm);
  padding:.6rem 1rem;display:flex;align-items:center;gap:.55rem;
}
.live-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--clr-accent);animation:pulse 1.8s infinite;flex-shrink:0;
}
.live-text{
  font-family:var(--ff-mono);font-size:.58rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--clr-muted);
}

@media(max-width:900px){
  .hero{grid-template-columns:1fr;min-height:auto}
  .hero__right{height:60vw;max-height:420px;order:-1}
  .hero__right::before{background:linear-gradient(to top,var(--clr-bg) 0%,transparent 40%)}
  .hero__left{padding:2.5rem var(--gap)}
  .hero__title{font-size:clamp(2.8rem,10vw,5rem)}
  .hero__stats{gap:1.5rem}
}
@media(max-width:480px){
  .hero__actions{flex-direction:column;align-items:stretch}
  .hero__actions .btn{width:100%}
  .hero__stats{flex-wrap:wrap;gap:1rem}
}

/* ══════════════════════════════════════════
   TRUST BAR
══════════════════════════════════════════ */
.trust-bar{
  background:var(--clr-glass);
  border-block:1px solid var(--clr-border);
  backdrop-filter:blur(12px);
  padding:1.1rem 0;overflow:hidden;
}
.trust-bar__inner{
  display:flex;align-items:center;justify-content:center;
  gap:2.5rem;flex-wrap:wrap;padding-inline:var(--gap);
}
.trust-item{
  display:flex;align-items:center;gap:.6rem;
  font-family:var(--ff-mono);font-size:.6rem;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--clr-muted);white-space:nowrap;
}
.trust-item svg{color:var(--clr-accent);flex-shrink:0}

/* ══════════════════════════════════════════
   HOW IT WORKS
══════════════════════════════════════════ */
.hiw-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1rem;margin-top:3rem;
}
@media(max-width:900px){.hiw-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.hiw-grid{grid-template-columns:1fr}}

.hiw-card{
  background:var(--clr-glass);
  border:1px solid var(--clr-border);
  backdrop-filter:blur(20px);
  border-radius:var(--radius);
  padding:2.25rem 1.75rem;
  position:relative;overflow:hidden;
  transition:all var(--dur);
}
.hiw-card:hover{
  border-color:rgba(200,255,0,.3);
  background:var(--clr-glass-hover);
  transform:translateY(-4px);
}
.hiw-card::before{
  content:attr(data-num);
  position:absolute;top:.5rem;right:1rem;
  font-family:var(--ff-display);font-size:5rem;
  color:rgba(200,255,0,.06);line-height:1;
  pointer-events:none;
}
.hiw-icon{
  width:48px;height:48px;border-radius:12px;
  background:var(--clr-accent-dim);
  display:flex;align-items:center;justify-content:center;
  color:var(--clr-accent);margin-bottom:1.25rem;
}
.hiw-card h3{
  font-family:var(--ff-display);font-size:1.1rem;text-transform:uppercase;
  margin-bottom:.6rem;color:var(--clr-white);
}
.hiw-card p{font-size:.85rem;color:var(--clr-muted);line-height:1.65}

/* ══════════════════════════════════════════
   PRODUCT GRID — THE CORE FIX
   Uses auto-fill minmax so WC column classes
   don't interfere. Works on archive + homepage.
══════════════════════════════════════════ */

/* Container reset — strip WC floats */
.woocommerce ul.products,
ul.products{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr))!important;
  gap:1.25rem!important;
  padding:0!important;margin:0!important;
  list-style:none!important;float:none!important;clear:both!important;
  width:100%!important;
}
/* Hide WC clearing div injected after the list */
.woocommerce .products+.clear,
.woocommerce-page .products+.clear{display:none!important}

/* Card */
.woocommerce ul.products li.product,
ul.products li.product{
  float:none!important;
  width:auto!important;
  margin:0!important;padding:0!important;
  background:var(--clr-glass)!important;
  border:1px solid var(--clr-border)!important;
  border-radius:var(--radius)!important;
  overflow:hidden!important;
  display:flex!important;flex-direction:column!important;
  transition:border-color var(--dur),transform var(--dur),box-shadow var(--dur)!important;
  position:relative!important;
  cursor:pointer;
}
.woocommerce ul.products li.product:hover,
ul.products li.product:hover{
  border-color:rgba(200,255,0,.25)!important;
  transform:translateY(-5px)!important;
  box-shadow:0 20px 50px rgba(0,0,0,.4)!important;
}

/* Image wrapper — force 1:1 square */
.woocommerce ul.products li.product a.woocommerce-loop-product__link,
ul.products li.product a.woocommerce-loop-product__link{
  display:block!important;
  position:relative!important;
  overflow:hidden!important;
  /* The magic: paddding-top trick works without knowing img dimensions */
  aspect-ratio:1/1!important;
  width:100%!important;
  flex-shrink:0!important;
  background:var(--clr-bg3);
}
/* Image itself */
.woocommerce ul.products li.product a.woocommerce-loop-product__link img,
ul.products li.product a.woocommerce-loop-product__link img{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
  display:block!important;
  /* kill WC inline width/height attrs */
  max-width:none!important;
  transition:transform var(--dur-slow) var(--ease),filter var(--dur-slow)!important;
  filter:saturate(.85)!important;
}
.woocommerce ul.products li.product:hover a.woocommerce-loop-product__link img,
ul.products li.product:hover a.woocommerce-loop-product__link img{
  transform:scale(1.07)!important;
  filter:saturate(1.1)!important;
}

/* Sale / Exclusive badge */
.woocommerce ul.products li.product .onsale,
ul.products li.product .onsale,
.badge-excl{
  position:absolute!important;top:.75rem!important;left:.75rem!important;
  background:var(--clr-accent)!important;color:var(--clr-bg)!important;
  font-family:var(--ff-mono)!important;font-size:.52rem!important;
  font-weight:700!important;letter-spacing:.1em!important;text-transform:uppercase!important;
  padding:3px 8px!important;border-radius:4px!important;
  margin:0!important;min-height:auto!important;min-width:auto!important;
  line-height:1.4!important;z-index:3!important;
}

/* Card body */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--ff-display)!important;
  font-size:1rem!important;font-weight:400!important;
  text-transform:uppercase!important;
  color:var(--clr-white)!important;
  padding:.9rem 1rem .25rem!important;margin:0!important;
  line-height:1.15!important;
}
.woocommerce ul.products li.product .price,
ul.products li.product .price{
  font-family:var(--ff-mono)!important;
  font-size:.85rem!important;color:var(--clr-accent)!important;
  padding:0 1rem .2rem!important;margin:0!important;display:block!important;
}
.woocommerce ul.products li.product .price del,
ul.products li.product .price del{color:var(--clr-muted)!important;margin-right:.35rem}

/* Genre tag below price */
.loop-genre{
  font-family:var(--ff-mono);font-size:.55rem;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--clr-muted);padding:0 1rem .75rem;
}

/* Add to cart btn */
.woocommerce ul.products li.product .button,
ul.products li.product .button{
  margin:.25rem 1rem 1rem!important;
  width:calc(100% - 2rem)!important;
  padding:.7rem 1rem!important;
  font-size:.72rem!important;
  border-radius:var(--radius-pill)!important;
  margin-top:auto!important;
}

/* ══════════════════════════════════════════
   VALUE PROPS
══════════════════════════════════════════ */
.vp-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1rem;
}
@media(max-width:900px){.vp-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:500px){.vp-grid{grid-template-columns:1fr}}

.vp-card{
  background:var(--clr-glass);border:1px solid var(--clr-border);
  border-radius:var(--radius);padding:2rem 1.5rem;
  transition:all var(--dur);position:relative;overflow:hidden;
}
.vp-card:hover{border-color:rgba(200,255,0,.25);transform:translateY(-3px)}
.vp-icon{
  width:44px;height:44px;border-radius:10px;
  background:var(--clr-accent-dim);
  display:flex;align-items:center;justify-content:center;
  color:var(--clr-accent);margin-bottom:1.25rem;
}
.vp-title{
  font-family:var(--ff-display);font-size:1.05rem;text-transform:uppercase;
  color:var(--clr-white);margin-bottom:.5rem;
}
.vp-body{font-size:.85rem;color:var(--clr-muted);line-height:1.65}

/* ══════════════════════════════════════════
   TESTIMONIALS
══════════════════════════════════════════ */
.reviews-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1.25rem;
}
@media(max-width:900px){.reviews-grid{grid-template-columns:1fr}}

.review-card{
  background:var(--clr-glass);border:1px solid var(--clr-border);
  border-radius:var(--radius);padding:2rem;
  transition:all var(--dur);position:relative;
}
.review-card:hover{border-color:rgba(200,255,0,.22);transform:translateY(-4px)}
.review-stars{color:var(--clr-accent);font-size:.85rem;margin-bottom:1rem}
.review-text{font-size:.88rem;color:var(--clr-muted);line-height:1.75;margin-bottom:1.5rem}
.review-author{display:flex;align-items:center;gap:.75rem}
.review-avatar{
  width:40px;height:40px;border-radius:50%;
  background:var(--clr-accent-dim);border:1px solid var(--clr-border);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-mono);font-size:.65rem;color:var(--clr-accent);flex-shrink:0;
}
.review-name{font-family:var(--ff-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--clr-white)}
.review-handle{font-size:.78rem;color:var(--clr-muted);margin-top:.15rem}

/* ══════════════════════════════════════════
   EDITORIAL SPLIT
══════════════════════════════════════════ */
.editorial{
  display:grid;grid-template-columns:1fr 1fr;
  border-block:1px solid var(--clr-border);overflow:hidden;
  min-height:520px;
}
.editorial__img{position:relative;overflow:hidden;background:var(--clr-bg3)}
.editorial__img img{
  width:100%;height:100%;object-fit:cover;
  display:block;filter:saturate(.85);
  transition:transform var(--dur-slow) var(--ease),filter var(--dur-slow);
}
.editorial:hover .editorial__img img{transform:scale(1.04);filter:saturate(1)}
.editorial__content{
  display:flex;flex-direction:column;justify-content:center;
  padding:4rem 3rem;
}
.editorial__feats{display:flex;flex-direction:column;gap:.6rem;margin:1.5rem 0}
.feat-row{
  display:flex;align-items:center;gap:.65rem;
  font-family:var(--ff-mono);font-size:.6rem;
  letter-spacing:.08em;text-transform:uppercase;
  color:var(--clr-muted);
}
.feat-row svg{color:var(--clr-accent);flex-shrink:0}
@media(max-width:768px){
  .editorial{grid-template-columns:1fr}
  .editorial__img{aspect-ratio:4/3;height:auto}
  .editorial__content{padding:2.5rem var(--gap)}
}

/* ══════════════════════════════════════════
   CTA BAND
══════════════════════════════════════════ */
.cta-band{
  background:var(--clr-accent);
  padding:clamp(3rem,6vw,5.5rem) var(--gap);
  text-align:center;position:relative;overflow:hidden;
}
.cta-band::before{
  content:'CGCOVERART';
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--ff-display);font-size:18vw;
  color:rgba(0,0,0,.055);letter-spacing:-.05em;
  pointer-events:none;white-space:nowrap;overflow:hidden;
}
.cta-band__title{
  font-family:var(--ff-display);
  font-size:clamp(2.5rem,6vw,6rem);
  text-transform:uppercase;line-height:.9;
  color:var(--clr-bg);margin-bottom:.75rem;position:relative;
}
.cta-band__sub{
  font-size:.95rem;color:rgba(8,8,8,.7);
  margin-bottom:2rem;max-width:46ch;margin-inline:auto;position:relative;
}
.cta-band .btn--dark{position:relative;border-color:var(--clr-bg)}
.cta-band .btn--dark:hover{background:var(--clr-bg);color:var(--clr-accent)}

/* ══════════════════════════════════════════
   PLATFORMS STRIP
══════════════════════════════════════════ */
.platforms{
  padding:.9rem 0;border-bottom:1px solid var(--clr-border);
  overflow:hidden;background:var(--clr-bg2);
}
.platforms__track{
  display:flex;align-items:center;gap:2.5rem;
  width:max-content;
  animation:ticker 24s linear infinite;
}
.platforms__label{
  font-family:var(--ff-mono);font-size:.55rem;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--clr-muted);white-space:nowrap;
}

/* ══════════════════════════════════════════
   SHOP ARCHIVE
══════════════════════════════════════════ */
.shop-layout{
  display:grid;grid-template-columns:240px 1fr;
  gap:2.5rem;padding-block:3rem;align-items:start;
}
@media(max-width:900px){.shop-layout{grid-template-columns:1fr}}

.shop-sidebar{position:sticky;top:calc(var(--nav-h) + 1rem);align-self:flex-start}
.filter-box{
  background:var(--clr-glass);border:1px solid var(--clr-border);
  border-radius:var(--radius);overflow:hidden;margin-bottom:1rem;
}
.filter-box__head{
  padding:.75rem 1rem;
  font-family:var(--ff-mono);font-size:.6rem;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--clr-muted);
  display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;transition:color var(--dur);
}
.filter-box__head:hover{color:var(--clr-white)}
.filter-box__body{padding:1rem;border-top:1px solid var(--clr-border)}
.filter-option{
  display:flex;align-items:center;gap:.6rem;
  padding:.35rem 0;font-size:.85rem;color:var(--clr-muted);cursor:pointer;
  transition:color var(--dur);
}
.filter-option:hover{color:var(--clr-accent)}
.filter-option input[type=checkbox]{
  width:14px;height:14px;accent-color:var(--clr-accent);cursor:pointer;
}

.shop-toolbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding-bottom:1.5rem;
  border-bottom:1px solid var(--clr-border);margin-bottom:1.5rem;
}
.woocommerce .woocommerce-result-count{
  font-family:var(--ff-mono);font-size:.6rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--clr-muted);margin:0;
}
.woocommerce .woocommerce-ordering select{
  background:var(--clr-glass);border-color:var(--clr-border);
  color:var(--clr-white);font-size:.8rem;padding:.5rem .8rem;
  border-radius:var(--radius-pill);
}

/* ══════════════════════════════════════════
   SINGLE PRODUCT PAGE
══════════════════════════════════════════ */
.woocommerce div.product{
  display:grid;grid-template-columns:1fr 1fr;
  gap:4rem;padding-block:3rem;align-items:start;
}
.woocommerce div.product .woocommerce-product-gallery{
  position:sticky;top:calc(var(--nav-h) + 1.5rem);align-self:flex-start;
}
.woocommerce div.product .woocommerce-product-gallery__wrapper{
  border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--clr-border);background:var(--clr-bg3);
}
.woocommerce div.product .woocommerce-product-gallery__image img{
  width:100%!important;aspect-ratio:1!important;
  object-fit:cover!important;display:block!important;
}
.woocommerce div.product .summary{display:flex;flex-direction:column;gap:1.25rem}
.woocommerce div.product .product_title{
  font-family:var(--ff-display)!important;
  font-size:clamp(2.2rem,4vw,4rem)!important;
  text-transform:uppercase!important;line-height:.9!important;
  color:var(--clr-white)!important;margin:0!important;
}
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  font-family:var(--ff-display)!important;
  font-size:2.5rem!important;color:var(--clr-accent)!important;
  line-height:1!important;margin:0!important;
}
.woocommerce div.product p.price del{
  color:var(--clr-muted)!important;font-size:1.4rem!important;margin-right:.5rem;
}
.woocommerce div.product .woocommerce-product-details__short-description{
  color:var(--clr-muted);font-size:.9rem;line-height:1.75;
  border-block:1px solid var(--clr-border);padding-block:1rem;
}
.woocommerce div.product .woocommerce-product-details__short-description p{max-width:none}

.woocommerce div.product form.cart{display:flex;flex-direction:column;gap:.75rem}
.woocommerce div.product .single_add_to_cart_button{width:100%!important;padding:1.1rem 2rem!important}

/* Urgency */
.product-urgency{
  background:rgba(200,255,0,.07);border:1px solid rgba(200,255,0,.2);
  border-radius:var(--radius-sm);padding:.85rem 1.1rem;
  display:flex;align-items:center;gap:.65rem;
}
.urgency-dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--clr-accent);animation:pulse 1.5s infinite;flex-shrink:0;
}
.urgency-text{font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--clr-accent)}

/* Trust checklist */
.product-trust{
  background:var(--clr-glass);border:1px solid var(--clr-border);
  border-radius:var(--radius);padding:1.5rem;display:flex;flex-direction:column;gap:.6rem;
}
.trust-row{
  display:flex;align-items:center;gap:.65rem;
  font-family:var(--ff-mono);font-size:.6rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--clr-muted);
}
.trust-row svg{color:var(--clr-accent);flex-shrink:0}

/* Guarantee */
.product-guarantee{
  background:rgba(200,255,0,.05);
  border:1px solid rgba(200,255,0,.18);
  border-left:3px solid var(--clr-accent);
  border-radius:var(--radius-sm);padding:1.1rem 1.25rem;
  display:flex;align-items:flex-start;gap:.75rem;
}
.product-guarantee svg{color:var(--clr-accent);flex-shrink:0;margin-top:.1rem}
.product-guarantee p:first-child{
  font-family:var(--ff-mono);font-size:.58rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--clr-accent);margin-bottom:.3rem;
}
.product-guarantee p:last-child{font-size:.8rem;color:var(--clr-muted);margin:0}

/* Tabs */
.woocommerce .woocommerce-tabs{margin-top:3rem}
.woocommerce .woocommerce-tabs ul.tabs{
  display:flex;gap:0;border-bottom:1px solid var(--clr-border);padding:0;margin-bottom:1.5rem;
}
.woocommerce .woocommerce-tabs ul.tabs li{background:none!important;border:none!important}
.woocommerce .woocommerce-tabs ul.tabs li a{
  display:block;padding:.75rem 1.25rem;
  font-family:var(--ff-mono);font-size:.65rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--clr-muted);border-bottom:2px solid transparent;
  margin-bottom:-1px;transition:all var(--dur);
}
.woocommerce .woocommerce-tabs ul.tabs li.active a,
.woocommerce .woocommerce-tabs ul.tabs li a:hover{color:var(--clr-white);border-bottom-color:var(--clr-accent)}
.woocommerce .woocommerce-tabs .panel{color:var(--clr-muted);font-size:.9rem;line-height:1.75}
.woocommerce .woocommerce-tabs .panel h2{font-size:1.3rem;margin-bottom:1rem}

.related.products{padding-top:3rem;border-top:1px solid var(--clr-border);margin-top:2rem}
.related.products h2{font-family:var(--ff-display);font-size:2rem;margin-bottom:1.5rem;color:var(--clr-white)}

@media(max-width:768px){
  .woocommerce div.product{grid-template-columns:1fr;gap:2rem}
  .woocommerce div.product .woocommerce-product-gallery{position:static}
}

/* ══════════════════════════════════════════
   CART & CHECKOUT
══════════════════════════════════════════ */
.woocommerce table.shop_table{
  width:100%;border-collapse:collapse;
  border:1px solid var(--clr-border);border-radius:var(--radius);overflow:hidden;
}
.woocommerce table.shop_table th{
  font-family:var(--ff-mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--clr-muted);font-weight:400;padding:1rem 1.25rem;
  border-bottom:1px solid var(--clr-border);text-align:left;background:var(--clr-glass);
}
.woocommerce table.shop_table td{
  padding:1rem 1.25rem;border-bottom:1px solid var(--clr-border);
  color:var(--clr-white);vertical-align:middle;
}
.woocommerce table.shop_table td.product-name a{
  font-family:var(--ff-display);font-size:1.15rem;text-transform:uppercase;color:var(--clr-white);
}
.woocommerce table.shop_table td.product-name a:hover{color:var(--clr-accent)}
.woocommerce table.shop_table .amount{font-family:var(--ff-mono);color:var(--clr-accent)}
.woocommerce .cart-collaterals{
  display:grid;grid-template-columns:1fr 360px;gap:2rem;margin-top:2rem;align-items:start;
}
.woocommerce .cart_totals{
  background:var(--clr-glass);border:1px solid var(--clr-border);
  border-radius:var(--radius);padding:1.75rem;
}
.woocommerce .cart_totals h2{font-family:var(--ff-display);font-size:1.4rem;margin-bottom:1rem;color:var(--clr-white)}
.woocommerce .cart_totals table th,.woocommerce .cart_totals table td{padding:.6rem 0;font-size:.88rem;border-bottom:1px solid var(--clr-border)}
.woocommerce .cart_totals .order-total .amount{font-family:var(--ff-display);font-size:1.75rem;color:var(--clr-accent)}
@media(max-width:768px){.woocommerce .cart-collaterals{grid-template-columns:1fr}}

.woocommerce-checkout .col2-set{display:grid;grid-template-columns:1fr 1fr;gap:2rem}
@media(max-width:768px){.woocommerce-checkout .col2-set{grid-template-columns:1fr}}
.woocommerce-checkout h3{font-family:var(--ff-display);font-size:1.3rem;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid var(--clr-border);color:var(--clr-white)}
.woocommerce #payment{background:var(--clr-glass);border:1px solid var(--clr-border);border-radius:var(--radius);padding:1.5rem}
.woocommerce #payment ul.payment_methods{border-bottom:1px solid var(--clr-border);padding-bottom:1rem;margin-bottom:1rem}
.woocommerce #payment ul.payment_methods li label{font-size:.9rem;color:var(--clr-muted);letter-spacing:normal;text-transform:none}

/* My account */
.woocommerce-account .woocommerce{display:grid;grid-template-columns:220px 1fr;gap:2rem;padding-block:3rem}
@media(max-width:768px){.woocommerce-account .woocommerce{grid-template-columns:1fr}}
.woocommerce-MyAccount-navigation{position:sticky;top:calc(var(--nav-h)+1rem);align-self:flex-start}
.woocommerce-MyAccount-navigation ul{background:var(--clr-glass);border:1px solid var(--clr-border);border-radius:var(--radius);overflow:hidden}
.woocommerce-MyAccount-navigation a{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;font-family:var(--ff-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--clr-muted);border-bottom:1px solid var(--clr-border);transition:all var(--dur)}
.woocommerce-MyAccount-navigation a:hover,.woocommerce-MyAccount-navigation .is-active a{color:var(--clr-white);background:var(--clr-glass-hover);padding-left:1.25rem}
.woocommerce-MyAccount-navigation .is-active a{border-left:2px solid var(--clr-accent)}

/* ══════════════════════════════════════════
   BREADCRUMB / NOTICES / PAGINATION
══════════════════════════════════════════ */
.woocommerce-breadcrumb{
  font-family:var(--ff-mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--clr-muted);padding-block:1rem;border-bottom:1px solid var(--clr-border);margin-bottom:2rem;
}
.woocommerce-breadcrumb a{color:var(--clr-muted);transition:color var(--dur)}
.woocommerce-breadcrumb a:hover{color:var(--clr-accent)}
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  background:var(--clr-glass);border:1px solid var(--clr-border);border-left:3px solid var(--clr-accent);
  color:var(--clr-white);padding:1rem 1.25rem;margin-bottom:1.5rem;
  border-radius:var(--radius-sm);font-size:.88rem;list-style:none;
}
.woocommerce-error{border-left-color:var(--clr-red)}
.woocommerce-pagination{display:flex;justify-content:center;gap:.4rem;margin-top:3rem}
.woocommerce-pagination .page-numbers{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;border:1px solid var(--clr-border);
  font-family:var(--ff-mono);font-size:.65rem;color:var(--clr-muted);
  border-radius:var(--radius-sm);transition:all var(--dur);
}
.woocommerce-pagination .page-numbers:hover,
.woocommerce-pagination .page-numbers.current{border-color:var(--clr-accent);color:var(--clr-accent);background:var(--clr-accent-dim)}

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
.site-footer{background:var(--clr-bg2);border-top:1px solid var(--clr-border)}
.footer-main{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2.5rem;padding-block:4rem}
@media(max-width:900px){.footer-main{grid-template-columns:1fr 1fr}}
@media(max-width:500px){.footer-main{grid-template-columns:1fr}}
.footer-logo{font-family:var(--ff-display);font-size:1.4rem;text-transform:uppercase;color:var(--clr-white);text-decoration:none;display:block;margin-bottom:1rem}
.footer-logo span{color:var(--clr-accent)}
.footer-logo img{height:44px;width:auto;margin-bottom:1rem}
.footer-tagline{font-size:.85rem;color:var(--clr-muted);line-height:1.65;max-width:30ch;margin-bottom:1.25rem}
.footer-socials{display:flex;gap:.5rem}
.footer-socials a{
  width:34px;height:34px;border:1px solid var(--clr-border);border-radius:var(--radius-pill);
  display:flex;align-items:center;justify-content:center;
  color:var(--clr-muted);font-size:.75rem;transition:all var(--dur);
}
.footer-socials a:hover{border-color:var(--clr-accent);color:var(--clr-accent)}
.footer-col__title{font-family:var(--ff-mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:var(--clr-muted);margin-bottom:1.25rem}
.footer-col ul{display:flex;flex-direction:column;gap:.5rem}
.footer-col a{font-size:.88rem;color:var(--clr-muted);transition:color var(--dur)}
.footer-col a:hover{color:var(--clr-accent)}
.footer-bottom{border-top:1px solid var(--clr-border);padding:1.25rem 0;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.footer-copy{font-family:var(--ff-mono);font-size:.56rem;letter-spacing:.08em;color:var(--clr-muted)}
.footer-legal{display:flex;gap:1.5rem}
.footer-legal a{font-family:var(--ff-mono);font-size:.56rem;letter-spacing:.08em;text-transform:uppercase;color:var(--clr-muted);transition:color var(--dur)}
.footer-legal a:hover{color:var(--clr-accent)}

/* ══════════════════════════════════════════
   PAGE TEMPLATES
══════════════════════════════════════════ */
.page-hero{
  background:var(--clr-glass);border-bottom:1px solid var(--clr-border);
  padding:3.5rem 0 2.5rem;margin-bottom:3rem;
}
.page-hero .section-label{margin-bottom:.75rem}
.page-content{color:var(--clr-muted);font-size:.92rem;line-height:1.8;max-width:780px}
.page-content h2,.page-content h3{color:var(--clr-white);margin:1.75rem 0 .75rem}
.page-content p{margin-bottom:1rem}
.page-content a{color:var(--clr-accent)}
.page-content ul,.page-content ol{margin:1rem 0;padding-left:1.5rem}
.page-content li{margin-bottom:.5rem}

/* ══════════════════════════════════════════
   REVEAL ANIMATIONS
══════════════════════════════════════════ */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.reveal.in{opacity:1;transform:none}
.reveal--left{transform:translateX(-24px)}.reveal--left.in{transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}.d4{transition-delay:.4s}

/* ══════════════════════════════════════════
   UTILITIES
══════════════════════════════════════════ */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.text-accent{color:var(--clr-accent)}.text-muted{color:var(--clr-muted)}.text-center{text-align:center}
.mt-0{margin-top:0}.mb-0{margin-bottom:0}
hr,.divider{border:none;border-top:1px solid var(--clr-border);margin:1.5rem 0}
body.admin-bar .site-header{top:32px}
body.admin-bar .mobile-nav{top:calc(var(--nav-h)+32px)}
@media(max-width:782px){body.admin-bar .site-header{top:46px}}
/* ══════════════════════════════════════════
   PRODUCT CARD CUSTOM TEMPLATE STYLES
   (content-product.php)
══════════════════════════════════════════ */

/* Image wrapper — perfect 1:1 square, no distortion ever */
.prod-img-wrap {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--clr-bg3);
  flex-shrink: 0;
  border-radius: var(--radius) var(--radius) 0 0;
}
.prod-img-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform var(--dur-slow) var(--ease), filter var(--dur-slow);
  filter: saturate(.85);
}
li.product:hover .prod-img-wrap img {
  transform: scale(1.07);
  filter: saturate(1.1);
}

/* Badges */
.prod-badge {
  position: absolute;
  top: .75rem; left: .75rem;
  font-family: var(--ff-mono);
  font-size: .52rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 4px;
  z-index: 3; line-height: 1.5;
}
.prod-badge--excl { background: var(--clr-accent); color: var(--clr-bg); }
.prod-badge--sale { background: #ff9900; color: #000; }
.prod-badge--sold { background: var(--clr-red); color: #fff; }

/* Quick add on hover */
.prod-quick {
  position: absolute;
  bottom: .75rem; left: .75rem; right: .75rem;
  background: var(--clr-accent);
  color: var(--clr-bg);
  font-family: var(--ff-mono);
  font-size: .6rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .6rem;
  border-radius: var(--radius-sm);
  text-align: center;
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  opacity: 0;
  transform: translateY(6px);
  transition: all var(--dur);
  z-index: 3;
}
li.product:hover .prod-quick {
  opacity: 1;
  transform: translateY(0);
}

/* Info section */
.prod-info {
  padding: .9rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  flex: 1;
}
.prod-genre {
  font-family: var(--ff-mono);
  font-size: .52rem; letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--clr-muted);
}
.prod-name {
  font-family: var(--ff-display) !important;
  font-size: .95rem !important; font-weight: 400 !important;
  text-transform: uppercase !important;
  color: var(--clr-white) !important;
  line-height: 1.2 !important;
  transition: color var(--dur);
  margin: 0 !important;
}
.prod-name:hover { color: var(--clr-accent) !important; }

.prod-bottom {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-top: .4rem;
}
.prod-price {
  font-family: var(--ff-mono);
  font-size: .88rem;
  color: var(--clr-accent);
  font-weight: 700;
}
.prod-price del { color: var(--clr-muted); margin-right: .3rem; }

.prod-atc {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important; height: 36px !important;
  background: var(--clr-accent) !important;
  color: var(--clr-bg) !important;
  border-radius: 50% !important;
  border: none !important;
  padding: 0 !important;
  transition: all var(--dur) !important;
  flex-shrink: 0;
}
.prod-atc:hover {
  background: var(--clr-accent-h) !important;
  transform: scale(1.1) !important;
}

/* var for slow transition */
:root { --dur-slow: .45s; }

/* ══════════════════════════════════════════
   LIVE SITE FIXES — v3.1
══════════════════════════════════════════ */

/* ── 1. Hide "Uncategorized" category tag on product cards ── */
.prod-genre a[href*="uncategorized"],
.posted_in a[href*="uncategorized"],
.woocommerce ul.products li.product .posted_in a[href*="uncategorized"] {
  display: none !important;
}
/* hide the separator dot if Uncategorized was the only item */
.prod-genre:empty { display: none; }

/* ── 2. HIW + Value Props section separation ── */
.hiw-grid { margin-top: 2.5rem; }
.vp-grid { margin-top: 0; }

/* ── 3. Hide quantity field on single product (digital items) ── */
.woocommerce div.product .quantity,
form.cart .quantity { display: none !important; }
.woocommerce div.product form.cart .single_add_to_cart_button {
  margin-top: 0 !important;
}

/* ── 4. Trust bar — better mobile wrapping ── */
@media (max-width: 640px) {
  .trust-bar__inner {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: .75rem 1.5rem !important;
    justify-items: start !important;
  }
}
@media (max-width: 380px) {
  .trust-bar__inner { grid-template-columns: 1fr !important; }
}

/* ── 5. Header CTA button — hidden by default, JS shows after scroll ── */
#header-shop-btn { display: none !important; }
.site-header.scrolled #header-shop-btn { display: inline-flex !important; }

/* ── 6. Product card — Add to Cart button always visible (not just hover) ── */
/* Override: show "Add to Cart" text label alongside the circle icon on cards */
.woocommerce ul.products li.product .button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .4rem !important;
  padding: .65rem 1rem !important;
  font-size: .72rem !important;
  border-radius: var(--radius-pill) !important;
  width: calc(100% - 2rem) !important;
  margin: .25rem 1rem 1rem !important;
  background: var(--clr-accent) !important;
  color: var(--clr-bg) !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  transition: all var(--dur) !important;
  border: none !important;
  cursor: pointer !important;
}
.woocommerce ul.products li.product .button:hover {
  background: var(--clr-accent-h) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(200,255,0,.2) !important;
}

/* Custom card template button */
.prod-atc {
  width: auto !important;
  height: auto !important;
  border-radius: var(--radius-pill) !important;
  padding: .65rem 1rem !important;
  font-family: var(--ff-mono) !important;
  font-size: .65rem !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
}

/* ── 7. Product page — quantity is hidden, so increase button spacing ── */
.woocommerce div.product form.cart {
  gap: 1rem !important;
}

/* ── 8. Related products grid — fix column count on product page ── */
.related.products ul.products {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
}

/* ── 9. Shop sidebar filter options — better checkbox alignment ── */
.filter-option {
  cursor: pointer;
  user-select: none;
}
.filter-option input { cursor: pointer; }

/* ── 10. Woocommerce breadcrumb separator style ── */
.woocommerce-breadcrumb .breadcrumb-separator { margin-inline: .4rem; color: var(--clr-muted); }

/* ── 11. Hero mosaic — last cell (5th) spans full row width ── */
.hero__mosaic {
  grid-template-columns: 1fr 1fr !important;
  grid-template-rows: 1fr 1fr 0.6fr !important;
}
.hero__mosaic .mosaic-cell:nth-child(5) {
  grid-column: 1 / 3 !important;
}

/* ── 12. Mobile hero — better image proportion ── */
@media (max-width: 900px) {
  .hero__right {
    height: 55vw !important;
    max-height: 400px !important;
    min-height: 260px !important;
  }
}

/* ── 13. Editorial split — min-height fix on mobile ── */
@media (max-width: 768px) {
  .editorial__img {
    min-height: 280px !important;
  }
}

/* ── 14. Footer logo image sizing ── */
.site-footer .site-logo img,
.site-footer img.custom-logo {
  height: 44px !important;
  width: auto !important;
  max-width: 180px !important;
}

/* ── 15. WooCommerce notices styling ── */
.woocommerce-notices-wrapper:empty { display: none; }

/* ── 16. Pagination on shop — better spacing ── */
.woocommerce-pagination {
  padding-block: 1rem;
}

/* ── 17. Single product — product title size on small screens ── */
@media (max-width: 480px) {
  .woocommerce div.product .product_title {
    font-size: 2rem !important;
  }
  .woocommerce div.product p.price {
    font-size: 1.75rem !important;
  }
}

/* ── 18. Header — account + search icon hover states ── */
.site-header a[aria-label*="account"]:hover,
.site-header a[aria-label*="account"]:hover svg,
.btn-icon:hover,
.btn-icon:hover svg {
  color: var(--clr-white) !important;
}

/* ── 19. Cart button — clean up icon alignment ── */
.btn-cart svg { margin-top: 1px; }

/* ── 20. Section spacing — How It Works background strip ── */
.hiw-section {
  background: var(--clr-bg2);
  border-block: 1px solid var(--clr-border);
}

/* ── 21. Testimonial card quote mark — decorative only ── */
.review-card::before {
  content: '"';
  position: absolute;
  top: 1rem; right: 1.5rem;
  font-family: var(--ff-display);
  font-size: 4.5rem;
  color: rgba(200,255,0,.08);
  line-height: 1;
  pointer-events: none;
}

/* ── 22. Search overlay input — fix DM Sans rendering ── */
.search-form-inner input[type=search] {
  font-family: var(--ff-display) !important;
  font-size: clamp(1.75rem, 5vw, 3.5rem) !important;
}

/* ── 23. Page template — How It Works steps grid responsive fix ── */
.hiw-steps-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: center;
}
@media (max-width: 768px) {
  .hiw-steps-grid {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
  }
}

/* ── 24. WC shop toolbar on mobile ── */
@media (max-width: 500px) {
  .shop-toolbar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: .75rem !important;
  }
  .woocommerce .woocommerce-ordering select {
    width: 100% !important;
  }
}

/* ── 25. CTA band title — responsive ── */
@media (max-width: 480px) {
  .cta-band__title {
    font-size: 2.2rem !important;
  }
  .cta-band::before {
    font-size: 30vw !important;
  }
}

/* ══════════════════════════════════════════
   CRITICAL FIXES — v3.2
══════════════════════════════════════════ */

/* ── Cart page — full width layout, better spacing ── */
.woocommerce-cart .woocommerce,
.woocommerce-cart main .wrap {
  padding-block: 2rem;
}
.woocommerce-cart table.shop_table {
  width: 100% !important;
  margin-bottom: 1.5rem;
}
.woocommerce-cart .cart-collaterals {
  display: grid !important;
  grid-template-columns: 1fr 380px !important;
  gap: 2rem !important;
  align-items: start !important;
}
@media (max-width: 768px) {
  .woocommerce-cart .cart-collaterals {
    grid-template-columns: 1fr !important;
  }
}
/* Cart quantity hidden — digital store */
.woocommerce-cart .product-quantity { display: none !important; }
.woocommerce-cart .product-subtotal { color: var(--clr-accent) !important; font-family: var(--ff-mono) !important; }

/* ── Proceed to Checkout button style fix ── */
.woocommerce .checkout-button,
.woocommerce a.checkout-button {
  background: var(--clr-accent) !important;
  color: var(--clr-bg) !important;
  border-radius: var(--radius-pill) !important;
  font-weight: 700 !important;
  display: block !important;
  text-align: center !important;
  padding: 1rem 1.5rem !important;
  margin-top: 1rem !important;
}
.woocommerce .checkout-button:hover,
.woocommerce a.checkout-button:hover {
  background: var(--clr-accent-h) !important;
  transform: translateY(-2px) !important;
}

/* ── Mobile — pagination z-index fix (Image 1 bug) ── */
.woocommerce-pagination {
  position: relative;
  z-index: 1;
  background: var(--clr-bg);
  padding: 1.5rem 0;
}

/* ── Mobile — cart count bubble position fix ── */
.btn-cart {
  position: relative !important;
}
.cart-count {
  position: static !important;
  display: inline-flex !important;
}

/* ── Mobile nav — prevent overflow ── */
.mobile-nav {
  overflow-x: hidden;
}

/* ── Page hero — cart page title ── */
.woocommerce-cart .page-hero,
.woocommerce-checkout .page-hero {
  padding-top: 2.5rem;
  padding-bottom: 1.5rem;
}

/* ── Update cart button style ── */
.woocommerce-cart .button[name="update_cart"] {
  background: var(--clr-bg3) !important;
  color: var(--clr-white) !important;
  border: 1px solid var(--clr-border) !important;
}
.woocommerce-cart .button[name="update_cart"]:hover {
  border-color: var(--clr-accent) !important;
  color: var(--clr-accent) !important;
  background: var(--clr-bg3) !important;
  transform: none !important;
  box-shadow: none !important;
}

/* ── Coupon input ── */
.woocommerce-cart .coupon {
  display: flex;
  gap: .75rem;
  align-items: center;
  flex-wrap: wrap;
}
.woocommerce-cart .coupon input[type=text] {
  width: auto !important;
  flex: 1 !important;
  min-width: 140px !important;
}

/* ── Cart — remove item button ── */
.woocommerce-cart .product-remove a {
  color: var(--clr-red) !important;
  font-size: 1.2rem !important;
  font-weight: 700;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  transition: background var(--dur) !important;
}
.woocommerce-cart .product-remove a:hover {
  background: rgba(255,60,60,.15) !important;
}

/* ── Checkout page ── */
.woocommerce-checkout .woocommerce {
  padding-block: 2.5rem;
}

/* ── My account navigation fix ── */
.woocommerce-account .woocommerce {
  padding-block: 2.5rem;
}

/* ── Product page — sticky gallery only on desktop ── */
@media (min-width: 769px) {
  .single-product-gallery {
    position: sticky;
    top: calc(var(--nav-h) + 1rem);
  }
}

/* ── WC notices spacing ── */
.woocommerce-notices-wrapper { margin-bottom: 1rem; }
.woocommerce-message a.button {
  padding: .5rem 1rem !important;
  font-size: .68rem !important;
  margin-right: .75rem !important;
}