/* Spectra DMA — SellAuth Glitch demo inspired theme override */
@import url('https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600;700;800;900&family=Inter:wght@500;600;700;800&display=swap');

:root {
  --gl-bg: #17181d;
  --gl-bg-deep: #111217;
  --gl-card: #202129;
  --gl-card-2: #1c1d24;
  --gl-line: rgba(255,255,255,.055);
  --gl-border: rgba(255,255,255,.075);
  --gl-blue: #6571ff;
  --gl-blue-dark: #3f48c8;
  --gl-white: #ffffff;
  --gl-muted: #96979e;
  --gl-dim: #74757c;
  --gl-shadow: rgba(0,0,0,.32);
}

html { background: var(--gl-bg); }

body {
  font-family: 'Geist Mono', 'Chakra Petch', 'Play', monospace !important;
  color: var(--gl-white) !important;
  background-color: var(--gl-bg) !important;
  background-image:
    linear-gradient(90deg, var(--gl-line) 1px, transparent 1px),
    linear-gradient(0deg, var(--gl-line) 1px, transparent 1px),
    radial-gradient(circle at 50% 0%, rgba(101,113,255,.08), transparent 36rem) !important;
  background-size: 320px 320px, 320px 320px, 100% 100% !important;
  letter-spacing: -.02em;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .16;
  background-image: radial-gradient(circle, #fff 0 1.4px, transparent 1.8px);
  background-size: 92px 92px;
  animation: gl-star-drift 34s linear infinite;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .05;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.9) 0 1px, transparent 1px 4px);
}

@keyframes gl-star-drift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-92px, 92px, 0); }
}

#app { position: relative; z-index: 1; }
#particles-js {
  position: fixed !important;
  inset: 0 !important;
  z-index: 0 !important;
  pointer-events: none;
  opacity: .55;
  filter: grayscale(1) brightness(1.55);
}
#particles-js canvas { opacity: .52; }

/* overall layout: demo has a wide, centered page with lots of vertical space */
.max-w-\[85rem\] {
  max-width: 96rem !important;
  padding-top: 0 !important;
}

.components > .component { position: relative; }
.components > .component:not(:first-child) { margin-top: 4.8rem; }

/* announcement */
#app > div:first-child {
  background: var(--gl-blue) !important;
  color: #fff !important;
  border: 0 !important;
  min-height: 34px;
  font-size: 13px !important;
  font-weight: 800 !important;
  text-transform: capitalize;
  letter-spacing: -.03em;
}

/* navbar: flat demo style */
#app .max-w-\[85rem\] > div > div:first-child {
  margin: 0 -2rem !important;
  padding: 1rem 2rem !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
  background: rgba(17,18,23,.78) !important;
  backdrop-filter: blur(10px);
  box-shadow: none !important;
}

#app .max-w-\[85rem\] > div > div:first-child a,
#app .max-w-\[85rem\] > div > div:first-child button {
  color: rgba(255,255,255,.58) !important;
  font-size: .86rem !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: -.055em;
}

#app .max-w-\[85rem\] > div > div:first-child a:hover,
#app .max-w-\[85rem\] > div > div:first-child a[aria-current='page'] {
  color: var(--gl-blue) !important;
}

#app .max-w-\[85rem\] > div > div:first-child img {
  border-radius: 0 !important;
}

/* SellAuth-demo-like brand treatment without changing the actual name */
#app .max-w-\[85rem\] > div > div:first-child img + * {
  color: #fff !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: -.07em;
  text-shadow: none !important;
}

/* hero */
section[data-component-id='hero'] .py-24 {
  min-height: calc(100vh - 132px) !important;
  padding-top: 8rem !important;
  padding-bottom: 8rem !important;
}

section[data-component-id='hero'] .container { max-width: 64rem !important; }
section[data-component-id='hero'] .flex.flex-col { gap: 1.35rem !important; }

section[data-component-id='hero'] h1 {
  max-width: 850px;
  margin-inline: auto;
  color: #fff !important;
  font-size: clamp(3.2rem, 5.2vw, 6.2rem) !important;
  line-height: 1.08 !important;
  font-weight: 950 !important;
  text-transform: uppercase;
  letter-spacing: -.085em;
  text-shadow: 0 6px 0 rgba(0,0,0,.18);
}

