:root{
  --bg:#050505;
  --panel:#0d0d10;
  --panel2:#151018;
  --text:#fff;
  --muted:#bcb6c6;
  --accent:#d986ff;
  --accent2:#ff77c8;
  --cyan:#00d4ff;
  --line:rgba(255,255,255,.14);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:Arial,Helvetica,sans-serif;line-height:1.5}
a{color:inherit}
img{max-width:100%}
.site-header{
  position:fixed;z-index:50;top:0;left:0;right:0;
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 38px;
  background:linear-gradient(to bottom,rgba(0,0,0,.94),rgba(0,0,0,.42));
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,.07);
}
.brand{position:relative;z-index:60}
.brand img{width:112px;height:auto;display:block;filter:drop-shadow(0 0 18px rgba(217,134,255,.35))}
.site-nav{display:flex;gap:24px;font-size:13px;text-transform:uppercase;letter-spacing:.12em;align-items:center}
.site-nav a{text-decoration:none;color:#ddd}
.site-nav a:hover{color:var(--accent2)}
.nav-cta{border:1px solid rgba(217,134,255,.48);padding:11px 16px;border-radius:2px}
.nav-cta:hover{background:rgba(217,134,255,.08)}
.menu-toggle{display:none}
.menu-button{display:none;position:relative;z-index:60;width:42px;height:42px;border:1px solid var(--line);border-radius:999px;align-items:center;justify-content:center;flex-direction:column;gap:5px;background:rgba(255,255,255,.04)}
.menu-button span{width:18px;height:2px;background:#fff;border-radius:2px;display:block}
.hero{
  min-height:100vh;position:relative;display:grid;place-items:center;text-align:center;overflow:hidden;
  padding:130px 24px 90px;
}
.hero-bg{
  position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(0,0,0,.34),#050505 92%),url('assets/hero.jpg') center 24%/cover no-repeat;
  filter:saturate(1.1) brightness(.82);
  transform:scale(1.03);
}
.hero:after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 42%,rgba(217,134,255,.13),transparent 34%),
             radial-gradient(circle at 80% 78%,rgba(0,212,255,.12),transparent 26%);
}
.hero-content{position:relative;z-index:1;max-width:880px}
.hero-logo{max-width:300px;width:80%;margin-bottom:18px;filter:drop-shadow(0 0 34px rgba(217,134,255,.42));transform:translateX(38px)}
.eyebrow{text-transform:uppercase;letter-spacing:.24em;font-size:12px;color:var(--accent2);font-weight:800}
h1{font-size:clamp(42px,7.5vw,104px);line-height:.92;margin:10px 0 24px;text-transform:uppercase;letter-spacing:-.06em}
.lede{font-size:clamp(18px,2.1vw,25px);color:#eee;max-width:760px;margin:0 auto 34px}
.actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.button{
  display:inline-flex;align-items:center;justify-content:center;padding:14px 24px;border-radius:999px;
  text-decoration:none;font-weight:900;text-transform:uppercase;letter-spacing:.08em;font-size:13px;
}
.primary{background:linear-gradient(135deg,var(--accent2),var(--accent));color:#111}
.secondary{border:1px solid var(--line);background:rgba(0,0,0,.42)}
.button:hover,.product-info a:hover,.insta:hover{transform:translateY(-1px)}
.small-button{margin-top:14px}
.section{padding:96px 7vw}
.reveal{animation:fadeUp .75s ease both}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
.section-heading{text-align:center;max-width:780px;margin:0 auto 48px}
.section-heading.compact{margin-bottom:34px}
.section-heading h2,.artist-copy h1,.policy-card h2,.preview-card h2{
  font-size:clamp(34px,5vw,66px);line-height:1;margin:10px 0 16px;letter-spacing:-.05em;
}
.section-heading p,.artist-copy p,.policy-card p,.policy-card li,.preview-card p{color:var(--muted);font-size:18px}
.gallery-grid{columns:4 240px;column-gap:18px}
.gallery-grid img{
  width:100%;display:block;margin:0 0 18px;border-radius:22px;border:1px solid rgba(255,255,255,.10);
  break-inside:avoid;filter:saturate(1.08);transition:transform .25s ease,filter .25s ease,box-shadow .25s ease;background:#111;
}
.gallery-grid img:hover{transform:scale(1.015);filter:saturate(1.22);box-shadow:0 0 28px rgba(217,134,255,.14)}
.centered-cta{text-align:center;margin-top:28px}
.insta{
  width:max-content;max-width:90%;margin:auto;display:inline-flex;align-items:center;gap:12px;
  padding:12px 18px;border:1px solid var(--line);border-radius:999px;color:#fff;text-decoration:none;
  background:rgba(255,255,255,.04);font-weight:900;transition:.2s ease;
}
.insta:hover{border-color:rgba(255,119,200,.65);box-shadow:0 0 28px rgba(217,134,255,.16)}
.instagram-icon{width:22px;height:22px;fill:none;stroke:var(--accent2);stroke-width:1.8}
.preview-card{
  max-width:1180px;margin:0 auto;border:1px solid rgba(217,134,255,.28);border-radius:30px;padding:72px 54px;
  background:linear-gradient(135deg,rgba(217,134,255,.08),rgba(0,212,255,.05));
  text-align:center;
}
.preview-card .button{margin-top:18px}
.page-hero{text-align:center;padding:150px 24px 40px}
.page-logo{max-width:260px;width:70%;filter:drop-shadow(0 0 28px rgba(217,134,255,.38))}
.page-hero p{color:var(--muted);font-size:20px}
.product-section{padding-top:50px}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.product-card{background:linear-gradient(180deg,#111,#070707);border:1px solid rgba(255,255,255,.12);border-radius:24px;overflow:hidden;display:flex;flex-direction:column;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.product-card:hover{transform:translateY(-4px);box-shadow:0 0 42px rgba(217,134,255,.18);border-color:rgba(217,134,255,.44)}
.product-card img{width:100%;height:520px;object-fit:contain;object-position:center;background:#0a0a0a;display:block;padding:4px}
.product-info{padding:22px 26px 26px}
.product-badge{display:inline-block;color:var(--accent2);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.14em;margin-bottom:10px}
.product-info h3{font-size:28px;margin:0 0 8px}
.product-info p{color:var(--muted);min-height:82px}
.prices{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:12px 0;color:var(--muted)}
.prices strong{color:#fff}
.product-info a{margin-top:18px;display:inline-block;color:var(--accent2);font-weight:900;text-transform:uppercase;text-decoration:none;transition:.2s ease}
.policies-section{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(180deg,#050505,#09060b)}
.policy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;align-items:start}
.policy-card{padding:0 10px}
.policy-card + .policy-card{border-left:1px solid var(--line);padding-left:48px}
.policy-icon{font-size:42px;color:var(--accent2);margin-bottom:18px}
.policy-card h2{font-size:clamp(28px,3vw,42px)}
.policy-card ul{padding-left:22px;margin:0}
.policy-card li{margin-bottom:12px}
.artist-page{padding-top:150px}
.artist-layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
.artist-photo-frame{
  border:1px solid rgba(217,134,255,.25);
  border-radius:26px;
  background:radial-gradient(circle at center, rgba(217,134,255,.08), rgba(255,255,255,.02));
  box-shadow:0 0 34px rgba(217,134,255,.12);
  padding:14px;
}
.artist-portrait{width:100%;max-height:760px;object-fit:contain;object-position:center;border-radius:20px;background:#050505}
.artist-copy h1
blockquote{
  margin:70px auto 0;
  text-align:center;
  max-width:1100px;
  padding:52px 38px;
  border:1px solid rgba(217,134,255,.25);
  border-radius:26px;
  background:linear-gradient(135deg,rgba(217,134,255,.08),rgba(255,255,255,.02));
  box-shadow:0 0 26px rgba(217,134,255,.08);
}
blockquote p
.floating-order{
  position:fixed;right:18px;bottom:18px;z-index:45;
  display:none;padding:13px 19px;border-radius:999px;
  text-decoration:none;text-transform:uppercase;font-size:12px;font-weight:900;letter-spacing:.08em;
  color:#111;background:linear-gradient(135deg,var(--accent2),var(--accent));
  box-shadow:0 0 28px rgba(217,134,255,.28);
}
.minimal-footer{
  text-align:center;
  padding:72px 24px 30px;
  border-top:1px solid var(--line);
  background:radial-gradient(circle at center,rgba(217,134,255,.08),transparent 26%),#040404;
  color:var(--muted);
}
.minimal-footer img{
  width:170px;
  filter:drop-shadow(0 0 24px rgba(217,134,255,.36));
  margin-bottom:24px;
}
.footer-line{
  display:block;
  width:72px;
  height:2px;
  background:linear-gradient(90deg,var(--accent2),var(--accent));
  margin:0 auto 22px;
}
.minimal-footer > p{
  text-transform:uppercase;
  letter-spacing:.14em;
  margin:0;
}
.footer-bottom{
  border-top:1px solid var(--line);
  max-width:980px;
  margin:42px auto 0;
  padding-top:24px;
}
.footer-bottom p{
  margin:0;
  text-transform:none;
  letter-spacing:normal;
}
@media(max-width:900px){
  .site-header{padding:12px 18px}
  .brand img{width:88px}
  .menu-button{display:flex}
  .site-nav{
    position:absolute;top:100%;left:12px;right:12px;
    display:none;flex-direction:column;gap:0;
    background:rgba(5,5,5,.97);border:1px solid var(--line);border-radius:18px;
    padding:10px;box-shadow:0 18px 40px rgba(0,0,0,.45);
  }
  .site-nav a{padding:14px 12px;border-bottom:1px solid rgba(255,255,255,.08)}
  .site-nav a:last-child{border-bottom:0}
  .nav-cta{border:0;padding:14px 12px;border-radius:0}
  .menu-toggle:checked ~ .site-nav{display:flex}
  .hero{min-height:92vh;padding:110px 18px 70px}
  .hero-logo{max-width:230px;transform:translateX(24px)}
  h1{font-size:clamp(38px,12vw,62px)}
  .lede{font-size:17px}
  .button{width:100%;max-width:310px}
  .section{padding:72px 20px}
  .section-heading{margin-bottom:34px}
  .gallery-grid{columns:2 150px;column-gap:12px}
  .gallery-grid img{border-radius:16px;margin-bottom:12px}
  .product-grid,.policy-grid,.artist-layout{grid-template-columns:1fr}
  .product-card img{height:420px;padding:2px}
  .policy-card + .policy-card{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:32px}
  .artist-page{padding-top:120px}
  .artist-portrait{max-height:620px}
  .floating-order{display:inline-flex}
  .preview-card{padding:44px 24px}
}
@media(max-width:520px){
  .gallery-grid{columns:1}
  .hero-logo{max-width:230px}
  .site-header{padding:10px 14px}
  .brand img{width:78px}
  .product-card img{height:340px}
  .preview-card{padding:34px 22px}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}


.instagram-nav{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border:1px solid rgba(217,134,255,.35);
  border-radius:999px;
}
.instagram-nav svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:var(--accent2);
  stroke-width:1.8;
}
.instagram-nav:hover{
  border-color:rgba(255,119,200,.75);
  box-shadow:0 0 18px rgba(217,134,255,.18);
}
@media(max-width:900px){
  .site-nav .instagram-nav{
    width:100%;
    justify-content:flex-start;
    border:0;
    border-bottom:1px solid rgba(255,255,255,.08);
    border-radius:0;
    padding:14px 12px;
  }
  .site-nav .instagram-nav svg{
    width:20px;
    height:20px;
  }
}

@media(max-width:520px){
  .hero-logo{
    max-width:200px;
  }
}


/* Final launch hero/logo/nav refinements */
.hero-logo{
  max-width:260px !important;
  transform:translate(18px, -18px) !important;
}

@media(max-width:900px){
  .hero-logo{
    max-width:220px !important;
    transform:translate(12px, -12px) !important;
  }
}

@media(max-width:520px){
  .hero-logo{
    max-width:190px !important;
    transform:translate(8px, -10px) !important;
  }
}


/* Final gallery layout fix: remove masonry blank spaces */
.gallery-grid{
  columns:initial !important;
  column-gap:0 !important;
  display:grid !important;
  grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  gap:18px !important;
  align-items:stretch !important;
}

.gallery-grid img{
  width:100% !important;
  height:360px !important;
  margin:0 !important;
  object-fit:cover !important;
  object-position:center !important;
  break-inside:auto !important;
}

.gallery-grid img:nth-child(1),
.gallery-grid img:nth-child(4),
.gallery-grid img:nth-child(7){
  grid-row:span 2;
  height:738px !important;
}

.gallery-grid img:nth-child(2),
.gallery-grid img:nth-child(5),
.gallery-grid img:nth-child(9),
.gallery-grid img:nth-child(12){
  height:360px !important;
}

@media(max-width:1100px){
  .gallery-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
  }
  .gallery-grid img{
    height:330px !important;
  }
  .gallery-grid img:nth-child(1),
  .gallery-grid img:nth-child(4),
  .gallery-grid img:nth-child(7){
    height:678px !important;
  }
}

@media(max-width:760px){
  .gallery-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:12px !important;
  }
  .gallery-grid img{
    height:260px !important;
  }
  .gallery-grid img:nth-child(1),
  .gallery-grid img:nth-child(4),
  .gallery-grid img:nth-child(7){
    height:532px !important;
  }
}

@media(max-width:520px){
  .gallery-grid{
    grid-template-columns:1fr !important;
  }
  .gallery-grid img,
  .gallery-grid img:nth-child(1),
  .gallery-grid img:nth-child(4),
  .gallery-grid img:nth-child(7){
    height:auto !important;
    max-height:none !important;
    object-fit:contain !important;
    background:#050505;
  }
}

/* Version 1.1 sales polish: mobile menu, order CTA, reviews, distributors */
.instagram-label{display:none}
.floating-order{
  z-index:9999 !important;
  pointer-events:auto !important;
  bottom:calc(22px + env(safe-area-inset-bottom, 0px)) !important;
  right:18px !important;
  min-width:92px;
  justify-content:center;
  -webkit-tap-highlight-color:transparent;
}
.floating-order:active{transform:scale(.98)}
.trust-section{padding-top:76px;background:radial-gradient(circle at 50% 0,rgba(217,134,255,.08),transparent 34%)}
.trust-grid{max-width:1180px;margin:38px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.trust-card,.reviews-card,.distributor-card{
  border:1px solid rgba(217,134,255,.22);
  background:linear-gradient(135deg,rgba(217,134,255,.075),rgba(0,212,255,.035));
  border-radius:26px;
  box-shadow:0 0 30px rgba(217,134,255,.08);
}
.trust-card{padding:32px 28px;text-align:center}
.trust-card span{display:inline-grid;place-items:center;width:52px;height:52px;margin:0 auto 16px;border:1px solid rgba(255,119,200,.4);border-radius:999px;color:var(--accent2);font-size:24px;box-shadow:0 0 22px rgba(217,134,255,.12)}
.trust-card h3{margin:0 0 10px;font-size:24px;text-transform:uppercase;letter-spacing:.05em}
.trust-card p,.reviews-card p,.distributor-card p{color:var(--muted);font-size:17px;margin-bottom:0}
.reviews-section{padding-top:40px}
.reviews-card,.distributor-card{max-width:1180px;margin:0 auto;text-align:center;padding:58px 42px}
.reviews-card h2,.distributor-card h2{font-size:clamp(34px,5vw,62px);line-height:1;margin:10px 0 16px;letter-spacing:-.05em}
.reviews-card .actions,.distributor-actions{margin-top:28px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.distributor-section{padding-top:40px;padding-bottom:40px}
.small-note{font-size:14px !important;letter-spacing:.02em;margin-top:20px !important;color:#8f879a !important}
@media(max-width:900px){
  .site-nav{align-items:stretch !important;text-align:center !important}
  .site-nav a{display:flex;align-items:center;justify-content:center;text-align:center;width:100%}
  .site-nav .instagram-nav{
    justify-content:center !important;
    gap:10px;
    min-height:54px;
  }
  .instagram-label{display:inline;text-transform:uppercase;letter-spacing:.12em;font-size:13px;color:#ddd}
  .site-nav .instagram-nav svg{width:21px;height:21px;flex:0 0 auto}
  .floating-order{display:inline-flex !important}
  .trust-grid{grid-template-columns:1fr;gap:16px}
  .reviews-card,.distributor-card{padding:42px 22px}
}
@media(max-width:520px){
  .floating-order{
    right:16px !important;
    bottom:calc(18px + env(safe-area-inset-bottom, 0px)) !important;
    padding:14px 20px;
    min-width:100px;
    font-size:12px;
  }
  .trust-card{padding:28px 22px}
}


/* Version 1.2 Corey-requested upgrades: Instagram feed, reviews, distributor placeholders */
.instagram-feed-section{padding-top:34px;padding-bottom:34px}
.instagram-feed-card{
  max-width:1180px;
  margin:0 auto;
  padding:38px;
  border:1px solid rgba(255,119,200,.24);
  border-radius:26px;
  display:grid;
  grid-template-columns:1fr auto;
  gap:24px;
  align-items:center;
  background:linear-gradient(135deg,rgba(255,119,200,.08),rgba(0,212,255,.04));
  box-shadow:0 0 28px rgba(217,134,255,.08);
}
.instagram-feed-card h2{font-size:clamp(30px,4vw,54px);line-height:1;margin:8px 0 12px;letter-spacing:-.04em}
.instagram-feed-card p{max-width:760px;color:var(--muted);font-size:17px}
.review-preview-grid,.distributor-link-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin:30px auto 0;
}
.distributor-link-grid{grid-template-columns:repeat(2,1fr);max-width:760px}
.review-preview-grid article,.distributor-link-grid article{
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.28);
  border-radius:18px;
  padding:22px 18px;
}
.review-preview-grid span,.distributor-link-grid span{
  display:block;
  color:#fff;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:12px;
  font-weight:800;
  margin-bottom:10px;
}
.review-preview-grid p,.distributor-link-grid p{font-size:15px !important;margin:0 !important;color:var(--muted) !important}
.pro-reviews-card{position:relative;overflow:hidden}
.pro-reviews-card:before{
  content:"";
  position:absolute;
  inset:-40% auto auto -10%;
  width:280px;
  height:280px;
  border-radius:999px;
  background:radial-gradient(circle,rgba(255,119,200,.18),transparent 68%);
  pointer-events:none;
}
@media(max-width:900px){
  .instagram-feed-card{grid-template-columns:1fr;text-align:center;padding:32px 22px}
  .instagram-feed-card p{margin-left:auto;margin-right:auto}
  .review-preview-grid,.distributor-link-grid{grid-template-columns:1fr}
}

/* Version 1.3 gallery polish: show full artwork on desktop/tablet without cropping subjects */
@media(min-width:761px){
  .gallery-grid{
    display:block !important;
    columns:3 300px !important;
    column-gap:18px !important;
  }
  .gallery-grid img,
  .gallery-grid img:nth-child(1),
  .gallery-grid img:nth-child(4),
  .gallery-grid img:nth-child(7),
  .gallery-grid img:nth-child(2),
  .gallery-grid img:nth-child(5),
  .gallery-grid img:nth-child(9),
  .gallery-grid img:nth-child(12){
    display:block !important;
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    object-fit:contain !important;
    object-position:center top !important;
    margin:0 0 18px !important;
    break-inside:avoid !important;
    background:#050505 !important;
  }
}

@media(min-width:1200px){
  .gallery-grid{
    columns:4 280px !important;
  }
}


/* V1.5 repair: preserve original site, clean distributor links only */
.clean-distributor-grid{
  max-width:980px;
  margin:34px auto 0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px;
}

.distributor-link-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  text-decoration:none;
  color:#fff;
  min-height:250px;
  padding:34px 28px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  box-shadow:0 0 28px rgba(217,134,255,.08);
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.distributor-link-card:hover{
  transform:translateY(-4px);
  border-color:rgba(255,119,200,.46);
  box-shadow:0 0 42px rgba(217,134,255,.16);
}

.distributor-link-card span{
  display:block;
  color:#fff;
  text-transform:uppercase;
  letter-spacing:.13em;
  font-size:12px;
  font-weight:800;
  margin-bottom:14px;
}

.distributor-link-card h3{
  margin:0 0 14px;
  color:#fff;
  font-size:30px;
  line-height:1.05;
}

.distributor-link-card p{
  max-width:360px;
  margin:0 auto 22px;
  color:var(--muted);
  font-size:17px;
  line-height:1.6;
}

.distributor-link-card strong{
  margin-top:auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:168px;
  min-height:44px;
  padding:12px 20px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--accent2));
  color:#08060a;
  text-transform:uppercase;
  letter-spacing:.11em;
  font-size:12px;
  font-weight:900;
}

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


/* ============================
   V1.7 MOBILE SALES POLISH FIX
   - Fixes mobile distributor section
   - Centers Instagram in mobile menu
   - Cleans review placeholder layout
   - Prevents raw underlined link styling
   ============================ */

/* Keep all distributor cards professional and non-underlined */
.distributor-section a,
.clean-distributor-grid a,
.distributor-link-card {
  text-decoration: none !important;
}

.clean-distributor-grid {
  width: min(100%, 980px);
  margin: 36px auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.distributor-link-card {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  text-align: center;
  color: #fff !important;
  padding: 34px 28px;
  min-height: 250px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, rgba(255,119,200,.14), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  box-shadow: 0 0 30px rgba(217,134,255,.08);
}

.distributor-link-card span {
  display: block;
  margin: 0 0 14px;
  color: var(--accent, #ff6ac8);
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 12px;
  font-weight: 900;
}

.distributor-link-card h3 {
  margin: 0 0 14px;
  color: #fff;
  font-size: clamp(26px, 3vw, 34px);
  line-height: 1.05;
}

.distributor-link-card p {
  margin: 0 auto 24px;
  max-width: 360px;
  color: var(--muted, #c9c2d4);
  font-size: 17px;
  line-height: 1.55;
}

.distributor-link-card strong {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  min-width: 170px;
  padding: 12px 22px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent, #ff6ac8), var(--accent2, #d986ff));
  color: #08060a !important;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 12px;
  font-weight: 900;
}

.distributor-actions {
  margin-top: 32px;
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* Reviews should not show rough placeholder card copy on mobile */
.reviews-section .review-grid,
.reviews-section .testimonial-grid,
.reviews-section .cards,
.reviews-section .card-grid {
  display: none !important;
}

/* Better mobile navigation alignment */
@media (max-width: 820px) {
  .site-nav,
  .site-nav.open,
  .menu-panel,
  nav.site-nav {
    text-align: center !important;
  }

  .site-nav a,
  .site-nav .instagram-nav,
  .site-nav .nav-instagram,
  .site-nav .nav-cta,
  .site-nav svg,
  .site-nav span {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .site-nav .instagram-nav,
  .site-nav .nav-instagram,
  .site-nav a[aria-label*="Instagram"],
  .site-nav a[href*="instagram"] {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    text-align: center !important;
    padding: 18px 0 !important;
  }

  .site-nav a[href*="instagram"] svg {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  .clean-distributor-grid {
    grid-template-columns: 1fr;
    width: 100%;
    gap: 18px;
    margin-top: 28px;
  }

  .distributor-section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .distributor-section .section-heading,
  .distributor-section .section-heading.compact {
    text-align: center !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .distributor-section .section-heading h2 {
    font-size: clamp(38px, 11vw, 56px) !important;
    line-height: .98 !important;
    text-align: center !important;
  }

  .distributor-section .section-heading p {
    font-size: 20px !important;
    line-height: 1.45 !important;
    text-align: center !important;
  }

  .distributor-link-card {
    width: 100%;
    box-sizing: border-box;
    padding: 30px 24px;
    min-height: auto;
    border-radius: 24px;
  }

  .distributor-link-card h3 {
    font-size: 32px;
  }

  .distributor-link-card p {
    font-size: 18px;
    line-height: 1.5;
  }

  .distributor-link-card strong {
    width: min(100%, 240px);
  }

  .distributor-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }

  .distributor-actions .button {
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
    text-align: center;
  }
}



/* V1.8 mobile menu Instagram icon-only center fix */
@media (max-width: 820px) {
  .site-nav a[href*="instagram"],
  .site-nav .instagram-nav,
  .site-nav .nav-instagram,
  nav.site-nav a[href*="instagram"] {
    width: 100% !important;
    min-height: 54px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px 0 !important;
    margin: 0 auto !important;
    text-align: center !important;
    gap: 0 !important;
    line-height: 1 !important;
    font-size: 0 !important;
    letter-spacing: 0 !important;
  }

  .site-nav a[href*="instagram"] svg,
  .site-nav .instagram-nav svg,
  .site-nav .nav-instagram svg {
    display: block !important;
    width: 30px !important;
    height: 30px !important;
    margin: 0 auto !important;
    flex: 0 0 auto !important;
  }

  .site-nav a[href*="instagram"] span,
  .site-nav .instagram-nav span,
  .site-nav .nav-instagram span {
    display: none !important;
  }
}


/* V1.9 center review/action buttons */
.reviews-section .section-actions,
.section-actions {
  display: flex;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px;
  flex-wrap: wrap;
  width: 100%;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center;
}

.reviews-section .section-actions .button {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

@media (max-width: 760px) {
  .reviews-section .section-actions,
  .section-actions {
    flex-direction: column;
    align-items: center !important;
  }

  .reviews-section .section-actions .button,
  .section-actions .button {
    width: min(100%, 520px);
    justify-content: center;
    text-align: center;
  }
}


/* V2.0 force-center review buttons on desktop and mobile */
.centered-review-section {
  text-align: center !important;
}

.centered-review-section .review-actions,
.centered-review-section .section-actions {
  width: 100% !important;
  max-width: 100% !important;
  margin: 34px auto 0 !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  text-align: center !important;
  transform: none !important;
  left: auto !important;
  right: auto !important;
  position: relative !important;
}

.centered-review-section .review-actions .button,
.centered-review-section .section-actions .button {
  margin: 0 !important;
  float: none !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

@media (min-width: 761px) {
  .centered-review-section .review-actions,
  .centered-review-section .section-actions {
    flex-direction: row !important;
  }
}

@media (max-width: 760px) {
  .centered-review-section .review-actions,
  .centered-review-section .section-actions {
    flex-direction: column !important;
    align-items: center !important;
  }

  .centered-review-section .review-actions .button,
  .centered-review-section .section-actions .button {
    width: min(100%, 520px) !important;
  }
}


/* V2.1 FINAL shop review button centering fix */
.shop-review-section {
  text-align: center !important;
}

.shop-review-section > .section-heading,
.shop-review-section .section-heading {
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.shop-review-section .review-actions,
.shop-review-section > .section-actions,
.shop-review-section .section-actions {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 34px auto 0 auto !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  text-align: center !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
  float: none !important;
}

.shop-review-section .review-actions .button,
.shop-review-section > .section-actions .button,
.shop-review-section .section-actions .button {
  margin: 0 !important;
  float: none !important;
  position: static !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}

@media (max-width: 760px) {
  .shop-review-section .review-actions,
  .shop-review-section > .section-actions,
  .shop-review-section .section-actions {
    flex-direction: column !important;
    align-items: center !important;
  }

  .shop-review-section .review-actions .button,
  .shop-review-section > .section-actions .button,
  .shop-review-section .section-actions .button {
    width: min(100%, 520px) !important;
    justify-content: center !important;
  }
}


/* V2.2 DESKTOP + MOBILE NAV REPAIR
   Fixes top-right desktop nav spacing and restores Instagram to icon-only. */
.site-header {
  overflow: visible !important;
}

.site-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 24px !important;
  white-space: nowrap !important;
}

.site-nav > a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
  white-space: nowrap !important;
}

.site-nav a[href*="instagram"] {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 1px solid rgba(255,119,200,.45) !important;
  color: var(--accent, #ff6ac8) !important;
  font-size: 0 !important;
  letter-spacing: 0 !important;
  line-height: 0 !important;
  gap: 0 !important;
  overflow: hidden !important;
}

.site-nav a[href*="instagram"] svg {
  display: block !important;
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  flex: 0 0 auto !important;
}

.site-nav a[href*="instagram"] span {
  display: none !important;
}

.site-nav .nav-cta,
.site-nav a[href^="mailto"] {
  min-width: max-content !important;
  padding-left: 22px !important;
  padding-right: 22px !important;
}

@media (max-width: 820px) {
  .site-nav {
    justify-content: center !important;
    gap: 0 !important;
    white-space: normal !important;
  }

  .site-nav a[href*="instagram"] {
    width: 100% !important;
    height: 58px !important;
    min-width: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 16px 0 !important;
    margin: 0 auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    font-size: 0 !important;
    line-height: 0 !important;
  }

  .site-nav a[href*="instagram"] svg {
    width: 30px !important;
    height: 30px !important;
    margin: 0 auto !important;
  }
}


/* =========================================================
   V2.3 RESPONSIVE POLISH
   Fixes narrow desktop / tablet resizing so the site keeps
   its premium desktop look longer before switching to mobile.
   Also prevents desktop nav collision and keeps Instagram icon-only.
   ========================================================= */

/* Desktop navigation: controlled spacing, no text collision */
.site-header{
  min-height:78px !important;
  gap:24px !important;
}

.brand{
  flex:0 0 auto !important;
}

.site-nav{
  flex:0 1 auto !important;
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:24px !important;
  white-space:nowrap !important;
}

.site-nav > a{
  flex:0 0 auto !important;
  white-space:nowrap !important;
}

/* Instagram is always an icon on desktop */
.site-nav .instagram-nav,
.site-nav a[href*="instagram"]{
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  padding:0 !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid rgba(217,134,255,.45) !important;
  border-radius:999px !important;
  font-size:0 !important;
  letter-spacing:0 !important;
  line-height:0 !important;
  overflow:hidden !important;
}

.site-nav .instagram-nav svg,
.site-nav a[href*="instagram"] svg{
  width:20px !important;
  height:20px !important;
  margin:0 !important;
  display:block !important;
  flex:0 0 auto !important;
}

.site-nav .instagram-label,
.site-nav a[href*="instagram"] span{
  display:none !important;
}

/* Narrow desktop / tablet: keep desktop aesthetic, just scale it down */
@media (max-width:1180px) and (min-width:821px){
  .site-header{
    padding:12px 24px !important;
    min-height:72px !important;
  }

  .brand img{
    width:96px !important;
  }

  .site-nav{
    gap:18px !important;
    font-size:12px !important;
    letter-spacing:.10em !important;
  }

  .nav-cta,
  .site-nav a[href^="mailto"]{
    padding:10px 14px !important;
  }

  .hero{
    min-height:96vh !important;
    padding:118px 28px 78px !important;
  }

  .hero-content{
    max-width:760px !important;
  }

  .hero-logo{
    max-width:230px !important;
    transform:translate(12px,-12px) !important;
  }

  h1{
    font-size:clamp(54px,7.2vw,86px) !important;
    line-height:.92 !important;
  }

  .lede{
    max-width:680px !important;
    font-size:clamp(18px,2vw,23px) !important;
  }

  .actions .button{
    width:auto !important;
    max-width:none !important;
  }

  .section{
    padding-left:6vw !important;
    padding-right:6vw !important;
  }
}

/* Critical: undo older max-width:900 mobile nav between 821px and 900px */
@media (max-width:900px) and (min-width:821px){
  .menu-button{
    display:none !important;
  }

  .site-nav{
    position:static !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-end !important;
    background:transparent !important;
    border:0 !important;
    border-radius:0 !important;
    padding:0 !important;
    box-shadow:none !important;
    text-align:left !important;
  }

  .site-nav a{
    width:auto !important;
    padding:0 !important;
    border-bottom:0 !important;
    display:inline-flex !important;
  }

  .site-nav .nav-cta{
    border:1px solid rgba(217,134,255,.48) !important;
    padding:10px 14px !important;
    border-radius:2px !important;
  }

  .site-nav .instagram-nav{
    width:38px !important;
    height:38px !important;
    min-width:38px !important;
    padding:0 !important;
    border:1px solid rgba(217,134,255,.45) !important;
    border-radius:999px !important;
  }
}

/* True mobile starts here */
@media (max-width:820px){
  .site-header{
    min-height:70px !important;
    padding:12px 18px !important;
  }

  .menu-button{
    display:flex !important;
  }

  .site-nav{
    position:absolute !important;
    top:100% !important;
    left:12px !important;
    right:12px !important;
    display:none !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:center !important;
    gap:0 !important;
    background:rgba(5,5,5,.97) !important;
    border:1px solid var(--line) !important;
    border-radius:18px !important;
    padding:10px !important;
    box-shadow:0 18px 40px rgba(0,0,0,.45) !important;
    text-align:center !important;
    white-space:normal !important;
  }

  .menu-toggle:checked ~ .site-nav{
    display:flex !important;
  }

  .site-nav a{
    width:100% !important;
    padding:14px 12px !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important;
    justify-content:center !important;
    text-align:center !important;
  }

  .site-nav a:last-child{
    border-bottom:0 !important;
  }

  .site-nav .instagram-nav,
  .site-nav a[href*="instagram"]{
    width:100% !important;
    height:56px !important;
    min-width:100% !important;
    border:0 !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important;
    border-radius:0 !important;
    padding:14px 12px !important;
  }

  .site-nav .instagram-nav svg,
  .site-nav a[href*="instagram"] svg{
    width:26px !important;
    height:26px !important;
  }

  .hero{
    min-height:92vh !important;
    padding:112px 20px 70px !important;
  }

  .hero-logo{
    max-width:210px !important;
    transform:translate(8px,-10px) !important;
  }

  .actions{
    align-items:center !important;
  }

  .actions .button{
    width:100% !important;
    max-width:310px !important;
  }
}

/* Small phone final polish */
@media (max-width:520px){
  .hero{
    padding-top:106px !important;
  }

  .hero-logo{
    max-width:190px !important;
  }
}


/* V2.5 remove duplicate shop Instagram review link + center single review CTA */
.shop-review-section .review-actions,
.reviews-section .review-actions {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  margin: 34px auto 0 !important;
  padding: 0 !important;
  text-align: center !important;
}

.shop-review-section .review-actions .button,
.reviews-section .review-actions .button {
  margin-left: auto !important;
  margin-right: auto !important;
}


/* V2.6 Policy card icon centering */
.policy-card{
    text-align:left;
}

.policy-card .policy-icon{
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    width:100% !important;
    text-align:center !important;
    font-size:2rem !important;
    margin:0 auto 14px auto !important;
}

.policy-card h2{
    margin-top:0 !important;
}


/* V2.7 Policy section heading centering
   Centers only the large policy headings and icons.
   Body text, email button area, and return bullet points remain left-aligned. */
.policy-card .policy-icon {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.policy-card h2 {
  text-align: center !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.policy-card p,
.policy-card ul,
.policy-card li {
  text-align: left !important;
}

.policy-card .small-button {
  margin-left: 0 !important;
  margin-right: auto !important;
}


/* V2.8 Center text only for How To Order and NXP Disclaimer cards */
.policy-grid .policy-card:nth-child(1) p,
.policy-grid .policy-card:nth-child(2) p {
  text-align: center !important;
}


/* V2.9 Center Email NXP Pasties button */
.policy-grid .policy-card:first-child .btn,
.policy-grid .policy-card:first-child .button,
.policy-grid .policy-card:first-child a.button,
.policy-grid .policy-card:first-child .cta-wrap {
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
}


/* V3.0 FINAL: force-center Email NXP Pasties button in How To Order card */
.policy-grid .policy-card:first-child {
  text-align: center !important;
}

.policy-grid .policy-card:first-child a.button,
.policy-grid .policy-card:first-child .button,
.policy-grid .policy-card:first-child .small-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  max-width: max-content !important;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
  position: relative !important;
  left: auto !important;
  right: auto !important;
  transform: none !important;
}


/* V3.1 Clean top navigation
   Changes Email To Order to simple Contact link, removes boxed CTA styling,
   and keeps order as Shop / The Artist / Contact / Instagram. */
.site-nav .nav-cta,
.site-nav a[href^="mailto"] {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-width: 0 !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
}

.site-nav a[href^="mailto"] {
  color: var(--text, #fff) !important;
  font-size: inherit !important;
  letter-spacing: inherit !important;
  line-height: inherit !important;
}

.site-nav {
  gap: 28px !important;
}

/* Keep Instagram as final icon in the top nav */
.site-nav .instagram-nav,
.site-nav a[href*="instagram"] {
  margin-left: 0 !important;
}


/* V3.2 Tighten top navigation spacing */
.site-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 20px !important;
  width: auto !important;
  flex: 0 0 auto !important;
}

.site-nav a {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.site-nav .instagram-nav,
.site-nav a[href*="instagram"] {
  margin-left: -2px !important;
  margin-right: 0 !important;
}

/* Keep tablet/narrow desktop from spreading the nav back out */
@media (max-width:1180px) and (min-width:821px) {
  .site-nav {
    gap: 18px !important;
    width: auto !important;
    justify-content: flex-end !important;
  }

  .site-nav .instagram-nav,
  .site-nav a[href*="instagram"] {
    margin-left: -2px !important;
  }
}


/* V3.2.1 SAFE FIX — Live From Instagram section only
   Starts from V3.2 Tight Top Nav.
   Removes duplicate Follow button via HTML and centers the existing card content.
   Does not rebuild the section or touch the gallery/header/product layout. */
.instagram-feed-card {
  grid-template-columns: 1fr !important;
  justify-items: center !important;
  align-items: center !important;
  text-align: center !important;
}

.instagram-feed-card > div {
  width: 100% !important;
  max-width: 860px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.instagram-feed-card .eyebrow,
.instagram-feed-card h2,
.instagram-feed-card p {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.instagram-feed-card p {
  max-width: 720px !important;
}


/* V3.2.2 SAFE FIX — Force-center Live From Instagram text */
.instagram-feed-card {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

.instagram-feed-card > div,
.instagram-feed-card .section-heading,
.instagram-feed-card .content {
  display: block !important;
  width: 100% !important;
  max-width: 860px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  text-align: center !important;
}

.instagram-feed-card .eyebrow,
.instagram-feed-card h1,
.instagram-feed-card h2,
.instagram-feed-card h3,
.instagram-feed-card p {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.instagram-feed-card p {
  max-width: 720px !important;
}


/* V3.2.4 Safari iPhone hamburger menu repair
   Keeps mobile menu closed by default and opens only when hamburger checkbox is checked. */
@media (max-width: 820px) {
  .site-header .site-nav {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 12px !important;
    right: 12px !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 0 !important;
    background: rgba(5,5,5,.97) !important;
    border: 1px solid var(--line) !important;
    border-radius: 18px !important;
    padding: 10px !important;
    box-shadow: 0 18px 40px rgba(0,0,0,.45) !important;
    text-align: center !important;
    white-space: normal !important;
  }

  .site-header .menu-toggle:checked ~ .site-nav {
    display: flex !important;
  }

  .site-header .site-nav a {
    width: 100% !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .site-header .menu-button {
    display: flex !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
  }
}

/* Desktop/tablet remains normal */
@media (min-width: 821px) {
  .site-header .site-nav {
    display: flex !important;
  }
}


/* =========================================================
   OFFICIALLY LOCKED HERO
   Approved Concept B direction.
   Rest of site preserved.
   Live navigation/CTA hotspots with subtle pink hover glow.
   ========================================================= */

body.locked-hero-home .site-header {
  display: none !important;
}

.locked-hero {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  background: #020204 !important;
  overflow: hidden !important;
  line-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.locked-hero-img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

.locked-link {
  position: absolute !important;
  z-index: 50 !important;
  display: block !important;
  background: transparent !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  transition: box-shadow .2s ease, outline-color .2s ease, background-color .2s ease, transform .2s ease !important;
}

.locked-link:hover,
.locked-link:focus-visible {
  outline: 1px solid rgba(255, 45, 172, .78) !important;
  outline-offset: 2px !important;
  box-shadow:
    0 0 8px rgba(255, 45, 172, .42),
    0 0 18px rgba(255, 45, 172, .22) !important;
  background: rgba(255, 45, 172, .04) !important;
  transform: translateY(-1px) !important;
}

/* Desktop clickable areas matched to approved hero art */
.locked-link.nav-shop {
  left: 64.0% !important;
  top: 3.8% !important;
  width: 5.0% !important;
  height: 6.2% !important;
}

.locked-link.nav-artist {
  left: 72.0% !important;
  top: 3.8% !important;
  width: 9.0% !important;
  height: 6.2% !important;
}

.locked-link.nav-contact {
  left: 84.0% !important;
  top: 3.8% !important;
  width: 8.0% !important;
  height: 6.2% !important;
}

.locked-link.nav-instagram {
  left: 94.7% !important;
  top: 2.6% !important;
  width: 3.4% !important;
  height: 7.2% !important;
  border-radius: 12px !important;
}

.locked-link.cta-shop {
  left: 2.1% !important;
  top: 69.8% !important;
  width: 14.4% !important;
  height: 6.0% !important;
}

.locked-link.cta-artist {
  left: 18.1% !important;
  top: 69.8% !important;
  width: 14.3% !important;
  height: 6.0% !important;
}

/* Gallery safeguard */
.gallery-grid img {
  object-fit: cover !important;
  object-position: center center !important;
}

/* Mobile: keep the locked hero from feeling blown up */
@media (max-width: 760px) {
  .locked-hero-img {
    width: 180% !important;
    max-width: none !important;
    transform: translateX(-34%) !important;
  }

  .locked-link {
    display: none !important;
  }
}


/* =========================================================
   PHASE 2 — APPROVED HERO LIVE HTML IMPLEMENTATION
   Artwork is locked. Do not edit hero-approved-final.png.
   ========================================================= */

body.phase-2-home .site-header {
  display: none !important;
}

.phase2-hero {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #020204 !important;
  line-height: 0 !important;
}

.phase2-hero-img {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

/* Live top navigation */
.phase2-hero-nav {
  position: absolute !important;
  z-index: 50 !important;
  top: 3.25% !important;
  right: 4.75% !important;
  display: flex !important;
  align-items: center !important;
  gap: clamp(22px, 2.45vw, 40px) !important;
  line-height: 1 !important;
}

.phase2-hero-nav a {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: rgba(255,255,255,.96) !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: .055em !important;
  font-size: clamp(12px, .9vw, 15px) !important;
  font-weight: 800 !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.9) !important;
  transition: color .2s ease, text-shadow .2s ease, transform .2s ease !important;
}

.phase2-hero-nav a:not(.phase2-instagram)::after,
.phase2-cta::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: #ff2fac !important;
  opacity: 0 !important;
  transform: scaleX(.15) !important;
  transform-origin: center !important;
  box-shadow:
    0 0 8px rgba(255,47,172,.95),
    0 0 18px rgba(255,47,172,.52),
    0 0 30px rgba(255,47,172,.22) !important;
  transition: opacity .18s ease, transform .2s ease !important;
}

.phase2-hero-nav a:not(.phase2-instagram)::after {
  bottom: -7px !important;
}

.phase2-hero-nav a:hover,
.phase2-hero-nav a:focus-visible,
.phase2-cta:hover,
.phase2-cta:focus-visible {
  color: #ff8de0 !important;
  transform: translateY(-1px) !important;
  text-shadow:
    0 0 8px rgba(255,47,172,.58),
    0 0 18px rgba(255,47,172,.24),
    0 2px 12px rgba(0,0,0,.9) !important;
  outline: none !important;
}

.phase2-hero-nav a:not(.phase2-instagram):hover::after,
.phase2-hero-nav a:not(.phase2-instagram):focus-visible::after,
.phase2-cta:hover::after,
.phase2-cta:focus-visible::after {
  opacity: 1 !important;
  transform: scaleX(1) !important;
}

.phase2-instagram {
  width: 34px !important;
  height: 34px !important;
  border: 2px solid rgba(255,47,172,.9) !important;
  border-radius: 10px !important;
  box-shadow: 0 0 10px rgba(255,47,172,.25) !important;
}

.phase2-instagram svg {
  width: 19px !important;
  height: 19px !important;
  fill: none !important;
  stroke: #ff43bf !important;
  stroke-width: 1.9 !important;
}

/* Live CTA links — compact so they fit between paragraph and icons */
.phase2-hero-actions {
  position: absolute !important;
  z-index: 50 !important;
  left: 2.0% !important;
  top: 66.15% !important;
  display: flex !important;
  align-items: center !important;
  gap: clamp(18px, 1.65vw, 28px) !important;
  line-height: 1 !important;
}

.phase2-cta {
  position: relative !important;
  min-width: clamp(145px, 10.5vw, 190px) !important;
  min-height: clamp(30px, 2vw, 36px) !important;
  padding: 0 clamp(16px, 1.25vw, 24px) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1.5px solid rgba(255,47,172,.86) !important;
  border-radius: 10px !important;
  background: rgba(0,0,0,.10) !important;
  color: rgba(255,255,255,.98) !important;
  text-decoration: none !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  font-size: clamp(10px, .68vw, 13px) !important;
  font-weight: 800 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.9) !important;
  cursor: pointer !important;
  box-shadow:
    0 0 7px rgba(255,47,172,.16),
    inset 0 0 10px rgba(255,47,172,.035) !important;
  transition:
    color .2s ease,
    border-color .2s ease,
    box-shadow .2s ease,
    text-shadow .2s ease,
    transform .2s ease,
    background-color .2s ease !important;
}

.phase2-cta::after {
  left: 16px !important;
  right: 16px !important;
  bottom: 5px !important;
}

.phase2-cta:hover,
.phase2-cta:focus-visible {
  border-color: #ff67d0 !important;
  background: rgba(255,47,172,.04) !important;
  box-shadow:
    0 0 10px rgba(255,47,172,.45),
    0 0 18px rgba(255,47,172,.20),
    inset 0 0 14px rgba(255,47,172,.065) !important;
}

/* Match top nav behavior across inner pages */
body:not(.phase-2-home) .site-nav {
  font-size: 12px !important;
  letter-spacing: .055em !important;
  gap: clamp(18px, 2vw, 28px) !important;
}

body:not(.phase-2-home) .site-nav a {
  position: relative !important;
  font-weight: 800 !important;
}

body:not(.phase-2-home) .site-nav a:not(.instagram-nav)::after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -8px !important;
  height: 2px !important;
  border-radius: 999px !important;
  background: #ff2fac !important;
  opacity: 0 !important;
  transform: scaleX(.15) !important;
  box-shadow:
    0 0 8px rgba(255,47,172,.95),
    0 0 18px rgba(255,47,172,.52) !important;
  transition: opacity .18s ease, transform .2s ease !important;
}

body:not(.phase-2-home) .site-nav a:not(.instagram-nav):hover::after,
body:not(.phase-2-home) .site-nav a:not(.instagram-nav):focus-visible::after,
body.shop-page .site-nav a[href="shop.html"]::after,
body.artist-page .site-nav a[href="artist.html"]::after {
  opacity: 1 !important;
  transform: scaleX(1) !important;
}

@media(max-width:760px) {
  .phase2-hero-nav,
  .phase2-hero-actions {
    display: none !important;
  }

  .phase2-hero-img {
    width: 180% !important;
    max-width: none !important;
    transform: translateX(-34%) !important;
  }
}


/* =========================================================
   CTA SPACING FIX — CSS ONLY
   No artwork changes.
   Moves live CTA buttons into the open gap below paragraph and above icons.
   ========================================================= */

.phase2-hero-actions {
  top: 71.25% !important;
  left: 2.05% !important;
  gap: clamp(16px, 1.55vw, 26px) !important;
}

.phase2-cta {
  min-width: clamp(140px, 10.2vw, 184px) !important;
  min-height: clamp(26px, 1.75vw, 32px) !important;
  padding: 0 clamp(14px, 1.05vw, 20px) !important;
  border-radius: 9px !important;
  font-size: clamp(9px, .62vw, 12px) !important;
  letter-spacing: .055em !important;
}

.phase2-cta::after {
  bottom: 4px !important;
  left: 14px !important;
  right: 14px !important;
}

/* Keep mobile behavior unchanged */
@media(max-width:760px) {
  .phase2-hero-actions {
    display: none !important;
  }
}


/* FINAL CTA SIZE TWEAK
   Same position, same width, same style.
   Only increases height/padding ~15%.
*/
.phase2-cta{
    min-height: 40px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
}



/* OPTION A — CTA BREATHING ROOM FIX
   CSS-only. No hero artwork changes.
   Keeps CTA buttons where they worked best and moves the feature icon row/trust bar lower
   so the buttons have natural space between paragraph and icons.
*/

/* Put CTA back in the better middle position */
.phase2-hero-actions{
    top: 71.25% !important;
}

/* Move baked feature icon/trust area visually lower by shifting the hero image crop slightly less on desktop is NOT used.
   Instead, we nudge the live CTA styling smaller enough to create the breathing room without touching artwork. */
.phase2-cta{
    min-height: 36px !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

/* If site has live feature rows below the hero, push them down slightly */
.feature-row,
.features,
.hero-features,
.trust-strip,
.trust-bar{
    margin-top: 28px !important;
}



/* =========================================================
   PHASE 3 — BRAND HARMONIZATION PASS
   Goal: make the rest of the site visually match the approved neon hero.
   CSS-only. No hero/artwork/model changes.
   ========================================================= */

:root {
  --nxp-black: #020204;
  --nxp-deep: #06040b;
  --nxp-pink: #ff2fac;
  --nxp-hot: #ff149d;
  --nxp-cyan: #4dc7ff;
  --nxp-violet: #9c4dff;
  --nxp-white: #ffffff;
  --nxp-muted: rgba(255,255,255,.72);
  --nxp-border: rgba(255,47,172,.62);
  --nxp-glow-soft: 0 0 8px rgba(255,47,172,.35), 0 0 18px rgba(255,47,172,.16);
  --nxp-glow-strong: 0 0 10px rgba(255,47,172,.62), 0 0 24px rgba(255,47,172,.28), 0 0 38px rgba(77,199,255,.12);
}

body {
  background:
    radial-gradient(circle at 72% 18%, rgba(77,199,255,.055), transparent 30%),
    radial-gradient(circle at 28% 82%, rgba(255,47,172,.06), transparent 35%),
    var(--nxp-black) !important;
  color: var(--nxp-white) !important;
}

/* Site-wide neon borders should feel like the hero, not flat older hot pink */
.card,
.product-card,
.preview-card,
.artist-card,
.info-card,
.policy-card,
.collection-card,
.gallery-card,
section[class*="card"],
[class*="panel"],
[class*="box"] {
  border-color: var(--nxp-border) !important;
  background:
    linear-gradient(180deg, rgba(255,47,172,.035), rgba(77,199,255,.012) 48%, rgba(0,0,0,.08)) !important;
  box-shadow: 0 0 0 1px rgba(255,47,172,.08), 0 0 18px rgba(255,47,172,.075) !important;
}

/* Buttons: transparent neon instead of older flat pink */
button,
.btn,
.button,
a.btn,
a.button,
input[type="submit"],
.product-card a,
.preview-card a,
.shop-button,
.artist-button,
.cta,
.cta-button {
  border-color: rgba(255,47,172,.82) !important;
  background: rgba(0,0,0,.20) !important;
  color: rgba(255,255,255,.96) !important;
  box-shadow: var(--nxp-glow-soft) !important;
  text-shadow: 0 2px 10px rgba(0,0,0,.88) !important;
  transition: color .2s ease, border-color .2s ease, box-shadow .2s ease, background-color .2s ease, transform .2s ease !important;
}

button:hover,
button:focus-visible,
.btn:hover,
.btn:focus-visible,
.button:hover,
.button:focus-visible,
a.btn:hover,
a.btn:focus-visible,
a.button:hover,
a.button:focus-visible,
input[type="submit"]:hover,
input[type="submit"]:focus-visible,
.product-card a:hover,
.preview-card a:hover,
.shop-button:hover,
.artist-button:hover,
.cta:hover,
.cta-button:hover {
  color: #ff8de0 !important;
  border-color: #ff67d0 !important;
  background: rgba(255,47,172,.045) !important;
  box-shadow: var(--nxp-glow-strong) !important;
  transform: translateY(-1px) !important;
}

/* Nav across all internal pages matches homepage glow language */
.site-header,
.header,
.navbar {
  background: rgba(2,2,4,.86) !important;
  border-bottom-color: rgba(255,47,172,.24) !important;
  box-shadow: 0 0 22px rgba(255,47,172,.08) !important;
}

.site-nav a,
nav a {
  transition: color .2s ease, text-shadow .2s ease, transform .2s ease !important;
}

.site-nav a:hover,
.site-nav a:focus-visible,
nav a:hover,
nav a:focus-visible {
  color: #ff8de0 !important;
  text-shadow: 0 0 8px rgba(255,47,172,.58), 0 0 18px rgba(255,47,172,.24) !important;
}

/* Headings and accents borrow the hero's pink/cyan/violet palette */
h1, h2, h3,
.section-title,
.page-title,
.product-title {
  text-shadow: 0 0 14px rgba(255,47,172,.12) !important;
}

.accent,
.highlight,
.pink,
strong em,
em strong {
  color: var(--nxp-pink) !important;
}

/* Product/gallery image frames */
img,
.product-image,
.gallery-image {
  border-color: rgba(255,47,172,.32) !important;
}

.product-card:hover,
.preview-card:hover,
.gallery-card:hover,
.artist-card:hover {
  border-color: rgba(255,47,172,.82) !important;
  box-shadow:
    0 0 0 1px rgba(255,47,172,.16),
    0 0 20px rgba(255,47,172,.16),
    0 0 34px rgba(77,199,255,.08) !important;
}

/* Forms */
input,
textarea,
select {
  background: rgba(0,0,0,.32) !important;
  border-color: rgba(255,47,172,.45) !important;
  color: var(--nxp-white) !important;
  box-shadow: inset 0 0 12px rgba(255,47,172,.035) !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: #ff67d0 !important;
  outline: none !important;
  box-shadow:
    0 0 0 1px rgba(255,47,172,.28),
    0 0 16px rgba(255,47,172,.22),
    inset 0 0 12px rgba(77,199,255,.035) !important;
}

/* Thin separators and rules now feel neon-lit */
hr,
.divider,
.separator,
[class*="divider"] {
  border-color: rgba(255,47,172,.35) !important;
  box-shadow: 0 0 12px rgba(255,47,172,.16) !important;
}

/* Bottom/footer polish */
footer,
.site-footer {
  background:
    radial-gradient(circle at 20% 0%, rgba(255,47,172,.06), transparent 34%),
    rgba(2,2,4,.96) !important;
  border-top-color: rgba(255,47,172,.24) !important;
  box-shadow: 0 -10px 28px rgba(255,47,172,.055) !important;
}

footer a,
.site-footer a {
  color: rgba(255,255,255,.82) !important;
}

footer a:hover,
.site-footer a:hover {
  color: #ff8de0 !important;
  text-shadow: 0 0 8px rgba(255,47,172,.45) !important;
}

/* Keep Phase 2 hero/approved artwork untouched */
.phase2-hero-img {
  filter: none !important;
}


/* =========================================================
   NATIVE LOGO INTEGRATION FIX
   Uses the logo extracted from the approved hero so it matches the main page.
   Removes black-box/sticker treatment.
   No hero/model/artwork changes.
   ========================================================= */

.brand,
.logo,
.site-logo,
.logo-wrap,
.logo-wrapper,
.header-logo,
.footer-logo,
.page-logo-wrap {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.brand img,
.site-logo img,
.logo img,
.header-logo img,
.page-logo,
.site-footer img[src*="logo"],
footer img[src*="logo"] {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  object-fit: contain !important;
  image-rendering: auto !important;
  filter:
    drop-shadow(0 0 5px rgba(255,47,172,.45))
    drop-shadow(0 0 12px rgba(255,47,172,.15)) !important;
}

/* Header logo should feel embedded, not like a sticker/card */
.site-header .brand img,
.header .brand img,
.navbar .brand img,
.brand img {
  width: auto !important;
  max-width: clamp(118px, 10vw, 170px) !important;
  max-height: clamp(48px, 4.6vw, 72px) !important;
  display: block !important;
}

/* Page logo: use as a small brand mark, not a giant graphic */
.page-logo {
  max-width: clamp(155px, 13vw, 230px) !important;
  height: auto !important;
  margin-inline: auto !important;
}

/* Footer logo: subtle and clean */
.site-footer img[src*="logo"],
footer img[src*="logo"] {
  max-width: 150px !important;
  height: auto !important;
  opacity: .96 !important;
}

/* Kill any pseudo boxes/glow panels around logos */
.brand::before,
.brand::after,
.logo::before,
.logo::after,
.site-logo::before,
.site-logo::after,
.header-logo::before,
.header-logo::after,
.page-logo-wrap::before,
.page-logo-wrap::after {
  display: none !important;
  content: none !important;
}

/* Keep approved hero untouched */
.phase2-hero-img {
  filter: none !important;
}


/* =========================================================
   MOBILE + TABLET RECOVERY BUILD
   Purpose:
   - Restore hamburger/dropdown navigation on iPhone, Android, Google Pixel, iPad/tablet.
   - Stop horizontal overflow.
   - Center mobile/tablet layout.
   - Preserve approved desktop design and artwork.
   ========================================================= */

/* Global overflow protection */
html,
body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

*,
*::before,
*::after {
  box-sizing: border-box !important;
}

img,
video,
canvas,
svg {
  max-width: 100%;
}

/* Mobile menu hidden by default on desktop */
.mobile-recovery-toggle,
.mobile-recovery-menu {
  display: none;
}

/* Tablet and mobile */
@media (max-width: 1024px) {
  html,
  body {
    width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  body {
    position: relative !important;
  }

  /* Hide desktop/live hero nav on tablet/mobile so hamburger owns navigation */
  .phase2-hero-nav,
  .hero-live-nav,
  .site-nav,
  .desktop-nav,
  header nav:not(.mobile-recovery-menu),
  .navbar nav:not(.mobile-recovery-menu) {
    display: none !important;
  }

  /* Keep header visible but prevent broken nav layout */
  .site-header,
  .header,
  .navbar {
    min-height: 76px !important;
    padding: 12px 18px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
  }

  .brand,
  .site-logo,
  .logo {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    max-width: 56vw !important;
  }

  .brand img,
  .site-logo img,
  .logo img {
    max-width: 150px !important;
    max-height: 64px !important;
    width: auto !important;
    height: auto !important;
  }

  .mobile-recovery-toggle {
    position: fixed !important;
    top: 18px !important;
    right: 18px !important;
    z-index: 99999 !important;
    width: 46px !important;
    height: 42px !important;
    padding: 9px !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    border: 1.5px solid rgba(255,47,172,.88) !important;
    border-radius: 12px !important;
    background: rgba(2,2,4,.86) !important;
    box-shadow:
      0 0 10px rgba(255,47,172,.42),
      0 0 20px rgba(255,47,172,.14) !important;
    cursor: pointer !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  .mobile-recovery-toggle span {
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: #ff2fac !important;
    box-shadow: 0 0 8px rgba(255,47,172,.75) !important;
    transition: transform .2s ease, opacity .2s ease !important;
  }

  body.mobile-menu-open .mobile-recovery-toggle span:nth-child(1) {
    transform: translateY(7px) rotate(45deg) !important;
  }

  body.mobile-menu-open .mobile-recovery-toggle span:nth-child(2) {
    opacity: 0 !important;
  }

  body.mobile-menu-open .mobile-recovery-toggle span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg) !important;
  }

  .mobile-recovery-menu {
    position: fixed !important;
    top: 72px !important;
    left: 50% !important;
    transform: translateX(-50%) translateY(-12px) !important;
    z-index: 99998 !important;
    width: min(92vw, 420px) !important;
    padding: 18px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 12px !important;
    border: 1px solid rgba(255,47,172,.58) !important;
    border-radius: 18px !important;
    background:
      radial-gradient(circle at 50% 0%, rgba(255,47,172,.13), transparent 42%),
      rgba(2,2,4,.96) !important;
    box-shadow:
      0 0 18px rgba(255,47,172,.30),
      0 0 38px rgba(77,199,255,.08) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease !important;
  }

  body.mobile-menu-open .mobile-recovery-menu {
    opacity: 1 !important;
    pointer-events: auto !important;
    visibility: visible !important;
    transform: translateX(-50%) translateY(0) !important;
  }

  .mobile-recovery-menu a {
    display: block !important;
    width: 100% !important;
    padding: 14px 16px !important;
    border: 1px solid rgba(255,47,172,.46) !important;
    border-radius: 12px !important;
    color: #fff !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: .08em !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    background: rgba(0,0,0,.24) !important;
    text-shadow: 0 0 10px rgba(255,47,172,.22) !important;
  }

  .mobile-recovery-menu a:hover,
  .mobile-recovery-menu a:focus-visible {
    color: #ff8de0 !important;
    border-color: #ff67d0 !important;
    box-shadow:
      0 0 10px rgba(255,47,172,.42),
      inset 0 0 12px rgba(255,47,172,.06) !important;
    outline: none !important;
  }

  /* Homepage hero: remove broken sideways behavior and center the visible composition */
  .phase2-hero,
  .locked-hero {
    width: 100% !important;
    overflow: hidden !important;
    max-width: 100vw !important;
  }

  .phase2-hero-img,
  .locked-hero-img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    transform: none !important;
    margin: 0 auto !important;
  }

  /* Hide desktop-positioned CTAs on smaller screens if they collide with the baked composition */
  .phase2-hero-actions,
  .hero-live-actions,
  .hero-real-cta,
  .cta-hotspot {
    display: none !important;
  }

  /* Main content centering */
  main,
  section,
  .container,
  .wrap,
  .content,
  .page-section,
  .product-grid,
  .gallery-grid,
  .cards,
  .grid {
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .container,
  .wrap,
  .content,
  .page-section {
    padding-left: clamp(16px, 5vw, 32px) !important;
    padding-right: clamp(16px, 5vw, 32px) !important;
  }

  .product-grid,
  .gallery-grid,
  .cards,
  .grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .product-card,
  .gallery-card,
  .artist-card,
  .preview-card,
  .card,
  [class*="card"] {
    width: 100% !important;
    max-width: 520px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Text blocks stay readable and centered on mobile/tablet */
  h1,
  h2,
  h3,
  .page-title,
  .section-title {
    text-wrap: balance;
  }
}

/* Phones */
@media (max-width: 760px) {
  .site-header,
  .header,
  .navbar {
    min-height: 72px !important;
  }

  .brand img,
  .site-logo img,
  .logo img {
    max-width: 130px !important;
    max-height: 58px !important;
  }

  .mobile-recovery-toggle {
    top: 15px !important;
    right: 14px !important;
  }

  .mobile-recovery-menu {
    top: 68px !important;
    width: min(92vw, 360px) !important;
  }

  /* Use the full hero width on phones so visitors can navigate normally, no sideways scroll. */
  .phase2-hero-img,
  .locked-hero-img {
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
  }

  body {
    text-align: initial !important;
  }
}

/* iPad/tablet landscape safety */
@media (min-width: 761px) and (max-width: 1024px) {
  .mobile-recovery-menu {
    width: min(70vw, 460px) !important;
  }

  .phase2-hero-img,
  .locked-hero-img {
    width: 100% !important;
    max-width: 100% !important;
  }
}


/* =========================================================
   TABLET + MOBILE GALLERY RESPONSIVE FIX
   Gallery-only layout polish.
   No hero, logo, or nav changes.
   ========================================================= */

/* iPad Mini / small tablets */
@media (min-width: 600px) and (max-width: 900px) {
  .gallery,
  .gallery-section,
  .gallery-grid,
  .portfolio-grid,
  .image-grid {
    width: 100% !important;
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    align-items: stretch !important;
  }

  .gallery-card,
  .portfolio-card,
  .image-card,
  .gallery-grid > *,
  .portfolio-grid > *,
  .image-grid > * {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  .gallery-card img,
  .portfolio-card img,
  .image-card img,
  .gallery-grid img,
  .portfolio-grid img,
  .image-grid img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border-radius: 14px !important;
  }
}

/* Phones */
@media (max-width: 599px) {
  .gallery,
  .gallery-section,
  .gallery-grid,
  .portfolio-grid,
  .image-grid {
    width: 100% !important;
    max-width: 430px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .gallery-card,
  .portfolio-card,
  .image-card,
  .gallery-grid > *,
  .portfolio-grid > *,
  .image-grid > * {
    width: 100% !important;
    max-width: 390px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .gallery-card img,
  .portfolio-card img,
  .image-card img,
  .gallery-grid img,
  .portfolio-grid img,
  .image-grid img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 5 !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border-radius: 14px !important;
  }
}

/* Tablet landscape safety */
@media (min-width: 901px) and (max-width: 1180px) {
  .gallery,
  .gallery-section,
  .gallery-grid,
  .portfolio-grid,
  .image-grid {
    max-width: 980px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 20px !important;
  }

  .gallery-card img,
  .portfolio-card img,
  .image-card img,
  .gallery-grid img,
  .portfolio-grid img,
  .image-grid img {
    aspect-ratio: 4 / 5 !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}

/* Prevent gallery images from causing sideways overflow */
.gallery img,
.gallery-section img,
.gallery-grid img,
.portfolio-grid img,
.image-grid img {
  max-width: 100% !important;
}


/* =========================================================
   MOBILE HERO CROP FIX
   Mobile-only. Desktop stays untouched.
   Goal: stop the hero from feeling like a tiny shrunken desktop screenshot.
   Keeps approved artwork, logo, menu, gallery, and nav unchanged.
   ========================================================= */

/* Phones portrait */
@media (max-width: 760px) {
  .phase2-hero,
  .locked-hero {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    background: #020204 !important;
  }

  .phase2-hero-img,
  .locked-hero-img {
    width: 142vw !important;
    max-width: none !important;
    height: auto !important;
    transform: translateX(-7.5vw) !important;
    transform-origin: top left !important;
    margin: 0 !important;
    display: block !important;
  }

  /* Keep desktop CTA overlays hidden on mobile so the image remains clean */
  .phase2-hero-actions,
  .hero-live-actions,
  .hero-real-cta,
  .cta-hotspot {
    display: none !important;
  }
}

/* iPhone/Pixel narrower screens */
@media (max-width: 430px) {
  .phase2-hero-img,
  .locked-hero-img {
    width: 150vw !important;
    transform: translateX(-10vw) !important;
  }
}

/* iPad Mini / tablet portrait */
@media (min-width: 761px) and (max-width: 900px) and (orientation: portrait) {
  .phase2-hero,
  .locked-hero {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    background: #020204 !important;
  }

  .phase2-hero-img,
  .locked-hero-img {
    width: 122vw !important;
    max-width: none !important;
    height: auto !important;
    transform: translateX(-5vw) !important;
    transform-origin: top left !important;
    margin: 0 !important;
    display: block !important;
  }

  .phase2-hero-actions,
  .hero-live-actions,
  .hero-real-cta,
  .cta-hotspot {
    display: none !important;
  }
}

/* Make sure the page itself never gains horizontal scroll from the crop */
html,
body {
  overflow-x: hidden !important;
  max-width: 100% !important;
}


/* =========================================================
   DESKTOP MOBILE-MENU LEAK FIX
   CSS-only. No artwork/logo/hero changes.
   Fixes mobile recovery nav showing as plain links on desktop.
   ========================================================= */

/* Force mobile-only menu elements hidden on desktop */
.mobile-recovery-toggle,
.mobile-recovery-menu {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Desktop keeps normal navigation only */
@media (min-width: 1025px) {
  .mobile-recovery-toggle,
  .mobile-recovery-menu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}

/* Re-enable hamburger/menu only on tablet + mobile */
@media (max-width: 1024px) {
  .mobile-recovery-toggle {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .mobile-recovery-menu {
    display: flex !important;
  }

  body.mobile-menu-open .mobile-recovery-menu {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  body:not(.mobile-menu-open) .mobile-recovery-menu {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}


/* =========================================================
   MOBILE HERO 2.0 — NATIVE WOW
   Desktop hero remains frozen.
   Mobile is purpose-built but uses the approved artwork/logo/typography.
   No boxes. No cut-up panels. Corey remains the full-screen background.
   ========================================================= */

.mobile-wow-hero-content {
  display: none;
}

/* Desktop remains untouched */
@media (min-width: 901px) {
  .mobile-wow-hero-content {
    display: none !important;
  }

  .phase2-hero,
  .locked-hero {
    display: block !important;
  }

  .phase2-hero-img,
  .locked-hero-img {
    display: block !important;
  }
}

/* Mobile / tablet portrait */
@media (max-width: 900px) {
  .phase2-hero,
  .locked-hero {
    display: flex !important;
    position: relative !important;
    width: 100vw !important;
    max-width: 100vw !important;
    min-height: 100svh !important;
    height: auto !important;
    padding: calc(env(safe-area-inset-top, 0px) + 78px) 18px 34px !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    background-image:
      linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.30)),
      url("assets/hero-approved-final.png") !important;
    background-repeat: no-repeat !important;
    background-size: auto 118% !important;
    background-position: 69% 48% !important;
    background-color: #020204 !important;
    border-bottom: 1px solid rgba(255,47,172,.26) !important;
    box-shadow: 0 18px 46px rgba(255,47,172,.08) !important;
  }

  /* readability overlay while preserving Corey + rings */
  .phase2-hero::before,
  .locked-hero::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background:
      radial-gradient(circle at 77% 35%, rgba(0,0,0,.06), rgba(0,0,0,.10) 30%, rgba(0,0,0,.22) 52%, rgba(0,0,0,.46) 100%),
      linear-gradient(90deg, rgba(0,0,0,.52), rgba(0,0,0,.28) 52%, rgba(0,0,0,.18)),
      linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.06) 48%, rgba(0,0,0,.42)) !important;
  }

  .phase2-hero-img,
  .locked-hero-img {
    display: none !important;
  }

  .phase2-hero-nav,
  .hero-live-nav,
  .phase2-hero-actions,
  .hero-live-actions,
  .hero-real-cta,
  .cta-hotspot {
    display: none !important;
  }

  .mobile-wow-hero-content {
    position: relative !important;
    z-index: 3 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: min(100%, 430px) !important;
    min-height: calc(100svh - 126px) !important;
    margin: 0 auto !important;
    text-align: center !important;
  }

  .mobile-wow-logo {
    display: block !important;
    width: min(47vw, 190px) !important;
    height: auto !important;
    margin: 0 auto 12px !important;
    filter:
      drop-shadow(0 0 8px rgba(255,47,172,.62))
      drop-shadow(0 0 18px rgba(255,47,172,.22)) !important;
  }

  .mobile-wow-headline {
    display: block !important;
    width: min(96vw, 405px) !important;
    height: auto !important;
    margin: 0 auto 14px !important;
    filter:
      drop-shadow(0 2px 10px rgba(0,0,0,.90))
      drop-shadow(0 0 10px rgba(255,47,172,.22)) !important;
  }

  .mobile-wow-copy {
    width: min(100%, 390px) !important;
    margin: 0 auto 16px !important;
    color: rgba(255,255,255,.95) !important;
    font-size: clamp(16px, 4.25vw, 19px) !important;
    line-height: 1.38 !important;
    font-weight: 800 !important;
    text-align: center !important;
    text-shadow: 0 3px 14px rgba(0,0,0,.98) !important;
  }

  .mobile-wow-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 11px !important;
    width: min(100%, 336px) !important;
    margin: 0 auto 18px !important;
  }

  .mobile-wow-actions a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 46px !important;
    border: 1.5px solid rgba(255,47,172,.94) !important;
    border-radius: 14px !important;
    background: rgba(0,0,0,.34) !important;
    color: #fff !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: .075em !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.95) !important;
    box-shadow:
      0 0 12px rgba(255,47,172,.46),
      0 0 24px rgba(255,47,172,.14),
      inset 0 0 14px rgba(255,47,172,.055) !important;
  }

  .mobile-wow-features {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    width: min(100%, 410px) !important;
    margin: 0 auto 14px !important;
    padding-top: 11px !important;
    border-top: 1px solid rgba(255,47,172,.34) !important;
  }

  .mobile-wow-features span {
    display: block !important;
    color: #ff2fac !important;
    font-size: 25px !important;
    line-height: 1 !important;
    margin-bottom: 5px !important;
    text-shadow: 0 0 12px rgba(255,47,172,.58) !important;
  }

  .mobile-wow-features small {
    display: block !important;
    color: rgba(255,255,255,.91) !important;
    text-transform: uppercase !important;
    letter-spacing: .05em !important;
    font-size: 9.5px !important;
    line-height: 1.25 !important;
    font-weight: 900 !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.98) !important;
  }

  .mobile-wow-worldwide {
    width: min(100%, 410px) !important;
    margin: 0 auto !important;
    padding: 12px 13px !important;
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    border: 1px solid rgba(255,47,172,.60) !important;
    border-radius: 16px !important;
    background: rgba(0,0,0,.36) !important;
    box-shadow:
      0 0 12px rgba(255,47,172,.30),
      inset 0 0 14px rgba(255,47,172,.05) !important;
  }

  .mobile-wow-worldwide span {
    flex: 0 0 auto !important;
    color: #ff2fac !important;
    font-size: 27px !important;
    line-height: 1 !important;
    text-shadow: 0 0 10px rgba(255,47,172,.60) !important;
  }

  .mobile-wow-worldwide p {
    margin: 0 !important;
    color: rgba(255,255,255,.90) !important;
    font-size: 10.5px !important;
    line-height: 1.35 !important;
    text-align: left !important;
    text-transform: uppercase !important;
    letter-spacing: .035em !important;
    font-weight: 800 !important;
    text-shadow: 0 2px 10px rgba(0,0,0,.98) !important;
  }

  .mobile-wow-worldwide strong {
    color: #ff2fac !important;
    font-weight: 900 !important;
  }
}

/* iPhone Pro Max / larger phones */
@media (min-width: 390px) and (max-width: 480px) {
  .phase2-hero,
  .locked-hero {
    background-size: auto 116% !important;
    background-position: 70% 48% !important;
  }

  .mobile-wow-headline {
    width: min(96vw, 410px) !important;
  }
}

/* Small phones */
@media (max-width: 380px) {
  .phase2-hero,
  .locked-hero {
    padding-left: 14px !important;
    padding-right: 14px !important;
    background-size: auto 122% !important;
    background-position: 69% 48% !important;
  }

  .mobile-wow-copy {
    font-size: 15.5px !important;
  }

  .mobile-wow-worldwide p {
    font-size: 9.7px !important;
  }
}

/* iPad Mini / tablet portrait */
@media (min-width: 700px) and (max-width: 900px) {
  .phase2-hero,
  .locked-hero {
    min-height: 92svh !important;
    background-size: cover !important;
    background-position: 66% center !important;
  }

  .mobile-wow-hero-content {
    width: min(100%, 560px) !important;
  }

  .mobile-wow-logo {
    width: min(34vw, 220px) !important;
  }

  .mobile-wow-headline {
    width: min(90vw, 500px) !important;
  }

  .mobile-wow-actions {
    grid-template-columns: repeat(2, 1fr) !important;
    width: min(100%, 470px) !important;
  }
}

/* Keep neon mobile menu on top */
@media (max-width: 1024px) {
  .mobile-recovery-toggle {
    z-index: 999999 !important;
  }

  .mobile-recovery-menu {
    z-index: 999998 !important;
  }
}

/* Gallery/tablet preservation */
@media (min-width: 600px) and (max-width: 900px) {
  .gallery,
  .gallery-section,
  .gallery-grid,
  .portfolio-grid,
  .image-grid {
    width: 100% !important;
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 22px !important;
    padding-right: 22px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  .gallery-grid img,
  .portfolio-grid img,
  .image-grid img {
    width: 100% !important;
    aspect-ratio: 4 / 5 !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 14px !important;
  }
}

@media (max-width: 599px) {
  .gallery,
  .gallery-section,
  .gallery-grid,
  .portfolio-grid,
  .image-grid {
    width: 100% !important;
    max-width: 430px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .gallery-grid img,
  .portfolio-grid img,
  .image-grid img {
    width: 100% !important;
    aspect-ratio: 4 / 5 !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 14px !important;
  }
}


/* =========================================================
   SURGICAL FINAL PATCH FROM GOOD BASE
   Only fixes:
   - mobile logo uses official desktop logo
   - hamburger stays fixed while scrolling
   - floating order stays removed
   ========================================================= */

.floating-order,
.order-floating,
.floating-order-button,
.order-button-floating,
.order-now-floating,
.sticky-order,
.sticky-order-button,
.fixed-order,
.fixed-order-button {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (max-width: 1024px) {
  .mobile-wow-logo,
  img.mobile-wow-logo {
    content: url("assets/mobile-official-desktop-assets/logo-approved-neon-master.png") !important;
    width: min(50vw, 215px) !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
    filter:
      drop-shadow(0 0 8px rgba(255,47,172,.65))
      drop-shadow(0 0 18px rgba(255,47,172,.24)) !important;
  }

  .mobile-recovery-toggle,
  .menu-button,
  header .menu-button,
  .hamburger,
  .hamburger-menu,
  .menu-toggle,
  .nav-toggle,
  .mobile-menu-toggle,
  button[aria-label*="Open navigation"],
  button[aria-label*="navigation"] {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 18px) !important;
    right: max(16px, env(safe-area-inset-right, 0px)) !important;
    left: auto !important;
    bottom: auto !important;
    z-index: 2147483647 !important;
    transform: none !important;
    margin: 0 !important;
  }

  .mobile-recovery-menu,
  .site-nav,
  .mobile-menu,
  .mobile-nav,
  .nav-menu-mobile {
    position: fixed !important;
    z-index: 2147483646 !important;
  }
}


/* =========================================================
   APPROVED HERO IMPLEMENTATION QA — ITEMS 1-4
   - Approved desktop hero locked
   - Real HTML CTA buttons placed in blank reserved area
   - Desktop resize behavior protected
   - Mobile consistency preserved
   ========================================================= */

.floating-order,
.order-floating,
.floating-order-button,
.order-button-floating,
.order-now-floating,
.sticky-order,
.sticky-order-button,
.fixed-order,
.fixed-order-button {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (min-width: 901px) {
  .phase2-hero,
  .locked-hero {
    position: relative !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    background: #020204 !important;
  }

  .phase2-hero-img,
  .locked-hero-img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    margin: 0 auto !important;
  }

  .phase2-hero-actions {
    position: absolute !important;
    left: clamp(28px, 1.75vw, 38px) !important;
    top: clamp(600px, 37.6vw, 652px) !important;
    width: min(520px, 34vw) !important;
    display: flex !important;
    align-items: center !important;
    gap: clamp(18px, 1.4vw, 28px) !important;
    z-index: 20 !important;
  }

  .phase2-hero-actions .phase2-cta {
    flex: 1 1 0 !important;
    min-height: 42px !important;
    padding: 0 22px !important;
    border: 1.5px solid #ff2fac !important;
    border-radius: 9px !important;
    background: rgba(0,0,0,.26) !important;
    color: #fff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: .12em !important;
    font-weight: 800 !important;
    font-size: clamp(10px, .68vw, 12px) !important;
    box-shadow: 0 0 14px rgba(255,47,172,.28) !important;
  }
}

@media (min-width: 901px) and (max-width: 1320px) {
  .phase2-hero-actions {
    top: clamp(500px, 37.8vw, 610px) !important;
    width: min(455px, 33vw) !important;
  }
}

@media (min-width: 901px) and (max-width: 1120px) {
  .phase2-hero-actions {
    top: clamp(420px, 38vw, 500px) !important;
    width: min(390px, 34vw) !important;
    gap: 14px !important;
  }

  .phase2-hero-actions .phase2-cta {
    min-height: 34px !important;
    font-size: 9px !important;
    padding: 0 12px !important;
  }
}

@media (max-width: 1024px) {
  .mobile-recovery-toggle,
  .menu-button,
  header .menu-button,
  .hamburger,
  .hamburger-menu,
  .menu-toggle,
  .nav-toggle,
  .mobile-menu-toggle,
  button[aria-label*="Open navigation"],
  button[aria-label*="navigation"] {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 18px) !important;
    right: max(16px, env(safe-area-inset-right, 0px)) !important;
    z-index: 2147483647 !important;
    transform: none !important;
  }
}


/* =========================================================
   BUTTON POSITION FIX
   Real HTML buttons belong in the blank reserved space
   between paragraph and feature icons — not over ARTISTS.
   ========================================================= */

@media (min-width: 901px) {
  .phase2-hero-actions {
    position: absolute !important;
    left: clamp(28px, 1.75vw, 38px) !important;
    top: clamp(690px, 41.7vw, 730px) !important;
    width: min(520px, 34vw) !important;
    display: flex !important;
    align-items: center !important;
    gap: clamp(18px, 1.4vw, 28px) !important;
    z-index: 20 !important;
  }
}

@media (min-width: 901px) and (max-width: 1320px) {
  .phase2-hero-actions {
    top: clamp(560px, 42vw, 690px) !important;
    width: min(455px, 33vw) !important;
  }
}

@media (min-width: 901px) and (max-width: 1120px) {
  .phase2-hero-actions {
    top: clamp(480px, 42.5vw, 560px) !important;
    width: min(390px, 34vw) !important;
    gap: 14px !important;
  }
}


/* =========================================================
   FINAL DESKTOP CTA + RESIZE FIX
   CSS-only. No image/model/typography/ring changes.
   Places real HTML buttons in the blank area below paragraph
   and above the icon row. Uses percentages so desktop resize
   does not shove buttons over ARTISTS or off the hero.
   ========================================================= */

@media (min-width: 761px) {
  body.phase-2-home .phase2-hero {
    position: relative !important;
    width: 100% !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background: #020204 !important;
    line-height: 0 !important;
  }

  body.phase-2-home .phase2-hero-img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    margin: 0 auto !important;
    padding: 0 !important;
    transform: none !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  body.phase-2-home .phase2-hero-actions {
    position: absolute !important;
    z-index: 60 !important;
    left: 1.75% !important;
    top: 65.75% !important;
    width: 35.25% !important;
    max-width: 560px !important;
    min-width: 280px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 3.8% !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    transform: none !important;
  }

  body.phase-2-home .phase2-hero-actions .phase2-cta {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    height: clamp(30px, 2.2vw, 42px) !important;
    min-height: 0 !important;
    padding: 0 clamp(12px, 1.15vw, 22px) !important;
    border: 1.5px solid rgba(255,47,172,.92) !important;
    border-radius: clamp(7px, .55vw, 10px) !important;
    background: rgba(0,0,0,.24) !important;
    color: #fff !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: .11em !important;
    font-weight: 800 !important;
    font-size: clamp(8px, .72vw, 12px) !important;
    white-space: nowrap !important;
    box-shadow: 0 0 14px rgba(255,47,172,.25) !important;
  }
}

/* Slight tightening for narrow desktop/tablet widths during browser resize. */
@media (min-width: 761px) and (max-width: 1100px) {
  body.phase-2-home .phase2-hero-actions {
    top: 65.5% !important;
    left: 1.7% !important;
    width: 35.5% !important;
    min-width: 230px !important;
    gap: 3.2% !important;
  }

  body.phase-2-home .phase2-hero-actions .phase2-cta {
    height: clamp(24px, 2.4vw, 32px) !important;
    font-size: clamp(7px, .75vw, 9px) !important;
    padding: 0 9px !important;
    letter-spacing: .08em !important;
  }
}

/* Real mobile keeps desktop CTA overlays hidden. */
@media (max-width: 760px) {
  body.phase-2-home .phase2-hero-actions {
    display: none !important;
  }
}


/* =========================================================
   DESKTOP CTA REFINEMENT
   CSS-only:
   - Buttons sit lower/centered in reserved blank space
   - Better desktop/mobile visual parity
   - No hover underline/pink text line
   - Button box glows neon pink on hover
   ========================================================= */

@media (min-width: 761px) {
  body.phase-2-home .phase2-hero-actions {
    top: 68.35% !important;
    left: 1.72% !important;
    width: 34.25% !important;
    max-width: 545px !important;
    min-width: 285px !important;
    gap: 3.5% !important;
  }

  body.phase-2-home .phase2-hero-actions .phase2-cta,
  body.phase-2-home .phase2-hero-actions .phase2-cta:link,
  body.phase-2-home .phase2-hero-actions .phase2-cta:visited {
    height: clamp(34px, 2.35vw, 46px) !important;
    border: 1.7px solid rgba(255,47,172,.96) !important;
    border-radius: 11px !important;
    background: rgba(0,0,0,.34) !important;
    color: #fff !important;
    text-decoration: none !important;
    text-decoration-line: none !important;
    box-shadow:
      0 0 10px rgba(255,47,172,.24),
      inset 0 0 10px rgba(255,47,172,.08) !important;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease !important;
  }

  body.phase-2-home .phase2-hero-actions .phase2-cta:hover,
  body.phase-2-home .phase2-hero-actions .phase2-cta:focus,
  body.phase-2-home .phase2-hero-actions .phase2-cta:active {
    color: #fff !important;
    text-decoration: none !important;
    text-decoration-line: none !important;
    border-color: #ff2fac !important;
    background: rgba(255,47,172,.10) !important;
    box-shadow:
      0 0 14px rgba(255,47,172,.52),
      0 0 30px rgba(255,47,172,.26),
      inset 0 0 16px rgba(255,47,172,.18) !important;
  }
}

@media (min-width: 761px) and (max-width: 1320px) {
  body.phase-2-home .phase2-hero-actions {
    top: 68.2% !important;
    width: 34.8% !important;
    min-width: 250px !important;
  }
}

@media (min-width: 761px) and (max-width: 1120px) {
  body.phase-2-home .phase2-hero-actions {
    top: 68% !important;
    left: 1.7% !important;
    width: 35.25% !important;
    min-width: 220px !important;
    gap: 3% !important;
  }

  body.phase-2-home .phase2-hero-actions .phase2-cta {
    height: clamp(26px, 2.55vw, 34px) !important;
    font-size: clamp(7px, .75vw, 9px) !important;
    border-radius: 8px !important;
    letter-spacing: .08em !important;
  }
}


/* =========================================================
   HERO CTA + NAV/INSTAGRAM HOVER FIX
   - Keep top nav underline hover behavior.
   - Remove underline/pink line from hero CTA buttons only.
   - Add neon glow to Instagram hover while preserving bounce.
   ========================================================= */

/* Hero CTA buttons: no underline, no hover line, no pseudo-element line */
body.phase-2-home .phase2-hero-actions .phase2-cta,
body.phase-2-home .phase2-hero-actions .phase2-cta:link,
body.phase-2-home .phase2-hero-actions .phase2-cta:visited,
body.phase-2-home .phase2-hero-actions .phase2-cta:hover,
body.phase-2-home .phase2-hero-actions .phase2-cta:focus,
body.phase-2-home .phase2-hero-actions .phase2-cta:active {
  text-decoration: none !important;
  text-decoration-line: none !important;
  border-bottom: 1.7px solid rgba(255,47,172,.96) !important;
}

body.phase-2-home .phase2-hero-actions .phase2-cta::before,
body.phase-2-home .phase2-hero-actions .phase2-cta::after,
body.phase-2-home .phase2-hero-actions .phase2-cta:hover::before,
body.phase-2-home .phase2-hero-actions .phase2-cta:hover::after,
body.phase-2-home .phase2-hero-actions .phase2-cta:focus::before,
body.phase-2-home .phase2-hero-actions .phase2-cta:focus::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
  transform: none !important;
}

/* Hero CTA hover: box glow only */
body.phase-2-home .phase2-hero-actions .phase2-cta:hover,
body.phase-2-home .phase2-hero-actions .phase2-cta:focus {
  color: #fff !important;
  background: rgba(255,47,172,.10) !important;
  border-color: #ff2fac !important;
  box-shadow:
    0 0 14px rgba(255,47,172,.52),
    0 0 30px rgba(255,47,172,.26),
    inset 0 0 16px rgba(255,47,172,.18) !important;
}

/* Top nav links are intentionally untouched so their underline hover remains. */

/* Instagram icon: keep bounce, add neon glow */
.site-nav a[href*="instagram"]:hover,
.site-nav a[href*="instagram"]:focus,
.nav a[href*="instagram"]:hover,
.nav a[href*="instagram"]:focus,
.header-nav a[href*="instagram"]:hover,
.header-nav a[href*="instagram"]:focus,
a[href*="instagram"].instagram-link:hover,
a[href*="instagram"].instagram-link:focus,
.instagram-link:hover,
.instagram-link:focus {
  filter:
    drop-shadow(0 0 6px rgba(255,47,172,.85))
    drop-shadow(0 0 16px rgba(255,47,172,.55))
    drop-shadow(0 0 28px rgba(255,47,172,.32)) !important;
  box-shadow:
    0 0 12px rgba(255,47,172,.38),
    0 0 24px rgba(255,47,172,.22) !important;
  border-color: rgba(255,47,172,.92) !important;
}


/* =========================================================
   TRANSPARENT APPROVED LOGO + MAIN MOBILE FIX
   - Removes black/pink box around logo.
   - Uses approved transparent neon logo in header/footer/shop.
   - Repairs mobile main logo display.
   - Keeps hamburger fixed.
   - Keeps desktop hero resize stable.
   ========================================================= */

/* Target only actual logo slots, not hero artwork. */
.site-logo img,
.logo img,
.header-logo img,
.nav-logo img,
.mobile-logo img,
.footer-logo img,
footer img.logo,
header img.logo,
img[alt="NXP Pasties neon logo"],
img[alt="NXP Pasties"],
img[alt="NXP Pasties logo"] {
  content: url("assets/logo-approved-neon-master.png") !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  image-rendering: auto !important;
  object-fit: contain !important;
}

/* Header logo: bright but organic, no box. */
.site-logo,
.logo,
.header-logo,
.nav-logo,
.mobile-logo {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.site-logo img,
.logo img,
.header-logo img,
.nav-logo img {
  width: auto !important;
  height: clamp(48px, 4.1vw, 72px) !important;
  max-width: 230px !important;
}

/* Footer logo: transparent and centered, no rectangular backing. */
.footer-logo,
footer .logo,
footer .footer-logo {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.footer-logo img,
footer img.logo,
footer img[alt*="NXP"] {
  width: auto !important;
  height: clamp(72px, 5.8vw, 108px) !important;
  max-width: 280px !important;
}

/* Desktop hero/window resize stability */
@media (min-width: 901px) {
  body.phase-2-home .phase2-hero,
  .phase2-hero,
  .locked-hero {
    position: relative !important;
    width: 100vw !important;
    max-width: 100vw !important;
    overflow: hidden !important;
    background: #020204 !important;
  }

  body.phase-2-home .phase2-hero-img,
  .phase2-hero-img,
  .locked-hero-img {
    display: block !important;
    width: 100vw !important;
    max-width: none !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center top !important;
    transform: none !important;
    margin: 0 !important;
  }

  body.phase-2-home .phase2-hero-actions {
    position: absolute !important;
    left: 1.72vw !important;
    top: 68.35% !important;
    width: min(34.25vw, 545px) !important;
    min-width: 285px !important;
    transform: none !important;
    z-index: 60 !important;
  }
}

/* Mobile: keep logo natural and hamburger fixed. */
@media (max-width: 900px) {
  .site-logo img,
  .logo img,
  .header-logo img,
  .nav-logo img,
  .mobile-logo img,
  img[alt="NXP Pasties neon logo"],
  img[alt="NXP Pasties"],
  img[alt="NXP Pasties logo"] {
    width: auto !important;
    height: clamp(54px, 13vw, 86px) !important;
    max-width: min(245px, 45vw) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  body.phase-2-home .phase2-hero-actions {
    display: none !important;
  }

  .mobile-recovery-toggle,
  .menu-button,
  header .menu-button,
  .hamburger,
  .hamburger-menu,
  .menu-toggle,
  .nav-toggle,
  .mobile-menu-toggle,
  button[aria-label*="Open navigation"],
  button[aria-label*="navigation"],
  button[aria-label*="menu"],
  .navbar-toggler {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 18px) !important;
    right: max(16px, env(safe-area-inset-right, 0px)) !important;
    z-index: 2147483647 !important;
    transform: none !important;
    margin: 0 !important;
  }
}


/* =========================================================
   LOGO NO-BOX FINAL FIX
   Removes rectangular backing around approved logo on desktop + mobile.
   The PNG itself is transparent; this also removes any CSS container box.
   ========================================================= */

.site-logo,
.logo,
.header-logo,
.nav-logo,
.mobile-logo,
.footer-logo,
footer .logo,
footer .footer-logo,
a.logo,
a.site-logo,
a.header-logo,
a.nav-logo {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.site-logo::before,
.site-logo::after,
.logo::before,
.logo::after,
.header-logo::before,
.header-logo::after,
.nav-logo::before,
.nav-logo::after,
.mobile-logo::before,
.mobile-logo::after,
.footer-logo::before,
.footer-logo::after {
  display: none !important;
  content: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

.site-logo img,
.logo img,
.header-logo img,
.nav-logo img,
.mobile-logo img,
.footer-logo img,
footer img.logo,
header img.logo,
img[alt="NXP Pasties neon logo"],
img[alt="NXP Pasties"],
img[alt="NXP Pasties logo"] {
  content: url("assets/logo-approved-neon-master.png") !important;
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  filter: none !important;
  object-fit: contain !important;
}

@media (min-width: 901px) {
  .site-logo img,
  .logo img,
  .header-logo img,
  .nav-logo img {
    height: clamp(48px, 4.1vw, 72px) !important;
    width: auto !important;
    max-width: 230px !important;
  }

  .footer-logo img,
  footer img.logo,
  footer img[alt*="NXP"] {
    height: clamp(72px, 5.8vw, 108px) !important;
    width: auto !important;
    max-width: 280px !important;
  }
}

@media (max-width: 900px) {
  .site-logo img,
  .logo img,
  .header-logo img,
  .nav-logo img,
  .mobile-logo img,
  img[alt="NXP Pasties neon logo"],
  img[alt="NXP Pasties"],
  img[alt="NXP Pasties logo"] {
    height: clamp(54px, 13vw, 86px) !important;
    width: auto !important;
    max-width: min(245px, 45vw) !important;
  }
}

/* FIX: remove logo container box ONLY */
.logo, .site-logo, .header-logo, .nav-logo, .mobile-logo, .footer-logo {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.logo img, .site-logo img, .header-logo img, .nav-logo img, .mobile-logo img, .footer-logo img {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}



/* CTA LOCK SYSTEM - OPTION C */
.hero {
  position: relative !important;
  height: 100vh !important;
  overflow: hidden !important;
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero-cta {
  position: absolute !important;
  left: 50% !important;
  bottom: 60px !important;
  transform: translateX(-50%) !important;
  z-index: 5 !important;
  width: 100%;
  display: flex;
  justify-content: center;
  gap: 16px;
}

/* prevent buttons from inheriting scroll behavior */
.hero-cta a, .hero-cta button {
  position: relative;
  z-index: 6;
}

/* mobile tuning */
@media (max-width: 768px) {
  .hero-cta {
    bottom: 40px !important;
    flex-direction: column;
    align-items: center;
  }
}


/* SAFE DESIGN SYSTEM - NXP */
:root{
  --accent:#ff2bd6;
  --accent-glow:rgba(255,43,214,.45);
  --bg:#000000;
  --text:#ffffff;
  --muted:#b3b3b3;
}

/* ONLY accents, NOT body text */
.accent,
.highlight,
.hero h1 span,
.hero h2 span{
  color: var(--accent);
}

.glow{
  text-shadow: 0 0 10px var(--accent-glow);
}

/* ensure readability baseline */
body{
  color: var(--text);
  background: var(--bg);
}


/* ===============================
GLOBAL UI STABILITY LOCK v1
=============================== */

/* Fix header + prevent scroll drift */
header, .header, .navbar {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99999;
}

/* Prevent hamburger from scrolling away */
.hamburger, .menu-toggle, .mobile-menu-button {
  position: fixed !important;
  top: 20px;
  right: 20px;
  z-index: 100000;
}

/* Logo must NEVER have box/border/background */
.logo, .header-logo, .nav-logo {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Ensure logo stays crisp */
.logo img, .header-logo img, .nav-logo img {
  image-rendering: auto;
  transform: none !important;
  filter: none !important;
  max-width: 160px;
}

/* SHOP SYSTEM LOCK */
.product-card, .shop-card {
  text-align: center !important;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* CTA SYSTEM SINGLE STYLE */
.cta-primary, .btn-primary, .button-primary {
  border-radius: 999px !important;
  background: linear-gradient(90deg, #d36bff, #ff4fb8) !important;
  color: #000 !important;
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* Center pricing */
.price-row {
  display: flex;
  justify-content: center;
  gap: 40px;
}

/* Center product headings */
.product-title, .product-tagline, .product-badge {
  text-align: center !important;
}



/* === ARTIST PAGE FINAL COMPOSITION PASS === */
.artist-page blockquote {
  margin: 70px auto 40px;
  max-width: 760px;
  padding: 28px 26px;
  text-align: center;
  position: relative;
}

.artist-page blockquote p {
  font-size: 1.45rem;
  line-height: 1.6;
  font-weight: 500;
  opacity: 0.95;
}

.artist-page blockquote cite {
  display: block;
  margin-top: 16px;
  font-size: 0.95rem;
  opacity: 0.6;
  letter-spacing: 0.08em;
}

.artist-page blockquote::before,
.artist-page blockquote::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  height: 1px;
  background: rgba(255, 0, 150, 0.25);
}

.artist-page blockquote::before { top: 0; }
.artist-page blockquote::after { bottom: 0; }

.artist-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 60px;
  align-items: start;
}

@media (max-width: 768px) {
  .artist-layout {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

/* === ARTIST QUOTE FINAL LOCK === */
.artist-quote {
  margin: 90px auto;
  max-width: 780px;
  text-align: center;
  padding: 35px 20px;
  position: relative;
}

.artist-quote p {
  font-size: 1.85rem;
  line-height: 1.45;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #ffffff;
}

.artist-quote cite {
  display: block;
  margin-top: 18px;
  font-size: 0.95rem;
  opacity: 0.6;
  letter-spacing: 0.12em;
  font-style: normal;
}

.artist-quote::before,
.artist-quote::after {
  content: "";
  position: absolute;
  left: 18%;
  right: 18%;
  height: 1px;
  background: rgba(255, 0, 150, 0.25);
}

.artist-quote::before { top: -18px; }
.artist-quote::after { bottom: -18px; }