/* ===================== TOKENS — DARK (default) ===================== */
:root{
  --bg-0: #0A0D14;
  --bg-1: #0E1219;
  --bg-2: #141923;

  /* Brighter silver/chrome — diamond-grade */
  --gold-deep:   #5A6470;
  --gold:        #C8D0DC;
  --gold-bright: #F2F6FB;
  --gold-pale:   #FFFFFF;

  --gold-grad: linear-gradient(135deg,
    #4A525E 0%,
    #8B95A4 18%,
    #D8DEE7 38%,
    #FFFFFF 50%,
    #D8DEE7 62%,
    #8B95A4 82%,
    #4A525E 100%);
  --gold-grad-soft: linear-gradient(135deg, rgba(200,208,220,0) 0%, rgba(220,228,240,.45) 50%, rgba(200,208,220,0) 100%);

  /* Strong iridescent — used liberally for prismatic accents */
  --iridescent: linear-gradient(115deg,
    #A8E8FF 0%,
    #C0AAFF 18%,
    #FF9BD8 36%,
    #FFD89B 54%,
    #B0FFAA 72%,
    #A8E8FF 100%);
  --iridescent-soft: linear-gradient(115deg,
    rgba(168,232,255,.5) 0%,
    rgba(192,170,255,.5) 25%,
    rgba(255,155,216,.5) 50%,
    rgba(176,255,170,.5) 75%,
    rgba(168,232,255,.5) 100%);

  /* Real gold — reserved for the "Recomandat" hierarchy moment only */
  --accent-gold: linear-gradient(135deg,#8B6F2D 0%, #D4B26A 28%, #F5D98C 50%, #D4B26A 72%, #8B6F2D 100%);

  --silver-deep:   #5A6470;
  --silver:        #C8D0DC;
  --silver-bright: #F2F6FB;
  --silver-grad: var(--gold-grad);

  /* Glass — brighter, more crystalline */
  --glass-bg: rgba(230, 240, 255, 0.05);
  --glass-bg-strong: rgba(230, 240, 255, 0.09);
  --glass-border: rgba(200, 215, 240, 0.22);
  --glass-border-strong: rgba(220, 235, 255, 0.42);
  --glass-edge: rgba(255, 255, 255, 0.22);
  --glass-edge-strong: rgba(255, 255, 255, 0.45);

  --ink: #EEF2F8;
  --ink-muted: rgba(238,242,248,.62);
  --ink-faint: rgba(238,242,248,.34);

  /* Brighter, more saturated ambient — feels alive */
  --ambient-1: rgba(140, 200, 255, .14);
  --ambient-2: rgba(180, 160, 255, .10);
  --ambient-3: rgba(255, 180, 220, .08);
  --grain-opacity: .22;
  --grain-blend: overlay;
  --vignette: radial-gradient(120% 80% at 50% 50%, transparent 55%, rgba(0,0,0,.5) 100%);

  --shadow-card: 0 30px 60px -20px rgba(0,0,0,.65), 0 1px 0 rgba(255,255,255,.08) inset;
  --shadow-soft: 0 12px 32px -10px rgba(200,220,255,.40);
  --shadow-strong: 0 18px 40px -10px rgba(220,235,255,.55);

  --maxw: 1320px;
  --pad: clamp(20px, 4vw, 56px);

  --font-display: "Italiana", serif;
  --font-italic:  "Cormorant Garamond", serif;
  --font-body:    "Manrope", system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ===================== TOKENS — LIGHT ===================== */
[data-theme="light"]{
  --bg-0: #F0F4FA;
  --bg-1: #E4EAF3;
  --bg-2: #D8E0EC;

  --gold-deep:   #1F2530;
  --gold:        #525C6B;
  --gold-bright: #131820;
  --gold-pale:   #2E3540;

  --gold-grad: linear-gradient(135deg,#131820 0%, #3A4252 18%, #6B7585 38%, #9CA5B6 50%, #6B7585 62%, #3A4252 82%, #131820 100%);
  --gold-grad-soft: linear-gradient(135deg, rgba(58,66,82,0) 0%, rgba(107,117,133,.30) 50%, rgba(58,66,82,0) 100%);

  --iridescent: linear-gradient(115deg, #6FB0D8 0%, #8B7CC8 18%, #C87BB0 36%, #D8A872 54%, #6BC890 72%, #6FB0D8 100%);
  --iridescent-soft: linear-gradient(115deg, rgba(111,176,216,.4) 0%, rgba(139,124,200,.4) 25%, rgba(200,123,176,.4) 50%, rgba(107,200,144,.4) 75%, rgba(111,176,216,.4) 100%);

  --accent-gold: linear-gradient(135deg,#5C4515 0%, #9A7A35 28%, #C9A961 50%, #9A7A35 72%, #5C4515 100%);

  --silver-deep:   #1F2530;
  --silver:        #525C6B;
  --silver-bright: #131820;
  --silver-grad: var(--gold-grad);

  --glass-bg: rgba(40, 55, 80, 0.045);
  --glass-bg-strong: rgba(40, 55, 80, 0.08);
  --glass-border: rgba(60, 80, 110, 0.20);
  --glass-border-strong: rgba(60, 80, 110, 0.38);
  --glass-edge: rgba(255, 255, 255, 0.65);
  --glass-edge-strong: rgba(255, 255, 255, 0.85);

  --ink: #0F141C;
  --ink-muted: rgba(15,20,28,.62);
  --ink-faint: rgba(15,20,28,.35);

  --ambient-1: rgba(140,180,225,.22);
  --ambient-2: rgba(180,160,225,.16);
  --ambient-3: rgba(110,140,180,.14);
  --grain-opacity: .14;
  --grain-blend: multiply;
  --vignette: radial-gradient(120% 80% at 50% 50%, transparent 55%, rgba(40,55,80,.18) 100%);

  --shadow-card: 0 30px 60px -20px rgba(40,55,80,.22), 0 1px 0 rgba(255,255,255,.6) inset;
  --shadow-soft: 0 12px 32px -10px rgba(60,90,140,.30);
  --shadow-strong: 0 18px 40px -10px rgba(60,90,140,.40);
}

/* ===================== BASE ===================== */
*{ box-sizing:border-box; margin:0; padding:0; }
html, body{ background: var(--bg-0); color: var(--ink); font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  transition: background .5s var(--ease), color .5s var(--ease);
}
html{ scroll-behavior: smooth; }
body{ overflow-x: hidden; line-height: 1.55; font-weight: 400; }
img{ display:block; max-width:100%; }
a{ color: inherit; text-decoration: none; }
button{ font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
::selection{ background: var(--gold); color: var(--bg-0); }

/* ===================== AMBIENT BACKGROUND ===================== */
.bg-stack{
  position: fixed; inset:0; z-index:-3; overflow:hidden;
  background:
    radial-gradient(1200px 800px at 15% -10%, var(--ambient-1), transparent 60%),
    radial-gradient(900px 600px at 110% 10%, var(--ambient-2), transparent 55%),
    radial-gradient(800px 800px at 50% 110%, var(--ambient-3), transparent 60%),
    var(--bg-0);
  transition: background .5s var(--ease);
}
.bg-grain{
  position: fixed; inset:0; z-index:-2; pointer-events:none;
  opacity: var(--grain-opacity); mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 .9  0 0 0 0 .7  0 0 0 .55 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  transition: opacity .5s var(--ease);
}
.bg-vignette{
  position: fixed; inset:0; z-index:-1; pointer-events:none;
  background: var(--vignette);
  transition: background .5s var(--ease);
}

/* ===================== DIAMOND SPARKLES ===================== */
.sparkles{
  position: fixed; inset: 0; z-index: -1;
  pointer-events: none; overflow: hidden;
}
.sparkle{
  position: absolute; width: 2px; height: 2px;
  background: var(--glass-edge-strong);
  border-radius: 50%;
  box-shadow:
    0 0 4px rgba(255,255,255,.95),
    0 0 8px rgba(200,220,255,.7),
    0 0 16px rgba(160,200,255,.5);
  animation: twinkle 4s ease-in-out infinite;
}
[data-theme="light"] .sparkle{
  background: rgba(60,80,120,.6);
  box-shadow:
    0 0 4px rgba(80,100,140,.6),
    0 0 8px rgba(100,140,200,.45),
    0 0 16px rgba(140,180,220,.25);
}
.sparkle.big{
  width: 3px; height: 3px;
}
.sparkle.tiny{
  width: 1.5px; height: 1.5px;
  animation-duration: 3s;
}
@keyframes twinkle{
  0%, 100% { opacity: 0; transform: scale(.5); }
  40%, 60% { opacity: 1; transform: scale(1.2); }
}

/* Diamond shapes — visible faceted gems (theme-aware) */
:root{
  --dia-1: rgba(255,255,255,0.95);
  --dia-2: rgba(220,235,255,0.78);
  --dia-3: rgba(168,222,255,0.62);
  --dia-4: rgba(192,170,255,0.55);
  --dia-stroke: rgba(255,255,255,0.85);
  --dia-edge: rgba(255,255,255,0.55);
  --dia-glow-1: rgba(200,220,255,0.55);
  --dia-glow-2: rgba(168,200,255,0.30);
}
[data-theme="light"]{
  --dia-1: rgba(80,110,160,0.45);
  --dia-2: rgba(100,140,190,0.40);
  --dia-3: rgba(120,160,210,0.36);
  --dia-4: rgba(150,120,200,0.32);
  --dia-stroke: rgba(40,60,100,0.50);
  --dia-edge: rgba(60,90,140,0.40);
  --dia-glow-1: rgba(120,140,200,0.30);
  --dia-glow-2: rgba(140,160,220,0.18);
}

.diamond{
  position: absolute;
  pointer-events: none;
  opacity: 0;
  animation:
    diamond-appear 1.4s var(--ease) forwards,
    diamond-float var(--dur, 8s) ease-in-out infinite,
    diamond-shimmer var(--shim, 4s) ease-in-out infinite;
}
.diamond svg{
  display: block; width: 100%; height: 100%;
  filter:
    drop-shadow(0 0 5px var(--dia-glow-1))
    drop-shadow(0 0 12px var(--dia-glow-2));
}
.diamond svg .d1{ fill: var(--dia-1); }
.diamond svg .d2{ fill: var(--dia-2); }
.diamond svg .d3{ fill: var(--dia-3); }
.diamond svg .d4{ fill: var(--dia-4); }
.diamond svg .dl{ fill: none; stroke: var(--dia-stroke); stroke-width: 0.5; }
.diamond svg .le{ stroke: var(--dia-edge); stroke-width: 0.4; }
.diamond svg .la{ stroke: var(--dia-edge); stroke-width: 0.25; }
.diamond.big svg{
  filter:
    drop-shadow(0 0 8px var(--dia-glow-1))
    drop-shadow(0 0 20px var(--dia-glow-2));
}
@keyframes diamond-appear{
  to{ opacity: var(--opacity, 0.55); }
}
@keyframes diamond-float{
  0%, 100%{ transform: translate(0, 0) rotate(var(--rot, 0deg)); }
  50%{ transform: translate(var(--dx, 5px), -10px) rotate(calc(var(--rot, 0deg) + 6deg)); }
}
@keyframes diamond-shimmer{
  0%, 100%{ filter: brightness(1); }
  50%{ filter: brightness(1.35); }
}

/* 4-point sparkle bursts */
.diamond-burst{
  position: absolute;
  pointer-events: none;
  opacity: 0;
  animation:
    burst-appear 1s var(--ease) forwards,
    burst-pulse 3s ease-in-out infinite;
}
.diamond-burst svg{
  display: block; width: 100%; height: 100%;
  filter:
    drop-shadow(0 0 4px var(--dia-glow-1))
    drop-shadow(0 0 10px var(--dia-glow-2));
}
.diamond-burst svg path{
  fill: var(--dia-1);
}
@keyframes burst-appear{
  to{ opacity: var(--opacity, 0.75); }
}
@keyframes burst-pulse{
  0%, 100%{ transform: scale(.7) rotate(0deg); opacity: var(--opacity, 0.75); }
  50%{ transform: scale(1.15) rotate(45deg); opacity: 1; }
}

/* ===================== UTILITY: Glass top-edge gloss ===================== */
.glass-edge-top{
  position: relative;
}
.glass-edge-top::after{
  content:""; position: absolute;
  top: 0; left: 12%; right: 12%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--glass-edge-strong) 50%,
    transparent 100%);
  pointer-events: none;
  z-index: 2;
  border-radius: inherit;
}

/* ===================== LAYOUT ===================== */
.wrap{ max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }

/* ===================== NAV ===================== */
.nav{
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding: 18px var(--pad);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  transition: backdrop-filter .4s, background .4s, padding .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}
.nav.scrolled{
  padding: 12px var(--pad);
  background: var(--bg-0);
  border-bottom-color: var(--glass-border);
}
/* Apply padding-top on body so fixed nav does not overlap content. */
body{ padding-top: 78px; }
.home, .page-template-template-home{ padding-top: 0; } /* hero handles its own spacing */
.nav-brand{
  display:flex; align-items:center; gap:12px;
  font-family: var(--font-display); font-size: 22px; letter-spacing:.04em;
}
.brand-mark{
  width: 38px; height: 38px;
  position: relative;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.brand-mark img{
  width: 100%; height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 0 8px rgba(200,215,235,.25));
}
[data-theme="light"] .brand-mark img{
  filter: drop-shadow(0 0 6px rgba(40,50,65,.2)) invert(.85) hue-rotate(180deg) brightness(.92);
}
.nav-links{ display:flex; gap: 4px; align-items:center; }
.nav-links a{
  font-size: 13px; padding: 10px 16px; color: var(--ink-muted);
  border-radius: 999px; transition: color .3s, background .3s;
  letter-spacing:.02em; position: relative;
}
.nav-links a:hover{ color: var(--gold-bright); background: var(--glass-bg-strong); }
.nav-links a.active{ color: var(--gold-bright); }
.nav-links a.active::after{
  content:""; position:absolute; bottom: 4px; left: 50%; transform: translateX(-50%);
  width: 4px; height: 4px; border-radius:50%; background: var(--gold);
}
.nav-right{ display: flex; align-items: center; gap: 10px; }

/* Theme toggle */
.theme-toggle{
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--glass-border-strong);
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  display: grid; place-items: center;
  transition: border-color .3s, background .3s, transform .5s var(--ease);
  position: relative;
}
.theme-toggle:hover{ border-color: var(--gold); transform: rotate(15deg); }
.theme-toggle svg{ width: 18px; height: 18px; stroke: var(--gold-bright); fill: none; stroke-width: 1.5; transition: opacity .3s; }
.theme-toggle .sun{ position: absolute; }
.theme-toggle .moon{ position: absolute; }
[data-theme="dark"] .theme-toggle .sun,
:root:not([data-theme="light"]) .theme-toggle .sun{ opacity: 0; }
[data-theme="dark"] .theme-toggle .moon,
:root:not([data-theme="light"]) .theme-toggle .moon{ opacity: 1; }
[data-theme="light"] .theme-toggle .sun{ opacity: 1; }
[data-theme="light"] .theme-toggle .moon{ opacity: 0; }

.nav-cta{
  font-size: 13px; padding: 11px 20px; border-radius: 999px;
  border: 1px solid var(--glass-border-strong);
  background: linear-gradient(135deg, color-mix(in srgb, var(--gold-bright) 18%, transparent), color-mix(in srgb, var(--gold-deep) 12%, transparent));
  color: var(--ink);
  transition: transform .3s var(--ease), box-shadow .3s, border-color .3s;
  letter-spacing:.04em;
}
.nav-cta:hover{
  transform: translateY(-1px);
  border-color: var(--gold);
  box-shadow: var(--shadow-soft);
}

/* ===== NAV ACCOUNT CHIP ===== */
.nav-account{ position: relative; }
.nav-account-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 9px 16px 9px 12px;
  border-radius: 999px;
  border: 1px solid var(--glass-border-strong);
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--ink);
  letter-spacing: .03em;
  transition: border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
  text-decoration: none;
  cursor: pointer;
}
.nav-account-btn:hover{
  border-color: var(--gold);
  background: var(--glass-bg-strong);
  transform: translateY(-1px);
}
.nav-account-avatar-wrap{
  width: 24px; height: 24px;
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid var(--glass-edge-strong);
  background: var(--glass-bg-strong);
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.nav-account-avatar-wrap img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.nav-account-btn .nav-account-caret{
  width: 12px; height: 12px;
  opacity: .5;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.nav-account:hover .nav-account-btn .nav-account-caret{
  transform: rotate(180deg);
  opacity: .9;
}

/* ===== NAV ITEM WITH MEGAMENU (Pachete) ===== */
.nav-item-mega{ position: relative; }
.nav-item-mega > a{
  position: relative;
}
.nav-item-mega > a::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 0;
  height: 2px;
  background: var(--gold-grad);
  transition: width .35s var(--ease), left .35s var(--ease);
}
.nav-item-mega:hover > a::after{
  width: calc(100% - 24px);
  left: 12px;
}

/* ===== MEGAMENU PANEL (shared base) ===== */
.mega-panel{
  position: absolute;
  top: calc(100% + 18px);
  border-radius: 22px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-1) 92%, transparent) 0%, color-mix(in srgb, var(--bg-2) 94%, transparent) 100%);
  border: 1px solid var(--glass-border-strong);
  backdrop-filter: blur(2px) saturate(110%);
  -webkit-backdrop-filter: blur(2px) saturate(110%);
  box-shadow:
    inset 0 1px 0 var(--glass-edge-strong),
    inset 0 -1px 0 rgba(0,0,0,.08),
    0 24px 60px -16px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.02);
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s;
  z-index: 90;
}
.nav-item-mega:hover .mega-panel,
.nav-account:hover .mega-panel,
.mega-panel:hover{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
/* invisible bridge so the gap between trigger and panel doesn't close it */
.mega-panel::before{
  content: "";
  position: absolute;
  top: -20px; left: 0; right: 0; height: 20px;
}

/* Pachete megamenu - wide centered */
.mega-panel-wide{
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: min(820px, calc(100vw - 80px));
  padding: 28px;
}
.nav-item-mega:hover .mega-panel-wide,
.mega-panel-wide:hover{
  transform: translateX(-50%) translateY(0);
}

.mega-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.mega-col-head{
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--glass-border);
}
.mega-eyebrow{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.mega-col-title{
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: .01em;
}
.mega-item{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid transparent;
  text-decoration: none;
  color: var(--ink);
  transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
  margin-bottom: 6px;
}
.mega-item:hover{
  border-color: var(--glass-border-strong);
  background: var(--glass-bg);
  transform: translateX(2px);
}
.mega-item-badge{
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #5fd3a3;
  box-shadow: 0 0 8px rgba(95,211,163,.55);
  position: relative;
}
.mega-item-badge.is-launch{
  background: #c8b56b;
  box-shadow: 0 0 6px rgba(200,181,107,.35);
  opacity: .85;
}
.mega-item-name{
  font-family: var(--font-display);
  font-size: 14.5px;
  color: var(--ink);
  margin-bottom: 2px;
  letter-spacing: .01em;
}
.mega-item-desc{
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: .02em;
  font-family: var(--font-mono);
  text-transform: uppercase;
}
.mega-item-price{
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--gold-bright);
  letter-spacing: .01em;
  white-space: nowrap;
}
.mega-item-price small{
  font-size: 10px;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  margin-left: 2px;
}
.mega-footer{
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--glass-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mega-cta{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-bright);
  text-decoration: none;
  transition: gap .3s var(--ease);
}
.mega-cta:hover{ gap: 12px; }
.mega-footer-note{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* Account megamenu - right-aligned, narrower */
.mega-panel-account{
  right: 0;
  width: 320px;
  padding: 20px;
}
.mega-account-header{
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: 14px;
}
.mega-account-avatar{
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--glass-edge-strong);
  box-shadow: inset 0 0 0 2px var(--bg-1);
}
.mega-account-name{
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 2px;
}
.mega-account-email{
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: .01em;
}
.mega-account-stats{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.mega-stat{
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  text-align: center;
}
.mega-stat-num{
  font-family: var(--font-display);
  font-size: 22px;
  color: var(--gold-bright);
  line-height: 1;
  margin-bottom: 4px;
}
.mega-stat-label{
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.mega-account-links{
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: 12px;
}
.mega-link{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink-muted);
  font-size: 13px;
  letter-spacing: .02em;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.mega-link svg{
  width: 16px; height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .7;
}
.mega-link:hover{
  background: var(--glass-bg);
  color: var(--gold-bright);
}
.mega-link-tag{
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--glass-bg);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
}
.mega-logout{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink-faint);
  font-size: 13px;
  letter-spacing: .02em;
  transition: color .25s, background .25s;
}
.mega-logout svg{
  width: 16px; height: 16px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.mega-logout:hover{
  color: #ff8585;
  background: rgba(255,80,80,.06);
}

@media (max-width: 980px){
  .nav-links{ display:none; }
  .nav-account{ display: none; }
  .mega-panel{ display: none; }
}
@media (max-width: 540px){
  .nav-cta{ display:none; }
}

/* ===================== PAGES ROUTING ===================== */
.page{ display: block; opacity: 1; } /* tatarr-silver original .page hide removed — was causing black page */
.page.active{ display: block; opacity: 1; animation: pageIn .7s var(--ease) forwards; }
@keyframes pageIn{
  from{ opacity:0; transform: translateY(12px); }
  to{ opacity:1; transform: none; }
}

/* ===================== BUTTONS ===================== */
.btn{
  display:inline-flex; align-items:center; gap: 10px;
  padding: 16px 28px; border-radius: 999px;
  font-size: 14px; letter-spacing:.05em; font-weight: 500;
  transition: transform .3s var(--ease), box-shadow .3s, background .3s, color .3s, border-color .3s;
  position: relative; overflow:hidden;
}
.btn-primary{
  background: var(--gold-grad);
  color: var(--bg-0); font-weight: 600;
  box-shadow: var(--shadow-soft);
}
[data-theme="light"] .btn-primary{ color: #FFF8EA; }
.btn-primary:hover{ transform: translateY(-2px); box-shadow: var(--shadow-strong); }
.btn-ghost{
  border: 1px solid var(--glass-border-strong);
  background: var(--glass-bg);
  backdrop-filter: blur(10px);
  color: var(--ink);
}
.btn-ghost:hover{ border-color: var(--gold); color: var(--gold-bright); }
.btn .arrow{ transition: transform .3s var(--ease); }
.btn:hover .arrow{ transform: translateX(4px); }

/* ===================== HERO (Home) ===================== */
.hero{
  position: relative; padding: 160px var(--pad) 80px;
  min-height: 100vh; display: flex; align-items: center;
  overflow: hidden;
}
.hero-inner{
  max-width: var(--maxw); margin: 0 auto; width:100%;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 60px; align-items: center;
}
@media (max-width: 980px){ .hero-inner{ grid-template-columns: 1fr; gap: 40px; } }

.eyebrow{
  display:inline-flex; align-items:center; gap: 10px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing:.3em; text-transform: uppercase;
  color: var(--gold-bright); padding: 7px 14px;
  border: 1px solid var(--glass-border-strong); border-radius: 999px;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow:
    inset 0 1px 0 var(--glass-edge-strong),
    inset 0 -1px 0 rgba(0,0,0,.10);
}
.eyebrow::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background: var(--gold-bright);
  box-shadow: 0 0 12px var(--gold-bright);
  animation: pulse 1.8s var(--ease) infinite;
}
@keyframes pulse{ 0%,100%{ opacity: 1; transform: scale(1); } 50%{ opacity:.45; transform: scale(1.4); } }
@keyframes rise{ to{ transform: translateY(0); } }

.gold-it{
  background: var(--gold-grad);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  font-style: italic; font-family: var(--font-italic); font-weight: 500;
}

.hero-lead{
  font-size: clamp(15px, 1.2vw, 18px);
  color: var(--ink-muted); max-width: 520px; margin-bottom: 36px;
  opacity:0; animation: fade 1s var(--ease) .7s forwards;
}
@keyframes fade{ to{ opacity:1; } }
.hero-actions{ display:flex; gap: 14px; flex-wrap: wrap; opacity:0; animation: fade 1s var(--ease) .85s forwards; }

/* Hero visual */
.hero-visual{
  position: relative; aspect-ratio: 1/1; max-width: 540px; margin-left: auto;
  opacity:0; animation: fade 1.2s var(--ease) .4s forwards;
}

/* Aurora behind photo */
.hero-photo-aurora{
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: conic-gradient(from 0deg at 50% 50%,
    rgba(168,232,255,.40) 0deg,
    rgba(192,170,255,.40) 60deg,
    rgba(255,155,216,.40) 120deg,
    rgba(255,216,155,.40) 180deg,
    rgba(176,255,170,.40) 240deg,
    rgba(168,232,255,.40) 360deg);
  filter: blur(60px);
  animation: aurora-rotate 18s linear infinite;
  z-index: 0;
  pointer-events: none;
}
[data-theme="light"] .hero-photo-aurora{
  background: conic-gradient(from 0deg at 50% 50%,
    rgba(111,176,216,.45) 0deg,
    rgba(139,124,200,.45) 60deg,
    rgba(200,123,176,.45) 120deg,
    rgba(216,168,114,.45) 180deg,
    rgba(107,200,144,.45) 240deg,
    rgba(111,176,216,.45) 360deg);
}

/* Vinyl ring around photo */
.hero-vinyl-ring{
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      rgba(0,0,0,0.50) 0 1.5px,
      rgba(220,235,255,0.05) 1.5px 4px);
  -webkit-mask: radial-gradient(circle at 50% 50%, transparent 84%, black 86%, black 99%, transparent 100%);
  mask: radial-gradient(circle at 50% 50%, transparent 84%, black 86%, black 99%, transparent 100%);
  animation: spin 48s linear infinite;
  z-index: 1;
  opacity: .65;
  pointer-events: none;
}
[data-theme="light"] .hero-vinyl-ring{
  background:
    repeating-radial-gradient(circle at 50% 50%,
      rgba(15,20,30,0.35) 0 1.5px,
      rgba(80,100,140,0.10) 1.5px 4px);
  opacity: .4;
}

/* Photo frame */
.hero-photo-frame{
  position: absolute;
  inset: 16%;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--glass-border-strong);
  box-shadow:
    inset 0 2px 0 var(--glass-edge-strong),
    inset 0 -2px 0 rgba(0,0,0,.18),
    0 40px 80px -20px rgba(0,0,0,.65),
    0 0 80px -20px rgba(200,220,255,.28);
  z-index: 2;
  animation: float 6s ease-in-out infinite;
  background: var(--glass-bg-strong);
}
.hero-photo-frame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.88) brightness(1.02) contrast(1.05);
  display: block;
}
[data-theme="light"] .hero-photo-frame img{
  filter: saturate(.92) brightness(1.0) contrast(1.0);
}

/* Floating data pills */
.data-pill{
  position: absolute;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-strong);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow:
    inset 0 1px 0 var(--glass-edge-strong),
    inset 0 -1px 0 rgba(0,0,0,.1),
    0 16px 32px -8px rgba(0,0,0,.55);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.data-pill.stat{
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.data-pill .dot{
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #5EE89A;
  box-shadow: 0 0 10px rgba(94,232,154,.9), 0 0 20px rgba(94,232,154,.5);
  animation: pulse 1.8s var(--ease) infinite;
  flex-shrink: 0;
}
.data-pill .pill-text{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-bright);
}
.data-pill .val{
  font-family: var(--font-display);
  font-size: 26px;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}
.data-pill .lbl{
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.data-pill.p-tl{ top: 4%; left: -4%; animation: float 5s ease-in-out infinite; }
.data-pill.p-tr{ top: 22%; right: -10%; animation: float 5.5s ease-in-out -1.5s infinite; }
.data-pill.p-bl{ bottom: 26%; left: -10%; animation: float 6s ease-in-out -3s infinite; }
.data-pill.p-br{ bottom: 6%; right: -4%; animation: float 5s ease-in-out -2s infinite; }

/* Name caption pill */
.hero-name{
  position: absolute;
  bottom: -6%;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  z-index: 5;
  padding: 12px 24px;
  border-radius: 999px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-strong);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  box-shadow:
    inset 0 1px 0 var(--glass-edge-strong),
    inset 0 -1px 0 rgba(0,0,0,.1),
    0 16px 32px -8px rgba(0,0,0,.5);
  white-space: nowrap;
}
.hero-name-val{
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1;
  margin-bottom: 4px;
}
.hero-name-role{
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold-bright);
}

/* Constellation sparkles in hero */
.hero-net{
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: .35;
  z-index: 0;
}
.hero-net::before{
  content:"";
  position: absolute; inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, var(--silver-bright), transparent),
    radial-gradient(1px 1px at 28% 42%, var(--silver-bright), transparent),
    radial-gradient(1.5px 1.5px at 55% 22%, var(--silver-bright), transparent),
    radial-gradient(1px 1px at 78% 38%, var(--silver-bright), transparent),
    radial-gradient(1.5px 1.5px at 88% 78%, var(--silver-bright), transparent),
    radial-gradient(1px 1px at 35% 85%, var(--silver-bright), transparent),
    radial-gradient(1px 1px at 65% 92%, var(--silver-bright), transparent),
    radial-gradient(1.5px 1.5px at 8% 65%, var(--silver-bright), transparent);
  animation: stars 6s ease-in-out infinite;
}
@keyframes stars{ 0%, 100%{ opacity: .35; } 50%{ opacity: .6; } }
@keyframes aurora-rotate{ to{ transform: rotate(360deg); } }
@keyframes float{
  0%, 100%{ transform: translateY(0) rotate(0deg); }
  50%{ transform: translateY(-10px) rotate(.4deg); }
}
@keyframes shimmer{
  0%, 100%{ opacity: .65; transform: scale(1); }
  50%{ opacity: 1; transform: scale(1.06); }
}

/* Rotating word */
.rotating-word{
  display: inline-block;
  transition: opacity .35s var(--ease);
}
.rotating-word.changing{
  opacity: 0;
}

/* Music tagline strip below subtitle */
.hero-tag{
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 32px;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-strong);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    inset 0 1px 0 var(--glass-edge-strong),
    0 10px 24px -8px rgba(0,0,0,.4);
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 15px;
  color: var(--ink);
}
.hero-tag .note{
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: normal;
  font-size: 18px;
  font-family: var(--font-display);
}

@media (max-width: 980px){
  .hero-visual{ max-width: 380px; margin: 40px auto 80px; }
  .data-pill.p-tl{ top: 0%; left: -2%; }
  .data-pill.p-tr{ top: 18%; right: -4%; }
  .data-pill.p-bl{ bottom: 28%; left: -4%; }
  .data-pill.p-br{ bottom: 4%; right: -2%; }
}
@media (max-width: 540px){
  .data-pill{ padding: 8px 12px; }
  .data-pill .val{ font-size: 20px; }
  .data-pill .lbl, .data-pill .pill-text{ font-size: 9px; letter-spacing: .15em; }
  .hero-name{ padding: 10px 20px; }
  .hero-name-val{ font-size: 18px; }
}

.hero-card{
  position: absolute; right: -10%; bottom: 8%; width: 260px;
  padding: 20px; border-radius: 18px;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border: 1px solid var(--glass-border-strong);
  box-shadow:
    inset 0 1px 0 var(--glass-edge-strong),
    inset 0 -1px 0 rgba(0,0,0,.12),
    var(--shadow-card);
  z-index: 3;
}
.hero-card .label{
  font-family: var(--font-mono); font-size: 10px; letter-spacing:.25em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 10px;
}
.hero-card .value{ font-family: var(--font-display); font-size: 38px; line-height: 1; }
.hero-card .meta{ font-size: 12px; color: var(--ink-muted); margin-top: 8px; }
.hero-card .bars{ display: flex; gap: 3px; margin-top: 14px; align-items: flex-end; height: 32px; }
.hero-card .bars span{ flex:1; background: var(--gold-grad); border-radius: 2px; animation: eq .9s var(--ease) infinite alternate; }
.hero-card .bars span:nth-child(1){ height: 60%; }
.hero-card .bars span:nth-child(2){ animation-delay: .1s; height: 80%; }
.hero-card .bars span:nth-child(3){ animation-delay: .25s; height: 40%; }
.hero-card .bars span:nth-child(4){ animation-delay: .15s; height: 90%; }
.hero-card .bars span:nth-child(5){ animation-delay: .3s; height: 55%; }
.hero-card .bars span:nth-child(6){ animation-delay: .05s; height: 75%; }
.hero-card .bars span:nth-child(7){ animation-delay: .2s; height: 45%; }
.hero-card .bars span:nth-child(8){ animation-delay: .35s; height: 85%; }
@keyframes eq{ to{ height: 20%; } }
@media (max-width: 980px){ .hero-visual{ max-width: 360px; margin: 0 auto; } .hero-card{ right: -5%; } }
@media (max-width: 520px){ .hero-card{ width: 200px; right: -10px; } .hero-card .value{ font-size: 28px; } }

.scroll-cue{
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 10px; letter-spacing:.3em;
  color: var(--ink-faint); text-transform: uppercase;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.scroll-cue::after{
  content:""; width: 1px; height: 32px;
  background: linear-gradient(to bottom, var(--gold), transparent);
  animation: scrollline 2s var(--ease) infinite;
}
@keyframes scrollline{
  0%{ transform: scaleY(0); transform-origin: top; }
  50%{ transform: scaleY(1); transform-origin: top; }
  51%{ transform: scaleY(1); transform-origin: bottom; }
  100%{ transform: scaleY(0); transform-origin: bottom; }
}

/* ===================== MARQUEE ===================== */
.marquee{
  padding: 20px 0 28px;
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 80px, black calc(100% - 80px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, black 80px, black calc(100% - 80px), transparent 100%);
}
.marquee-track{ display: flex; gap: 60px; animation: scroll-x 36s linear infinite; width: max-content; }
.marquee:hover .marquee-track{ animation-play-state: paused; }
.marquee-item{
  font-family: var(--font-display); font-size: 28px;
  color: var(--ink-muted); display:flex; align-items:center; gap: 60px;
  white-space: nowrap;
}
.marquee-item .dot{
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold-bright);
  flex-shrink: 0;
  opacity: .7;
}
@keyframes scroll-x{ to{ transform: translateX(-50%); } }

/* ===================== SECTION COMMON ===================== */
section.block{ padding: 72px 0; position: relative; }
section.block.compact{ padding: 60px 0; }
.section-head{
  display: grid; grid-template-columns: 1fr 1.6fr; gap: 40px; align-items: end;
  margin-bottom: 64px;
}
@media (max-width: 880px){ .section-head{ grid-template-columns: 1fr; gap: 24px; } }

/* Centered section header variant — like tune-score "Why Choose..." */
.section-head.center{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  margin-bottom: 40px;
}
.section-head.center .section-desc{ max-width: 540px; }

/* Eyebrow pill — well-defined glass with icon */
.eyebrow-pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 14px;
  border-radius: 999px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-strong);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    inset 0 1px 0 var(--glass-edge-strong),
    inset 0 -1px 0 rgba(0,0,0,.08),
    0 8px 18px -6px rgba(0,0,0,.35);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
}
.eyebrow-pill svg{
  width: 14px; height: 14px;
  fill: none;
  stroke: var(--gold-bright);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.eyebrow-pill .ic-fill{
  fill: var(--gold-bright);
  stroke: none;
}

/* Keep old .section-label as fallback for sections using older markup */
.section-label{
  font-family: var(--font-mono); font-size: 11px; letter-spacing:.3em;
  text-transform: uppercase; color: var(--gold-bright);
  display: flex; align-items: center; gap: 12px;
}
.section-label::before{ content:""; width: 28px; height: 1px; background: var(--gold-grad); }
.section-title{
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px); line-height: 1.02; letter-spacing:-.01em;
  margin-top: 6px; font-weight: 400;
}
.section-title em, h1 em, h2 em{
  font-family: var(--font-italic); font-style: italic;
  background: var(--gold-grad);
  -webkit-background-clip:text; background-clip:text; color: transparent;
}
.section-desc{ font-size: 16px; color: var(--ink-muted); max-width: 560px; line-height: 1.65; }

/* Feature rail — single-row marquee (like ticker tape) */
.feature-rail{
  position: relative;
  margin-top: 32px;
  overflow: hidden;
  padding: 12px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, black 80px, black calc(100% - 80px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, black 80px, black calc(100% - 80px), transparent 100%);
}
.feature-track{
  display: flex;
  gap: 14px;
  width: max-content;
  animation: feature-scroll 40s linear infinite;
}
.feature-rail:hover .feature-track{
  animation-play-state: paused;
}
@keyframes feature-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}
.feature-pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 22px;
  border-radius: 999px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow:
    inset 0 1px 0 var(--glass-edge);
  font-size: 14.5px;
  color: var(--ink);
  font-weight: 500;
  transition: background .25s var(--ease), border-color .25s var(--ease);
  cursor: default;
  white-space: nowrap;
  flex-shrink: 0;
}
.feature-pill:hover{
  background: var(--glass-bg-strong);
  border-color: var(--glass-border-strong);
}
.feature-pill svg{
  width: 16px; height: 16px;
  fill: none;
  stroke: var(--gold-bright);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}