section[data-component-id='hero'] h1::before {
  content: 'NEW PRODUCTS AVAILABLE!';
  display: block;
  margin-bottom: 1.45rem;
  color: #c7c8ce;
  font-size: .95rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

.glitch-word,
h1 span,
.component h1 span,
.text-accent-500,
.text-accent-600,
.text-accent-400 {
  display: inline-block;
  color: #15161b !important;
  background: var(--gl-blue) !important;
  -webkit-text-fill-color: #15161b !important;
  padding: .02em .12em .05em;
  text-shadow: none !important;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

section[data-component-id='hero'] p {
  max-width: 780px;
  margin-inline: auto;
  color: var(--gl-muted) !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  letter-spacing: -.055em;
}

/* search */
section[data-component-id='hero'] [class*='bg-card'],
.component [class*='focus-within'] {
  max-width: 640px;
  margin-inline: auto;
  height: 58px;
  background: var(--gl-card) !important;
  color: var(--gl-muted) !important;
  border: 1px solid rgba(255,255,255,.045) !important;
  box-shadow: 0 8px 0 rgba(0,0,0,.12) !important;
}

input,
textarea,
select,
.choices__inner {
  background: transparent !important;
  border: 0 !important;
  color: #d6d7dc !important;
  font-weight: 700 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
::placeholder { color: #a2a3aa !important; opacity: 1; }

/* buttons: angular blue cut-corner rectangles */
a[class*='bg-accent'], button[class*='bg-accent'], .bg-accent-500, .bg-accent-600,
a[class*='border-accent'], button[class*='border-accent'] {
  position: relative;
  min-height: 48px;
  padding-inline: 1.65rem !important;
  color: #fff !important;
  background: var(--gl-blue) !important;
  border: 2px solid var(--gl-blue-dark) !important;
  border-radius: 0 !important;
  box-shadow: 0 8px 0 rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.13) !important;
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 13px 100%, 0 calc(100% - 13px));
  font-weight: 950 !important;
  font-size: .95rem !important;
  text-transform: uppercase;
  letter-spacing: -.055em;
}

a[class*='border-accent']:not([class*='bg-accent']) {
  background: var(--gl-card) !important;
  border-color: rgba(255,255,255,.055) !important;
}

a[class*='bg-accent']:hover,
a[class*='border-accent']:hover,
button:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

/* section headings */
.component:not(:first-of-type) h1,
.component:not(:first-of-type) h2 {
  color: #fff !important;
  font-size: clamp(2.2rem, 3.3vw, 4rem) !important;
  line-height: 1.05 !important;
  font-weight: 950 !important;
  text-transform: uppercase;
  letter-spacing: -.085em;
  text-shadow: 0 5px 0 rgba(0,0,0,.18);
}

.component:not(:first-of-type) h1::before {
  display: block;
  margin-bottom: .75rem;
  color: #c7c8ce;
  font-size: .9rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: -.055em;
  text-transform: uppercase;
}

#products h1::before { content: 'NEW PRODUCTS IN STOCK!'; }
section[data-component-id='stats'] h1::before { content: 'SPECTRA DMA STATS'; }
section[data-component-id*='feedback'] h1::before { content: 'CUSTOMER REVIEWS'; }

.component hr { display: none !important; }

/* cards — flat grey blocks with bottom-left cut */
.bg-card,
.bg-card\/75,
.bg-card\/50,
.bg-background,
section .grid > div,
section .flex.flex-wrap > div > div,
section .flex.flex-wrap > div,
.product-card,
footer {
  background: var(--gl-card) !important;
  border: 1px solid rgba(255,255,255,.055) !important;
  border-radius: 0 !important;
  box-shadow: 0 8px 0 rgba(0,0,0,.10) !important;
}

section .grid > div,
section .flex.flex-wrap > div > div,
section .flex.flex-wrap > div,
.product-card {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 13px), calc(100% - 13px) 100%, 13px 100%, 0 calc(100% - 13px));
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}

section .grid > div:hover,
section .flex.flex-wrap > div:hover,
.product-card:hover {
  transform: translateY(-4px);
  border-color: rgba(101,113,255,.45) !important;
}

/* Features are first cards under hero in the demo */
section[data-component-id='features'] .py-6,
section[data-component-id='features'] .lg\:py-8 {
  padding-top: 0 !important;
}

