/* ============================================================
   MIZETTO STUDIO'S — DTF T-Shirt Studio
   Global stylesheet (storefront + design studio)

   One stylesheet serves all 9 pages. No build step, no preprocessor —
   plain CSS with custom properties. Search for a banner below to jump.

   MAP  (in file order)
     @import ................ every Google Font the site can use
     :root .................. brand palette, gradients, radius, shadows
     base / layout / header / mega-nav / hero / marquee
     storefront blocks ...... category grid, process steps, studio promo band,
                              pricing tiers, testimonials, Savage Collection,
                              CTA band, footer
     DESIGN STUDIO .......... topbar, tool rail, drawer, canvas, props panel,
                              layers list, order bar   (studio.html only)
     ACCOUNT SYSTEM ......... auth page + dashboard
     THEME UPGRADE PACK ..... marker energy, deco & shell polish
     GRAFFITI FX PACK ....... spray paint, animation, title FX, 3D
     CART & CHECKOUT
     TEMPLATES GALLERY
     MIZETTO UPGRADES ....... theme toggle, LIGHT THEME VARIABLES,
                              transform handles, export dropdown, AI results,
                              homepage section slider

   !! THEMING — every color goes through a var() in :root. The light theme is
     the same variables re-declared under `html.light-theme` in the LIGHT THEME
     VARIABLES block. If you add a new custom property, add its light value
     there too or light mode will inherit the dark one.

   !! FONTS — the @import below is the single source of truth. Adding a font
     means 3 edits total: here, the Fonts drawer in studio.html, and the
     #propFont <option> list. See the header comment in studio.html.

   !! [hidden] — a global `[hidden] { display: none !important; }` rule exists
     on purpose. Component display rules (flex/grid) used to beat the attribute
     and leak hidden panels (the checkout view showed under the cart). Keep it.

   !! HOMEPAGE SLIDER — .sec-slider-track is hardcoded for exactly 6 sections
     (width:600%, children flex:0 0 16.6666%). Adding a section means editing
     both numbers here AND the GROUPS array in js/section-nav.js.

   !! STUDIO TRANSFORMS — rotation, arch and flip deliberately use three
     separate CSS properties (`rotate`, `transform`, `scale`) so they don't
     clobber each other. Don't merge them into one `transform` shorthand.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Permanent+Marker&family=Barlow:wght@400;600;700;800&family=Bebas+Neue&family=Syncopate:wght@700&family=Cinzel+Decorative:wght@700&family=Inter:wght@400;700;900&family=Montserrat:wght@400;700;900&family=Roboto+Mono:wght@400;700&family=Special+Elite&family=Creepster&family=Bungee+Outline&family=Orbitron:wght@500;900&family=UnifrakturMaguntia&family=Press+Start+2P&family=Pacifico&family=Satisfy&family=Outfit:wght@400;700&family=Rajdhani:wght@500;700&family=Silkscreen&family=Metal+Mania&family=Oswald:wght@500;700&family=Fjalla+One&family=Teko:wght@500;700&family=Rowdies:wght@400;700&family=Rye&family=Ewert&family=Graduate&family=Nosifer&family=Pirata+One&family=New+Rocker&family=Bungee&family=Chango&family=Lilita+One&family=Monoton&family=Great+Vibes&family=Kaushan+Script&family=Yellowtail&family=Sacramento&family=Bangers&family=Luckiest+Guy&family=Chewy&family=Fredoka:wght@500;700&family=Playfair+Display:wght@700;900&family=Abril+Fatface&family=DM+Serif+Display&family=Cormorant+Garamond:wght@600&family=Archivo+Black&family=Alfa+Slab+One&family=Titan+One&family=Staatliches&family=Sigmar+One&family=Bungee+Shade&family=Bungee+Inline&family=Vast+Shadow&family=Foldit:wght@600&family=Nabla&family=Rubik+Wet+Paint&family=Rubik+Glitch&family=Rubik+Spray+Paint&family=Kablammo&family=Frijole&family=Righteous&family=Faster+One&family=Black+Ops+One&family=Caveat:wght@600&family=Shadows+Into+Light&family=Rock+Salt&family=Gochi+Hand&family=Patrick+Hand&family=Indie+Flower&family=Lobster&family=Tangerine:wght@700&family=Allura&family=Parisienne&family=Cookie&family=Pinyon+Script&family=Butcherman&family=Eater&family=Lacquer&family=Fredericka+the+Great&family=Sancreek&family=Audiowide&family=Michroma&family=Zen+Dots&family=Turret+Road:wght@700&family=Chakra+Petch:wght@600&family=Iceland&family=Ultra&family=Bevan&family=Squada+One&family=Changa+One&family=Paytone+One&family=Bree+Serif&family=Rubik+Bubbles&family=Rubik+Iso&family=Rubik+Puddles&family=Rubik+Marker+Hatch&family=Rubik+Vinyl&family=Rubik+Maze&display=swap');

:root {
  /* Brand palette — "Savage" grunge streetwear theme */
  --ink: #0a080b;           /* pit black */
  --ink-2: #141118;
  --ink-3: #201b26;
  --paper: #16131a;         /* page background (dark) */
  --card: #1d1922;          /* panels */
  --accent: #d91f26;        /* blood red */
  --accent-2: #f28c1b;      /* molotov orange */
  --accent-3: #e3b341;      /* dirty gold */
  --pink: #ff3d3d;          /* hot red (legacy alias) */
  --text: #f2ede4;          /* bone white */
  --muted: #9a92a4;
  --line: #2e2836;
  --success: #29c46f;
  --danger: #ff4747;

  --grad-hero: linear-gradient(150deg, #0a080b 0%, #241016 45%, #6e1014 80%, #d91f26 130%);
  --grad-accent: linear-gradient(90deg, #d91f26, #f28c1b);
  --radius: 14px;
  --shadow: 0 6px 24px rgba(0, 0, 0, .45);
  --shadow-lg: 0 18px 48px rgba(0, 0, 0, .6);

  --font-display: "Anton", Impact, "Arial Black", sans-serif;
  --font-marker: "Permanent Marker", "Segoe Script", cursive;
  --font-body: "Barlow", "Segoe UI", system-ui, sans-serif;

  /* grunge splatter (inline SVG deco) */
  --splat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220' viewBox='0 0 220 220'%3E%3Cg fill='%23d91f26' fill-opacity='.55'%3E%3Ccircle cx='30' cy='40' r='7'/%3E%3Ccircle cx='52' cy='22' r='3'/%3E%3Ccircle cx='70' cy='58' r='4.5'/%3E%3Ccircle cx='18' cy='75' r='2.5'/%3E%3Cpath d='M95 30 q14 -14 24 2 q-16 2 -24 -2z'/%3E%3C/g%3E%3Cg fill='%23f28c1b' fill-opacity='.4'%3E%3Ccircle cx='170' cy='160' r='6'/%3E%3Ccircle cx='195' cy='140' r='3'/%3E%3Ccircle cx='150' cy='190' r='4'/%3E%3C/g%3E%3Cg fill='%23f2ede4' fill-opacity='.18'%3E%3Ccircle cx='120' cy='110' r='2.5'/%3E%3Ccircle cx='60' cy='150' r='3.5'/%3E%3Ccircle cx='200' cy='60' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background:
    radial-gradient(rgba(217,31,38,.04) 1px, transparent 1px) 0 0 / 26px 26px,
    var(--paper);
  color: var(--text);
  line-height: 1.55;
}

/* Grunge display type everywhere */
h1, h2, h3, .logo-text .name, .tier .price {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 400;
}
.kicker, .section-head .kicker { font-family: var(--font-marker); text-transform: none !important; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img, svg { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }

.wrap { max-width: 1280px; margin: 0 auto; padding: 0 24px; }

/* ---------- Top promo bar ---------- */
.promo-bar {
  background: var(--grad-accent);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  padding: 8px 16px;
  letter-spacing: .6px;
  text-transform: uppercase;
}
.promo-bar b { color: #14090a; background: rgba(255,255,255,.85); border-radius: 4px; padding: 0 6px; }

/* ---------- Utility header ---------- */
.util-bar {
  background: var(--ink);
  color: #b3aab8;
  font-size: 12.5px;
}
.util-bar .wrap {
  display: flex; justify-content: space-between; align-items: center;
  min-height: 34px; gap: 16px;
}
.util-bar a:hover { color: #fff; }
.util-links { display: flex; gap: 18px; }
.util-phone { color: var(--accent-3); font-weight: 600; }

/* ---------- Main header ---------- */
.site-header {
  background: var(--card);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 500;
}
.header-inner {
  display: flex; align-items: center; gap: 28px;
  padding: 14px 0;
}
.logo { display: flex; align-items: center; gap: 10px; }
.logo-mark {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--grad-hero);
  display: grid; place-items: center;
  color: #fff; font-weight: 800; font-size: 20px;
  box-shadow: var(--shadow);
}
.logo-text { line-height: 1.1; }
.logo-text .name { font-size: 20px; font-weight: 800; letter-spacing: -.3px; }
.logo-text .name span { color: var(--accent); }
.logo-text .tag { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 1.6px; }

.search-box {
  flex: 1; display: flex; align-items: center;
  background: var(--paper); border: 1.5px solid var(--line);
  border-radius: 999px; padding: 4px 6px 4px 18px;
  transition: border-color .2s;
}
.search-box:focus-within { border-color: var(--accent); }
.search-box input {
  flex: 1; border: 0; outline: 0; background: transparent;
  font-size: 14px; color: var(--text);
}
.search-box button {
  background: var(--accent); color: #fff; border: 0;
  border-radius: 999px; padding: 9px 20px; font-weight: 600; font-size: 13.5px;
}
.header-actions { display: flex; align-items: center; gap: 20px; }
.h-action { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; color: var(--muted); }
.h-action .ico { font-size: 20px; }
.h-action:hover { color: var(--accent); }
.cart-badge { position: relative; }
.cart-badge::after {
  content: attr(data-count); position: absolute; top: -6px; right: -10px;
  background: var(--pink); color: #fff; font-size: 10px; font-weight: 700;
  min-width: 17px; height: 17px; border-radius: 999px; padding: 0 3px;
  display: grid; place-items: center;
}
.cart-badge:not([data-count])::after, .cart-badge[data-count="0"]::after { display: none; }

/* ---------- Mega nav ---------- */
.mega-nav { background: var(--ink-2); position: relative; z-index: 400; }
.mega-nav .wrap { display: flex; align-items: stretch; }
.nav-item { position: relative; }
.nav-item > a {
  display: flex; align-items: center; gap: 6px;
  color: #d8d3e8; font-size: 13.5px; font-weight: 600;
  padding: 13px 16px; transition: background .15s, color .15s;
}
.nav-item > a .caret { font-size: 9px; opacity: .6; }
.nav-item:hover > a { background: var(--ink-3); color: #fff; }
.nav-item.hot > a { color: #e3b341; }
.nav-item.studio-cta > a {
  background: var(--grad-accent); color: #fff; margin: 6px 0 6px 12px;
  border-radius: 999px; padding: 7px 20px; align-self: center;
}

/* Dropdown panel */
.mega-panel {
  display: none; position: absolute; top: 100%; left: 0;
  background: var(--card); color: var(--text);
  min-width: 760px; border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-lg); padding: 26px 30px;
  grid-template-columns: repeat(3, 1fr); gap: 26px;
}
.nav-item:hover .mega-panel { display: grid; }
.mega-panel.narrow { min-width: 520px; grid-template-columns: repeat(2, 1fr); }
.mega-col h4 {
  font-size: 12px; text-transform: uppercase; letter-spacing: 1.2px;
  color: var(--accent); margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 2px solid var(--line);
}
.mega-col li a {
  display: block; font-size: 13.5px; color: var(--muted);
  padding: 4.5px 0; transition: color .12s, transform .12s;
}
.mega-col li a:hover { color: var(--accent); transform: translateX(3px); }
.mega-col li a .new {
  background: var(--accent-2); color: #fff; font-size: 9.5px; font-weight: 700;
  border-radius: 4px; padding: 1px 5px; margin-left: 6px; vertical-align: middle;
}

/* ---------- Section tab bar (groups + subgroups, swipeable) ---------- */
.sec-nav {
  position: sticky; top: var(--header-h, 73px); z-index: 350;
  background: rgba(12,10,14,.94); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
}
.sec-nav::after {
  content: ""; display: block; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent-2) 70%, transparent);
  opacity: .55;
}
.sec-row { display: flex; align-items: center; gap: 6px; padding: 9px 0 0; }
.sec-arrow {
  flex: none; width: 28px; height: 28px; border-radius: 8px;
  background: var(--card); border: 1.5px solid var(--line); color: var(--text);
  font-size: 15px; line-height: 1; display: grid; place-items: center;
}
.sec-arrow:hover { border-color: var(--accent); color: var(--accent-2); }
.sec-arrow[disabled] { opacity: .25; cursor: default; }
.sec-arrow[disabled]:hover { border-color: var(--line); color: var(--text); }

.sec-tabs, .sec-subs {
  display: flex; gap: 8px; overflow-x: auto; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
  cursor: grab; user-select: none;
}
.sec-tabs::-webkit-scrollbar, .sec-subs::-webkit-scrollbar { display: none; }
.sec-tabs { flex: 1; padding: 2px 2px 9px; }
.sec-subs { padding: 0 0 10px 34px; }
.sec-tabs.dragging, .sec-subs.dragging { cursor: grabbing; scroll-behavior: auto; }

.sec-tab {
  flex: none; white-space: nowrap; border-radius: 999px;
  background: var(--card); border: 1.5px solid var(--line); color: var(--muted);
  font-family: var(--font-display); font-size: 13px; letter-spacing: 1px;
  text-transform: uppercase; padding: 9px 18px;
  transition: color .15s, border-color .15s, background .15s, transform .15s;
}
.sec-tab:hover { color: var(--text); border-color: var(--accent-2); }
.sec-tab.active {
  background: var(--grad-accent); border-color: transparent; color: #fff;
  transform: rotate(-1deg);
  box-shadow: 0 4px 14px rgba(217,31,38,.4);
}
.sec-tab .n {
  font-family: var(--font-body); font-size: 10px; font-weight: 700;
  opacity: .55; margin-left: 6px;
}

.sec-sub {
  flex: none; white-space: nowrap; border-radius: 999px;
  background: transparent; border: 1px solid var(--line); color: var(--muted);
  font-family: var(--font-marker); font-size: 12px; letter-spacing: .3px;
  padding: 5px 13px; transition: all .15s;
}
.sec-sub:hover { color: var(--accent-2); border-color: var(--accent-2); transform: rotate(-2deg); }

/* flash pulse when a subgroup is jumped to */
@keyframes secFlash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(242,140,27,0); }
  25%      { box-shadow: 0 0 0 4px rgba(242,140,27,.85); }
  60%      { box-shadow: 0 0 0 4px rgba(217,31,38,.5); }
}
.sec-flash { animation: secFlash 1.1s ease-out; border-radius: var(--radius); }

@media (max-width: 700px) {
  .sec-arrow { display: none; }
  .sec-subs { padding-left: 2px; }
  .sec-tab { font-size: 11.5px; padding: 8px 14px; }
}