@media (max-width: 540px){
  .feature-pill{ padding: 10px 18px; font-size: 13px; }
  .feature-pill svg{ width: 14px; height: 14px; }
  .feature-rail{
    -webkit-mask-image: linear-gradient(90deg, transparent 0, black 40px, black calc(100% - 40px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, black 40px, black calc(100% - 40px), transparent 100%);
  }
}

.reveal{ opacity:0; transform: translateY(30px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in{ opacity:1; transform:none; }

/* ===================== STATS ===================== */
.stats{
  display: grid; grid-template-columns: repeat(4,1fr); gap: 0;
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  background: var(--glass-bg);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow:
    inset 0 1px 0 var(--glass-edge-strong),
    inset 0 -1px 0 rgba(0,0,0,.10),
    0 28px 56px -24px rgba(0,0,0,.45);
  overflow: hidden;
  margin-top: -40px;
}
.stat{ padding: 36px 28px; border-right: 1px solid var(--glass-border); }
.stat:last-child{ border-right: 0; }
.stat .num{
  font-family: var(--font-display);
  font-size: clamp(40px, 4.5vw, 64px); line-height: 1;
  background: var(--gold-grad);
  -webkit-background-clip:text; background-clip:text; color: transparent;
}
.stat .label{ font-size: 13px; color: var(--ink-muted); margin-top: 10px; letter-spacing:.04em; }
@media (max-width: 880px){
  .stats{ grid-template-columns: repeat(2,1fr); }
  .stat:nth-child(2){ border-right: 0; }
  .stat:nth-child(1), .stat:nth-child(2){ border-bottom: 1px solid var(--glass-border); }
}

/* ===================== BENEFITS ===================== */
.benefits{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 880px){ .benefits{ grid-template-columns: 1fr; } }
.b-card{
  position: relative; padding: 32px;
  border-radius: 22px;
  background: var(--glass-bg);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  border: 1px solid var(--glass-border);
  box-shadow:
    inset 0 1px 0 var(--glass-edge-strong),
    inset 0 -1px 0 rgba(0,0,0,.15),
    0 30px 60px -30px rgba(0,0,0,.5);
  overflow: hidden;
  transition: transform .5s var(--ease), border-color .5s, background .5s, box-shadow .5s;
}
.b-card::before{
  content:""; position: absolute; inset: 0;
  background: radial-gradient(400px 200px at var(--mx,50%) var(--my,0%), var(--ambient-1), transparent 60%);
  opacity: 0; transition: opacity .5s; pointer-events: none;
}
.b-card::after{
  content:""; position: absolute; top: -100%; left: -50%; width: 200%; height: 100%;
  background: linear-gradient(115deg,
    transparent 0%,
    transparent 40%,
    rgba(255,255,255,.10) 48%,
    var(--glass-edge-strong) 50%,
    rgba(255,255,255,.10) 52%,
    transparent 60%,
    transparent 100%);
  transform: translateY(0) rotate(0);
  transition: transform 1s var(--ease);
  pointer-events: none;
  opacity: .7;
}
.b-card:hover{
  transform: translateY(-4px);
  border-color: var(--glass-border-strong);
  background: var(--glass-bg-strong);
  box-shadow:
    inset 0 1px 0 var(--glass-edge-strong),
    inset 0 -1px 0 rgba(0,0,0,.15),
    0 40px 80px -30px rgba(180,200,255,.25);
}
.b-card:hover::before{ opacity: 1; }
.b-card:hover::after{ transform: translateY(250%) rotate(0); }
.b-num{ font-family: var(--font-mono); font-size: 11px; letter-spacing:.3em; color: var(--gold); margin-bottom: 24px; }
.b-icon{
  width: 56px; height: 56px; border-radius: 16px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--ambient-1), var(--ambient-3));
  border: 1px solid var(--glass-border-strong);
  margin-bottom: 28px;
}
.b-icon svg{ width: 26px; height: 26px; stroke: var(--gold-bright); fill: none; stroke-width: 1.5; }
.b-title{ font-family: var(--font-display); font-size: 26px; margin-bottom: 12px; font-weight: 400; }
.b-body{ color: var(--ink-muted); font-size: 14.5px; line-height: 1.65; }
.b-chips{ display:flex; gap: 8px; margin-top: 22px; flex-wrap: wrap; }
.chip{
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing:.18em;
  text-transform: uppercase; color: var(--gold-bright);
  padding: 6px 12px; border: 1px solid var(--glass-border); border-radius: 999px;
  background: var(--glass-bg-strong);
  box-shadow: inset 0 1px 0 var(--glass-edge);
}

/* ===================== BENEFIT VISUALIZATIONS — musical 3D elements ===================== */
.b-viz{
  position: relative;
  width: 100%;
  height: 200px;
  margin-bottom: 28px;
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: 16px;
  background:
    radial-gradient(ellipse at 50% 50%, var(--ambient-2) 0%, transparent 70%);
}

/* Floating glass pill labels */
.viz-pill{
  position: absolute;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-strong);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .25em;
  color: var(--gold-bright);
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 var(--glass-edge-strong),
    inset 0 -1px 0 rgba(0,0,0,.1),
    0 12px 24px -8px rgba(0,0,0,.4);
  z-index: 4;
  white-space: nowrap;
}
.viz-pill .live-dot{
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #5EE89A;
  box-shadow: 0 0 8px rgba(94,232,154,.9), 0 0 16px rgba(94,232,154,.5);
  margin-right: 8px;
  vertical-align: middle;
  animation: pulse 1.8s var(--ease) infinite;
}
.viz-pill-tl{ top: 14px; left: 14px; }
.viz-pill-tr{ top: 14px; right: 14px; }
.viz-pill-bl{ bottom: 14px; left: 14px; }
.viz-pill-br{ bottom: 14px; right: 14px; }

/* --- VIZ: VINYL --- */
.viz-vinyl{
  width: 170px;
  height: 170px;
  border-radius: 50%;
  position: relative;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      rgba(0,0,0,0.72) 0 1.5px,
      rgba(220,235,255,0.06) 1.5px 4px);
  border: 1px solid var(--glass-border-strong);
  box-shadow:
    inset 0 1px 0 var(--glass-edge-strong),
    inset 0 -2px 4px rgba(0,0,0,.4),
    0 20px 40px -10px rgba(0,0,0,.55);
  animation: spin 28s linear infinite;
}
[data-theme="light"] .viz-vinyl{
  background:
    repeating-radial-gradient(circle at 50% 50%,
      rgba(15,20,30,0.68) 0 1.5px,
      rgba(80,100,140,0.18) 1.5px 4px);
}
.viz-vinyl::before{
  content: "";
  position: absolute;
  inset: 32%;
  border-radius: 50%;
  background: var(--gold-grad);
  box-shadow:
    inset 0 1px 0 var(--glass-edge-strong),
    inset 0 -1px 0 rgba(0,0,0,.2),
    0 0 24px rgba(200,220,255,.22);
}
.viz-vinyl::after{
  content: "";
  position: absolute;
  inset: 47%;
  border-radius: 50%;
  background: var(--bg-0);
  box-shadow: inset 0 0 6px rgba(0,0,0,.6);
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* --- VIZ: EQ BARS (vertical equalizer) --- */
.viz-eq{
  display: flex;
  gap: 10px;
  align-items: flex-end;
  height: 150px;
  padding: 0 24px;
}
.viz-eq span{
  width: 16px;
  background: var(--gold-grad);
  border-radius: 8px;
  box-shadow:
    inset 0 1px 0 var(--glass-edge-strong),
    inset 0 -1px 0 rgba(0,0,0,.2),
    0 8px 16px -4px rgba(0,0,0,.4);
  animation: eq-pulse 1.4s ease-in-out infinite;
  transform-origin: bottom;
  position: relative;
}
.viz-eq span:nth-child(1){ height: 42%; animation-delay: 0s; }
.viz-eq span:nth-child(2){ height: 75%; animation-delay: .15s; }
.viz-eq span:nth-child(3){ height: 100%; animation-delay: .30s; }
.viz-eq span:nth-child(4){ height: 62%; animation-delay: .1s; }
.viz-eq span:nth-child(5){ height: 88%; animation-delay: .25s; }
.viz-eq span:nth-child(6){ height: 38%; animation-delay: .2s; }
@keyframes eq-pulse{
  0%, 100%{ transform: scaleY(1); }
  50%{ transform: scaleY(.5); }
}

/* --- VIZ: PLAY BUTTON + AUDIENCE AVATARS --- */
.viz-play-stage{
  position: relative;
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}
.viz-play{
  width: 88px; height: 88px;
  border-radius: 50%;
  background: var(--gold-grad);
  position: relative;
  z-index: 2;
  box-shadow:
    inset 0 1px 0 var(--glass-edge-strong),
    inset 0 -2px 2px rgba(0,0,0,.2),
    0 16px 40px -10px rgba(220,235,255,.40);
  animation: float 5s ease-in-out infinite;
}
.viz-play::before{
  content: "";
  position: absolute;
  top: 50%; left: 56%;
  transform: translate(-50%, -50%);
  width: 0; height: 0;
  border-style: solid;
  border-width: 14px 0 14px 22px;
  border-color: transparent transparent transparent rgba(10,13,20,.92);
}
[data-theme="light"] .viz-play::before{
  border-color: transparent transparent transparent rgba(240,244,250,.95);
}
.viz-play::after{
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  animation: ring-pulse 2.5s ease-out infinite;
}
@keyframes ring-pulse{
  0%{ transform: scale(1); opacity: .6; }
  100%{ transform: scale(1.6); opacity: 0; }
}
.viz-avatar{
  position: absolute;
  width: 44px; height: 44px;
  border-radius: 14px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-strong);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  display: grid;
  place-items: center;
  color: var(--gold-bright);
  font-family: var(--font-display);
  font-size: 18px;
  box-shadow:
    inset 0 1px 0 var(--glass-edge-strong),
    inset 0 -1px 0 rgba(0,0,0,.1),
    0 10px 24px -6px rgba(0,0,0,.45);
  z-index: 1;
}
.viz-avatar.a1{ top: 18%; left: 12%; animation: float 5s ease-in-out infinite; }
.viz-avatar.a2{ bottom: 18%; left: 24%; animation: float 5.5s ease-in-out -1.8s infinite; }
.viz-avatar.a3{ top: 28%; right: 12%; animation: float 4.8s ease-in-out -3s infinite; }

/* ===================== SERVICES (bento) ===================== */
.services{ display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(220px, auto); gap: 18px; }
.s-card{
  position: relative; border-radius: 22px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  box-shadow:
    inset 0 1px 0 var(--glass-edge-strong),
    inset 0 -1px 0 rgba(0,0,0,.12),
    0 20px 40px -20px rgba(0,0,0,.45);
  padding: 32px; overflow: hidden;
  transition: transform .5s var(--ease), border-color .5s, background .5s, box-shadow .5s;
}
.s-card::after{
  content:""; position: absolute; top: -100%; left: -50%; width: 200%; height: 100%;
  background: linear-gradient(115deg,
    transparent 40%,
    rgba(255,255,255,.08) 48%,
    var(--glass-edge) 50%,
    rgba(255,255,255,.08) 52%,
    transparent 60%);
  transition: transform 1.2s var(--ease);
  pointer-events: none;
}
.s-card:hover{
  transform: translateY(-3px);
  border-color: var(--glass-border-strong);
  background: var(--glass-bg-strong);
  box-shadow:
    inset 0 1px 0 var(--glass-edge-strong),
    inset 0 -1px 0 rgba(0,0,0,.12),
    0 30px 60px -20px rgba(180,200,255,.20);
}
.s-card:hover::after{ transform: translateY(280%); }
.s-card .s-num{ font-family: var(--font-mono); font-size: 11px; letter-spacing:.3em; color: var(--gold); display: block; margin-bottom: 16px; }
.s-card h3{ font-family: var(--font-display); font-size: 26px; font-weight: 400; margin-bottom: 12px; line-height: 1.1; }
.s-card p{ color: var(--ink-muted); font-size: 14.5px; line-height: 1.65; }
.s-card .s-tag{
  position: absolute; top: 24px; right: 24px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing:.25em;
  text-transform: uppercase; color: var(--gold-bright);
  padding: 5px 10px; border: 1px solid var(--glass-border-strong);
  border-radius: 999px; background: var(--glass-bg-strong);
  backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 var(--glass-edge-strong);
}

/* Chrome music icon — top right on small service cards */
.s-mini-ic{
  position: absolute;
  top: 24px; right: 24px;
  width: 52px; height: 52px;
  border-radius: 16px;
  display: grid; place-items: center;
  background: linear-gradient(145deg, var(--glass-bg-strong), var(--glass-bg));
  border: 1px solid var(--glass-border-strong);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    inset 0 1px 0 var(--glass-edge-strong),
    inset 0 -1px 0 rgba(0,0,0,.1),
    0 10px 24px -6px rgba(0,0,0,.35);
}
.s-mini-ic svg{
  width: 24px; height: 24px;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.s-mini-ic svg path,
.s-mini-ic svg circle,
.s-mini-ic svg polyline,
.s-mini-ic svg line,
.s-mini-ic svg rect{
  stroke: var(--gold-bright);
}
.s-card .s-arrow{
  position: absolute; bottom: 24px; right: 24px;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--glass-border-strong);
  display: grid; place-items: center;
  transition: background .3s, transform .3s var(--ease);
}
.s-card:hover .s-arrow{ background: var(--gold-grad); transform: rotate(-45deg); }
.s-card:hover .s-arrow svg path{ stroke: var(--bg-0); }
.s-card .s-arrow svg{ width: 14px; height: 14px; stroke: var(--gold-bright); fill: none; stroke-width: 1.5; transition: stroke .3s; }

.s-1{ grid-column: span 3; grid-row: span 2; }
.s-2{ grid-column: span 3; }
.s-3{ grid-column: span 3; }
.s-4{ grid-column: span 2; }
.s-5{ grid-column: span 2; }
.s-6{ grid-column: span 2; }

.s-1 .ornament{
  position: absolute; bottom: -40px; right: -40px;
  width: 280px; height: 280px; border-radius: 50%;
  background: var(--gold-grad-soft);
  filter: blur(40px); opacity: .6;
}
.s-1 .vinyl-mini{
  position: absolute;
  bottom: -110px; right: -110px;
  width: 340px; height: 340px;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle at 50% 50%,
      rgba(0,0,0,0.65) 0 1.5px,
      rgba(220,235,255,0.05) 1.5px 4px);
  border: 1px solid var(--glass-border);
  box-shadow:
    inset 0 1px 0 var(--glass-edge),
    inset 0 -2px 6px rgba(0,0,0,.4),
    0 30px 60px -15px rgba(0,0,0,.5);
  animation: spin 38s linear infinite;
  opacity: .9;
}
[data-theme="light"] .s-1 .vinyl-mini{
  background:
    repeating-radial-gradient(circle at 50% 50%,
      rgba(15,20,30,0.55) 0 1.5px,
      rgba(80,100,140,0.15) 1.5px 4px);
}
.s-1 .vinyl-mini::before{
  content: "";
  position: absolute;
  inset: 30%;
  border-radius: 50%;
  background: var(--gold-grad);
  box-shadow:
    inset 0 1px 0 var(--glass-edge-strong),
    0 0 24px rgba(200,220,255,.22);
}
.s-1 .vinyl-mini::after{
  content: "";
  position: absolute;
  inset: 47%;
  border-radius: 50%;
  background: var(--bg-0);
  box-shadow: inset 0 0 6px rgba(0,0,0,.6);
}
.s-1 .vinyl-label{
  position: absolute;
  inset: 33%;
  width: 34%;
  height: 34%;
  border-radius: 50%;
  object-fit: contain;
  z-index: 2;
  pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(220,235,255,.3));
}
[data-theme="light"] .s-1 .vinyl-label{
  filter: drop-shadow(0 0 8px rgba(40,50,65,.2)) invert(.85) hue-rotate(180deg) brightness(.92);
}

@media (max-width: 980px){
  .services{ grid-template-columns: 1fr; }
  .s-1{ grid-column: 1; grid-row: auto; }
  .s-2, .s-3, .s-4, .s-5, .s-6{ grid-column: 1; }
}
@media (min-width: 981px) and (max-width: 1180px){
  .services{ grid-template-columns: repeat(4, 1fr); }
  .s-1, .s-2{ grid-column: span 2; }
  .s-3, .s-4, .s-5, .s-6{ grid-column: span 2; }
}

/* ===================== PROCESS ===================== */
.process{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--glass-border); }
.step{ padding: 48px 32px 48px 0; border-right: 1px solid var(--glass-border); position: relative; }
.step:last-child{ border-right: 0; padding-right: 0; }
.step:not(:first-child){ padding-left: 32px; }
@media (max-width: 880px){
  .process{ grid-template-columns: 1fr; }
  .step{ border-right: 0; border-bottom: 1px solid var(--glass-border); padding: 32px 0; }
  .step:last-child{ border-bottom: 0; }
  .step:not(:first-child){ padding-left: 0; }
}
.step-num{
  font-family: var(--font-display); font-size: clamp(56px, 6vw, 88px); line-height: 1;
  background: var(--gold-grad);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  margin-bottom: 24px;
}
.step h4{ font-family: var(--font-display); font-size: 28px; font-weight: 400; margin-bottom: 12px; }
.step p{ color: var(--ink-muted); font-size: 14.5px; line-height: 1.65; max-width: 320px; }
.step .icon-line{
  display:flex; align-items:center; gap: 12px; margin-top: 24px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing:.2em;
  text-transform: uppercase; color: var(--gold);
}
.step .icon-line::after{
  content:""; flex: 1; height: 1px; max-width: 60px;
  background: linear-gradient(to right, var(--gold), transparent);
}

/* ===================== PRICING ===================== */
.pricing{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 980px){ .pricing{ grid-template-columns: 1fr; } }
.plan{
  position: relative; padding: 40px 32px;
  border-radius: 24px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  backdrop-filter: blur(24px) saturate(150%);
  -webkit-backdrop-filter: blur(24px) saturate(150%);
  box-shadow:
    inset 0 1px 0 var(--glass-edge-strong),
    inset 0 -1px 0 rgba(0,0,0,.10),
    0 24px 48px -24px rgba(0,0,0,.45);
  transition: transform .5s var(--ease), border-color .5s, box-shadow .5s;
}
.plan:hover{
  transform: translateY(-4px);
  border-color: var(--glass-border-strong);
  box-shadow:
    inset 0 1px 0 var(--glass-edge-strong),
    inset 0 -1px 0 rgba(0,0,0,.10),
    0 36px 72px -24px rgba(180,200,255,.20);
}
.plan.featured{
  background: linear-gradient(180deg, var(--ambient-1), transparent);
  border-color: transparent;
  box-shadow:
    inset 0 1px 0 var(--glass-edge-strong),
    inset 0 -1px 0 rgba(0,0,0,.10),
    0 30px 60px -20px rgba(200,160,255,.25);
}
.plan.featured::after{
  content: ""; position: absolute; inset: -1px;
  border-radius: 25px;
  padding: 1.5px;
  background: var(--iridescent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
  animation: iridescent-spin 6s linear infinite;
  background-size: 200% 200%;
}
@keyframes iridescent-spin{
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
.plan.featured::before{
  content: "Recomandat"; position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .25em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 999px;
  background: var(--accent-gold); color: #1a1410; font-weight: 600;
  box-shadow: 0 8px 24px -10px rgba(212,178,106,.7);
  z-index: 2;
}
.plan-name{ font-family: var(--font-mono); font-size: 11px; letter-spacing:.25em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.plan-sub{ font-size: 12.5px; color: var(--ink-faint); margin-bottom: 24px; line-height: 1.5; }
.plan-price{
  font-family: var(--font-display); font-size: 64px; line-height: 1;
  margin-bottom: 4px; display: flex; align-items: baseline; gap: 6px;
}
.plan-price .cur{ font-size: 28px; color: var(--ink-muted); }
.plan-price .per{ font-size: 14px; color: var(--ink-muted); margin-left: 6px; font-family: var(--font-body); }
.plan-cond{
  margin: 16px 0 24px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  font-size: 12.5px; color: var(--ink-muted);
}
.plan-cond strong{ color: var(--gold-bright); font-weight: 500; }
.plan ul{ list-style: none; margin: 0 0 28px; }
.plan ul li{
  font-size: 14px; padding: 9px 0; color: var(--ink);
  display: flex; align-items: flex-start; gap: 10px;
  border-bottom: 1px dashed var(--glass-border);
}
.plan ul li:last-child{ border-bottom: 0; }
.plan ul li::before{ content: "✦"; color: var(--gold); font-size: 12px; line-height: 1.5; flex-shrink: 0; }
.plan-cta{
  display: block; text-align: center;
  padding: 14px 20px; border-radius: 999px;
  font-size: 13.5px; letter-spacing: .05em; font-weight: 500;
  border: 1px solid var(--glass-border-strong);
  background: var(--glass-bg);
  transition: background .3s, color .3s, border-color .3s;
}
.plan-cta:hover{ background: var(--gold-grad); color: var(--bg-0); border-color: transparent; font-weight: 600; }
.plan.featured .plan-cta{ background: var(--gold-grad); color: var(--bg-0); border-color: transparent; font-weight: 600; }
.plan.featured .plan-cta:hover{ filter: brightness(1.1); }

/* ===================== VISION ===================== */
.vision{ display: grid; grid-template-columns: 1.1fr .9fr; gap: 60px; align-items: center; }
@media (max-width: 980px){ .vision{ grid-template-columns: 1fr; } }
.vision-text h2{ font-family: var(--font-display); font-size: clamp(40px, 5.5vw, 72px); line-height: 1.02; letter-spacing:-.01em; font-weight: 400; margin-bottom: 28px; }
.vision-text p{ color: var(--ink-muted); font-size: 16px; line-height: 1.7; margin-bottom: 20px; max-width: 540px; }
.vision-text .quote{
  font-family: var(--font-italic); font-style: italic; font-size: 22px;
  color: var(--ink); padding-left: 20px; border-left: 2px solid var(--gold); margin: 32px 0;
}
.vision-card{
  position: relative; aspect-ratio: 4/5;
  border-radius: 24px;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid var(--glass-border-strong);
  box-shadow:
    inset 0 1px 0 var(--glass-edge-strong),
    inset 0 -1px 0 rgba(0,0,0,.12),
    0 40px 80px -30px rgba(0,0,0,.55);
  padding: 40px;
  display: flex; flex-direction: column; justify-content: space-between;
  overflow: hidden;
}
.vision-card::before{
  content:""; position: absolute; inset: 0;
  background:
    radial-gradient(600px 400px at 100% 0%, var(--ambient-1), transparent 50%),
    radial-gradient(400px 300px at 0% 100%, var(--ambient-2), transparent 50%);
  pointer-events: none;
}
.vision-card .top{ display: flex; justify-content: space-between; align-items: flex-start; position: relative; }
.vision-card .badge{
  font-family: var(--font-mono); font-size: 10px; letter-spacing:.3em;
  text-transform: uppercase; color: var(--gold);
  padding: 7px 12px; border: 1px solid var(--glass-border-strong); border-radius: 999px;
}
.vision-card .ring{
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--gold-grad); position: relative;
  box-shadow: 0 0 30px var(--ambient-1);
}
.vision-card .ring::after{ content:""; position: absolute; inset: 30%; border-radius: 50%; background: var(--bg-0); }
.vision-card .ceo{ position: relative; }
.vision-card .ceo-name{ font-family: var(--font-display); font-size: 42px; line-height: 1; margin-bottom: 6px; }
.vision-card .ceo-role{ font-family: var(--font-mono); font-size: 11px; letter-spacing:.3em; text-transform: uppercase; color: var(--gold-bright); margin-bottom: 24px; }
.vision-card .ceo-quote{ font-family: var(--font-italic); font-style: italic; font-size: 17px; color: var(--ink-muted); line-height: 1.5; }

/* ===== HOME VISION (Liquid Glass adapted from official) ===== */
.vision-pro{
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 72px;
  align-items: start;
}

/* RIGHT — photo stack with double glass effect */
.vision-media{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding-top: 14px;
}
.vision-photo-stack{
  position: relative;
  width: 100%;
}
/* Back glass card — peeks out at top-left */
.vp-back{
  position: absolute;
  top: -22px;
  left: -22px;
  width: 100%;
  aspect-ratio: 4/5;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--glass-bg-strong) 0%, var(--glass-bg) 100%);
  border: 1px solid var(--glass-border-strong);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow:
    inset 0 1px 0 var(--glass-edge-strong),
    0 18px 36px -16px rgba(0,0,0,.5);
  transform: rotate(-3deg);
  z-index: 1;
}
/* Front photo card */
.vp-front{
  position: relative;
  width: 100%;
  aspect-ratio: 4/5;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--glass-border-strong);
  background: var(--glass-bg-strong);
  box-shadow:
    inset 0 1px 0 var(--glass-edge-strong),
    0 30px 60px -20px rgba(0,0,0,.55),
    0 12px 24px -10px rgba(0,0,0,.35);
  transform: rotate(2deg);
  transition: transform .5s var(--ease);
  z-index: 2;
}
.vp-front:hover{
  transform: rotate(0deg);
}
.vp-front img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.92) contrast(1.05);
}
.vp-front::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.45) 100%);
  pointer-events: none;
}
.vision-photo-tag{
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 3;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-strong);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--ink);
  text-transform: uppercase;
  font-weight: 600;
  box-shadow:
    inset 0 1px 0 var(--glass-edge-strong),
    0 6px 16px -4px rgba(0,0,0,.4);
}

/* Founder chip — floats below photo stack */
.vision-founder-chip{
  position: relative;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 8px 22px 8px 8px;
  border-radius: 999px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-strong);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    inset 0 1px 0 var(--glass-edge-strong),
    inset 0 -1px 0 rgba(0,0,0,.08),
    0 14px 24px -10px rgba(0,0,0,.5);
  align-self: center;
  margin-top: -32px;
  transform: rotate(-1.5deg);
}
.vision-founder-avatar{
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--glass-border-strong);
  box-shadow:
    inset 0 1px 0 var(--glass-edge-strong),
    0 4px 10px -2px rgba(0,0,0,.3);
  flex-shrink: 0;
}
.vision-founder-name{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .18em;
  color: var(--ink);
  font-weight: 600;
  line-height: 1;
}
.vision-founder-role{
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .3em;
  color: var(--gold-bright);
  margin-top: 5px;
  text-transform: uppercase;
  line-height: 1;
}

/* LEFT — content column */
.vision-content{
  display: flex;
  flex-direction: column;
}
.vision-pro-title{
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -.005em;
  text-transform: uppercase;
  font-weight: 400;
  margin: 16px 0 36px;
  color: var(--ink);
}

/* Feature blocks */
.vision-features{
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-bottom: 32px;
}
.vis-feature{
  display: flex;
  gap: 18px;
  align-items: flex-start;
}
.vis-feature-ic{
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--glass-bg-strong) 0%, var(--glass-bg) 100%);
  border: 1px solid var(--glass-border-strong);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: grid;
  place-items: center;
  box-shadow:
    inset 0 1px 0 var(--glass-edge-strong),
    0 8px 16px -4px rgba(0,0,0,.4);
}
.vis-feature-ic svg{
  width: 22px;
  height: 22px;
  stroke: var(--gold-bright);
  fill: none;
}
.vis-feature-body{
  flex: 1;
  min-width: 0;
  padding-top: 2px;
}
.vis-feature-body h4{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
  margin: 0 0 8px;
}
.vis-feature-body p{
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-muted);
  margin: 0;
}

/* Mid-row: mini photo + quote side by side */
.vision-mid-row{
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 22px;
  align-items: center;
  margin-bottom: 32px;
}
.vision-mini-photo{
  position: relative;
  width: 130px;
  height: 130px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--glass-border-strong);
  background: var(--glass-bg-strong);
  box-shadow:
    inset 0 1px 0 var(--glass-edge-strong),
    0 16px 32px -12px rgba(0,0,0,.5);
  transform: rotate(-2deg);
  transition: transform .4s var(--ease);
  flex-shrink: 0;
}
.vision-mini-photo:hover{
  transform: rotate(0deg);
}
.vision-mini-photo img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(.85) contrast(1.05);
}
.vision-quote{
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 17px;
  color: var(--ink);
  padding-left: 18px;
  border-left: 2px solid var(--gold-bright);
  margin: 0;
  line-height: 1.55;
}

/* Platform pills WITH NAMES */
.vision-platforms{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.vis-platform{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow:
    inset 0 1px 0 var(--glass-edge),
    0 6px 14px -4px rgba(0,0,0,.3);
  transition: transform .3s var(--ease), border-color .3s var(--ease);
  cursor: default;
}
.vis-platform:hover{
  transform: translateY(-2px);
  border-color: var(--glass-border-strong);
}
.vis-platform svg{
  width: 18px;
  height: 18px;
  color: var(--ink-muted);
  flex-shrink: 0;
  transition: color .3s var(--ease);
}
.vis-platform span{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  color: var(--ink);
  font-weight: 600;
  text-transform: uppercase;
}
.vis-platform:hover svg{
  color: var(--gold-bright);
}

@media (max-width: 980px){
  .vision-pro{
    grid-template-columns: 1fr;
    gap: 56px;
  }
  .vision-media{
    max-width: 420px;
    margin: 0 auto;
    padding-top: 0;
  }
  .vp-back{
    top: -16px;
    left: -16px;
  }
  .vision-pro-title{
    margin: 12px 0 28px;
  }
  .vision-mid-row{
    grid-template-columns: 110px 1fr;
    gap: 18px;
  }
  .vision-mini-photo{
    width: 110px;
    height: 110px;
  }
  .vision-platforms{
    gap: 8px;
  }
  .vis-platform{
    padding: 9px 14px;
    gap: 8px;
  }
}
@media (max-width: 540px){
  .vision-mid-row{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .vision-mini-photo{
    width: 100%;
    height: 180px;
    transform: rotate(-1deg);
  }
  .vis-platform span{
    font-size: 10.5px;
  }
}

/* ===================== FAQ ===================== */
.faq{ max-width: 880px; margin: 0 auto; }
.q{ border-top: 1px solid var(--glass-border); padding: 28px 0; cursor: pointer; }
.q:last-child{ border-bottom: 1px solid var(--glass-border); }
.q-head{ display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.q-title{ font-family: var(--font-display); font-size: clamp(22px, 2.4vw, 30px); font-weight: 400; line-height: 1.2; }
.q-icon{
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--glass-border-strong);
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: background .3s, transform .3s var(--ease);
  font-family: var(--font-mono); font-size: 16px; color: var(--gold);
}
.q.open .q-icon{ background: var(--gold-grad); color: var(--bg-0); transform: rotate(45deg); }
.q-body{ max-height: 0; overflow: hidden; transition: max-height .5s var(--ease), margin .5s var(--ease); }
.q.open .q-body{ max-height: 400px; margin-top: 18px; }
.q-body p{ color: var(--ink-muted); font-size: 15.5px; line-height: 1.7; max-width: 720px; }

/* ===================== CTA ===================== */
.cta-block{
  position: relative; padding: 80px 60px;
  border-radius: 32px;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(28px) saturate(160%); -webkit-backdrop-filter: blur(28px) saturate(160%);
  border: 1px solid var(--glass-border-strong);
  box-shadow:
    inset 0 1px 0 var(--glass-edge-strong),
    inset 0 -1px 0 rgba(0,0,0,.10),
    0 48px 96px -32px rgba(0,0,0,.55);
  overflow: hidden; text-align: center;
}
.cta-block::before{
  content:""; position: absolute; inset: 0;
  background:
    radial-gradient(600px 400px at 20% 0%, var(--ambient-1), transparent 60%),
    radial-gradient(600px 400px at 80% 100%, var(--ambient-2), transparent 60%),
    radial-gradient(400px 300px at 50% 50%, var(--ambient-3), transparent 70%);
  pointer-events: none;
}
.cta-block .label{
  font-family: var(--font-mono); font-size: 11px; letter-spacing:.3em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 24px; position: relative;
}
.cta-block h2{
  font-family: var(--font-display);
  font-size: clamp(40px, 6vw, 80px); line-height: 1; font-weight: 400;
  margin-bottom: 24px; position: relative;
}
.cta-block p{ color: var(--ink-muted); font-size: 16px; max-width: 540px; margin: 0 auto 36px; position: relative; }
.cta-block .actions{ display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; position: relative; }
@media (max-width: 720px){ .cta-block{ padding: 60px 28px; } }

/* ===================== FOOTER ===================== */
footer{ padding: 80px var(--pad) 40px; border-top: 1px solid var(--glass-border); margin-top: 120px; }
.foot-grid{
  max-width: var(--maxw); margin: 0 auto;
  display: grid; grid-template-columns: 1.6fr .8fr .8fr .8fr; gap: 60px;
  margin-bottom: 60px;
}
@media (max-width: 880px){ .foot-grid{ grid-template-columns: 1fr 1fr; gap: 40px; } }
@media (max-width: 540px){ .foot-grid{ grid-template-columns: 1fr; } }
.foot-brand h3{ font-family: var(--font-display); font-size: 48px; font-weight: 400; margin-bottom: 12px; }
.foot-brand p{ color: var(--ink-muted); font-size: 14px; max-width: 320px; }
.foot-col h5{ font-family: var(--font-mono); font-size: 11px; letter-spacing:.25em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; font-weight: 500; }
.foot-col a{ display: block; padding: 6px 0; color: var(--ink-muted); font-size: 14px; transition: color .3s; }
.foot-col a:hover{ color: var(--gold-bright); }
.foot-bottom{
  max-width: var(--maxw); margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 30px; border-top: 1px solid var(--glass-border);
  font-size: 12.5px; color: var(--ink-faint); flex-wrap: wrap; gap: 16px;
}
.socials{ display: flex; gap: 10px; }
.socials a{
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--glass-border);
  display: grid; place-items: center;
  transition: background .3s, border-color .3s;
}
.socials a:hover{ background: var(--gold-grad); border-color: transparent; }
.socials a svg{ width: 16px; height: 16px; fill: var(--gold-bright); transition: fill .3s; }
.socials a:hover svg{ fill: var(--bg-0); }

/* ===== MOBILE: center process + footer ===== */
@media (max-width: 880px){
  .process .step{
    text-align: center;
    padding-left: 0 !important;
    padding-right: 0;
  }
  .process .step p{
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .process .step .icon-line{
    justify-content: center;
  }
  .process .step .icon-line::after{
    display: none;
  }
  footer{ text-align: center; }
  .foot-brand,
  .foot-col{ text-align: center; }
  .foot-brand p{
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .foot-bottom{
    justify-content: center;
    flex-direction: column;
    text-align: center;
    gap: 18px;
  }
  .socials{ justify-content: center; }
}

/* ===================== ACCOUNT PAGE (WooCommerce) ===================== */
.account-grid{
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 980px){
  .account-grid{ grid-template-columns: 1fr; gap: 24px; }
}

/* Sidebar */
.acc-sidebar{
  position: sticky;
  top: 100px;
  border-radius: 22px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow:
    inset 0 1px 0 var(--glass-edge-strong),
    0 18px 36px -18px rgba(0,0,0,.4);
  overflow: hidden;
}
@media (max-width: 980px){ .acc-sidebar{ position: static; } }
.acc-user{
  padding: 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--glass-border);
  background: linear-gradient(180deg, var(--glass-bg-strong), transparent);
}
.acc-avatar{
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--glass-edge-strong);
  box-shadow: inset 0 0 0 2px var(--bg-1), 0 4px 12px rgba(0,0,0,.3);
}
.acc-user-meta{
  min-width: 0; flex: 1;
}
.acc-user-name{
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acc-user-email{
  font-size: 12px;
  color: var(--ink-faint);
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acc-nav{
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.acc-nav-link{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--ink-muted);
  font-size: 13.5px;
  letter-spacing: .02em;
  cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
  border: 1px solid transparent;
}
.acc-nav-link svg{
  width: 17px; height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .7;
  flex-shrink: 0;
}
.acc-nav-link:hover{
  background: var(--glass-bg);
  color: var(--ink);
}
.acc-nav-link.active{
  background: var(--glass-bg-strong);
  border-color: var(--glass-border-strong);
  color: var(--gold-bright);
  box-shadow: inset 0 1px 0 var(--glass-edge-strong);
}
.acc-nav-link.active svg{ opacity: 1; }
.acc-nav-link.is-logout{
  margin-top: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--glass-border);
  border-radius: 0;
  color: var(--ink-faint);
}
.acc-nav-link.is-logout:hover{
  color: #ff8585;
  background: transparent;
}
.acc-nav-tag{
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--glass-bg);
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
}

/* Main panels */
.acc-main{ min-width: 0; }
.acc-panel{ display: none; }
.acc-panel.active{ display: block; animation: pageIn .5s var(--ease) forwards; }
.acc-panel-head{
  display: flex;
  align-items: end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--glass-border);
}
.acc-panel-head h2{
  font-family: var(--font-display);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 400;
  letter-spacing: .005em;
  color: var(--ink);
  margin: 0;
}
.acc-panel-head p{
  color: var(--ink-muted);
  font-size: 14px;
  max-width: 420px;
  margin: 8px 0 0;
}
.acc-panel-eyebrow{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 8px;
}

/* Dashboard - stat cards */
.acc-stats-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
@media (max-width: 720px){ .acc-stats-grid{ grid-template-columns: 1fr; } }
.acc-stat-card{
  padding: 22px;
  border-radius: 18px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: inset 0 1px 0 var(--glass-edge-strong);
  position: relative;
  overflow: hidden;
}
.acc-stat-card svg.acc-stat-ic{
  position: absolute;
  top: 18px; right: 18px;
  width: 22px; height: 22px;
  stroke: var(--gold);
  fill: none;
  stroke-width: 1.6;
  opacity: .5;
}
.acc-stat-card .acc-stat-label{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 14px;
}
.acc-stat-card .acc-stat-value{
  font-family: var(--font-display);
  font-size: 36px;
  color: var(--ink);
  line-height: 1;
  letter-spacing: -.01em;
  margin-bottom: 6px;
}
.acc-stat-card .acc-stat-sub{
  font-size: 12px;
  color: var(--gold-bright);
  font-family: var(--font-mono);
  letter-spacing: .04em;
}