section[data-component-id='features'] .flex.flex-wrap { justify-content: center !important; }
section[data-component-id='features'] .flex.flex-wrap > div {
  width: calc((100% - 3rem) / 4) !important;
  min-width: 230px;
}

section[data-component-id='features'] .text-center {
  min-height: 210px;
  text-align: left !important;
  padding: 2rem !important;
}

section[data-component-id='features'] i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  margin-bottom: 1.25rem !important;
  background: rgba(255,255,255,.035);
  color: var(--gl-blue) !important;
  font-size: 1.25rem !important;
}

h4,
h3,
.product-card h3,
section .font-semibold,
section .font-bold {
  color: #fff !important;
  font-weight: 950 !important;
  text-transform: uppercase;
  letter-spacing: -.07em;
}

p,
.text-t-primary\/80,
.text-t-primary\/75,
.text-t-primary\/70,
.text-t-primary\/60,
.text-t-primary\/50 {
  color: var(--gl-muted) !important;
  font-weight: 700 !important;
}

/* Products: match demo with 4 wide flat cards on desktop */
#products .py-6 { padding-top: 2.5rem !important; }
#products .flex.flex-wrap { justify-content: center !important; gap: 1.55rem !important; }
#products .flex.flex-wrap > div {
  width: calc((100% - 4.65rem) / 4) !important;
  min-width: 260px;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  clip-path: none !important;
}

#products img {
  width: 100%;
  object-fit: cover;
  filter: saturate(.9) contrast(1.03);
}

#products .flex.flex-wrap > div > * {
  background: var(--gl-card) !important;
}

/* price/rating accents */
.text-accent-500:not(span),
.text-accent-600:not(span),
.fa-star,
[class*='fa-star'] {
  color: var(--gl-blue) !important;
  -webkit-text-fill-color: var(--gl-blue) !important;
  background: transparent !important;
  padding: 0 !important;
  text-shadow: none !important;
}

/* Stats: turn default counters into card blocks */
section[data-component-id='stats'] .grid > div {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  text-align: left !important;
  padding: 2rem !important;
  border-bottom: 0 !important;
}

section[data-component-id='stats'] .grid > div p:first-child {
  min-width: 70px;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: transparent !important;
  padding: 0 !important;
  font-size: 1.45rem !important;
  line-height: 1 !important;
}

section[data-component-id='stats'] .grid > div p:last-child {
  color: #fff !important;
  text-transform: none !important;
  font-size: .95rem !important;
}

/* Reviews */
section[data-component-id*='feedback'] .grid > div {
  text-align: left !important;
}

/* cart/currency/login boxes in nav */
.currency-selector .choices__inner,
#app .max-w-\[85rem\] > div > div:first-child button,
#app .max-w-\[85rem\] > div > div:first-child a[href*='cart'] {
  background: var(--gl-card) !important;
  border: 1px solid rgba(255,255,255,.055) !important;
  box-shadow: 0 6px 0 rgba(0,0,0,.13) !important;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%);
}

/* Footer */
footer {
  margin-top: 7rem !important;
  padding: 2rem !important;
  clip-path: polygon(0 0, calc(100% - 13px) 0, 100% 13px, 100% 100%, 0 100%);
}

@media (max-width: 1100px) {
  #products .flex.flex-wrap > div { width: calc((100% - 1.55rem) / 2) !important; }
  section[data-component-id='features'] .flex.flex-wrap > div { width: calc((100% - 1rem) / 2) !important; }
}

@media (max-width: 720px) {
  body { background-size: 160px 160px, 160px 160px, 100% 100% !important; }
  #app .max-w-\[85rem\] > div > div:first-child { margin: 0 !important; padding: 1rem !important; }
  section[data-component-id='hero'] .py-24 {
    min-height: 78vh !important;
    padding-top: 4.5rem !important;
    padding-bottom: 4.5rem !important;
  }
  section[data-component-id='hero'] h1 { font-size: clamp(2.5rem, 12vw, 4rem) !important; }
  .component:not(:first-of-type) h1 { font-size: clamp(2rem, 10vw, 3rem) !important; }
  #products .flex.flex-wrap > div,
  section[data-component-id='features'] .flex.flex-wrap > div { width: 100% !important; min-width: 0; }
  .components > .component:not(:first-child) { margin-top: 3.5rem; }
}

