/* KLYN · Preview CSS (equivalente ao que Nuvem Shop compilaria a partir de SCSS)
   Single-file standalone pra renderizar sem engine de template. */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,700;12..96,800&family=Archivo:wght@400;500;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --klyn-black:    #0A0A0A;
  --klyn-bone:     #EDEBE4;
  --klyn-white:    #FFFFFF;
  --klyn-cut:      #E10600;
  --klyn-chrome:   #C4C4C4;
  --klyn-chrome-30: rgba(196,196,196,0.30);
  --ease-klyn: cubic-bezier(0.2, 0.8, 0.2, 1);
  --header-h: 72px;
}

/* =============================================================================
   VARIANTES DE COR DE SEÇÃO · regra: branco e bone nunca adjacentes.
   Preto DEVE estar entre eles (seção ou .klyn-divider).
   ============================================================================= */
.section-white { background: var(--klyn-white); color: var(--klyn-black); }
.section-white .klyn-section-title__num,
.section-white .klyn-cena__sub,
.section-white .klyn-cena__card .tag,
.section-white .klyn-cena__card .meta,
.section-white .klyn-ugc-handle { color: rgba(10,10,10,0.5); }
.section-white .klyn-cena__card { border-color: rgba(10,10,10,0.15); }
.section-white .klyn-cena__card:hover { border-color: var(--klyn-cut); }
.section-white .klyn-cena__card .name { color: var(--klyn-black); }
.section-white .klyn-ugc { background: rgba(10,10,10,0.12); }
.section-white .klyn-ugc__item { background: var(--klyn-white); }
.section-white .klyn-queue__hd h3 { color: var(--klyn-black); }

.section-bone { background: var(--klyn-bone); color: var(--klyn-black); }
.section-bone .klyn-section-title__num,
.section-bone .klyn-ugc-handle { color: rgba(10,10,10,0.5); }
.section-bone .klyn-ugc { background: rgba(10,10,10,0.15); }
.section-bone .klyn-ugc__item { background: var(--klyn-bone); }