/* Section headings inside panels */
.acc-section-title{
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  letter-spacing: .005em;
  color: var(--ink);
  margin: 32px 0 16px;
}

/* Subscription cards */
.sub-card{
  padding: 26px;
  border-radius: 20px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow:
    inset 0 1px 0 var(--glass-edge-strong),
    0 12px 28px -16px rgba(0,0,0,.3);
  margin-bottom: 16px;
  position: relative;
  overflow: hidden;
}
.sub-card.is-featured::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, var(--gold-bright), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  opacity: .5;
}
.sub-card-head{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.acc-badge{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--glass-border-strong);
  background: var(--glass-bg-strong);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.acc-badge.is-active{
  color: #5fd3a3;
  border-color: rgba(95,211,163,.3);
  background: rgba(95,211,163,.08);
}
.acc-badge.is-active::before{
  content: "";
  width: 6px; height: 6px; border-radius: 50%;
  background: #5fd3a3;
  box-shadow: 0 0 8px #5fd3a3;
  animation: pulse-dot 2s var(--ease) infinite;
}
@keyframes pulse-dot{
  0%, 100%{ opacity: 1; }
  50%{ opacity: .5; }
}
.acc-badge.is-paused{ color: var(--ink-faint); }
.acc-badge.is-cancelled{ color: #ff8585; border-color: rgba(255,133,133,.3); }
.sub-card-id{
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .15em;
  color: var(--ink-faint);
}
.sub-card-title{
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 4px;
  letter-spacing: .005em;
}
.sub-card-subtitle{
  font-size: 13px;
  color: var(--ink-muted);
  margin-bottom: 20px;
}
.sub-card-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 18px 0;
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: 18px;
}
@media (max-width: 720px){ .sub-card-grid{ grid-template-columns: 1fr; gap: 12px; } }
.sub-meta-cell .sub-meta-label{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 6px;
}
.sub-meta-cell .sub-meta-value{
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--ink);
  letter-spacing: .005em;
}
.sub-meta-cell .sub-meta-value.is-price{
  color: var(--gold-bright);
  font-size: 22px;
}
.sub-meta-cell .sub-meta-value small{
  font-size: 11px;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  margin-left: 4px;
}
.sub-card-actions{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.acc-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--glass-border-strong);
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  transition: border-color .3s var(--ease), background .3s var(--ease), transform .25s var(--ease);
}
.acc-btn:hover{
  border-color: var(--gold);
  background: var(--glass-bg-strong);
  transform: translateY(-1px);
}
.acc-btn.is-primary{
  background: linear-gradient(135deg, color-mix(in srgb, var(--gold-bright) 20%, transparent), color-mix(in srgb, var(--gold-deep) 12%, transparent));
  border-color: var(--gold);
  color: var(--ink);
}
.acc-btn.is-primary:hover{
  box-shadow: 0 0 24px -8px var(--gold-bright);
}
.acc-btn.is-danger{ color: #ff8585; border-color: rgba(255,133,133,.3); }
.acc-btn.is-danger:hover{ background: rgba(255,133,133,.08); border-color: #ff8585; }
.acc-btn svg{ width: 14px; height: 14px; }

/* Orders table */
.orders-list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.order-row{
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr auto;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  border-radius: 16px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  transition: border-color .3s var(--ease), transform .25s var(--ease);
}
.order-row:hover{
  border-color: var(--glass-border-strong);
  transform: translateX(2px);
}
@media (max-width: 880px){
  .order-row{ grid-template-columns: 1fr 1fr; }
  .order-row .order-actions{ grid-column: 1 / -1; }
}
.order-num{
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: .1em;
  color: var(--gold-bright);
  font-weight: 600;
}
.order-cell-label{
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 4px;
}
.order-cell-value{
  font-size: 14px;
  color: var(--ink);
}
.order-cell-value.is-total{
  font-family: var(--font-display);
  font-size: 17px;
  color: var(--gold-bright);
}

/* Address cards */
.addr-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
@media (max-width: 720px){ .addr-grid{ grid-template-columns: 1fr; } }
.addr-card{
  padding: 26px;
  border-radius: 18px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 var(--glass-edge-strong);
}
.addr-card-head{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--glass-border);
}
.addr-card-head svg{
  width: 18px; height: 18px;
  stroke: var(--gold-bright);
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.addr-card-head h3{
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 400;
  color: var(--ink);
  margin: 0;
}
.addr-card address{
  font-style: normal;
  line-height: 1.7;
  color: var(--ink-muted);
  font-size: 14px;
  margin-bottom: 18px;
}
.addr-card address strong{
  color: var(--ink);
  font-weight: 500;
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .15em;
  text-transform: uppercase;
}

/* Payment cards */
.pay-list{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pay-card{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 18px;
  padding: 20px 24px;
  border-radius: 16px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  transition: border-color .3s var(--ease);
}
.pay-card:hover{ border-color: var(--glass-border-strong); }
.pay-card.is-default{
  border-color: rgba(95,211,163,.3);
  background: rgba(95,211,163,.04);
}
.pay-card-brand{
  width: 56px; height: 36px;
  border-radius: 8px;
  background: linear-gradient(135deg, #f4f6fa, #c4c8d2);
  color: #1a1f3a;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .05em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 4px 8px rgba(0,0,0,.2);
}
.pay-card-info{
  min-width: 0;
}
.pay-card-num{
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: .12em;
  color: var(--ink);
  margin-bottom: 4px;
}
.pay-card-exp{
  font-size: 12px;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  letter-spacing: .04em;
}
.pay-card-default-tag{
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #5fd3a3;
  margin-left: 6px;
}
.pay-card-actions{
  display: flex;
  gap: 6px;
}
.pay-card-icon-btn{
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: transparent;
  color: var(--ink-muted);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: border-color .25s, color .25s, background .25s;
}
.pay-card-icon-btn:hover{
  border-color: var(--gold);
  color: var(--gold-bright);
}
.pay-card-icon-btn svg{ width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pay-add{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px;
  border-radius: 16px;
  background: transparent;
  border: 1px dashed var(--glass-border-strong);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .3s, color .3s;
  margin-top: 4px;
}
.pay-add:hover{
  border-color: var(--gold);
  color: var(--gold-bright);
}

/* Account form */
.acc-form{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  max-width: 720px;
}
@media (max-width: 720px){ .acc-form{ grid-template-columns: 1fr; } }
.acc-form-row{
  grid-column: 1 / -1;
}
.acc-form-field label{
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 8px;
}
.acc-form-field input{
  width: 100%;
  padding: 14px 18px;
  border-radius: 12px;
  border: 1px solid var(--glass-border-strong);
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  color: var(--ink);
  font-size: 14px;
  font-family: inherit;
  letter-spacing: .02em;
  transition: border-color .25s var(--ease), background .25s var(--ease);
}
.acc-form-field input:focus{
  outline: none;
  border-color: var(--gold);
  background: var(--glass-bg-strong);
}
.acc-form-actions{
  grid-column: 1 / -1;
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

/* Logout panel */
.logout-card{
  text-align: center;
  padding: 60px 40px;
  border-radius: 22px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  max-width: 480px;
  margin: 0 auto;
}
.logout-card svg.logout-ic{
  width: 56px; height: 56px;
  margin: 0 auto 24px;
  stroke: var(--gold-bright);
  fill: none;
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  display: block;
}
.logout-card h3{
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  margin-bottom: 12px;
  color: var(--ink);
}
.logout-card p{
  color: var(--ink-muted);
  font-size: 14px;
  margin-bottom: 28px;
  line-height: 1.6;
}
.logout-actions{
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}


.m-bottom-nav,
.m-menu-drawer{ display: none; }

@media (max-width: 980px){
  body{ padding-bottom: 68px; }
  .m-bottom-nav{
    display: flex;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    z-index: 150;
    height: 68px;
    background: linear-gradient(180deg, var(--glass-bg) 0%, var(--glass-bg-strong) 100%);
    backdrop-filter: blur(2px) saturate(110%);
    -webkit-backdrop-filter: blur(2px) saturate(110%);
    border-top: 1px solid var(--glass-border-strong);
    box-shadow:
      inset 0 1px 0 var(--glass-edge-strong),
      0 -10px 30px -10px rgba(0,0,0,.55);
  }
  .m-bn-btn{
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-decoration: none;
    color: var(--ink-muted);
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: var(--font-mono);
    font-size: 9.5px;
    letter-spacing: .18em;
    text-transform: uppercase;
    font-weight: 600;
    padding: 8px 4px;
    transition: color .3s var(--ease), transform .2s var(--ease);
    position: relative;
  }
  .m-bn-btn svg{
    width: 22px; height: 22px;
    stroke: currentColor;
    transition: stroke .3s var(--ease);
  }
  .m-bn-btn:hover,
  .m-bn-btn:active,
  .m-bn-btn.active{
    color: var(--gold-bright);
  }
  .m-bn-btn:active{
    transform: scale(.95);
  }

  /* Hide desktop nav-cta on mobile (bottom nav replaces it) */
  .nav-right .nav-cta{ display: none; }

  /* Mobile menu drawer */
  .m-menu-drawer{
    display: block;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: linear-gradient(180deg, rgba(8,10,14,.92) 0%, rgba(15,18,25,.88) 100%);
    backdrop-filter: blur(36px) saturate(180%);
    -webkit-backdrop-filter: blur(36px) saturate(180%);
    overflow-y: auto;
    padding: 70px 22px 90px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(24px);
    transition: opacity .35s var(--ease), transform .35s var(--ease);
  }
  .m-menu-drawer.is-open{
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
  .m-md-close{
    position: absolute;
    top: 22px;
    right: 22px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border-strong);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    display: grid;
    place-items: center;
    cursor: pointer;
    color: var(--ink);
    box-shadow: inset 0 1px 0 var(--glass-edge-strong);
  }
  .m-md-close svg{ width: 20px; height: 20px; }
  .m-md-list{
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 70px;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
  }
  .m-md-item{
    display: block;
    padding: 18px 28px;
    border-radius: 999px;
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border-strong);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow:
      inset 0 1px 0 var(--glass-edge-strong),
      inset 0 -1px 0 rgba(0,0,0,.08),
      0 12px 24px -8px rgba(0,0,0,.5);
    text-decoration: none;
    color: var(--ink);
    text-align: center;
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 400;
    letter-spacing: .01em;
    transition: transform .3s var(--ease), border-color .3s var(--ease), color .3s var(--ease);
  }
  .m-md-item:hover,
  .m-md-item:active{
    transform: translateY(-2px);
    border-color: var(--gold-bright);
    color: var(--gold-bright);
  }
}

/* ===================== PAGE HERO (sub-pages) ===================== */
.page-hero{
  position: relative;
  padding: 110px var(--pad) 50px;
  text-align: center;
  overflow: hidden;
}
/* Thin vertical light beam coming down from the top center */
.page-hero::before{
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 1px; height: 92px;
  background: linear-gradient(180deg, transparent 0%, var(--gold-bright) 55%, transparent 100%);
  opacity: .4;
  pointer-events: none;
  z-index: 0;
}
/* Subtle silver dot anchor at the beam's end */
.page-hero::after{
  content: "";
  position: absolute;
  top: 92px; left: 50%;
  transform: translateX(-50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 12px var(--gold-bright), 0 0 24px color-mix(in srgb, var(--gold-bright) 50%, transparent);
  opacity: .55;
  pointer-events: none;
  z-index: 0;
}
.page-hero h1{
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(32px, 4.1vw, 54px); line-height: 1.1; letter-spacing: -.008em;
  margin: 18px auto 18px;
  max-width: min(1500px, 95vw);
  position: relative;
  z-index: 2;
}
.page-hero p{
  color: var(--ink-muted); font-size: clamp(14px, 1.05vw, 16px);
  max-width: min(1100px, 94vw); margin: 0 auto;
  line-height: 1.65;
  position: relative;
  z-index: 2;
}
.page-hero .eyebrow{
  position: relative;
  z-index: 2;
}
/* Soft, refined silver-gold halo behind the title - much more subtle */
.page-hero .ornament-orb{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: min(1280px, 94vw);
  height: 460px;
  border-radius: 50%;
  background:
    /* Center hot spot — gold */
    radial-gradient(ellipse 38% 50% at 50% 50%,
      color-mix(in srgb, var(--gold-bright) 16%, transparent) 0%,
      transparent 65%),
    /* Left soft cool — silver */
    radial-gradient(circle 260px at 18% 42%,
      color-mix(in srgb, #c4c8d2 9%, transparent) 0%,
      transparent 75%),
    /* Right warm accent — light gold */
    radial-gradient(circle 230px at 82% 58%,
      color-mix(in srgb, var(--gold-bright) 7%, transparent) 0%,
      transparent 75%),
    /* Base wash — barely there white */
    radial-gradient(ellipse 65% 45% at 50% 50%,
      rgba(255,255,255,.025) 0%,
      transparent 80%);
  filter: blur(58px);
  opacity: .65;
  pointer-events: none;
  z-index: 0;
}
/* Floating diamond ornaments on either side of the title area */
.page-hero .ornament-orb::before,
.page-hero .ornament-orb::after{
  content: "";
  position: absolute;
  background: linear-gradient(135deg,
    rgba(245,247,255,.9) 0%,
    var(--gold-bright) 50%,
    rgba(180,200,235,.55) 100%);
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--gold-bright) 50%, transparent));
}
.page-hero .ornament-orb::before{
  top: 22%; left: 14%;
  width: 10px; height: 10px;
  opacity: .45;
  animation: orb-diamond-l 7s ease-in-out infinite;
}
.page-hero .ornament-orb::after{
  top: 68%; right: 12%;
  width: 7px; height: 7px;
  opacity: .4;
  animation: orb-diamond-r 9s ease-in-out infinite;
}
@keyframes orb-diamond-l{
  0%, 100%{ transform: translateY(0) rotate(0deg); opacity: .3; }
  50%{ transform: translateY(-12px) rotate(180deg); opacity: .6; }
}
@keyframes orb-diamond-r{
  0%, 100%{ transform: translateY(0) rotate(0deg); opacity: .3; }
  50%{ transform: translateY(10px) rotate(-180deg); opacity: .55; }
}
/* Pulsing spark points injected via JS */
.ph-spark{
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold-bright);
  box-shadow:
    0 0 6px var(--gold-bright),
    0 0 14px color-mix(in srgb, var(--gold-bright) 50%, transparent);
  opacity: .35;
  pointer-events: none;
  animation: ph-spark-pulse 4s ease-in-out infinite;
}
.ph-spark-1{ top: 38%; left: 28%; animation-delay: 0s; }
.ph-spark-2{ top: 58%; left: 68%; animation-delay: 1.2s; }
.ph-spark-3{ top: 20%; left: 62%; animation-delay: 2.4s; width: 3px; height: 3px; }
.ph-spark-4{ top: 76%; left: 32%; animation-delay: 3.1s; width: 3px; height: 3px; }
.ph-spark-5{ top: 45%; left: 8%; animation-delay: 1.8s; width: 3px; height: 3px; opacity: .25; }
.ph-spark-6{ top: 50%; right: 8%; animation-delay: 2.6s; width: 3px; height: 3px; opacity: .25; }
@keyframes ph-spark-pulse{
  0%, 100%{ opacity: .2; transform: scale(.6); }
  50%{ opacity: .7; transform: scale(1.3); }
}
@media (max-width: 720px){
  .page-hero{ padding: 90px var(--pad) 40px; }
  .page-hero h1{ font-size: clamp(26px, 6.6vw, 38px); margin: 14px auto 14px; }
  .page-hero p{ font-size: 13.5px; }
  .page-hero::before{ height: 64px; }
  .page-hero::after{ top: 64px; }
  .page-hero .ornament-orb{ height: 240px; opacity: .45; }
  .page-hero .ornament-orb::before,
  .page-hero .ornament-orb::after,
  .ph-spark-5, .ph-spark-6{ display: none; }
}

/* ===================== COMPARISON TABLE ===================== */
.compare{
  border: 1px solid var(--glass-border);
  border-radius: 24px;
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  overflow: hidden;
}
.compare-row{
  display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr;
  align-items: center;
  border-bottom: 1px solid var(--glass-border);
}
.compare-row:last-child{ border-bottom: 0; }
.compare-row > div{ padding: 18px 24px; font-size: 14px; }
.compare-row.head > div{
  font-family: var(--font-mono); font-size: 11px; letter-spacing:.25em;
  text-transform: uppercase; color: var(--gold);
  padding: 24px;
}
.compare-row.head > div:first-child{ font-family: var(--font-display); font-size: 22px; color: var(--ink); letter-spacing: 0; text-transform: none; }
.compare-row .feat{ color: var(--ink-muted); font-size: 13.5px; }
.compare-row .tier-name{ font-family: var(--font-display); font-size: 22px; color: var(--ink); }
.compare-row .tier-name.featured{ background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.compare-row .check{ color: var(--gold-bright); font-weight: 600; }
.compare-row .x{ color: var(--ink-faint); }
@media (max-width: 880px){
  .compare-row{ grid-template-columns: 1fr 1fr 1fr 1fr; }
  .compare-row > div{ padding: 12px 8px; font-size: 12px; text-align: center; }
  .compare-row.head > div{ padding: 14px 8px; font-size: 10px; }
  .compare-row .feat{ font-size: 12px; text-align: left; padding-left: 16px; }
}

/* ===================== ABOUT / VALUES ===================== */
.values{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 880px){ .values{ grid-template-columns: 1fr; } }
.value-card{
  padding: 36px; border-radius: 22px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px);
  transition: border-color .5s, transform .5s var(--ease);
}
.value-card:hover{ border-color: var(--glass-border-strong); transform: translateY(-3px); }
.value-card .v-num{
  font-family: var(--font-display); font-size: 56px; line-height: 1;
  background: var(--gold-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 20px;
}
.value-card h4{ font-family: var(--font-display); font-size: 26px; font-weight: 400; margin-bottom: 12px; }
.value-card p{ color: var(--ink-muted); font-size: 14.5px; line-height: 1.65; }

.bio-grid{
  display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center;
}
@media (max-width: 880px){ .bio-grid{ grid-template-columns: 1fr; } }
.bio-portrait{
  aspect-ratio: 4/5;
  border-radius: 24px;
  background:
    radial-gradient(circle at 30% 30%, var(--ambient-1), transparent 60%),
    var(--glass-bg-strong);
  border: 1px solid var(--glass-border-strong);
  backdrop-filter: blur(14px);
  position: relative;
  overflow: hidden;
  display: grid; place-items: center;
}
.bio-portrait .initials{
  font-family: var(--font-display);
  font-size: clamp(80px, 14vw, 200px);
  background: var(--gold-grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  line-height: 1;
}
.bio-portrait .signature{
  position: absolute; bottom: 24px; left: 24px;
  font-family: var(--font-italic); font-style: italic;
  color: var(--ink-muted); font-size: 14px;
}
.bio-text h2{ font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 5vw, 64px); margin-bottom: 28px; line-height: 1.02; }
.bio-text p{ color: var(--ink-muted); font-size: 16px; line-height: 1.7; margin-bottom: 18px; }
.bio-text .role{ font-family: var(--font-mono); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); margin-bottom: 16px; }

/* ===================== CONTACT ===================== */
.contact-grid{
  display: grid; grid-template-columns: 1fr 1.2fr; gap: 60px;
}
@media (max-width: 980px){ .contact-grid{ grid-template-columns: 1fr; } }
.contact-info h3{ font-family: var(--font-display); font-size: clamp(32px, 4vw, 48px); font-weight: 400; margin-bottom: 16px; line-height: 1.1; }
.contact-info p{ color: var(--ink-muted); font-size: 15px; line-height: 1.7; margin-bottom: 32px; max-width: 440px; }
.contact-line{
  display: flex; align-items: center; gap: 16px;
  padding: 20px 0;
  border-bottom: 1px dashed var(--glass-border);
}
.contact-line:last-of-type{ border-bottom: 0; }
.contact-line .ic{
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--glass-border-strong);
  display: grid; place-items: center;
  background: var(--glass-bg);
  flex-shrink: 0;
}
.contact-line .ic svg{ width: 18px; height: 18px; stroke: var(--gold-bright); fill: none; stroke-width: 1.5; }
.contact-line .meta{ display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .25em; text-transform: uppercase; color: var(--gold); margin-bottom: 4px; }
.contact-line .val{ font-size: 16px; color: var(--ink); font-family: var(--font-display); }

.form-card{
  padding: 40px; border-radius: 24px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-strong);
  backdrop-filter: blur(18px);
}
.form-card h3{ font-family: var(--font-display); font-size: 32px; font-weight: 400; margin-bottom: 8px; }
.form-card .sub{ color: var(--ink-muted); font-size: 14px; margin-bottom: 28px; }
.field{ margin-bottom: 18px; }
.field label{
  display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .25em;
  text-transform: uppercase; color: var(--gold); margin-bottom: 8px;
}
.field input, .field textarea, .field select{
  width: 100%; padding: 14px 16px;
  border-radius: 12px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--ink); font-family: var(--font-body); font-size: 14.5px;
  transition: border-color .3s, background .3s;
  outline: none;
}
.field input:focus, .field textarea:focus, .field select:focus{
  border-color: var(--gold);
  background: var(--glass-bg-strong);
}
.field textarea{ resize: vertical; min-height: 120px; }
.field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 540px){ .field-row{ grid-template-columns: 1fr; } }

/* ===================== LOGO SHOWCASE ===================== */
.logo-showcase{
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
}
@media (max-width: 880px){ .logo-showcase{ grid-template-columns: 1fr; } }

.logo-card{
  position: relative;
  padding: 56px 40px 40px;
  border-radius: 24px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow:
    inset 0 1px 0 var(--glass-edge-strong),
    inset 0 -1px 0 rgba(0,0,0,.10),
    0 30px 60px -24px rgba(0,0,0,.45);
  text-align: center;
  overflow: hidden;
  transition: border-color .5s, transform .5s var(--ease), box-shadow .5s;
}
.logo-card:hover{
  border-color: var(--glass-border-strong);
  transform: translateY(-3px);
  box-shadow:
    inset 0 1px 0 var(--glass-edge-strong),
    inset 0 -1px 0 rgba(0,0,0,.10),
    0 40px 80px -24px rgba(200,160,255,.22);
}
.logo-card::before{
  content:""; position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(500px 400px at 50% 0%, var(--ambient-1), transparent 70%);
}

.logo-card .tag{
  position: absolute; top: 20px; left: 20px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .3em;
  text-transform: uppercase;
  padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--glass-border-strong);
  background: var(--glass-bg-strong);
  color: var(--silver-bright);
}
.logo-card .note{
  position: absolute; top: 20px; right: 20px;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.real-logo-frame{
  width: 100%;
  aspect-ratio: 1/1;
  max-width: 340px;
  margin: 0 auto 24px;
  display: grid; place-items: center;
  position: relative;
}
.real-logo-frame::before{
  content:""; position: absolute; inset: 0;
  background: conic-gradient(from 0deg at 50% 50%,
    rgba(168,232,255,.30) 0deg,
    rgba(192,170,255,.30) 60deg,
    rgba(255,155,216,.30) 120deg,
    rgba(255,216,155,.30) 180deg,
    rgba(176,255,170,.30) 240deg,
    rgba(168,232,255,.30) 360deg);
  border-radius: 50%;
  filter: blur(50px);
  animation: aurora-rotate 20s linear infinite;
}
.real-logo-frame img{
  max-width: 90%; max-height: 90%;
  object-fit: contain;
  position: relative; z-index: 1;
  filter: drop-shadow(0 20px 40px rgba(0,0,0,.4));
  animation: float 8s ease-in-out infinite;
}
[data-theme="light"] .real-logo-frame img{
  filter: drop-shadow(0 20px 40px rgba(40,50,65,.25)) invert(.85) hue-rotate(180deg) brightness(.92);
}

.scale-grid{
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  align-items: end;
  margin: 16px 0 24px;
  padding: 24px 0;
}
.scale-cell{
  display: flex; flex-direction: column; align-items: center; gap: 14px;
}
.scale-frame{
  display: grid; place-items: center;
  position: relative;
}
.scale-frame img{ width: 100%; height: 100%; object-fit: contain; }
[data-theme="light"] .scale-frame img{
  filter: invert(.85) hue-rotate(180deg) brightness(.92);
}
.scale-frame.s-128{ width: 96px; height: 96px; }
.scale-frame.s-64{  width: 64px; height: 64px; }
.scale-frame.s-40{  width: 40px; height: 40px; }
.scale-frame.s-24{  width: 24px; height: 24px; }

.scale-label{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--silver-bright);
  text-align: center;
  line-height: 1.4;
}
.scale-use{
  display: inline-block;
  font-size: 9px;
  color: var(--ink-faint);
  letter-spacing: .1em;
  margin-top: 2px;
}

.logo-card h4{
  font-family: var(--font-display); font-size: 28px; font-weight: 400;
  margin-bottom: 8px;
  position: relative;
}
.logo-card p{
  color: var(--ink-muted); font-size: 14px; line-height: 1.6;
  max-width: 340px; margin: 0 auto;
  position: relative;
}

@media (max-width: 540px){
  .scale-grid{ grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .scale-frame.s-128{ width: 56px; height: 56px; }
  .scale-frame.s-64{  width: 42px; height: 42px; }
  .scale-frame.s-40{  width: 30px; height: 30px; }
  .scale-frame.s-24{  width: 20px; height: 20px; }
  .scale-label{ font-size: 9px; }
  .scale-use{ font-size: 8px; }
}

.center{ text-align:center; }

/* ============================================================ */
/* ============ HERO REDESIGN — Match Ionut's site =========== */
/* ============================================================ */

.hero{
  padding: 96px var(--pad) 20px;
  position: relative;
  overflow: visible;
  display: block;
  min-height: 0;
  align-items: stretch;
}
.hero-inner{
  max-width: var(--maxw);
  margin: 0 auto;
  width: 100%;
  display: block;
  gap: 0;
  align-items: stretch;
}

/* Big glass card wrapping hero content */
.hero-shell{
  position: relative;
  border-radius: 32px;
  padding: 56px 56px;
  background: linear-gradient(135deg, var(--glass-bg-strong) 0%, var(--glass-bg) 100%);
  border: 1px solid var(--glass-border-strong);
  backdrop-filter: blur(2px) saturate(110%);
  -webkit-backdrop-filter: blur(2px) saturate(110%);
  box-shadow:
    inset 0 1px 0 var(--glass-edge-strong),
    inset 0 -1px 0 rgba(0,0,0,.06),
    0 20px 50px -30px rgba(0,0,0,.25),
    0 60px 100px -50px rgba(0,0,0,.18);
  overflow: hidden;
}
.hero-shell::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(720px 540px at 0% 30%, var(--ambient-1), transparent 60%),
    radial-gradient(720px 540px at 100% 100%, var(--ambient-3), transparent 60%);
}
.hero-shell-grid{
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 64px;
  align-items: start;
  position: relative;
  z-index: 3;
}
.hero-shell .diamond,
.hero-shell .diamond-burst{
  z-index: 1;
}

/* Identity column */
.hero-identity{
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.identity-card{
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 8px 22px 8px 8px;
  border-radius: 999px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-strong);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    inset 0 1px 0 var(--glass-edge-strong),
    inset 0 -1px 0 rgba(0,0,0,.1),
    0 12px 24px -8px rgba(0,0,0,.5);
  align-self: flex-start;
}
.identity-avatar{
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--glass-border-strong);
  box-shadow:
    inset 0 1px 0 var(--glass-edge-strong),
    0 4px 12px -2px rgba(0,0,0,.3);
  flex-shrink: 0;
}
.identity-name{
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: .18em;
  color: var(--ink);
  font-weight: 600;
  line-height: 1;
}
.identity-role{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .3em;
  color: var(--gold-bright);
  margin-top: 5px;
  text-transform: uppercase;
  line-height: 1;
}
.identity-quote{
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 15px;
  color: var(--ink-muted);
  line-height: 1.55;
  max-width: 240px;
  padding-left: 6px;
  letter-spacing: .005em;
}

/* Rotating signature badge */
.identity-badge{
  position: relative;
  width: 128px;
  height: 128px;
  margin-top: 8px;
}
.badge-svg{
  width: 100%;
  height: 100%;
  animation: spin 28s linear infinite;
}
.badge-text{
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .25em;
  fill: var(--gold-bright);
  text-transform: uppercase;
}
.badge-center{
  position: absolute;
  inset: 38%;
  border-radius: 50%;
  background: var(--gold-grad);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  color: var(--bg-0);
  font-size: 22px;
  box-shadow:
    inset 0 1px 0 var(--glass-edge-strong),
    0 0 20px rgba(200,220,255,.3);
}
.identity-badge::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  pointer-events: none;
}

/* Main column with mega text */
.hero-main{
  min-width: 0;
}
.hero-mega{
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 52px);
  line-height: 1.08;
  letter-spacing: -.005em;
  text-transform: uppercase;
  font-weight: 400;
  margin: 0 0 28px;
  color: var(--ink);
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mega-line{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.mega-pill{
  display: inline-block;
  padding: 2px 22px 6px;
  margin: 0;
  border-radius: 100px;
  line-height: 1.05;
  vertical-align: baseline;
  position: relative;
  font-weight: 400;
  letter-spacing: 0.06em;
}
.mega-pill-glass{
  background: linear-gradient(135deg, rgba(20,25,35,.55) 0%, rgba(15,18,25,.35) 100%);
  border: 1px solid var(--glass-border-strong);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow:
    inset 0 1px 0 var(--glass-edge-strong),
    inset 0 -2px 4px rgba(0,0,0,.18),
    0 10px 22px -10px rgba(0,0,0,.45);
  color: var(--ink);
}
[data-theme="light"] .mega-pill-glass{
  background: linear-gradient(135deg, rgba(220,228,238,.85) 0%, rgba(200,212,228,.65) 100%);
  border: 1px solid rgba(180,195,215,.55);
  color: var(--ink);
}
.mega-pill-solid{
  background: var(--gold-grad);
  border: 1px solid rgba(255,245,207,.35);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    inset 0 -1px 3px rgba(120,80,30,.25),
    0 6px 14px -6px rgba(245,213,142,.3);
  color: #1a1815;
}

.hero-pitch{
  font-size: 16px;
  color: var(--ink-muted);
  line-height: 1.7;
  margin-bottom: 16px;
  max-width: 760px;
}
.hero-pitch strong{
  color: var(--gold-bright);
  font-weight: 500;
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 18px;
}

.hero-signature{
  margin: 24px 0 28px;
  font-family: var(--font-italic);
  font-style: italic;
  font-size: 17px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 var(--glass-edge);
  width: max-content;
  max-width: 100%;
}
.hero-signature strong{
  font-weight: 500;
}
.hero-signature .sig-note{
  color: var(--gold-bright);
  font-size: 22px;
  font-family: var(--font-display);
  font-style: normal;
  line-height: 1;
}

/* Override .hero-actions to remove fade animation */
.hero .hero-actions{
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 0;
  opacity: 1;
  animation: none;
}
.hero-play{
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--gold-grad);
  border: 1px solid var(--glass-edge-strong);
  cursor: pointer;
  display: grid;
  place-items: center;
  position: relative;
  box-shadow:
    inset 0 1px 0 var(--glass-edge-strong),
    inset 0 -2px 4px rgba(0,0,0,.2),
    0 12px 24px -6px rgba(200,220,255,.45);
  transition: transform .3s var(--ease);
  flex-shrink: 0;
}
.hero-play::before{
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  animation: ring-pulse 2.5s ease-out infinite;
  pointer-events: none;
}
.hero-play:hover{ transform: scale(1.08); }
.hero-play svg{
  width: 20px;
  height: 20px;
  fill: var(--bg-0);
  margin-left: 3px;
}

@media (min-width: 981px) and (max-width: 1280px){
  .hero-shell{ padding: 48px 40px; }
  .hero-shell-grid{ grid-template-columns: 220px 1fr; gap: 48px; }
  .hero-mega{ font-size: clamp(28px, 3.4vw, 44px); margin-bottom: 22px; }
  .mega-pill{ padding: 2px 15px 5px; }
}
@media (max-width: 980px){
  .hero{ padding: 120px var(--pad) 40px; }
  .hero-shell{ padding: 44px 28px; border-radius: 24px; }
  .hero-shell-grid{ grid-template-columns: 1fr; gap: 36px; }
  .identity-quote{ max-width: 100%; }
  .hero-pitch{ font-size: 15px; }
  .identity-badge{ display: none; }
}
@media (max-width: 540px){
  .hero-mega{
    font-size: clamp(20px, 6.4vw, 28px);
    margin-bottom: 24px;
    gap: 8px;
  }
  .mega-pill{
    padding: 2px 12px 5px;
    letter-spacing: 0.03em;
  }
  .mega-line{
    gap: 8px;
  }
  .hero-shell{ padding: 36px 22px; }
  .hero-pitch{ font-size: 14px; }
  .hero-pitch strong{ font-size: 16px; }
  .hero-signature{ font-size: 15px; gap: 8px; padding: 10px 18px; margin: 24px 0 28px; }
  .hero-play{ width: 48px; height: 48px; }
}
/* ============================================================ */
/* ============== PACKAGES PAGE — TABS + NOTICE =============== */
/* ============================================================ */
.pack-tabs{
  display: inline-flex;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 1px 0 var(--glass-edge);
  margin: 0 auto;
  display: flex;
  width: max-content;
  max-width: 100%;
}
.pack-tab{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--ink-muted);
  cursor: pointer;
  transition: all .25s var(--ease);
  white-space: nowrap;
}
.pack-tab svg{ width: 16px; height: 16px; }
.pack-tab:hover{ color: var(--ink); }
.pack-tab.active{
  background: var(--glass-bg-strong);
  color: var(--ink);
  border: 1px solid var(--glass-border-strong);
  box-shadow: inset 0 1px 0 var(--glass-edge-strong), 0 6px 12px -4px rgba(0,0,0,.3);
}
.pack-tab.active svg{ stroke: var(--gold-bright); }
@media (max-width: 540px){
  .pack-tab{ padding: 10px 14px; font-size: 13px; }
}

/* Center wrapper for tabs */
.pack-section{ animation: fade .35s var(--ease); }
@keyframes fade{ from{ opacity: 0 } to{ opacity: 1 } }
.block.compact .wrap > .pack-tabs{ margin: 0 auto; }
section.block.compact > .wrap{ text-align: initial; }
.pack-tabs{ display: flex; }
section.block.compact:has(.pack-tabs) > .wrap{ display: flex; justify-content: center; }

/* Lansare notice — important warning bar */
.lansare-notice{
  margin-top: 20px;
  display: inline-flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 22px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(200,220,255,.10), rgba(160,200,255,.06));
  border: 1px solid var(--glass-border-strong);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 var(--glass-edge);
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.5;
  max-width: 640px;
  text-align: left;
}
.lansare-notice svg{
  width: 22px; height: 22px;
  stroke: var(--gold-bright);
  flex-shrink: 0;
  margin-top: 1px;
}
.lansare-notice strong{ color: var(--gold-bright); font-weight: 600; }

/* Plan card refinements (work with existing .plan styles) */
.plan-head{ margin-bottom: 14px; }
.plan-cond{
  font-size: 13px;
  color: var(--ink-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 14px 0 20px;
  padding: 14px 0;
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
}
.plan-cond strong{
  display: block;
  width: 100%;
  margin-bottom: 4px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-bright);
  font-weight: 600;
}
.cond-pill{
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  font-size: 12px;
  color: var(--ink);
  white-space: nowrap;
}
.plan-features{
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.plan-features li{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: var(--ink-muted);
  line-height: 1.55;
}
.plan-features li::before{
  content: "✓";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold-grad);
  color: var(--bg-0);
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  box-shadow: inset 0 1px 0 var(--glass-edge-strong);
}
.plan-cta{ width: 100%; justify-content: center; }
[data-theme="light"] .plan-features li::before{ color: rgba(240,244,250,.98); }

/* ============================================================ */
/* ==================== PRODUCT (WooCommerce) ================= */
/* ============================================================ */
.breadcrumb{
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.breadcrumb a{
  color: var(--ink-muted);
  text-decoration: none;
  transition: color .2s var(--ease);
}
.breadcrumb a:hover{ color: var(--gold-bright); }
.bc-sep{ opacity: .4; }
.bc-current{ color: var(--ink); }

/* Inline breadcrumb on product page (discreet) */
.breadcrumb-inline{
  font-size: 10px;
  letter-spacing: .22em;
  margin-bottom: 14px;
  opacity: .55;
  gap: 8px;
  transition: opacity .3s var(--ease);
}
.breadcrumb-inline:hover{ opacity: .9; }
.breadcrumb-inline .bc-sep{
  font-family: var(--font-body);
  font-size: 13px;
  opacity: .5;
}
.breadcrumb-inline .bc-current{
  color: var(--gold-bright);
}

.product-shell{
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: start;
}
@media (max-width: 900px){
  .product-shell{ grid-template-columns: 1fr; gap: 40px; }
}

/* Product gallery / visual */
.product-gallery{
  position: sticky;
  top: 100px;
}
@media (max-width: 900px){ .product-gallery{ position: relative; top: 0; } }
.product-frame{
  position: relative;
  aspect-ratio: 1/1;
  border-radius: 32px;
  background: linear-gradient(135deg, var(--glass-bg-strong), var(--glass-bg));
  border: 1px solid var(--glass-border-strong);
  backdrop-filter: blur(2px) saturate(110%);
  -webkit-backdrop-filter: blur(2px) saturate(110%);
  box-shadow:
    inset 0 1px 0 var(--glass-edge-strong),
    0 30px 60px -20px rgba(0,0,0,.45);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.product-frame-aurora{
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    rgba(168,232,255,.35),
    rgba(192,170,255,.35),
    rgba(255,155,216,.35),
    rgba(255,216,155,.35),
    rgba(176,255,170,.35),
    rgba(168,232,255,.35));
  filter: blur(60px);
  animation: aurora-rotate 22s linear infinite;
  z-index: 0;
}
.product-frame-logo{
  position: relative;
  z-index: 2;
  width: 56%;
  height: 56%;
  object-fit: contain;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.4));
  animation: float 6s ease-in-out infinite;
}
[data-theme="light"] .product-frame-logo{
  filter: drop-shadow(0 8px 18px rgba(40,50,65,.18)) invert(.85) hue-rotate(180deg) brightness(.92);
}