/* --- Polish pass: cleaner Glitch UI, only bottom-right cuts, fixed nav/hero buttons --- */

:root {
  --gl-cut: 14px;
  --gl-soft-border: rgba(255,255,255,.075);
}

/* Only bottom-right cut everywhere, no bottom-left/top-right cuts */
section .grid > div,
section .flex.flex-wrap > div > div,
.product-card,
.bg-card,
.bg-card\/75,
.bg-card\/50,
.bg-background,
footer,
a[class*='bg-accent'],
button[class*='bg-accent'],
a[class*='border-accent'],
button[class*='border-accent'],
.currency-selector .choices__inner {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--gl-cut)), calc(100% - var(--gl-cut)) 100%, 0 100%) !important;
}

/* Do not over-clip wrappers/empty product wrappers */
#products .flex.flex-wrap > div {
  clip-path: none !important;
}

/* Navbar button fixes: currency, cart, login should be square/clean and not clipped weirdly */
nav .currency-selector .choices__inner,
nav button,
nav a[href*='/cart'] {
  min-width: 48px !important;
  width: 48px !important;
  height: 48px !important;
  min-height: 48px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  color: #fff !important;
  background: #1f2028 !important;
  border: 1px solid rgba(255,255,255,.075) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02), 0 6px 0 rgba(0,0,0,.12) !important;
}

nav a[href*='/cart'] {
  color: var(--gl-blue) !important;
  border-color: rgba(101,113,255,.65) !important;
}

nav a[href*='/cart'] i,
nav a[href*='/cart'] svg,
nav button i,
nav button svg {
  position: static !important;
  transform: none !important;
  margin: 0 !important;
  line-height: 1 !important;
}

nav .currency-selector {
  width: 80px !important;
}

nav .currency-selector .choices__inner {
  width: 80px !important;
}

nav .currency-selector .choices__list--single,
nav .currency-selector .choices__item {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  width: 100% !important;
}

/* Login is text, not icon-sized */
nav button[class*='px-4'],
nav a[href*='customer'] {
  width: auto !important;
  min-width: 92px !important;
  padding: 0 1.15rem !important;
}

/* Hero CTA row: balanced primary + secondary buttons */
section[data-component-id='hero'] a[class*='bg-accent'],
section[data-component-id='hero'] a[class*='border-accent'] {
  min-width: 172px !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 1.45rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .65rem !important;
  white-space: nowrap !important;
  line-height: 1 !important;
  overflow: visible !important;
}

section[data-component-id='hero'] a[class*='border-accent']:not([class*='bg-accent']) {
  color: #dfe2ff !important;
  background: #202129 !important;
  border: 1px solid rgba(101,113,255,.8) !important;
  box-shadow: inset 0 0 0 1px rgba(101,113,255,.12), 0 6px 0 rgba(0,0,0,.14) !important;
}

section[data-component-id='hero'] a[class*='border-accent']:not([class*='bg-accent']):hover {
  color: #fff !important;
  background: #272936 !important;
}

/* Feature cards: more breathing room, less cramped, single bottom-right cut */
section[data-component-id='features'] .text-center {
  min-height: 230px;
  padding: 2.35rem !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

section[data-component-id='features'] i {
  margin-bottom: 2.4rem !important;
}

section[data-component-id='features'] h4 {
  margin-bottom: .95rem !important;
}

section[data-component-id='features'] p {
  line-height: 1.55 !important;
}

/* Product cards: cleaner media + details layout */
#products .flex.flex-wrap > div > a,
#products a.group {
  overflow: hidden !important;
  background: #202129 !important;
  border: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: 0 10px 0 rgba(0,0,0,.12) !important;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--gl-cut)), calc(100% - var(--gl-cut)) 100%, 0 100%) !important;
}

#products a.group > div {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

#products a.group .relative.overflow-hidden {
  margin: 0 !important;
  padding: .8rem !important;
  background: #191a20 !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
}

#products a.group img {
  display: block;
  background: #111217;
}

#products a.group .text-left {
  padding: 1rem 1rem 1.1rem !important;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}

/* Product price row: remove harsh blue slabs, use readable price chip + muted slash price */
#products a.group .text-left > .flex:first-child {
  align-items: center !important;
  gap: .75rem !important;
  margin-bottom: 0 !important;
  overflow: visible !important;
}