.klyn-divider {
  display: block;
  height: 64px;
  background: var(--klyn-black);
  border: 0;
  margin: 0;
  padding: 0;
}
@media (max-width: 767px) {
  .klyn-divider { height: 40px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--klyn-black);
  color: var(--klyn-bone);
  font-family: 'Archivo', 'Inter', system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  min-height: 100vh;
}
body.template-product { background: var(--klyn-bone); color: var(--klyn-black); }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color 120ms var(--ease-klyn); }
a:hover { color: var(--klyn-cut); }
button { font-family: inherit; cursor: pointer; background: none; border: none; color: inherit; padding: 0; }
input, textarea, select { font-family: inherit; color: inherit; }
::selection { background: var(--klyn-cut); color: var(--klyn-bone); }
:focus-visible { outline: 2px solid var(--klyn-cut); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* Tipografia */
.txt-display-xl { font: 800 clamp(3.5rem, 12vw, 11rem)/0.9 'Bricolage Grotesque', sans-serif; letter-spacing: -0.04em; }
.txt-display-l  { font: 700 clamp(2.25rem, 7vw, 5.5rem)/0.95 'Bricolage Grotesque', sans-serif; letter-spacing: -0.035em; }
.txt-display-m  { font: 700 clamp(1.5rem, 4vw, 3rem)/1 'Bricolage Grotesque', sans-serif; letter-spacing: -0.03em; }
.txt-body-l { font: 400 1.0625rem/1.5 'Archivo', sans-serif; }
.txt-body-m { font: 400 0.9375rem/1.55 'Archivo', sans-serif; }
.txt-mono-m { font: 400 0.8125rem/1.3 'JetBrains Mono', monospace; letter-spacing: 0.15em; text-transform: uppercase; }
.txt-mono-s { font: 400 0.6875rem/1.3 'JetBrains Mono', monospace; letter-spacing: 0.18em; text-transform: uppercase; }

/* Header · grid 3 colunas (LEFT logo · CENTER nav · RIGHT conta+carrinho) */
.klyn-header {
  position: sticky; top: 0; left: 0; right: 0; z-index: 100;
  height: 72px; min-height: 72px; max-height: 72px;
  padding-left: clamp(1rem, 3vw, 2.5rem);
  padding-right: 0;  /* carrinho vai flush na direita */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 2rem;
  background: var(--klyn-black); color: var(--klyn-bone);
  border-bottom: 1px solid var(--klyn-chrome-30);
  transition: height 200ms var(--ease-klyn), min-height 200ms var(--ease-klyn), max-height 200ms var(--ease-klyn);
  overflow: hidden;
  box-sizing: border-box;
}
body.template-product .klyn-header,
body.template-page .klyn-header { background: var(--klyn-bone); color: var(--klyn-black); border-bottom-color: rgba(10,10,10,0.15); }
.klyn-header.is-shrunk { height: 52px; min-height: 52px; max-height: 52px; }

.klyn-header .klyn-wordmark {
  grid-column: 1;
  justify-self: start;
  align-self: center;
  display: inline-flex; align-items: center;
  line-height: 0;
  text-decoration: none;
}
.klyn-header .klyn-wordmark svg {
  height: 20px !important; width: auto !important; max-height: 20px;
  display: block; fill: currentColor;
}

.klyn-nav-primary {
  grid-column: 2;
  justify-self: center;
  align-self: center;
  display: inline-flex; align-items: center; gap: 1.75rem;
  white-space: nowrap;
}

.klyn-nav-right {
  grid-column: 3;
  justify-self: end;
  align-self: stretch;
  display: inline-flex; align-items: center; gap: 1.75rem;
  white-space: nowrap;
}

.klyn-header .nav-link {
  font: 400 0.75rem/1 'JetBrains Mono', monospace;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: inherit; text-decoration: none;
  display: inline-flex; align-items: baseline; gap: 0.5rem;
  white-space: nowrap;
  transition: color 120ms var(--ease-klyn);
}
.klyn-header .nav-link:hover { color: var(--klyn-cut); }
.klyn-header .nav-link__sub {
  font-size: 0.625rem;
  color: var(--klyn-chrome);
  letter-spacing: 0.12em;
  font-weight: 400;
  transition: color 120ms var(--ease-klyn);
}
.klyn-header .nav-link:hover .nav-link__sub { color: var(--klyn-cut); }

/* Carrinho · bloco bone destacado · altura total do header */
.klyn-header .klyn-cart {
  align-self: stretch;
  display: inline-flex; align-items: center;
  padding: 0 clamp(1.75rem, 3vw, 2.5rem);
  background: var(--klyn-bone);
  color: var(--klyn-black);
  font: 500 0.8125rem/1 'JetBrains Mono', monospace;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  gap: 0.75rem;
  transition: background 120ms var(--ease-klyn), color 120ms var(--ease-klyn);
}
.klyn-header .klyn-cart:hover { background: var(--klyn-cut); color: var(--klyn-bone); }
/* Em páginas com header bone, o bloco do carrinho inverte pra preto (manter contraste) */
body.template-product .klyn-header .klyn-cart,
body.template-page .klyn-header .klyn-cart { background: var(--klyn-black); color: var(--klyn-bone); }
body.template-product .klyn-header .klyn-cart:hover,
body.template-page .klyn-header .klyn-cart:hover { background: var(--klyn-cut); color: var(--klyn-bone); }
.klyn-header .klyn-cart .count {
  display: inline-flex;
  min-width: 18px; height: 18px;
  align-items: center; justify-content: center;
  background: var(--klyn-cut);
  color: var(--klyn-bone);
  font-size: 10px;
  letter-spacing: 0;
  padding: 0 4px;
}
.klyn-header .klyn-cart .count[data-count="0"] { display: none; }

@media (max-width: 767px) {
  .klyn-header { grid-template-columns: auto auto; gap: 0; }
  .klyn-nav-primary { display: none; }
  .klyn-nav-right { gap: 1rem; }
  .klyn-header .nav-link__sub { display: none; }
}

/* Hero */
.klyn-hero {
  min-height: 92vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.5rem;
  padding: 2rem clamp(1rem, 3vw, 2.5rem);
  text-align: center;
  background: var(--klyn-black); color: var(--klyn-bone);
}
@media (max-width: 767px) {
  .klyn-hero {
    min-height: 50vh;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    gap: 1.25rem;
  }
}
.klyn-hero-wm-svg { width: auto; max-width: min(90vw, 1200px); height: clamp(5rem, 22vw, 18rem); fill: currentColor; margin: 0 auto; }

/* TV FORA DO AR · scan lines + rolling bar + noise + flash + static + red flash hover/touch */
.klyn-tv { cursor: pointer; }
.klyn-tv__scan {
  transform: translateY(0);
  animation: klyn-tv-scan 0.35s linear infinite;
  will-change: transform;
}
.klyn-tv__static {
  animation: klyn-tv-static 0.12s steps(2, end) infinite;
  mix-blend-mode: difference;
}
.klyn-tv__rollbar {
  transform: translateY(-20px);
  animation: klyn-tv-rollbar 1.6s linear infinite;
  will-change: transform;
}
.klyn-tv__noise {
  mix-blend-mode: screen;
  animation: klyn-tv-noise 0.18s steps(6, end) infinite;
}
.klyn-tv__flash {
  animation: klyn-tv-flash 3.5s steps(1, end) infinite;
}
.klyn-tv__red { opacity: 0; }
.klyn-tv.is-touched .klyn-tv__red { animation: klyn-tv-red 0.7s steps(1, end); }

@keyframes klyn-tv-scan {
  from { transform: translateY(0); }
  to   { transform: translateY(6px); }
}
@keyframes klyn-tv-rollbar {
  0%   { transform: translateY(-20px); }
  100% { transform: translateY(170px); }
}
@keyframes klyn-tv-noise {
  0%, 100% { opacity: 0.45; }
  16%      { opacity: 0.7; }
  33%      { opacity: 0.2; }
  50%      { opacity: 0.55; }
  66%      { opacity: 0.28; }
  83%      { opacity: 0.6; }
}
@keyframes klyn-tv-static {
  0%   { opacity: 0.35; }
  50%  { opacity: 0.0; }
  100% { opacity: 0.5; }
}
@keyframes klyn-tv-flash {
  0%, 78%, 100% { opacity: 0; }
  80%  { opacity: 0.95; }
  80.4% { opacity: 0; }
  86%  { opacity: 0.6; }
  86.3% { opacity: 0; }
  92%  { opacity: 0.9; }
  92.4% { opacity: 0; }
  97%  { opacity: 0.7; }
  97.3% { opacity: 0; }
}
/* Hover/touch · 4 piscadas vermelhas em 700ms */
@keyframes klyn-tv-red {
  0%   { opacity: 0; }
  5%   { opacity: 0.92; }
  15%  { opacity: 0; }
  25%  { opacity: 0.92; }
  35%  { opacity: 0; }
  45%  { opacity: 0.92; }
  55%  { opacity: 0; }
  65%  { opacity: 0.92; }
  75%  { opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .klyn-tv__scan,
  .klyn-tv__rollbar,
  .klyn-tv__noise,
  .klyn-tv__flash,
  .klyn-tv__static,
  .klyn-tv.is-touched .klyn-tv__red { animation: none; }
  .klyn-tv__rollbar { transform: translateY(50px); }
  .klyn-tv__noise   { opacity: 0.2; }
  .klyn-tv__static  { opacity: 0.15; }
}
.klyn-hero__dropline { font: 400 0.8125rem/1.3 'JetBrains Mono', monospace; letter-spacing: 0.18em; text-transform: uppercase; color: var(--klyn-chrome); margin: 0; }
.klyn-hero__cta { font: 400 0.9375rem/1 'JetBrains Mono', monospace; letter-spacing: 0.18em; text-transform: uppercase; color: var(--klyn-bone); border-bottom: 1px solid currentColor; padding-bottom: 4px; display: inline-block; }
.klyn-hero__cta:hover { color: var(--klyn-cut); }

/* Countdown */
.klyn-countdown { display: inline-flex; gap: 2rem; align-items: flex-end; }
.klyn-countdown .unit { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; }
.klyn-countdown b { font: 700 clamp(1.75rem, 5vw, 3rem)/1 'Bricolage Grotesque', sans-serif; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.klyn-countdown em { font-style: normal; font: 400 0.6875rem/1.3 'JetBrains Mono', monospace; letter-spacing: 0.18em; text-transform: uppercase; color: var(--klyn-chrome); }
.klyn-countdown.is-imminent b, .klyn-countdown.is-imminent em { color: var(--klyn-cut); animation: klyn-pulse 1s ease-in-out infinite; }
@keyframes klyn-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

/* Glitch hover */
.klyn-glitch:hover { animation: klyn-glitch 120ms steps(1, end); }
@keyframes klyn-glitch {
  0% { transform: translate(0,0) skewX(0deg); text-shadow: none; }
  40% { transform: translate(-1px,0) skewX(0.5deg); text-shadow: 1px 0 var(--klyn-cut), -1px 0 var(--klyn-chrome); }
  80% { transform: translate(1px,0) skewX(-0.5deg); text-shadow: -1px 0 var(--klyn-cut), 1px 0 var(--klyn-chrome); }
  100% { transform: translate(0,0) skewX(0deg); text-shadow: none; }
}

/* Marquee */
.klyn-marquee {
  width: 100%; overflow: hidden;
  background: var(--klyn-bone); color: var(--klyn-black);
  padding: 1rem 0;
  border-top: 1px solid var(--klyn-chrome-30);
  border-bottom: 1px solid var(--klyn-chrome-30);
}
.klyn-marquee__track {
  display: flex; gap: 3rem; width: max-content;
  animation: klyn-marquee 30s linear infinite;
  font: 400 0.8125rem/1 'JetBrains Mono', monospace;
  letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap;
}
.klyn-marquee:hover .klyn-marquee__track { animation-play-state: paused; }
@keyframes klyn-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Section */
.klyn-section { padding: 6.5rem 0; }
.klyn-section-title { display: flex; flex-direction: column; gap: 0.75rem; margin: 0 0 4rem; padding: 0 clamp(1rem, 3vw, 2.5rem); }
.klyn-section-title__num { font: 400 0.8125rem/1 'JetBrains Mono', monospace; letter-spacing: 0.18em; text-transform: uppercase; color: var(--klyn-chrome); position: relative; width: fit-content; padding-bottom: 0.5rem; }
.klyn-section-title__num::after { content: ''; position: absolute; left: 0; bottom: 0; width: 32px; height: 1px; background: var(--klyn-cut); }
.klyn-section-title__h { font: 700 clamp(1.5rem, 4vw, 3rem)/1 'Bricolage Grotesque', sans-serif; letter-spacing: -0.03em; margin: 0; }

/* Drop Grid */
.klyn-drop-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--klyn-chrome-30); border-top: 1px solid var(--klyn-chrome-30); border-bottom: 1px solid var(--klyn-chrome-30); }
@media (min-width: 1024px) { .klyn-drop-grid { grid-template-columns: repeat(4, 1fr); } }

.klyn-card { position: relative; display: block; background: var(--klyn-black); color: var(--klyn-bone); overflow: hidden; }
.klyn-card__media { position: relative; aspect-ratio: 4/5; overflow: hidden; background: var(--klyn-chrome-30); }
.klyn-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 240ms var(--ease-klyn); }
.klyn-card__media .img--back { opacity: 0; }
.klyn-card:hover .klyn-card__media .img--back { opacity: 1; }
.klyn-card:hover .klyn-card__media .img--front { opacity: 0; }
.klyn-card__flag { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 2; font: 400 0.6875rem/1.3 'JetBrains Mono', monospace; letter-spacing: 0.18em; text-transform: uppercase; color: var(--klyn-chrome); }
.klyn-card__flag--cut { color: var(--klyn-cut); }
.klyn-card__flag--out { color: var(--klyn-chrome); text-decoration: line-through; }
.klyn-card__index { position: absolute; top: 0.75rem; left: 0.75rem; z-index: 2; font: 400 0.6875rem/1.3 'JetBrains Mono', monospace; letter-spacing: 0.18em; color: var(--klyn-chrome); }
.klyn-card__body { padding: 1rem 1rem 1.5rem; display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.klyn-card__name { font: 500 1.0625rem/1.4 'Archivo', sans-serif; letter-spacing: -0.01em; margin: 0; }
.klyn-card__sub { font: 400 0.6875rem/1.3 'JetBrains Mono', monospace; letter-spacing: 0.18em; text-transform: uppercase; color: var(--klyn-chrome); margin: 2px 0 0; }
.klyn-card__price { font: 400 0.8125rem/1 'JetBrains Mono', monospace; letter-spacing: 0.1em; color: var(--klyn-bone); }

/* Manifesto */
.klyn-manifesto { background: var(--klyn-bone); color: var(--klyn-black); padding: 10rem clamp(1rem, 3vw, 2.5rem); }
.klyn-manifesto__hd { font: 700 clamp(2.25rem, 7vw, 5.5rem)/0.95 'Bricolage Grotesque', sans-serif; letter-spacing: -0.035em; max-width: 18ch; margin: 0 0 6.5rem; }
.klyn-manifesto__grid { display: grid; grid-template-columns: 1fr; gap: 4rem; max-width: 1100px; }
@media (min-width: 768px) { .klyn-manifesto__grid { grid-template-columns: 1fr 1fr; gap: 6.5rem; } }
.klyn-manifesto__col h4 { font: 400 0.6875rem/1.3 'JetBrains Mono', monospace; letter-spacing: 0.18em; text-transform: uppercase; margin: 0 0 1rem; color: var(--klyn-black); }
.klyn-manifesto__col p { font: 400 1.0625rem/1.5 'Archivo', sans-serif; margin: 0; max-width: 45ch; }

/* Cena */
.klyn-cena { padding: 6.5rem 0; }
.klyn-cena__scroll { display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 clamp(1rem, 3vw, 2.5rem) 1rem; scrollbar-width: none; }
.klyn-cena__scroll::-webkit-scrollbar { display: none; }
.klyn-cena__card { flex: 0 0 280px; scroll-snap-align: start; border: 1px solid var(--klyn-chrome-30); padding: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; transition: border-color 240ms var(--ease-klyn); }
.klyn-cena__card:hover { border-color: var(--klyn-cut); }
.klyn-cena__card .tag { font: 400 0.6875rem/1.3 'JetBrains Mono', monospace; letter-spacing: 0.18em; text-transform: uppercase; color: var(--klyn-chrome); }
.klyn-cena__card .name { font: 700 1.75rem/1 'Bricolage Grotesque', sans-serif; letter-spacing: -0.03em; margin: 0; }
.klyn-cena__card .meta { font: 400 0.8125rem/1.3 'JetBrains Mono', monospace; letter-spacing: 0.15em; text-transform: uppercase; color: var(--klyn-chrome); margin: 0; }
.klyn-cena__sub { font: 400 0.8125rem/1.3 'JetBrains Mono', monospace; letter-spacing: 0.15em; text-transform: uppercase; color: var(--klyn-chrome); padding: 1rem clamp(1rem, 3vw, 2.5rem) 0; display: block; }

/* UGC */
.klyn-ugc { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--klyn-chrome-30); }
@media (min-width: 768px) { .klyn-ugc { grid-template-columns: repeat(6, 1fr); } }
.klyn-ugc__item { aspect-ratio: 1/1; background: var(--klyn-black); overflow: hidden; position: relative; }
.klyn-ugc__item img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter 240ms var(--ease-klyn); }
.klyn-ugc__item:hover img { filter: grayscale(0); }
.klyn-ugc-handle { text-align: center; padding: 1.5rem 0 0; font: 400 0.8125rem/1 'JetBrains Mono', monospace; letter-spacing: 0.15em; text-transform: uppercase; color: var(--klyn-chrome); }
.klyn-ugc-handle a:hover { color: var(--klyn-cut); }