/* Product page visual container (scaled-up shop visuals) */
.product-frame-viz{
  position: relative;
  z-index: 2;
  width: 78%;
  height: 78%;
  display: grid;
  place-items: center;
  animation: float 6s ease-in-out infinite;
}
.product-frame-viz .shop-viz{
  width: 100% !important;
  height: 100% !important;
}
/* Scale up subscriptions visuals for product page */
.product-frame-viz .viz-pulse{
  width: 100%; height: 100%;
  max-width: 360px;
  max-height: 360px;
}
.product-frame-viz .viz-pulse-core{
  width: 160px; height: 160px;
}
.product-frame-viz .viz-pulse-icon{
  width: 62px; height: 62px;
}
.product-frame-viz .viz-pulse-tag{
  padding: 10px 22px;
  font-size: 11px;
}
.product-frame-viz .viz-pulse-tag strong{
  font-size: 20px;
  margin-right: 8px;
}
.product-frame-viz .viz-monitor{
  max-width: 100%;
  width: 100%; height: 100%;
  aspect-ratio: auto;
  padding: 26px 28px;
  gap: 18px;
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(20,25,35,.85) 0%, rgba(15,18,25,.65) 100%);
  backdrop-filter: blur(40px) saturate(180%);
}
.product-frame-viz .viz-monitor-avatar{
  width: 52px; height: 52px;
}
.product-frame-viz .viz-monitor-bar{
  height: 8px;
}
.product-frame-viz .viz-monitor-bar.tiny{ height: 6px; }
.product-frame-viz .viz-monitor-live{
  font-size: 11px;
}
.product-frame-viz .viz-monitor-graph{
  min-height: 100px;
}
.product-frame-viz .viz-monitor-stat{
  font-size: 11px;
}
.product-frame-viz .viz-monitor-stat strong{
  font-size: 28px;
}
.product-frame-viz .viz-growth{
  max-width: 100%;
  width: 100%; height: 100%;
  aspect-ratio: auto;
  padding: 26px 28px;
  gap: 16px;
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(20,25,35,.85) 0%, rgba(15,18,25,.65) 100%);
  backdrop-filter: blur(40px) saturate(180%);
}
.product-frame-viz .viz-growth-num{
  font-size: 48px;
}
.product-frame-viz .viz-growth-arrow{
  width: 40px; height: 40px;
}
.product-frame-viz .viz-growth-arrow svg{
  width: 20px !important; height: 20px !important;
}
.product-frame-viz .viz-growth-sparkline{
  min-height: 120px;
}
.product-frame-viz .viz-growth-tile{
  height: 32px;
  border-radius: 8px;
}
.product-frame-viz .viz-growth-sparkline svg{
  width: 100% !important;
  height: 100% !important;
  filter: drop-shadow(0 4px 12px rgba(245,213,142,.4)) !important;
}
.product-frame-viz .viz-growth-sparkline svg path[stroke]{
  stroke-width: 3 !important;
}
.product-frame-viz .viz-eco{
  width: 100%; height: 100%;
  max-width: 360px;
  max-height: 360px;
}
.product-frame-viz .viz-eco-center{
  width: 90px; height: 90px;
}
.product-frame-viz .viz-eco-node{
  width: 42px; height: 42px;
}
.product-frame-viz .viz-eco-node svg{
  width: 20px !important; height: 20px !important;
}
.product-frame-viz .viz-rocket{
  width: 160px; height: 220px;
}
.product-frame-viz .viz-rocket-body{
  width: 60px;
}
.product-frame-viz .viz-rocket-window{
  width: 22px; height: 22px;
}
.product-frame-viz .viz-rocket-fin-l,
.product-frame-viz .viz-rocket-fin-r{
  width: 26px; height: 40px;
}
.product-frame-viz .viz-rocket-flame{
  width: 26px; height: 48px;
}
.product-frame-viz .viz-bars{
  width: 100%; height: 100%;
  max-width: 360px;
  max-height: 360px;
  gap: 24px;
  padding-bottom: 32px;
}
.product-frame-viz .viz-bar{
  width: 36px;
  border-radius: 7px 7px 2px 2px;
}
.product-frame-viz .viz-bar::before{
  width: 9px;
  top: 6px; left: 6px;
}
.product-frame-viz .viz-bar-peak{
  width: 11px; height: 11px;
  top: -16px;
}
.product-frame-viz .viz-bars-base{
  bottom: 22px;
}
.product-frame-viz .viz-plane{
  width: 100%; height: 100%;
  max-width: 360px;
  max-height: 360px;
}
.product-frame-viz .viz-target{
  width: 220px; height: 220px;
}
.product-frame-viz .viz-target-arrow{
  width: 170px; height: 6px;
}
.product-frame-viz .viz-globe{
  width: 230px; height: 230px;
}
.product-frame-viz .viz-globe-node{
  width: 14px; height: 14px;
}
.product-floor{
  position: absolute;
  bottom: 14%;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 8%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0,0,0,.4), transparent 70%);
  filter: blur(8px);
  z-index: 1;
}
[data-theme="light"] .product-floor{
  background: radial-gradient(ellipse at center, rgba(40,50,65,.15), transparent 70%);
  filter: blur(6px);
  width: 50%;
  height: 5%;
  bottom: 16%;
}
.product-floating-pill{
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 4;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-strong);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: inset 0 1px 0 var(--glass-edge-strong);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.product-floating-pill .dot{
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #5EE89A;
  box-shadow: 0 0 8px rgba(94,232,154,.8);
  animation: pulse 1.8s infinite;
}

.product-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
  justify-content: center;
}
.prod-tag{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  font-size: 12.5px;
  color: var(--ink-muted);
}
.prod-tag svg{ width: 14px; height: 14px; stroke: var(--gold-bright); }

/* Product info column */
.product-category{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: 12px;
}
.product-title{
  font-family: var(--font-display);
  font-size: clamp(28px, 3.6vw, 48px);
  line-height: 1.1;
  letter-spacing: -.01em;
  margin: 0 0 14px;
  font-weight: 400;
}
.product-rating{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.stars{ display: inline-flex; gap: 2px; }
.stars svg{ width: 16px; height: 16px; color: #FFC957; }
.rating-label{
  font-size: 13px;
  color: var(--ink-muted);
}

.product-price-row{
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 20px 0;
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: 22px;
}
.product-price{
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 60px);
  line-height: 1;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-flex;
  align-items: baseline;
}
.product-price .cur{ font-size: .5em; margin-right: 4px; }
.product-price .per{
  font-size: .26em;
  background: none;
  -webkit-text-fill-color: var(--ink-muted);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-left: 8px;
}
.product-stock{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
  margin-left: auto;
}
.product-stock .dot{
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #5EE89A;
  box-shadow: 0 0 8px rgba(94,232,154,.8);
}

.product-short{
  font-size: 15.5px;
  color: var(--ink-muted);
  line-height: 1.65;
  margin-bottom: 18px;
}

.product-conditions{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.product-conditions .cond-pill{ padding: 7px 14px; font-size: 12.5px; }

/* Quantity selector + Add to cart */
.product-buy{
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}
.qty-control{
  display: inline-flex;
  align-items: stretch;
  border-radius: 999px;
  border: 1px solid var(--glass-border-strong);
  background: var(--glass-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
  flex-shrink: 0;
}
.qty-btn{
  background: transparent;
  border: 0;
  font-size: 18px;
  color: var(--ink);
  width: 44px;
  cursor: pointer;
  font-family: inherit;
  transition: background .2s var(--ease);
}
.qty-btn:hover{ background: var(--glass-bg-strong); }
.qty-input{
  width: 50px;
  background: transparent;
  border: 0;
  font-size: 16px;
  text-align: center;
  color: var(--ink);
  font-family: inherit;
  border-left: 1px solid var(--glass-border);
  border-right: 1px solid var(--glass-border);
  -moz-appearance: textfield;
}
.qty-input::-webkit-outer-spin-button,
.qty-input::-webkit-inner-spin-button{
  -webkit-appearance: none; margin: 0;
}
.product-add{
  flex: 1;
  justify-content: center;
  font-size: 15px;
  padding: 16px 28px;
  gap: 10px;
}
.product-add svg{ width: 18px; height: 18px; flex-shrink: 0; stroke-width: 2.2; }
.product-buy-now{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 14px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--glass-border-strong);
  font-family: inherit;
  font-size: 14px;
  letter-spacing: .03em;
  color: var(--ink);
  cursor: pointer;
  transition: all .25s var(--ease);
  margin-bottom: 32px;
  gap: 8px;
}
.product-buy-now svg{
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  stroke: var(--gold-bright);
}
.product-buy-now:hover{
  background: var(--glass-bg);
  border-color: var(--gold-bright);
}
.product-buy-now:hover svg{
  stroke: var(--bg-0);
}

/* Product includes block */
.product-includes{
  padding: 24px;
  border-radius: 20px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px);
  margin-bottom: 28px;
}
.includes-title{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin: 0 0 14px;
  font-weight: 600;
}
.product-includes ul{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.product-includes li{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 14px;
  color: var(--ink-muted);
  line-height: 1.55;
}
.product-includes li::before{
  content: "✓";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--gold-grad);
  color: var(--bg-0);
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 3px;
}
[data-theme="light"] .product-includes li::before{ color: rgba(240,244,250,.98); }

/* Meta info */
.product-meta{
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 20px;
  border-top: 1px solid var(--glass-border);
}
.meta-row{
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}
.meta-key{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.meta-val{ color: var(--ink); }

/* Product tabs */
.product-tabs{
  border-radius: 24px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 1px 0 var(--glass-edge);
  overflow: hidden;
}
.ptab-nav{
  display: flex;
  gap: 4px;
  padding: 8px;
  border-bottom: 1px solid var(--glass-border);
  overflow-x: auto;
  scrollbar-width: none;
}
.ptab-nav::-webkit-scrollbar{ display: none; }
.ptab-btn{
  flex-shrink: 0;
  padding: 12px 20px;
  background: transparent;
  border: 0;
  border-radius: 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink-muted);
  cursor: pointer;
  transition: all .25s var(--ease);
  white-space: nowrap;
}
.ptab-btn:hover{ color: var(--ink); }
.ptab-btn.active{
  background: var(--glass-bg-strong);
  color: var(--ink);
  border: 1px solid var(--glass-border-strong);
  box-shadow: inset 0 1px 0 var(--glass-edge-strong);
}
.ptab-panel{
  display: none;
  padding: 32px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--ink-muted);
}
.ptab-panel.active{ display: block; animation: fade .3s var(--ease); }
.ptab-h3{
  font-family: var(--font-display);
  font-size: 24px;
  margin: 0 0 16px;
  color: var(--ink);
  font-weight: 400;
}
.how-steps{
  padding-left: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.how-steps li{
  padding: 14px 18px;
  border-radius: 14px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
}
.how-steps strong{ color: var(--ink); }
.full-includes{
  padding-left: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 10px;
}
.full-includes li{
  position: relative;
  padding: 10px 14px 10px 36px;
  border-radius: 12px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  font-size: 14px;
  color: var(--ink);
}
.full-includes li::before{
  content: "✓";
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  color: var(--gold-bright);
  font-weight: 600;
}

@media (max-width: 540px){
  .ptab-panel{ padding: 22px 18px; }
  .ptab-btn{ padding: 10px 14px; font-size: 13px; }
}

/* Related products grid */
.related-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.related-card{
  padding: 24px;
  border-radius: 20px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px);
  transition: transform .3s var(--ease), border-color .3s var(--ease);
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: block;
}
.related-card:hover{
  transform: translateY(-4px);
  border-color: var(--glass-border-strong);
}
.related-cat{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: 8px;
}
.related-name{
  font-family: var(--font-display);
  font-size: 22px;
  margin-bottom: 14px;
  font-weight: 400;
  color: var(--ink);
}
.related-price{
  font-family: var(--font-display);
  font-size: 28px;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.related-price .per{
  font-size: 12px;
  background: none;
  -webkit-text-fill-color: var(--ink-muted);
  color: var(--ink-muted);
  font-family: var(--font-mono);
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-left: 6px;
}

/* ============================================================ */
/* ================ PACKAGE COMPARISON TABLE ================== */
/* ============================================================ */
.compare-wrap{
  margin-top: 48px;
  border-radius: 24px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 1px 0 var(--glass-edge);
  overflow: hidden;
}
.compare-head{
  padding: 22px 28px;
  border-bottom: 1px solid var(--glass-border);
  display: flex;
  align-items: center;
  gap: 12px;
}
.compare-head svg{
  width: 18px; height: 18px;
  stroke: var(--gold-bright);
  stroke-width: 1.6;
  fill: none;
}
.compare-head h3{
  margin: 0;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  color: var(--ink);
}
.compare-table-scroll{
  overflow-x: auto;
  scrollbar-width: thin;
}
.compare-table{
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}
.compare-table thead th{
  padding: 18px 22px;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
  border-bottom: 1px solid var(--glass-border);
}
.compare-table thead th.featured-col{
  color: var(--gold-bright);
  background: linear-gradient(180deg, rgba(200,220,255,.06), transparent);
}
.compare-table tbody td{
  padding: 16px 22px;
  font-size: 14px;
  color: var(--ink);
  border-bottom: 1px solid var(--glass-border);
}
.compare-table tbody tr:last-child td{ border-bottom: 0; }
.compare-table tbody td:first-child{
  color: var(--ink-muted);
  font-size: 13.5px;
}
.compare-table tbody td.featured-col{
  background: linear-gradient(180deg, rgba(200,220,255,.04), rgba(200,220,255,.02));
}
.compare-table .check{
  display: inline-flex;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--gold-grad);
  color: var(--bg-0);
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  box-shadow: inset 0 1px 0 var(--glass-edge-strong);
}
.compare-table .dash{
  display: inline-block;
  width: 14px; height: 1.5px;
  background: var(--ink-muted);
  opacity: .35;
  vertical-align: middle;
}
[data-theme="light"] .compare-table .check{ color: rgba(240,244,250,.98); }

/* ============================================================ */
/* ===================== DETAIL EXPAND CARDS ================== */
/* ============================================================ */
.detail-cards{
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.detail-card{
  border-radius: 20px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: inset 0 1px 0 var(--glass-edge);
  overflow: hidden;
  transition: border-color .3s var(--ease);
}
.detail-card[open]{ border-color: var(--glass-border-strong); }
.detail-card summary{
  list-style: none;
  cursor: pointer;
  padding: 22px 28px;
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink);
  position: relative;
}
.detail-card summary::-webkit-details-marker{ display: none; }
.detail-card-num{
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--glass-bg-strong), var(--glass-bg));
  border: 1px solid var(--glass-border-strong);
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .15em;
  color: var(--gold-bright);
  font-weight: 600;
}
.detail-card-arrow{
  margin-left: auto;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--glass-bg-strong);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: transform .3s var(--ease);
}
.detail-card-arrow svg{
  width: 12px; height: 12px;
  stroke: var(--gold-bright);
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.detail-card[open] .detail-card-arrow{ transform: rotate(180deg); }
.detail-body{
  padding: 0 28px 28px 84px;
  font-size: 14.5px;
  color: var(--ink-muted);
  line-height: 1.7;
}
.detail-body p{ margin: 0 0 12px; }
.detail-body p:last-child{ margin-bottom: 0; }
.detail-body strong{ color: var(--ink); font-weight: 500; }
.detail-body ul{
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.detail-body ul li{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
}
.detail-body ul li::before{
  content: "•";
  color: var(--gold-bright);
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

@media (max-width: 540px){
  .detail-card summary{ padding: 18px 20px; font-size: 16px; gap: 12px; }
  .detail-body{ padding: 0 20px 22px 20px; }
  .compare-head{ padding: 18px 22px; }
  .compare-table thead th{ padding: 14px 16px; }
  .compare-table tbody td{ padding: 14px 16px; font-size: 13px; }
}

/* ============================================================ */
/* =============== BIG DETAIL CARDS (Pachete page) ============ */
/* ============================================================ */
.detail-card-big{
  margin-top: 20px;
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  background: var(--glass-bg);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 1px 0 var(--glass-edge);
  overflow: hidden;
  transition: border-color .3s var(--ease);
}
.detail-card-big[open]{
  border-color: var(--glass-border-strong);
}
.detail-card-big > summary{
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 28px 32px;
  gap: 24px;
}
.detail-card-big > summary::-webkit-details-marker{ display: none; }
.detail-head-left h3{
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 36px);
  font-weight: 400;
  margin: 0 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 16px;
}
.detail-head-left .featured-tag{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--gold-bright);
  font-weight: 600;
}
.detail-head-left .meta{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.detail-head-left .meta .cond-pill{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 5px 12px;
}
.detail-head-right{
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}
.detail-head-right .price{
  font-family: var(--font-display);
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-flex;
  align-items: baseline;
}
.detail-head-right .price .cur{
  font-size: .55em;
  margin-right: 4px;
}
.detail-head-right .price-per{
  font-size: 13px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  letter-spacing: .15em;
  margin-left: 6px;
  -webkit-text-fill-color: var(--ink-muted);
  background: none;
}
.detail-card-big .toggle-ic{
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-strong);
  backdrop-filter: blur(16px);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: all .3s var(--ease);
  box-shadow: inset 0 1px 0 var(--glass-edge-strong);
}
.detail-card-big .toggle-ic svg{
  width: 16px; height: 16px;
  stroke: var(--gold-bright);
  transition: transform .3s var(--ease);
}
.detail-card-big[open] .toggle-ic{
  background: var(--gold-grad);
}
.detail-card-big[open] .toggle-ic svg{
  stroke: var(--bg-0);
  transform: rotate(45deg);
}
.detail-card-big .detail-body{
  border-top: 1px solid var(--glass-border);
  animation: detailOpen .4s var(--ease);
}
@keyframes detailOpen{
  from{ opacity: 0; transform: translateY(-8px); }
  to{ opacity: 1; transform: translateY(0); }
}
.detail-card-big .detail-content{
  padding: 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}
.detail-card-big .detail-content h5{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin: 0 0 16px;
  font-weight: 600;
}
.detail-card-big .detail-content ul{
  list-style: none;
  padding: 0;
  margin: 0;
}
.detail-card-big .detail-content ul li{
  padding: 8px 0;
  font-size: 14.5px;
  color: var(--ink-muted);
  display: flex;
  gap: 12px;
  align-items: flex-start;
  line-height: 1.5;
}
.detail-card-big .detail-content ul li::before{
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold-bright);
  margin-top: 9px;
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(200,220,255,.4);
}

@media (max-width: 760px){
  .detail-card-big > summary{
    grid-template-columns: 1fr;
    padding: 22px 24px;
  }
  .detail-head-right{
    width: 100%;
    justify-content: space-between;
  }
  .detail-card-big .detail-content{
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px;
  }
}

/* ============================================================ */
/* =============== BIG FAQ (Întrebări · Răspunsuri) =========== */
/* ============================================================ */
.faq-big{
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--glass-border);
}
.faq-q-big{
  border-bottom: 1px solid var(--glass-border);
  transition: background .3s var(--ease);
}
.faq-q-big[open]{
  background: linear-gradient(180deg, var(--glass-bg) 0%, transparent 100%);
}
.faq-q-big > summary{
  list-style: none;
  cursor: pointer;
  padding: 28px 24px 28px 60px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  position: relative;
}
.faq-q-big > summary::-webkit-details-marker{ display: none; }
.faq-q-big > summary > span:first-child{
  font-family: var(--font-display);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 400;
  color: var(--ink);
  line-height: 1.3;
  letter-spacing: -.005em;
}
.faq-x{
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-strong);
  backdrop-filter: blur(16px);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  transition: all .3s var(--ease);
  box-shadow: inset 0 1px 0 var(--glass-edge-strong);
}
.faq-x svg{
  width: 14px; height: 14px;
  stroke: var(--gold-bright);
  transition: transform .3s var(--ease);
}
.faq-q-big[open] .faq-x{
  background: var(--gold-grad);
}
.faq-q-big[open] .faq-x svg{
  stroke: var(--bg-0);
  transform: rotate(45deg);
}
.faq-q-big > p{
  margin: 0;
  padding: 0 80px 28px 60px;
  font-size: 15.5px;
  color: var(--ink-muted);
  line-height: 1.65;
  max-width: 880px;
  animation: detailOpen .4s var(--ease);
}

@media (max-width: 540px){
  .faq-q-big > summary{
    padding: 22px 20px 22px 24px;
    gap: 16px;
  }
  .faq-q-big > p{
    padding: 0 24px 22px 24px;
    font-size: 14.5px;
  }
  .faq-x{ width: 36px; height: 36px; }
}

/* ============================================================ */
/* ===================== SHOP MAGAZIN ========================= */
/* ============================================================ */
.shop-toolbar{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding: 20px 28px;
  border-radius: 18px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 1px 0 var(--glass-edge);
  flex-wrap: wrap;
}
.shop-count{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.shop-filters{
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.shop-filter{
  background: transparent;
  border: 1px solid var(--glass-border);
  color: var(--ink-muted);
  padding: 8px 18px;
  border-radius: 999px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  transition: all .25s var(--ease);
}
.shop-filter:hover{
  background: var(--glass-bg);
  color: var(--ink);
  border-color: var(--glass-border-strong);
}
.shop-filter.active{
  background: var(--gold-grad);
  color: var(--bg-0);
  border-color: transparent;
  font-weight: 600;
}

.shop-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
}
.shop-card{
  position: relative;
  border-radius: 22px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  box-shadow:
    inset 0 1px 0 var(--glass-edge-strong),
    inset 0 -1px 0 rgba(0,0,0,.15),
    0 30px 60px -30px rgba(0,0,0,.5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform .5s var(--ease), border-color .5s, background .5s, box-shadow .5s;
  cursor: pointer;
}
.shop-card::before{
  content:""; position: absolute; inset: 0;
  background: radial-gradient(400px 280px at var(--mx,50%) var(--my,0%), var(--ambient-1), transparent 60%);
  opacity: 0; transition: opacity .5s; pointer-events: none;
  z-index: 1;
}
.shop-card::after{
  content:""; position: absolute; top: -100%; left: -50%; width: 200%; height: 100%;
  background: linear-gradient(115deg,
    transparent 0%,
    transparent 40%,
    rgba(255,255,255,.10) 48%,
    var(--glass-edge-strong) 50%,
    rgba(255,255,255,.10) 52%,
    transparent 60%,
    transparent 100%);
  transform: translateY(0) rotate(0);
  transition: transform 1s var(--ease);
  pointer-events: none;
  opacity: .7;
  z-index: 1;
}
.shop-card:hover{
  transform: translateY(-4px);
  border-color: var(--glass-border-strong);
  background: var(--glass-bg-strong);
  box-shadow:
    inset 0 1px 0 var(--glass-edge-strong),
    inset 0 -1px 0 rgba(0,0,0,.15),
    0 40px 80px -30px rgba(180,200,255,.25);
}
.shop-card:hover::before{ opacity: 1; }
.shop-card:hover::after{ transform: translateY(250%) rotate(0); }
.shop-card.recommended{
  border-color: rgba(245, 213, 142, 0.35);
}
.shop-card.recommended:hover{
  border-color: rgba(245, 213, 142, 0.6);
  box-shadow:
    inset 0 1px 0 var(--glass-edge-strong),
    inset 0 -1px 0 rgba(0,0,0,.15),
    0 40px 80px -30px rgba(245, 213, 142, 0.25);
}
.shop-card > *{ position: relative; z-index: 2; }
.shop-card-badge{
  position: absolute;
  top: 16px;
  right: 16px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--gold-grad);
  color: var(--bg-0);
  font-weight: 600;
  z-index: 2;
}
.shop-card-img{
  position: relative;
  aspect-ratio: 4/3;
  background: var(--bg-0);
  display: grid;
  place-items: center;
  overflow: hidden;
  border-bottom: 1px solid var(--glass-border);
}
.shop-card-img::before{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(400px 300px at 30% 30%, var(--ambient-1), transparent 70%),
    radial-gradient(400px 300px at 70% 70%, var(--ambient-2), transparent 70%);
  pointer-events: none;
}

/* Shop pills (smaller version of viz-pill, positioned on card image) */
.shop-pill{
  position: absolute;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-strong);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .22em;
  color: var(--gold-bright);
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 var(--glass-edge-strong),
    0 8px 20px -6px rgba(0,0,0,.4);
  z-index: 4;
  white-space: nowrap;
  font-weight: 600;
}
.shop-pill .pulse-dot{
  display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #5EE89A;
  box-shadow: 0 0 6px rgba(94,232,154,.9);
  margin-right: 6px;
  vertical-align: middle;
  animation: pulse 1.8s var(--ease) infinite;
}
.shop-pill-tl{ top: 14px; left: 14px; }
.shop-pill-tr{ top: 14px; right: 14px; }
.shop-pill-bl{ bottom: 14px; left: 14px; }
.shop-pill-br{ bottom: 14px; right: 14px; }

/* SVG visual container */
.shop-viz{
  position: relative;
  z-index: 1;
  width: 78%;
  height: 78%;
  display: grid;
  place-items: center;
}

/* =============================================== */
/* === SUBSCRIPTIONS (more advanced visuals) ===== */
/* =============================================== */

/* === YMP-STARTER: Radial Channel Pulse (CIRCULAR shape) === */
.viz-pulse{
  position: relative;
  width: 200px;
  height: 200px;
  display: grid;
  place-items: center;
}
.viz-pulse-ring{
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1.5px solid var(--silver-bright);
  opacity: 0;
  animation: pulseExpand 3s ease-out infinite;
}
.viz-pulse-ring.r2{ animation-delay: 1s; }
.viz-pulse-ring.r3{ animation-delay: 2s; }
@keyframes pulseExpand{
  0%{ transform: scale(.45); opacity: .55; }
  50%{ opacity: .25; }
  100%{ transform: scale(1.05); opacity: 0; }
}
.viz-pulse-core{
  position: relative;
  z-index: 2;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f8fbff 0%, #b8c5d6 45%, #6d7a8f 100%);
  display: grid;
  place-items: center;
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.8),
    inset 0 -4px 10px rgba(0,0,0,.3),
    0 12px 36px rgba(150,170,200,.5);
}
.viz-pulse-core::after{
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.3);
  pointer-events: none;
}
.viz-pulse-icon{
  width: 38px;
  height: 38px;
  fill: var(--bg-0);
  filter: drop-shadow(0 1px 2px rgba(255,255,255,.6));
  position: relative;
  z-index: 2;
}
.viz-pulse-tag{
  position: absolute;
  z-index: 3;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  background: var(--glass-bg-strong);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid var(--glass-border-strong);
  border-radius: 999px;
  padding: 7px 16px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .25em;
  color: var(--ink-muted);
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 var(--glass-edge-strong),
    0 8px 20px rgba(0,0,0,.5);
}
.viz-pulse-tag strong{
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--silver-bright);
  letter-spacing: -.01em;
  text-transform: none;
  margin-right: 6px;
}

/* === YMP-STARTER (legacy): Live Channel Monitor Dashboard - kept for reference === */
.viz-monitor{
  width: 100%; max-width: 220px;
  aspect-ratio: 1.4/1;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.02) 100%);
  border: 1px solid var(--glass-border-strong);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    inset 0 1px 0 var(--glass-edge-strong),
    inset 0 -1px 0 rgba(0,0,0,.2),
    0 12px 32px rgba(0,0,0,.4);
  padding: 12px 14px;
  display: flex; flex-direction: column;
  gap: 10px;
  position: relative;
  overflow: hidden;
}
.viz-monitor::before{
  content: ""; position: absolute;
  top: -50%; left: -50%; width: 200%; height: 200%;
  background: linear-gradient(115deg, transparent 45%, rgba(255,255,255,.06) 50%, transparent 55%);
  animation: monitorShine 4s linear infinite;
}
@keyframes monitorShine{
  0%{ transform: translate(-30%, -30%); }
  100%{ transform: translate(30%, 30%); }
}
.viz-monitor-head{
  display: flex; align-items: center; gap: 8px;
  position: relative; z-index: 2;
}
.viz-monitor-avatar{
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f8fbff 0%, #b8c5d6 50%, #6d7a8f 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
  flex-shrink: 0;
  position: relative;
}
.viz-monitor-avatar::after{
  content: ""; position: absolute; inset: 30%;
  border-radius: 50%; background: var(--bg-0);
}
.viz-monitor-bars{ flex: 1; display: flex; flex-direction: column; gap: 4px; }
.viz-monitor-bar{
  height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,.25) 0%, rgba(255,255,255,.08) 100%);
}
.viz-monitor-bar.short{ width: 70%; }
.viz-monitor-bar.tiny{ width: 40%; height: 3px; }
.viz-monitor-live{
  font-family: var(--font-mono); font-size: 7.5px;
  letter-spacing: .2em;
  color: #5EE89A;
  display: flex; align-items: center; gap: 4px;
  margin-left: auto;
}
.viz-monitor-live::before{
  content: ""; width: 5px; height: 5px;
  border-radius: 50%; background: #5EE89A;
  box-shadow: 0 0 6px #5EE89A;
  animation: pulse 1.6s ease-in-out infinite;
}
.viz-monitor-graph{
  flex: 1;
  position: relative;
  margin-top: 4px;
  z-index: 2;
}
.viz-monitor-graph svg{
  width: 100%; height: 100%;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)) !important;
}
.viz-monitor-stats{
  display: flex; gap: 8px;
  position: relative; z-index: 2;
}
.viz-monitor-stat{
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: .12em;
  color: var(--ink-muted);
  text-transform: uppercase;
}
.viz-monitor-stat strong{
  color: var(--silver-bright);
  font-weight: 700;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: -.01em;
  display: block;
  text-transform: none;
}