#products a.group .text-left > .flex:first-child p:first-child {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: .4rem !important;
  min-width: 0 !important;
  overflow: visible !important;
  white-space: normal !important;
  line-height: 1.25 !important;
}

#products a.group .text-left > .flex:first-child p:first-child > .text-accent-500 {
  display: inline-flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: .25rem !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: rgba(101,113,255,.14) !important;
  border: 1px solid rgba(101,113,255,.5) !important;
  padding: .35rem .48rem !important;
  font-weight: 950 !important;
  font-size: .92rem !important;
  letter-spacing: -.055em !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035) !important;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%) !important;
}

#products a.group .line-through {
  color: rgba(255,255,255,.46) !important;
  -webkit-text-fill-color: rgba(255,255,255,.46) !important;
  background: transparent !important;
  padding: 0 !important;
  font-size: .78rem !important;
  text-decoration-thickness: 2px !important;
  text-decoration-color: rgba(255,255,255,.55) !important;
}

#products a.group .text-left > .flex:first-child p:last-child {
  flex-shrink: 0 !important;
  color: rgba(255,255,255,.62) !important;
  font-size: .9rem !important;
  text-align: right !important;
  white-space: nowrap !important;
}

/* View details: full-width, cleaner CTA, better hover */
#products a.group .text-left > div:last-child {
  width: 100% !important;
  min-height: 44px !important;
  padding: 0 .9rem !important;
  justify-content: space-between !important;
  color: #dfe2ff !important;
  background: #171820 !important;
  border: 1px solid rgba(101,113,255,.7) !important;
  box-shadow: inset 0 0 0 1px rgba(101,113,255,.08) !important;
  text-transform: uppercase !important;
  font-size: .88rem !important;
  letter-spacing: -.04em !important;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%) !important;
}

#products a.group:hover .text-left > div:last-child {
  color: #fff !important;
  background: var(--gl-blue) !important;
  border-color: var(--gl-blue) !important;
}

#products a.group .text-left > div:last-child svg {
  transition: transform .18s ease;
}

#products a.group:hover .text-left > div:last-child svg {
  transform: translateX(3px);
}

/* Small screens: avoid product price/stock collision */
@media (max-width: 720px) {
  #products a.group .text-left > .flex:first-child {
    align-items: flex-start !important;
    flex-direction: column !important;
  }
  #products a.group .text-left > .flex:first-child p:last-child {
    text-align: left !important;
  }
}

/* --- Fix desktop nav: keep mobile-only cart/menu hidden, style only desktop controls --- */
@media (min-width: 1024px) {
  nav .lg\:hidden,
  nav a.lg\:hidden,
  nav button.lg\:hidden {
    display: none !important;
  }

  nav .hidden.lg\:inline-flex,
  nav a.hidden.lg\:inline-flex {
    display: inline-flex !important;
  }

  nav .hidden.lg\:block {
    display: block !important;
  }
}

/* Make only the real desktop cart square; don't affect mobile toggle/cart */
@media (min-width: 1024px) {
  nav a.hidden.lg\:inline-flex[href*='/cart'] {
    min-width: 48px !important;
    width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    color: var(--gl-blue) !important;
    background: #1f2028 !important;
    border: 1px solid rgba(101,113,255,.65) !important;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%) !important;
  }
}

/* Product CTA arrow alignment polish */
#products a.group .text-left > div:last-child {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .55rem !important;
  text-align: center !important;
}

#products a.group .text-left > div:last-child svg {
  flex: 0 0 auto !important;
  margin-left: .15rem !important;
  position: static !important;
}

/* Keep price and stock tidy on wider cards */
#products a.group .text-left > .flex:first-child p:first-child {
  flex: 1 1 auto !important;
}

#products a.group .text-left > .flex:first-child p:last-child {
  margin-left: auto !important;
}

/* --- Border polish: draw the missing diagonal outline on bottom-right cuts --- */
section[data-component-id='hero'] a[class*='border-accent'],
#products a.group .text-left > div:last-child,
nav a.hidden.lg\:inline-flex[href*='/cart'],
nav .currency-selector .choices__inner,
nav button,
nav a[href*='customer'],
section[data-component-id='features'] .text-center {
  position: relative !important;
}