/* Queue */
.klyn-queue { background: var(--klyn-bone); color: var(--klyn-black); padding: 6.5rem clamp(1rem, 3vw, 2.5rem); display: grid; grid-template-columns: 1fr; gap: 2.5rem; max-width: 1100px; margin: 0 auto; }
@media (min-width: 768px) { .klyn-queue { grid-template-columns: 1fr 1fr; align-items: end; } }
.klyn-queue__hd h3 { font: 700 clamp(1.5rem, 4vw, 3rem)/1 'Bricolage Grotesque', sans-serif; letter-spacing: -0.03em; margin: 0 0 0.75rem; }
.klyn-queue__hd p { font: 400 1.0625rem/1.5 'Archivo', sans-serif; margin: 0; }
.klyn-queue__form { display: flex; gap: 0; border-bottom: 1px solid var(--klyn-black); }
.klyn-queue__form input[type="email"] { flex: 1; background: transparent; border: 0; outline: 0; padding: 0.75rem 0; font: 400 1rem 'Archivo', sans-serif; color: var(--klyn-black); }
.klyn-queue__form input::placeholder { color: var(--klyn-black); opacity: 0.5; }
.klyn-queue__form button { font: 400 0.8125rem/1 'JetBrains Mono', monospace; letter-spacing: 0.15em; text-transform: uppercase; padding: 0.75rem 1rem; color: var(--klyn-black); }
.klyn-queue__form button:hover { color: var(--klyn-cut); }

