/* =========================================================================
   Studio3D — design system (dark, lime accent, grotesk). Adapted from Setrex.
   ========================================================================= */

@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/space-grotesk-400.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/space-grotesk-500.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:600; font-display:swap; src:url('../fonts/space-grotesk-600.woff2') format('woff2'); }
@font-face { font-family:'Space Grotesk'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/space-grotesk-700.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('../fonts/jetbrains-mono-400.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('../fonts/jetbrains-mono-500.woff2') format('woff2'); }
@font-face { font-family:'JetBrains Mono'; font-style:normal; font-weight:700; font-display:swap; src:url('../fonts/jetbrains-mono-700.woff2') format('woff2'); }

:root{
  /* ------------------------------------------------------------------------
     Compatibility shim. system.css owns every real value; these legacy names
     survive only so the rules below that still reference them keep resolving —
     to the NEW values, not the old ones. Never redeclare a token system.css
     owns here: this block loads after it and would silently win.
     ------------------------------------------------------------------------ */
  --border:        var(--hairline);
  --border-strong: var(--hairline-2);
  --accent-2:      var(--accent);

  --r-panel: var(--r-card);
  --r-md:    var(--r-chip);
  --r-sm:    var(--r-chip);

  --ease-out:   var(--ease);
  --ease-emph:  var(--ease);
  --ease-quick: var(--ease);

  --maxw: var(--w-base);
  --pad-tight: calc(var(--pad) * .58);
  --pad-base:  var(--pad);
  --pad-loose: calc(var(--pad) * 1.35);
}

/* =========================================================================
   COCKPIT LAYER — instrumentation details, texture, technical typography
   ========================================================================= */

/* Film grain over the whole page — kills the flat "AI render" feel. */
body.s3-body::after{
  content:''; position:fixed; inset:-50%; z-index:9998; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:s3-grain 8s steps(10) infinite;
}
@keyframes s3-grain{
  0%,100%{transform:translate(0,0)} 10%{transform:translate(-2%,-3%)} 20%{transform:translate(-4%,2%)}
  30%{transform:translate(2%,-4%)} 40%{transform:translate(-2%,3%)} 50%{transform:translate(-4%,1%)}
  60%{transform:translate(3%,0)} 70%{transform:translate(0,3%)} 80%{transform:translate(-3%,0)} 90%{transform:translate(2%,2%)}
}

/* Technical / instrument typography */
.s3-mono{font-family:var(--mono); font-variant-numeric:tabular-nums; letter-spacing:-.01em}
.s3-tag{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint)}
.s3-num{font-family:var(--mono); font-variant-numeric:tabular-nums}

/* Hairline divider with a gradient falloff (not a flat 1px line) */
.s3-hairline{height:1px; border:0; background:linear-gradient(90deg,transparent,var(--border-strong) 15%,var(--border-strong) 85%,transparent)}
.s3-brackets::before,.s3-brackets::after{content:''; position:absolute; width:14px; height:14px; pointer-events:none; opacity:.5}
.s3-brackets::before{top:10px; left:10px; border-top:1px solid var(--accent); border-left:1px solid var(--accent)}
.s3-brackets::after{bottom:10px; right:10px; border-bottom:1px solid var(--accent); border-right:1px solid var(--accent)}

/* Live status dot with a breathing halo */
.s3-live{display:inline-flex; align-items:center; gap:7px; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.s3-live::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 0 rgba(207,254,37,.6); animation:s3-pulse 2.4s infinite}
@keyframes s3-pulse{0%{box-shadow:0 0 0 0 rgba(207,254,37,.5)}70%{box-shadow:0 0 0 7px rgba(207,254,37,0)}100%{box-shadow:0 0 0 0 rgba(207,254,37,0)}}
.s3-ticks i:nth-child(5n+1){height:11px; background:var(--accent); opacity:.7}

@media (prefers-reduced-motion:reduce){
  body.s3-body::after{animation:none}
  .s3-live::before{animation:none}
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body.s3-body{
  margin:0; background:var(--bg); color:var(--text); font-family:var(--font);
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  /* Tabular + slashed zero: numbers stop jittering while counters animate and
     read like an instrument panel. Space Grotesk ships both features. */
  font-variant-numeric:tabular-nums slashed-zero;
  font-feature-settings:"tnum","zero";
}
a{color:inherit; text-decoration:none}
img{max-width:100%; height:auto; display:block}
h1,h2,h3,h4{margin:0; font-weight:500; letter-spacing:-.03em; line-height:1.08}
p{margin:0}
.s3-icon{display:inline-block; vertical-align:middle}
.s3-skip{position:absolute; left:-9999px}
.s3-skip:focus{left:16px; top:16px; z-index:1000; background:var(--accent); color:#000; padding:8px 14px; border-radius:8px}

.s3-container{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); width:100%}

/* Typography scale */
.s3-h1{font-size:clamp(40px,7vw,74px); letter-spacing:-.045em}
.s3-h2{font-size:clamp(30px,4.4vw,50px); letter-spacing:-.035em}
.s3-lede{color:var(--muted); font-size:clamp(16px,1.6vw,19px); max-width:64ch}

/* Buttons — pills */
.s3-btn{display:inline-flex; align-items:center; gap:9px; font-family:var(--font); font-size:16px;
  font-weight:500; padding:13px 26px; border-radius:var(--r-pill); border:1px solid transparent;
  cursor:pointer; transition:transform .18s var(--ease-out), background .2s var(--ease-quick), border-color .2s var(--ease-quick), box-shadow .25s var(--ease-out); white-space:nowrap}
.s3-btn:hover{transform:translateY(-1px)}
.s3-btn-primary{background:var(--accent); color:var(--accent-ink); font-weight:600; box-shadow:0 8px 30px -10px rgba(207,254,37,.55)}
.s3-btn-primary:hover{background:#d9ff45; box-shadow:0 12px 40px -10px rgba(207,254,37,.7)}
.s3-btn-ghost{background:transparent; color:#fff; border-color:var(--border-strong)}
.s3-btn-ghost:hover{background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.3)}

/* Section scaffolding */
.s3-section{padding:clamp(64px,8vw,var(--pad-base)) 0}
.s3-sec-head{max-width:640px; margin-bottom:52px}
.s3-align-center .s3-lede{margin-inline:auto}
.s3-sec-head .s3-eyebrow{margin-bottom:18px}
.s3-sec-head .s3-h2{margin-bottom:16px}
.s3-sec-head-row .s3-sec-head{margin-bottom:0}

/* Reveal on scroll (GSAP drives it; class is a no-JS fallback) */
.s3-reveal{opacity:0; transform:translateY(22px); will-change:opacity,transform}
.s3-reveal.is-in{opacity:1; transform:none}
.s3-anim{opacity:0}
html.no-js .s3-reveal,.no-gsap .s3-reveal,html.no-js .s3-anim,.no-gsap .s3-anim{opacity:1; transform:none}

/* ============================ NAV ============================ */
.s3-nav{position:sticky; top:0; z-index:100; padding:18px 0; transition:background .3s ease, padding .3s ease, border-color .3s ease; border-bottom:1px solid transparent}
.s3-nav.is-scrolled{background:rgba(1,1,4,.72); backdrop-filter:saturate(160%) blur(14px); border-bottom-color:var(--border); padding:12px 0}
/* Full-bleed nav: spans the viewport, only the inner padding holds it off the edge. */
.s3-nav-inner{display:flex; align-items:center; justify-content:space-between; gap:24px;
  width:100%; max-width:none; padding-inline:clamp(20px,3.5vw,52px)}
.s3-logo{display:inline-flex; align-items:center; gap:10px; font-weight:700; font-size:20px; letter-spacing:-.03em}
.s3-nav-links{flex:1; display:flex; justify-content:center}
.s3-menu{display:flex; gap:6px; list-style:none; margin:0; padding:0}
.s3-menu a{display:block; padding:8px 14px; border-radius:var(--r-pill); font-size:15.5px; color:var(--muted); transition:color .2s, background .2s}
.s3-menu a:hover, .s3-menu .current-menu-item>a{color:#fff; background:rgba(255,255,255,.06)}
.s3-nav-actions{display:flex; align-items:center; gap:10px}
.s3-nav-icon{position:relative; display:grid; place-items:center; width:40px; height:40px; border-radius:50%; color:var(--muted); transition:color .2s, background .2s}
.s3-nav-icon:hover{color:#fff; background:rgba(255,255,255,.06)}
.s3-cart-count{position:absolute; top:2px; right:2px; min-width:16px; height:16px; padding:0 4px; border-radius:9px;
  background:var(--accent); color:#000; font-size:10px; font-weight:700; display:grid; place-items:center; line-height:1}
/* Token balance readout — a live instrument, so it gets the accent. */
.s3-credits{display:inline-flex; align-items:center; gap:7px; padding:7px 8px 7px 13px; border-radius:var(--r-pill);
  background:rgba(207,254,37,.08); border:1px solid rgba(207,254,37,.22); color:#fff;
  transition:border-color .2s var(--ease-quick), background .2s var(--ease-quick)}
.s3-credits:hover{background:rgba(207,254,37,.14); border-color:rgba(207,254,37,.45)}
.s3-credits svg{color:var(--accent)}
.s3-credits-val{font-size:14.5px; font-weight:600; color:var(--accent); line-height:1}
.s3-credits-label{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.s3-credits-plus{display:grid; place-items:center; width:20px; height:20px; border-radius:50%;
  background:var(--accent); color:#010104; font-size:14px; font-weight:700; line-height:1}
@media (max-width:900px){ .s3-credits-label{display:none} }
@media (max-width:640px){ .s3-credits{padding:6px 6px 6px 10px} .s3-credits-plus{display:none} }

.s3-nav-login{color:var(--muted); font-size:15.5px; padding:8px 10px}
.s3-nav-login:hover{color:#fff}
.s3-nav-toggle{display:none; background:none; border:0; color:#fff; cursor:pointer; padding:6px}
.s3-hero-badge:hover{border-color:rgba(207,254,37,.4); color:#fff}
.s3-hero-link:hover{color:var(--accent); text-decoration-color:var(--accent)}
.s3-slide-col{overflow:hidden}
.s3-slide-track{display:flex; flex-direction:column; gap:16px; will-change:transform}
.s3-slide:hover{border-color:rgba(207,254,37,.5)}
.s3-slide-img{display:block; aspect-ratio:1; background-size:cover; background-position:center}

@media (max-width:900px){
  .s3-hero-inner{grid-template-columns:1fr}
  .s3-hero-copy{max-width:none}
  .s3-hero-slider{height:340px; grid-template-columns:1fr 1fr}
  .s3-wave{height:60%; opacity:.6}
}

/* Bento: deliberately uneven so the grid stops reading as a template. */
.s3-bento{grid-template-columns:repeat(6,1fr); grid-auto-rows:minmax(168px,auto); gap:14px}
.s3-bento .s3-feature:nth-child(1){grid-column:span 3; grid-row:span 2; display:flex; flex-direction:column; justify-content:flex-end}
.s3-bento .s3-feature:nth-child(1) h3{font-size:26px}
.s3-bento .s3-feature:nth-child(2){grid-column:span 3}
.s3-bento .s3-feature:nth-child(3){grid-column:span 3}
.s3-bento .s3-feature:nth-child(4){grid-column:span 2}
.s3-bento .s3-feature:nth-child(5){grid-column:span 2}
.s3-bento .s3-feature:nth-child(6){grid-column:span 2}
@media (max-width:900px){
  .s3-bento{grid-template-columns:repeat(2,1fr)}
  .s3-bento .s3-feature,.s3-bento .s3-feature:nth-child(n){grid-column:span 1; grid-row:auto}
}
@media (max-width:560px){
  .s3-bento{grid-template-columns:1fr}
}
.s3-spec{background:linear-gradient(180deg,#0d0d13,#08080d); padding:22px 24px; display:flex; flex-direction:column; gap:7px}
.s3-spec b{font-size:15px; font-weight:500; color:var(--text)}
@media (max-width:820px){ .s3-spec-strip{grid-template-columns:repeat(2,1fr)} }
@media (max-width:480px){ .s3-spec-strip{grid-template-columns:1fr} }
.s3-feature:hover{border-color:rgba(255,255,255,.2); transform:translateY(-2px)}
.s3-workflow>.s3-container{position:relative}
.s3-step:hover{border-color:rgba(255,255,255,.2); transform:translateY(-2px)}
.s3-step-art::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 45%,#0b0b12)}
.s3-step-body{padding:22px 24px 26px; position:relative; margin-top:-34px; z-index:1}
.s3-use:hover{border-color:rgba(207,254,37,.35); transform:translateY(-3px)}
.s3-use-art::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(11,11,18,.95))}
.s3-use-body{padding:0 20px 22px; margin-top:-42px; position:relative; z-index:1}
.s3-use-body h3{font-size:17px; margin-bottom:6px}
.s3-use-body p{color:var(--muted); font-size:13.5px}
@media (max-width:960px){ .s3-use-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:520px){ .s3-use-grid{grid-template-columns:1fr} }
.s3-quote figcaption span:last-child{display:flex; flex-direction:column; line-height:1.3}
.s3-faq-item{border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface-1); overflow:hidden}
.s3-faq-q{width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 24px;
  background:none; border:0; color:#fff; font-family:var(--font); font-size:17px; font-weight:500; text-align:left; cursor:pointer}
.s3-faq-plus::before,.s3-faq-plus::after{content:''; position:absolute; background:var(--accent); border-radius:2px; transition:transform .25s}
.s3-faq-plus::before{left:0; top:7px; width:16px; height:2px}
.s3-faq-plus::after{left:7px; top:0; width:2px; height:16px}
.s3-faq-item.is-open .s3-faq-plus::after{transform:scaleY(0)}
.s3-faq-a{max-height:0; overflow:hidden; transition:max-height .3s ease}
.s3-faq-a p{padding:0 24px 22px; color:var(--muted); font-size:15.5px}
.s3-cta-has-bg::before{content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(3,3,8,.86),rgba(3,3,8,.72))}
.s3-cta-card .s3-h2{position:relative; max-width:18ch; margin:0 auto 16px}
.s3-cta-card .s3-lede{position:relative; margin:0 auto 30px}
.s3-footer-col a{color:var(--muted); font-size:15.5px}
.s3-footer-col a:hover{color:var(--accent)}

/* ============================ BLOG / PAGES ============================ */
.s3-page{padding:clamp(48px,7vw,90px) 0}
.s3-page-head{margin-bottom:44px}
.s3-page-head .s3-h1{margin-bottom:14px}
.s3-post-lead .s3-post-title{font-size:30px; letter-spacing:-.03em; line-height:1.12}
.s3-post-lead .s3-post-body{padding:26px 28px 28px}
.s3-post-card:hover{border-color:rgba(207,254,37,.35); transform:translateY(-3px)}
.s3-post-thumb img{width:100%; height:100%; object-fit:cover}
.s3-post-body{padding:22px}
.s3-post-title{font-size:18px; margin-bottom:8px; line-height:1.28; letter-spacing:-.015em}
.s3-post-title a:hover{color:var(--accent)}
.s3-pagination .page-numbers.current{background:var(--accent); color:#000; border-color:var(--accent)}
.s3-empty{text-align:center; color:var(--faint); padding:80px 0; display:flex; flex-direction:column; align-items:center; gap:14px}

/* ============================ RESPONSIVE ============================ */
@media (max-width:960px){
  .s3-feature-grid,.s3-steps,.s3-quotes,.s3-pricing,.s3-post-grid{grid-template-columns:repeat(2,1fr)}
  .s3-post-lead{grid-column:span 2; grid-row:auto}
  .s3-model-grid{grid-template-columns:repeat(2,1fr)}
  .s3-stats{grid-template-columns:repeat(2,1fr)}
  .s3-footer-grid{grid-template-columns:1fr 1fr}
  .s3-hero-visual{display:none}
}
@media (max-width:768px){
  .s3-post-lead{grid-column:span 1}
  .s3-nav-links{position:fixed; inset:64px 0 auto 0; flex-direction:column; background:rgba(3,3,7,.97);
    backdrop-filter:blur(16px); border-bottom:1px solid var(--border); padding:14px; transform:translateY(-140%); transition:transform .3s ease; z-index:99}
  .s3-nav.is-open .s3-nav-links{transform:none}
  .s3-menu{flex-direction:column; width:100%}
  .s3-menu a{padding:12px 14px}
  .s3-nav-toggle{display:grid; place-items:center}
  .s3-nav-cta,.s3-nav-login{display:none}
  .s3-feature-grid,.s3-steps,.s3-quotes,.s3-pricing,.s3-post-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .s3-stats,.s3-model-grid,.s3-footer-grid{grid-template-columns:1fr}
  .s3-price-popular{order:-1}
}
@media (prefers-reduced-motion:reduce){
  .s3-reveal{opacity:1; transform:none; transition:none}
  .s3-hero-card{animation:none}
}

/* =========================================================================
   MARKETPLACE (WooCommerce, fully re-skinned)
   ========================================================================= */
.s3-shop{padding:clamp(40px,6vw,72px) 0 clamp(64px,9vw,110px)}
.s3-shop-hero .s3-h1{margin-bottom:12px}
.woocommerce-ordering select, .s3-shop select{
  background:var(--surface-2); color:#fff; border:1px solid var(--border); border-radius:var(--r-pill);
  padding:9px 16px; font-family:var(--font); font-size:14.5px; cursor:pointer}

/* Product grid + card */
ul.products{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.s3-model-card:hover{border-color:var(--border-strong); transform:translateY(-4px)}
.s3-model-thumb img{width:100%; height:100%; object-fit:cover; transition:transform .5s var(--ease-out)}
.s3-model-card:hover .s3-model-thumb img{transform:scale(1.05)}
.s3-model-body{padding:18px 18px 20px}
.s3-model-title a:hover{color:var(--accent)}
.s3-model-add:hover{transform:scale(1.08); background:#d9ff45}
.s3-model-add.loading{opacity:.6}
.s3-model-add.added{background:#8fe36a}
.s3-product-gallery img{width:100%; height:100%; object-fit:contain}

/* Woo add-to-cart form on single */
form.cart{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:8px}
.quantity input.qty{width:72px; background:var(--surface-3); border:1px solid var(--border); border-radius:var(--r-sm); color:#fff; padding:12px; font-family:var(--font); text-align:center}
.single_add_to_cart_button, button.button, .button, input.button, a.button{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--accent); color:#000 !important;
  border:0; border-radius:var(--r-pill); font-family:var(--font); font-weight:600; font-size:16px; padding:14px 28px; cursor:pointer; transition:background .2s, transform .15s}
.button:hover, .single_add_to_cart_button:hover{background:#d9ff45; transform:translateY(-1px)}
.button.alt, .checkout-button{background:var(--accent)}
.woocommerce table.shop_table{width:100%; border-collapse:collapse; border:1px solid var(--border); border-radius:var(--r-card); overflow:hidden; background:var(--surface-1)}
.woocommerce table.shop_table th{background:var(--surface-2); color:var(--faint); text-transform:uppercase; font-size:12.5px; letter-spacing:.04em; text-align:left; padding:16px}
.woocommerce table.shop_table td{padding:16px; border-top:1px solid var(--border); color:var(--muted)}
.woocommerce table.shop_table td.product-name a{color:#fff; font-weight:500}
.cart_totals table, .woocommerce-checkout-review-order-table{background:var(--surface-1)}
.woocommerce .cart-collaterals{margin-top:28px}
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],textarea,select,.select2-container .select2-selection{
  background:var(--surface-3) !important; border:1px solid var(--border) !important; border-radius:var(--r-sm) !important; color:#fff !important; padding:12px 14px !important; font-family:var(--font) !important}
label{color:var(--muted)}
.woocommerce form .form-row{margin-bottom:14px}
h1,h2{color:#fff}

/* ============================ ACCOUNT (white-label dashboard) ============================ */
.s3-account{padding:clamp(36px,5vw,64px) 0 clamp(60px,8vw,100px)}
.s3-account-head{margin-bottom:32px}
.s3-account-head .s3-h1{font-size:clamp(30px,4vw,44px)}
.woocommerce-account .woocommerce{display:grid; grid-template-columns:250px 1fr; gap:28px}
.woocommerce-MyAccount-navigation ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px;
  background:var(--surface-1); border:1px solid var(--border); border-radius:var(--r-card); padding:12px}
.woocommerce-MyAccount-navigation li a{display:block; padding:11px 14px; border-radius:var(--r-md); color:var(--muted); font-size:15px; transition:background .2s, color .2s}
.woocommerce-MyAccount-navigation li a:hover{background:var(--surface-3); color:#fff}
.woocommerce-MyAccount-navigation li.is-active a{background:rgba(207,254,37,.12); color:var(--accent)}
.woocommerce-MyAccount-content{background:var(--surface-1); border:1px solid var(--border); border-radius:var(--r-card); padding:28px}
.woocommerce-MyAccount-content h2,.woocommerce-MyAccount-content h3{color:#fff; margin-bottom:14px}
.woocommerce-MyAccount-content a:not(.s3-btn):not(.button):not(.s3-dl-file){color:var(--accent)}
.woocommerce-MyAccount-content a.s3-btn-primary{color:var(--accent-ink)}
.woocommerce-MyAccount-navigation{align-self:start}

/* Sidebar balance widget */
.s3-acct-balance{display:block; margin-top:14px; padding:16px 18px; border-radius:var(--r-card);
  background:linear-gradient(135deg,rgba(207,254,37,.14),rgba(207,254,37,.04)); border:1px solid rgba(207,254,37,.25); color:#fff !important}
.s3-acct-balance-label{display:block; font-size:12.5px; color:var(--muted)}
.s3-acct-balance-val{display:flex; align-items:center; gap:6px; font-size:26px; font-weight:700; color:var(--accent); margin-top:2px}
.s3-dash-hello{font-size:26px; margin-bottom:4px}
.s3-dash-sub{color:var(--faint); font-size:12.5px; margin:0}
.s3-meter-value .s3-num{font-size:44px; font-weight:600; letter-spacing:-.03em; line-height:1; color:var(--accent)}
.s3-meter-bar i.is-on{background:var(--accent); box-shadow:0 0 8px rgba(207,254,37,.35)}
.s3-spark{display:flex; align-items:flex-end; gap:2px; height:38px; margin-top:4px}
.s3-spark i{flex:1; background:linear-gradient(180deg,var(--accent),rgba(207,254,37,.25)); border-radius:1px; min-height:3px}

/* Panels */
.s3-dash-cols{display:grid; grid-template-columns:1.25fr 1fr; gap:16px; margin-bottom:20px}
.s3-dash-panel-head a{font-size:13px; color:var(--accent) !important}
.s3-job{display:flex; flex-direction:column; gap:6px; color:#fff !important}
.s3-job-thumb{position:relative; display:grid; place-items:center; aspect-ratio:1; border-radius:12px; overflow:hidden;
  background:radial-gradient(circle at 50% 40%,#191c26,#0a0b10) center/cover; border:1px solid var(--border); color:var(--faint)}
.s3-job:hover .s3-job-thumb{border-color:var(--accent)}
.s3-job-status{position:absolute; right:7px; top:7px; width:7px; height:7px; border-radius:50%; background:var(--faint)}
.s3-job-status.s3-st-completed{background:var(--accent); box-shadow:0 0 0 3px rgba(207,254,37,.15)}
.s3-job-status.s3-st-processing,.s3-job-status.s3-st-queued{background:#38bdf8; box-shadow:0 0 0 3px rgba(56,189,248,.15)}
.s3-job-status.s3-st-failed{background:#ff5c7a}
.s3-job-name{font-size:12.5px; line-height:1.3}
.s3-job-meta{font-size:10.5px; color:var(--faint)}

/* Activity feed */
.s3-feed{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.s3-feed li{display:flex; align-items:center; gap:11px; padding:11px 0; border-bottom:1px solid var(--border)}
.s3-feed li:last-child{border-bottom:0}
.s3-feed-body{flex:1; display:flex; flex-direction:column; line-height:1.35}
.s3-feed-body b{font-size:14px; font-weight:500}
.s3-feed-body em{font-style:normal; font-size:11px; color:var(--faint)}
.s3-feed-amt{font-size:14px; font-weight:600}
.s3-feed-amt.is-in{color:var(--accent)} .s3-feed-amt.is-out{color:var(--muted)}

/* Plugin's 3D Studio tab hero — themed (was a purple gradient) */
.meshy-account-hero{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:22px 24px; margin-bottom:24px; border-radius:var(--r-card); border:1px solid rgba(207,254,37,.28);
  background:linear-gradient(135deg,rgba(207,254,37,.14),rgba(207,254,37,.03))}
.meshy-account-hero-label{font-family:var(--mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.meshy-account-hero-value{font-size:36px; font-weight:700; line-height:1.05; color:var(--accent); font-variant-numeric:tabular-nums}
.meshy-account-hero-cta{display:inline-flex; align-items:center; gap:8px; background:var(--accent); color:#010104 !important;
  font-weight:600; padding:12px 24px; border-radius:var(--r-pill)}
.meshy-account-hero-cta:hover{background:#d9ff45}

@media (max-width:900px){
  .s3-meter{grid-template-columns:1fr}
  .s3-meter-side{padding-left:0; border-left:0; border-top:1px solid var(--border); padding-top:16px}
  .s3-dash-cols{grid-template-columns:1fr}
}
.s3-dash-action:hover{border-color:var(--accent); transform:translateY(-2px)}
.s3-dash-action-body{flex:1; display:flex; flex-direction:column; line-height:1.3}
.s3-dash-action-body strong{font-size:15.5px; font-weight:600}
.s3-dash-action-body em{font-style:normal; font-size:13px; color:var(--muted)}
.s3-dash-action>svg:last-child{color:var(--faint)}
.s3-dash-recent-head a{font-size:14px; color:var(--accent) !important}
.s3-dash-order:hover{border-color:var(--border-strong)}
@media (max-width:900px){
  .s3-dash-stats{grid-template-columns:repeat(2,1fr)}
  .s3-dash-actions{grid-template-columns:1fr}
}
@media (max-width:520px){
  .s3-dash-stats{grid-template-columns:1fr}
  .s3-dash-order{grid-template-columns:1fr auto; gap:6px 12px}
}

/* Studio (SPA) app page — full bleed */
.s3-studio-app{width:100%}
.s3-studio-app .wp-block-group,.s3-studio-app .alignfull{max-width:none; width:100%; margin:0}
.s3-studio-app .meshy-studio-root,.s3-studio-app #meshy-studio-root{width:100%}

/* =========================================================================
   CONTENT PAGES (features / pricing / about / contact)
   ========================================================================= */
.s3-pg{overflow:hidden}
.s3-pg-hero{position:relative; padding:clamp(56px,8vw,96px) 0 clamp(24px,4vw,40px); text-align:center}
.s3-pg-hero::before{content:''; position:absolute; width:520px; height:420px; left:50%; top:-120px; transform:translateX(-50%);
  background:radial-gradient(circle,rgba(207,254,37,.18),transparent 62%); filter:blur(60px); pointer-events:none}
.s3-pg-hero .s3-h1{margin:18px 0 16px; position:relative}
.s3-pg-hero .s3-eyebrow{position:relative}
.s3-feature-row-text .s3-h2{margin-bottom:14px}
.s3-fv-has-art::after{content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(1,1,4,.35),transparent 40%,rgba(1,1,4,.5))}
.s3-fv-cube::before{content:''; position:absolute; inset:18%; border:1.5px solid rgba(var(--fv),.4); border-radius:6px}

/* Cost table */
.s3-cost-table{display:flex; flex-direction:column; gap:10px}
.s3-contact-card a{color:var(--accent); font-size:14px}
.s3-contact-form input,.s3-contact-form textarea{background:var(--surface-3); border:1px solid var(--border); border-radius:var(--r-sm);
  color:#fff; padding:12px 14px; font-family:var(--font); font-size:15px}
.s3-contact-form input:focus,.s3-contact-form textarea:focus{outline:none; border-color:var(--accent)}
.s3-contact-form .s3-btn{align-self:flex-start; margin-top:4px}

@media (max-width:860px){
  .s3-feature-row{grid-template-columns:1fr; gap:28px}
  .s3-row-rev .s3-feature-row-text{order:0}
  .s3-contact{grid-template-columns:1fr}
  .s3-form-row{grid-template-columns:1fr}
}

/* =========================================================================
   MY ACCOUNT — all sections
   ========================================================================= */
.woocommerce-account .woocommerce{grid-template-columns:250px minmax(0,1fr)}
.s3-account .s3-container{max-width:1400px}

/* My models */
.s3-dl-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:14px}
.s3-dl{display:flex; gap:14px; padding:14px; border:1px solid var(--border); border-radius:var(--r-card);
  background:linear-gradient(180deg,#0e0e15,#08080d); transition:border-color .25s var(--ease-out)}
.s3-dl:hover{border-color:var(--border-strong)}
.s3-dl-thumb{display:grid; place-items:center; width:88px; height:88px; flex-shrink:0; border-radius:10px;
  background:radial-gradient(circle at 50% 40%,#191c26,#0a0b10) center/cover; border:1px solid var(--border); color:var(--faint)}
.s3-dl-body{flex:1; min-width:0}
.s3-dl-body h3{font-size:15px; margin-bottom:3px; line-height:1.25}
.s3-dl-body h3 a{color:#fff}
.s3-dl-body h3 a:hover{color:var(--accent)}
.s3-dl-files{display:flex; flex-wrap:wrap; gap:5px}
.s3-dl-file{display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:10.5px;
  color:var(--accent); background:rgba(207,254,37,.09); border:1px solid rgba(207,254,37,.22);
  padding:5px 9px; border-radius:6px; transition:background .2s var(--ease-quick)}
.s3-dl-file:hover{background:rgba(207,254,37,.18)}

/* Orders table */
.woocommerce-orders-table{width:100%; border-collapse:separate; border-spacing:0 8px}
.woocommerce-orders-table thead th{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint); text-align:left; padding:0 16px 4px; background:none; border:0}
.woocommerce-orders-table tbody tr{background:linear-gradient(180deg,#0e0e15,#08080d)}
.woocommerce-orders-table tbody td{padding:15px 16px; border:1px solid var(--border); border-left:0; border-right:0; color:var(--muted)}
.woocommerce-orders-table tbody td:first-child{border-left:1px solid var(--border); border-radius:var(--r-card) 0 0 var(--r-card)}
.woocommerce-orders-table tbody td:last-child{border-right:1px solid var(--border); border-radius:0 var(--r-card) var(--r-card) 0}
.woocommerce-orders-table__cell-order-number a{color:#fff; font-weight:600}

/* Forms: addresses + settings */
.woocommerce-MyAccount-content form{max-width:760px}
.woocommerce-MyAccount-content h2,.woocommerce-MyAccount-content h3{font-size:18px; margin-bottom:16px}
.woocommerce-MyAccount-content fieldset{border:1px solid var(--border); border-radius:var(--r-card); padding:20px; margin:22px 0}
.woocommerce-MyAccount-content legend{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--faint); padding:0 8px}
.woocommerce-MyAccount-content .form-row{margin-bottom:16px}
.woocommerce-MyAccount-content label{display:block; font-size:12.5px; color:var(--muted); margin-bottom:6px}
.woocommerce-MyAccount-content .woocommerce-Button,
.woocommerce-MyAccount-content button[type=submit]{margin-top:6px}
.woocommerce-Addresses{display:grid; grid-template-columns:repeat(2,1fr); gap:14px}
.woocommerce-Address{padding:20px; border:1px solid var(--border); border-radius:var(--r-card);
  background:linear-gradient(180deg,#0e0e15,#08080d)}
.woocommerce-Address address{font-style:normal; color:var(--muted); font-size:14px; line-height:1.7}

@media (max-width:820px){
  .woocommerce-Addresses{grid-template-columns:1fr}
}

/* Prose (pages / posts) */
.s3-prose{color:var(--muted); font-size:17px; line-height:1.75}
.s3-prose h2{color:#fff; font-size:28px; margin:36px 0 14px}
.s3-prose h3{color:#fff; font-size:22px; margin:28px 0 10px}
.s3-prose p{margin:0 0 18px}
.s3-prose a{color:var(--accent)}
.s3-prose ul,.s3-prose ol{margin:0 0 18px; padding-left:22px}
.s3-prose li{margin-bottom:8px}
.s3-prose img{border-radius:var(--r-card); margin:24px 0}
.s3-prose blockquote{border-left:3px solid var(--accent); padding-left:20px; margin:24px 0; color:#fff}
.s3-post-nav a:hover{color:var(--accent)}
/* Full-bleed marketplace: it should read as an app, not a shop page. */
.s3-mk-wrap{width:100%; max-width:none; margin-inline:auto; padding-inline:clamp(18px,2.4vw,44px)}
.s3-mk-head .s3-h1{font-size:clamp(32px,5vw,52px); margin-bottom:12px}
/* Filters as a horizontal control bar above the grid. */
.s3-mk-bar{margin-bottom:20px}
.s3-mk-filters.s3-mk-filters-row .s3-check{margin:0; padding:6px 12px 6px 8px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--surface-2)}
.s3-mk-filters.s3-mk-filters-row .s3-price-slider{width:180px}
.s3-mk-filters.s3-mk-filters-row .s3-price-inputs input{width:74px}
.s3-mk-filters.s3-mk-filters-row .s3-filter-actions .s3-btn{padding:9px 20px}
.s3-search-field input{width:100%; background:var(--surface-3); border:1px solid var(--border); border-radius:var(--r-pill); color:#fff; padding:11px 16px; font-family:var(--font); font-size:14.5px}
.s3-search-field input:focus{outline:none; border-color:var(--accent)}
.s3-check{display:flex; align-items:center; gap:10px; padding:7px 8px; margin:0 -8px; border-radius:10px; cursor:pointer; transition:background .15s}
.s3-check:hover{background:var(--surface-3)}
.s3-check input{position:absolute; opacity:0; pointer-events:none}
.s3-check input:checked + .s3-check-box{background:var(--accent); border-color:var(--accent); color:#000}
.s3-check input:checked ~ .s3-check-label{color:#fff}
.s3-chip-check input{position:absolute; opacity:0; pointer-events:none}
.s3-chip-check input:checked + span{background:rgba(207,254,37,.15); color:var(--accent); border-color:rgba(207,254,37,.4)}

/* Dual price slider */
.s3-price-slider{position:relative; height:26px; margin:4px 4px 14px}
.s3-price-track{position:absolute; top:11px; left:0; right:0; height:4px; border-radius:99px; background:var(--surface-3)}
.s3-price-fill{position:absolute; top:0; height:100%; border-radius:99px; background:var(--accent)}
.s3-price-slider input[type=range]{position:absolute; top:0; left:0; width:100%; height:26px; margin:0; background:none; pointer-events:none; -webkit-appearance:none; appearance:none}
.s3-price-slider input[type=range]::-webkit-slider-thumb{pointer-events:auto; -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:#fff; border:3px solid var(--accent); cursor:pointer; box-shadow:0 2px 6px rgba(0,0,0,.4)}
.s3-price-slider input[type=range]::-moz-range-thumb{pointer-events:auto; width:16px; height:16px; border-radius:50%; background:#fff; border:3px solid var(--accent); cursor:pointer}
.s3-price-inputs input{width:100%; background:var(--surface-3); border:1px solid var(--border); border-radius:10px; color:#fff; padding:9px 12px; font-family:var(--font); font-size:14px}
.s3-switch input{position:absolute; opacity:0}
.s3-switch input:checked + .s3-switch-track{background:var(--accent)}
.s3-switch input:checked + .s3-switch-track .s3-switch-dot{transform:translateX(18px); background:#000}
.s3-filter-actions .s3-btn{flex:1; justify-content:center; padding:11px 16px}
.s3-sort select{background:var(--surface-2); color:#fff; border:1px solid var(--border); border-radius:var(--r-pill); padding:9px 14px; font-family:var(--font); font-size:14px; cursor:pointer}
.s3-view-toggle button{background:none; border:0; color:var(--faint); width:34px; height:30px; border-radius:99px; cursor:pointer; display:grid; place-items:center}
.s3-view-toggle button.is-active{background:var(--surface-3); color:#fff}
.s3-mk-chip:hover{border-color:var(--accent); color:var(--accent)}
.s3-mk-chip-clear:hover{color:var(--accent)}

/* Grid respects data-cols */
/* Column counts are chosen so 10 products always fill whole rows:
   5 cols = 2 rows · 2 cols = 5 rows · 1 col = 10 rows. No ragged tail. */
.s3-mk-grid{grid-template-columns:repeat(5,minmax(0,1fr)) !important}
.s3-mk-grid[data-cols='2']{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
.s3-mk-pagination .woocommerce-pagination ul{display:flex; gap:6px; list-style:none; margin:0; padding:0; justify-content:center}
.s3-mk-pagination .page-numbers.current{background:var(--accent); color:#000; border-color:var(--accent)}

@media (max-width:1024px){
  .s3-mk-grid,.s3-mk-grid[data-cols='2']{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media (max-width:900px){
  .s3-mk-filter-btn{display:inline-flex}
  .s3-mk-sidebar{position:fixed; inset:0 auto 0 0; width:min(340px,86vw); z-index:200; transform:translateX(-102%); transition:transform .3s ease; padding:0; overflow-y:auto}
  .s3-mk-sidebar.is-open{transform:none}
  .s3-mk-filters{height:100%; border-radius:0; border:0; border-right:1px solid var(--border)}
  .s3-filter-top{display:flex}
  body.s3-filter-open{overflow:hidden}
  .s3-filter-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:199; opacity:0; visibility:hidden; transition:opacity .3s}
  .s3-filter-backdrop.is-open{opacity:1; visibility:visible}
}
@media (max-width:1080px){
  .s3-mk-grid,.s3-mk-grid[data-cols='2']{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media (max-width:560px){
  .s3-mk-grid,.s3-mk-grid[data-cols='2']{grid-template-columns:1fr !important}
}

/* =========================================================================
   PRODUCT DETAIL PAGE — a 3D workspace: big stage left, buying rail right
   ========================================================================= */
.s3-pdp{padding:0}
.s3-stage.is-fullscreen{border:0}
.s3-mv{width:100%; height:100%; background:transparent; --poster-color:transparent}

/* Viewer toolbar */
.s3-vtools{position:absolute; left:18px; top:50%; transform:translateY(-50%); z-index:3;
  display:flex; flex-direction:column; gap:5px; padding:7px; border-radius:var(--r-pill);
  background:rgba(6,6,12,.7); backdrop-filter:blur(12px); border:1px solid var(--border)}
.s3-vtool{display:grid; place-items:center; width:38px; height:38px; border-radius:50%; border:0; cursor:pointer;
  background:transparent; color:var(--muted); font-family:var(--mono); font-size:12px; font-weight:600;
  transition:background .18s var(--ease-quick), color .18s var(--ease-quick)}
.s3-vtool:hover{background:rgba(255,255,255,.09); color:#fff}
.s3-vtool.is-on{background:rgba(207,254,37,.16); color:var(--accent)}
.s3-vsep{height:1px; margin:3px 8px; background:var(--border)}
.s3-rail-scroll::-webkit-scrollbar{width:8px}
.s3-rail-scroll::-webkit-scrollbar-thumb{background:var(--surface-3); border-radius:99px}
.s3-rail-crumbs a{color:var(--muted)} .s3-rail-crumbs a:hover{color:var(--accent)}
.s3-buy form.cart{display:flex; flex-direction:column; gap:10px; margin:0 0 14px}
.s3-buy .variations{width:100%}
.s3-buy .variations td, .s3-buy .variations th{display:block; padding:0}
.s3-buy .variations label{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin-bottom:6px; display:block}
.s3-buy .variations select{width:100%; background:var(--surface-3); border:1px solid var(--border); border-radius:var(--r-sm);
  color:#fff; padding:11px 13px; font-family:var(--font); font-size:14.5px}
.s3-buy .quantity{display:none}
.s3-kv{margin:0; border:1px solid var(--border); border-radius:var(--r-card); overflow:hidden}
.s3-kv>div{display:flex; justify-content:space-between; gap:14px; padding:10px 14px; border-bottom:1px solid var(--border)}
.s3-kv>div:last-child{border-bottom:0}
.s3-kv>div:nth-child(odd){background:rgba(255,255,255,.014)}
.s3-kv dt{margin:0; font-size:13.5px; color:var(--muted)}
.s3-kv dd{margin:0; font-size:13.5px; color:#fff}

@media (max-width:1100px){
  .s3-pdp-shell{grid-template-columns:1fr; height:auto}
  .s3-stage{height:min(62vh,560px); border-right:0; border-bottom:1px solid var(--border)}
  .s3-rail-scroll{height:auto; overflow:visible; padding:24px 20px 40px}
  .s3-vtools{flex-direction:row; left:50%; top:auto; bottom:16px; transform:translateX(-50%)}
  .s3-vsep{width:1px; height:auto; margin:8px 3px}
  .s3-stage-hint{display:none}
}

/* =========================================================================
   MARKETPLACE CARD
   ========================================================================= */
.s3-model-body{padding:14px 15px 16px; display:flex; flex-direction:column; gap:0}
.s3-model-title a:hover{color:var(--accent)}

/* Hovering the grid dims the rest so one card leads */
@media (hover:hover){
  .s3-mk-grid:hover .s3-model-card{opacity:.55; transition:opacity .3s var(--ease-out)}
  .s3-mk-grid:hover .s3-model-card:hover{opacity:1}
}

/* Default WooCommerce single-product structure, reskinned (no template override) */
.woocommerce div.product{display:grid; grid-template-columns:1.1fr 1fr; gap:44px; align-items:start}
.woocommerce div.product .woocommerce-product-gallery{margin:0; border-radius:var(--r-card); overflow:hidden;
  border:1px solid var(--border); background:radial-gradient(circle at 50% 35%,#1a1d29,#0a0b10)}
.woocommerce div.product .woocommerce-product-gallery img{border-radius:0}
.woocommerce div.product .product_title{font-size:clamp(28px,3.6vw,42px); letter-spacing:-.035em; margin:6px 0 12px}
.woocommerce div.product p.price, .woocommerce div.product span.price{color:#fff; font-size:30px; font-weight:600; margin-bottom:20px}
.woocommerce div.product p.price del{color:var(--faint); font-weight:400; font-size:20px; margin-right:8px}
.woocommerce div.product p.price ins{text-decoration:none; color:var(--accent)}
.woocommerce div.product .woocommerce-product-details__short-description{color:var(--muted); font-size:16px; margin-bottom:24px}
.woocommerce div.product .product_meta{margin-top:22px; padding-top:20px; border-top:1px solid var(--border); color:var(--faint); font-size:13.5px}
.woocommerce div.product .product_meta a{color:var(--muted)}
.woocommerce-tabs ul.tabs{list-style:none; display:flex; gap:8px; padding:0; margin:0 0 20px; border-bottom:1px solid var(--border)}
.woocommerce-tabs ul.tabs li{margin:0}
.woocommerce-tabs ul.tabs li a{display:block; padding:12px 18px; color:var(--muted); font-weight:500}
.woocommerce-tabs ul.tabs li.active a{color:var(--accent); box-shadow:inset 0 -2px 0 var(--accent)}
.woocommerce-tabs .panel{color:var(--muted)}
.related.products, .upsells.products{grid-column:1 / -1; margin-top:40px}
.related.products>h2, .upsells.products>h2, .cross-sells>h2{font-size:24px; margin-bottom:20px}
.woocommerce div.product .stock{color:var(--accent)}

@media (max-width:960px){
  ul.products{grid-template-columns:repeat(2,1fr)}
  .s3-product, .woocommerce div.product{grid-template-columns:1fr; gap:28px}
  .woocommerce-account .woocommerce{grid-template-columns:1fr}
}
@media (max-width:560px){
  ul.products{grid-template-columns:1fr}
}

/* WooCommerce highlights order number / date / status with <mark>; the browser
   default is a yellow block that fights the dark theme. */
.woocommerce-MyAccount-content mark,
.woocommerce-order mark{background:transparent; color:var(--accent); font-weight:600; padding:0}
.woocommerce-order-details__title,
.woocommerce-column__title,
.woocommerce-MyAccount-content h2{font-size:20px; letter-spacing:-.01em; margin:32px 0 14px}
.woocommerce-MyAccount-content > p{color:var(--muted); margin-bottom:34px}
.woocommerce-table--order-details{width:100%; border-collapse:collapse; margin-bottom:8px}
.woocommerce-table--order-details th,
.woocommerce-table--order-details td{padding:14px 16px; border-bottom:1px solid var(--line); text-align:left}
.woocommerce-table--order-details thead th{font-family:var(--font-mono); font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted)}
.woocommerce-table--order-details tfoot th{font-family:var(--font-mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); font-weight:500}
.woocommerce-table--order-details td:last-child,
.woocommerce-table--order-details th:last-child{text-align:right; font-variant-numeric:tabular-nums}
.woocommerce-customer-details address{font-style:normal; line-height:1.8; color:var(--muted)}

/* ==================== CART + CHECKOUT (WooCommerce Blocks) ====================
   The store runs on the block cart/checkout, so almost none of the classic
   .shop_table rules above ever apply. These do the real work. */

.woocommerce-cart .s3-container,
.woocommerce-checkout .s3-container{max-width:1280px}
.woocommerce-cart .s3-prose,
.woocommerce-checkout .s3-prose{max-width:none}
/* Woo ships these as flex children; inside a grid they shrink to content
   unless we make them fill their track. */
.wc-block-components-main{min-width:0; width:100%; max-width:none; padding:0; flex:none}

@media (max-width:980px){
  .wc-block-components-sidebar-layout{grid-template-columns:1fr}
  .wc-block-components-sidebar{position:static}
}
.wc-block-cart-items__row:last-child td{border-bottom:0}

.wc-block-cart-item__image img,
.wc-block-components-order-summary-item__image img{border-radius:var(--r-card); border:1px solid var(--border);
  background:var(--surface-3); width:76px; height:76px; object-fit:cover}
.wc-block-components-order-summary-item__image img{width:56px; height:56px}
.wc-block-components-product-name:hover{color:var(--accent) !important}
.wc-block-components-quantity-selector input.wc-block-components-quantity-selector__input{
  background:transparent !important; border:0 !important; color:#fff !important; font-family:var(--mono) !important;
  padding:9px 0 !important; text-align:center}
.wc-block-components-quantity-selector__button:hover{color:var(--accent) !important}
.wc-block-cart-item__remove-link:hover{color:#ff8fa3 !important; border-bottom-color:currentColor}

/* ---- CTA ---- */
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button{display:flex; align-items:center; justify-content:center;
  width:100%; background:var(--accent) !important; color:#000 !important; border:0 !important;
  border-radius:var(--r-pill) !important; font-family:var(--font) !important; font-weight:600 !important;
  font-size:16px !important; padding:16px 28px !important; box-shadow:0 0 0 0 rgba(207,254,37,.35);
  transition:background .2s, box-shadow .3s, transform .15s}
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover{background:#d9ff45 !important; transform:translateY(-1px);
  box-shadow:0 8px 30px -8px rgba(207,254,37,.5)}
.wc-block-components-panel__button:hover{color:#fff !important}
.wc-block-components-checkout-step__container::after{display:none}

.wc-block-components-text-input input,
.wc-block-components-country-input input,
.wc-block-components-state-input input,
.wc-block-components-address-form input,
.wc-block-components-combobox input{background:#08080b !important; border:1px solid var(--border) !important;
  border-radius:var(--r-md) !important; color:#fff !important; padding:26px 14px 10px !important;
  font-family:var(--font) !important; font-size:15px !important; transition:border-color .2s}
.wc-block-components-text-input input:focus,
.wc-block-components-combobox input:focus{border-color:rgba(207,254,37,.55) !important;
  box-shadow:0 0 0 3px rgba(207,254,37,.10) !important; outline:none !important}
.wc-block-components-text-input label,
.wc-block-components-combobox label{color:var(--faint) !important; font-size:13px}
.wc-block-components-text-input.is-active label{font-size:11px !important; color:var(--faint) !important}
.wc-block-components-address-form__address_1 + .wc-block-components-address-form__address_2 button,
.wc-block-components-address-form button.wc-block-components-button.is-link{color:var(--accent) !important; font-size:13px}
.wc-block-components-radio-control__option:hover{border-color:var(--border-strong)}
.wc-block-checkout__terms a,
.wc-block-components-checkout-policies a{color:var(--muted); text-decoration:underline; text-underline-offset:3px}
.wc-block-checkout__terms a:hover{color:var(--accent)}
.wp-block-woocommerce-empty-cart-block img,
.wc-block-cart__empty-cart__title.with-image::before{filter:grayscale(1) brightness(.6) invert(1)}

.woocommerce-checkout .wc-block-components-checkout-step{border:1px solid var(--border);
  background:var(--surface-1); border-radius:var(--r-card); padding:24px; margin:0 0 16px}
.woocommerce-checkout .wc-block-components-checkout-step__heading{margin:0 0 6px}
.woocommerce-checkout .wc-block-components-checkout-step__title{font-family:var(--font); font-size:19px;
  letter-spacing:-.01em; text-transform:none; color:#fff; font-weight:500}
.woocommerce-checkout .wc-block-components-checkout-step__container::after{display:none}
.woocommerce-checkout .wc-block-components-address-card{border:1px solid var(--border);
  background:var(--surface-2); border-radius:var(--r-card); padding:16px 18px; color:var(--muted)}
.woocommerce-checkout .wc-block-components-address-card__edit{color:var(--accent)}

/* Empty notice slots reserve height and read as stray bars on a dark theme. */
.wc-block-components-notices:empty,
.wc-block-components-notices__snackbar:empty{display:none}

/* Order summary rows: keep the thumbnail a fixed square with the quantity
   badge pinned to it, instead of stacking above the image. */
.wc-block-components-order-summary-item{gap:14px; padding:14px 0; border-bottom:1px solid var(--border)}
.wc-block-components-order-summary-item:last-child{border-bottom:0}
.wc-block-components-order-summary-item__image img{width:56px !important; height:56px !important;
  object-fit:cover; border-radius:var(--r-card); border:1px solid var(--border); background:var(--surface-3)}

/* Payment accordion: Woo draws the border on the inner content, which clips
   under the label. Move it to the whole option. */
.woocommerce-checkout .wc-block-components-radio-control-accordion-option{border:1px solid var(--border);
  border-radius:var(--r-card); background:var(--surface-2); overflow:hidden; transition:border-color .2s}
.woocommerce-checkout .wc-block-components-radio-control-accordion-option:has(input:checked){
  border-color:rgba(207,254,37,.45); background:rgba(207,254,37,.05)}
.woocommerce-checkout .wc-block-components-radio-control__option{border:0 !important; background:none;
  margin:0; padding:15px 18px 15px 46px !important}
.woocommerce-checkout .wc-block-components-radio-control-accordion-content{border:0; padding:0 18px 16px 46px;
  color:var(--muted); font-size:13.5px; line-height:1.65}

/* ==================== CONTENT PAGES (section-built) ==================== */

.s3-page-sections{padding-bottom:clamp(70px,9vw,130px)}
.s3-page-sections .s3-page-head{max-width:820px; margin-bottom:clamp(44px,6vw,72px)}

.s3-sec{padding:clamp(40px,5vw,64px) 0; border-top:1px solid var(--border)}
.s3-sec:first-of-type{border-top:0; padding-top:0}
.s3-step-item:hover{background:var(--surface-3)}
.s3-step-body h3{font-size:19px; letter-spacing:-.015em; margin-bottom:7px}
.s3-step-body p{color:var(--muted); line-height:1.7; max-width:76ch}
.s3-cards .s3-card{padding:26px 26px 28px; border:1px solid var(--border); border-radius:var(--r-card);
  background:linear-gradient(180deg,#0e0e15,#08080d); box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
  transition:border-color .3s var(--ease-out), transform .3s var(--ease-out)}
.s3-cards .s3-card:hover{border-color:rgba(207,254,37,.35); transform:translateY(-3px)}
.s3-cards .s3-card h3{font-size:18px; letter-spacing:-.015em; margin-bottom:9px}
.s3-cards .s3-card p{color:var(--muted); line-height:1.7; font-size:15px}
.s3-compare-col:last-child{border-color:rgba(207,254,37,.3);
  background:linear-gradient(180deg,rgba(207,254,37,.05),transparent 60%),var(--surface-1)}
.s3-compare-col li::before{content:""; position:absolute; left:0; top:9px; width:7px; height:7px;
  border-radius:1px; background:var(--accent); opacity:.75}
.s3-faq-item{border-bottom:1px solid var(--border); background:var(--surface-1)}
.s3-faq-item:last-child{border-bottom:0}
.s3-faq-item summary{padding:22px 26px; cursor:pointer; font-size:16.5px; font-weight:500; color:#fff;
  list-style:none; position:relative; padding-right:56px; transition:color .2s}
.s3-faq-item summary::-webkit-details-marker{display:none}
.s3-faq-item summary:hover{color:var(--accent)}
.s3-faq-item summary::after{content:""; position:absolute; right:26px; top:50%; width:11px; height:11px;
  margin-top:-7px; border-right:1.5px solid var(--faint); border-bottom:1.5px solid var(--faint);
  transform:rotate(45deg); transition:transform .25s, border-color .2s}
.s3-faq-item[open] summary::after{transform:rotate(-135deg); border-color:var(--accent)}
.s3-faq-item p{padding:0 26px 24px; color:var(--muted); line-height:1.75; max-width:82ch}
.s3-release:first-child{border-top:0; padding-top:0}
.s3-prose-body{color:var(--muted); line-height:1.8; max-width:74ch}

@media (max-width:820px){
  .s3-compare{grid-template-columns:1fr}
  .s3-release{grid-template-columns:1fr; gap:10px}
  .s3-step-item{flex-direction:column; gap:12px}
}
.s3-topbar-right a{color:var(--faint); transition:color .2s}
.s3-topbar-right a:hover{color:var(--accent)}
@media (max-width:900px){ .s3-topbar{display:none} }

/* The nav sits under the strip, so it can't be sticky-at-0 without covering it. */
.s3-nav{top:0; padding:16px 0; background:rgba(1,1,4,.55); backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--border)}
.s3-nav.is-scrolled{padding:11px 0; background:rgba(1,1,4,.86)}
.s3-logo:hover .s3-logo-mark{border-color:rgba(207,254,37,.55); transform:translateY(-1px)}

/* Menu links get a measured underline instead of a pill on hover. */
.s3-menu{display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0}
.s3-menu a{position:relative; display:block; padding:9px 14px; border-radius:0; font-size:15px;
  color:var(--muted); background:none; transition:color .2s}
.s3-menu a::after{content:""; position:absolute; left:14px; right:14px; bottom:2px; height:1px;
  background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .28s var(--ease-out)}
.s3-menu a:hover{background:none; color:#fff}
.s3-menu a:hover::after{transform:scaleX(1)}
.s3-menu .current-menu-item > a{color:#fff}
.s3-menu .current-menu-item > a::after{transform:scaleX(1)}

.s3-credits{padding-inline:14px}
.s3-nav-cta{padding:11px 22px; font-size:15px}
.s3-nav-avatar{display:grid; place-items:center; width:34px; height:34px; overflow:hidden;
  border-radius:50%; border:1px solid var(--border-strong); transition:border-color .2s}
.s3-nav-avatar:hover{border-color:rgba(207,254,37,.55)}
.s3-nav-avatar img{width:100%; height:100%; object-fit:cover; display:block}
/* The section used to sit on flat black; this gives it a surface to live on. */
.s3-caps-bg{position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(90% 60% at 50% -10%, rgba(207,254,37,.07), transparent 60%),
    linear-gradient(180deg, #07070c 0%, #05050a 55%, var(--bg) 100%);
}
.s3-caps-bg::after{content:""; position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(var(--border) 1px, transparent 1px),
                   linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(75% 60% at 50% 30%, #000 0%, transparent 78%);
  -webkit-mask-image:radial-gradient(75% 60% at 50% 30%, #000 0%, transparent 78%)}
.s3-caps > .s3-container{position:relative}
.s3-cap:hover{background:rgba(18,20,14,.92)}

@media (max-width:1000px){
  .s3-caps-grid{grid-template-columns:repeat(2,1fr)}
  .s3-cap.is-lead{grid-column:span 2}
}
@media (max-width:640px){
  .s3-caps-grid{grid-template-columns:1fr}
  .s3-cap.is-lead{grid-column:span 1}
  .s3-cap.is-lead h3{font-size:25px}
}

/* Feature lists lost their tick glyphs; a hairline marker reads calmer and
   stops the page looking like a checklist generator. */
.s3-price-list li,
.s3-plan-list li,
.s3-fv-list li{position:relative; padding-left:18px; color:var(--muted); line-height:1.7}
.s3-price-list li::before,
.s3-plan-list li::before,
.s3-fv-list li::before{content:""; position:absolute; left:0; top:11px; width:8px; height:1px;
  background:var(--accent); opacity:.75}
.s3-math-bg::after{content:""; position:absolute; inset:0;
  background:radial-gradient(70% 50% at 80% 0%, rgba(207,254,37,.06), transparent 65%)}
.s3-math > .s3-container{position:relative}

.s3-math-table{border:1px solid var(--border); border-radius:var(--r-card); overflow:hidden;
  background:var(--surface-1)}
.s3-math-row:first-child{border-top:0}
.s3-math-row:last-child > span.is-us{border-bottom:1px solid rgba(207,254,37,.18)}

@media (max-width:860px){
  .s3-math-table{border:0; background:none}
  .s3-math-row{grid-template-columns:1fr 1fr; border:1px solid var(--border);
    border-radius:var(--r-card); margin-bottom:10px; background:var(--surface-1)}
  .s3-math-head{display:none}
  .s3-math-row .s3-math-k{grid-column:1/-1; border-bottom:1px solid var(--border)}
  .s3-math-row > span.is-us{grid-column:1/-1; border-left:0; border-right:0;
    border-top:1px solid rgba(207,254,37,.18)}
}

/* ---------------------------------------------------------------- studio gate
   Logged-out state of the studio page. For most visitors this is the first
   screen of the product, so it carries the brand rather than reading as a
   plugin notice. */

.meshy-gate{display:grid;place-items:center;min-height:min(62vh,620px);padding:var(--pad-tight) 24px}
.meshy-gate-card{
  width:100%;max-width:520px;padding:44px;border-radius:var(--r-card);
  border:1px solid var(--border);background:
    linear-gradient(180deg,rgba(255,255,255,.028),transparent 46%),var(--surface-2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05);
}
.meshy-gate-kicker{
  display:block;font-family:var(--mono);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);margin-bottom:18px;
}
.meshy-gate-card h2{font-size:34px;line-height:1.05;letter-spacing:-.035em;margin-bottom:12px}
.meshy-gate-card > p{font-size:15px;line-height:1.6;color:var(--muted);max-width:42ch}
.meshy-gate-list{list-style:none;margin:26px 0 30px;padding:0;border-top:1px solid var(--border)}
.meshy-gate-list li{
  position:relative;padding:13px 0 13px 20px;font-size:14px;color:var(--text);
  border-bottom:1px solid var(--border);
}
.meshy-gate-list li::before{
  content:"";position:absolute;left:0;top:19px;width:6px;height:6px;
  background:var(--accent);
}
.meshy-gate-actions{display:flex;flex-wrap:wrap;gap:10px}
.meshy-gate-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:13px 26px;border-radius:999px;font-weight:600;font-size:14px;
  background:var(--accent);color:var(--accent-ink);border:1px solid var(--accent);
  transition:transform .2s var(--ease-out),filter .2s var(--ease-out);
}
.meshy-gate-btn:hover{filter:brightness(1.08);transform:translateY(-1px)}
.meshy-gate-btn.is-ghost{background:none;color:var(--text);border-color:var(--border)}
.meshy-gate-btn.is-ghost:hover{border-color:var(--accent);color:var(--accent)}

@media (max-width:640px){
  .meshy-gate-card{padding:30px 24px}
  .meshy-gate-card h2{font-size:27px}
  .meshy-gate-actions .meshy-gate-btn{flex:1 1 100%}
}

/* ---------------------------------------------------------------- iOS zoom --
   Safari re-scales the whole viewport when a field under 16px takes focus, and
   the reader has to pinch back out to see the rest of the form. The surface
   sheets pin their own fields; this is the backstop for anything they do not
   name — the legacy contact form, the marketplace search field, the plugin's
   own inputs. Desktop keeps the tuned sizes. */

@media (max-width:900px){
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=submit]):not([type=button]),
  textarea,
  select{ font-size:16px }
  .s3-contact-form input,
  .s3-contact-form textarea,
  .s3-search-field input,
  .s3-price-inputs input,
  .s3-sort select,
  .woocommerce-ordering select,
  .s3-shop select{ font-size:16px }

  /* The studio SPA ships its own stylesheet and owns its own type scale, so the
     backstop above is lifted back off it rather than reaching into a surface
     this theme does not maintain. Its fields are 14px and therefore still zoom
     the viewport on iOS — that belongs to whoever owns the React build. */
  #meshy-studio-root input,
  #meshy-studio-root textarea,
  #meshy-studio-root select,
  .meshy-studio-root input,
  .meshy-studio-root textarea,
  .meshy-studio-root select{ font-size:14px }
}