/* === YMP-PROGRESIV: Multi-Stat Channel Dashboard (RECTANGULAR shape) === */
.viz-growth{
  width: 100%; max-width: 230px;
  aspect-ratio: 1.4/1;
  border-radius: 14px;
  background: linear-gradient(145deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,.02) 100%);
  border: 1px solid var(--glass-border-strong);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    inset 0 1px 0 var(--glass-edge-strong),
    0 12px 32px rgba(0,0,0,.4);
  padding: 12px 14px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 6px;
  position: relative;
  overflow: hidden;
}
.viz-growth-head{
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
}
.viz-growth-stat{
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.viz-growth-stat strong{
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 400;
  background: linear-gradient(180deg, #f8fbff 0%, #b8c5d6 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -.02em;
}
.viz-growth-stat span{
  font-family: var(--font-mono);
  font-size: 7.5px;
  letter-spacing: .2em;
  color: var(--ink-muted);
  text-transform: uppercase;
  margin-top: 3px;
}
.viz-growth-stat.gold strong{
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.viz-growth-sparkline{
  position: relative;
  width: 100%; height: 100%;
}
.viz-growth-sparkline svg{
  width: 100% !important; height: 100% !important;
  filter: drop-shadow(0 2px 6px rgba(168,232,255,.3)) !important;
}
.viz-growth-tiles{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 4px;
}
.viz-growth-tile{
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(255,255,255,.15) 0%, rgba(255,255,255,.04) 100%);
  border: 1px solid rgba(255,255,255,.12);
  position: relative;
  overflow: hidden;
}
.viz-growth-tile::after{
  content: ""; position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(245,213,142,.4) 100%);
}
.viz-growth-tile.t1::after{ height: 45%; }
.viz-growth-tile.t2::after{ height: 70%; background: linear-gradient(180deg, transparent 0%, rgba(245,213,142,.6) 100%); }
.viz-growth-tile.t3::after{ height: 90%; background: linear-gradient(180deg, transparent 0%, var(--gold-bright) 100%); }

/* === YMP-PROGRESIV: Chrome Audio Bar Visualizer === */
.viz-bars{
  position: relative;
  width: 200px;
  height: 170px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 14px;
  padding-bottom: 18px;
}
.viz-bars-base{
  position: absolute;
  bottom: 14px;
  left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--glass-border-strong) 25%, var(--silver-bright) 50%, var(--glass-border-strong) 75%, transparent 100%);
  opacity: .55;
}
.viz-bar{
  position: relative;
  width: 20px;
  border-radius: 4px 4px 1px 1px;
  background: linear-gradient(180deg, #f5f8fc 0%, #c5d0de 35%, #6a7a8e 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset -1px 0 2px rgba(0,0,0,.18),
    inset 1px 0 2px rgba(255,255,255,.35),
    0 6px 18px rgba(0,0,0,.45);
  transform-origin: bottom center;
  animation: barRise .9s var(--ease, cubic-bezier(.22,.61,.36,1)) both;
}
.viz-bar::before{
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 5px;
  bottom: 30%;
  background: linear-gradient(180deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 100%);
  border-radius: 2px;
  pointer-events: none;
}
.viz-bar.b1{ height: 32%; animation-delay: .05s; }
.viz-bar.b2{ height: 52%; animation-delay: .15s; }
.viz-bar.b3{ height: 70%; animation-delay: .25s; }
.viz-bar.b4{ height: 94%; animation-delay: .35s; }
.viz-bar.b5{ height: 58%; animation-delay: .45s; }
.viz-bar.gold{
  background: linear-gradient(180deg, #fff5cf 0%, #f5d58e 40%, #b8924a 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset -1px 0 2px rgba(120,80,30,.35),
    inset 1px 0 2px rgba(255,245,207,.5),
    0 8px 24px rgba(245,213,142,.55),
    0 0 30px rgba(245,213,142,.22);
}
.viz-bar-peak{
  position: absolute;
  top: -9px;
  left: 50%;
  transform: translateX(-50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold-bright, #f5d58e);
  box-shadow:
    0 0 8px var(--gold-bright, #f5d58e),
    0 0 16px rgba(245,213,142,.6),
    inset 0 1px 0 rgba(255,255,255,.7);
  animation: peakPulse 2.2s ease-in-out infinite;
}
@keyframes barRise{
  0%{ transform: scaleY(.15); opacity: 0; }
  100%{ transform: scaleY(1); opacity: 1; }
}
@keyframes peakPulse{
  0%, 100%{ transform: translateX(-50%) scale(1); opacity: 1; }
  50%{ transform: translateX(-50%) scale(1.4); opacity: .75; }
}

/* === LYU-STARTER: Paper Airplane === */
.viz-plane{
  position: relative;
  width: 200px;
  height: 200px;
  display: grid;
  place-items: center;
}
.viz-plane-svg{
  width: 100%; height: 100%;
  filter: drop-shadow(0 14px 22px rgba(0,0,0,.45)) drop-shadow(0 2px 4px rgba(0,0,0,.3));
  overflow: visible;
}
.viz-plane-fly{
  transform-origin: 50% 50%;
  animation: planeGlide 4.5s ease-in-out infinite;
}
.viz-plane-trail{
  animation: trailFade 2.4s ease-in-out infinite;
}
.viz-plane-trail.t1{ animation-delay: 0s; }
.viz-plane-trail.t2{ animation-delay: .4s; }
.viz-plane-trail.t3{ animation-delay: .8s; }
@keyframes planeGlide{
  0%, 100%{ transform: translate(0, 0) rotate(0deg); }
  50%{ transform: translate(4px, -8px) rotate(-1.5deg); }
}
@keyframes trailFade{
  0%{ opacity: 0; transform: translateX(8px); }
  30%{ opacity: .6; }
  100%{ opacity: 0; transform: translateX(-14px); }
}

/* === YMP-PREMIUM: Platform Ecosystem === */
.viz-eco{
  position: relative;
  width: 200px; height: 180px;
}
.viz-eco-center{
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 56px; height: 56px;
  z-index: 3;
}
.viz-eco-crown{
  width: 100%; height: 100%;
  background: linear-gradient(135deg, #f8fbff 0%, #f5d58e 50%, #b89858 100%);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M15 35 L 25 60 L 35 25 L 50 55 L 65 25 L 75 60 L 85 35 L 85 75 L 15 75 Z' fill='black'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><path d='M15 35 L 25 60 L 35 25 L 50 55 L 65 25 L 75 60 L 85 35 L 85 75 L 15 75 Z' fill='black'/></svg>") center/contain no-repeat;
  filter: drop-shadow(0 0 16px rgba(245,213,142,.7));
  animation: crownGlow 3s ease-in-out infinite;
}
@keyframes crownGlow{
  0%, 100%{ filter: drop-shadow(0 0 16px rgba(245,213,142,.5)); }
  50%{ filter: drop-shadow(0 0 24px rgba(245,213,142,.9)); }
}
.viz-eco-ring{
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,.18);
  pointer-events: none;
}
.viz-eco-ring.r1{ inset: 14%; animation: spin 28s linear infinite; }
.viz-eco-ring.r2{ inset: 0%; animation: spin 38s linear infinite reverse; }
.viz-eco-node{
  position: absolute;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.06) 100%);
  border: 1px solid var(--glass-border-strong);
  backdrop-filter: blur(8px);
  display: grid; place-items: center;
  box-shadow:
    inset 0 1px 0 var(--glass-edge-strong),
    0 6px 16px rgba(0,0,0,.5);
  z-index: 2;
}
.viz-eco-node svg{
  width: 12px !important; height: 12px !important;
  fill: var(--silver-bright);
  filter: none !important;
}
.viz-eco-node.n1{ top: 6%; left: 50%; transform: translateX(-50%); }
.viz-eco-node.n2{ top: 28%; right: 4%; }
.viz-eco-node.n3{ bottom: 28%; right: 4%; }
.viz-eco-node.n4{ bottom: 6%; left: 50%; transform: translateX(-50%); }
.viz-eco-node.n5{ bottom: 28%; left: 4%; }
.viz-eco-node.n6{ top: 28%; left: 4%; }
.viz-eco-line{
  position: absolute;
  left: 50%; top: 50%;
  width: 2px; height: 45%;
  background: linear-gradient(180deg, transparent 0%, rgba(245,213,142,.3) 50%, transparent 100%);
  transform-origin: top center;
  pointer-events: none;
}
.viz-eco-line.l1{ transform: translateX(-50%) rotate(0deg); }
.viz-eco-line.l2{ transform: translateX(-50%) rotate(60deg); }
.viz-eco-line.l3{ transform: translateX(-50%) rotate(120deg); }
.viz-eco-line.l4{ transform: translateX(-50%) rotate(180deg); }
.viz-eco-line.l5{ transform: translateX(-50%) rotate(240deg); }
.viz-eco-line.l6{ transform: translateX(-50%) rotate(300deg); }

/* =============================================== */
/* === LAUNCHES (simpler, kept clean) ============ */
/* =============================================== */

/* === LYU-STARTER: Rocket === */
.viz-rocket{
  position: relative;
  width: 100px; height: 130px;
}
.viz-rocket-body{
  position: absolute;
  left: 50%; top: 8%;
  transform: translateX(-50%);
  width: 38px; height: 75%;
  background: linear-gradient(135deg, #f8fbff 0%, #b8c5d6 50%, #6d7a8f 100%);
  border-radius: 50% 50% 20% 20% / 60% 60% 12% 12%;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    inset -3px 0 6px rgba(0,0,0,.2),
    0 8px 24px rgba(0,0,0,.5);
  animation: rocketFloat 3s ease-in-out infinite;
}
.viz-rocket-window{
  position: absolute;
  top: 28%; left: 50%;
  transform: translateX(-50%);
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--bg-0);
  border: 2px solid var(--silver-bright);
}
.viz-rocket-fin-l, .viz-rocket-fin-r{
  position: absolute;
  bottom: 18%;
  width: 16px; height: 24px;
  background: linear-gradient(135deg, #b8c5d6 0%, #6d7a8f 100%);
}
.viz-rocket-fin-l{ left: -8px; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.viz-rocket-fin-r{ right: -8px; clip-path: polygon(0 0, 100% 100%, 0 100%); }
.viz-rocket-flame{
  position: absolute;
  bottom: -18%; left: 50%;
  transform: translateX(-50%);
  width: 16px; height: 28px;
  background: linear-gradient(180deg, var(--gold-bright) 0%, transparent 100%);
  border-radius: 50% 50% 50% 50% / 100% 100% 30% 30%;
  filter: blur(3px);
  opacity: .9;
  animation: flameFlicker .15s ease-in-out infinite alternate;
}
@keyframes rocketFloat{
  0%, 100%{ transform: translateX(-50%) translateY(0); }
  50%{ transform: translateX(-50%) translateY(-6px); }
}
@keyframes flameFlicker{
  0%{ height: 28px; opacity: .85; }
  100%{ height: 36px; opacity: 1; }
}

/* === LYU-PROGRESIV: Target === */
.viz-target{
  position: relative;
  width: 130px; height: 130px;
}
.viz-target-ring{
  position: absolute;
  border-radius: 50%;
  border: 2px solid var(--silver-bright);
  box-shadow: inset 0 1px 2px rgba(255,255,255,.5);
}
.viz-target-ring.r1{ inset: 0; opacity: .35; }
.viz-target-ring.r2{ inset: 14%; opacity: .55; border-color: #b8c5d6; }
.viz-target-ring.r3{ inset: 28%; opacity: .75; border-color: #d0d8e3; }
.viz-target-bull{
  position: absolute; inset: 42%;
  border-radius: 50%;
  background: var(--gold-grad);
  box-shadow:
    0 0 20px rgba(245,213,142,.6),
    inset 0 1px 0 rgba(255,255,255,.5);
  animation: bullPulse 2s ease-in-out infinite;
}
@keyframes bullPulse{
  0%, 100%{ transform: scale(1); }
  50%{ transform: scale(1.1); }
}
.viz-target-arrow{
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(-35deg);
  width: 100px; height: 4px;
  background: linear-gradient(90deg, transparent 0%, var(--silver-bright) 50%, var(--ink) 100%);
  border-radius: 2px;
  z-index: 3;
}
.viz-target-arrow::after{
  content: ""; position: absolute;
  right: -8px; top: 50%; transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 10px solid var(--ink);
  border-top: 6px solid transparent;
  border-bottom: 6px solid transparent;
}

/* === LYU-PREMIUM: Globe Network === */
.viz-globe{
  position: relative;
  width: 140px; height: 140px;
}
.viz-globe-core{
  position: absolute; inset: 18%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 30%, #f8fbff 0%, #b8c5d6 40%, #4d5a6f 100%);
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.6),
    inset 0 -4px 12px rgba(0,0,0,.4),
    0 10px 30px rgba(0,0,0,.5);
}
.viz-globe-core::before{
  content: ""; position: absolute; inset: 8%;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.2);
}
.viz-globe-core::after{
  content: ""; position: absolute;
  top: 50%; left: 0; right: 0;
  height: 1px;
  background: rgba(255,255,255,.2);
}
.viz-globe-orbit{
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px dashed rgba(255,255,255,.18);
  animation: spin 30s linear infinite;
}
.viz-globe-orbit.o2{
  inset: 8%;
  border-style: dotted;
  animation-duration: 22s;
  animation-direction: reverse;
}
.viz-globe-node{
  position: absolute;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--gold-grad);
  box-shadow: 0 0 10px var(--gold-bright);
}
.viz-globe-node.n1{ top: -5px; left: 50%; transform: translateX(-50%); }
.viz-globe-node.n2{ top: 22%; right: -5px; }
.viz-globe-node.n3{ bottom: 22%; left: -5px; }
.viz-globe-node.n4{ bottom: -5px; left: 50%; transform: translateX(-50%); }

@keyframes spin{
  0%{ transform: rotate(0deg); }
  100%{ transform: rotate(360deg); }
}

.shop-card.hidden{ display: none; }
.shop-card-body{
  padding: 24px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}
.shop-card-cat{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold-bright);
  font-weight: 600;
}
.shop-card h3{
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  margin: 0;
  line-height: 1.1;
}
.shop-card-rating{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--ink-muted);
}
.shop-card-rating svg{
  width: 12px;
  height: 12px;
  fill: var(--gold-bright);
}
.shop-card-price-row{
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 8px;
}
.shop-card-price{
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 400;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  line-height: 1;
}
.shop-card-per{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.shop-card-actions{
  display: flex;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
}
.shop-card-btn{
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: all .25s var(--ease);
  border: 1px solid var(--glass-border-strong);
  background: var(--glass-bg-strong);
  color: var(--ink);
}
.shop-card-btn:hover{
  background: var(--glass-bg);
  border-color: var(--silver-bright);
}
.shop-card-btn-primary{
  background: var(--gold-grad);
  color: var(--bg-0);
  border-color: transparent;
}
.shop-card-btn-primary:hover{
  background: var(--gold-bright);
  transform: translateY(-1px);
}
.shop-card-btn svg{
  width: 14px;
  height: 14px;
}
.shop-card.hidden{ display: none; }

@media (max-width: 540px){
  .shop-grid{ grid-template-columns: 1fr; }
  .shop-toolbar{ padding: 16px 20px; }
  .shop-card-actions{ flex-direction: column; }
}

/* ============================================================ */
/* ====================== CHECKOUT PAGE ======================= */
/* ============================================================ */
.checkout-header{
  text-align: center;
  max-width: 720px;
  margin: 0 auto 48px;
}
.checkout-header .eyebrow-pill{ margin: 0 auto 24px; }
.checkout-header h1{
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.01em;
  margin: 0 0 16px;
}
.checkout-header h1 em{
  font-family: var(--font-italic);
  background: linear-gradient(180deg, var(--silver-bright) 0%, var(--ink-muted) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.checkout-header p{
  font-size: 16px;
  color: var(--ink-muted);
  line-height: 1.65;
  max-width: 540px;
  margin: 0 auto;
}

.checkout-steps{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  max-width: 640px;
  margin: 0 auto;
}
.checkout-steps .step{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  opacity: .5;
  transition: opacity .3s var(--ease);
}
.checkout-steps .step.active{
  opacity: 1;
  border-color: var(--glass-border-strong);
  background: var(--glass-bg-strong);
  box-shadow: inset 0 1px 0 var(--glass-edge-strong);
}
.checkout-steps .step-num{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--gold-bright);
  font-weight: 600;
}
.checkout-steps .step.active .step-num{
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.checkout-steps .step-label{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink);
}
.checkout-steps .step-line{
  flex: 1;
  height: 1px;
  background: var(--glass-border);
  max-width: 60px;
  margin: 0 4px;
}

.checkout-grid{
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 32px;
  align-items: start;
}
.checkout-main{
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
.checkout-card{
  border-radius: 24px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  box-shadow: inset 0 1px 0 var(--glass-edge);
  padding: 28px 32px;
}
.checkout-card-head{
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--glass-border);
}
.checkout-card-num{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .25em;
  color: var(--gold-bright);
  font-weight: 600;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-strong);
  flex-shrink: 0;
  line-height: 1;
}
.checkout-card-head h3{
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  margin: 0 0 4px;
  letter-spacing: -.005em;
}
.checkout-card-head p{
  font-size: 13.5px;
  color: var(--ink-muted);
  margin: 0;
  line-height: 1.5;
}

.checkout-form{
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.checkout-form .field{
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.checkout-form .field-row{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.checkout-form label{
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-muted);
  font-weight: 600;
}
.checkout-form input,
.checkout-form select,
.checkout-form textarea{
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14.5px;
  transition: all .25s var(--ease);
  width: 100%;
  outline: none;
}
.checkout-form input:focus,
.checkout-form select:focus,
.checkout-form textarea:focus{
  border-color: var(--silver-bright);
  background: var(--glass-bg);
  box-shadow: 0 0 0 3px rgba(200,220,255,.08);
}
.checkout-form textarea{
  resize: vertical;
  min-height: 80px;
  font-family: var(--font-body);
}

/* Toggle switch */
.checkout-toggle{ margin-top: 8px; }
.toggle-row{
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  user-select: none;
}
.toggle-row input{ position: absolute; opacity: 0; pointer-events: none; }
.toggle-track{
  width: 44px;
  height: 24px;
  border-radius: 999px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-strong);
  position: relative;
  transition: all .3s var(--ease);
  flex-shrink: 0;
}
.toggle-knob{
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ink-muted);
  transition: all .3s var(--ease);
}
.toggle-row input:checked + .toggle-track{
  background: var(--gold-grad);
  border-color: transparent;
}
.toggle-row input:checked + .toggle-track .toggle-knob{
  left: 22px;
  background: var(--bg-0);
}
.toggle-label{
  font-size: 14.5px;
  color: var(--ink);
}
.checkout-company-fields{
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px dashed var(--glass-border);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Payment methods */
.payment-methods{
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pay-method{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 14px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  cursor: pointer;
  transition: all .25s var(--ease);
}
.pay-method:hover{
  border-color: var(--glass-border-strong);
}
.pay-method.active{
  border-color: var(--silver-bright);
  background: var(--glass-bg);
  box-shadow: inset 0 1px 0 var(--glass-edge-strong),
              0 0 0 3px rgba(200,220,255,.06);
}
.pay-method input{ position: absolute; opacity: 0; pointer-events: none; }
.pay-method-body{
  display: flex;
  align-items: center;
  gap: 14px;
}
.pay-method-icon{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.pay-method-icon svg{ width: 20px; height: 20px; stroke: var(--silver-bright); }
.pay-method.active .pay-method-icon svg{ stroke: var(--gold-bright); }
.pay-method-name{
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 2px;
}
.pay-method-desc{
  font-size: 12px;
  color: var(--ink-muted);
}
.pay-method-badges{
  display: flex;
  gap: 6px;
}
.pay-badge{
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  color: var(--ink-muted);
  font-weight: 600;
}

.card-details{
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px dashed var(--glass-border);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.card-input-wrap{
  position: relative;
}
.card-input-wrap input{ padding-right: 80px; }
.card-brand-icons{
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 4px;
}

/* Terms checkboxes */
.checkout-terms{
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.terms-row{
  display: flex;
  align-items: flex-start;
  gap: 14px;
  cursor: pointer;
  user-select: none;
}
.terms-row input{ position: absolute; opacity: 0; pointer-events: none; }
.terms-check{
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-strong);
  flex-shrink: 0;
  position: relative;
  transition: all .25s var(--ease);
  margin-top: 1px;
}
.terms-row input:checked + .terms-check{
  background: var(--gold-grad);
  border-color: transparent;
}
.terms-row input:checked + .terms-check::after{
  content: "";
  position: absolute;
  top: 3px;
  left: 7px;
  width: 5px;
  height: 10px;
  border: solid var(--bg-0);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.terms-row span:last-child{
  font-size: 13.5px;
  color: var(--ink-muted);
  line-height: 1.55;
}
.terms-row a{
  color: var(--gold-bright);
  text-decoration: underline;
  text-decoration-color: rgba(245, 213, 142, 0.3);
  text-underline-offset: 3px;
}

/* SUMMARY (right column, sticky) */
.checkout-summary{
  position: sticky;
  top: 100px;
}
.summary-card{
  border-radius: 24px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border-strong);
  backdrop-filter: blur(2px) saturate(110%);
  -webkit-backdrop-filter: blur(2px) saturate(110%);
  box-shadow:
    inset 0 1px 0 var(--glass-edge-strong),
    0 30px 60px -24px rgba(0,0,0,.5);
  padding: 28px;
}
.summary-card h3{
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  margin: 0 0 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--glass-border);
}
.summary-item{
  display: grid;
  grid-template-columns: 64px 1fr auto;
  gap: 14px;
  align-items: start;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: 20px;
}
.summary-item-img{
  width: 64px;
  height: 64px;
  border-radius: 12px;
  background: var(--bg-0);
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
}
.summary-item-img::before{
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120px 80px at 40% 30%, var(--ambient-1), transparent 70%);
}
.summary-item-img img{ width: 70%; position: relative; z-index: 1; }
.summary-item-info{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.summary-item-cat{
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold-bright);
  font-weight: 600;
}
.summary-item-name{
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.summary-item-name .rec-tag{
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--gold-grad);
  color: var(--bg-0);
  font-weight: 600;
}
.summary-item-meta{
  font-size: 11.5px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  letter-spacing: .04em;
}
.summary-item-price{
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 400;
  white-space: nowrap;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.summary-item-price span{
  font-size: 11px;
  color: var(--ink-muted);
  font-family: var(--font-mono);
  letter-spacing: .15em;
  -webkit-text-fill-color: var(--ink-muted);
}

.summary-qty{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--glass-border);
}
.summary-qty > span{
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.qty-control.small{
  display: inline-flex;
  align-items: center;
  border-radius: 10px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  overflow: hidden;
}
.qty-control.small .qty-btn{
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  color: var(--ink);
  cursor: pointer;
  font-size: 16px;
  display: grid;
  place-items: center;
}
.qty-control.small .qty-input{
  width: 36px;
  border: none;
  background: transparent;
  text-align: center;
  color: var(--ink);
  font-size: 14px;
  font-family: var(--font-mono);
  outline: none;
}

.summary-discount{ margin-bottom: 20px; }
.discount-input-wrap{
  display: flex;
  gap: 8px;
}
.discount-input-wrap input{
  flex: 1;
  padding: 11px 14px;
  border-radius: 10px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  outline: none;
}
.discount-input-wrap input:focus{ border-color: var(--silver-bright); }
.discount-apply{
  padding: 11px 18px;
  border-radius: 10px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-strong);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all .25s var(--ease);
  font-weight: 600;
}
.discount-apply:hover{
  background: var(--gold-grad);
  color: var(--bg-0);
  border-color: transparent;
}

.summary-totals{
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--glass-border);
  margin-bottom: 20px;
}
.total-row{
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  color: var(--ink-muted);
}
.total-row.discount{ color: #5EE89A; }
.total-row.final{
  padding-top: 14px;
  border-top: 1px solid var(--glass-border);
  font-size: 16px;
  color: var(--ink);
  font-weight: 500;
  margin-top: 4px;
}
.total-price{
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 400;
  background: var(--gold-grad);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.total-note{
  font-size: 11.5px;
  color: var(--ink-muted);
  text-align: right;
  margin-top: -2px;
  font-family: var(--font-mono);
  letter-spacing: .04em;
}

.checkout-submit{
  width: 100%;
  justify-content: center;
  margin-bottom: 20px;
  padding: 16px 24px;
  font-size: 14px;
  letter-spacing: .12em;
  gap: 10px;
}
.checkout-submit svg{
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.summary-trust{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 18px;
  padding: 12px 8px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--glass-bg) 0%, transparent 100%);
  border: 1px solid var(--glass-border);
  flex-wrap: nowrap;
}
.trust-item{
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
  padding: 0 12px;
  position: relative;
  white-space: nowrap;
  flex: 1;
  justify-content: center;
}
.trust-item + .trust-item::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: linear-gradient(180deg, transparent 0%, var(--glass-border-strong) 50%, transparent 100%);
}
.trust-item svg{
  width: 12px;
  height: 12px;
  stroke: var(--gold-bright);
  flex-shrink: 0;
}

.summary-powered{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 20px;
  border-top: 1px dashed var(--glass-border);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-muted);
}
.summary-powered .stripe-text{
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
  background: linear-gradient(180deg, var(--silver-bright) 0%, var(--ink-muted) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 980px){
  .checkout-grid{ grid-template-columns: 1fr; }
  .checkout-summary{ position: relative; top: 0; }
}
@media (max-width: 540px){
  .checkout-card{ padding: 22px 20px; }
  .checkout-form .field-row{ grid-template-columns: 1fr; }
  .checkout-steps{ flex-direction: column; gap: 8px; }
  .checkout-steps .step-line{ width: 1px; height: 16px; max-width: none; }
  .pay-method-badges{ display: none; }
}
/* === WP Admin Bar overlap fix === */
body.admin-bar .nav{ top: 32px; }
body.admin-bar{ padding-top: 110px; }
body.admin-bar.home, body.admin-bar.page-template-template-home{ padding-top: 32px; }
@media (max-width: 782px){
  body.admin-bar .nav{ top: 46px; }
  body.admin-bar{ padding-top: 124px; }
  body.admin-bar.home, body.admin-bar.page-template-template-home{ padding-top: 46px; }
}
/* =========================================================================
 * TATARR Silver - WooCommerce dark glass overrides
 * Restyles native WC cart/checkout/my-account markup to match Silver Glass.
 * Added: 2026-05-13
 * ========================================================================= */

/* Container baseline */
.woocommerce-cart .page-content,
.woocommerce-checkout .page-content,
.woocommerce-account .page-content{
  color: var(--ink);
  font-family: var(--font-body);
}

/* ---- Messages / notices ---- */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-notice{
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  color: var(--ink) !important;
  border-radius: 14px !important;
  padding: 18px 22px 18px 56px !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  letter-spacing: 0.01em !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  position: relative;
  box-shadow: 0 8px 32px -12px rgba(0,0,0,.4);
}
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before{
  color: var(--gold) !important;
  font-size: 18px !important;
  left: 22px !important;
  top: 50% !important;
  transform: translateY(-50%);
}
.woocommerce-error{ border-color: rgba(220, 80, 80, 0.45) !important; }
.woocommerce-error::before{ color: #f06060 !important; }
.woocommerce-message .button,
.woocommerce-info .button{
  background: var(--glass-bg-strong) !important;
  border: 1px solid var(--glass-border-strong) !important;
  color: var(--ink) !important;
  border-radius: 999px !important;
  padding: 8px 18px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  margin-left: 12px !important;
}

/* ---- Buttons (universal) ---- */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce-page a.button,
.woocommerce-page button.button{
  background: linear-gradient(135deg, var(--ink) 0%, rgba(245,250,255,0.85) 100%) !important;
  color: var(--bg-0) !important;
  border: 1px solid var(--glass-edge-strong) !important;
  border-radius: 999px !important;
  padding: 14px 28px !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  transition: all 0.35s var(--ease);
  box-shadow: 0 8px 24px -8px rgba(255,255,255,0.18);
  text-shadow: none;
}
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover{
  transform: translateY(-1px);
  box-shadow: 0 12px 32px -6px rgba(255,255,255,0.3);
  background: var(--ink) !important;
}
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt{
  background: linear-gradient(135deg, var(--gold) 0%, rgba(212,170,90,0.85) 100%) !important;
  color: var(--bg-0) !important;
}

/* ---- Tables (cart, my-orders) ---- */
.woocommerce table.shop_table,
.woocommerce-page table.shop_table{
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 16px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden;
  backdrop-filter: blur(3px) saturate(115%);
  -webkit-backdrop-filter: blur(3px) saturate(115%);
  color: var(--ink);
  margin: 0 0 24px !important;
}
.woocommerce table.shop_table thead th{
  background: var(--glass-bg-strong) !important;
  color: var(--muted) !important;
  font-family: var(--font-body) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  padding: 16px 18px !important;
  border-bottom: 1px solid var(--glass-border) !important;
}
.woocommerce table.shop_table tbody td,
.woocommerce table.shop_table tfoot td,
.woocommerce table.shop_table tfoot th{
  border-top: 1px solid var(--glass-border) !important;
  background: transparent !important;
  color: var(--ink) !important;
  padding: 18px !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
}
.woocommerce table.shop_table tfoot th{
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}
.woocommerce table.shop_table .product-name a{
  color: var(--ink) !important;
  font-weight: 500 !important;
  text-decoration: none;
  transition: color 0.25s;
}
.woocommerce table.shop_table .product-name a:hover{ color: var(--gold) !important; }
.woocommerce table.shop_table .product-thumbnail img{
  border-radius: 12px;
  border: 1px solid var(--glass-border);
  max-width: 72px;
  height: auto;
}
.woocommerce table.shop_table .product-remove a.remove{
  background: var(--glass-bg-strong) !important;
  color: var(--ink) !important;
  width: 28px !important;
  height: 28px !important;
  line-height: 28px !important;
  border-radius: 50% !important;
  font-size: 18px !important;
  border: 1px solid var(--glass-border) !important;
  transition: all 0.25s;
}
.woocommerce table.shop_table .product-remove a.remove:hover{
  background: rgba(220, 80, 80, 0.35) !important;
  color: #fff !important;
  border-color: rgba(220, 80, 80, 0.6) !important;
}
.woocommerce table.shop_table .product-price,
.woocommerce table.shop_table .product-subtotal{
  color: var(--ink) !important;
  font-weight: 500 !important;
}

/* ---- Cart-specific ---- */
.woocommerce-cart .actions{
  padding: 14px 18px !important;
  background: transparent !important;
  border-top: 1px solid var(--glass-border) !important;
}
.woocommerce-cart .coupon{ display: flex !important; gap: 10px !important; align-items: center; }
.woocommerce-cart .coupon input.input-text{
  flex: 1;
  max-width: 280px !important;
}
.cart-collaterals{ margin-top: 36px !important; }
.cart-collaterals .cart_totals{
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 18px !important;
  padding: 28px 32px !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 12px 36px -16px rgba(0,0,0,.45);
}
.cart-collaterals h2{
  font-family: var(--font-display) !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  margin: 0 0 18px !important;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.cart-collaterals .wc-proceed-to-checkout{ padding: 12px 0 0 !important; }
.cart-collaterals .wc-proceed-to-checkout a.checkout-button{
  display: block !important;
  width: 100% !important;
  text-align: center;
  font-size: 14px !important;
  padding: 16px 24px !important;
}

/* ---- Form inputs (universal WC) ---- */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce form .form-row .select2-selection,
.woocommerce-page form .form-row input.input-text,
.woocommerce-page form .form-row textarea,
.woocommerce input[type="text"],
.woocommerce input[type="email"],
.woocommerce input[type="tel"],
.woocommerce input[type="password"],
.woocommerce input[type="number"],
.woocommerce textarea,
.woocommerce select{
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  color: var(--ink) !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  width: 100% !important;
  box-shadow: none !important;
  transition: all 0.25s var(--ease);
  min-height: 48px;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus,
.woocommerce input[type="text"]:focus,
.woocommerce input[type="email"]:focus{
  border-color: var(--glass-border-strong) !important;
  background: var(--glass-bg-strong) !important;
  outline: none !important;
}
.woocommerce form .form-row label{
  color: var(--muted) !important;
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  margin-bottom: 6px !important;
  display: block;
}
.woocommerce form .form-row .required{ color: var(--gold) !important; text-decoration: none; }
.woocommerce .select2-container--default .select2-selection--single{
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
  min-height: 48px !important;
  padding: 8px 12px !important;
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered{
  color: var(--ink) !important;
  line-height: 32px !important;
  padding: 0 !important;
}
.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow{
  height: 46px !important;
  right: 12px !important;
}
.select2-dropdown{
  background: var(--bg-0) !important;
  border: 1px solid var(--glass-border-strong) !important;
  border-radius: 12px !important;
  overflow: hidden;
}
.select2-results__option{
  color: var(--ink) !important;
  padding: 12px 16px !important;
  font-size: 14px;
}
.select2-container--default .select2-results__option--highlighted[aria-selected]{
  background: var(--glass-bg-strong) !important;
  color: var(--gold) !important;
}

/* ---- Checkout layout ---- */
.woocommerce-checkout #customer_details{
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin-bottom: 24px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.woocommerce-checkout #customer_details h3{
  font-family: var(--font-display) !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  color: var(--ink) !important;
  margin: 0 0 20px !important;
  letter-spacing: -0.01em;
}
.woocommerce-checkout-review-order{
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 18px !important;
  padding: 32px !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  position: sticky;
  top: 100px;
}
.woocommerce-checkout h3#order_review_heading{
  font-family: var(--font-display) !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  color: var(--ink) !important;
  margin: 0 0 18px !important;
}
.woocommerce-checkout-payment{
  background: var(--glass-bg-strong) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 14px !important;
  padding: 22px !important;
  margin-top: 18px !important;
}
.woocommerce-checkout-payment ul.payment_methods{
  border-bottom: 1px solid var(--glass-border) !important;
  background: transparent !important;
  padding: 0 0 18px !important;
  margin: 0 !important;
}
.woocommerce-checkout-payment ul.payment_methods li{
  background: transparent !important;
  padding: 10px 0 !important;
  list-style: none;
}
.woocommerce-checkout-payment ul.payment_methods li input[type="radio"]{
  accent-color: var(--gold);
  margin-right: 10px;
}
.woocommerce-checkout-payment ul.payment_methods li label{
  color: var(--ink) !important;
  font-weight: 500 !important;
  cursor: pointer;
}
.woocommerce-checkout-payment .payment_box{
  background: var(--glass-bg) !important;
  border-radius: 12px !important;
  border: 1px solid var(--glass-border) !important;
  color: var(--muted) !important;
  margin: 8px 0 12px !important;
  padding: 14px 16px !important;
  font-size: 13px !important;
}
.woocommerce-checkout-payment .payment_box::before{ display: none !important; }
.woocommerce-checkout-payment #place_order{
  width: 100% !important;
  margin-top: 18px !important;
  font-size: 14px !important;
  padding: 18px 28px !important;
}
.woocommerce-terms-and-conditions-wrapper{ margin-top: 12px; color: var(--muted); }
.woocommerce-terms-and-conditions-wrapper a{ color: var(--gold); }

/* Checkout: place an aesthetic page hero before content via page.php's hero — restyle title */
.woocommerce-cart .page-hero h1::after,
.woocommerce-checkout .page-hero h1::after,
.woocommerce-account .page-hero h1::after{ content: '.'; color: var(--gold); }

/* ---- Cross-sells (cart bottom) ---- */
.cross-sells{ margin-top: 36px; }
.cross-sells h2{
  font-family: var(--font-display) !important;
  font-size: 28px !important;
  font-weight: 400 !important;
  color: var(--ink) !important;
}

/* ---- My Account layout ---- */
.woocommerce-account .page-content > .woocommerce{
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 36px;
  align-items: start;
}
@media (max-width: 900px){
  .woocommerce-account .page-content > .woocommerce{
    grid-template-columns: 1fr;
    gap: 24px;
  }
}
.woocommerce-MyAccount-navigation{
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  position: static !important;
  top: auto !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.woocommerce-MyAccount-navigation ul{
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.woocommerce-MyAccount-navigation ul li{
  margin: 0 !important;
  list-style: none;
}
.woocommerce-MyAccount-navigation ul li a{
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 12px 16px !important;
  color: var(--muted) !important;
  text-decoration: none !important;
  border-radius: 12px !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  transition: all 0.25s var(--ease);
  border: 1px solid transparent;
}
.woocommerce-MyAccount-navigation ul li a:hover{
  background: var(--glass-bg-strong) !important;
  color: var(--ink) !important;
  border-color: var(--glass-border) !important;
}
.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li.woocommerce-MyAccount-navigation-link--customer-logout a{
  /* keep logout same hover */
}
.woocommerce-MyAccount-navigation ul li.is-active a{
  background: var(--glass-bg-strong) !important;
  color: var(--ink) !important;
  border-color: var(--glass-border-strong) !important;
  font-weight: 600 !important;
}
.woocommerce-MyAccount-content{
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 18px !important;
  padding: 36px 40px !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  color: var(--ink);
}
.woocommerce-MyAccount-content h2,
.woocommerce-MyAccount-content h3{
  font-family: var(--font-display) !important;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.woocommerce-MyAccount-content a{ color: var(--gold); }
.woocommerce-MyAccount-content a:hover{ color: var(--ink); }
.woocommerce-MyAccount-content mark,
.woocommerce-Address-title a.edit{ background: transparent !important; color: var(--gold) !important; }
.woocommerce-MyAccount-content address{
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
  padding: 18px 22px;
  font-style: normal;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink);
}

/* My account orders table specific */
.woocommerce-orders-table__row .button.view{ font-size: 12px !important; padding: 8px 16px !important; }

/* Pagination */
.woocommerce-pagination ul.page-numbers li{
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  margin-right: 6px !important;
  border-radius: 10px !important;
  overflow: hidden;
}
.woocommerce-pagination ul.page-numbers li a,
.woocommerce-pagination ul.page-numbers li span{
  color: var(--ink) !important;
  padding: 10px 16px !important;
}
.woocommerce-pagination ul.page-numbers li span.current{
  background: var(--glass-bg-strong) !important;
  color: var(--gold) !important;
}

/* Form login / register on my-account */
.u-columns.col2-set,
.woocommerce .u-columns.col2-set{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}
@media (max-width: 720px){ .woocommerce .u-columns.col2-set{ grid-template-columns: 1fr; } }
.woocommerce form.login,
.woocommerce form.register,
.woocommerce form.lost_reset_password,
.woocommerce form.woocommerce-form-login,
.woocommerce form.woocommerce-form-register,
.woocommerce form.checkout_coupon{
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 18px !important;
  padding: 32px !important;
  backdrop-filter: blur(14px) saturate(140%);
}
.woocommerce form.lost_reset_password{ max-width: 480px; }
.woocommerce-form__label-for-checkbox{ display: flex; align-items: center; gap: 8px; cursor: pointer; }
.woocommerce-form__input-checkbox{ accent-color: var(--gold); width: 18px; height: 18px; }

/* Order received / thank-you */
.woocommerce-order h2{
  font-family: var(--font-display) !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  letter-spacing: -0.01em;
  margin-top: 32px;
}
ul.order_details,
.woocommerce ul.order_details{
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 16px !important;
  padding: 24px 28px !important;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 16px;
  margin: 18px 0 32px !important;
}
ul.order_details li{
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  color: var(--muted) !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
}
ul.order_details li strong{
  display: block;
  color: var(--ink) !important;
  font-family: var(--font-display) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin-top: 4px;
}

/* Cart empty state */
.cart-empty.woocommerce-info{
  text-align: center;
  font-size: 16px !important;
  padding: 32px !important;
}
.return-to-shop{ text-align: center; margin-top: 24px; }

/* WC subscriptions specific (if present) */
.woocommerce table.shop_table.my_account_subscriptions{
  font-size: 13px;
}
.subscription-status-active{ color: #4ade80 !important; font-weight: 600; }
.subscription-status-cancelled{ color: var(--muted) !important; }

/* =========================================================================
 * TATARR Silver - WC layout shells for checkout/account templates
 * ========================================================================= */

/* Checkout progress steps */
.tatarr-checkout-progress{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0 auto 36px;
  max-width: 720px;
}
.tatarr-checkout-progress .step{
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.04em;
  transition: all 0.3s var(--ease);
}
.tatarr-checkout-progress .step.active{
  background: var(--glass-bg-strong);
  border-color: var(--glass-border-strong);
  color: var(--ink);
}
.tatarr-checkout-progress .step-num{
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.1em;
}
.tatarr-checkout-progress .step-label{ font-weight: 500; }
.tatarr-checkout-progress .step-line{
  flex: 1;
  max-width: 60px;
  height: 1px;
  background: var(--glass-border);
}

/* Checkout 2-column grid */
.tatarr-checkout-grid{
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 36px;
  align-items: start;
}
@media (max-width: 980px){
  .tatarr-checkout-grid{ grid-template-columns: 1fr; }
}
.tatarr-checkout-main{ min-width: 0; }
.tatarr-checkout-aside{ min-width: 0; position: sticky; top: 100px; }

/* Account grid */
.tatarr-account-grid{
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 36px;
  align-items: start;
}
@media (max-width: 900px){
  .tatarr-account-grid{ grid-template-columns: 1fr; }
}
.tatarr-acc-sidebar{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 22px;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.tatarr-acc-sidebar .acc-user{
  display: flex; align-items: center; gap: 12px;
  padding-bottom: 18px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--glass-border);
}
.tatarr-acc-sidebar .acc-avatar{
  width: 48px; height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--glass-border-strong);
}
.tatarr-acc-sidebar .acc-user-name{
  color: var(--ink);
  font-weight: 600;
  font-size: 14px;
}
.tatarr-acc-sidebar .acc-user-email{
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.02em;
}
.tatarr-acc-sidebar .woocommerce-MyAccount-navigation{
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  position: static !important;
  backdrop-filter: none !important;
}
.tatarr-acc-content{ min-width: 0; }

/* Reset earlier rule so when our template renders, the grid moves to .tatarr-account-grid */
.woocommerce-account .page-content > .woocommerce{
  display: block;
  grid-template-columns: none;
  gap: 0;
}

/* Ensure cart/checkout page heroes have proper spacing */
.woocommerce-cart .page-hero,
.woocommerce-checkout .page-hero,
.woocommerce-account .page-hero{
  padding-bottom: 24px;
}

/* =========================================================================

/* =========================================================================
 * TATARR Silver - Checkout (DEFINITIVE block, single source of truth)
 * Replicates demo #page-checkout exactly:
 *   - 2 coloane: stânga 3 carduri (Date facturare → Info proiect → Plată)
 *     + terms, dreapta sumar sticky
 *   - Câmpurile billing aranjate 2-up, address full
 * 2026-05-13
 * ========================================================================= */

/* ---- HIDE distractors ---- */
.woocommerce-checkout .nsl-container,
.woocommerce-checkout .nsl-button,
.woocommerce-checkout .wc-stripe-express-checkout-element,
.woocommerce-checkout .wc-stripe-express-checkout-button-separator,
.woocommerce-checkout .wc-stripe-pmme-container,
.tatarr-billing-wrap wc-order-attribution-inputs{
  display: none !important;
}

/* ---- HEADER + STEPS ---- */
.tatarr-checkout-header{
  text-align: center;
  margin: 0 auto 32px;
  max-width: 720px;
}
.tatarr-checkout-header .eyebrow-pill{ display: inline-flex; align-items: center; gap: 8px; }
.tatarr-checkout-title{
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 48px);
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 18px 0 12px;
  line-height: 1.1;
}
.tatarr-checkout-title em{ font-style: italic; color: var(--gold); }
.tatarr-checkout-subtitle{ color: var(--muted); font-size: 14px; line-height: 1.6; margin: 0; }

.tatarr-checkout-progress{
  display: flex; align-items: center; justify-content: center; gap: 14px;
  margin: 0 auto 36px;
  max-width: 720px;
}
.tatarr-checkout-progress .step{
  display: flex; align-items: center; gap: 10px;
  padding: 10px 18px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: 0.04em;
}
.tatarr-checkout-progress .step.active{
  background: var(--glass-bg-strong);
  border-color: var(--glass-border-strong);
  color: var(--ink);
}
.tatarr-checkout-progress .step-num{
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.1em;
}
.tatarr-checkout-progress .step-line{ flex: 1; max-width: 60px; height: 1px; background: var(--glass-border); }

/* ---- 2-COLUMN LAYOUT ---- */
.tatarr-checkout-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 32px;
  align-items: start;
}
@media (max-width: 1024px){
  .tatarr-checkout-grid{ grid-template-columns: 1fr; }
}
.tatarr-checkout-main{ min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.tatarr-checkout-aside{ min-width: 0; position: sticky; top: 100px; }

/* ---- CARDS ---- */
.tatarr-checkout-main .checkout-card{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  padding: 32px;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
@media (max-width: 720px){
  .tatarr-checkout-main .checkout-card{ padding: 24px 20px; }
}
.tatarr-checkout-main .checkout-card-head{
  display: flex; align-items: flex-start; gap: 14px;
  margin-bottom: 24px;
}
.tatarr-checkout-main .checkout-card-num{
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 600;
  color: var(--gold);
  letter-spacing: 0.12em;
  padding: 6px 10px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: 8px;
  flex-shrink: 0;
}
.tatarr-checkout-main .checkout-card-head h3{
  font-family: var(--font-display);
  font-size: 22px; font-weight: 400;
  color: var(--ink);
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}
.tatarr-checkout-main .checkout-card-head p{
  color: var(--muted);
  font-size: 13px;
  margin: 0;
}

/* ---- BILLING FIELDS: 2-up grid ---- */
.tatarr-billing-wrap{ width: 100%; }
.tatarr-billing-wrap .woocommerce-billing-fields{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px 18px;
  grid-auto-flow: row dense;
  width: 100%;
  margin: 0;
}
.tatarr-billing-wrap .woocommerce-shipping-fields{ display: none; } /* nu apare în demo */
@media (max-width: 600px){
  .tatarr-billing-wrap .woocommerce-billing-fields{ grid-template-columns: 1fr; }
}
.tatarr-billing-wrap .woocommerce-billing-fields > h3{ display: none; }

/* Every form-row resets WC float/width */
.tatarr-billing-wrap .woocommerce-billing-fields > p.form-row{
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: none !important;
  grid-column: span 1;
}

/* Wide fields take both cols */
.tatarr-billing-wrap #billing_company_field,
.tatarr-billing-wrap #billing_address_1_field,
.tatarr-billing-wrap #billing_address_2_field,
.tatarr-billing-wrap #billing_vat_number_field{
  grid-column: 1 / -1;
}

/* Labels uniform */
.tatarr-billing-wrap p.form-row > label{
  display: block;
  width: 100%;
  margin: 0 0 6px;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.08em;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.4;
  float: none;
}

/* Input wrapper + input fill the cell */
.tatarr-billing-wrap p.form-row > .woocommerce-input-wrapper{
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.tatarr-billing-wrap p.form-row > .woocommerce-input-wrapper > input.input-text,
.tatarr-billing-wrap p.form-row > .woocommerce-input-wrapper > input,
.tatarr-billing-wrap p.form-row > .woocommerce-input-wrapper > select,
.tatarr-billing-wrap p.form-row > .woocommerce-input-wrapper > textarea{
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  color: var(--ink) !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  min-height: 48px;
}
.tatarr-billing-wrap p.form-row > .woocommerce-input-wrapper > input:focus,
.tatarr-billing-wrap p.form-row > .woocommerce-input-wrapper > select:focus{
  border-color: var(--glass-border-strong) !important;
  background: var(--glass-bg-strong) !important;
  outline: none !important;
}
.tatarr-billing-wrap .select2-container{ width: 100% !important; }
.tatarr-billing-wrap .select2-selection{
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
  min-height: 48px !important;
  padding: 8px 12px !important;
}

/* ---- PROJECT INFO CARD: same 2-up ---- */
.tatarr-project-info-form{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px 18px;
  width: 100%;
}
@media (max-width: 600px){ .tatarr-project-info-form{ grid-template-columns: 1fr; } }
.tatarr-project-info-form .tatarr-project-row{
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  grid-column: span 1;
}
.tatarr-project-info-form .tatarr-project-row:nth-child(n+3){ grid-column: 1 / -1; }
.tatarr-project-info-form label{
  display: block; width: 100%; margin: 0 0 6px;
  text-transform: uppercase; font-size: 11px; letter-spacing: 0.08em;
  font-weight: 500; color: var(--muted);
}
.tatarr-project-info-form input,
.tatarr-project-info-form textarea,
.tatarr-project-info-form select{
  display: block; width: 100%; max-width: 100%; min-width: 0;
  box-sizing: border-box;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 14px 16px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  min-height: 48px;
  margin: 0;
}
.tatarr-project-info-form textarea{ min-height: 96px; resize: vertical; }

/* ---- PAYMENT CARD ---- */
.tatarr-payment-wrap .woocommerce-checkout-payment{
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
}
.tatarr-payment-wrap ul.payment_methods{
  list-style: none;
  display: flex; flex-direction: column; gap: 12px;
  padding: 0 !important;
  border: none !important;
  margin: 0 !important;
}
.tatarr-payment-wrap ul.payment_methods li.wc_payment_method{
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 14px !important;
  padding: 18px 20px !important;
  position: relative;
  transition: all 0.25s var(--ease);
}
.tatarr-payment-wrap ul.payment_methods li.wc_payment_method:has(input[type="radio"]:checked){
  background: var(--glass-bg-strong) !important;
  border-color: var(--gold) !important;
  box-shadow: 0 8px 24px -8px rgba(212,170,90,0.25);
}
.tatarr-payment-wrap ul.payment_methods li > input[type="radio"]{
  position: absolute; opacity: 0; pointer-events: none;
}
.tatarr-payment-wrap ul.payment_methods li > label{
  display: flex !important; align-items: center; gap: 12px;
  color: var(--ink) !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  cursor: pointer;
  padding-left: 34px;
  margin: 0 !important;
  position: relative;
}
.tatarr-payment-wrap ul.payment_methods li > label::before{
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border: 1.5px solid var(--glass-border-strong);
  border-radius: 50%; background: var(--bg-0);
}
.tatarr-payment-wrap ul.payment_methods li:has(input[type="radio"]:checked) > label::before{
  border-color: var(--gold);
  background: radial-gradient(circle, var(--gold) 38%, transparent 42%);
}
.tatarr-payment-wrap ul.payment_methods li > label img{ max-height: 24px; width: auto; }
.tatarr-payment-wrap ul.payment_methods .payment_box{
  background: var(--bg-0) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
  margin: 12px 0 0 34px !important;
  padding: 14px 16px !important;
}
.tatarr-payment-wrap ul.payment_methods .payment_box::before{ display: none !important; }
.tatarr-payment-wrap ul.payment_methods li:not(:has(input[type="radio"]:checked)) .payment_box{ display: none !important; }

.tatarr-payment-wrap .woocommerce-terms-and-conditions-wrapper{
  margin: 20px 0 0 !important;
  padding: 16px 18px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
}
.tatarr-payment-wrap .woocommerce-terms-and-conditions-wrapper p{
  margin: 0 !important; color: var(--muted); font-size: 13px;
}
.tatarr-payment-wrap .woocommerce-terms-and-conditions-wrapper a{ color: var(--gold); }
.tatarr-payment-wrap #place_order{
  display: block !important;
  width: 100% !important;
  margin: 18px 0 0 !important;
  padding: 18px 28px !important;
  font-size: 14px !important;
  background: linear-gradient(135deg, var(--gold) 0%, #b8945a 100%) !important;
  color: var(--bg-0) !important;
  border: none !important;
  border-radius: 999px !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  box-shadow: 0 12px 32px -10px rgba(212,170,90,0.6);
  cursor: pointer;
}

/* ---- RIGHT: SUMMARY ---- */
.tatarr-checkout-aside .summary-card{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  padding: 28px;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
.tatarr-checkout-aside .summary-card h3{
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  color: var(--ink);
  margin: 0 0 20px;
  letter-spacing: -0.01em;
}
.tatarr-checkout-aside .woocommerce-checkout-payment{ display: none !important; }
.tatarr-checkout-aside .woocommerce-checkout-review-order-table{
  border: none !important;
  background: transparent !important;
  margin: 0 !important;
  width: 100%;
}
.tatarr-checkout-aside .woocommerce-checkout-review-order-table thead{ display: none; }
.tatarr-checkout-aside .woocommerce-checkout-review-order-table tbody tr.cart_item{
  display: flex !important;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0 14px !important;
  border-bottom: 1px solid var(--glass-border) !important;
}
.tatarr-checkout-aside .woocommerce-checkout-review-order-table tbody tr.cart_item td{
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--ink) !important;
}
.tatarr-checkout-aside .woocommerce-checkout-review-order-table tbody tr.cart_item .product-name{
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}
.tatarr-checkout-aside .woocommerce-checkout-review-order-table tbody tr.cart_item .product-name .product-quantity{
  color: var(--muted); font-weight: 400;
}
.tatarr-checkout-aside .woocommerce-checkout-review-order-table tbody tr.cart_item .product-total{
  font-family: var(--font-display);
  font-size: 18px;
  text-align: left;
}
.tatarr-checkout-aside .woocommerce-checkout-review-order-table tfoot tr{
  display: flex !important;
  justify-content: space-between;
  align-items: baseline;
  padding: 8px 0 !important;
  border: none !important;
}
.tatarr-checkout-aside .woocommerce-checkout-review-order-table tfoot tr th,
.tatarr-checkout-aside .woocommerce-checkout-review-order-table tfoot tr td{
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  font-size: 13px !important;
  color: var(--muted) !important;
}
.tatarr-checkout-aside .woocommerce-checkout-review-order-table tfoot tr.order-total{
  border-top: 1px solid var(--glass-border) !important;
  padding-top: 12px !important;
  margin-top: 4px;
}
.tatarr-checkout-aside .woocommerce-checkout-review-order-table tfoot tr.order-total th{
  color: var(--ink) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: none;
  letter-spacing: 0;
}
.tatarr-checkout-aside .woocommerce-checkout-review-order-table tfoot tr.order-total .woocommerce-Price-amount{
  font-family: var(--font-display);
  font-size: 22px !important;
  font-weight: 400 !important;
  color: var(--ink) !important;
}
/* Recurring totals (WC Subscriptions) — compact */
.tatarr-checkout-aside .recurring-totals{
  background: var(--glass-bg-strong) !important;
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 16px 0 0 !important;
  font-size: 12px;
}
.tatarr-checkout-aside .recurring-totals h2,
.tatarr-checkout-aside .recurring-totals h3{
  font-family: var(--font-display);
  font-size: 13px !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: var(--muted) !important;
  margin: 0 0 6px !important;
  border: none !important;
  padding: 0 !important;
}
.tatarr-checkout-aside .recurring-totals table{ width: 100%; border: none; margin: 0; }
.tatarr-checkout-aside .recurring-totals table tr{
  display: flex !important;
  justify-content: space-between;
  padding: 4px 0;
  border: none !important;
}
.tatarr-checkout-aside .recurring-totals table tr th,
.tatarr-checkout-aside .recurring-totals table tr td{
  border: none !important;
  padding: 0 !important;
  background: transparent !important;
  font-size: 12px !important;
  color: var(--ink) !important;
}

.tatarr-checkout-aside .summary-trust{
  display: flex; justify-content: space-around;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--glass-border);
}
.tatarr-checkout-aside .summary-trust .trust-item{
  display: flex; align-items: center; gap: 6px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tatarr-checkout-aside .summary-powered{
  display: flex; justify-content: center; gap: 6px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tatarr-checkout-aside .summary-powered .stripe-text{ color: var(--ink); font-weight: 600; }

/* =========================================================================
 * HIDE STRIPE EXPRESS + NEXTEND SOCIAL LOGIN ON CHECKOUT (final)
 * 2026-05-13
 * ========================================================================= */

/* Hide Nextend wrapper divs (Facebook/Google/Twitter login bar)
   These divs occupy grid cells even when contents are hidden, leaving
   empty space pe partea stanga in cardul Date de facturare. */
.woocommerce-checkout #nsl-custom-login-form-1,
.woocommerce-checkout #nsl-custom-login-form-2,
.woocommerce-checkout [id^="nsl-custom-login-form"],
.woocommerce-checkout .nsl-container,
.woocommerce-checkout .nsl-button,
.woocommerce-checkout .nsl-providers,
.woocommerce-checkout .nsl-separator,
.woocommerce-checkout .nsl-divider{
  display: none !important;
}

/* Hide Stripe Express Checkout (Apple Pay / Google Pay / Link buttons) */
.woocommerce-checkout .wc-stripe-express-checkout,
.woocommerce-checkout .wc-stripe-express-checkout-element,
.woocommerce-checkout .wc-stripe-express-checkout-button-separator,
.woocommerce-checkout .wc-stripe-pmme-container,
.woocommerce-checkout #wc-stripe-express-checkout-element,
.woocommerce-checkout div[class*="express-checkout"]{
  display: none !important;
}

/* Hide the attribution custom element */
.tatarr-billing-wrap wc-order-attribution-inputs,
.tatarr-checkout-form wc-order-attribution-inputs{
  display: none !important;
}

/* =========================================================================
 * TATARR Silver - Checkout REAL FIX
 * Câmpurile WC sunt în .woocommerce-billing-fields__field-wrapper, nu direct.
 * 2026-05-13
 * ========================================================================= */

/* Resetăm grid de pe părintele greșit */
.tatarr-billing-wrap .woocommerce-billing-fields{
  display: block !important;
  grid-template-columns: none !important;
  gap: 0 !important;
  width: 100% !important;
}

/* GRID-ul real merge pe __field-wrapper */
.tatarr-billing-wrap .woocommerce-billing-fields__field-wrapper{
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  gap: 16px 18px !important;
  grid-auto-flow: row dense !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
@media (max-width: 600px){
  .tatarr-billing-wrap .woocommerce-billing-fields__field-wrapper{
    grid-template-columns: 1fr !important;
  }
}

/* Form-rows ca grid items */
.tatarr-billing-wrap .woocommerce-billing-fields__field-wrapper > p.form-row{
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  clear: none !important;
  grid-column: span 1 !important;
  box-sizing: border-box;
}

/* Wide fields ocupă ambele coloane */
.tatarr-billing-wrap .woocommerce-billing-fields__field-wrapper > p#billing_company_field,
.tatarr-billing-wrap .woocommerce-billing-fields__field-wrapper > p#billing_address_1_field,
.tatarr-billing-wrap .woocommerce-billing-fields__field-wrapper > p#billing_address_2_field,
.tatarr-billing-wrap .woocommerce-billing-fields__field-wrapper > p#billing_vat_number_field{
  grid-column: 1 / -1 !important;
}

/* Hide WC's own h3 inside billing fields */
.tatarr-billing-wrap .woocommerce-billing-fields > h3{ display: none !important; }

/* Hide everything else that's a direct child of billing-fields and is NOT
   the field-wrapper (nsl, wc-attribution etc) */
.tatarr-billing-wrap .woocommerce-billing-fields > div:not(.woocommerce-billing-fields__field-wrapper),
.tatarr-billing-wrap .woocommerce-billing-fields > wc-order-attribution-inputs,
.tatarr-billing-wrap .woocommerce-billing-fields > style{
  display: none !important;
}

/* =========================================================================
 * TATARR Silver - Remove inner wrapper backgrounds in billing + summary
 * Cardul exterior ar trebui sa fie singura suprafata glass.
 * 2026-05-13
 * ========================================================================= */

/* Date de facturare: orice background pe wrappers interni */
.tatarr-billing-wrap,
.tatarr-billing-wrap .woocommerce-billing-fields,
.tatarr-billing-wrap .woocommerce-billing-fields__field-wrapper,
.tatarr-billing-wrap .woocommerce-shipping-fields,
.tatarr-billing-wrap .woocommerce-shipping-fields__field-wrapper{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Sumar comandă: aside-ul exterior poate avea glass, INTERNUL trebuie transparent */
.tatarr-checkout-aside .woocommerce-checkout-review-order,
.tatarr-checkout-aside #order_review,
.tatarr-checkout-aside .woocommerce-checkout-review-order-table,
.tatarr-checkout-aside .woocommerce-checkout-review-order-table tbody,
.tatarr-checkout-aside .woocommerce-checkout-review-order-table tfoot,
.tatarr-checkout-aside .woocommerce-checkout-review-order-table thead,
.tatarr-checkout-aside .woocommerce-checkout-review-order-table tr,
.tatarr-checkout-aside .woocommerce-checkout-review-order-table td,
.tatarr-checkout-aside .woocommerce-checkout-review-order-table th{
  background: transparent !important;
  border-color: var(--glass-border) !important;
  backdrop-filter: none !important;
}

/* Payment card inside wrap also transparent (placeholder rendered by Stripe) */
.tatarr-payment-wrap,
.tatarr-payment-wrap .woocommerce-checkout-payment,
.tatarr-payment-wrap .woocommerce-checkout-payment .place-order{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  backdrop-filter: none !important;
}

/* =========================================================================
 * TATARR Silver - billing field wide overrides (per ordinea cerută)
 * Doar Adresă + Apartament rămân full-row. Restul sunt 2-up.
 * 2026-05-13
 * ========================================================================= */

/* Resetăm regula generică care făcea company/vat wide */
.tatarr-billing-wrap .woocommerce-billing-fields__field-wrapper > p#billing_company_field,
.tatarr-billing-wrap .woocommerce-billing-fields__field-wrapper > p#billing_vat_number_field,
.tatarr-billing-wrap .woocommerce-billing-fields__field-wrapper > p#billing_country_field,
.tatarr-billing-wrap .woocommerce-billing-fields__field-wrapper > p#billing_state_field{
  grid-column: span 1 !important;
}

/* Doar adresa + apartament rămân full row */
.tatarr-billing-wrap .woocommerce-billing-fields__field-wrapper > p#billing_address_1_field,
.tatarr-billing-wrap .woocommerce-billing-fields__field-wrapper > p#billing_address_2_field{
  grid-column: 1 / -1 !important;
}

/* Hide Stripe Express separator (— SAU —) by ID + the express checkout container */
.woocommerce-checkout #wc-stripe-express-checkout-button-separator,
.woocommerce-checkout #wc-stripe-express-checkout-element,
.woocommerce-checkout p#wc-stripe-express-checkout-button-separator{
  display: none !important;
}

/* =========================================================================
 * TATARR Silver - Sumar comandă: scoate dublu chenar, trust badges fit
 * 2026-05-13
 * ========================================================================= */

/* Scoate orice background/border din wrapper-ele interne ale sumarului */
.tatarr-checkout-aside .woocommerce-checkout-review-order,
.tatarr-checkout-aside #order_review,
.tatarr-checkout-aside #order_review *{
  background: transparent !important;
  border-color: var(--glass-border) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
.tatarr-checkout-aside .woocommerce-checkout-review-order,
.tatarr-checkout-aside #order_review{
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* Place-order section din summary */
.tatarr-checkout-aside .tatarr-place-order{
  display: block;
  margin: 20px 0 0;
  padding: 0;
  border: none;
  background: transparent;
}
.tatarr-checkout-aside .tatarr-place-order .woocommerce-terms-and-conditions-wrapper{
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 0 0 14px;
  font-size: 12px;
}
.tatarr-checkout-aside .tatarr-place-order .woocommerce-terms-and-conditions-wrapper p{
  margin: 0;
  color: var(--muted);
}
.tatarr-checkout-aside .tatarr-place-order .woocommerce-terms-and-conditions-wrapper a{ color: var(--gold); }
.tatarr-checkout-aside .tatarr-place-order #place_order{
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 16px 22px !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: linear-gradient(135deg, var(--gold) 0%, #b8945a 100%) !important;
  color: var(--bg-0) !important;
  border: none !important;
  border-radius: 999px !important;
  box-shadow: 0 12px 28px -10px rgba(212,170,90,0.55);
  cursor: pointer;
}
.tatarr-checkout-aside .tatarr-place-order #place_order:hover{
  transform: translateY(-1px);
  box-shadow: 0 16px 36px -8px rgba(212,170,90,0.75);
}

/* Trust badges — fit inside the card */
.tatarr-checkout-aside .summary-trust{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 14px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--glass-border);
  font-size: 10px;
}
.tatarr-checkout-aside .summary-trust .trust-item{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tatarr-checkout-aside .summary-trust .trust-item svg{ flex-shrink: 0; }

/* Powered by stripe — center */
.tatarr-checkout-aside .summary-powered{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tatarr-checkout-aside .summary-powered .stripe-text{
  color: var(--ink);
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: 0;
}

/* În cardul de plată stânga, nu mai avem nici buton nici terms (au mers în dreapta) */
.tatarr-payment-card .form-row.place-order{ display: none !important; }
.tatarr-payment-card .woocommerce-terms-and-conditions-wrapper{ display: none !important; }

/* Summary thumbnail */
.tatarr-checkout-aside .tatarr-summary-item{
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  align-items: flex-start;
}
.tatarr-checkout-aside .tatarr-summary-thumb-wrap{
  width: 56px; height: 56px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  flex-shrink: 0;
}
.tatarr-checkout-aside .tatarr-summary-thumb{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================================================================
 * TATARR Silver - Summary refinements (final pass)
 * Iese chenarul interior, butonul Silver Glass, trust badges 1 rand,
 * sticky nu se suprapune
 * ========================================================================= */

/* Forteaza summary-card sa NU mai aiba chenar interior pe nimic */
.tatarr-checkout-aside .summary-card *{
  background-image: none !important;
}
.tatarr-checkout-aside .woocommerce-checkout-review-order,
.tatarr-checkout-aside #order_review,
.tatarr-checkout-aside .woocommerce-checkout-review-order-table,
.tatarr-checkout-aside .woocommerce-checkout-review-order-table tr,
.tatarr-checkout-aside .woocommerce-checkout-review-order-table td,
.tatarr-checkout-aside .woocommerce-checkout-review-order-table th,
.tatarr-checkout-aside .woocommerce-checkout-review-order-table tbody,
.tatarr-checkout-aside .woocommerce-checkout-review-order-table tfoot,
.tatarr-checkout-aside .recurring-totals,
.tatarr-checkout-aside .recurring-totals *{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Re-adauga divizoarele orizontale dorite */
.tatarr-checkout-aside .woocommerce-checkout-review-order-table tbody tr.cart_item{
  border-bottom: 1px solid var(--glass-border) !important;
  padding: 12px 0 !important;
}
.tatarr-checkout-aside .woocommerce-checkout-review-order-table tfoot tr.order-total{
  border-top: 1px solid var(--glass-border) !important;
  padding-top: 12px !important;
  margin-top: 4px !important;
}

/* Butonul Plateste — SILVER GLASS, nu auriu */
.tatarr-checkout-aside .tatarr-place-order #place_order,
.tatarr-checkout-aside #place_order{
  background: var(--glass-bg-strong) !important;
  background-image: linear-gradient(135deg, rgba(230, 240, 255, 0.18), rgba(230, 240, 255, 0.08)) !important;
  color: var(--ink) !important;
  border: 1px solid var(--glass-border-strong) !important;
  border-radius: 999px !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 16px 22px !important;
  width: 100% !important;
  margin: 0 !important;
  box-shadow: 0 8px 24px -8px rgba(255,255,255,0.15), inset 0 1px 0 var(--glass-edge) !important;
  cursor: pointer;
  transition: all 0.25s var(--ease);
}
.tatarr-checkout-aside #place_order:hover{
  background-image: linear-gradient(135deg, rgba(230, 240, 255, 0.28), rgba(230, 240, 255, 0.14)) !important;
  border-color: var(--glass-edge-strong) !important;
  transform: translateY(-1px);
}

/* Trust badges UN SINGUR RAND */
.tatarr-checkout-aside .summary-trust{
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: space-between;
  gap: 4px !important;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--glass-border);
  font-size: 9px !important;
}
.tatarr-checkout-aside .summary-trust .trust-item{
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: var(--muted);
  font-size: 9px !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}
.tatarr-checkout-aside .summary-trust .trust-item svg{
  width: 12px !important; height: 12px !important;
  flex-shrink: 0;
}

/* Sticky behavior — limit la viewport, evita suprapunerea cu place-order */
.tatarr-checkout-aside{
  position: sticky;
  top: 90px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--glass-border) transparent;
}
.tatarr-checkout-aside::-webkit-scrollbar{ width: 6px; }
.tatarr-checkout-aside::-webkit-scrollbar-thumb{ background: var(--glass-border); border-radius: 999px; }

/* Padding intern in review-order tabel ca sa nu atinga marginea card-ului */
.tatarr-checkout-aside .summary-card{ padding: 28px 24px !important; }

/* =========================================================================
 * TATARR Silver - Summary final tweaks
 * - Buton GOLD inapoi
 * - Fara scroll intern (overflow:visible)
 * - Padding orizontal randuri tabel
 * ========================================================================= */

/* Aside fara scroll intern, sticky simplu */
.tatarr-checkout-aside{
  position: sticky !important;
  top: 90px !important;
  max-height: none !important;
  overflow: visible !important;
}
.tatarr-checkout-aside::-webkit-scrollbar{ display: none !important; }

/* Padding lateral pentru randurile din tabel (nu mai atinge marginile) */
.tatarr-checkout-aside .woocommerce-checkout-review-order-table{
  padding: 0 !important;
}
.tatarr-checkout-aside .woocommerce-checkout-review-order-table tbody tr.cart_item,
.tatarr-checkout-aside .woocommerce-checkout-review-order-table tfoot tr{
  padding-left: 4px !important;
  padding-right: 4px !important;
}
.tatarr-checkout-aside .recurring-totals,
.tatarr-checkout-aside .recurring-totals table{
  padding: 4px !important;
}

/* BUTON GOLD inapoi (suprascrie silver) */
.tatarr-checkout-aside .tatarr-place-order #place_order,
.tatarr-checkout-aside #place_order{
  background: linear-gradient(135deg, var(--gold) 0%, #b8945a 100%) !important;
  background-image: linear-gradient(135deg, var(--gold) 0%, #b8945a 100%) !important;
  color: var(--bg-0) !important;
  border: none !important;
  border-radius: 999px !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
  padding: 16px 22px !important;
  width: 100% !important;
  margin: 0 !important;
  box-shadow: 0 12px 28px -10px rgba(212,170,90,0.55) !important;
  cursor: pointer;
}
.tatarr-checkout-aside #place_order:hover{
  background-image: linear-gradient(135deg, #e6c280 0%, #c9a468 100%) !important;
  box-shadow: 0 16px 36px -8px rgba(212,170,90,0.75) !important;
  transform: translateY(-1px);
}

/* Asigura ca stripe-text e vizibil */
.tatarr-checkout-aside .summary-powered{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  margin-top: 14px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tatarr-checkout-aside .summary-powered span{
  display: inline !important;
}
.tatarr-checkout-aside .summary-powered .stripe-text{
  color: var(--ink) !important;
  font-weight: 700 !important;
  text-transform: lowercase !important;
  letter-spacing: 0 !important;
  font-size: 12px !important;
}

/* =========================================================================
 * TATARR Silver - Summary card EXACT demo layout
 * 2026-05-13
 * ========================================================================= */

/* Container produs */
.tatarr-checkout-aside .tatarr-summary-products{
  border-bottom: 1px solid var(--glass-border);
  padding-bottom: 18px;
  margin-bottom: 18px;
}

.tatarr-checkout-aside .tatarr-sum-product{
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  align-items: flex-start;
}
.tatarr-checkout-aside .tatarr-sum-thumb-wrap{
  width: 56px; height: 56px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  display: flex; align-items: center; justify-content: center;
}
.tatarr-checkout-aside .tatarr-sum-thumb-wrap img,
.tatarr-checkout-aside .tatarr-sum-thumb{
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.tatarr-checkout-aside .tatarr-sum-thumb-placeholder{
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--glass-bg-strong), var(--glass-bg));
}
.tatarr-checkout-aside .tatarr-sum-info{ min-width: 0; }
.tatarr-checkout-aside .tatarr-sum-cat{
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-transform: uppercase;
  line-height: 1.3;
  margin-bottom: 4px;
}
.tatarr-checkout-aside .tatarr-sum-name{
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 400;
  color: var(--ink);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.tatarr-checkout-aside .tatarr-sum-meta{
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.06em;
  margin-top: 4px;
}
.tatarr-checkout-aside .tatarr-sum-price{
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink);
  white-space: nowrap;
  text-align: right;
  line-height: 1.2;
}
.tatarr-checkout-aside .tatarr-sum-price small{
  display: block;
  font-size: 11px;
  font-family: var(--font-body);
  color: var(--muted);
  letter-spacing: 0;
  margin-top: 2px;
}
.tatarr-checkout-aside .tatarr-sum-qty{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  margin-top: 14px;
  border-top: 1px solid var(--glass-border);
}
.tatarr-checkout-aside .tatarr-sum-qty-label{
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--muted);
  text-transform: uppercase;
}
.tatarr-checkout-aside .tatarr-sum-qty-val{
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
}

/* Cupon */
.tatarr-checkout-aside .tatarr-sum-coupon{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin-bottom: 18px;
}
.tatarr-checkout-aside .tatarr-sum-coupon input{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 10px;
  padding: 11px 14px;
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tatarr-checkout-aside .tatarr-sum-coupon input::placeholder{ color: var(--muted); }
.tatarr-checkout-aside .tatarr-sum-coupon-btn{
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-strong);
  border-radius: 10px;
  padding: 11px 18px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.2s var(--ease);
}
.tatarr-checkout-aside .tatarr-sum-coupon-btn:hover{
  background: var(--glass-bg);
  border-color: var(--glass-edge-strong);
}

/* Totaluri */
.tatarr-checkout-aside .tatarr-sum-totals{
  margin-bottom: 18px;
}
.tatarr-checkout-aside .tatarr-sum-row{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 6px 0;
  font-size: 13px;
  color: var(--muted);
}
.tatarr-checkout-aside .tatarr-sum-row .woocommerce-Price-amount{
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
}
.tatarr-checkout-aside .tatarr-sum-row.tatarr-sum-discount{ color: #4ade80; }
.tatarr-checkout-aside .tatarr-sum-row.tatarr-sum-total{
  padding-top: 14px;
  margin-top: 8px;
  border-top: 1px solid var(--glass-border);
  font-size: 15px;
  color: var(--ink);
  font-weight: 600;
}
.tatarr-checkout-aside .tatarr-sum-row.tatarr-sum-total .tatarr-sum-total-val .woocommerce-Price-amount{
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--ink);
  font-weight: 400;
  letter-spacing: -0.01em;
}
.tatarr-checkout-aside .tatarr-sum-recurring{
  text-align: right;
  margin-top: 4px;
  font-size: 11px;
  color: var(--muted);
}
.tatarr-checkout-aside .tatarr-sum-recurring .woocommerce-Price-amount{
  color: var(--muted);
  font-weight: 500;
}

/* Buton silver glass — peste vechiul gold */
.tatarr-checkout-aside .tatarr-place-order #place_order,
.tatarr-checkout-aside #place_order{
  background: linear-gradient(135deg, rgba(230, 240, 255, 0.18) 0%, rgba(230, 240, 255, 0.08) 100%) !important;
  background-image: linear-gradient(135deg, rgba(230, 240, 255, 0.18) 0%, rgba(230, 240, 255, 0.08) 100%) !important;
  color: var(--ink) !important;
  border: 1px solid var(--glass-border-strong) !important;
  border-radius: 999px !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  padding: 16px 24px !important;
  width: 100% !important;
  margin: 0 !important;
  box-shadow: 0 8px 24px -8px rgba(255,255,255,0.18), inset 0 1px 0 var(--glass-edge) !important;
  cursor: pointer;
  display: flex !important;
  align-items: center; justify-content: center;
  gap: 8px;
  transition: all 0.25s var(--ease);
}
.tatarr-checkout-aside #place_order:hover{
  background: linear-gradient(135deg, rgba(230, 240, 255, 0.28) 0%, rgba(230, 240, 255, 0.14) 100%) !important;
  background-image: linear-gradient(135deg, rgba(230, 240, 255, 0.28) 0%, rgba(230, 240, 255, 0.14) 100%) !important;
  border-color: var(--glass-edge-strong) !important;
  transform: translateY(-1px);
}
.tatarr-checkout-aside #place_order svg{ flex-shrink: 0; }

/* Ascunde WC default review-order-table since we use custom layout */
.tatarr-checkout-aside .woocommerce-checkout-review-order-table{ display: none !important; }
.tatarr-checkout-aside .recurring-totals{ display: none !important; }

/* Sticky simplu, fara scroll intern */
.tatarr-checkout-aside{
  position: sticky !important;
  top: 90px !important;
  max-height: none !important;
  overflow: visible !important;
  align-self: start;
}

/* =========================================================================
 * TATARR Silver - Summary fonts + button exact demo
 * 2026-05-13
 * ========================================================================= */

/* Totaluri Subtotal/TVA — body sans normal */
.tatarr-checkout-aside .tatarr-sum-row{
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  color: var(--ink) !important;
  padding: 8px 0 !important;
}
.tatarr-checkout-aside .tatarr-sum-row > span:first-child{
  color: var(--ink) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.tatarr-checkout-aside .tatarr-sum-row > span:last-child,
.tatarr-checkout-aside .tatarr-sum-row .woocommerce-Price-amount{
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  color: var(--ink) !important;
  font-weight: 400 !important;
}

/* Total astăzi label — body sans (NU display) */
.tatarr-checkout-aside .tatarr-sum-row.tatarr-sum-total{
  padding: 14px 0 !important;
  margin-top: 8px;
  border-top: 1px solid var(--glass-border);
  align-items: center;
}
.tatarr-checkout-aside .tatarr-sum-row.tatarr-sum-total > span:first-child{
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
}
/* Suma — DISPLAY FONT Cormorant italic mare */
.tatarr-checkout-aside .tatarr-sum-row.tatarr-sum-total .tatarr-sum-total-val,
.tatarr-checkout-aside .tatarr-sum-row.tatarr-sum-total .tatarr-sum-total-val .woocommerce-Price-amount,
.tatarr-checkout-aside .tatarr-sum-row.tatarr-sum-total .tatarr-sum-total-val bdi{
  font-family: 'Cormorant Garamond', var(--font-display) !important;
  font-size: 36px !important;
  font-weight: 400 !important;
  font-style: italic !important;
  color: var(--ink) !important;
  letter-spacing: -0.01em !important;
  line-height: 1 !important;
}

/* Apoi €X/luna — body sans mic, gri */
.tatarr-checkout-aside .tatarr-sum-recurring{
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  color: var(--muted) !important;
  text-align: right !important;
  margin: 6px 0 0 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.tatarr-checkout-aside .tatarr-sum-recurring .woocommerce-Price-amount{
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  color: var(--muted) !important;
}

/* Product name Starter — display italic */
.tatarr-checkout-aside .tatarr-sum-name{
  font-family: 'Cormorant Garamond', var(--font-display) !important;
  font-style: italic !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  color: var(--ink) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.1 !important;
}
/* Price item — display */
.tatarr-checkout-aside .tatarr-sum-price{
  font-family: 'Cormorant Garamond', var(--font-display) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  font-style: italic !important;
  color: var(--ink) !important;
  text-align: right !important;
}
.tatarr-checkout-aside .tatarr-sum-price small{
  font-family: var(--font-body) !important;
  font-style: normal !important;
  font-size: 11px !important;
  color: var(--muted) !important;
  display: inline !important;
}

/* Categorie eyebrow */
.tatarr-checkout-aside .tatarr-sum-cat{
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  color: var(--ink) !important;
  font-weight: 500 !important;
}
.tatarr-checkout-aside .tatarr-sum-meta{
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  color: var(--muted) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

/* Cantitate — qty control style */
.tatarr-checkout-aside .tatarr-sum-qty{
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 14px 0 !important;
  margin: 0 !important;
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
}
.tatarr-checkout-aside .tatarr-sum-qty-label{
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
}
.tatarr-checkout-aside .tatarr-sum-qty-val{
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  padding: 6px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink);
  letter-spacing: 0.08em;
}

/* Cupon — input + buton stil demo */
.tatarr-checkout-aside .tatarr-sum-coupon{
  margin: 18px 0 16px;
}
.tatarr-checkout-aside .tatarr-sum-coupon input{
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  color: var(--ink) !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}
.tatarr-checkout-aside .tatarr-sum-coupon-btn{
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  font-weight: 600 !important;
  padding: 12px 18px !important;
}

/* Buton Plătește — GLASS EXACT ca în demo */
.tatarr-checkout-aside .tatarr-place-order #place_order,
.tatarr-checkout-aside #place_order{
  background: rgba(230, 240, 255, 0.06) !important;
  background-image:
    linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.04) 50%, rgba(255,255,255,0.12) 100%) !important;
  color: var(--ink) !important;
  border: 1px solid rgba(255,255,255,0.32) !important;
  border-radius: 999px !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  padding: 16px 24px !important;
  width: 100% !important;
  margin: 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.30),
    inset 0 -1px 0 rgba(0,0,0,0.20),
    0 10px 24px -10px rgba(0,0,0,0.6) !important;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.25s var(--ease);
}
.tatarr-checkout-aside #place_order:hover{
  background-image:
    linear-gradient(135deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.22) 100%) !important;
  border-color: rgba(255,255,255,0.45) !important;
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.40),
    inset 0 -1px 0 rgba(0,0,0,0.20),
    0 14px 32px -8px rgba(0,0,0,0.7) !important;
}
.tatarr-checkout-aside #place_order svg{
  flex-shrink: 0;
  color: var(--ink);
}