/* ---------- Hero ---------- */
.hero { background: var(--grad-hero); color: #fff; overflow: hidden; position: relative; }
.hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    var(--splat) 4% 12% / 220px no-repeat,
    var(--splat) 92% 80% / 180px no-repeat,
    radial-gradient(600px 300px at 85% 20%, rgba(242,140,27,.20), transparent 60%),
    radial-gradient(500px 260px at 10% 90%, rgba(217,31,38,.28), transparent 60%);
}
.hero .wrap {
  position: relative; display: grid; grid-template-columns: 1.15fr .85fr;
  gap: 40px; align-items: center; padding-top: 64px; padding-bottom: 72px;
}
.hero-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px; padding: 6px 16px; font-size: 12.5px; font-weight: 600;
  margin-bottom: 20px; backdrop-filter: blur(4px);
}
.hero h1 { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.08; letter-spacing: -1px; margin-bottom: 18px; }
.hero h1 .grad {
  background: linear-gradient(90deg, #e3b341, var(--pink));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p.lead { font-size: 17px; color: #d8cfc9; max-width: 520px; margin-bottom: 28px; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  border-radius: 999px; padding: 13px 28px; font-weight: 700; font-size: 14.5px;
  border: 0; transition: transform .15s, box-shadow .15s;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.btn-primary { background: var(--grad-accent); color: #fff; }
.btn-ghost { background: rgba(255,255,255,.1); color: #fff; border: 1.5px solid rgba(255,255,255,.35); }
.btn-dark { background: var(--ink); color: #fff; }
.hero-stats { display: flex; gap: 34px; margin-top: 36px; }
.hero-stats .stat b { display: block; font-size: 24px; }
.hero-stats .stat span { font-size: 12.5px; color: #a89aa0; }

.hero-visual { position: relative; display: grid; place-items: center; }
.hero-shirt-card {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18);
  border-radius: 24px; padding: 28px; backdrop-filter: blur(6px);
  box-shadow: var(--shadow-lg);
}
.hero-chip {
  position: absolute; background: #fff; color: var(--text);
  border-radius: 12px; padding: 10px 14px; font-size: 12px; font-weight: 700;
  box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 8px;
}
.hero-chip.c1 { top: 6%; right: 2%; }
.hero-chip.c2 { bottom: 10%; left: -4%; }
.hero-chip .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--success); }

/* ---------- Trust strip ---------- */
.trust-strip { background: var(--card); border-bottom: 1px solid var(--line); }
.trust-strip .wrap {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 18px; padding: 20px 24px;
}
.trust-item { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.trust-item .ico {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  background: rgba(217,31,38,.12); color: var(--accent);
  display: grid; place-items: center; font-size: 18px;
}
.trust-item b { display: block; font-size: 13.5px; }
.trust-item span { color: var(--muted); font-size: 12px; }

/* ---------- Sections ---------- */
.section { padding: 64px 0; }
.section.alt { background: #110e14; }
.section-head { text-align: center; max-width: 640px; margin: 0 auto 42px; }
.section-head .kicker {
  color: var(--accent-2); font-weight: 400; font-size: 16px;
  letter-spacing: 1px; transform: rotate(-2deg); display: inline-block;
}
.section-head .kicker::before { content: "★ "; color: var(--accent); }
.section-head .kicker::after { content: " ★"; color: var(--accent); }
.section-head h2 { font-size: clamp(28px, 3.4vw, 42px); letter-spacing: 1.5px; margin: 8px 0 12px; }
.section-head h2::after {
  content: ""; display: block; width: 110px; height: 7px; margin: 12px auto 0;
  background: var(--grad-accent);
  clip-path: polygon(0 40%, 8% 0, 22% 55%, 37% 10%, 52% 60%, 66% 5%, 80% 50%, 92% 15%, 100% 45%, 96% 100%, 70% 70%, 45% 100%, 20% 75%, 4% 95%);
}
.section-head p { color: var(--muted); font-size: 15px; }

/* Category grid */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.cat-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: transform .18s, box-shadow .18s; position: relative;
}
.cat-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.cat-thumb { height: 150px; display: grid; place-items: center; font-size: 52px; }
.cat-body { padding: 16px 18px 20px; }
.cat-body h3 { font-size: 16px; margin-bottom: 4px; }
.cat-body p { font-size: 12.5px; color: var(--muted); margin-bottom: 10px; }
.cat-body .from { font-size: 13px; font-weight: 700; color: var(--accent); }
.cat-badge {
  position: absolute; top: 12px; left: 12px;
  background: var(--ink); color: #fff; font-size: 10.5px; font-weight: 700;
  border-radius: 6px; padding: 3px 9px; letter-spacing: .5px;
}
.cat-badge.hot { background: var(--pink); }

/* Process steps */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.step {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px 22px; position: relative;
}
.step .num {
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--grad-accent); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 17px;
  margin-bottom: 14px;
}
.step h3 { font-size: 16px; margin-bottom: 6px; }
.step p { font-size: 13px; color: var(--muted); }

/* Studio promo band */
.studio-band { background: var(--ink-2); color: #fff; overflow: hidden; }
.studio-band .wrap {
  display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
  align-items: center; padding-top: 64px; padding-bottom: 64px;
}
.studio-band h2 { font-size: clamp(26px, 3vw, 36px); letter-spacing: -.5px; margin-bottom: 14px; }
.studio-band p { color: #a89aa0; font-size: 15px; margin-bottom: 22px; }
.feature-list { display: grid; gap: 12px; margin-bottom: 26px; }
.feature-list li { display: flex; gap: 12px; font-size: 14px; align-items: flex-start; }
.feature-list .tick {
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  background: rgba(217,31,38,.35); color: #ffb0ac;
  display: grid; place-items: center; font-size: 12px; margin-top: 1px;
}
.editor-preview {
  background: #120e12; border: 1px solid #3a2e33; border-radius: 16px;
  box-shadow: var(--shadow-lg); overflow: hidden;
}
.editor-preview .ep-bar {
  display: flex; gap: 6px; padding: 10px 14px; background: #1c161a;
  border-bottom: 1px solid #3a2e33;
}
.editor-preview .ep-bar i { width: 10px; height: 10px; border-radius: 50%; display: block; }
.editor-preview .ep-body { padding: 18px; display: grid; place-items: center; }

/* Pricing tiers */
.tiers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tier {
  background: var(--card); border: 1.5px solid var(--line);
  border-radius: var(--radius); padding: 30px 26px; position: relative;
}
.tier.popular { border-color: var(--accent); box-shadow: var(--shadow-lg); }
.tier .pop-tag {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--grad-accent); color: #fff; font-size: 11px; font-weight: 700;
  border-radius: 999px; padding: 4px 16px; letter-spacing: .8px;
}
.tier h3 { font-size: 17px; }
.tier .price { font-size: 34px; font-weight: 800; margin: 10px 0 2px; }
.tier .price span { font-size: 13px; font-weight: 500; color: var(--muted); }
.tier .desc { font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.tier ul { display: grid; gap: 9px; margin-bottom: 22px; }
.tier ul li { font-size: 13.5px; display: flex; gap: 9px; }
.tier ul li::before { content: "✓"; color: var(--success); font-weight: 700; }
.tier .btn { width: 100%; justify-content: center; }
.tier .btn-outline { background: transparent; border: 1.5px solid var(--accent); color: var(--accent); }

/* Testimonials */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.quote {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px;
}
.quote .stars { color: var(--accent-2); letter-spacing: 2px; margin-bottom: 10px; }
.quote p { font-size: 14px; margin-bottom: 16px; }
.quote .who { display: flex; align-items: center; gap: 11px; }
.quote .avatar {
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 14px;
}
.quote .who b { display: block; font-size: 13.5px; }
.quote .who span { font-size: 12px; color: var(--muted); }

/* Savage Collection (signature designs) */
.savage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.savage-card {
  position: relative; border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--line); background: var(--ink);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.savage-card:hover { transform: translateY(-6px) rotate(-.5deg); box-shadow: var(--shadow-lg); border-color: var(--accent); }
.savage-art {
  height: 240px; display: grid; place-items: center; position: relative;
  background: var(--splat) 10% 20% / 200px no-repeat, var(--splat) 85% 75% / 150px no-repeat, radial-gradient(circle at 50% 40%, #241016, var(--ink) 75%);
}
.savage-art .big { font-size: 74px; filter: drop-shadow(0 8px 16px rgba(0,0,0,.6)); }
.savage-art .savage-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 1; background: #fff;
}
.savage-art .savage-img ~ .big { display: none; }
.savage-art .tagline { z-index: 2; }
.savage-art .tagline {
  position: absolute; bottom: 14px; left: 0; right: 0; text-align: center;
  font-family: var(--font-display); font-size: 21px; letter-spacing: 1.5px;
  color: var(--text); text-transform: uppercase;
  text-shadow: 2px 2px 0 var(--accent), -1px -1px 0 rgba(0,0,0,.8);
}
.savage-art .tagline em { font-style: normal; color: var(--accent-2); }
.savage-body { padding: 16px 18px 20px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.savage-body h3 { font-size: 15px; letter-spacing: 1px; }
.savage-body p { font-size: 12px; color: var(--muted); }
.savage-body .from { font-family: var(--font-display); color: var(--accent-2); font-size: 16px; white-space: nowrap; }
.savage-tag {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  background: var(--accent); color: #fff; font-family: var(--font-marker);
  font-size: 12px; border-radius: 6px; padding: 3px 10px; transform: rotate(-4deg);
}

/* CTA band */
.cta-band { background: var(--grad-hero); color: #fff; text-align: center; position: relative; overflow: hidden; }
.cta-band::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--splat) 8% 30% / 200px no-repeat, var(--splat) 90% 70% / 170px no-repeat;
}
.cta-band .wrap { padding-top: 60px; padding-bottom: 60px; position: relative; }
.cta-band h2 { font-size: clamp(26px, 3vw, 38px); margin-bottom: 12px; }
.cta-band p { color: #d8cfc9; margin-bottom: 26px; }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: #a49cc0; font-size: 13.5px; }
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 36px; padding: 56px 0 40px;
}
.footer-grid h4 { color: #fff; font-size: 13px; text-transform: uppercase; letter-spacing: 1.4px; margin-bottom: 16px; }
.footer-grid li a { display: block; padding: 4px 0; }
.footer-grid li a:hover { color: #fff; }
.footer-brand p { margin: 14px 0 18px; max-width: 280px; }
.socials { display: flex; gap: 10px; }
.socials a {
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--ink-3); display: grid; place-items: center; font-size: 15px;
}
.socials a:hover { background: var(--accent); color: #fff; }
.footer-bottom {
  border-top: 1px solid #2c2741; padding: 18px 0;
  display: flex; justify-content: space-between; gap: 12px; font-size: 12.5px;
}

/* ============================================================
   DESIGN STUDIO (Kittl-inspired editor)
   ============================================================ */
.studio-page { height: 100vh; display: flex; flex-direction: column; background: #120e12; color: #e6e1f2; overflow: hidden; }

.studio-topbar {
  display: flex; align-items: center; gap: 18px;
  background: #1c161a; border-bottom: 1px solid #3a2e33;
  padding: 10px 18px; flex: none;
}
.studio-topbar .logo-mark { width: 34px; height: 34px; font-size: 15px; border-radius: 9px; }
.studio-topbar .proj-name {
  background: transparent; border: 1px solid transparent; color: #e6e1f2;
  font-size: 13.5px; font-weight: 600; padding: 6px 10px; border-radius: 8px; outline: none;
}
.studio-topbar .proj-name:hover, .studio-topbar .proj-name:focus { border-color: #3a2e33; background: #120e12; }
.tb-group { display: flex; align-items: center; gap: 8px; }
.tb-spacer { flex: 1; }
.tb-btn {
  background: #282026; border: 1px solid #3a2e33; color: #d8cfc9;
  border-radius: 8px; padding: 7px 14px; font-size: 12.5px; font-weight: 600;
}
.tb-btn:hover { background: #332c4e; color: #fff; }
.tb-btn:disabled { opacity: .35; cursor: default; }
.tb-btn:disabled:hover { background: #282026; color: #d8cfc9; }
.tb-btn.primary { background: var(--grad-accent); border: 0; color: #fff; }
.tb-price { font-size: 13px; color: #e3b341; font-weight: 700; }

.studio-main { flex: 1; display: flex; min-height: 0; }

/* Left icon rail */
.tool-rail {
  width: 72px; flex: none; background: #1c161a; border-right: 1px solid #3a2e33;
  display: flex; flex-direction: column; align-items: center; padding: 10px 0; gap: 4px;
}
.rail-btn {
  width: 58px; padding: 9px 0 7px; border-radius: 10px;
  background: transparent; border: 0; color: #9d8f96;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 600;
}
.rail-btn .ico { font-size: 19px; }
.rail-btn:hover { color: #e6e1f2; background: #282026; }
.rail-btn.active { color: #fff; background: var(--accent); }

/* Left content drawer */
.tool-drawer {
  width: 260px; flex: none; background: #191418; border-right: 1px solid #3a2e33;
  padding: 16px; overflow-y: auto;
}
.tool-drawer h3 { font-size: 13px; margin-bottom: 4px; }
.tool-drawer .hint { font-size: 11.5px; color: #9d8f96; margin-bottom: 14px; }
.drawer-search {
  width: 100%; background: #120e12; border: 1px solid #3a2e33; color: #e6e1f2;
  border-radius: 8px; padding: 8px 12px; font-size: 12.5px; outline: none; margin-bottom: 14px;
}
.drawer-search:focus { border-color: var(--accent); }
.asset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.asset {
  background: #241c21; border: 1px solid #3a2e33; border-radius: 10px;
  aspect-ratio: 1; display: grid; place-items: center; font-size: 30px;
  transition: border-color .15s, transform .15s; border-style: solid;
}
.asset:hover { border-color: var(--accent); transform: scale(1.04); cursor: pointer; }
.drawer-section { font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; color: #9d8f96; margin: 16px 0 10px; }
.text-preset {
  width: 100%; background: #241c21; border: 1px solid #3a2e33; color: #e6e1f2;
  border-radius: 10px; padding: 12px; margin-bottom: 8px; text-align: center;
}
.text-preset:hover { border-color: var(--accent); }
.tp-h { font-size: 20px; font-weight: 800; letter-spacing: -.5px; }
.tp-s { font-size: 14px; font-weight: 600; }
.tp-b { font-size: 12px; color: #9d8f96; }
.upload-drop {
  border: 1.5px dashed #54444b; border-radius: 12px; padding: 26px 14px;
  text-align: center; color: #9d8f96; font-size: 12px; margin-bottom: 14px;
}
.upload-drop b { color: #d8cfc9; display: block; font-size: 13px; margin-top: 6px; }
.ai-box textarea {
  width: 100%; background: #120e12; border: 1px solid #3a2e33; color: #e6e1f2;
  border-radius: 10px; padding: 10px 12px; font-size: 12.5px; min-height: 84px;
  resize: vertical; outline: none; font-family: inherit; margin-bottom: 10px;
}
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chip {
  background: #241c21; border: 1px solid #3a2e33; color: #d8cfc9;
  font-size: 11px; border-radius: 999px; padding: 4px 11px;
}
.chip:hover { border-color: var(--accent); color: #fff; }

/* Canvas area */
.canvas-area {
  flex: 1; display: flex; flex-direction: column; min-width: 0;
  background:
    radial-gradient(rgba(217,31,38,.06) 1px, transparent 1px);
  background-size: 22px 22px;
}
.canvas-toolbar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-bottom: 1px solid #282026; flex: none; flex-wrap: wrap;
}
.ct-label { font-size: 11px; color: #9d8f96; text-transform: uppercase; letter-spacing: 1px; }
.seg { display: flex; background: #1c161a; border: 1px solid #3a2e33; border-radius: 9px; overflow: hidden; }
.seg button { background: transparent; border: 0; color: #9d8f96; font-size: 12px; font-weight: 600; padding: 7px 14px; }
.seg button.active { background: var(--accent); color: #fff; }
.swatches { display: flex; gap: 7px; align-items: center; }
.swatch {
  width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}
.swatch.active { border-color: #fff; transform: scale(1.12); }
/* 
  .canvas-stage centers the design wrap. 
  `overflow: auto` permits scrollbars on extremely narrow viewports so the canvas does not get cut off.
*/
.canvas-stage { flex: 1; display: grid; place-items: center; min-height: 0; padding: 18px; overflow: auto; }

/* 
  CRITICAL: .shirt-wrap MUST have a fixed width of 430px and height of 460px with `flex: none`.
  This locks the layout canvas to a fixed 430x460 coordinate space matching the SVG dimensions.
  If allowed to shrink, absolute-positioned design layers and the print-zone container 
  (which use hardcoded pixel offsets) will shift off-center relative to the shrunk shirt.
*/
.shirt-wrap { width: 430px; height: 460px; flex: none; position: relative; filter: drop-shadow(0 24px 48px rgba(0,0,0,.45)); }
.print-zone {
  position: absolute; border: 1.5px dashed rgba(217,31,38,.55); border-radius: 6px;
  pointer-events: none;
}
.print-zone::after {
  content: attr(data-label);
  position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%);
  font-size: 9px; letter-spacing: 1.5px; color: #9d8f96; white-space: nowrap;
}
.print-zone { transition: left .3s ease, top .3s ease, width .3s ease, height .3s ease; }

/* rail dividers + link buttons */
.rail-div { width: 40px; height: 1px; background: #3a2e33; margin: 5px 0; flex: none; }
a.rail-btn { text-decoration: none; }

/* graphics groups */
.gfx-group { margin-bottom: 4px; }
.gfx-group .drawer-section { display: flex; align-items: baseline; gap: 7px; }
.gfx-group .g-count {
  font-size: 9.5px; color: #9d8f96; background: #241c21;
  border-radius: 999px; padding: 1px 7px; font-family: var(--font-body);
}
#gfxChips { margin-bottom: 4px; }
#gfxChips .chip.active { background: var(--accent); border-color: var(--accent); color: #fff; }

/* custom color swatch */
.swatch-custom {
  width: 24px; height: 24px; border-radius: 50%; position: relative;
  display: grid; place-items: center; cursor: pointer; font-size: 12px;
  background: conic-gradient(#d91f26, #f28c1b, #e3b341, #29c46f, #1d3f8f, #4a2a6a, #d91f26);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
}
.swatch-custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ct-color-name { font-family: var(--font-marker); font-size: 12px; color: var(--accent-2); transform: rotate(-2deg); }

/* image assets & image layers */
.asset.img-asset { padding: 0; overflow: hidden; }
.asset.img-asset img { width: 100%; height: 100%; object-fit: cover; display: block; }
.asset.img-asset.broken { display: none; }
.art-missing-note {
  font-size: 11px; color: #9d8f96; background: #241c21; border: 1px dashed #3a2e33;
  border-radius: 9px; padding: 9px 11px; margin-top: 4px;
}
.art-missing-note b { color: var(--accent-2); }
.design-layer.img-layer { padding: 0; line-height: 0; }
.design-layer.img-layer img { display: block; width: 100%; height: auto; pointer-events: none; }
.upload-asset { position: relative; }
.upload-asset .u-del {
  position: absolute; top: 3px; right: 3px; z-index: 2;
  width: 18px; height: 18px; border-radius: 6px; border: 0; font-size: 10px; line-height: 1;
  background: rgba(10,8,11,.8); color: #f2ede4; cursor: pointer; display: none;
}
.upload-asset:hover .u-del { display: block; }
.upload-asset .u-del:hover { background: var(--danger); }
#uploadDrop { display: block; cursor: pointer; transition: border-color .15s, background .15s; }
#uploadDrop.dragover { border-color: var(--accent); background: rgba(217,31,38,.08); }

/* saved designs list */
.saved-item {
  display: flex; align-items: center; gap: 10px;
  background: #241c21; border: 1px solid #3a2e33; border-radius: 10px;
  padding: 10px 12px; margin-bottom: 8px;
}
.saved-item .s-chip { width: 30px; height: 30px; border-radius: 8px; flex: none; border: 1px solid #3a2e33; }
.saved-item .s-meta { flex: 1; min-width: 0; }
.saved-item .s-meta b { display: block; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.saved-item .s-meta span { font-size: 10.5px; color: #9d8f96; }
.saved-item button { background: none; border: 0; color: #9d8f96; font-size: 13px; padding: 3px; }
.saved-item button:hover { color: var(--accent-2); }
.saved-item button.s-del:hover { color: var(--danger); }
.design-layer {
  position: absolute; cursor: grab; user-select: none;
  padding: 4px; border: 1.5px solid transparent; border-radius: 4px;
  text-align: center; white-space: nowrap;
}
.design-layer.selected { border-color: var(--accent-3); }
.design-layer:active { cursor: grabbing; }
.canvas-statusbar {
  display: flex; align-items: center; gap: 16px; padding: 8px 16px;
  border-top: 1px solid #282026; font-size: 11.5px; color: #9d8f96; flex: none;
}
.zoom-ctl { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.zoom-ctl button {
  background: #1c161a; border: 1px solid #3a2e33; color: #d8cfc9;
  width: 24px; height: 24px; border-radius: 6px; font-size: 13px; line-height: 1;
}

/* Right properties panel */
.props-panel {
  width: 292px; flex: none; background: #191418; border-left: 1px solid #3a2e33;
  overflow-y: auto; padding: 16px;
}
.props-panel h3 { font-size: 13px; margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center; }
.props-panel h3 .pill { font-size: 10px; background: #282026; color: #9d8f96; border-radius: 999px; padding: 2px 9px; font-weight: 600; }
.prop-group { border-top: 1px solid #282026; padding: 14px 0; }
.prop-group > label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 1.1px; color: #9d8f96; margin-bottom: 10px; }
/* right-click layer context menu */
.layer-ctx {
  position: fixed; z-index: 1400; min-width: 190px; padding: 6px;
  background: #1c161a; border: 1px solid #3a2e33; border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0,0,0,.6);
}
.layer-ctx button {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; background: transparent; border: 0; color: #d8cfc9;
  font-size: 12.5px; text-align: left; padding: 8px 10px; border-radius: 8px;
}
.layer-ctx button span { font-size: 10.5px; color: #9d8f96; }
.layer-ctx button:hover { background: var(--accent); color: #fff; }
.layer-ctx button:hover span { color: rgba(255,255,255,.8); }
.layer-ctx button.danger { color: #ff6b6b; }
.layer-ctx button.danger:hover { background: var(--danger); color: #fff; }
.layer-ctx hr { border: 0; border-top: 1px solid #3a2e33; margin: 5px 4px; }
.light-theme .layer-ctx { background: #fff; border-color: #d9cfe3; }
.light-theme .layer-ctx button { color: #2a2540; }

/* locked layers */
.design-layer.locked { cursor: not-allowed; }
.design-layer.locked::after {
  content: "🔒"; position: absolute; top: -9px; right: -9px;
  font-size: 11px; background: #1c161a; border: 1px solid var(--accent-2);
  border-radius: 50%; width: 20px; height: 20px; display: grid; place-items: center;
}
.design-layer.locked .layer-handle { display: none !important; }
.layer-item .l-lock { background: none; border: 0; font-size: 12px; padding: 2px; cursor: pointer; }

/* alignment grid (properties panel) */
.align-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.align-btn {
  background: #2a2540; border: 1px solid #3a2e33; color: #d8cfc9;
  border-radius: 8px; padding: 7px 0; font-size: 15px; line-height: 1;
  transition: background .12s, border-color .12s, transform .08s;
}
.align-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.align-btn:active { transform: scale(.92); }
.tb-btn.flip-on { background: var(--accent); border-color: var(--accent); color: #fff; }
.light-theme .align-btn { background: #eee7f3; border-color: #d9cfe3; color: #2a2540; }
.prop-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.prop-row label { font-size: 12px; color: #d8cfc9; flex: 1; }
.prop-row input[type="range"] { flex: 1.4; accent-color: var(--accent); }
.prop-row input[type="text"], .prop-row select {
  flex: 1.4; background: #120e12; border: 1px solid #3a2e33; color: #e6e1f2;
  border-radius: 7px; padding: 6px 9px; font-size: 12px; outline: none;
}
.prop-row .val { font-size: 11px; color: #9d8f96; width: 34px; text-align: right; }
.effect-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.effect-btn {
  background: #241c21; border: 1px solid #3a2e33; color: #d8cfc9;
  border-radius: 9px; padding: 10px 4px; font-size: 10.5px; font-weight: 600;
  display: flex; flex-direction: column; gap: 4px; align-items: center;
}
.effect-btn .demo { font-size: 15px; font-weight: 800; }
.effect-btn:hover { border-color: var(--accent); color: #fff; }
.effect-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.design-layer .layer-text { white-space: pre-wrap; display: inline-block; }
.color-dots { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.color-dot { width: 26px; height: 26px; border-radius: 8px; border: 2px solid transparent; cursor: pointer; }
.color-dot.active { border-color: #fff; }

/* --- Studio enhancement controls (text style, custom/recent ink, FX, shortcuts) --- */
.sty-toggles { display: flex; gap: 5px; }
.sty-btn {
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  background: #241c21; border: 1px solid #3a2e33; color: #d8cfc9;
  font-size: 14px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.sty-btn:hover { border-color: var(--accent); color: #fff; }
.sty-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
#propCase { background: #241c21; border: 1px solid #3a2e33; color: #d8cfc9; border-radius: 8px; padding: 6px 8px; font-size: 12px; }
.seg.sm button { padding: 5px 9px; font-size: 13px; }

/* custom color chip (ink + FX) matches the shirt swatch-custom look */
.ink-custom {
  position: relative; width: 26px; height: 26px; border-radius: 8px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
  border: 2px dashed #5c5478; background: #241c21; font-size: 13px;
}
.ink-custom.sm { width: 24px; height: 24px; }
.ink-custom input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.recent-inks { display: flex; align-items: center; gap: 8px; margin-top: 9px; }
.recent-inks .ri-label { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: #7d7387; }
.ri-dots { display: flex; gap: 6px; flex-wrap: wrap; }
.ri-dots .color-dot { width: 22px; height: 22px; }

/* keyboard shortcuts modal */
.sc-overlay {
  position: fixed; inset: 0; z-index: 3000; display: flex; align-items: center; justify-content: center;
  background: rgba(6, 4, 8, .68); backdrop-filter: blur(3px); padding: 20px;
}
.sc-modal {
  width: min(600px, 96vw); max-height: 88vh; overflow: auto;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-lg);
}
.sc-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.sc-head h3 { font-family: var(--font-display); letter-spacing: .5px; font-size: 19px; }
.sc-body { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; padding: 18px; }
.sc-cat { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--accent-2); font-weight: 800; margin-bottom: 8px; }
.sc-row { display: flex; align-items: center; gap: 6px; padding: 5px 0; font-size: 13px; color: var(--text); }
.sc-row span { flex: 1; color: var(--muted); }
.sc-row kbd {
  font-family: var(--font-mono, monospace); font-size: 11px; min-width: 20px; text-align: center;
  background: #241c21; border: 1px solid #3a2e33; border-bottom-width: 2px;
  border-radius: 6px; padding: 3px 6px; color: #e6ded6;
}
@media (max-width: 520px) { .sc-body { grid-template-columns: 1fr; } }

/* Layers list — drag to reorder */
.layer-item { cursor: grab; }
.layer-item:active { cursor: grabbing; }
.layer-item.dragging { opacity: .45; }
.layer-item.drop-before { box-shadow: inset 0 2px 0 var(--accent-2); }
.layer-item.drop-after  { box-shadow: inset 0 -2px 0 var(--accent-2); }
.layer-item .l-name[contenteditable="true"] { cursor: text; }

/* smart alignment guide lines (shown while dragging) */
.snap-guide { position: absolute; z-index: 40; pointer-events: none; }
.snap-guide.v { top: 0; bottom: 0; width: 0; border-left: 1px dashed var(--accent-2); }
.snap-guide.h { left: 0; right: 0; height: 0; border-top: 1px dashed var(--accent-2); }

/* gradient-fill toggle in the Ink section */
.grad-toggle-row {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 12px; color: var(--text); margin-top: 10px; user-select: none;
}
.grad-toggle-row input { cursor: pointer; }

/* auto-remove-background toggle in the Uploads drawer */
.bg-auto-row {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 12px; color: var(--text); margin: 10px 0 4px; user-select: none;
}
.bg-auto-row input { cursor: pointer; }

/* per-upload "remove background" button */
.upload-asset .u-bg {
  position: absolute; left: 4px; top: 4px; z-index: 3;
  width: 20px; height: 20px; border: 0; border-radius: 6px; cursor: pointer;
  background: rgba(10, 8, 11, .78); color: #fff; font-size: 11px; line-height: 1;
  display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .12s;
}
.upload-asset:hover .u-bg { opacity: 1; }
.upload-asset .u-bg:hover { background: var(--accent); }

/* upload print-quality badge */
.upload-asset { position: relative; }
.q-badge {
  position: absolute; left: 4px; bottom: 4px; z-index: 2;
  font-size: 9px; font-weight: 800; letter-spacing: .5px;
  padding: 2px 5px; border-radius: 5px; color: #0a080b; pointer-events: none;
}
.q-badge.q-hd  { background: #29c46f; }
.q-badge.q-ok  { background: #e3b341; }
.q-badge.q-low { background: #ff4747; color: #fff; }

/* numeric position/size inputs */
.prop-row input.num {
  width: 52px; background: #241c21; border: 1px solid #3a2e33; color: #e6ded6;
  border-radius: 7px; padding: 5px 7px; font-size: 12px; text-align: center;
}
.prop-row input.num:disabled { opacity: .4; }

/* print-area overflow: warning pill + flagged layers */
.bounds-warn { color: #ff6b6b; font-weight: 700; }
.design-layer.oob { outline: 2px dashed #ff4747; outline-offset: 2px; }
.design-layer.oob.selected { outline-color: #ff8a3d; }

/* inline layer rename */
.l-name.editing { outline: 1px solid var(--accent-2); border-radius: 4px; padding: 0 3px; background: #2a2029; cursor: text; }

/* unsaved-draft restore banner */
.draft-banner {
  position: fixed; left: 50%; bottom: 74px; transform: translate(-50%, 20px);
  z-index: 2500; display: flex; align-items: center; gap: 12px;
  background: var(--card); border: 1px solid var(--accent-2); border-radius: 12px;
  padding: 11px 15px; box-shadow: var(--shadow-lg); font-size: 13px; color: var(--text);
  opacity: 0; transition: opacity .25s, transform .25s; max-width: 92vw;
}
.draft-banner.show { opacity: 1; transform: translate(-50%, 0); }
.draft-banner button {
  border: 0; border-radius: 8px; padding: 7px 13px; font-size: 12.5px; font-weight: 700; cursor: pointer;
}
.draft-banner .db-yes { background: var(--accent); color: #fff; }
.draft-banner .db-no  { background: #2a2029; color: var(--muted); }

/* Layers list */
.layer-item {
  display: flex; align-items: center; gap: 10px;
  background: #241c21; border: 1px solid #3a2e33; border-radius: 9px;
  padding: 8px 11px; margin-bottom: 7px; font-size: 12.5px; cursor: pointer;
}
.layer-item:hover { border-color: #54444b; }
.layer-item.selected { border-color: var(--accent); }
.layer-item .l-ico { font-size: 14px; }
.layer-item .l-name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.layer-item .l-vis { color: #9d8f96; background: none; border: 0; font-size: 13px; }

/* ---------- Templates right panel (Kittl-style groups & thumbs) ---------- */
.tpl-panel {
  width: 348px; flex: none; background: #191418; border-left: 1px solid #3a2e33;
  display: flex; flex-direction: column; min-height: 0;
}
.tpl-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px;
}
.tpl-head h3 { font-size: 15px; letter-spacing: 1px; }
.tpl-close {
  background: #282026; border: 1px solid #3a2e33; color: #9d8f96;
  width: 26px; height: 26px; border-radius: 8px; font-size: 12px; line-height: 1;
}
.tpl-close:hover { color: #fff; border-color: var(--accent); }
.tpl-search { padding: 0 16px 10px; }
.tpl-search input {
  width: 100%; background: #120e12; border: 1px solid #3a2e33; color: #e6e1f2;
  border-radius: 9px; padding: 9px 13px; font-size: 12.5px; outline: none;
}
.tpl-search input:focus { border-color: var(--accent); }
.tpl-chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 0 16px 12px; border-bottom: 1px solid #282026; }
.tpl-body { flex: 1; overflow-y: auto; padding: 12px 16px 22px; }
.tpl-group { margin-bottom: 20px; }
.tpl-group-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; }
.tpl-group-head h4 { font-family: var(--font-marker); font-weight: 400; font-size: 13.5px; color: var(--accent-2); letter-spacing: .4px; }
.tpl-show-all { background: none; border: 0; color: #9d8f96; font-size: 11px; font-weight: 700; }
.tpl-show-all:hover { color: var(--accent-2); }
.tpl-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: thin; }
.tpl-row::-webkit-scrollbar { height: 7px; }
.tpl-row.expanded { flex-wrap: wrap; overflow: visible; }
.tpl-card { width: 96px; flex: none; background: none; border: 0; text-align: left; padding: 0; cursor: pointer; }
.tpl-thumb {
  width: 96px; height: 96px; border-radius: 10px; border: 1.5px solid #3a2e33;
  display: grid; place-items: center; text-align: center; overflow: hidden;
  transition: transform .18s, border-color .18s, box-shadow .18s;
  position: relative; font-size: 10px; line-height: 1.15; padding: 6px;
}
.tpl-card:hover .tpl-thumb {
  border-color: var(--accent); transform: scale(1.06) rotate(-1.5deg);
  box-shadow: 0 8px 18px rgba(0,0,0,.5);
}
.tpl-card:active .tpl-thumb { transform: scale(.97); }
.tpl-thumb i { font-style: normal; display: block; }
.tpl-card > b { display: block; font-size: 10.5px; margin-top: 5px; color: #e6e1f2; font-weight: 600; }
.tpl-card .uses { font-size: 9px; color: #9d8f96; }
/* frame styles for thumbnails */
.tpl-thumb.fr-badge i { border: 2px solid currentColor; border-radius: 50%; width: 70px; height: 70px; display: grid; place-items: center; padding: 4px; }
.tpl-thumb.fr-box i { border: 2px dashed currentColor; padding: 7px 9px; }
.tpl-thumb.fr-frame i { border: 3px double currentColor; padding: 7px 9px; }
.tpl-thumb .mini-tag {
  position: absolute; top: 5px; left: 5px; font-family: var(--font-marker);
  font-size: 8.5px; background: var(--accent); color: #fff;
  border-radius: 4px; padding: 1px 5px; transform: rotate(-4deg);
}
@media (max-width: 1024px) { .tpl-panel { display: none; } }

/* ---------- Studio panel system: collapse, docks & resize ---------- */
.tool-rail, .tool-drawer, .props-panel, .tpl-panel, .canvas-toolbar, .order-bar { position: relative; }

.panel-collapse {
  width: 24px; height: 24px; border-radius: 7px; flex: none;
  background: #282026; border: 1px solid #3a2e33; color: #9d8f96;
  font-size: 11px; line-height: 1; z-index: 6;
}
.panel-collapse:hover { color: #fff; border-color: var(--accent); transform: rotate(8deg); }
.tool-drawer > .panel-collapse, .props-panel > .panel-collapse, .tpl-panel .panel-collapse {
  position: absolute; top: 9px; right: 9px;
}
.tpl-panel .tpl-close { position: static; }
.props-panel > h3, .tool-drawer .drawer > h3 { padding-right: 30px; }
.rail-collapse { margin-top: auto; }
.canvas-toolbar > .panel-collapse { margin-left: auto; }
.order-bar > .panel-collapse { margin-left: 10px; }

/* dock icons — spray-tag buttons that bring hidden frames back */
.dock-btn {
  position: fixed; z-index: 950; width: 44px; height: 44px; border-radius: 50%;
  display: none; place-items: center; font-size: 18px; cursor: pointer;
  color: #f2ede4; border: 2px solid #3a2e33;
  background: #1c161a var(--spray-red) center / 150% no-repeat;
  box-shadow: 0 4px 16px rgba(0,0,0,.55), inset 0 0 0 2px rgba(217,31,38,.2);
  transition: transform .15s, border-color .15s;
}
.dock-btn:hover { transform: scale(1.12) rotate(-8deg); border-color: var(--accent-2); }
.dock-btn.show { display: grid; }
.dock-btn::after {
  content: attr(data-label); position: absolute; white-space: nowrap;
  font-family: var(--font-marker); font-size: 11.5px; color: #f2ede4;
  background: #282026; border: 1px solid #3a2e33; border-radius: 7px;
  padding: 3px 10px; opacity: 0; pointer-events: none; transition: opacity .15s;
}
.dock-btn.d-left::after { left: 115%; top: 50%; transform: translateY(-50%) rotate(-2deg); }
.dock-btn.d-right::after { right: 115%; top: 50%; transform: translateY(-50%) rotate(2deg); }
.dock-btn.d-top::after { top: 115%; left: 50%; transform: translateX(-50%) rotate(-2deg); }
.dock-btn.d-bottom::after { bottom: 115%; right: 0; transform: rotate(-2deg); }
.dock-btn:hover::after { opacity: 1; }
#dockRail   { left: 12px; top: 66px; }
#dockDrawer { left: 12px; top: 120px; }
#dockTpl    { right: 12px; top: 66px; }
#dockProps  { right: 12px; top: 120px; }
#dockBar    { left: 50%; margin-left: -22px; top: 60px; }
#dockOrder  { right: 12px; bottom: 12px; }

/* drag-resize handles */
.rs-handle {
  position: absolute; top: 0; bottom: 0; width: 7px; z-index: 7;
  cursor: col-resize; background: transparent; transition: background .15s;
}
.rs-handle.rs-right { right: -1px; }
.rs-handle.rs-left { left: -1px; }
.rs-handle:hover, .rs-handle.dragging {
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  opacity: .75;
}
body.resizing { user-select: none; cursor: col-resize; }
body.resizing iframe { pointer-events: none; }

/* Bottom order bar */
.order-bar {
  flex: none; background: #1c161a; border-top: 1px solid #3a2e33;
  display: flex; align-items: center; gap: 22px; padding: 11px 20px; font-size: 12.5px;
}
.order-bar .ob-item { display: flex; align-items: center; gap: 8px; color: #9d8f96; }
.order-bar .ob-item b { color: #e6e1f2; }
.order-bar select {
  background: #120e12; border: 1px solid #3a2e33; color: #e6e1f2;
  border-radius: 7px; padding: 5px 9px; font-size: 12px;
}
.order-bar .total { margin-left: auto; font-size: 15px; font-weight: 800; color: #e3b341; }

/* ============================================================
   ACCOUNT SYSTEM (auth + dashboard)
   ============================================================ */

/* ---------- Auth page ---------- */
.auth-hero {
  min-height: calc(100vh - 220px);
  background: var(--grad-hero); position: relative;
  display: grid; place-items: center; padding: 56px 24px; color: #fff;
}
.auth-hero::before {
  content: ""; position: absolute; inset: 0;
  background:
    var(--splat) 6% 10% / 200px no-repeat,
    var(--splat) 94% 88% / 160px no-repeat,
    radial-gradient(600px 300px at 85% 15%, rgba(242,140,27,.18), transparent 60%),
    radial-gradient(500px 260px at 8% 92%, rgba(217,31,38,.26), transparent 60%);
}
.auth-shell {
  position: relative; display: grid; grid-template-columns: 1fr 440px;
  gap: 56px; max-width: 1020px; width: 100%; align-items: center;
}
.auth-side h1 { font-size: clamp(28px, 3.4vw, 42px); letter-spacing: -.8px; line-height: 1.1; margin-bottom: 14px; }
.auth-side h1 .grad { background: linear-gradient(90deg, #e3b341, var(--pink)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.auth-side p { color: #d8cfc9; font-size: 15px; margin-bottom: 24px; max-width: 420px; }
.auth-perks { display: grid; gap: 13px; }
.auth-perks li { display: flex; gap: 12px; font-size: 14px; align-items: flex-start; }
.auth-perks .tick {
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  background: rgba(217,31,38,.4); color: #ffb0ac;
  display: grid; place-items: center; font-size: 12px; margin-top: 1px;
}

.auth-card {
  background: var(--card); color: var(--text);
  border-radius: 20px; box-shadow: var(--shadow-lg); padding: 34px 34px 30px;
}
.auth-tabs {
  display: flex; background: var(--paper); border: 1px solid var(--line);
  border-radius: 999px; padding: 4px; margin-bottom: 26px;
}
.auth-tabs button {
  flex: 1; border: 0; background: transparent; border-radius: 999px;
  padding: 9px 0; font-weight: 700; font-size: 13.5px; color: var(--muted);
  transition: background .15s, color .15s;
}
.auth-tabs button.active { background: var(--accent); color: #fff; }
.field { margin-bottom: 15px; }
.field label { display: block; font-size: 12.5px; font-weight: 700; margin-bottom: 6px; color: var(--ink-2); }
.field input, .field select {
  width: 100%; border: 1.5px solid var(--line); border-radius: 10px;
  padding: 11px 14px; font-size: 14px; outline: none; background: var(--paper);
  color: var(--text); font-family: inherit; transition: border-color .15s;
}
.field input:focus, .field select:focus { border-color: var(--accent); background: #fff; }
.field .sub { font-size: 11.5px; color: var(--muted); margin-top: 5px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.auth-meta { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; margin: 4px 0 18px; }
.auth-meta label { display: flex; gap: 7px; align-items: center; color: var(--muted); }
.auth-meta a { color: var(--accent); font-weight: 600; }
.auth-card .btn { width: 100%; justify-content: center; }
.auth-alt { text-align: center; font-size: 12.5px; color: var(--muted); margin-top: 18px; }
.auth-alt a { color: var(--accent); font-weight: 700; }
.auth-error {
  background: rgba(255,71,71,.12); color: var(--danger); border: 1px solid rgba(255,71,71,.4);
  border-radius: 10px; padding: 10px 14px; font-size: 13px; margin-bottom: 15px; display: none;
}
.auth-error.show { display: block; }
.auth-error.ok { background: rgba(41,196,111,.12); color: var(--success); border-color: rgba(41,196,111,.4); }
.acct-type-picker { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 15px; }
.acct-type {
  border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px;
  cursor: pointer; background: var(--paper); transition: border-color .15s;
}
.acct-type input { display: none; }
.acct-type b { display: block; font-size: 13.5px; }
.acct-type span { font-size: 11.5px; color: var(--muted); }
.acct-type.selected { border-color: var(--accent); background: rgba(217,31,38,.12); }

/* password show/hide */
.pass-wrap { position: relative; }
.pass-wrap input { padding-right: 42px; }
.pass-eye {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 32px; height: 32px; border-radius: 8px; background: transparent; border: 0;
  color: var(--muted); font-size: 15px; opacity: .6;
}
.pass-eye:hover { opacity: 1; color: var(--accent); }
.pass-eye.showing { opacity: 1; color: var(--accent-2); }

/* password strength meter */
.pass-strength { display: flex; align-items: center; gap: 9px; margin-top: 8px; }
.pass-strength-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.pass-strength-bar i { display: block; height: 100%; width: 0%; border-radius: 999px; transition: width .25s ease, background .25s ease; }
.pass-strength span { font-size: 11px; font-weight: 700; white-space: nowrap; }

/* welcome modal reuses .tplm-backdrop + the confirm-panel stamp look, standalone */
#welcomeBackdrop .stamp {
  display: inline-block; font-family: var(--font-marker); font-size: 22px; color: var(--success);
  border: 3px solid var(--success); border-radius: 12px; padding: 8px 22px; transform: rotate(-5deg);
}

/* ---------- Dashboard ---------- */
.dash-layout {
  display: grid; grid-template-columns: 250px 1fr; gap: 28px;
  padding: 36px 0 64px; align-items: start;
}
.dash-nav {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 14px; position: sticky; top: 90px;
}
.dash-user { display: flex; gap: 12px; align-items: center; padding: 6px 10px 18px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.dash-user .avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: var(--grad-accent); color: #fff; font-weight: 800;
  display: grid; place-items: center; font-size: 16px;
}
.dash-user b { display: block; font-size: 14px; line-height: 1.2; }
.dash-user span { font-size: 11.5px; color: var(--muted); }
.dash-user .tier-badge {
  display: inline-block; background: rgba(217,31,38,.12); color: var(--accent);
  font-size: 10px; font-weight: 800; letter-spacing: .6px; border-radius: 5px; padding: 2px 7px; margin-top: 3px;
}
.dash-nav a, .dash-nav button.navlink {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  padding: 10px 12px; border-radius: 10px; font-size: 13.5px; font-weight: 600;
  color: var(--muted); border: 0; background: transparent; cursor: pointer;
}
.dash-nav a:hover, .dash-nav button.navlink:hover { background: var(--paper); color: var(--text); }
.dash-nav .navlink.active { background: var(--accent); color: #fff; }
.dash-nav .navlink.danger { color: var(--danger); }
.dash-nav hr { border: 0; border-top: 1px solid var(--line); margin: 10px 0; }

.dash-panel { min-width: 0; }
.dash-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.dash-head h1 { font-size: 26px; letter-spacing: -.5px; }
.dash-head p { color: var(--muted); font-size: 13.5px; }

.stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 26px; }
.stat-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 18px 20px;
}
.stat-card .s-ico { font-size: 20px; margin-bottom: 8px; }
.stat-card b { display: block; font-size: 22px; letter-spacing: -.5px; }
.stat-card span { font-size: 12px; color: var(--muted); }

.dash-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 24px; margin-bottom: 20px;
}
.dash-card > h2 { font-size: 16px; margin-bottom: 16px; display: flex; justify-content: space-between; align-items: center; }
.dash-card > h2 a { font-size: 12.5px; color: var(--accent); font-weight: 700; }

.order-row {
  display: grid; grid-template-columns: 54px 1.6fr 1fr 1fr .9fr auto;
  gap: 14px; align-items: center; padding: 13px 0; border-top: 1px solid var(--line); font-size: 13.5px;
}
.order-row:first-of-type { border-top: 0; }
.order-thumb {
  width: 54px; height: 54px; border-radius: 10px; display: grid; place-items: center;
  font-size: 24px; background: var(--paper); border: 1px solid var(--line);
}
.order-row b { display: block; font-size: 13.5px; }
.order-row .mut { color: var(--muted); font-size: 12px; }
.status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 4px 12px;
}
.status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status.printing { background: rgba(242,140,27,.16); color: #f2a95c; }
.status.shipped { background: rgba(80,150,255,.16); color: #7ab3ff; }
.status.delivered { background: rgba(41,196,111,.16); color: #4ad98c; }
.status.proof { background: rgba(217,31,38,.12); color: var(--accent); }
.mini-btn {
  background: var(--paper); border: 1.5px solid var(--line); color: var(--text);
  border-radius: 8px; padding: 7px 14px; font-size: 12px; font-weight: 700;
}
.mini-btn:hover { border-color: var(--accent); color: var(--accent); }
.mini-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }

.design-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.design-card { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; transition: box-shadow .15s, transform .15s; }
.design-card:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
.design-card .d-thumb { height: 120px; display: grid; place-items: center; font-size: 40px; }
.design-card .d-body { padding: 12px 14px; }
.design-card .d-body b { font-size: 13.5px; display: block; }
.design-card .d-body span { font-size: 11.5px; color: var(--muted); }
.design-card .d-actions { display: flex; gap: 8px; padding: 0 14px 14px; }

.addr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.addr-card { border: 1.5px solid var(--line); border-radius: 12px; padding: 18px; font-size: 13.5px; position: relative; }
.addr-card.default { border-color: var(--accent); }
.addr-card .a-tag {
  position: absolute; top: 14px; right: 14px;
  background: rgba(217,31,38,.12); color: var(--accent); font-size: 10.5px; font-weight: 800;
  border-radius: 5px; padding: 2px 8px;
}
.addr-card b { display: block; margin-bottom: 5px; }
.addr-card p { color: var(--muted); margin-bottom: 12px; }
.addr-card.add-new {
  border-style: dashed; display: grid; place-items: center; min-height: 130px;
  color: var(--muted); cursor: pointer; text-align: center;
}
.addr-card.add-new:hover { border-color: var(--accent); color: var(--accent); }

.settings-form .field { max-width: 460px; }
.toggle-row {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 14px 0; border-top: 1px solid var(--line); font-size: 13.5px;
}
.toggle-row:first-of-type { border-top: 0; }
.toggle-row b { display: block; }
.toggle-row span { color: var(--muted); font-size: 12.5px; }
.switch { position: relative; width: 42px; height: 24px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute; inset: 0; border-radius: 999px; background: var(--line);
  transition: background .15s; cursor: pointer;
}
.switch .slider::before {
  content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; top: 3px; left: 3px; transition: transform .15s; box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.switch input:checked + .slider { background: var(--accent); }
.switch input:checked + .slider::before { transform: translateX(18px); }

.reward-bar { background: var(--paper); border: 1px solid var(--line); border-radius: 999px; height: 12px; overflow: hidden; margin: 10px 0 6px; }
.reward-bar i { display: block; height: 100%; background: var(--grad-accent); border-radius: 999px; }

.dash-section { display: none; }
.dash-section.active { display: block; }

@media (max-width: 900px) {
  .auth-shell { grid-template-columns: 1fr; max-width: 460px; }
  .auth-side { display: none; }
  .dash-layout { grid-template-columns: 1fr; }
  .dash-nav { position: static; }
  .stat-cards { grid-template-columns: repeat(2, 1fr); }
  .design-grid, .addr-grid { grid-template-columns: 1fr; }
  .order-row { grid-template-columns: 54px 1fr auto; }
  .order-row .hide-sm { display: none; }
}

/* ============================================================
   THEME UPGRADE PACK — marker energy, deco & shell polish
   ============================================================ */

/* Hand-drawn scribble ring (like a marker circling the words) */
:root {
  --scribble: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 64' preserveAspectRatio='none'%3E%3Cpath d='M110 7 C170 4 212 18 211 32 C210 50 162 60 108 59 C50 60 10 49 9 32 C8 15 44 6 110 7 M110 7 C162 9 200 15 203 30' fill='none' stroke='%23d91f26' stroke-width='4.5' stroke-linecap='round' opacity='.95'/%3E%3C/svg%3E");
  --scribble-line: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 14' preserveAspectRatio='none'%3E%3Cpath d='M4 8 C30 4 60 11 84 7 C110 3 136 10 156 6 M10 11 C40 8 80 13 150 9' fill='none' stroke='%23f28c1b' stroke-width='3' stroke-linecap='round' opacity='.9'/%3E%3C/svg%3E");
}

/* Shell polish */
::selection { background: var(--accent); color: #fff; }
::-webkit-scrollbar { width: 13px; height: 13px; }
::-webkit-scrollbar-track { background: #0d0a0e; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  border-radius: 8px; border: 3px solid #0d0a0e;
}
::-webkit-scrollbar-thumb:hover { background: var(--accent-2); }
:focus-visible { outline: 2px dashed var(--accent-2); outline-offset: 2px; }
.site-header::after {
  content: ""; display: block; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--accent-2) 70%, transparent);
  opacity: .7;
}

/* Marker energy — spread the handwritten feel */
.section-head .kicker {
  background: var(--scribble) center / 100% 100% no-repeat;
  padding: 12px 30px; font-size: 17px;
}
.hero-kicker { font-family: var(--font-marker); font-size: 14px; letter-spacing: .5px; transform: rotate(-1.5deg); }
.hero-chip { font-family: var(--font-marker); font-weight: 400; transform: rotate(-2deg); }
.hero-chip.c2 { transform: rotate(2deg); }
.trust-item b { font-family: var(--font-marker); font-weight: 400; font-size: 14.5px; letter-spacing: .3px; }
.cat-badge, .savage-tag {
  font-family: var(--font-marker) !important; font-weight: 400 !important;
  transform: rotate(-3deg); letter-spacing: .5px;
}
.cat-badge.hot { transform: rotate(2deg); }
.cat-body .from { font-family: var(--font-display); font-size: 15px; letter-spacing: .5px; }
.steps .num { font-family: var(--font-marker); font-size: 19px; transform: rotate(-4deg); }
.step h3 { position: relative; display: inline-block; }
.step:hover h3::after {
  content: ""; position: absolute; left: 0; right: -6px; bottom: -5px; height: 7px;
  background: var(--scribble-line) center / 100% 100% no-repeat;
}
.tier .pop-tag { font-family: var(--font-marker); font-size: 12.5px; transform: translateX(-50%) rotate(-2deg); }
.tier.popular:hover { transform: rotate(-.6deg); }
.quote { position: relative; padding-top: 34px; }
.quote::before {
  content: "\201C"; position: absolute; top: 2px; left: 16px;
  font-family: var(--font-marker); font-size: 46px; line-height: 1;
  color: var(--accent); opacity: .85;
}
.quote .who b { font-family: var(--font-marker); font-weight: 400; font-size: 14px; }
.quote .stars { color: var(--accent-2); }
.mega-col h4 { font-family: var(--font-marker); font-size: 13.5px; letter-spacing: .5px; text-transform: none; }
.mega-col li a .new { font-family: var(--font-marker); transform: rotate(-3deg); display: inline-block; }

/* Buttons — streetwear punch */
.btn { font-family: var(--font-display); font-weight: 400; letter-spacing: 1.2px; text-transform: uppercase; }
.btn:hover { transform: translateY(-2px) rotate(-1deg); }
.nav-item.studio-cta > a { font-family: var(--font-marker); letter-spacing: .5px; }

/* Cards get a little attitude */
.cat-card:hover { transform: translateY(-5px) rotate(-.6deg); }
.cat-card:nth-child(even):hover { transform: translateY(-5px) rotate(.6deg); }
.section.alt {
  background:
    var(--splat) 1% 6% / 190px no-repeat,
    var(--splat) 97% 92% / 150px no-repeat,
    #110e14;
}

/* Marquee tape strip */
.marquee {
  background: var(--grad-accent); overflow: hidden; position: relative;
  transform: rotate(-1.5deg) scale(1.03); margin: -12px 0;
  border-top: 4px solid #0a080b; border-bottom: 4px solid #0a080b;
  box-shadow: var(--shadow);
}
.marquee-track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  padding: 24px 0;
  font-family: var(--font-display);
  font-size: 38px;
  line-height: 1.1;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #fff;
  will-change: transform;
  animation: marq 52s linear infinite;
}
.marquee-track span {
  display: inline-flex;
  gap: 46px;
  flex-shrink: 0;
  padding-right: 46px;
}
.marquee-track i { font-style: normal; color: #14090a; }
@keyframes marq { to { transform: translateX(-50%); } }

/* Footer sign-off */
.footer-signoff {
  font-family: var(--font-marker); color: var(--accent-2); font-size: 17px;
  transform: rotate(-2deg); margin-top: 20px; display: inline-block;
}

/* Auth & dashboard marker touches */
.auth-side .kicker { color: var(--accent-2); font-size: 18px; display: inline-block; transform: rotate(-2deg); margin-bottom: 10px; }
.auth-side .kicker::before { content: "★ "; color: var(--accent); }
.auth-side .kicker::after { content: " ★"; color: var(--accent); }
.dash-head p { font-family: var(--font-marker); font-size: 13.5px; color: var(--accent-2); opacity: .85; }
.dash-user .tier-badge { font-family: var(--font-marker); transform: rotate(-2deg); }
.stat-card b { font-family: var(--font-display); letter-spacing: 1px; }
.status { font-family: var(--font-marker); font-weight: 400; letter-spacing: .3px; }

/* Studio marker touches */
.drawer-section { font-family: var(--font-marker); text-transform: none; font-size: 12.5px; letter-spacing: .5px; color: var(--accent-2); }
.studio-topbar .proj-name { font-family: var(--font-marker); font-size: 14px; }
.tb-price { font-family: var(--font-display); letter-spacing: 1px; }
.order-bar .total { font-family: var(--font-display); letter-spacing: 1px; font-weight: 400; }
.print-zone::after { font-family: var(--font-marker); font-size: 10px; letter-spacing: 1px; }

@media (max-width: 640px) {
  .marquee-track { font-size: 24px; padding: 16px 0; }
}

/* ============================================================
   GRAFFITI FX PACK — spray paint, animation, title FX, 3D
   ============================================================ */

:root {
  /* real spray-paint blobs: blurred circle + turbulence-displaced ragged edge + overspray dots */
  --spray-red: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cdefs%3E%3Cfilter id='s' x='-40%25' y='-40%25' width='180%25' height='180%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.09' numOctaves='3' result='n'/%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='7' result='b'/%3E%3CfeDisplacementMap in='b' in2='n' scale='70'/%3E%3C/filter%3E%3C/defs%3E%3Ccircle cx='150' cy='150' r='85' fill='%23d91f26' filter='url(%23s)' opacity='.85'/%3E%3Cg fill='%23d91f26' opacity='.5'%3E%3Ccircle cx='52' cy='96' r='3'/%3E%3Ccircle cx='240' cy='80' r='2.5'/%3E%3Ccircle cx='250' cy='210' r='3.5'/%3E%3Ccircle cx='70' cy='224' r='2'/%3E%3Ccircle cx='150' cy='40' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
  --spray-orange: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cdefs%3E%3Cfilter id='s' x='-40%25' y='-40%25' width='180%25' height='180%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.09' numOctaves='3' result='n'/%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='7' result='b'/%3E%3CfeDisplacementMap in='b' in2='n' scale='70'/%3E%3C/filter%3E%3C/defs%3E%3Ccircle cx='150' cy='150' r='85' fill='%23f28c1b' filter='url(%23s)' opacity='.8'/%3E%3Cg fill='%23f28c1b' opacity='.5'%3E%3Ccircle cx='52' cy='96' r='3'/%3E%3Ccircle cx='240' cy='80' r='2.5'/%3E%3Ccircle cx='250' cy='210' r='3.5'/%3E%3Ccircle cx='70' cy='224' r='2'/%3E%3C/g%3E%3C/svg%3E");
  --spray-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Cdefs%3E%3Cfilter id='s' x='-40%25' y='-40%25' width='180%25' height='180%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.09' numOctaves='3' result='n'/%3E%3CfeGaussianBlur in='SourceGraphic' stdDeviation='7' result='b'/%3E%3CfeDisplacementMap in='b' in2='n' scale='70'/%3E%3C/filter%3E%3C/defs%3E%3Ccircle cx='150' cy='150' r='85' fill='%23f2ede4' filter='url(%23s)' opacity='.5'/%3E%3C/svg%3E");
}

/* ---------- Spray-painted word highlight ---------- */
.spray-word { position: relative; display: inline-block; z-index: 0; }
.spray-word::before {
  content: ""; position: absolute; inset: -42% -20%; z-index: -1;
  background: var(--spray-orange) center / 100% 100% no-repeat;
  opacity: .5; filter: saturate(1.1);
}
.spray-word.red::before { background-image: var(--spray-red); opacity: .55; }
.spray-word.white::before { background-image: var(--spray-white); opacity: .6; }

/* ---------- Title FX: misregistered screen-print + 3D depth ---------- */
.section-head h2 {
  transform: rotate(-.8deg);
  text-shadow: 2.5px 2.5px 0 rgba(217,31,38,.9), 5px 5px 0 rgba(0,0,0,.55);
}
.hero h1 {
  text-shadow: 3px 3px 0 rgba(10,8,11,.85), 6px 6px 0 rgba(217,31,38,.45);
  transform: rotate(-1deg);
}
.studio-band h2, .cta-band h2 { text-shadow: 2.5px 2.5px 0 rgba(217,31,38,.85), 5px 5px 0 rgba(0,0,0,.5); transform: rotate(-.6deg); }
.hero-stats .stat b, .stat-card b {
  font-family: var(--font-display);
  text-shadow: 1px 1px 0 #6e1014, 2px 2px 0 #6e1014, 3px 3px 0 #40090b, 4px 5px 10px rgba(0,0,0,.6);
}

/* ---------- Hero entrance: stamped-in like a slammed print ---------- */
@keyframes stampIn {
  0%   { opacity: 0; transform: scale(1.7) rotate(-6deg); filter: blur(3px); }
  55%  { opacity: 1; transform: scale(.94) rotate(.8deg); filter: blur(0); }
  75%  { transform: scale(1.03) rotate(-1.4deg); }
  100% { transform: scale(1) rotate(-1deg); }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
.hero h1 { animation: stampIn .8s cubic-bezier(.2, 1.2, .35, 1) both; }
.hero .hero-kicker { animation: fadeUp .6s .1s ease both; }
.hero p.lead { animation: fadeUp .6s .35s ease both; }
.hero .hero-ctas { animation: fadeUp .6s .5s ease both; }
.hero .hero-stats { animation: fadeUp .6s .65s ease both; }
.hero-visual { animation: fadeUp .8s .3s ease both; }

/* gradient word shimmer (text-shadow would bleed through clipped text — use drop-shadow) */
.hero h1 .grad {
  background: linear-gradient(90deg, #e3b341, #ff3d3d, #f28c1b, #e3b341);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: none;
  filter: drop-shadow(3px 3px 0 rgba(10,8,11,.85));
  animation: gradShift 5s linear infinite;
}
@keyframes gradShift { to { background-position: 250% 0; } }

/* drifting overspray particles in hero & cta */
.hero::after, .cta-band::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(3px 3px at 12% 30%, rgba(242,140,27,.8), transparent 60%),
    radial-gradient(2px 2px at 78% 18%, rgba(242,237,228,.7), transparent 60%),
    radial-gradient(4px 4px at 88% 66%, rgba(217,31,38,.8), transparent 60%),
    radial-gradient(2.5px 2.5px at 30% 82%, rgba(227,179,65,.8), transparent 60%),
    radial-gradient(2px 2px at 55% 12%, rgba(217,31,38,.7), transparent 60%);
  animation: drift 9s ease-in-out infinite alternate;
}
@keyframes drift {
  from { transform: translateY(-6px) translateX(0); opacity: .9; }
  to   { transform: translateY(10px) translateX(8px); opacity: .55; }
}

/* ---------- Scroll-reveal (classes applied by js/fx.js) ---------- */
.rev { opacity: 0; transform: translateY(28px) rotate(-.6deg); }
.rev.in {
  opacity: 1; transform: none;
  transition: opacity .65s ease, transform .65s cubic-bezier(.2, .9, .3, 1.15);
}

/* ---------- 3D tilt & sticker-press buttons ---------- */
[data-tilt] { transition: transform .25s ease, box-shadow .25s ease; will-change: transform; }
[data-tilt]:hover { box-shadow: var(--shadow-lg); }
.btn-primary {
  box-shadow: 0 5px 0 #6e1014, 0 9px 18px rgba(0,0,0,.45);
}
.btn-primary:hover { transform: translateY(-2px) rotate(-1deg); box-shadow: 0 7px 0 #6e1014, 0 13px 22px rgba(0,0,0,.5); }
.btn-primary:active { transform: translateY(3px); box-shadow: 0 1px 0 #6e1014, 0 3px 8px rgba(0,0,0,.5); }
.tb-btn.primary { box-shadow: 0 3px 0 #6e1014; }
.tb-btn.primary:active { transform: translateY(2px); box-shadow: 0 1px 0 #6e1014; }

/* savage cards: 3D flip-tease + spray reveal on hover */
.savage-grid { perspective: 1100px; }
.savage-card:hover { transform: translateY(-6px) rotateX(3deg) rotateY(-4deg); }
.savage-card:nth-child(2):hover { transform: translateY(-6px) rotateX(3deg) rotateY(0deg); }
.savage-card:nth-child(3):hover { transform: translateY(-6px) rotateX(3deg) rotateY(4deg); }
.savage-art::after {
  content: ""; position: absolute; inset: 0;
  background: var(--spray-red) 85% 15% / 130px no-repeat;
  opacity: 0; transform: scale(.5); transform-origin: 85% 15%;
  transition: opacity .3s ease, transform .35s cubic-bezier(.2, 1.4, .4, 1);
  pointer-events: none;
}
.savage-card:hover .savage-art::after { opacity: .8; transform: scale(1); }
.savage-art .tagline { transition: transform .25s ease; }
.savage-card:hover .tagline { transform: scale(1.07) rotate(-2deg); }

/* logo mark: subtle 3D coin spin on hover */
.logo:hover .logo-mark { animation: coinSpin .7s ease; }
@keyframes coinSpin {
  0% { transform: rotateY(0); } 100% { transform: rotateY(360deg); }
}
.logo-mark { transform-style: preserve-3d; }

/* ---------- Giant graffiti-tag watermarks ---------- */
.section { position: relative; }
.section.alt { overflow: hidden; }
.section.alt::before {
  content: "MZTTO"; position: absolute; top: 4px; right: -40px;
  font-family: var(--font-marker); font-size: 170px; line-height: 1;
  color: rgba(242,237,228,.04); transform: rotate(-9deg);
  pointer-events: none; user-select: none;
}
.section.alt::after {
  content: "★"; position: absolute; bottom: 20px; left: 4%;
  font-size: 90px; color: rgba(217,31,38,.07);
  transform: rotate(-14deg); pointer-events: none;
}
.studio-band { position: relative; overflow: hidden; }
.studio-band::before {
  content: "CREATE"; position: absolute; bottom: -26px; left: -20px;
  font-family: var(--font-marker); font-size: 140px; line-height: 1;
  color: rgba(242,237,228,.035); transform: rotate(-7deg); pointer-events: none;
}

/* spray blob accents on key panels */
.auth-card { position: relative; overflow: hidden; }
.auth-card::before {
  content: ""; position: absolute; top: -60px; right: -60px; width: 170px; height: 170px;
  background: var(--spray-red) center / contain no-repeat; opacity: .16; pointer-events: none;
}
.tier.popular { overflow: hidden; }
.tier.popular::before {
  content: ""; position: absolute; bottom: -60px; left: -60px; width: 180px; height: 180px;
  background: var(--spray-orange) center / contain no-repeat; opacity: .13; pointer-events: none;
}

/* studio canvas: spray corners so the workspace feels tagged */
.canvas-stage { position: relative; }
.canvas-stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    var(--spray-red) -60px -60px / 200px no-repeat,
    var(--spray-orange) calc(100% + 70px) calc(100% + 70px) / 220px no-repeat;
  opacity: .12;
}

/* ============================================================
   CART & CHECKOUT
   ============================================================ */
.cart-layout {
  display: grid; grid-template-columns: 1fr 370px; gap: 26px;
  padding: 36px 0 64px; align-items: start;
}
.cart-title { display: flex; align-items: baseline; gap: 14px; margin-bottom: 20px; }
.cart-title h1 { font-size: 30px; letter-spacing: 1px; text-shadow: 2px 2px 0 rgba(217,31,38,.85); }
.cart-title .count-note { font-family: var(--font-marker); color: var(--accent-2); font-size: 15px; transform: rotate(-2deg); }

.cart-item {
  display: grid; grid-template-columns: 64px 1fr auto auto auto;
  gap: 16px; align-items: center;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 18px; margin-bottom: 12px;
}
.cart-item .thumb {
  width: 64px; height: 64px; border-radius: 12px; display: grid; place-items: center;
  font-size: 28px; background: rgba(217,31,38,.12); border: 1px solid var(--line);
}
.cart-item .info b { display: block; font-size: 14.5px; }
.cart-item .info span { font-size: 12px; color: var(--muted); }
.cart-item .unit { font-size: 13px; color: var(--muted); white-space: nowrap; }
.cart-item .line-total { font-family: var(--font-display); font-size: 17px; letter-spacing: .5px; color: var(--accent-2); white-space: nowrap; }
.qty-step { display: flex; align-items: center; border: 1.5px solid var(--line); border-radius: 999px; overflow: hidden; }
.qty-step button {
  background: transparent; border: 0; color: var(--text); width: 30px; height: 30px;
  font-size: 15px; font-weight: 700;
}
.qty-step button:hover { background: rgba(217,31,38,.2); }
.qty-step input {
  width: 38px; text-align: center; border: 0; background: transparent; color: var(--text);
  font-size: 13.5px; font-weight: 700; outline: none;
}
.cart-item .rm {
  background: none; border: 0; color: var(--muted); font-size: 17px; padding: 6px;
}
.cart-item .rm:hover { color: var(--danger); transform: rotate(8deg); }

.cart-empty {
  background: var(--card); border: 1.5px dashed var(--line); border-radius: var(--radius);
  padding: 60px 30px; text-align: center;
}
.cart-empty .big { font-size: 52px; margin-bottom: 12px; }
.cart-empty h2 { font-size: 22px; margin-bottom: 8px; }
.cart-empty p { color: var(--muted); font-size: 14px; margin-bottom: 22px; }

.summary-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 24px; position: sticky; top: 96px;
}
.summary-card h2 { font-size: 17px; margin-bottom: 16px; letter-spacing: 1px; }
.sum-row { display: flex; justify-content: space-between; font-size: 13.5px; padding: 7px 0; color: var(--muted); }
.sum-row b { color: var(--text); }
.sum-row.discount { color: var(--success); }
.sum-row.total {
  border-top: 2px solid var(--line); margin-top: 10px; padding-top: 14px;
  font-family: var(--font-display); font-size: 19px; color: var(--text); letter-spacing: .5px;
}
.sum-row.total span:last-child { color: var(--accent-2); }
.promo-row { display: flex; gap: 8px; margin: 14px 0 4px; }
.promo-row input {
  flex: 1; background: var(--paper); border: 1.5px solid var(--line); color: var(--text);
  border-radius: 9px; padding: 9px 12px; font-size: 13px; outline: none; text-transform: uppercase;
}
.promo-row input:focus { border-color: var(--accent); }
.promo-msg { font-size: 12px; min-height: 16px; margin-bottom: 8px; }
.promo-msg.ok { color: var(--success); font-family: var(--font-marker); }
.promo-msg.bad { color: var(--danger); }
.free-ship { font-size: 12px; color: var(--muted); margin: 10px 0 2px; }
.free-ship .bar {
  height: 9px; background: var(--paper); border: 1px solid var(--line);
  border-radius: 999px; overflow: hidden; margin-top: 6px;
}
.free-ship .bar i { display: block; height: 100%; background: var(--grad-accent); border-radius: 999px; transition: width .4s ease; }
.free-ship.done { color: var(--success); font-family: var(--font-marker); }
.summary-card .btn { width: 100%; justify-content: center; margin-top: 14px; }
.keep-shopping { display: block; text-align: center; font-size: 12.5px; color: var(--muted); margin-top: 12px; }
.keep-shopping:hover { color: var(--accent-2); }

/* checkout steps */
.co-steps { display: flex; gap: 6px; margin-bottom: 20px; }
.co-step-dot {
  flex: 1; text-align: center; font-size: 11.5px; font-weight: 700; color: var(--muted);
  padding: 8px 4px; border-radius: 9px; background: var(--card); border: 1px solid var(--line);
}
.co-step-dot.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.co-step-dot.done { color: var(--success); }
.co-pane { display: none; }
.co-pane.active { display: block; }
.ship-opt {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border: 1.5px solid var(--line); border-radius: 12px; margin-bottom: 10px; cursor: pointer;
  background: var(--paper);
}
.ship-opt input { accent-color: var(--accent); }
.ship-opt b { display: block; font-size: 13.5px; }
.ship-opt span { font-size: 12px; color: var(--muted); }
.ship-opt .price { margin-left: auto; font-family: var(--font-display); color: var(--accent-2); }
.ship-opt:has(input:checked) { border-color: var(--accent); background: rgba(217,31,38,.08); }
.pay-note {
  background: rgba(242,140,27,.1); border: 1px solid rgba(242,140,27,.4);
  border-radius: 10px; padding: 12px 14px; font-size: 12.5px; color: var(--accent-2); margin-bottom: 14px;
}
.co-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 18px; }

/* confirmation */
.confirm-panel { text-align: center; padding: 46px 26px; }
.confirm-panel .stamp {
  display: inline-block; font-family: var(--font-marker); font-size: 26px; color: var(--success);
  border: 3px solid var(--success); border-radius: 12px; padding: 8px 22px;
  transform: rotate(-5deg); margin-bottom: 20px;
}
.confirm-panel h2 { font-size: 26px; margin-bottom: 10px; }
.confirm-panel .ordnum { font-family: var(--font-display); color: var(--accent-2); font-size: 20px; letter-spacing: 1px; }
.confirm-panel p { color: var(--muted); font-size: 14px; margin: 10px 0 24px; }

@media (max-width: 900px) {
  .cart-layout { grid-template-columns: 1fr; }
  .summary-card { position: static; }
  .cart-item { grid-template-columns: 52px 1fr auto; }
  .cart-item .unit { display: none; }
}

/* ============================================================
   TEMPLATES GALLERY (Kittl-style browse page)
   ============================================================ */
.gal-hero { text-align: center; padding: 46px 24px 30px; position: relative; }
.gal-hero h1 { font-size: clamp(28px, 3.4vw, 44px); letter-spacing: 1.5px; text-shadow: 2.5px 2.5px 0 rgba(217,31,38,.9), 5px 5px 0 rgba(0,0,0,.55); transform: rotate(-.8deg); }
.gal-hero p { color: var(--muted); font-size: 14.5px; margin-top: 10px; }
.gal-search {
  max-width: 560px; margin: 22px auto 0; display: flex; align-items: center;
  background: var(--card); border: 1.5px solid var(--line); border-radius: 999px;
  padding: 5px 6px 5px 20px; transition: border-color .2s;
}
.gal-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(217,31,38,.15); }
.gal-search input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--text); font-size: 14px; }
.gal-search .ico { color: var(--muted); margin-right: 10px; }

.gal-tabs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; padding: 18px 24px 8px; }
.gal-tab {
  background: var(--card); border: 1.5px solid var(--line); color: var(--muted);
  border-radius: 999px; padding: 8px 18px; font-size: 13px; font-weight: 700;
  transition: all .15s;
}
.gal-tab:hover { color: var(--text); border-color: var(--accent-2); }
.gal-tab.active { background: var(--accent); border-color: var(--accent); color: #fff; transform: rotate(-1deg); }
.gal-tab .cnt { font-size: 10.5px; opacity: .7; margin-left: 5px; }

.gal-rows { padding: 20px 0 64px; }
.gal-group { margin-bottom: 34px; position: relative; }
.gal-group-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.gal-group-head h2 { font-size: 19px; letter-spacing: 1px; }
.gal-group-head .cnt {
  font-family: var(--font-marker); font-size: 12.5px; color: var(--accent-2);
  background: rgba(242,140,27,.12); border-radius: 999px; padding: 2px 11px; transform: rotate(-2deg);
}
.gal-group-head .blurb { font-size: 12px; color: var(--muted); }
.gal-group-head .g-all { margin-left: auto; background: none; border: 0; color: var(--muted); font-size: 12px; font-weight: 700; }
.gal-group-head .g-all:hover { color: var(--accent-2); }
.gal-row { display: flex; gap: 16px; overflow-x: auto; padding: 4px 2px 12px; scroll-behavior: smooth; }
.gal-row.expanded { flex-wrap: wrap; overflow: visible; }
.gal-arrow {
  position: absolute; top: 46%; z-index: 5; width: 38px; height: 38px; border-radius: 50%;
  background: var(--ink); border: 1.5px solid var(--line); color: var(--text);
  font-size: 15px; display: grid; place-items: center; box-shadow: var(--shadow);
}
.gal-arrow:hover { border-color: var(--accent); color: var(--accent-2); transform: scale(1.08); }
.gal-arrow.prev { left: -14px; }
.gal-arrow.next { right: -14px; }

.gal-card { width: 190px; flex: none; background: none; border: 0; padding: 0; text-align: left; cursor: pointer; }
.gal-card .tpl-thumb {
  width: 190px; height: 190px; font-size: 16px; border-radius: 14px;
  border: 1.5px solid var(--line); padding: 12px;
}
.gal-card:hover .tpl-thumb {
  border-color: var(--accent); transform: translateY(-4px) rotate(-1deg);
  box-shadow: 0 14px 30px rgba(0,0,0,.5);
}
.gal-card .g-name { display: block; font-size: 13px; font-weight: 700; color: var(--text); margin-top: 9px; }
.gal-meta { display: flex; align-items: center; gap: 7px; margin-top: 5px; }
.gal-meta .a-dot {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 9px; font-weight: 800; color: #fff;
}
.gal-meta .a-name { font-size: 11.5px; color: var(--muted); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gal-meta .likes { font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.gal-meta .likes b { color: var(--accent-2); font-weight: 700; }

/* ---------- template detail modal ---------- */
.tplm-backdrop {
  position: fixed; inset: 0; z-index: 1200; background: rgba(6,4,8,.8);
  backdrop-filter: blur(5px); display: grid; place-items: center; padding: 24px;
}
.tplm {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  max-width: 880px; width: 100%; max-height: 90vh; overflow-y: auto;
  display: grid; grid-template-columns: 1.1fr .9fr; box-shadow: var(--shadow-lg);
  animation: fadeUp .3s ease both;
}
.tplm-preview {
  padding: 30px; display: grid; place-items: center;
  background: var(--splat) 8% 10% / 170px no-repeat, var(--splat) 92% 90% / 140px no-repeat, var(--paper);
  border-radius: 18px 0 0 18px;
}
.tplm-preview .tpl-thumb { width: 100%; max-width: 340px; aspect-ratio: 1; height: auto; font-size: 26px; border-radius: 16px; border: 1.5px solid var(--line); }
.tplm-side { padding: 26px 26px 22px; position: relative; }
.tplm-close {
  position: absolute; top: 14px; right: 14px; width: 30px; height: 30px;
  border-radius: 9px; background: var(--paper); border: 1px solid var(--line);
  color: var(--muted); font-size: 13px;
}
.tplm-close:hover { color: #fff; border-color: var(--accent); }
.tplm-author { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.tplm-author .a-dot { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px; color: #fff; }
.tplm-author b { display: block; font-size: 13.5px; }
.tplm-author span { font-size: 11px; color: var(--muted); }
.tplm-author .follow { margin-left: auto; }
.tplm h2 { font-size: 22px; letter-spacing: 1px; margin-bottom: 8px; }
.tplm .stats { display: flex; gap: 16px; font-size: 12.5px; color: var(--muted); margin-bottom: 12px; }
.tplm .stats b { color: var(--accent-2); }
.tplm .desc { font-size: 13.5px; color: var(--muted); margin-bottom: 18px; }
.tplm .use-btn { width: 100%; justify-content: center; margin-bottom: 10px; }
.tplm-actions { display: flex; gap: 8px; margin-bottom: 18px; }
.tplm-actions .mini-btn { flex: 1; }
.tplm-sim h3 { font-family: var(--font-marker); font-weight: 400; font-size: 13px; color: var(--accent-2); margin-bottom: 9px; }
.tplm-sim-row { display: flex; gap: 8px; }
.tplm-sim-row .tpl-thumb { width: 62px; height: 62px; font-size: 7px; border-radius: 9px; cursor: pointer; border: 1.5px solid var(--line); padding: 4px; }
.tplm-sim-row .tpl-thumb:hover { border-color: var(--accent); transform: scale(1.07); }
.tplm-sim-row .tpl-thumb .mini-tag { display: none; }
.tplm-comments { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 14px; }
.tplm-comments h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 10px; }
.tplm-comment { display: flex; gap: 9px; font-size: 12.5px; margin-bottom: 10px; }
.tplm-comment .a-dot { width: 24px; height: 24px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 9px; font-weight: 800; color: #fff; }
.tplm-comment b { font-size: 12px; }
.tplm-comment p { color: var(--muted); }
.tplm-comment-box { display: flex; gap: 8px; margin-top: 10px; }
.tplm-comment-box input {
  flex: 1; background: var(--paper); border: 1.5px solid var(--line); color: var(--text);
  border-radius: 9px; padding: 8px 12px; font-size: 12.5px; outline: none;
}
.tplm-comment-box input:focus { border-color: var(--accent); }

@media (max-width: 860px) {
  .tplm { grid-template-columns: 1fr; }
  .tplm-preview { border-radius: 18px 18px 0 0; padding: 20px; }
  .gal-card, .gal-card .tpl-thumb { width: 150px; }
  .gal-card .tpl-thumb { height: 150px; font-size: 13px; }
}

/* respect reduced-motion users */
@media (prefers-reduced-motion: reduce) {
  .hero h1, .hero .hero-kicker, .hero p.lead, .hero .hero-ctas, .hero .hero-stats, .hero-visual { animation: none; }
  .hero h1 .grad { animation: none; }
  .hero::after, .cta-band::after { animation: none; }
  .marquee-track { animation-duration: 60s; }
  .rev { opacity: 1; transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .hero .wrap, .studio-band .wrap { grid-template-columns: 1fr; }
  .cat-grid, .steps { grid-template-columns: repeat(2, 1fr); }
  .tiers, .quotes { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .trust-strip .wrap { grid-template-columns: repeat(2, 1fr); }
  .mega-panel { min-width: 90vw; }
  .props-panel, .tool-drawer { display: none; }
}
@media (max-width: 640px) {
  .cat-grid, .steps { grid-template-columns: 1fr; }
  .search-box { display: none; }
  .util-links { display: none; }
}

/* ============================================================
   MIZETTO UPGRADES STYLING
   ============================================================ */

/* Theme Toggle Button */
.theme-toggle-btn {
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 20px;
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, transform 0.15s;
}
.theme-toggle-btn:hover {
  color: var(--accent-2);
  transform: scale(1.1);
}

/* Light Theme Variables */
.light-theme {
  --paper: #f4f3f0;
  --card: #ffffff;
  --ink: #18151b;
  --ink-2: #eff0eb;
  --ink-3: #e2e3dd;
  --text: #241f2a;
  --muted: #6a6272;
  --line: #dcd9cf;
  --shadow: 0 6px 20px rgba(0, 0, 0, .08);
  --shadow-lg: 0 14px 36px rgba(0, 0, 0, .12);
  --grad-hero: linear-gradient(150deg, #fbfaf8 0%, #f4f3f0 100%);
}
.light-theme body {
  background:
    radial-gradient(rgba(217,31,38,.03) 1px, transparent 1px) 0 0 / 26px 26px,
    var(--paper);
}
.light-theme .site-header {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}
.light-theme .search-box {
  background: var(--card);
}
.light-theme .search-box input {
  color: var(--ink);
}
.light-theme .sec-nav {
  background: rgba(244, 243, 240, 0.94);
}
.light-theme .hero {
  color: var(--ink);
  background: linear-gradient(150deg, #eae9e4 0%, #f5f4f0 100%);
}
.light-theme .hero h1 .grad {
  background: linear-gradient(90deg, #d91f26, #f28c1b);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.light-theme .hero-kicker {
  background: rgba(0, 0, 0, 0.05);
  border-color: rgba(0, 0, 0, 0.1);
  color: var(--ink);
}
.light-theme .hero p.lead {
  color: var(--muted);
}
.light-theme .hero-chip {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
}
.light-theme .btn-ghost {
  color: var(--ink);
  border-color: var(--line);
}
.light-theme .btn-ghost:hover {
  background: rgba(0,0,0,0.03);
}
.light-theme .hero-stats .stat span {
  color: var(--muted);
}
.light-theme .cat-card:hover {
  border-color: var(--accent);
}
.light-theme .marquee {
  background: var(--ink-2);
  color: var(--ink);
}
.light-theme .studio-band {
  background: var(--ink-2);
  color: var(--ink);
}
.light-theme .studio-band p {
  color: var(--muted);
}
.light-theme .feature-list .tick {
  background: rgba(217,31,38,.12);
  color: var(--accent);
}
.light-theme .cta-band {
  color: var(--ink);
  background: linear-gradient(150deg, #eae9e4 0%, #f5f4f0 100%);
}
.light-theme .cta-band p {
  color: var(--muted);
}
.light-theme .site-footer {
  background: var(--ink-2);
  color: var(--muted);
  border-top: 1px solid var(--line);
}
.light-theme .site-footer h4 {
  color: var(--ink);
}
.light-theme .footer-bottom {
  border-top-color: var(--line);
}
.light-theme .footer-grid li a:hover {
  color: var(--accent);
}
.light-theme .socials a {
  background: var(--card);
  border: 1px solid var(--line);
}
.light-theme .socials a:hover {
  background: var(--accent);
}
.light-theme .dash-nav {
  border-right: 1px solid var(--line);
}
.light-theme .dash-nav button.navlink:hover {
  background: var(--ink-3);
  color: var(--ink);
}
.light-theme .dash-nav button.navlink.active {
  background: var(--accent);
  color: #fff;
}
.light-theme .dash-nav hr {
  border-color: var(--line);
}
.light-theme .dash-nav a {
  color: var(--muted);
}
.light-theme .dash-nav a:hover {
  color: var(--accent);
}
.light-theme .toggle-row {
  border-top-color: var(--line);
}
.light-theme .addr-card.add-new {
  border-color: var(--line);
  color: var(--muted);
}
.light-theme .addr-card.add-new:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.light-theme .acct-type-picker {
  border-color: var(--line);
}
.light-theme .acct-type {
  border-color: var(--line);
  background: var(--paper);
}
.light-theme .acct-type.selected {
  border-color: var(--accent);
  background: var(--card);
}
.light-theme .studio-page.light-theme {
  background: #fdfcf9;
  color: #241f2a;
}
.light-theme .studio-topbar {
  background: #ffffff;
  border-bottom-color: #dcd9cf;
}
.light-theme .studio-topbar .proj-name {
  color: #241f2a;
}
.light-theme .studio-topbar .proj-name:hover, .light-theme .studio-topbar .proj-name:focus {
  border-color: #dcd9cf;
  background: #f4f3f0;
}
.light-theme .tb-btn {
  background: #f4f3f0;
  border-color: #dcd9cf;
  color: #241f2a;
}
.light-theme .tb-btn:hover {
  background: #eae9e4;
}
.light-theme .tool-rail {
  background: #ffffff;
  border-right-color: #dcd9cf;
}
.light-theme .rail-btn {
  color: #6a6272;
}
.light-theme .rail-btn:hover {
  color: #241f2a;
  background: #f4f3f0;
}
.light-theme .rail-btn.active {
  color: #fff;
  background: var(--accent);
}
.light-theme .tool-drawer {
  background: #fdfcf9;
  border-right-color: #dcd9cf;
}
.light-theme .drawer-search {
  background: #ffffff;
  border-color: #dcd9cf;
  color: #241f2a;
}
.light-theme .asset {
  background: #ffffff;
  border-color: #dcd9cf;
}
.light-theme .text-preset {
  background: #ffffff;
  border-color: #dcd9cf;
  color: #241f2a;
}
.light-theme .canvas-area {
  background-image: radial-gradient(rgba(217,31,38,.04) 1px, transparent 1px);
}
.light-theme .canvas-toolbar {
  border-bottom-color: #dcd9cf;
}
.light-theme .seg {
  background: #ffffff;
  border-color: #dcd9cf;
}
.light-theme .seg button {
  color: #6a6272;
}
.light-theme .seg button.active {
  background: var(--accent);
  color: #fff;
}
.light-theme .canvas-statusbar {
  border-top-color: #dcd9cf;
}
.light-theme .zoom-ctl button {
  background: #ffffff;
  border-color: #dcd9cf;
  color: #241f2a;
}
.light-theme .props-panel {
  background: #fdfcf9;
  border-left-color: #dcd9cf;
}
.light-theme .prop-group {
  border-top-color: #dcd9cf;
}
.light-theme .prop-row input[type="text"], .light-theme .prop-row select {
  background: #ffffff;
  border-color: #dcd9cf;
  color: #241f2a;
}
.light-theme .effect-btn {
  background: #ffffff;
  border-color: #dcd9cf;
  color: #241f2a;
}
.light-theme .effect-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.light-theme .layer-item {
  background: #ffffff;
  border-color: #dcd9cf;
}
.light-theme .layer-item.selected {
  border-color: var(--accent);
}
.light-theme .tpl-panel {
  background: #fdfcf9;
  border-left-color: #dcd9cf;
}
.light-theme .tpl-close {
  background: #f4f3f0;
  border-color: #dcd9cf;
  color: #241f2a;
}
.light-theme .tpl-search input {
  background: #ffffff;
  border-color: #dcd9cf;
  color: #241f2a;
}
.light-theme .tpl-chips {
  border-bottom-color: #dcd9cf;
}
.light-theme .tpl-thumb {
  border-color: #dcd9cf;
}
.light-theme .tpl-card > b {
  color: #241f2a;
}
.light-theme .saved-item {
  background: #ffffff;
  border-color: #dcd9cf;
}
.light-theme .saved-item .s-meta span {
  color: #6a6272;
}
.light-theme .rs-handle {
  background: #dcd9cf;
}
.light-theme .order-bar {
  background: #ffffff;
  border-top-color: #dcd9cf;
  color: #241f2a;
}
.light-theme .order-bar select {
  background: #f4f3f0;
  border-color: #dcd9cf;
  color: #241f2a;
}

/* Transform Handles */
.layer-handle {
  position: absolute;
  width: 9px;
  height: 9px;
  background: #fff;
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  pointer-events: auto;
  z-index: 100;
  display: none;
}
.design-layer.selected .layer-handle {
  display: block;
}
.layer-handle.tl { top: -5px; left: -5px; cursor: nwse-resize; }
.layer-handle.tr { top: -5px; right: -5px; cursor: nesw-resize; }
.layer-handle.bl { bottom: -5px; left: -5px; cursor: nesw-resize; }
.layer-handle.br { bottom: -5px; right: -5px; cursor: nwse-resize; }
.layer-handle.rot {
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  cursor: grab;
  background: var(--accent-3);
  border-color: #fff;
}
.layer-handle.rot::after {
  content: '';
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 1.5px;
  height: 18px;
  background: var(--accent-3);
  z-index: -1;
}

/* Export Dropdown in Studio Top Bar */
.dropdown-wrapper {
  position: relative;
  display: inline-block;
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 6px;
  background: #1c161a;
  border: 1px solid #3a2e33;
  border-radius: 8px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  min-width: 160px;
  z-index: 600;
}
.dropdown-menu button {
  background: transparent;
  border: 0;
  color: #d8cfc9;
  text-align: left;
  padding: 10px 14px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, color .12s;
  width: 100%;
}
.dropdown-menu button:hover {
  background: #332c4e;
  color: #fff;
}
.light-theme .dropdown-menu {
  background: #ffffff;
  border-color: #dcd9cf;
}
.light-theme .dropdown-menu button {
  color: #241f2a;
}
.light-theme .dropdown-menu button:hover {
  background: #f4f3f0;
}

/* AI Results & Loading Styles */
.ai-loading-card {
  background: #241c21;
  border: 1px solid #3a2e33;
  border-radius: 12px;
  padding: 24px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.light-theme .ai-loading-card {
  background: #ffffff;
  border-color: #dcd9cf;
}
.ai-spinner {
  width: 28px;
  height: 28px;
  border: 3px solid rgba(217,31,38,.25);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.ai-loading-step {
  font-size: 11.5px;
  color: #e3b341;
  font-family: monospace;
}
.ai-results-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}
.ai-result-tile {
  background: #241c21;
  border: 1px solid #3a2e33;
  border-radius: 10px;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  cursor: pointer;
  transition: border-color .15s, transform .15s;
}
.ai-result-tile:hover {
  border-color: var(--accent-2);
  transform: scale(1.03);
}
.ai-result-tile img {
  max-width: 80%;
  max-height: 80%;
  object-fit: contain;
}
.light-theme .ai-result-tile {
  background: #ffffff;
  border-color: #dcd9cf;
}
.chip.active-chip {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* Homepage Section Slider */
.sec-slider-frame {
  width: 100%;
  overflow: hidden;
  position: relative;
  transition: height 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: height;
}
.sec-slider-track {
  display: flex;
  align-items: flex-start;
  width: 600%; /* 6 sections */
  transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
  cursor: grab;
}
.sec-slider-track:active {
  cursor: grabbing;
}
.sec-slider-track > section {
  flex: 0 0 16.6666%; /* 100% / 6 */
  width: 16.6666%;
  box-sizing: border-box;
}

/* 2D Flat Style overrides */
.flat-style #shirtTexture,
.flat-style #shirtDetail,
.flat-style #shirtExtra,
.flat-style #shirtSeams {
  display: none !important;
}

/* 📚 Help Center Guide Cards & Accordions */
.guide-card {
  margin-bottom: 16px;
  cursor: pointer;
  transition: transform 0.22s cubic-bezier(0.25, 1, 0.5, 1), border-color 0.22s;
  user-select: none;
}
.guide-card:hover {
  border-color: var(--accent-2);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.guide-card h3 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.guide-card h3::after {
  content: '▼';
  font-size: 10px;
  color: var(--muted);
  transition: transform 0.22s ease;
  margin-left: 10px;
}
.guide-card.expanded h3::after {
  transform: rotate(180deg);
  color: var(--accent-2);
}
.guide-card .guide-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.25, 1, 0.5, 1), padding 0.3s;
  padding: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
}
.guide-card.expanded .guide-content {
  max-height: 800px;
  padding-top: 14px;
}
.guide-content p {
  margin: 0 0 10px;
}
.guide-content p:last-child {
  margin-bottom: 0;
}

/* 🏛️ Font Accordion & Groups */
.font-group-accordion {
  border-bottom: 1px solid var(--line);
  margin-bottom: 8px;
}
.font-group-accordion:last-child {
  border-bottom: none;
}
.font-group-header {
  padding: 10px 4px;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--accent-2);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  user-select: none;
  transition: color 0.2s;
}
.font-group-header:hover {
  color: var(--text);
}
.font-group-header::after {
  content: '▼';
  font-size: 9px;
  color: var(--muted);
  transition: transform 0.22s ease;
}
.font-group-accordion.expanded .font-group-header::after {
  transform: rotate(180deg);
  color: var(--accent-2);
}
.font-group-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.font-group-accordion.expanded .font-group-content {
  max-height: 1000px;
  padding-bottom: 12px;
}
.font-subgroup-title {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted);
  margin: 12px 0 6px 4px;
}

/* 🎨 Canvas Grid & Guides */
.print-zone.show-grid {
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 20px 20px;
  background-position: center;
}
.light-theme .print-zone.show-grid {
  background-image: 
    linear-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.05) 1px, transparent 1px);
}
.print-zone.show-safe-zone::before {
  content: '';
  position: absolute;
  top: 15px; left: 15px; right: 15px; bottom: 15px;
  border: 1.5px dashed rgba(217, 31, 38, 0.45);
  pointer-events: none;
  border-radius: 6px;
  z-index: 999;
}
.light-theme .print-zone.show-safe-zone::before {
  border-color: rgba(217, 31, 38, 0.6);
}




/* ============================================================
   STUDIO MENU DECO — extra effects, details & deco on the
   editor's rails, drawers, panels and controls (Savage theme).
   Purely decorative: layered on top of the functional styles
   above; nothing here changes layout or behavior.
   ============================================================ */

/* --- panels: faint dot texture + an inner accent edge --- */
.studio-page .tool-drawer,
.studio-page .props-panel,
.studio-page .tpl-panel {
  background-image: radial-gradient(rgba(255, 255, 255, .022) 1px, transparent 1px);
  background-size: 18px 18px;
}
.studio-page .props-panel { box-shadow: inset 2px 0 0 -1px rgba(217, 31, 38, .18); }
.studio-page .tool-drawer { box-shadow: inset -2px 0 0 -1px rgba(217, 31, 38, .14); }

/* --- topbar: accent underline + logo glow --- */
.studio-topbar { position: relative; background: linear-gradient(#1e171c, #191419); }
.studio-topbar::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2) 38%, transparent 72%); opacity: .55;
}
.studio-topbar .logo-mark { box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 3px 12px rgba(217, 31, 38, .45); }
.tb-btn { transition: transform .13s, box-shadow .13s, background .13s, color .13s; }
.tb-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, .32); }
.tb-btn.primary { box-shadow: 0 3px 12px rgba(217, 31, 38, .35); }
.tb-btn.primary:hover { box-shadow: 0 6px 20px rgba(217, 31, 38, .55); transform: translateY(-1px); }
.tb-price { text-shadow: 0 0 10px rgba(227, 179, 65, .4); }

/* --- left rail: gradient body, hover lift, animated icon, glowing active + accent tab --- */
.tool-rail { background: linear-gradient(#1d171b, #171216); }
.rail-btn { position: relative; transition: background .15s, color .15s, transform .1s; }
.rail-btn:hover { transform: translateY(-1px); }
.rail-btn .ico { transition: transform .2s cubic-bezier(.34, 1.56, .64, 1); display: inline-block; }
.rail-btn:hover .ico { transform: scale(1.16) rotate(-5deg); }
.rail-btn.active { background: linear-gradient(135deg, var(--accent), #9c141a); box-shadow: 0 5px 16px rgba(217, 31, 38, .42); }
.rail-btn.active::before {
  content: ''; position: absolute; left: -7px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 24px; border-radius: 0 4px 4px 0;
  background: var(--accent-2); box-shadow: 0 0 9px var(--accent-2);
}
.rail-div { background: linear-gradient(90deg, transparent, #4a3a40, transparent); }

/* --- drawer & panel headings get a marker underline --- */
.tool-drawer h3 {
  position: relative; display: inline-block; padding-bottom: 6px;
  font-family: var(--font-display, inherit); letter-spacing: .5px; font-size: 15px;
}
.tool-drawer h3::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 130%; height: 2px;
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 45%, transparent 100%);
}
.props-panel h3 {
  position: relative; padding-bottom: 12px;
  font-family: var(--font-display, inherit); letter-spacing: .5px; font-size: 15px;
}
.props-panel h3::after {
  content: ''; position: absolute; left: 0; bottom: 4px; width: 100%; height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent 80%);
}

/* --- prop-group labels get a glowing accent tick --- */
.prop-group > label { position: relative; padding-left: 13px; }
.prop-group > label::before {
  content: ''; position: absolute; left: 0; top: 3px;
  width: 5px; height: 5px; border-radius: 1px;
  background: var(--accent-2); box-shadow: 0 0 6px var(--accent-2);
}
.prop-group { transition: border-color .2s; }

/* --- drawer section labels: leading accent dash --- */
.drawer-section::before {
  content: ''; display: inline-block; width: 14px; height: 2px; margin-right: 8px;
  vertical-align: middle; background: var(--accent); border-radius: 2px;
  box-shadow: 0 0 6px rgba(217, 31, 38, .5);
}
.gfx-group .drawer-section::before { display: none; }

/* --- buttons: lift + glow on hover, glow when active --- */
.text-preset, .effect-btn, .align-btn, .asset, .chip, .swatch, .color-dot { transition: transform .13s, box-shadow .13s, border-color .13s, background .13s, color .13s; }
.text-preset:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(0, 0, 0, .32); }
.effect-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 15px rgba(0, 0, 0, .35); }
.effect-btn.active { box-shadow: 0 4px 14px rgba(217, 31, 38, .42); }
.align-btn:hover { box-shadow: 0 4px 12px rgba(217, 31, 38, .35); }

/* --- chips: gradient + glow when active --- */
.chip.active {
  background: var(--grad-accent); border-color: transparent; color: #fff;
  box-shadow: 0 2px 9px rgba(217, 31, 38, .4);
}
.chip:hover { transform: translateY(-1px); }

/* --- segmented controls: gradient active with a sheen --- */
.seg button { transition: background .13s, color .13s; }
.seg button.active { background: var(--grad-accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); }

/* --- swatches: pop + ring glow when active --- */
.swatch:hover { transform: scale(1.16); }
.swatch.active { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 0 0 2px var(--paper), 0 0 11px rgba(255, 255, 255, .35); }
.color-dot:hover { transform: scale(1.12); }
.color-dot.active { box-shadow: 0 0 0 2px var(--card), 0 0 9px rgba(255, 255, 255, .3); }

/* --- font accordion header: accent bar reveal on hover/expand --- */
.font-group-header { position: relative; padding-left: 12px; }
.font-group-header::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%) scaleY(.4);
  width: 3px; height: 16px; border-radius: 2px; background: var(--accent-2);
  opacity: 0; transition: opacity .2s, transform .2s;
}
.font-group-header:hover::before,
.font-group-accordion.expanded .font-group-header::before { opacity: 1; transform: translateY(-50%) scaleY(1); }

/* --- templates panel head: display font + accent --- */
.tpl-head h3 { font-family: var(--font-display, inherit); }

/* --- themed thin scrollbars for the studio panels --- */
.tool-drawer::-webkit-scrollbar, .props-panel::-webkit-scrollbar, .tpl-body::-webkit-scrollbar { width: 9px; }
.tool-drawer::-webkit-scrollbar-track, .props-panel::-webkit-scrollbar-track, .tpl-body::-webkit-scrollbar-track { background: transparent; }
.tool-drawer::-webkit-scrollbar-thumb, .props-panel::-webkit-scrollbar-thumb, .tpl-body::-webkit-scrollbar-thumb {
  background: #3a2e33; border-radius: 9px; border: 2px solid transparent; background-clip: padding-box;
}
.tool-drawer::-webkit-scrollbar-thumb:hover, .props-panel::-webkit-scrollbar-thumb:hover, .tpl-body::-webkit-scrollbar-thumb:hover { background: var(--accent); background-clip: padding-box; }

/* --- light theme keeps the deco readable --- */
.light-theme .studio-page .tool-drawer,
.light-theme .studio-page .props-panel,
.light-theme .studio-page .tpl-panel { background-image: radial-gradient(rgba(0, 0, 0, .03) 1px, transparent 1px); }
.light-theme .rail-btn.active { background: linear-gradient(135deg, var(--accent), #b81a20); }

/* ============================================================
   STUDIO BORDERS · ICONS · TEXT · FRAMES DECO
   Second decorative pass for the editor. Purely visual — adds
   crop-mark frames, glowing icons, richer borders and text
   treatments. No layout or behavior changes.
   ============================================================ */

/* ---------- BORDERS: richer panel & control edges ---------- */
.studio-page .props-panel { box-shadow: inset 2px 0 0 -1px rgba(217,31,38,.22), inset 0 3px 0 -2px rgba(242,140,27,.4); }
.studio-page .tool-drawer { box-shadow: inset -2px 0 0 -1px rgba(217,31,38,.18), inset 0 3px 0 -2px rgba(242,140,27,.3); }
.studio-page .tpl-panel   { box-shadow: inset 2px 0 0 -1px rgba(217,31,38,.16), inset 0 3px 0 -2px rgba(242,140,27,.3); }
/* toolbar + order bar accent edges */
.canvas-toolbar { box-shadow: inset 0 -2px 0 -1px rgba(217,31,38,.25); }
.order-bar { box-shadow: inset 0 2px 0 -1px rgba(242,140,27,.35); }
/* inputs & selects: accent border glow on focus */
.prop-row input[type="text"]:focus, .prop-row input.num:focus, .prop-row select:focus,
.drawer-search:focus, .proj-name:focus, .ai-box textarea:focus {
  border-color: var(--accent) !important; box-shadow: 0 0 0 2px rgba(217,31,38,.22);
}
/* double-line detail on effect + preset buttons */
.effect-btn, .text-preset { box-shadow: inset 0 0 0 1px rgba(255,255,255,.03); }

/* ---------- ICONS: glow, depth & a living active state ---------- */
.rail-btn .ico { filter: drop-shadow(0 1px 2px rgba(0,0,0,.45)); }
.rail-btn.active .ico { filter: drop-shadow(0 0 7px rgba(255,255,255,.55)); animation: mzIcoGlow 2.4s ease-in-out infinite; }
@keyframes mzIcoGlow {
  0%, 100% { filter: drop-shadow(0 0 5px rgba(255,255,255,.35)); }
  50%      { filter: drop-shadow(0 0 10px rgba(255,255,255,.7)); }
}
/* dock buttons: brighter icon + accent ring pulse */
.dock-btn { text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.dock-btn:hover { box-shadow: 0 6px 20px rgba(0,0,0,.6), inset 0 0 0 2px rgba(242,140,27,.55), 0 0 16px rgba(217,31,38,.5); }
/* topbar emoji icons on buttons get a soft pop */
.tb-btn { text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.theme-toggle-btn { transition: transform .2s, filter .2s; }
.theme-toggle-btn:hover { transform: rotate(20deg) scale(1.1); filter: drop-shadow(0 0 6px rgba(242,140,27,.6)); }
/* logo mark: gentle breathing glow */
.studio-topbar .logo-mark { animation: mzLogoGlow 3.5s ease-in-out infinite; }
@keyframes mzLogoGlow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 3px 12px rgba(217,31,38,.4); }
  50%      { box-shadow: 0 0 0 1px rgba(255,255,255,.12), 0 3px 18px rgba(217,31,38,.7); }
}

/* ---------- TEXT: display treatments & glow ---------- */
.canvas-toolbar .ct-label { color: var(--accent-2); text-shadow: 0 0 8px rgba(242,140,27,.25); }
.order-bar .total { text-shadow: 0 0 12px rgba(227,179,65,.45); }
.studio-topbar .proj-name { font-family: var(--font-display, inherit); letter-spacing: .5px; }
.canvas-statusbar { letter-spacing: .3px; }
/* print-area label styled like a registration tag */
.print-zone::after {
  background: rgba(28,22,26,.85); border: 1px solid rgba(217,31,38,.5);
  color: var(--accent-2); padding: 2px 8px; border-radius: 5px;
  text-shadow: 0 0 6px rgba(242,140,27,.4);
}

/* ---------- FRAMES: crop marks, glow & framed corners ---------- */
/* print zone: DTF-style corner crop marks + a soft pulsing glow */
.print-zone { box-shadow: 0 0 0 1px rgba(217,31,38,.15), 0 0 22px rgba(217,31,38,.12); animation: mzZoneGlow 3s ease-in-out infinite; }
@keyframes mzZoneGlow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(217,31,38,.12), 0 0 18px rgba(217,31,38,.10); }
  50%      { box-shadow: 0 0 0 1px rgba(217,31,38,.22), 0 0 28px rgba(217,31,38,.20); }
}
.print-zone::before {
  content: ''; position: absolute; inset: -6px; pointer-events: none;
  background:
    linear-gradient(var(--accent-2), var(--accent-2)) 0 0 / 14px 2px no-repeat,
    linear-gradient(var(--accent-2), var(--accent-2)) 0 0 / 2px 14px no-repeat,
    linear-gradient(var(--accent-2), var(--accent-2)) 100% 0 / 14px 2px no-repeat,
    linear-gradient(var(--accent-2), var(--accent-2)) 100% 0 / 2px 14px no-repeat,
    linear-gradient(var(--accent-2), var(--accent-2)) 0 100% / 14px 2px no-repeat,
    linear-gradient(var(--accent-2), var(--accent-2)) 0 100% / 2px 14px no-repeat,
    linear-gradient(var(--accent-2), var(--accent-2)) 100% 100% / 14px 2px no-repeat,
    linear-gradient(var(--accent-2), var(--accent-2)) 100% 100% / 2px 14px no-repeat;
  filter: drop-shadow(0 0 3px rgba(242,140,27,.5));
}
/* shirt wrap: faint red rim on top of the existing drop-shadow */
.shirt-wrap { filter: drop-shadow(0 24px 48px rgba(0,0,0,.45)) drop-shadow(0 0 2px rgba(217,31,38,.25)); }
/* canvas stage: framed corner brackets around the working area */
.canvas-stage::after {
  content: ''; position: absolute; inset: 14px; pointer-events: none; z-index: 1; opacity: .5;
  background:
    linear-gradient(var(--accent), var(--accent)) 0 0 / 26px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 0 0 / 2px 26px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 100% 0 / 26px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 100% 0 / 2px 26px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 0 100% / 26px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 0 100% / 2px 26px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 100% 100% / 26px 2px no-repeat,
    linear-gradient(var(--accent), var(--accent)) 100% 100% / 2px 26px no-repeat;
}

/* respect reduced-motion: keep the deco, drop the looping animations */
@media (prefers-reduced-motion: reduce) {
  .rail-btn.active .ico, .studio-topbar .logo-mark, .print-zone { animation: none; }
}

/* light theme: soften glows so they read on a light canvas */
.light-theme .print-zone::after { background: rgba(255,255,255,.9); color: var(--accent); }
.light-theme .canvas-toolbar .ct-label { color: var(--accent); }

/* ============================================================
   MY COLORS — per-user saved color palette (studio)
   ============================================================ */
.palette-block { margin-top: 11px; }
.palette-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 7px; }
.palette-count { font-size: 10px; color: #7d7387; letter-spacing: .5px; }
.palette-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.palette-row.inline { display: inline-flex; flex-wrap: nowrap; }
.palette-toolbar { display: inline-flex; align-items: center; gap: 7px; }
.pal-swatch {
  width: 24px; height: 24px; border-radius: 7px; cursor: pointer; padding: 0;
  border: 2px solid rgba(255,255,255,.14);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
.pal-swatch:hover { transform: scale(1.16) translateY(-1px); border-color: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.4); }
.pal-add {
  width: 24px; height: 24px; border-radius: 7px; cursor: pointer; padding: 0;
  background: #241c21; color: var(--accent-2); border: 2px dashed #54444b;
  font-size: 15px; font-weight: 700; line-height: 1; display: grid; place-items: center;
  transition: border-color .12s, color .12s, transform .12s, box-shadow .12s;
}
.pal-add:hover { border-color: var(--accent); color: #fff; transform: translateY(-1px); box-shadow: 0 3px 10px rgba(217,31,38,.35); }
.pal-empty { font-size: 11px; color: #6f6577; font-style: italic; }

/* light theme */
.light-theme .pal-add { background: #eee7f3; border-color: #cbb; }
.light-theme .pal-swatch { border-color: rgba(0,0,0,.15); }

/* ============================================================
   MY FONTS — per-user saved font favorites (studio)
   ============================================================ */
.font-fav-block {
  margin: 0 0 14px; padding: 11px; border-radius: 11px;
  background: #1f191d; border: 1px solid #3a2e33;
  box-shadow: inset 0 0 0 1px rgba(242,140,27,.08);
}
.font-fav-row { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.font-fav {
  max-width: 100%; padding: 6px 11px; border-radius: 8px; cursor: pointer;
  background: #241c21; color: #e6e1f2; border: 1px solid #4a3a40;
  font-size: 15px; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: transform .12s, border-color .12s, box-shadow .12s;
}
.font-fav:hover { transform: translateY(-1px); border-color: var(--accent); box-shadow: 0 4px 12px rgba(0,0,0,.35); }
.font-fav-add {
  padding: 6px 11px; border-radius: 8px; cursor: pointer;
  background: #241c21; color: var(--accent-2); border: 1px dashed #54444b;
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
  transition: border-color .12s, color .12s, transform .12s, box-shadow .12s;
}
.font-fav-add:hover { border-color: var(--accent); color: #fff; transform: translateY(-1px); box-shadow: 0 3px 10px rgba(217,31,38,.35); }
.light-theme .font-fav-block { background: #f3eef8; border-color: #d9cfe3; }
.light-theme .font-fav { background: #fff; color: #2a2540; border-color: #d9cfe3; }
.light-theme .font-fav-add { background: #fff; border-color: #cbb; }

/* image-adjust subhead + inline reset (Image Tools) */
.prop-subhead {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10px; text-transform: uppercase; letter-spacing: 1.1px;
  color: #9d8f96; margin: 10px 0 8px;
}
.prop-subhead::before { content: ''; flex: 1; height: 1px; background: #2e2836; margin-right: 8px; order: 2; }
.mini-reset {
  order: 3; background: #241c21; border: 1px solid #3a2e33; color: var(--accent-2);
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  border-radius: 6px; padding: 3px 8px; cursor: pointer; transition: border-color .12s, color .12s;
}
.mini-reset:hover { border-color: var(--accent); color: #fff; }

/* ============================================================
   ORDER DTF TRANSFERS PAGE (transfers.html)
   ============================================================ */
.xfer-hero { text-align: center; padding: 46px 24px 26px; position: relative; }
.xfer-hero .kicker { color: var(--accent-2); font-family: var(--font-marker, inherit); letter-spacing: 1px; }
.xfer-hero h1 { font-size: clamp(34px, 6vw, 62px); letter-spacing: 1px; margin: 6px 0 10px; }
.xfer-hero .grad { background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.xfer-hero p { max-width: 620px; margin: 0 auto; color: var(--muted); font-size: 15px; }

.xfer-layout {
  display: grid; grid-template-columns: 240px minmax(0, 1fr) 300px; gap: 26px;
  padding: 10px 24px 70px; align-items: start;
}
.xfer-guide, .xfer-discount {
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 18px;
  position: sticky; top: 16px;
}
.xfer-guide h3, .xfer-discount h3 { font-size: 16px; letter-spacing: .5px; margin-bottom: 6px; }
.xfer-discount .grad { background: var(--grad-accent); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.xfer-guide .hint, .xfer-discount .hint { font-size: 12px; color: var(--muted); margin-bottom: 14px; }

/* size guide grid */
.guide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.guide-item { text-align: center; }
.gi-label { font-size: 11px; font-weight: 700; color: var(--text); display: block; margin-bottom: 5px; }
.gi-frame {
  height: 86px; display: grid; place-items: center; border-radius: 8px;
  background: #15100f; border: 1px solid var(--line); overflow: hidden; transition: transform .15s;
}
.gi-frame img { object-fit: contain; }
.guide-item:hover .gi-frame { transform: scale(1.12); border-color: var(--accent); z-index: 2; position: relative; }
.guide-colors { margin-top: 16px; }
.gc-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); display: block; margin-bottom: 8px; }
.gc-dots { display: flex; flex-wrap: wrap; gap: 7px; }
.gc-dot { width: 24px; height: 24px; border-radius: 50%; cursor: pointer; border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); transition: transform .12s; }
.gc-dot:hover { transform: scale(1.15); }
.gc-dot.active { border-color: #fff; transform: scale(1.12); }

/* steps */
.xfer-steps { display: flex; flex-direction: column; gap: 22px; }
.xfer-step { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22px; }
.xfer-step h2 { font-size: 21px; letter-spacing: .4px; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.step-num { background: var(--grad-accent); color: #fff; font-family: var(--font-display, inherit); font-size: 13px; letter-spacing: 1px; padding: 4px 11px; border-radius: 8px; }

.xfer-drop {
  display: block; text-align: center; cursor: pointer;
  border: 2px dashed #54444b; border-radius: 14px; padding: 42px 20px; color: var(--muted); transition: border-color .15s, background .15s;
}
.xfer-drop.dragover, .xfer-drop:hover { border-color: var(--accent); background: rgba(217,31,38,.05); }
.xfer-drop .big { font-size: 34px; margin-bottom: 8px; }
.xfer-drop b { display: block; color: var(--text); font-size: 16px; margin-bottom: 4px; }
.xfer-drop span { font-size: 12px; }

.xfer-tools { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.xfer-tools .bg-auto-row { margin: 0; }
.xfer-tools .working { opacity: .5; pointer-events: none; }

.xfer-canvas-wrap { position: relative; padding: 26px 0 0 42px; }
.xfer-canvas {
  min-height: 220px; display: grid; place-items: center; border-radius: 12px;
  background: #15100f; border: 1px solid var(--line); padding: 16px; overflow: hidden;
}
.xfer-canvas img { max-width: 100%; max-height: 340px; object-fit: contain; }
.dim-line { position: absolute; color: var(--accent-2); font-size: 11px; font-weight: 700; }
.dim-top { top: 6px; left: 42px; right: 0; text-align: center; border-top: 1px dashed rgba(242,140,27,.5); padding-top: 3px; }
.dim-top span, .dim-side span { background: var(--card); padding: 0 6px; }
.dim-side { top: 26px; bottom: 0; left: 8px; writing-mode: vertical-rl; text-align: center; border-left: 1px dashed rgba(242,140,27,.5); padding-left: 3px; }

.xfer-adjust { margin-top: 14px; }
.prop-subhead-lite { font-size: 10px; text-transform: uppercase; letter-spacing: 1.1px; color: var(--muted); margin-bottom: 8px; }
.adj-row { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.adj-row label { font-size: 12px; color: var(--text); flex: 0 0 78px; }
.adj-row input[type="range"] { flex: 1; accent-color: var(--accent); }
.adj-row span { font-size: 11px; color: var(--muted); width: 30px; text-align: right; }

/* size tabs + rows */
.xfer-tabs { display: inline-flex; gap: 4px; background: #141118; border: 1px solid var(--line); border-radius: 10px; padding: 3px; margin-bottom: 10px; }
.xfer-tabs button { background: transparent; border: 0; color: var(--muted); font-size: 13px; font-weight: 700; padding: 7px 15px; border-radius: 8px; cursor: pointer; }
.xfer-tabs button.active { background: var(--grad-accent); color: #fff; }
.size-head, .size-row { display: grid; grid-template-columns: 1fr 1fr .7fr .8fr .8fr 32px; gap: 8px; align-items: center; }
.size-head { font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); padding: 6px 2px; border-bottom: 1px solid var(--line); }
.size-row { padding: 8px 0; }
.size-row input, .size-row select {
  background: var(--paper); border: 1px solid var(--line); color: var(--text);
  border-radius: 8px; padding: 8px 9px; font-size: 13px; outline: none; width: 100%;
}
.size-row input:focus, .size-row select:focus { border-color: var(--accent); }
.sz-unit { font-size: 13px; color: var(--muted); }
.sz-total { font-size: 14px; font-weight: 800; color: var(--accent-2); }
.sz-del { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 14px; }
.sz-del:hover { color: var(--danger); }
.link-add { background: none; border: 0; color: var(--accent-2); font-weight: 700; font-size: 13px; cursor: pointer; padding: 12px 2px 0; }
.link-add:hover { text-decoration: underline; }

/* step 3 */
.opt-row { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text); padding: 10px 0; border-bottom: 1px solid var(--line); cursor: pointer; }
.opt-row span { color: var(--muted); font-size: 12px; }
.opt-row input { cursor: pointer; }
.xfer-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 18px; flex-wrap: wrap; }
.xfer-grand { display: flex; flex-direction: column; }
.xfer-grand span { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
.xfer-grand b { font-family: var(--font-display, inherit); font-size: 28px; color: var(--accent-2); letter-spacing: 1px; }
.xfer-grand small { font-size: 11.5px; color: var(--muted); }
.xfer-cta .btn-primary { padding: 14px 26px; font-size: 15px; }

/* discount table */
.disc-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.disc-table th { text-align: left; color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .6px; padding: 6px 6px; border-bottom: 1px solid var(--line); }
.disc-table td { padding: 9px 6px; border-bottom: 1px solid rgba(255,255,255,.04); }
.disc-table td:nth-child(2) { font-weight: 800; color: var(--text); }
.disc-table td:nth-child(3) { color: var(--success); font-weight: 700; }
.disc-table tr.active-tier { background: rgba(217,31,38,.12); }
.disc-table tr.active-tier td { color: var(--text); }
.disc-table tr.active-tier td:first-child { box-shadow: inset 3px 0 0 var(--accent); font-weight: 800; }
.guarantee { display: flex; align-items: center; gap: 11px; margin-top: 16px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; }
.guarantee .g-star { color: var(--accent-3); font-size: 20px; }
.guarantee b { display: block; font-size: 13px; }
.guarantee span { font-size: 11px; color: var(--muted); }
.finance-note { margin-top: 12px; font-size: 11px; color: var(--muted); text-align: center; }

@media (max-width: 1080px) {
  .xfer-layout { grid-template-columns: 1fr; }
  .xfer-guide, .xfer-discount { position: static; }
  .xfer-guide { order: 3; } .xfer-steps { order: 2; } .xfer-discount { order: 1; }
}
@media (max-width: 560px) {
  .size-head { display: none; }
  .size-row { grid-template-columns: 1fr 1fr; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 10px; }
  .sz-unit, .sz-total { font-size: 13px; }
}