/* Footer */
.klyn-footer { background: var(--klyn-black); color: var(--klyn-chrome); padding: 6.5rem clamp(1rem, 3vw, 2.5rem) 1.5rem; }
.klyn-footer__cols { display: grid; grid-template-columns: 1fr; gap: 4rem; max-width: 1760px; margin: 0 auto 4rem; }
@media (min-width: 768px) { .klyn-footer__cols { grid-template-columns: repeat(3, 1fr); } }
.klyn-footer__col h5 { font: 400 0.8125rem/1.3 'JetBrains Mono', monospace; letter-spacing: 0.15em; text-transform: uppercase; color: var(--klyn-chrome); margin: 0 0 1rem; }
.klyn-footer__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.klyn-footer__col a, .klyn-footer__col span { font: 400 0.9375rem/1.55 'Archivo', sans-serif; color: var(--klyn-bone); }
.klyn-footer__col a:hover { color: var(--klyn-cut); }
.klyn-footer__bottom { border-top: 1px solid var(--klyn-chrome-30); padding-top: 1.5rem; display: flex; flex-direction: column-reverse; gap: 1rem; align-items: center; text-align: center; font: 400 0.6875rem/1.3 'JetBrains Mono', monospace; letter-spacing: 0.18em; text-transform: uppercase; color: var(--klyn-chrome); }
@media (min-width: 768px) { .klyn-footer__bottom { flex-direction: row; justify-content: space-between; text-align: left; } }