/* Trust badges — separare cu | + fonts ca demo */
.tatarr-checkout-aside .summary-trust{
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  justify-content: center;
  gap: 0 !important;
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  font-size: 10px;
}
.tatarr-checkout-aside .summary-trust .trust-item{
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--muted) !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  white-space: nowrap;
  position: relative;
  padding: 0 4px;
}
.tatarr-checkout-aside .summary-trust .trust-item + .trust-item::before{
  content: "|";
  display: inline-block;
  margin: 0 6px;
  color: var(--glass-border-strong);
  opacity: .6;
}


/* =========================================================================
 * TATARR Silver - Summary fonts + button exact demo
 * 2026-05-13
 * ========================================================================= */

/* Totaluri Subtotal/TVA — body sans normal */
.tatarr-checkout-aside .tatarr-sum-row{
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  color: var(--ink) !important;
  padding: 8px 0 !important;
}
.tatarr-checkout-aside .tatarr-sum-row > span:first-child{
  color: var(--ink) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.tatarr-checkout-aside .tatarr-sum-row > span:last-child,
.tatarr-checkout-aside .tatarr-sum-row .woocommerce-Price-amount{
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  color: var(--ink) !important;
  font-weight: 400 !important;
}

/* Total astăzi label — body sans */
.tatarr-checkout-aside .tatarr-sum-row.tatarr-sum-total{
  padding: 14px 0 !important;
  margin-top: 8px;
  border-top: 1px solid var(--glass-border);
  align-items: center;
}
.tatarr-checkout-aside .tatarr-sum-row.tatarr-sum-total > span:first-child{
  font-family: var(--font-body) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
}
/* Suma — DISPLAY FONT Cormorant italic mare */
.tatarr-checkout-aside .tatarr-sum-row.tatarr-sum-total .tatarr-sum-total-val,
.tatarr-checkout-aside .tatarr-sum-row.tatarr-sum-total .tatarr-sum-total-val .woocommerce-Price-amount,
.tatarr-checkout-aside .tatarr-sum-row.tatarr-sum-total .tatarr-sum-total-val bdi{
  font-family: 'Cormorant Garamond', var(--font-display) !important;
  font-size: 36px !important;
  font-weight: 400 !important;
  font-style: italic !important;
  color: var(--ink) !important;
  letter-spacing: -0.01em !important;
  line-height: 1 !important;
}

/* Apoi €X/luna — body sans mic */
.tatarr-checkout-aside .tatarr-sum-recurring{
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  color: var(--muted) !important;
  text-align: right !important;
  margin: 6px 0 0 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.tatarr-checkout-aside .tatarr-sum-recurring .woocommerce-Price-amount{
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  color: var(--muted) !important;
}

/* Product name "Starter" — display italic */
.tatarr-checkout-aside .tatarr-sum-name{
  font-family: 'Cormorant Garamond', var(--font-display) !important;
  font-style: italic !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  color: var(--ink) !important;
  letter-spacing: -0.01em !important;
  line-height: 1.1 !important;
}
/* Preț item — display */
.tatarr-checkout-aside .tatarr-sum-price{
  font-family: 'Cormorant Garamond', var(--font-display) !important;
  font-size: 22px !important;
  font-weight: 400 !important;
  font-style: italic !important;
  color: var(--ink) !important;
  text-align: right !important;
}
.tatarr-checkout-aside .tatarr-sum-price small{
  font-family: var(--font-body) !important;
  font-style: normal !important;
  font-size: 11px !important;
  color: var(--muted) !important;
  display: inline !important;
}

/* Categorie eyebrow */
.tatarr-checkout-aside .tatarr-sum-cat{
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  color: var(--ink) !important;
  font-weight: 500 !important;
}
.tatarr-checkout-aside .tatarr-sum-meta{
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  color: var(--muted) !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
}

/* Cantitate */
.tatarr-checkout-aside .tatarr-sum-qty{
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 14px 0 !important;
  margin: 0 !important;
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
}
.tatarr-checkout-aside .tatarr-sum-qty-label{
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  color: var(--muted) !important;
  text-transform: uppercase !important;
}
.tatarr-checkout-aside .tatarr-sum-qty-val{
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  padding: 6px 16px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink);
  letter-spacing: 0.08em;
}

/* Cupon — stil demo */
.tatarr-checkout-aside .tatarr-sum-coupon{ margin: 18px 0 16px; }
.tatarr-checkout-aside .tatarr-sum-coupon input{
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  color: var(--ink) !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}
.tatarr-checkout-aside .tatarr-sum-coupon-btn{
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  font-weight: 600 !important;
  padding: 12px 18px !important;
}

/* Buton Plătește — GLASS EXACT ca demo */
.tatarr-checkout-aside .tatarr-place-order #place_order,
.tatarr-checkout-aside #place_order{
  background: rgba(230, 240, 255, 0.06) !important;
  background-image: linear-gradient(135deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.04) 50%, rgba(255,255,255,0.12) 100%) !important;
  color: var(--ink) !important;
  border: 1px solid rgba(255,255,255,0.32) !important;
  border-radius: 999px !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  padding: 16px 24px !important;
  width: 100% !important;
  margin: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.30), inset 0 -1px 0 rgba(0,0,0,0.20), 0 10px 24px -10px rgba(0,0,0,0.6) !important;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.25s var(--ease);
}
.tatarr-checkout-aside #place_order:hover{
  background-image: linear-gradient(135deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0.10) 50%, rgba(255,255,255,0.22) 100%) !important;
  border-color: rgba(255,255,255,0.45) !important;
  transform: translateY(-1px);
}
.tatarr-checkout-aside #place_order svg{ flex-shrink: 0; color: var(--ink); }