section[data-component-id='hero'] a[class*='border-accent']::after,
#products a.group .text-left > div:last-child::after,
nav a.hidden.lg\:inline-flex[href*='/cart']::after,
nav .currency-selector .choices__inner::after,
nav button::after,
nav a[href*='customer']::after,
section[data-component-id='features'] .text-center::after {
  content: "" !important;
  position: absolute !important;
  right: 0 !important;
  bottom: 0 !important;
  width: var(--gl-cut) !important;
  height: var(--gl-cut) !important;
  pointer-events: none !important;
  z-index: 3 !important;
  background: linear-gradient(135deg,
    transparent calc(50% - 1px),
    rgba(101,113,255,.78) calc(50% - 1px),
    rgba(101,113,255,.78) calc(50% + 1px),
    transparent calc(50% + 1px)
  ) !important;
}

/* Softer diagonal color for feature cards, matching their subtle border */
section[data-component-id='features'] .text-center::after {
  background: linear-gradient(135deg,
    transparent calc(50% - 1px),
    rgba(255,255,255,.09) calc(50% - 1px),
    rgba(255,255,255,.09) calc(50% + 1px),
    transparent calc(50% + 1px)
  ) !important;
}

/* Primary filled CTA needs its cut edge too, but in the same filled-blue outline */
section[data-component-id='hero'] a[class*='bg-accent']::after {
  background: linear-gradient(135deg,
    transparent calc(50% - 1px),
    rgba(210,215,255,.75) calc(50% - 1px),
    rgba(210,215,255,.75) calc(50% + 1px),
    transparent calc(50% + 1px)
  ) !important;
}

/* Make feature section slimmer, while keeping only the bottom-right cut */
section[data-component-id='features'] .text-center {
  min-height: 178px !important;
  padding: 1.55rem 1.75rem !important;
  justify-content: flex-start !important;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--gl-cut)), calc(100% - var(--gl-cut)) 100%, 0 100%) !important;
  border: 1px solid rgba(255,255,255,.075) !important;
  box-shadow: none !important;
}

section[data-component-id='features'] i {
  margin-bottom: 1.35rem !important;
  font-size: 1.15rem !important;
}

section[data-component-id='features'] h4 {
  margin-bottom: .65rem !important;
  font-size: .98rem !important;
}

section[data-component-id='features'] p {
  font-size: .88rem !important;
  line-height: 1.45 !important;
}

/* Prevent pseudo-elements from making nav controls look open/clipped on mobile */
@media (max-width: 1023px) {
  nav .lg\:hidden::after {
    display: none !important;
  }
}

/* --- Revert diagonal cut-border patch: cleaner open-cut look, no mismatched pseudo lines --- */
section[data-component-id='hero'] a[class*='border-accent']::after,
section[data-component-id='hero'] a[class*='bg-accent']::after,
#products a.group .text-left > div:last-child::after,
nav a.hidden.lg\:inline-flex[href*='/cart']::after,
nav .currency-selector .choices__inner::after,
nav button::after,
nav a[href*='customer']::after,
section[data-component-id='features'] .text-center::after {
  content: none !important;
  display: none !important;
  background: none !important;
}

/* Keep only bottom-right cuts, without adding fake diagonal borders */
section[data-component-id='hero'] a[class*='border-accent'],
section[data-component-id='hero'] a[class*='bg-accent'],
#products a.group .text-left > div:last-child,
nav a.hidden.lg\:inline-flex[href*='/cart'],
nav .currency-selector .choices__inner,
nav button,
nav a[href*='customer'],
section[data-component-id='features'] .text-center {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--gl-cut)), calc(100% - var(--gl-cut)) 100%, 0 100%) !important;
}

/* Keep feature cards slim as requested */
section[data-component-id='features'] .text-center {
  min-height: 178px !important;
  padding: 1.55rem 1.75rem !important;
}

/* --- Product page fixes: quantity +/- controls and cart badge/state --- */

/* Quantity stepper: compact, visible minus/plus, no broken clipped blue blocks */
form div:has(> input[name='quantity']) {
  width: 160px !important;
  max-width: 100% !important;
  display: grid !important;
  grid-template-columns: 42px 76px 42px !important;
  align-items: center !important;
  overflow: visible !important;
  border: 1px solid rgba(101,113,255,.45) !important;
  background: #171820 !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.025) !important;
  clip-path: none !important;
}