/* PDP */
.klyn-pdp { background: var(--klyn-bone); color: var(--klyn-black); }
.klyn-pdp__grid { display: grid; grid-template-columns: 1fr; max-width: 1760px; margin: 0 auto; }
@media (min-width: 1024px) { .klyn-pdp__grid { grid-template-columns: 60% 40%; } }
.klyn-pdp__media { display: flex; flex-direction: column; }
.klyn-pdp__media-stack { display: flex; flex-direction: column; }
.klyn-pdp__media .klyn-pdp__media-img,
.klyn-pdp__media img:not(.klyn-pdp__media-img) { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
.klyn-pdp__media-tabs { display: none; }

@media (max-width: 767px) {
  .klyn-pdp__media-tabs {
    display: flex;
    gap: 1px;
    background: var(--klyn-chrome-30);
    border-top: 1px solid var(--klyn-chrome-30);
    border-bottom: 1px solid var(--klyn-chrome-30);
  }
  .klyn-pdp__media-tab {
    flex: 1;
    padding: 1rem 0;
    background: var(--klyn-bone);
    color: var(--klyn-black);
    font: 500 0.6875rem/1 'JetBrains Mono', monospace;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    border: 0;
    cursor: pointer;
    transition: background 120ms var(--ease-klyn), color 120ms var(--ease-klyn);
  }
  .klyn-pdp__media-tab.is-active {
    background: var(--klyn-black);
    color: var(--klyn-bone);
  }
  .klyn-pdp__media-stack { position: relative; }
  .klyn-pdp__media .klyn-pdp__media-img { display: none; }
  .klyn-pdp__media .klyn-pdp__media-img.is-active { display: block; }

  /* Aside compacto no mobile · linhas bem próximas */
  .klyn-pdp__aside {
    padding: 1rem clamp(1rem, 3vw, 2.5rem) 1.5rem;
    border-left: 0;
    border-top: 0;
  }
  .klyn-pdp__breadcrumb { margin: 0 0 0.5rem; line-height: 1.3; }
  .klyn-pdp__name       { margin: 0; line-height: 1; }
  .klyn-pdp__sub        { margin: 0.125rem 0 0.5rem; line-height: 1.2; }
  .klyn-pdp__stock      { margin: 0 0 0.25rem; line-height: 1.2; }
  .klyn-pdp__price      { margin: 0 0 0.875rem; line-height: 1; }
  .klyn-pdp__sizes      { margin: 0 0 0.875rem; gap: 0.375rem; }
  .klyn-pdp__cta        { margin: 0 0 0.75rem; height: 56px; }
  .klyn-pdp__notify     { margin: 0 0 0.75rem; }
  .klyn-pdp__aside .txt-body-l { margin: 0; }
  .klyn-pdp__aside h2.txt-mono-m { margin-top: 1rem !important; }
  .klyn-spec-sheet { padding: 0.5rem 0; margin-top: 0.5rem; row-gap: 0.25rem; }
}
.klyn-pdp__aside { padding: 4rem clamp(1rem, 3vw, 2.5rem); border-left: 1px solid var(--klyn-chrome-30); }
@media (min-width: 1024px) { .klyn-pdp__aside { position: sticky; top: 96px; align-self: start; height: fit-content; padding: 6.5rem 4rem; } }
.klyn-pdp__breadcrumb { font: 400 0.6875rem/1.3 'JetBrains Mono', monospace; letter-spacing: 0.18em; text-transform: uppercase; color: var(--klyn-cut); margin: 0 0 2.5rem; }
.klyn-pdp__breadcrumb a { color: var(--klyn-cut); }
.klyn-pdp__breadcrumb a:hover { color: var(--klyn-black); }
.klyn-pdp__name { font: 700 clamp(1.5rem, 4vw, 3rem)/1 'Bricolage Grotesque', sans-serif; letter-spacing: -0.03em; margin: 0 0 0.5rem; color: var(--klyn-black); }
.klyn-pdp__sub { font: 400 0.8125rem/1.3 'JetBrains Mono', monospace; letter-spacing: 0.15em; text-transform: uppercase; color: var(--klyn-cut); margin: 0 0 2.5rem; }
.klyn-pdp__stock { font: 400 0.6875rem/1.3 'JetBrains Mono', monospace; letter-spacing: 0.18em; text-transform: uppercase; color: var(--klyn-cut); margin: 0 0 1rem; animation: klyn-pulse 1.5s ease-in-out infinite; }
.klyn-pdp__price { font: 500 1.25rem/1 'JetBrains Mono', monospace; letter-spacing: 0.05em; margin: 0 0 2.5rem; }
.klyn-pdp__sizes { display: flex; gap: 0.5rem; margin: 0 0 2.5rem; flex-wrap: wrap; }
.klyn-pdp__size-btn { width: 48px; height: 48px; border: 1px solid var(--klyn-black); background: transparent; color: var(--klyn-black); font: 400 0.8125rem/1 'JetBrains Mono', monospace; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; transition: background 120ms var(--ease-klyn), color 120ms var(--ease-klyn); display: inline-flex; align-items: center; justify-content: center; }
.klyn-pdp__size-btn:hover { background: rgba(10,10,10,0.1); }
.klyn-pdp__size-btn.is-active { background: var(--klyn-black); color: var(--klyn-bone); }
.klyn-pdp__cta { display: block; width: 100%; height: 64px; background: var(--klyn-black); color: var(--klyn-bone); font: 400 0.875rem/1 'JetBrains Mono', monospace; letter-spacing: 0.18em; text-transform: uppercase; transition: background 120ms var(--ease-klyn); margin: 0 0 2.5rem; }
.klyn-pdp__cta:hover { background: var(--klyn-cut); }
.klyn-spec-sheet { display: grid; grid-template-columns: auto 1fr; gap: 0.5rem 1.5rem; padding: 1.5rem 0; border-top: 1px solid var(--klyn-chrome-30); margin-top: 2.5rem; }
.klyn-spec-sheet dt { font: 400 0.6875rem/1.3 'JetBrains Mono', monospace; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(10,10,10,0.65); }
.klyn-spec-sheet dd { font: 400 0.75rem/1.3 'JetBrains Mono', monospace; letter-spacing: 0.08em; color: var(--klyn-black); margin: 0; }
.klyn-pdp__also { padding: 6.5rem clamp(1rem, 3vw, 2.5rem); border-top: 1px solid var(--klyn-chrome-30); background: var(--klyn-bone); }
.klyn-pdp__also h3 { font: 700 clamp(1.5rem, 4vw, 3rem)/1 'Bricolage Grotesque', sans-serif; letter-spacing: -0.03em; margin: 0 0 2.5rem; color: var(--klyn-black); }
.klyn-pdp__also-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--klyn-chrome-30); }
@media (max-width: 767px) { .klyn-pdp__also-grid { grid-template-columns: repeat(2, 1fr); } }
.klyn-pdp__also .klyn-card { background: var(--klyn-bone); color: var(--klyn-black); }
.klyn-pdp__also .klyn-card__name, .klyn-pdp__also .klyn-card__price { color: var(--klyn-black); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* =============================================================================
   FATIA 2 · PLP · Cart · Account · 404 · Sobre
   ============================================================================= */

/* Empty State */
.klyn-empty { min-height: 80vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 1.5rem; padding: 6.5rem clamp(1rem, 3vw, 2.5rem); color: var(--klyn-bone); position: relative; background: var(--klyn-black); }
.klyn-empty__y { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0.06; pointer-events: none; z-index: 0; }
.klyn-empty__y svg { width: 240px; height: 240px; fill: var(--klyn-bone); }
.klyn-empty__num { font: 400 0.8125rem/1 'JetBrains Mono', monospace; letter-spacing: 0.18em; text-transform: uppercase; color: var(--klyn-cut); margin: 0; position: relative; z-index: 1; }
.klyn-empty__msg { font: 700 clamp(1.5rem, 4vw, 3rem)/1.2 'Bricolage Grotesque', sans-serif; letter-spacing: -0.03em; margin: 0; max-width: 20ch; position: relative; z-index: 1; color: var(--klyn-bone); }
.klyn-empty__cta { font: 400 0.9375rem/1 'JetBrains Mono', monospace; letter-spacing: 0.18em; text-transform: uppercase; color: var(--klyn-bone); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 4px; position: relative; z-index: 1; display: inline-block; }
.klyn-empty__cta:hover { color: var(--klyn-cut); }

/* PLP */
.klyn-plp { background: var(--klyn-black); color: var(--klyn-bone); padding-bottom: 6.5rem; }
.klyn-plp__header { padding: 6.5rem clamp(1rem, 3vw, 2.5rem) 4rem; border-bottom: 1px solid var(--klyn-chrome-30); }
.klyn-plp__meta { display: flex; flex-direction: column; gap: 0.75rem; max-width: 1100px; }
.klyn-plp__meta-num { font: 400 0.8125rem/1 'JetBrains Mono', monospace; letter-spacing: 0.18em; text-transform: uppercase; color: var(--klyn-chrome); padding-bottom: 0.5rem; position: relative; width: fit-content; }
.klyn-plp__meta-num::after { content: ''; position: absolute; left: 0; bottom: 0; width: 32px; height: 1px; background: var(--klyn-cut); }
.klyn-plp__title { font: 700 clamp(2.25rem, 7vw, 5.5rem)/0.95 'Bricolage Grotesque', sans-serif; letter-spacing: -0.035em; margin: 0; }
.klyn-plp__stats { font: 400 0.8125rem/1.4 'JetBrains Mono', monospace; letter-spacing: 0.15em; text-transform: uppercase; color: var(--klyn-chrome); display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 1rem 0 0; }
.klyn-plp__status { color: var(--klyn-cut); }
.klyn-plp__filters { display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 2.5rem clamp(1rem, 3vw, 2.5rem) 1.5rem; border-bottom: 1px solid var(--klyn-chrome-30); }
.klyn-chip { display: inline-flex; align-items: center; padding: 0.75rem 1rem; border: 1px solid var(--klyn-chrome-30); font: 400 0.75rem/1 'JetBrains Mono', monospace; letter-spacing: 0.15em; text-transform: uppercase; color: var(--klyn-bone); text-decoration: none; transition: all 120ms var(--ease-klyn); }
.klyn-chip:hover, .klyn-chip.is-active { background: var(--klyn-bone); color: var(--klyn-black); border-color: var(--klyn-bone); }
.klyn-drop-grid--plp { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1024px) { .klyn-drop-grid--plp { grid-template-columns: repeat(3, 1fr); } }
.klyn-plp__pagination { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; padding: 4rem clamp(1rem, 3vw, 2.5rem) 1.5rem; }
.klyn-plp__pag-num { font: 400 0.8125rem/1 'JetBrains Mono', monospace; letter-spacing: 0.1em; color: var(--klyn-chrome); font-variant-numeric: tabular-nums; }
.klyn-plp__pag-arrow { font: 400 1.25rem/1 'JetBrains Mono', monospace; color: var(--klyn-bone); padding: 0.5rem 0.75rem; border: 1px solid transparent; text-decoration: none; transition: all 120ms var(--ease-klyn); }
.klyn-plp__pag-arrow:hover { color: var(--klyn-cut); border-color: var(--klyn-cut); }

/* Cart */
.klyn-cart-page { background: var(--klyn-black); color: var(--klyn-bone); padding: 6.5rem clamp(1rem, 3vw, 2.5rem); max-width: 1100px; margin: 0 auto; }
.klyn-cart-page__header { display: flex; flex-direction: column; gap: 0.75rem; margin: 0 0 4rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--klyn-chrome-30); }
.klyn-cart-page__title { font: 700 clamp(1.5rem, 4vw, 3rem)/1 'Bricolage Grotesque', sans-serif; letter-spacing: -0.03em; margin: 0; }
.klyn-cart-page__alert { font: 400 0.8125rem/1.3 'JetBrains Mono', monospace; letter-spacing: 0.1em; text-transform: uppercase; color: var(--klyn-cut); padding: 1rem; border: 1px solid var(--klyn-cut); margin: 0 0 1.5rem; }
.klyn-cart-page__list { list-style: none; padding: 0; margin: 0 0 2.5rem; }
.klyn-cart-page__item { display: grid; grid-template-columns: 64px 1fr auto; gap: 1rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--klyn-chrome-30); min-height: 80px; }
.klyn-cart-page__item-img { display: block; width: 64px; height: 80px; overflow: hidden; }
.klyn-cart-page__item-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.2); transition: filter 120ms var(--ease-klyn); }
.klyn-cart-page__item-img:hover img { filter: grayscale(0); }
.klyn-cart-page__item-name { font: 500 1.0625rem/1.4 'Archivo', sans-serif; color: var(--klyn-bone); text-decoration: none; }
.klyn-cart-page__item-name:hover { color: var(--klyn-cut); }
.klyn-cart-page__item-meta { font: 400 0.6875rem/1.3 'JetBrains Mono', monospace; letter-spacing: 0.15em; text-transform: uppercase; color: var(--klyn-chrome); margin: 0.25rem 0 0; display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.klyn-cart-page__item-qty { display: inline-flex; align-items: center; gap: 0.5rem; }
.klyn-cart-page__qty-input { width: 48px; background: transparent; border: 1px solid var(--klyn-chrome-30); color: var(--klyn-bone); padding: 4px 8px; font: 400 0.8125rem 'JetBrains Mono', monospace; text-align: center; }
.klyn-cart-page__qty-input:focus { border-color: var(--klyn-cut); outline: 0; }
.klyn-cart-page__item-price { display: flex; flex-direction: column; align-items: flex-end; gap: 0.25rem; font: 400 0.9375rem/1 'JetBrains Mono', monospace; letter-spacing: 0.08em; }
.klyn-cart-page__remove { font: 400 1.25rem/1 'JetBrains Mono', monospace; color: var(--klyn-chrome); padding: 0.125rem 0.5rem; background: none; border: 0; cursor: pointer; }
.klyn-cart-page__remove:hover { color: var(--klyn-cut); }
.klyn-cart-page__upsell { padding: 1rem 0; margin: 0 0 1.5rem; border-bottom: 1px solid var(--klyn-chrome-30); }
.klyn-cart-page__upsell-line { font: 400 0.8125rem/1.4 'JetBrains Mono', monospace; letter-spacing: 0.1em; color: var(--klyn-chrome); display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.klyn-cart-page__upsell-line strong { color: var(--klyn-bone); font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; }
.klyn-cart-page__upsell-cta { font: 400 0.75rem/1 'JetBrains Mono', monospace; letter-spacing: 0.18em; text-transform: uppercase; color: var(--klyn-bone); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; margin-left: auto; }
.klyn-cart-page__upsell-cta:hover { color: var(--klyn-cut); }
.klyn-cart-page__totals { margin: 0 0 2.5rem; display: flex; justify-content: flex-end; }
.klyn-cart-page__totals dl { display: grid; grid-template-columns: auto auto; column-gap: 2.5rem; row-gap: 0.75rem; margin: 0; text-align: right; min-width: 260px; }
.klyn-cart-page__totals dt { font: 400 0.6875rem/1.3 'JetBrains Mono', monospace; letter-spacing: 0.18em; text-transform: uppercase; color: var(--klyn-chrome); text-align: left; }
.klyn-cart-page__totals dd { font: 400 0.8125rem/1.3 'JetBrains Mono', monospace; letter-spacing: 0.08em; color: var(--klyn-bone); margin: 0; }
.klyn-cart-page__totals-grand { padding-top: 0.75rem; border-top: 1px solid var(--klyn-chrome-30); font-size: 1rem !important; }
.klyn-cart-page__cta { display: block; width: 100%; height: 64px; background: var(--klyn-cut); color: var(--klyn-bone); font: 400 0.875rem/1 'JetBrains Mono', monospace; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; transition: filter 120ms var(--ease-klyn); margin: 0 0 1rem; border: 0; }
.klyn-cart-page__cta:hover { filter: brightness(0.92); }
.klyn-cart-page__continue { display: block; text-align: center; font: 400 0.75rem/1 'JetBrains Mono', monospace; letter-spacing: 0.18em; text-transform: uppercase; color: var(--klyn-chrome); text-decoration: none; padding: 1rem 0; }
.klyn-cart-page__continue:hover { color: var(--klyn-cut); }

/* Account */
.klyn-account { background: var(--klyn-black); color: var(--klyn-bone); min-height: 70vh; padding: 6.5rem clamp(1rem, 3vw, 2.5rem); display: flex; align-items: center; justify-content: center; }
.klyn-account__wrap { width: 100%; max-width: 420px; }
.klyn-account__header { margin: 0 0 4rem; display: flex; flex-direction: column; gap: 0.75rem; }
.klyn-account__title { font: 700 clamp(1.5rem, 4vw, 3rem)/1 'Bricolage Grotesque', sans-serif; letter-spacing: -0.03em; margin: 0; }
.klyn-account__form { display: flex; flex-direction: column; gap: 1.5rem; }
.klyn-account__field { display: flex; flex-direction: column; gap: 0.5rem; }
.klyn-account__field span { font: 400 0.6875rem/1.3 'JetBrains Mono', monospace; letter-spacing: 0.18em; text-transform: uppercase; color: var(--klyn-chrome); }
.klyn-account__input { background: transparent; border: 0; border-bottom: 1px solid var(--klyn-chrome-30); color: var(--klyn-bone); padding: 0.75rem 0; font: 400 1rem 'Archivo', sans-serif; }
.klyn-account__input:focus { outline: 0; border-bottom-color: var(--klyn-cut); }
.klyn-account__cta { display: block; width: 100%; height: 56px; background: var(--klyn-bone); color: var(--klyn-black); border: 0; font: 400 0.8125rem/1 'JetBrains Mono', monospace; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; transition: all 120ms var(--ease-klyn); margin: 1rem 0 0; }
.klyn-account__cta:hover { background: var(--klyn-cut); color: var(--klyn-bone); }
.klyn-account__link { font: 400 0.75rem/1 'JetBrains Mono', monospace; letter-spacing: 0.15em; text-transform: uppercase; color: var(--klyn-chrome); text-decoration: none; align-self: flex-start; }
.klyn-account__link:hover { color: var(--klyn-cut); }
.klyn-account__link-strong { color: var(--klyn-bone); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; font-weight: 500; }
.klyn-account__link-strong:hover { color: var(--klyn-cut); }
.klyn-account__footer { font: 400 0.75rem/1.4 'JetBrains Mono', monospace; letter-spacing: 0.15em; text-transform: uppercase; color: var(--klyn-chrome); margin: 2.5rem 0 0; text-align: center; }

/* Sobre */
.klyn-page { background: var(--klyn-bone); color: var(--klyn-black); padding: 6.5rem clamp(1rem, 3vw, 2.5rem); min-height: 60vh; }
.klyn-sobre { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 6.5rem; }
.klyn-sobre__hero { padding: 2.5rem 0 6.5rem; border-bottom: 1px solid rgba(10,10,10,0.15); }
.klyn-sobre__kicker { font: 400 0.6875rem/1 'JetBrains Mono', monospace; letter-spacing: 0.18em; text-transform: uppercase; color: var(--klyn-black); margin: 0 0 2.5rem; }
.klyn-sobre__hd { font: 700 clamp(2.25rem, 7vw, 5.5rem)/0.95 'Bricolage Grotesque', sans-serif; letter-spacing: -0.035em; margin: 0; max-width: 18ch; color: var(--klyn-black); }
.klyn-sobre__body { display: grid; grid-template-columns: 1fr; gap: 6.5rem; }
@media (min-width: 768px) { .klyn-sobre__body { grid-template-columns: 1fr 1fr; gap: 6.5rem 4rem; } }
.klyn-sobre__block { padding: 1.5rem 0; border-top: 1px solid rgba(10,10,10,0.15); position: relative; }
.klyn-sobre__num { font: 400 0.6875rem/1.3 'JetBrains Mono', monospace; letter-spacing: 0.18em; color: var(--klyn-cut); display: block; margin-bottom: 0.75rem; }
.klyn-sobre__block h2 { font: 700 clamp(1.5rem, 3vw, 2.25rem)/1 'Bricolage Grotesque', sans-serif; letter-spacing: -0.03em; margin: 0 0 1rem; color: var(--klyn-black); }
.klyn-sobre__block p { font: 400 1.0625rem/1.55 'Archivo', sans-serif; margin: 0; max-width: 52ch; color: var(--klyn-black); }