/* Trust badges 1 rand cu | */
.tatarr-checkout-aside .summary-trust{
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  justify-content: center;
  gap: 0 !important;
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  font-size: 10px;
}
.tatarr-checkout-aside .summary-trust .trust-item{
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--muted) !important;
  font-family: var(--font-mono) !important;
  font-size: 10px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  white-space: nowrap;
  position: relative;
  padding: 0 4px;
}
.tatarr-checkout-aside .summary-trust .trust-item + .trust-item::before{
  content: "|";
  position: absolute;
  left: -2px;
  color: var(--glass-border-strong);
  font-weight: 300;
}
.tatarr-checkout-aside .summary-trust .trust-item svg{
  width: 11px !important; height: 11px !important;
  color: var(--ink);
}

/* PLATĂ PROCESATĂ PRIN stripe */
.tatarr-checkout-aside .summary-powered{
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 18px !important;
  font-family: var(--font-mono) !important;
  color: var(--muted) !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}
.tatarr-checkout-aside .summary-powered span{ display: inline !important; }
.tatarr-checkout-aside .summary-powered .stripe-text{
  font-family: var(--font-body) !important;
  color: var(--ink) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-transform: lowercase !important;
  letter-spacing: 0 !important;
}


/* =========================================================================
 * TATARR Silver - Summary tweaks: nume mic, remove btn, buton gold
 * ========================================================================= */

/* Product grid acum cu 3 coloane: thumb + info + (remove+price stack) */
.tatarr-checkout-aside .tatarr-sum-product{
  display: grid !important;
  grid-template-columns: 48px 1fr auto !important;
  gap: 12px !important;
}
.tatarr-checkout-aside .tatarr-sum-thumb-wrap{
  width: 48px !important; height: 48px !important;
}
.tatarr-checkout-aside .tatarr-sum-right{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.tatarr-checkout-aside .tatarr-sum-remove{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  color: var(--muted);
  text-decoration: none;
  transition: all 0.2s var(--ease);
  cursor: pointer;
}
.tatarr-checkout-aside .tatarr-sum-remove:hover{
  background: rgba(220, 80, 80, 0.25);
  border-color: rgba(220, 80, 80, 0.55);
  color: #fff;
}

/* Nume produs — REDUS la jumate (fata de 22px → 14px) */
.tatarr-checkout-aside .tatarr-sum-name{
  font-family: 'Cormorant Garamond', var(--font-display) !important;
  font-style: italic !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  line-height: 1.2 !important;
  color: var(--ink) !important;
  letter-spacing: 0 !important;
  margin-top: 2px;
}
/* Pret item — redus si el */
.tatarr-checkout-aside .tatarr-sum-price{
  font-family: 'Cormorant Garamond', var(--font-display) !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  font-style: italic !important;
  color: var(--ink) !important;
  text-align: right !important;
  white-space: nowrap;
  line-height: 1;
}
.tatarr-checkout-aside .tatarr-sum-price .subscription-details,
.tatarr-checkout-aside .tatarr-sum-price small{
  font-family: var(--font-body) !important;
  font-style: normal !important;
  font-size: 10px !important;
  color: var(--muted) !important;
  display: inline-block;
  margin-left: 2px;
}
/* WC Subscriptions wraps price in span.subscription-price — extract inline */
.tatarr-checkout-aside .tatarr-sum-price .subscription-price{
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}

/* Eyebrow / SKU mai mici */
.tatarr-checkout-aside .tatarr-sum-cat{ font-size: 9px !important; letter-spacing: 0.12em !important; }
.tatarr-checkout-aside .tatarr-sum-meta{ font-size: 9px !important; letter-spacing: 0.08em !important; }

/* BUTON GOLD final - peste orice silver glass */
.tatarr-checkout-aside .tatarr-place-order #place_order,
.tatarr-checkout-aside #place_order,
body.woocommerce-checkout .tatarr-checkout-aside #place_order{
  background: linear-gradient(135deg, #d4aa5a 0%, #b8945a 100%) !important;
  background-image: linear-gradient(135deg, #d4aa5a 0%, #b8945a 100%) !important;
  background-color: #d4aa5a !important;
  color: #0a0d14 !important;
  border: none !important;
  border-radius: 999px !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em !important;
  text-transform: none !important;
  padding: 16px 24px !important;
  width: 100% !important;
  margin: 0 !important;
  box-shadow: 0 12px 28px -8px rgba(212,170,90,0.55), inset 0 1px 0 rgba(255,255,255,0.2) !important;
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.25s var(--ease);
}
body.woocommerce-checkout .tatarr-checkout-aside #place_order:hover{
  background-image: linear-gradient(135deg, #e6c280 0%, #c9a468 100%) !important;
  transform: translateY(-1px);
  box-shadow: 0 16px 36px -8px rgba(212,170,90,0.75), inset 0 1px 0 rgba(255,255,255,0.3) !important;
}
body.woocommerce-checkout .tatarr-checkout-aside #place_order svg{ color: #0a0d14 !important; }


/* =========================================================================
 * TATARR Silver - Buton chrome metallic + trust spacing + stripe
 * EXACT ca în demo
 * ========================================================================= */

/* Buton Plătește — CHROME METALLIC SHINE ca în demo */
body.woocommerce-checkout .tatarr-checkout-aside .tatarr-place-order #place_order,
body.woocommerce-checkout .tatarr-checkout-aside #place_order{
  background: linear-gradient(180deg,
    rgba(255,255,255,0.05) 0%,
    rgba(255,255,255,0.02) 100%
  ) !important;
  background-image:
    linear-gradient(95deg,
      rgba(80,90,105,0.55) 0%,
      rgba(200,210,225,0.70) 18%,
      rgba(230,240,255,0.85) 32%,
      rgba(255,255,255,0.95) 38%,
      rgba(210,220,235,0.75) 50%,
      rgba(100,115,135,0.55) 70%,
      rgba(150,160,175,0.65) 100%
    ) !important;
  background-color: rgba(180,190,205,0.20) !important;
  color: var(--bg-0) !important;
  border: 1px solid rgba(255,255,255,0.55) !important;
  border-radius: 999px !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  padding: 16px 28px !important;
  width: 100% !important;
  margin: 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    inset 0 -1px 0 rgba(0,0,0,0.30),
    inset 0 0 24px rgba(255,255,255,0.15),
    0 12px 30px -10px rgba(0,0,0,0.6) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.40);
  cursor: pointer;
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: all 0.25s var(--ease);
  position: relative;
  overflow: hidden;
}
body.woocommerce-checkout .tatarr-checkout-aside #place_order::before{
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(95deg,
    transparent 0%,
    rgba(255,255,255,0.0) 25%,
    rgba(255,255,255,0.35) 38%,
    rgba(255,255,255,0.0) 52%,
    transparent 100%
  );
  pointer-events: none;
}
body.woocommerce-checkout .tatarr-checkout-aside #place_order:hover{
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.80),
    inset 0 -1px 0 rgba(0,0,0,0.30),
    inset 0 0 32px rgba(255,255,255,0.25),
    0 16px 38px -8px rgba(0,0,0,0.7) !important;
}
body.woocommerce-checkout .tatarr-checkout-aside #place_order svg{
  color: var(--bg-0) !important;
  stroke: var(--bg-0) !important;
  position: relative; z-index: 1;
}
body.woocommerce-checkout .tatarr-checkout-aside #place_order > *{ position: relative; z-index: 1; }

/* Trust badges — spațiere corectă + separator | */
.tatarr-checkout-aside .summary-trust{
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center;
  justify-content: space-between;
  gap: 0 !important;
  margin-top: 14px;
  padding: 10px 16px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
}
.tatarr-checkout-aside .summary-trust .trust-item{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted) !important;
  font-family: var(--font-mono) !important;
  font-size: 9px !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  white-space: nowrap;
  padding: 0;
}
.tatarr-checkout-aside .summary-trust .trust-item + .trust-item{
  border-left: 1px solid var(--glass-border-strong);
  padding-left: 12px;
  margin-left: 12px;
}
.tatarr-checkout-aside .summary-trust .trust-item + .trust-item::before{
  display: none !important;
  content: none !important;
}
.tatarr-checkout-aside .summary-trust .trust-item svg{
  width: 11px !important; height: 11px !important;
  color: var(--ink);
  flex-shrink: 0;
}

/* "PLATĂ PROCESATĂ PRIN stripe" — stripe vizibil sigur */
.tatarr-checkout-aside .summary-powered{
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 10px !important;
  margin-top: 20px !important;
  padding-top: 14px;
  border-top: 1px dashed var(--glass-border);
  font-family: var(--font-mono) !important;
  color: var(--muted) !important;
  font-size: 10px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
}
.tatarr-checkout-aside .summary-powered > span{
  display: inline-block !important;
  visibility: visible !important;
}
.tatarr-checkout-aside .summary-powered .stripe-text{
  font-family: var(--font-body) !important;
  color: var(--ink) !important;
  font-weight: 700 !important;
  font-size: 14px !important;
  text-transform: lowercase !important;
  letter-spacing: 0 !important;
}


/* =========================================================================
 * TATARR Silver - BUTON Plătește CHROME (final, max specificitate)
 * ========================================================================= */

html body.woocommerce-checkout .tatarr-checkout-aside form.checkout .tatarr-place-order button#place_order,
html body.woocommerce-checkout .tatarr-checkout-aside button#place_order,
html body.woocommerce-checkout .tatarr-checkout-aside .tatarr-place-order #place_order,
html body.woocommerce-checkout button#place_order.button,
html body.woocommerce-checkout #place_order{
  background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 100%), linear-gradient(95deg, rgba(80,90,105,0.85) 0%, rgba(200,215,235,0.95) 22%, rgba(255,255,255,1) 38%, rgba(220,230,245,0.95) 52%, rgba(120,135,155,0.85) 75%, rgba(170,185,200,0.90) 100%) !important;
  background-color: rgba(200,210,225,0.85) !important;
  color: #0a0d14 !important;
  border: 1px solid rgba(255,255,255,0.65) !important;
  border-radius: 999px !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  padding: 16px 28px !important;
  width: 100% !important;
  margin: 0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    inset 0 -1px 0 rgba(0,0,0,0.25),
    inset 0 0 30px rgba(255,255,255,0.20),
    0 14px 32px -8px rgba(0,0,0,0.55) !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.50) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  transition: all 0.25s var(--ease);
  position: relative;
  overflow: hidden;
}

html body.woocommerce-checkout #place_order:hover{
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(0,0,0,0.30),
    inset 0 0 40px rgba(255,255,255,0.30),
    0 18px 40px -6px rgba(0,0,0,0.6) !important;
}
html body.woocommerce-checkout #place_order svg{
  color: #0a0d14 !important;
  stroke: #0a0d14 !important;
}


/* =========================================================================
 * TATARR Silver - CHROME button + bottom EXACT demo (final, max specificity)
 * ========================================================================= */

/* Reset previous button attempts */
html body.woocommerce-checkout .tatarr-checkout-aside button#place_order,
html body.woocommerce-checkout .tatarr-checkout-aside button#place_order.button,
html body.woocommerce-checkout .tatarr-checkout-aside button#place_order.button.alt,
html body.woocommerce-checkout .tatarr-checkout-aside .tatarr-place-order button#place_order{
  /* Gradient orizontal chrome cu contrast puternic centru → margini */
  background:
    radial-gradient(ellipse at 35% 50%, rgba(255,255,255,0.55) 0%, transparent 55%),
    linear-gradient(95deg,
      #6a7280 0%,
      #aab2bd 12%,
      #e6ebf0 28%,
      #f5f7f9 38%,
      #e0e5eb 50%,
      #9098a3 70%,
      #b5bdc8 88%,
      #828a96 100%
    ) !important;
  background-color: #c0c8d4 !important;
  color: #0a0d14 !important;
  border: 1px solid rgba(255,255,255,0.85) !important;
  border-radius: 999px !important;
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
  padding: 16px 28px !important;
  width: 100% !important;
  margin: 0 !important;
  height: auto !important;
  line-height: 1 !important;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6) !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(0,0,0,0.30),
    inset 0 0 28px rgba(255,255,255,0.18),
    0 16px 36px -10px rgba(0,0,0,0.65),
    0 0 0 1px rgba(0,0,0,0.15) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  transition: filter 0.2s var(--ease), transform 0.2s var(--ease) !important;
  position: relative;
  overflow: hidden;
  -webkit-text-fill-color: #0a0d14 !important;
}
html body.woocommerce-checkout .tatarr-checkout-aside #place_order:hover{
  filter: brightness(1.08) !important;
  transform: translateY(-1px) !important;
}
html body.woocommerce-checkout .tatarr-checkout-aside #place_order svg,
html body.woocommerce-checkout .tatarr-checkout-aside #place_order > svg{
  color: #0a0d14 !important;
  stroke: #0a0d14 !important;
  fill: none !important;
  width: 16px !important;
  height: 16px !important;
}

/* Trust badges EXACT cu spațiere demo: container glass pill, separator | */
.tatarr-checkout-aside .summary-trust{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  margin: 14px 0 0 !important;
  padding: 11px 18px !important;
  background: var(--glass-bg-strong) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 999px !important;
  width: 100%;
  box-sizing: border-box;
}
.tatarr-checkout-aside .summary-trust .trust-item{
  flex: 1 1 auto !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 0 12px !important;
  margin: 0 !important;
  color: var(--ink) !important;
  font-family: var(--font-mono) !important;
  font-size: 9.5px !important;
  font-weight: 500 !important;
  letter-spacing: 0.13em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  border: none !important;
  position: relative !important;
}
.tatarr-checkout-aside .summary-trust .trust-item + .trust-item{
  border-left: 1px solid rgba(255,255,255,0.18) !important;
  margin-left: 0 !important;
}
.tatarr-checkout-aside .summary-trust .trust-item::before,
.tatarr-checkout-aside .summary-trust .trust-item::after{
  content: none !important;
  display: none !important;
}
.tatarr-checkout-aside .summary-trust .trust-item svg{
  width: 12px !important;
  height: 12px !important;
  color: var(--ink) !important;
  stroke: var(--ink) !important;
  fill: none !important;
  flex-shrink: 0 !important;
}

/* PLATĂ PROCESATĂ PRIN stripe — dashed line above, stripe bright */
.tatarr-checkout-aside .summary-powered{
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 12px !important;
  margin-top: 22px !important;
  padding-top: 18px !important;
  border-top: 1px dashed var(--glass-border) !important;
  font-family: var(--font-mono) !important;
  color: var(--muted) !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  width: 100%;
}
.tatarr-checkout-aside .summary-powered > span:first-child{
  display: inline-block !important;
  color: var(--muted) !important;
}
.tatarr-checkout-aside .summary-powered .stripe-text{
  display: inline-block !important;
  visibility: visible !important;
  font-family: var(--font-body) !important;
  color: var(--ink) !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  text-transform: lowercase !important;
  letter-spacing: -0.01em !important;
  font-style: normal !important;
}


/* =========================================================================
 * TATARR Silver - Terms card (checkbox-uri chrome metallic)
 * 2026-05-13
 * ========================================================================= */

.tatarr-checkout-main .tatarr-terms-card{
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 18px !important;
  padding: 24px 28px !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}

.tatarr-terms-wrap{
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tatarr-terms-row{
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 12px;
  align-items: flex-start;
  position: relative;
}

/* Ascundem checkbox-ul real, păstrăm interactivitatea */
.tatarr-checkbox{
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 24px;
  height: 24px;
}

.tatarr-terms-label{
  display: contents;
  cursor: pointer;
}

/* Checkbox custom — pătrat chrome metallic */
.tatarr-check-visual{
  display: inline-block;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: linear-gradient(135deg,
    rgba(80,90,105,0.6) 0%,
    rgba(180,195,215,0.4) 50%,
    rgba(60,70,85,0.6) 100%
  );
  border: 1px solid rgba(255,255,255,0.45);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    inset 0 -1px 0 rgba(0,0,0,0.3),
    inset 0 0 8px rgba(255,255,255,0.1),
    0 2px 6px -2px rgba(0,0,0,0.5);
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.2s var(--ease);
}

/* Bifa apare când checkbox-ul e checked */
.tatarr-check-visual::after{
  content: '';
  position: absolute;
  inset: 4px;
  background: linear-gradient(135deg, #ffffff 0%, #d8dde6 50%, #98a0ac 100%);
  border-radius: 3px;
  opacity: 0;
  transform: scale(0);
  transition: all 0.2s var(--ease);
  mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') no-repeat center / contain;
  -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') no-repeat center / contain;
}

.tatarr-checkbox:checked + .tatarr-terms-label .tatarr-check-visual,
.tatarr-terms-row:has(.tatarr-checkbox:checked) .tatarr-check-visual{
  background: linear-gradient(135deg,
    #ffffff 0%,
    #d8dde6 35%,
    #6a7280 70%,
    #b5bdc8 100%
  );
  border-color: rgba(255,255,255,0.85);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.95),
    inset 0 -1px 0 rgba(0,0,0,0.3),
    inset 0 0 10px rgba(255,255,255,0.3),
    0 4px 10px -2px rgba(0,0,0,0.55);
}

.tatarr-checkbox:checked + .tatarr-terms-label .tatarr-check-visual::after,
.tatarr-terms-row:has(.tatarr-checkbox:checked) .tatarr-check-visual::after{
  opacity: 1;
  transform: scale(1);
  background: #0a0d14;
}

.tatarr-check-visual:hover{
  border-color: rgba(255,255,255,0.65);
}

/* Text-ul de lângă checkbox */
.tatarr-terms-text{
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1.5;
  letter-spacing: 0;
  display: block;
  padding-top: 2px;
}
.tatarr-terms-text a{
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
}
.tatarr-terms-text a:hover{ color: var(--gold); }

/* Hide WC default terms-and-conditions wrapper (folosim al nostru custom) */
.tatarr-payment-wrap .woocommerce-terms-and-conditions-wrapper,
.tatarr-payment-wrap .form-row.terms,
.tatarr-payment-wrap p.form-row.terms,
.tatarr-payment-wrap .woocommerce-form__label-for-checkbox{ display: none !important; }


/* =========================================================================
 * TATARR Silver - Checkbox CHROME metallic (final, max specificity)
 * 2026-05-13
 * ========================================================================= */

/* Forteaza ascunderea checkbox-ului real */
html body .tatarr-terms-card input[type="checkbox"].tatarr-cb,
html body .tatarr-terms-card .tatarr-terms-row input[type="checkbox"]{
  position: absolute !important;
  opacity: 0 !important;
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Visual check — chrome metallic pătrat */
html body .tatarr-terms-card .tatarr-check-visual{
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 6px !important;
  background: linear-gradient(135deg, #4a5260 0%, #aab2bd 50%, #2a3038 100%) !important;
  border: 1px solid rgba(255,255,255,0.45) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.55),
    inset 0 -1px 0 rgba(0,0,0,0.30),
    inset 0 0 6px rgba(255,255,255,0.10),
    0 2px 6px -2px rgba(0,0,0,0.50) !important;
  position: relative !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

/* Bifa (checked state) — chrome puternic + checkmark negru */
html body .tatarr-terms-card .tatarr-cb:checked + .tatarr-check-visual,
html body .tatarr-terms-card .tatarr-terms-row:has(.tatarr-cb:checked) .tatarr-check-visual{
  background: linear-gradient(135deg,
    #ffffff 0%,
    #d8dde6 30%,
    #6a7280 65%,
    #b5bdc8 100%
  ) !important;
  border-color: rgba(255,255,255,0.90) !important;
  box-shadow:
    inset 0 1.5px 0 rgba(255,255,255,1),
    inset 0 -1px 0 rgba(0,0,0,0.30),
    inset 0 0 10px rgba(255,255,255,0.30),
    0 4px 12px -2px rgba(0,0,0,0.55) !important;
}

/* Checkmark SVG-ul negru afișat când e bifat */
html body .tatarr-terms-card .tatarr-check-visual::after{
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%230a0d14" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>') no-repeat center / 14px 14px;
  opacity: 0 !important;
  transform: scale(0.5) !important;
  transition: all 0.2s ease !important;
}
html body .tatarr-terms-card .tatarr-cb:checked + .tatarr-check-visual::after,
html body .tatarr-terms-card .tatarr-terms-row:has(.tatarr-cb:checked) .tatarr-check-visual::after{
  opacity: 1 !important;
  transform: scale(1) !important;
}

/* Text-ul lângă checkbox */
html body .tatarr-terms-card .tatarr-terms-text{
  color: var(--ink) !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  letter-spacing: 0 !important;
  display: block !important;
  padding-top: 2px !important;
}
html body .tatarr-terms-card .tatarr-terms-text a{
  color: var(--ink) !important;
  text-decoration: underline !important;
  text-decoration-color: var(--gold) !important;
  text-underline-offset: 3px !important;
}

/* Card style */
html body .tatarr-checkout-main .tatarr-terms-card{
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 18px !important;
  padding: 22px 26px !important;
  margin-top: 0 !important;
}

/* Ascunde orice WC default terms */
html body .tatarr-payment-wrap .woocommerce-terms-and-conditions-wrapper,
html body .tatarr-payment-wrap .form-row.terms,
html body .tatarr-payment-wrap p.form-row.terms,
html body .tatarr-checkout-aside .woocommerce-terms-and-conditions-wrapper{
  display: none !important;
}

/* Ascunde page-hero default pe checkout — folosim header-ul din form-checkout.php */
body.woocommerce-checkout .page-hero{ display: none !important; }
body.woocommerce-checkout main.page > section.block > .wrap{ padding-top: 110px !important; }
body.woocommerce-checkout .tatarr-checkout-header{ margin-top: 0 !important; padding-top: 0; }

/* Extra-force hide page-hero on checkout/cart/account */
body.woocommerce-checkout > * .page-hero,
body.woocommerce-checkout main .page-hero,
body.woocommerce-checkout div.page-hero{
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
body.woocommerce-checkout main.page > section.block{ padding-top: 100px !important; }
body.woocommerce-checkout .tatarr-checkout-header{ margin-top: 0 !important; padding-top: 20px !important; }

/* Page-hero h1 cu em italic pe checkout/cart/account */
body.woocommerce-checkout .page-hero h1 em,
body.woocommerce-cart .page-hero h1 em,
body.woocommerce-account .page-hero h1 em{
  font-style: italic;
  color: var(--gold);
}
body.woocommerce-checkout .page-hero h1::after,
body.woocommerce-cart .page-hero h1::after,
body.woocommerce-account .page-hero h1::after{ content: ''; }
.tatarr-checkout-subheader{ text-align: center; margin: 0 auto 32px; max-width: 720px; }
.tatarr-checkout-subheader .eyebrow-pill{ display: inline-flex; align-items: center; gap: 8px; }
.tatarr-checkout-subheader .tatarr-checkout-subtitle{ color: var(--muted); font-size: 14px; line-height: 1.6; margin: 14px 0 0; }


/* =========================================================================
 * TATARR Silver - Account Dashboard (demo parity)
 * 2026-05-13
 * ========================================================================= */

/* SIDEBAR: avatar mare + nav frumos fără text-wrap */
html body.woocommerce-account .tatarr-account-grid{
  display: grid !important;
  grid-template-columns: 280px 1fr !important;
  gap: 36px !important;
  align-items: start !important;
}
@media (max-width: 900px){
  html body.woocommerce-account .tatarr-account-grid{ grid-template-columns: 1fr !important; }
}
html body.woocommerce-account .tatarr-acc-sidebar{
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 20px !important;
  padding: 22px 20px !important;
}
html body.woocommerce-account .tatarr-acc-sidebar .acc-user{
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding-bottom: 18px !important;
  margin-bottom: 14px !important;
  border-bottom: 1px solid var(--glass-border) !important;
}
html body.woocommerce-account .tatarr-acc-sidebar .acc-avatar{
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  border: 1px solid var(--glass-border-strong) !important;
}
html body.woocommerce-account .tatarr-acc-sidebar .acc-user-name{
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.12em !important;
  color: var(--ink) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  margin-bottom: 2px !important;
}
html body.woocommerce-account .tatarr-acc-sidebar .acc-user-email{
  color: var(--muted) !important;
  font-size: 11px !important;
  letter-spacing: 0 !important;
  word-break: break-all !important;
}

/* WC nav items */
html body.woocommerce-account .tatarr-acc-sidebar .woocommerce-MyAccount-navigation{
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  position: static !important;
}
html body.woocommerce-account .tatarr-acc-sidebar .woocommerce-MyAccount-navigation ul{
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}
html body.woocommerce-account .tatarr-acc-sidebar .woocommerce-MyAccount-navigation ul li{
  margin: 0 !important;
  list-style: none !important;
}
html body.woocommerce-account .tatarr-acc-sidebar .woocommerce-MyAccount-navigation ul li a{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 11px 14px !important;
  color: var(--muted) !important;
  text-decoration: none !important;
  border-radius: 12px !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  white-space: nowrap !important;
  border: 1px solid transparent !important;
  transition: all 0.25s var(--ease) !important;
}
html body.woocommerce-account .tatarr-acc-sidebar .woocommerce-MyAccount-navigation ul li a:hover{
  background: var(--glass-bg-strong) !important;
  color: var(--ink) !important;
}
html body.woocommerce-account .tatarr-acc-sidebar .woocommerce-MyAccount-navigation ul li.is-active a{
  background: var(--glass-bg-strong) !important;
  color: var(--ink) !important;
  border-color: var(--glass-border-strong) !important;
  font-weight: 600 !important;
}

/* DASHBOARD content */
html body.woocommerce-account .tatarr-dash{
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.tatarr-dash-head{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}
.tatarr-dash-eyebrow{
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--gold);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.tatarr-dash-title{
  font-family: 'Cormorant Garamond', var(--font-display);
  font-size: 36px;
  font-weight: 400;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 8px;
  line-height: 1;
}
.tatarr-dash-subtitle{
  color: var(--muted);
  font-size: 13px;
  line-height: 1.6;
  max-width: 480px;
  margin: 0;
}
.tatarr-dash-cta{
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-strong);
  border-radius: 999px;
  padding: 10px 22px;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: all 0.25s var(--ease);
}
.tatarr-dash-cta:hover{ background: var(--glass-bg); transform: translateY(-1px); }

/* Stats grid */
.tatarr-stats-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 720px){ .tatarr-stats-grid{ grid-template-columns: 1fr; } }
.tatarr-stat{
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 22px 22px 18px;
}
.tatarr-stat-icon{
  position: absolute; top: 16px; right: 16px;
  width: 20px; height: 20px;
  color: var(--muted);
  stroke-width: 1.5;
}
.tatarr-stat-label{
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.tatarr-stat-value{
  font-family: 'Cormorant Garamond', var(--font-display);
  font-size: 30px;
  font-weight: 400;
  font-style: italic;
  color: var(--ink);
  line-height: 1;
  margin-bottom: 8px;
}
.tatarr-stat-value .woocommerce-Price-amount{
  font-family: 'Cormorant Garamond', var(--font-display) !important;
  font-size: 30px !important;
  font-weight: 400 !important;
  font-style: italic !important;
  color: var(--ink) !important;
}
.tatarr-stat-sub{
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Section title */
.tatarr-dash-section{
  font-family: 'Cormorant Garamond', var(--font-display);
  font-size: 22px;
  font-weight: 400;
  font-style: italic;
  color: var(--ink);
  margin: 8px 0 0;
  letter-spacing: -0.01em;
}

/* Subscription card */
.tatarr-sub-card{
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  padding: 26px 28px;
}
.tatarr-sub-head{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.tatarr-sub-badge{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  background: rgba(74, 222, 128, 0.15);
  border: 1px solid rgba(74, 222, 128, 0.3);
  border-radius: 999px;
  color: #4ade80;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.tatarr-sub-badge::before{
  content: '';
  width: 6px; height: 6px;
  background: #4ade80;
  border-radius: 50%;
}
.tatarr-sub-id{
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.08em;
}
.tatarr-sub-title{
  font-family: 'Cormorant Garamond', var(--font-display);
  font-size: 24px;
  font-weight: 400;
  font-style: italic;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 4px;
}
.tatarr-sub-subtitle{
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 22px;
}
.tatarr-sub-meta{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding-top: 18px;
  border-top: 1px solid var(--glass-border);
  margin-bottom: 22px;
}
@media (max-width: 600px){ .tatarr-sub-meta{ grid-template-columns: 1fr; } }
.tatarr-sub-meta-label{
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.tatarr-sub-meta-value{
  color: var(--ink);
  font-size: 14px;
}
.tatarr-sub-meta-value.tatarr-sub-price{
  font-family: 'Cormorant Garamond', var(--font-display);
  font-style: italic;
  font-size: 20px;
}
.tatarr-sub-actions{ display: flex; gap: 10px; flex-wrap: wrap; }
.tatarr-sub-btn{
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-strong);
  border-radius: 999px;
  padding: 9px 18px;
  color: var(--ink);
  text-decoration: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.25s var(--ease);
}
.tatarr-sub-btn:hover{ background: var(--glass-bg); border-color: var(--gold); color: var(--gold); }

/* Orders list */
.tatarr-orders-list{ display: flex; flex-direction: column; gap: 10px; }
.tatarr-order-row{
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 16px 20px;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: 14px;
}
@media (max-width: 720px){
  .tatarr-order-row{ grid-template-columns: 1fr 1fr; }
  .tatarr-order-action{ grid-column: 1 / -1; justify-self: stretch; text-align: center; }
}
.tatarr-order-label{
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.tatarr-order-val{ color: var(--ink); font-size: 13px; }
.tatarr-order-val.tatarr-order-total{ font-family: 'Cormorant Garamond', var(--font-display); font-style: italic; font-size: 18px; }
.tatarr-order-badge{
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: rgba(74, 222, 128, 0.15);
  border: 1px solid rgba(74, 222, 128, 0.3);
  color: #4ade80;
}
.tatarr-order-badge-cancelled{ background: var(--glass-bg-strong); border-color: var(--glass-border); color: var(--muted); }
.tatarr-order-action{ white-space: nowrap; }

/* Hide WC default dashboard text since we replaced it */
.woocommerce-MyAccount-content > p:first-child{ display: none; }


/* =========================================================================
 * TATARR Silver - Account nav badges + icons
 * ========================================================================= */

html body.woocommerce-account .tatarr-acc-nav ul li a{
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 11px 14px !important;
  white-space: nowrap !important;
  color: var(--muted) !important;
  text-decoration: none !important;
  border-radius: 12px !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  border: 1px solid transparent !important;
  transition: all 0.25s var(--ease) !important;
}
html body.woocommerce-account .tatarr-acc-nav ul li a svg{
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  color: var(--muted) !important;
}
html body.woocommerce-account .tatarr-acc-nav ul li.is-active a svg,
html body.woocommerce-account .tatarr-acc-nav ul li a:hover svg{
  color: var(--gold) !important;
}
html body.woocommerce-account .tatarr-acc-nav .tatarr-nav-label{
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
}
html body.woocommerce-account .tatarr-acc-nav .tatarr-nav-badge{
  display: inline-block;
  padding: 2px 8px;
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: 999px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--gold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-left: auto;
  flex-shrink: 0;
}

/* Stat icon NEVER huge */
html body.woocommerce-account .tatarr-stat-icon,
html body.woocommerce-account .tatarr-stat svg{
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
}

/* Force stats grid even if cached */
html body.woocommerce-account .tatarr-stats-grid{
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px !important;
  margin: 4px 0 !important;
}
@media (max-width: 720px){
  html body.woocommerce-account .tatarr-stats-grid{ grid-template-columns: 1fr !important; }
}

html body.woocommerce-account .tatarr-stat{
  position: relative;
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: 16px !important;
  padding: 22px !important;
}

/* Account grid — sidebar mai lata, gap mai mic */
html body.woocommerce-account .tatarr-account-grid{
  grid-template-columns: 240px minmax(0, 1fr) !important;
  gap: 24px !important;
}
html body.woocommerce-account .tatarr-acc-sidebar{ padding: 20px 16px !important; }

/* FINAL OVERRIDE: account grid */
html body.woocommerce-account main .tatarr-account-grid{
  display: grid !important;
  grid-template-columns: 260px minmax(0, 1fr) !important;
  gap: 24px !important;
  align-items: start !important;
  width: 100% !important;
}
@media (max-width: 900px){
  html body.woocommerce-account main .tatarr-account-grid{ grid-template-columns: 1fr !important; gap: 18px !important; }
}
html body.woocommerce-account .tatarr-acc-content{
  min-width: 0 !important;
  width: 100% !important;
}
html body.woocommerce-account .woocommerce-MyAccount-content{
  width: 100% !important;
  max-width: none !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  backdrop-filter: none !important;
}

/* Nav items NEVER truncate */
html body.woocommerce-account .tatarr-acc-nav ul li a,
html body.woocommerce-account .tatarr-acc-nav ul li a *{
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}
html body.woocommerce-account .tatarr-acc-nav ul li a span{
  flex: 0 1 auto !important;
}

/* Account grid responsive — CSS only (inline ar bloca media query) */
html body.woocommerce-account .tatarr-account-grid{
  display: grid !important;
  grid-template-columns: 300px minmax(0, 1fr) !important;
  gap: 28px !important;
  align-items: start !important;
  width: 100% !important;
}
@media (max-width: 900px){
  html body.woocommerce-account .tatarr-account-grid{
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  html body.woocommerce-account .tatarr-acc-sidebar{
    position: static !important;
  }
}
@media (max-width: 600px){
  html body.woocommerce-account .tatarr-dash-head{
    flex-direction: column !important;
    gap: 16px !important;
  }
  html body.woocommerce-account .tatarr-stats-grid{
    grid-template-columns: 1fr !important;
  }
  html body.woocommerce-account .tatarr-sub-meta{
    grid-template-columns: 1fr !important;
  }
  html body.woocommerce-account .tatarr-order-row{
    grid-template-columns: 1fr 1fr !important;
  }
}

/* Sticky doar pe desktop */
@media (min-width: 901px){
  html body.woocommerce-account .tatarr-acc-sidebar{
    position: sticky !important;
    top: 100px !important;
  }
}
@media (max-width: 900px){
  html body.woocommerce-account .tatarr-acc-sidebar{
    position: static !important;
    top: auto !important;
  }
}

/* Dashboard highlight FULL WIDTH */
html body.woocommerce-account .tatarr-acc-nav ul,
html body.woocommerce-account .tatarr-acc-nav ul li{
  width: 100% !important;
}
html body.woocommerce-account .tatarr-acc-nav ul li a{
  width: 100% !important;
  flex: 1 1 auto !important;
  box-sizing: border-box !important;
  display: flex !important;
}

/* ============================================================
 * TATARR Silver - Account: FINAL hard fix
 * Tinta: highlight full-width pe link + mobile fara overlap
 * ============================================================ */
html body.woocommerce-account .tatarr-acc-sidebar nav,
html body.woocommerce-account .tatarr-acc-sidebar nav ul,
html body.woocommerce-account .tatarr-acc-sidebar nav ul li,
html body.woocommerce-account .tatarr-acc-sidebar nav ul li a{
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
html body.woocommerce-account .tatarr-acc-sidebar nav ul li{
  display: block !important;
  list-style: none !important;
  margin: 0 !important;
}
html body.woocommerce-account .tatarr-acc-sidebar nav ul li a{
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
}

/* Asigura ca pe mobil sidebar-ul nu se urca peste continut */
@media (max-width: 900px){
  html body.woocommerce-account .tatarr-acc-sidebar{
    position: relative !important;
    top: auto !important;
    z-index: 1 !important;
  }
  html body.woocommerce-account .tatarr-acc-content{
    position: relative !important;
    z-index: 2 !important;
  }
}

/* ============================================================
 * TATARR Silver - Account: FINAL definitive overrides
 * 2026-05-13: kill double-chrome on inner nav + tighten mobile
 * ============================================================ */

/* INNER WC nav: NEVER its own chrome (sidebar wraps it) */
html body.woocommerce-account .tatarr-acc-sidebar .woocommerce-MyAccount-navigation,
html body.woocommerce-account .tatarr-acc-sidebar .tatarr-acc-nav,
html body.woocommerce-account .tatarr-acc-sidebar nav{
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  border-color: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  position: static !important;
  top: auto !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
}

/* Nav link MUST be full-width, no exception */
html body.woocommerce-account .tatarr-acc-sidebar .woocommerce-MyAccount-navigation ul li a,
html body.woocommerce-account .tatarr-acc-sidebar .tatarr-acc-nav ul li a,
html body.woocommerce-account .tatarr-acc-sidebar nav ul li a{
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

html body.woocommerce-account .tatarr-acc-sidebar .woocommerce-MyAccount-navigation ul li,
html body.woocommerce-account .tatarr-acc-sidebar .tatarr-acc-nav ul li,
html body.woocommerce-account .tatarr-acc-sidebar nav ul li{
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
}

/* Mobile: page-hero mai tight, gap mai mic intre header si sidebar */
@media (max-width: 900px){
  html body.woocommerce-account .page-hero{
    padding: 90px var(--pad) 24px !important;
  }
  html body.woocommerce-account main{
    padding-top: 0 !important;
  }
  html body.woocommerce-account .tatarr-account-grid{
    gap: 14px !important;
    margin-top: 0 !important;
  }
  html body.woocommerce-account .tatarr-acc-sidebar{
    margin-top: 0 !important;
  }
}

/* ============================================================
 * TATARR Silver - Account Mobile: kill page-hero gap
 * 2026-05-13: ascund titlul "Contul meu." pe mobil
 * ============================================================ */
@media (max-width: 900px){
  html body.woocommerce-account .page-hero{
    display: none !important;
  }
  html body.woocommerce-account main{
    padding-top: 16px !important;
  }
  html body.woocommerce-account .tatarr-account-grid{
    gap: 12px !important;
  }
  html body.woocommerce-account .tatarr-acc-sidebar{
    padding: 14px 12px !important;
  }
}

/* ============================================================
 * TATARR Silver - Mobile fixed-nav iOS jitter fix
 * 2026-05-13: previne saltul barii pe scroll iOS Safari
 * ============================================================ */
@media (max-width: 900px){
  html body .nav{
    transform: translate3d(0, 0, 0) !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    will-change: padding, background !important;
    transition: padding 0.2s ease, background 0.2s ease !important;
  }
  html body.woocommerce-account .page-hero{
    display: none !important;
  }
}

/* ============================================================
 * TATARR Silver - Mobile fixed-nav: NO height change on scroll
 * 2026-05-13: pe mobil padding-ul ramane constant ca nav-ul sa
 * nu pare ca "coboara/sare" la fiecare scroll
 * ============================================================ */
@media (max-width: 900px){
  html body .nav,
  html body .nav.scrolled{
    padding: 14px var(--pad) !important;
    transition: background 0.2s ease, border-color 0.2s ease !important;
    transform: translate3d(0, 0, 0) !important;
    -webkit-transform: translate3d(0, 0, 0) !important;
  }
}

/* ============================================================
 * TATARR Silver - Mobile: nav STICKY (nu fixed) ca sa nu mai
 * sara la scroll pe iOS Safari (URL-bar collapse jitter)
 * 2026-05-13
 * ============================================================ */
@media (max-width: 900px){
  html body .nav{
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    inset: auto !important;
    z-index: 100 !important;
    padding: 14px var(--pad) !important;
    background: var(--bg-0) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    transition: none !important;
  }
  html body .nav.scrolled{
    padding: 14px var(--pad) !important;
    background: var(--bg-0) !important;
  }
  /* sticky ia loc in flow, deci body NU mai are nevoie de padding-top */
  html body{
    padding-top: 0 !important;
  }
}

/* ============================================================
 * TATARR Silver - Nav Account icon (logged-out state)
 * 2026-05-13: SVG modern + golden glow in loc de poza fondator
 * ============================================================ */
.nav-account-avatar-wrap.is-anonymous{
  background: radial-gradient(circle at 50% 45%,
    color-mix(in srgb, var(--gold-bright) 28%, transparent) 0%,
    color-mix(in srgb, var(--gold) 18%, transparent) 40%,
    var(--glass-bg-strong) 80%) !important;
  border: 1px solid color-mix(in srgb, var(--gold) 40%, var(--glass-edge-strong)) !important;
  box-shadow:
    inset 0 0 8px color-mix(in srgb, var(--gold-bright) 28%, transparent),
    0 0 12px color-mix(in srgb, var(--gold) 25%, transparent),
    0 0 1px color-mix(in srgb, var(--gold-bright) 60%, transparent);
  position: relative;
  overflow: visible;
}
.nav-account-avatar-wrap.is-anonymous::before{
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%,
    color-mix(in srgb, var(--gold-bright) 35%, transparent) 0%,
    transparent 60%);
  filter: blur(3px);
  z-index: -1;
  pointer-events: none;
  opacity: .6;
  animation: tatarr-nav-icon-pulse 3.2s ease-in-out infinite;
}
.nav-account-avatar-wrap.is-anonymous .nav-account-icon{
  width: 14px;
  height: 14px;
  color: var(--gold-bright);
  filter: drop-shadow(0 0 2px color-mix(in srgb, var(--gold-bright) 60%, transparent));
  position: relative;
  z-index: 1;
}
.nav-account-btn:hover .nav-account-avatar-wrap.is-anonymous{
  box-shadow:
    inset 0 0 10px color-mix(in srgb, var(--gold-bright) 40%, transparent),
    0 0 18px color-mix(in srgb, var(--gold) 40%, transparent),
    0 0 2px color-mix(in srgb, var(--gold-bright) 80%, transparent);
}
.nav-account-btn:hover .nav-account-avatar-wrap.is-anonymous::before{
  opacity: 1;
}
@keyframes tatarr-nav-icon-pulse{
  0%, 100% { opacity: .4; transform: scale(1); }
  50% { opacity: .75; transform: scale(1.08); }
}

/* ============================================================
 * TATARR Silver - Mega panel: centered to viewport, slightly
 * wider than site container, more transparent
 * 2026-05-13
 * ============================================================ */
html body .nav-item-mega .mega-panel-wide{
  position: fixed !important;
  left: 50% !important;
  top: auto !important;
  /* anchor right under the fixed nav (~78px) */
  margin-top: 0 !important;
  width: min(calc(var(--maxw) + 80px), calc(100vw - 32px)) !important;
  max-width: calc(100vw - 32px) !important;
  padding: 28px 36px !important;
  border-radius: 24px !important;
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--bg-1) 55%, transparent) 0%,
      color-mix(in srgb, var(--bg-2) 60%, transparent) 100%) !important;
  border: 1px solid color-mix(in srgb, var(--glass-border-strong) 70%, transparent) !important;
  backdrop-filter: blur(36px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(36px) saturate(180%) !important;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--glass-edge-strong) 60%, transparent),
    0 30px 70px -20px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.025) !important;
  transform: translateX(-50%) translateY(-8px) !important;
}
html body .nav-item-mega:hover .mega-panel-wide,
html body .mega-panel-wide:hover{
  transform: translateX(-50%) translateY(0) !important;
}
/* The top of the panel sits a bit below the fixed nav */
html body .nav-item-mega .mega-panel-wide{
  top: 78px !important;
}
/* invisible bridge between nav and panel for hover */
html body .nav-item-mega .mega-panel-wide::before{
  content: "";
  position: absolute;
  top: -24px;
  left: 0;
  right: 0;
  height: 24px;
}

/* ============================================================
 * TATARR Silver - Nav layout (FINAL CLEAN, post-revert)
 * 2026-05-13: grid 1fr auto 1fr → meniu PERFECT centrat pe pagina,
 * brand stanga, butoane dreapta, intr-un container max-width: --maxw
 * ============================================================ */
html body header.nav{
  padding-left: 0 !important;
  padding-right: 0 !important;
  display: block !important;
}
html body header.nav .nav-inner{
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: center !important;
  gap: 24px !important;
  max-width: calc(var(--maxw) + 200px) !important;
  margin: 0 auto !important;
  padding: 0 calc(var(--pad) / 2) !important;
  width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
}
html body header.nav .nav-inner > .nav-brand{
  grid-column: 1 !important;
  justify-self: start !important;
  position: static !important;
  transform: none !important;
}
html body header.nav .nav-inner > .nav-links{
  grid-column: 2 !important;
  justify-self: center !important;
  position: static !important;
  transform: none !important;
  margin: 0 !important;
  display: flex !important;
  gap: 4px !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
}
html body header.nav .nav-inner > .nav-right{
  grid-column: 3 !important;
  justify-self: end !important;
  position: static !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Nav account button: golden glow */
html body .nav-account-btn{
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--gold-bright) 14%, var(--glass-bg)),
    color-mix(in srgb, var(--gold-deep) 10%, var(--glass-bg))) !important;
  border-color: color-mix(in srgb, var(--gold) 35%, var(--glass-border-strong)) !important;
  box-shadow:
    0 10px 26px -10px color-mix(in srgb, var(--gold) 45%, transparent),
    0 0 0 1px color-mix(in srgb, var(--gold-bright) 12%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--gold-bright) 18%, transparent) !important;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease) !important;
}
html body .nav-account-btn:hover{
  transform: translateY(-1px) !important;
  border-color: var(--gold) !important;
  box-shadow:
    0 14px 32px -10px color-mix(in srgb, var(--gold) 55%, transparent),
    0 0 0 1px color-mix(in srgb, var(--gold-bright) 22%, transparent),
    inset 0 1px 0 color-mix(in srgb, var(--gold-bright) 30%, transparent) !important;
}