form div:has(> input[name='quantity']) > button {
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #f4f5ff !important;
  -webkit-text-fill-color: #f4f5ff !important;
  background: #222431 !important;
  border: 0 !important;
  box-shadow: none !important;
  clip-path: none !important;
  opacity: 1 !important;
  position: relative !important;
  font-family: 'Geist Mono', ui-monospace, monospace !important;
  font-weight: 950 !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

form div:has(> input[name='quantity']) > button:first-child::before {
  content: '−' !important;
  font-size: 1.35rem !important;
  line-height: 1 !important;
}

form div:has(> input[name='quantity']) > button:last-child::before {
  content: '+' !important;
  font-size: 1.25rem !important;
  line-height: 1 !important;
}

form div:has(> input[name='quantity']) > button svg {
  display: none !important;
}

form div:has(> input[name='quantity']) > button:disabled {
  color: rgba(255,255,255,.38) !important;
  -webkit-text-fill-color: rgba(255,255,255,.38) !important;
  background: #1d1f29 !important;
  opacity: 1 !important;
}

form div:has(> input[name='quantity']) > button:not(:disabled):hover {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: var(--gl-blue) !important;
}

form input[name='quantity'] {
  width: 76px !important;
  height: 42px !important;
  min-height: 42px !important;
  padding: 0 !important;
  text-align: center !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  background: #191a22 !important;
  border-left: 1px solid rgba(255,255,255,.06) !important;
  border-right: 1px solid rgba(255,255,255,.06) !important;
  font-weight: 950 !important;
  font-size: .95rem !important;
  outline: none !important;
  clip-path: none !important;
  appearance: textfield !important;
  -moz-appearance: textfield !important;
}

form input[name='quantity']::-webkit-outer-spin-button,
form input[name='quantity']::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
  margin: 0 !important;
}

/* Keep product-page CTAs clean and stop global clipped-button rules from breaking form controls */
form button[type='button'],
form button[type='submit'] {
  position: relative !important;
}

/* Navbar cart badge: after adding to cart, don't clip/hide the count bubble */
nav a.hidden.lg\:inline-flex[href*='/cart'],
nav a[href*='/cart'] {
  overflow: visible !important;
}

nav a[href*='/cart'] span.absolute,
nav a.hidden.lg\:inline-flex[href*='/cart'] span.absolute {
  z-index: 20 !important;
  right: -0.45rem !important;
  top: -0.45rem !important;
  width: 1.15rem !important;
  height: 1.15rem !important;
  min-width: 1.15rem !important;
  min-height: 1.15rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  background: var(--gl-blue) !important;
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  border-radius: 999px !important;
  clip-path: none !important;
  font-size: .62rem !important;
  line-height: 1 !important;
}

nav a[href*='/cart'] span.absolute span,
nav a.hidden.lg\:inline-flex[href*='/cart'] span.absolute span {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

/* Add-to-cart success state should stay same size and not jump/bug visually */
form button[x-on\:click='addToCart'],
form button[x-on\:click='addToCart'] span {
  white-space: nowrap !important;
}

/* --- Letter spacing pass: slightly wider character spacing for readability --- */
body {
  letter-spacing: .015em !important;
}

#app .max-w-\[85rem\] > div > div:first-child a,
#app .max-w-\[85rem\] > div > div:first-child button,
#app .max-w-\[85rem\] > div > div:first-child img + *,
section[data-component-id='hero'] h1,
section[data-component-id='hero'] h1::before,
section[data-component-id='hero'] p,
.component:not(:first-of-type) h1,
.component:not(:first-of-type) h2,
.component:not(:first-of-type) h1::before,
h4,
h3,
.product-card h3,
section .font-semibold,
section .font-bold,
#products a.group .text-left > div:last-child,
#products a.group .text-left > .flex:first-child p:first-child > .text-accent-500,
a[class*='bg-accent'],
button[class*='bg-accent'],
a[class*='border-accent'],
button[class*='border-accent'] {
  letter-spacing: .015em !important;
}

/* Large display titles can take a touch more tracking without losing the glitch feel. */
section[data-component-id='hero'] h1,
.component:not(:first-of-type) h1,
.component:not(:first-of-type) h2 {
  letter-spacing: .02em !important;
}