/* Mobile: revert grid to flex column for narrow viewports */
@media (max-width: 900px){
  html body header.nav .nav-inner{
    display: flex !important;
    justify-content: space-between !important;
    grid-template-columns: none !important;
  }
}

/* ============================================================
 * TATARR Silver - Nav items vertical alignment fix
 * 2026-05-13: .nav-item-mega (div) si fratii <a> pe acelasi rand
 * ============================================================ */
html body header.nav .nav-inner .nav-links,
html body header.nav .nav-inner > .nav-links{
  align-items: center !important;
  line-height: 1 !important;
}
html body header.nav .nav-inner .nav-links > a,
html body header.nav .nav-inner .nav-links > .nav-item-mega,
html body header.nav .nav-inner .nav-links > .nav-item-mega > a{
  display: inline-flex !important;
  align-items: center !important;
  line-height: 1 !important;
  font-size: 13px !important;
  padding: 10px 16px !important;
  height: auto !important;
  vertical-align: middle !important;
}


/* ============================================================
 * TATARR Silver - Plugin color-only overrides (light+dark)
 * 2026-05-13
 * REGULA: doar color/background/border-color/box-shadow.
 * NU se atinge: display, flex-*, gap, padding, position, grid.
 * Layout-ul plugin-ului ramane intact.
 * ============================================================ */

/* === tatarr-artists === */

/* Search input — fundal alb-translucid hardcodat -> glass theme */
html body .tatarr-search{
  background: var(--glass-bg) !important;
  color: var(--ink) !important;
  border-color: var(--glass-border) !important;
}
html body .tatarr-search:focus{
  background: var(--glass-bg-strong) !important;
  border-color: var(--gold) !important;
}
html body .tatarr-search::placeholder{ color: var(--ink-faint) !important; }

/* Sort select — option dropdown intra ca nativ pe OS, dar fundalul nostru */
html body .tatarr-sort-select{
  background-color: var(--glass-bg) !important;
  color: var(--ink) !important;
  border-color: var(--glass-border) !important;
}
html body .tatarr-sort-select option{
  background: var(--bg-1) !important;
  color: var(--ink) !important;
}

/* Filter buttons */
html body .tatarr-filter-btn{
  background: var(--glass-bg) !important;
  color: var(--ink-muted) !important;
  border-color: var(--glass-border) !important;
}
html body .tatarr-filter-btn:hover{
  background: var(--glass-bg-strong) !important;
  color: var(--ink) !important;
}
html body .tatarr-filter-btn.active{
  background: color-mix(in srgb, var(--gold-bright) 14%, var(--glass-bg-strong)) !important;
  color: var(--ink) !important;
  border-color: color-mix(in srgb, var(--gold) 45%, var(--glass-border-strong)) !important;
}

/* Card text colors */
html body .tatarr-card{ color: var(--ink) !important; }
html body .tatarr-card a:not(.tatarr-btn):not(.tatarr-name):not(.tatarr-last-release){ color: inherit !important; }
html body .tatarr-card .tatarr-last-release{ color: var(--ink) !important; }
html body .tatarr-card .tatarr-last-release:hover{ color: var(--gold-bright) !important; }
html body a.tatarr-name{ color: var(--ink) !important; }
html body a.tatarr-name:hover{ color: var(--gold-bright) !important; }
html body .tatarr-card ::selection{ background: color-mix(in srgb, var(--gold) 35%, transparent) !important; color: var(--ink) !important; }

/* Stat values that were #fff */
html body .stat-value,
html body .tatarr-card .stat-value{ color: var(--ink) !important; }
html body .stat-label{ color: var(--ink-faint) !important; }
html body .stat-value-max{ color: var(--gold-bright) !important; }

/* Bio + muted text */
html body .tatarr-bio,
html body .tatarr-card-stat--score .score-info{ color: var(--ink-muted) !important; }

/* Card background — rgba(255,255,255,0.04-0.07) -> glass-bg */
html body .tatarr-card,
html body .tatarr-card-stats,
html body .tatarr-card-stat{
  background-color: transparent !important;
}
html body .tatarr-card{
  background: var(--glass-bg) !important;
  border-color: var(--glass-border) !important;
}
html body .tatarr-card .tatarr-card-stat{
  background: var(--glass-bg-strong) !important;
}

/* Brand chip & badge--placeholder muted */
html body .tatarr-badge--placeholder{
  background: var(--glass-bg) !important;
  border-color: var(--glass-border) !important;
  color: var(--ink-faint) !important;
}
html body .tatarr-badge--join-recent{
  background: var(--glass-bg) !important;
  border-color: var(--glass-border) !important;
  color: var(--ink-faint) !important;
}

/* Inputs in apply form */
html body .tatarr-input,
html body .tatarr-form input,
html body .tatarr-form textarea,
html body .tatarr-form select{
  background: var(--glass-bg-strong) !important;
  color: var(--ink) !important;
  border-color: var(--glass-border) !important;
}
html body .tatarr-input::placeholder,
html body .tatarr-form input::placeholder,
html body .tatarr-form textarea::placeholder{ color: var(--ink-faint) !important; }

/* Apply form & countdown containers */
html body .tatarr-apply-form,
html body .tatarr-countdown,
html body .tatarr-artist-month,
html body .tatarr-link-bio,
html body .tatarr-new-artist{
  background: var(--glass-bg) !important;
  border-color: var(--glass-border) !important;
  color: var(--ink) !important;
}
html body .tatarr-apply-title,
html body .tatarr-am-label{ color: var(--ink) !important; }
html body .cd-val{ color: var(--gold-bright) !important; }
html body .cd-lbl{ color: var(--ink-faint) !important; }
html body .cd-sep{ color: var(--ink-faint) !important; }

/* Load-more button */
html body .tatarr-load-more{
  background: var(--glass-bg-strong) !important;
  border-color: var(--glass-border-strong) !important;
  color: var(--ink) !important;
}
html body .tatarr-load-more:hover{
  background: var(--glass-bg) !important;
  border-color: color-mix(in srgb, var(--gold) 40%, var(--glass-border-strong)) !important;
}

/* === youtube-top-charts === */

html body .ytc-wrap,
html body .ytc-container,
html body .ytc-chart,
html body .ytc-tabcontent{
  background-color: transparent !important;
  color: var(--ink) !important;
}

/* Brand title — daca pluginul are gradient, il pastram, dar fallback */
html body .ytc-chart-brand{
  color: var(--ink) !important;
}
html body .ytc-chart-info{ color: var(--ink-muted) !important; }

/* Tabs */
html body .ytc-tablink{
  background: var(--glass-bg) !important;
  color: var(--ink-muted) !important;
  border-color: var(--glass-border) !important;
}
html body .ytc-tablink:hover{
  background: var(--glass-bg-strong) !important;
  color: var(--ink) !important;
}
html body .ytc-tablink.active{
  background: color-mix(in srgb, var(--gold-bright) 14%, var(--glass-bg-strong)) !important;
  color: var(--ink) !important;
  border-color: color-mix(in srgb, var(--gold) 45%, var(--glass-border-strong)) !important;
}

/* Chart rows */
html body .ytc-chart-row{
  background: var(--glass-bg) !important;
  border-color: var(--glass-border) !important;
  color: var(--ink) !important;
}
html body .ytc-chart-row:hover{
  border-color: color-mix(in srgb, var(--gold) 35%, var(--glass-border-strong)) !important;
}
html body .ytc-chart-pos,
html body .ytc-number{ color: var(--gold-bright) !important; }
html body .ytc-chart-title{ color: var(--ink) !important; }
html body .ytc-chart-artist,
html body .ytc-channel{ color: var(--ink-muted) !important; }
html body .ytc-chart-meta,
html body .ytc-chart-date,
html body .ytc-views,
html body .ytc-meta{ color: var(--ink-faint) !important; }

/* Network chip */
html body .ytc-artist-chip,
html body .ytc-artist-chip--match{
  background: color-mix(in srgb, var(--gold-bright) 14%, var(--glass-bg-strong)) !important;
  border-color: color-mix(in srgb, var(--gold-bright) 40%, var(--glass-border-strong)) !important;
  color: var(--gold-bright) !important;
}
html body .ytc-artist-chip--unknown{
  background: var(--glass-bg-strong) !important;
  border-color: var(--glass-border) !important;
  color: var(--ink-muted) !important;
}

/* Detail panel */
html body .ytc-detail-row,
html body .ytc-detail-content,
html body .ytc-detail-header{
  background: var(--glass-bg) !important;
  border-color: var(--glass-border) !important;
  color: var(--ink) !important;
}

/* Action buttons (expand / share) */
html body .ytc-chart-expand,
html body .ytc-chart-share{
  background: var(--glass-bg-strong) !important;
  border-color: var(--glass-border) !important;
  color: var(--ink-muted) !important;
}
html body .ytc-chart-expand:hover,
html body .ytc-chart-share:hover{
  background: var(--glass-bg) !important;
  color: var(--ink) !important;
  border-color: color-mix(in srgb, var(--gold) 35%, var(--glass-border-strong)) !important;
}

/* Empty state */
html body .ytc-empty{
  background: var(--glass-bg) !important;
  border-color: var(--glass-border) !important;
  color: var(--ink-muted) !important;
}

/* === Light mode: ensure thumbnails / images keep contrast === */
[data-theme="light"] html body .tatarr-trend-thumb,
[data-theme="light"] html body .ytc-chart-thumb,
[data-theme="light"] html body .ytc-chart-thumb img{
  border-color: var(--glass-border-strong) !important;
}



/* ============================================================
 * TATARR Silver - Mobile/tablet (<=1024px):
 *   - HIDE doar link-urile (.nav-links)
 *   - PASTREAZA logo (.nav-brand) + butoanele (.nav-right)
 * 2026-05-13
 * ============================================================ */
@media (max-width: 1024px){
  html body header.nav .nav-inner .nav-links,
  html body header.nav .nav-links{
    display: none !important;
  }
  html body header.nav .nav-inner{
    grid-template-columns: auto auto !important;
    justify-content: space-between !important;
  }
  html body header.nav .nav-inner > .nav-brand{ grid-column: 1 !important; }
  html body header.nav .nav-inner > .nav-right{ grid-column: 2 !important; }
}

/* ============================================================
 * TATARR Silver - Mobile sticky nav with glass blur effect
 * 2026-05-13: bara ramane sus la scroll cu blur + transparent
 * ============================================================ */
@media (max-width: 1024px){
  html body header.nav#nav{
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
    background: color-mix(in srgb, var(--bg-0) 5%, transparent) !important;
    backdrop-filter: blur(2px) saturate(110%) !important;
    -webkit-backdrop-filter: blur(2px) saturate(110%) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--glass-border) 60%, transparent) !important;
    box-shadow: 0 8px 24px -12px rgba(0,0,0,.35) !important;
    transition: background .3s ease, backdrop-filter .3s ease !important;
  }
  html body header.nav#nav.scrolled{
    background: color-mix(in srgb, var(--bg-0) 5%, transparent) !important;
    backdrop-filter: blur(3px) saturate(115%) !important;
    -webkit-backdrop-filter: blur(3px) saturate(115%) !important;
    box-shadow: 0 12px 32px -10px rgba(0,0,0,.5) !important;
  }
  /* Make the logo + toggle stand out on scroll */
  html body header.nav#nav.scrolled .nav-brand,
  html body header.nav#nav.scrolled .theme-toggle,
  html body header.nav#nav.scrolled .nav-account-btn{
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.4)) !important;
  }
}

/* ============================================================
 * TATARR Silver - DESKTOP: bara la fel ca pe mobil (10% glass)
 * 2026-05-13
 * ============================================================ */
@media (min-width: 1025px){
  html body header.nav#nav,
  html body header.nav#nav.scrolled{
    background: color-mix(in srgb, var(--bg-0) 5%, transparent) !important;
    backdrop-filter: blur(2px) saturate(110%) !important;
    -webkit-backdrop-filter: blur(2px) saturate(110%) !important;
    border-bottom: 1px solid color-mix(in srgb, var(--glass-border) 60%, transparent) !important;
    box-shadow: 0 8px 24px -12px rgba(0,0,0,.35) !important;
  }
  html body header.nav#nav.scrolled{
    background: color-mix(in srgb, var(--bg-0) 5%, transparent) !important;
    backdrop-filter: blur(3px) saturate(115%) !important;
    -webkit-backdrop-filter: blur(3px) saturate(115%) !important;
  }
}

/* ============================================================
 * TATARR Silver - tatarr-glass mu-plugin variable override
 * 2026-05-13: forteaza --tatarr-glass-* sa fie identice cu --glass-*
 * ============================================================ */
html body,
html body[data-theme="dark"],
html body[data-theme="light"]{
  --tatarr-glass-bg: var(--glass-bg) !important;
  --tatarr-glass-bg-strong: var(--glass-bg-strong) !important;
  --tatarr-glass-border: var(--glass-border) !important;
  --tatarr-glass-border-strong: var(--glass-border-strong) !important;
}

/* ============================================================
 * TATARR Silver - Trending YouTube page Elementor section bg
 * 2026-05-13: scoate fundalul mov de Elementor pe .page-id-2159
 * ============================================================ */
body.page-id-2159 .elementor-element[data-settings*="background_background"],
body.page-id-2159 .elementor-section,
body.page-id-2159 .elementor-container,
body.page-id-2159 .e-con,
body.page-id-2159 .e-con-boxed,
body.page-id-2159 .e-con-full{
  background-image: none !important;
  background-color: transparent !important;
}
/* Make the Trending heading match theme */
body.page-id-2159 .elementor-widget-heading h1,
body.page-id-2159 .elementor-widget-heading h2,
body.page-id-2159 .elementor-widget-heading h3{
  color: var(--ink) !important;
  font-family: var(--font-display, Cormorant Garamond, serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}
body.page-id-2159 .elementor-widget-text-editor,
body.page-id-2159 .elementor-widget-text-editor p{
  color: var(--ink-muted) !important;
}

/* ============================================================
 * TATARR Silver - Hide Google reCAPTCHA badge
 * 2026-05-13: nu afiseaza badge-ul floating jos-dreapta
 * ============================================================ */
html body .grecaptcha-badge{
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: -1 !important;
}

/* ============================================================
 * TATARR Silver - Brand logo: ascunde alt-text daca imaginea
 * nu se incarca (previne textul "Ionut Tatar | Music Management"
 * sa apara langa logo pe unele browsere)
 * 2026-05-13
 * ============================================================ */
html body .nav-brand .brand-mark img{
  font-size: 0 !important;
  color: transparent !important;
  text-indent: -9999px !important;
  overflow: hidden !important;
}
html body .nav-brand .brand-mark{
  overflow: hidden !important;
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
}

/* ============================================================
 * TATARR Silver - Last video/release titles - light mode visible
 * 2026-05-13: titlul piesei YT/Spotify era #fff pe light mode = invizibil
 * ============================================================ */
html body .tatarr-card .tatarr-last-video,
html body .tatarr-card .tatarr-last-video-overlay,
html body .tatarr-card .tatarr-last-video-title,
html body .tatarr-card .tatarr-last-release,
html body .tatarr-card .tatarr-last-release-title,
html body .tatarr-card a.tatarr-last-video,
html body .tatarr-card a.tatarr-last-release{
  color: var(--ink) !important;
}
html body .tatarr-card .tatarr-last-video:hover,
html body .tatarr-card .tatarr-last-release:hover{
  color: var(--gold-bright) !important;
}
/* Pe overlay deasupra thumbnail-ului - text alb pe overlay dark (lizibil
   pe ambele teme pentru ca overlay-ul are gradient propriu) */
html body .tatarr-card .tatarr-last-video-overlay{
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.8) !important;
}

/* ============================================================
 * TATARR Silver - /trending-youtube/ Elementor cleanup
 * 2026-05-13: scoate spatiul gol sus si rama wrapper inutila
 * ============================================================ */
/* Reset padding/margin/border pe TOATE Elementor sections de pe pagina trending */
body.page-id-2159 .elementor-element,
body.page-id-2159 .elementor-section,
body.page-id-2159 .e-con,
body.page-id-2159 .e-con-boxed,
body.page-id-2159 .e-con-full,
body.page-id-2159 .e-parent,
body.page-id-2159 .e-child{
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  background-image: none !important;
  background-color: transparent !important;
}
/* Scoate padding-ul exagerat din containerul parinte (cel cu spatiul gol mare) */
body.page-id-2159 > .elementor,
body.page-id-2159 .elementor > .e-con,
body.page-id-2159 .elementor-49a1262e,
body.page-id-2159 .elementor-element.e-parent{
  padding-top: 24px !important;
  padding-bottom: 24px !important;
  margin: 0 auto !important;
  max-width: var(--maxw) !important;
}
/* Container intern (rama vinovata) — reset complet */
body.page-id-2159 .elementor-element.e-child,
body.page-id-2159 .elementor-f234dc,
body.page-id-2159 .elementor-739fca33,
body.page-id-2159 .elementor-60f6e804{
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}
/* Asigura ca butoanele si link-urile functioneaza (z-index si pointer-events) */
body.page-id-2159 .ytc-chart-row,
body.page-id-2159 .ytc-chart-row a,
body.page-id-2159 .ytc-chart-row button,
body.page-id-2159 .ytc-tablink,
body.page-id-2159 .ytc-chart-expand,
body.page-id-2159 .ytc-chart-share{
  position: relative !important;
  z-index: 5 !important;
  pointer-events: auto !important;
}
/* Curata orice culoare hardcodata Elementor */
body.page-id-2159 .elementor-widget-heading h1,
body.page-id-2159 .elementor-widget-heading h2,
body.page-id-2159 .elementor-widget-heading h3,
body.page-id-2159 .elementor-widget-heading h4,
body.page-id-2159 .elementor-widget-heading h5,
body.page-id-2159 .elementor-widget-heading h6{
  color: var(--ink) !important;
  font-family: var(--font-display, Cormorant Garamond, serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
}
body.page-id-2159 .elementor-widget-text-editor,
body.page-id-2159 .elementor-widget-text-editor p,
body.page-id-2159 .elementor-widget-text-editor div{
  color: var(--ink-muted) !important;
  background: transparent !important;
}

/* ============================================================
 * TATARR Silver - /trending-youtube/ aggressive cleanup v2
 * 2026-05-13: scoate min-height si forteaza width corect
 * ============================================================ */
body.page-id-2159 .elementor,
body.page-id-2159 .elementor *{
  min-height: 0 !important;
}
body.page-id-2159 .elementor-section,
body.page-id-2159 .elementor-section > .elementor-container,
body.page-id-2159 .e-con,
body.page-id-2159 .e-con-boxed,
body.page-id-2159 .e-con-full{
  width: 100% !important;
  max-width: var(--maxw) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--pad) !important;
  padding-right: var(--pad) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
  box-sizing: border-box !important;
}
/* Parent container - putin spatiu sus, fara viewport-height */
body.page-id-2159 > .elementor > section:first-child,
body.page-id-2159 > .elementor > div:first-child,
body.page-id-2159 .elementor > .elementor-element:first-child{
  padding-top: 16px !important;
  margin-top: 0 !important;
}
/* Containere copil - fara padding adaugat */
body.page-id-2159 .e-child{
  padding: 0 !important;
}
/* Pe mobil - reduce si mai mult */
@media (max-width: 600px){
  body.page-id-2159 .elementor-section,
  body.page-id-2159 .e-con{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* Trending: kill the 110px inline padding-top from page.php */
body.page-id-2159 main.page > section.block > .wrap,
body.page-id-2159 .wrap{
  padding-top: 24px !important;
}
@media (max-width: 600px){
  body.page-id-2159 main.page > section.block > .wrap,
  body.page-id-2159 .wrap{
    padding-top: 12px !important;
  }
}

/* Trending: kill section.block padding 72px (root cause of empty space) */
body.page-id-2159 main.page > section.block{
  padding: 24px 0 !important;
}
@media (max-width: 600px){
  body.page-id-2159 main.page > section.block{
    padding: 0 !important;
  }
  body.page-id-2159 main.page > section.block > .wrap{
    padding-top: 12px !important;
    padding-bottom: 12px !important;
  }
}

/* ============================================================
 * TATARR Silver - /trending-youtube/ FINAL aggressive cleanup
 * 2026-05-13
 * ============================================================ */

/* Outer container - kill background image + huge padding */
.elementor-2159 .elementor-element.elementor-element-49a1262e,
body.page-id-2159 .elementor-element-49a1262e{
  --padding-top: 16px !important;
  --padding-bottom: 16px !important;
  --padding-left: 0px !important;
  --padding-right: 0px !important;
  --margin-top: 0px !important;
  --margin-bottom: 0px !important;
  padding: 16px 0 !important;
  margin: 0 auto !important;
  background-image: none !important;
  background-color: transparent !important;
}
.elementor-2159 .elementor-element.elementor-element-49a1262e:not(.elementor-motion-effects-element-type-background),
.elementor-2159 .elementor-element.elementor-element-49a1262e > .elementor-motion-effects-container > .elementor-motion-effects-layer{
  background-image: none !important;
  background-color: transparent !important;
}
.elementor-2159 .elementor-element.elementor-element-49a1262e::before,
.elementor-2159 .elementor-element.elementor-element-49a1262e > .elementor-background-video-container::before{
  display: none !important;
}

/* Inner wrapper - kill the border + huge padding */
.elementor-2159 .elementor-element.elementor-element-f234dc,
body.page-id-2159 .elementor-element-f234dc{
  --border-style: none !important;
  --border-top-width: 0 !important;
  --border-right-width: 0 !important;
  --border-bottom-width: 0 !important;
  --border-left-width: 0 !important;
  --border-radius: 0 !important;
  --padding-top: 0 !important;
  --padding-bottom: 0 !important;
  --padding-left: 0 !important;
  --padding-right: 0 !important;
  --margin-top: 0 !important;
  --margin-bottom: 0 !important;
  border: 0 none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.elementor-2159 .elementor-element.elementor-element-f234dc.elementor-element.e-flex::before{
  display: none !important;
}

/* Inner sub-containers */
.elementor-2159 .elementor-element-739fca33,
.elementor-2159 .elementor-element-60f6e804{
  --padding-top: 0 !important;
  --padding-bottom: 0 !important;
  --padding-left: 0 !important;
  --padding-right: 0 !important;
  --margin-top: 0 !important;
  --margin-bottom: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
}

/* "TRENDING" heading - kill burgundy gradient + ugly font */
.elementor-2159 .elementor-element.elementor-element-1e5dda93 > .elementor-widget-container{
  background-color: transparent !important;
  background-image: none !important;
  padding: 0 !important;
  border-radius: 0 !important;
}
.elementor-2159 .elementor-element-1e5dda93 .elementor-heading-title,
.elementor-2159 .elementor-element-59b414b .elementor-heading-title{
  font-family: var(--font-display, 'Cormorant Garamond', serif) !important;
  font-style: italic !important;
  font-weight: 400 !important;
  font-size: clamp(28px, 5vw, 56px) !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  -webkit-text-stroke: 0 !important;
  stroke: none !important;
  color: var(--ink) !important;
}
.elementor-2159 .elementor-element-59b414b > .elementor-widget-container{
  padding: 0 !important;
  margin: 0 !important;
}

/* Text editor (descriere) */
.elementor-2159 .elementor-element-7293f4f3,
.elementor-2159 .elementor-element-7293f4f3 > .elementor-widget-container,
.elementor-2159 .elementor-element-7293f4f3 p{
  color: var(--ink-muted) !important;
  text-align: center !important;
  padding: 0 !important;
  margin: 0 0 24px !important;
}

/* Mobile: same aggressive resets */
@media (max-width: 767px){
  .elementor-2159 .elementor-element-49a1262e{
    --margin-top: 0 !important;
    --margin-bottom: 0 !important;
    --padding-top: 8px !important;
    --padding-bottom: 8px !important;
    --padding-left: 12px !important;
    --padding-right: 12px !important;
    margin: 0 !important;
    padding: 8px 12px !important;
  }
  .elementor-2159 .elementor-element-f234dc{
    --margin-top: 0 !important;
    --padding-top: 0 !important;
    --padding-bottom: 0 !important;
    --padding-left: 0 !important;
    --padding-right: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

/* Card rows */
body.page-id-2159 .ytc-chart-row{
  background: var(--glass-bg) !important;
  border-color: var(--glass-border) !important;
  backdrop-filter: blur(14px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
  position: relative !important;
}

/* CRITICAL: buttons must be clickable */
body.page-id-2159 .ytc-chart-row .ytc-chart-share,
body.page-id-2159 .ytc-chart-row .ytc-chart-expand,
body.page-id-2159 .ytc-chart-row a,
body.page-id-2159 .ytc-chart-row button{
  position: relative !important;
  z-index: 10 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}
/* Push decorative pseudo-elements behind */
body.page-id-2159 .ytc-chart-row::before,
body.page-id-2159 .ytc-chart-row::after{
  pointer-events: none !important;
  z-index: 0 !important;
}