/* SC · Tema PokéNav para Tebex · pokenav.css · GENERADO por construir-css.cjs: edita tokens.css, componentes.css o tienda.css */
/* =====================================================================
   Marca PokéNav · tokens.css
   Fuente única de colores, letras, espacios y esquinas pixeladas de la red Servidor Cobblemon.
   La usan la tienda Tebex (tebex-tema) y, en el futuro, servidorcobblemon.es.
   ===================================================================== */
:root {
  /* color */
  --pk-red: #B22839;
  --pk-red-dark: #6E1B2C;
  --pk-red-light: #D2404F;
  --pk-cream: #F6F0DE;
  --pk-paper: #FFFCF2;
  --pk-ink: #16233E;
  --pk-muted: #415875;
  --pk-blue: #466D94;
  --pk-blue-deep: #1F5FB8;
  --pk-blue-deeper: #17488C;
  --pk-tab: #A8CEEE;
  --pk-tab-hover: #C5E3F6;
  --pk-gold: #E7BF57;
  --pk-gold-hover: #F3D584;
  --pk-gold-dark: #9C7424;
  --pk-offer: #2F6B2F;
  --pk-offer-bg: #DDEFD6;
  --pk-disabled: #D8D5C9;
  --pk-night: #142238;

  /* type */
  --pk-font-pixel: "Silkscreen", "Courier New", monospace;
  --pk-font-body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --pk-fs-h1: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  --pk-fs-h1-page: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  --pk-fs-h2: clamp(1.5rem, 1.25rem + 1vw, 2.25rem);
  --pk-fs-h3: 1.375rem;
  --pk-fs-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --pk-fs-small: 0.875rem;
  --pk-fs-price: clamp(1.5rem, 1.35rem + 0.5vw, 1.75rem);

  /* space (4 px grid) */
  --pk-1: 4px; --pk-2: 8px; --pk-3: 12px; --pk-4: 16px; --pk-6: 24px; --pk-8: 32px; --pk-12: 48px; --pk-16: 64px;

  /* pixel corners: 3 steps of 4 px */
  --pk-step: 4px;
  --pk-corner-12: polygon(
    12px 0, calc(100% - 12px) 0, calc(100% - 12px) 4px, calc(100% - 8px) 4px, calc(100% - 8px) 8px,
    calc(100% - 4px) 8px, calc(100% - 4px) 12px, 100% 12px, 100% calc(100% - 12px), calc(100% - 4px) calc(100% - 12px),
    calc(100% - 4px) calc(100% - 8px), calc(100% - 8px) calc(100% - 8px), calc(100% - 8px) calc(100% - 4px),
    calc(100% - 12px) calc(100% - 4px), calc(100% - 12px) 100%, 12px 100%, 12px calc(100% - 4px), 8px calc(100% - 4px),
    8px calc(100% - 8px), 4px calc(100% - 8px), 4px calc(100% - 12px), 0 calc(100% - 12px), 0 12px, 4px 12px, 4px 8px,
    8px 8px, 8px 4px, 12px 4px);
  --pk-corner-8: polygon(
    8px 0, calc(100% - 8px) 0, calc(100% - 8px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, 100% 8px,
    100% calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 8px) calc(100% - 4px),
    calc(100% - 8px) 100%, 8px 100%, 8px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 0 calc(100% - 8px),
    0 8px, 4px 8px, 4px 4px, 8px 4px);
  --pk-corner-4: polygon(
    4px 0, calc(100% - 4px) 0, calc(100% - 4px) 4px, 100% 4px, 100% calc(100% - 4px), calc(100% - 4px) calc(100% - 4px),
    calc(100% - 4px) 100%, 4px 100%, 4px calc(100% - 4px), 0 calc(100% - 4px), 0 4px, 4px 4px);

}

/* =====================================================================
   Marca PokéNav · componentes.css  (necesita tokens.css)
   Piezas comunes: base, botones, pestañas, tarjetas, insignias, formularios, barra de progreso, pasos, texto.
   ===================================================================== */
/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body.pk {
  margin: 0;
  min-height: 100vh;
  background-color: var(--pk-night);
  background-image: linear-gradient(45deg, rgba(255,255,255,.025) 25%, transparent 25% 75%, rgba(255,255,255,.025) 75%), linear-gradient(45deg, rgba(255,255,255,.025) 25%, transparent 25% 75%, rgba(255,255,255,.025) 75%);
  background-size: 32px 32px; background-position: 0 0, 16px 16px;
  color: var(--pk-ink);
  font: 400 var(--pk-fs-body)/1.55 var(--pk-font-body);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
.pk-product img, .pk-cat__img, .pk-detail__img, .pk-hero__art { image-rendering: pixelated; }
a { color: var(--pk-blue-deep); text-underline-offset: 3px; }
a:hover { color: var(--pk-blue-deeper); }
:focus-visible { outline: 3px solid var(--pk-ink); outline-offset: 2px; box-shadow: 0 0 0 2px var(--pk-cream); }
.pk-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pk-skip { position: absolute; left: -9999px; top: 8px; z-index: 10; background: var(--pk-gold); color: var(--pk-ink); padding: 8px 16px; font-weight: 700; }
.pk-skip:focus { left: 8px; }
[hidden] { display: none !important; }

.pk-h1, .pk-h2, .pk-h3, .pk-brand__name, .pk-steps__n, .pk-foot__brand strong {
  font-family: var(--pk-font-pixel);
  font-weight: 700;
  letter-spacing: 0;
}
.pk-tab, .pk-mod__title, .pk-cat__name, .pk-badge { font-family: var(--pk-font-body); font-weight: 700; }
.pk-h1 { font-size: var(--pk-fs-h1); line-height: 1.25; margin: 0 0 var(--pk-3); text-transform: uppercase; }
.pk-h1--page { font-size: var(--pk-fs-h1-page); text-transform: none; line-height: 1.4; }
.pk-h2 { font-size: var(--pk-fs-h2); line-height: 1.3; margin: 0 0 var(--pk-4); }
.pk-h3 { font-size: var(--pk-fs-h3); line-height: 1.2; display: block; }

/* ---------- buttons ---------- */
.pk-btn {
  --bg: var(--pk-tab); --bg-hover: var(--pk-tab-hover); --fg: var(--pk-ink);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--pk-2);
  min-height: 48px; padding: 10px 20px;
  font: 700 1rem/1.1 var(--pk-font-body); color: var(--fg); text-decoration: none; text-align: center;
  background: var(--bg); border: 0; cursor: pointer;
  box-shadow: inset 0 0 0 3px var(--pk-ink), inset 0 5px 0 rgba(255, 255, 255, .45), inset 0 -7px 0 rgba(22, 35, 62, .28);
  clip-path: var(--pk-corner-4);
  transition: transform .08s ease, background-color .12s ease;
}
.pk-btn:hover { background: var(--bg-hover); color: var(--fg); }
.pk-btn:active { transform: translateY(3px); }
.pk-btn:focus-visible { outline: 3px solid var(--pk-gold); outline-offset: 0; }
.pk-btn--primary { --bg: var(--pk-blue-deep); --bg-hover: #2A71CF; --fg: #fff; }
.pk-btn--gold { --bg: var(--pk-gold); --bg-hover: var(--pk-gold-hover); }
.pk-btn--ghost { --bg: var(--pk-paper); --bg-hover: #fff; }
.pk-btn--tab { --bg: var(--pk-tab); }
.pk-btn--done { --bg: var(--pk-offer-bg); --bg-hover: #CFE8C5; --fg: var(--pk-offer); }
.pk-btn--wide { display: flex; width: 100%; }
.pk-btn--big { min-height: 56px; font-size: 1.125rem; }
.pk-btn.is-disabled, .pk-btn:disabled { --bg: var(--pk-disabled); --bg-hover: var(--pk-disabled); --fg: var(--pk-muted); cursor: not-allowed; transform: none; }
.pk-ico { width: 1em; height: 1em; fill: currentColor; shape-rendering: crispEdges; flex: none; }
.pk-user__out { display: none; }
.pk-user:hover .pk-user__name { display: none; }
.pk-user:hover .pk-user__out { display: inline; }
.pk-cart__total { font-weight: 600; }
.pk-cart__total::before { content: "· "; }

/* ---------- navigation (tabs) ---------- */
.pk-tab {
  display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 8px 14px;
  background: var(--pk-tab); color: var(--pk-ink); text-decoration: none; font-size: 1.05rem; white-space: nowrap;
  box-shadow: inset 0 0 0 3px var(--pk-ink), inset 0 4px 0 rgba(255, 255, 255, .5);
  clip-path: var(--pk-corner-4);
}
.pk-tab:hover { background: var(--pk-tab-hover); color: var(--pk-ink); }
.pk-tab.is-active { background: var(--pk-blue-deeper); color: #fff; box-shadow: inset 0 0 0 3px var(--pk-ink), inset 0 -4px 0 var(--pk-gold); }

/* ---------- cards ---------- */
.pk-card {
  background: var(--pk-paper);
  padding: var(--pk-6);
  box-shadow: inset 0 0 0 3px var(--pk-ink), inset 0 0 0 5px var(--pk-blue), inset 0 0 0 7px #E9F2FA;
  clip-path: var(--pk-corner-8);
}
.pk-card--frame { box-shadow: inset 0 0 0 3px var(--pk-ink), inset 0 0 0 7px var(--pk-blue), inset 0 0 0 9px #E9F2FA; }

/* ---------- steps (cómo funciona / a medida) ---------- */
.pk-steps__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pk-4); counter-reset: none; }
.pk-steps__list li { display: grid; grid-template-columns: 44px 1fr; column-gap: var(--pk-3); align-items: start; color: var(--pk-muted); }
.pk-steps__list strong { display: block; color: var(--pk-ink); font-size: 1.125rem; }
.pk-steps__n {
  grid-row: span 2; width: 44px; height: 44px; display: grid; place-items: center; font-size: 1.5rem;
  background: var(--pk-gold); color: var(--pk-ink); box-shadow: inset 0 0 0 3px var(--pk-ink); clip-path: var(--pk-corner-4);
}
.pk-steps--medida { display: flex; flex-direction: column; gap: var(--pk-4); align-items: flex-start; }
.pk-steps--medida .pk-steps__list { width: 100%; }

/* ---------- a medida banner ---------- */
.pk-medida { display: flex; align-items: center; gap: var(--pk-4); text-decoration: none; color: var(--pk-ink); }
.pk-medida:hover { color: var(--pk-ink); }
.pk-medida__icon { flex: none; width: 72px; height: 72px; background: url("pk-medida.png") center / contain no-repeat; image-rendering: pixelated; }
.pk-medida__text { flex: 1; display: flex; flex-direction: column; gap: 4px; color: var(--pk-muted); }
.pk-medida__text .pk-h3 { color: var(--pk-ink); }

/* ---------- rich text (descripciones de Tebex) ---------- */
.pk-text { overflow-wrap: anywhere; }
.pk-text > :first-child { margin-top: 0; }
.pk-text > :last-child { margin-bottom: 0; }
.pk-text table { max-width: 100%; }
.pk-text img { height: auto; }

/* ---------- forms (login, options) ---------- */
.pk-login { max-width: 560px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; gap: var(--pk-4); padding: var(--pk-8); }
.pk-login p { margin: 0; }
.pk-form { display: flex; flex-direction: column; gap: var(--pk-3); }
.pk-form--inline { flex-direction: row; flex-wrap: wrap; }
.pk-form--inline .pk-input { flex: 1 1 160px; }
.pk-form__actions { display: flex; flex-direction: column; gap: var(--pk-3); margin-top: var(--pk-2); }
.pk-label { font-weight: 700; }
.pk-input {
  width: 100%; min-height: 52px; padding: 10px 14px; border: 0; font: 400 1.125rem/1.3 var(--pk-font-body); color: var(--pk-ink);
  background: #fff; box-shadow: inset 0 0 0 3px var(--pk-ink), inset 0 6px 0 rgba(22, 35, 62, .08);
  clip-path: var(--pk-corner-4);
}
.pk-input:focus { outline: 3px solid var(--pk-gold); outline-offset: 0; }
.pk-hint { font-size: var(--pk-fs-small); color: var(--pk-muted); }
.pk-alert { margin: 0; padding: 8px 12px; background: var(--pk-cream); box-shadow: inset 4px 0 0 var(--pk-blue); }
.pk-alert--bad { box-shadow: inset 4px 0 0 var(--pk-red); }
.pk-alert--warn { box-shadow: inset 4px 0 0 var(--pk-gold-dark); }

.pk-bar { height: 22px; background: #fff; box-shadow: inset 0 0 0 3px var(--pk-ink); padding: 5px; }
.pk-bar__fill { display: block; height: 100%; background: repeating-linear-gradient(90deg, var(--pk-gold) 0 12px, #D9AC3E 12px 16px); min-width: 4px; }
.pk-badge {
  display: inline-block; padding: 4px 8px; font-size: .95rem; line-height: 1;
  background: var(--pk-offer); color: #fff; clip-path: var(--pk-corner-4);
}
.pk-badge--on { background: var(--pk-offer); }
.pk-badge--off { background: var(--pk-red); }
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* =====================================================================
   Tienda Tebex · tienda.css  (necesita tokens.css + componentes.css)
   Lo propio de la tienda: carcasa del PokéNav, menú, portada, categorías, paquetes, cesta, módulos, pie.
   ===================================================================== */
:root {
  /* Tebex legal footer (obligatorio, solo se puede colorear) */
  --tebex-legal-footer-background-color: #16233E;
  --tebex-legal-footer-text-color: #F6F0DE;
  --tebex-legal-footer-border-color: #6E1B2C;
  --tebex-legal-footer-logo-color: #F6F0DE;
  --tebex-legal-footer-max-width: 1376px;
}
/* ---------- device shell ---------- */
.pk-device {
  position: relative;
  max-width: 1376px;
  margin: var(--pk-8) auto;
  padding: 0 20px 20px;
  background: var(--pk-red);
  box-shadow: inset 0 -8px 0 var(--pk-red-dark), inset 0 4px 0 var(--pk-red-light), 0 8px 0 rgba(13, 23, 43, .6);
  clip-path: var(--pk-corner-12);
}
.pk-top__bar {
  display: flex; align-items: center; justify-content: space-between; gap: var(--pk-4);
  padding: var(--pk-4) 0 var(--pk-3);
}
.pk-brand { display: flex; align-items: center; gap: var(--pk-3); color: var(--pk-cream); text-decoration: none; min-width: 0; }
.pk-brand:hover { color: #fff; }
.pk-lens {
  flex: none; width: 72px; height: 72px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #DDF3FF 0 10%, #5FB7F0 11% 34%, #1E73C8 35% 62%, #0D3F7A 63%);
  box-shadow: 0 0 0 6px var(--pk-cream), 0 0 0 10px var(--pk-ink), 0 6px 0 10px var(--pk-red-dark);
  margin: 10px 8px 10px 10px;
}
.pk-leds { display: flex; gap: 8px; align-self: flex-start; margin-top: 4px; }
.pk-leds i { width: 16px; height: 16px; border-radius: 50%; box-shadow: 0 0 0 3px var(--pk-ink); }
.pk-leds i:nth-child(1) { background: #E5383B; }
.pk-leds i:nth-child(2) { background: #F2C230; }
.pk-leds i:nth-child(3) { background: #3BB54A; }
.pk-brand__logo { width: auto; height: 48px; }
.pk-brand__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pk-brand__name { font-size: clamp(1.25rem, 1rem + 1vw, 2rem); line-height: 1; text-transform: uppercase; text-shadow: 3px 3px 0 var(--pk-ink); }
.pk-brand__tag {
  align-self: flex-start; font: 700 var(--pk-fs-small)/1 var(--pk-font-pixel); text-transform: uppercase;
  background: var(--pk-gold); color: var(--pk-ink); padding: 4px 10px; clip-path: var(--pk-corner-4);
}
.pk-top__actions { display: flex; gap: var(--pk-3); flex-wrap: wrap; justify-content: flex-end; }

.pk-nav { margin-bottom: var(--pk-4); }
.pk-nav__toggle { display: none; }
.pk-nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; flex-wrap: wrap; }
.pk-nav__list > li { flex: 1 1 auto; position: relative; }
.pk-nav__sub { display: none; list-style: none; margin: 4px 0 0; padding: 0; gap: 4px; flex-wrap: wrap; }
.pk-nav__list > li.is-open > .pk-nav__sub, .pk-nav__list > li.has-sub:focus-within > .pk-nav__sub { display: flex; }
.pk-tab--sub { min-height: 40px; font-size: .95rem; background: var(--pk-paper); }
/* ---------- screen ---------- */
.pk-screen {
  background: var(--pk-cream);
  padding: var(--pk-6);
  box-shadow: inset 0 0 0 3px var(--pk-ink), inset 0 0 0 6px var(--pk-blue);
  clip-path: var(--pk-corner-8);
}
.pk-notice, .pk-toast {
  margin: 0 0 var(--pk-4); padding: var(--pk-3) var(--pk-4); font-weight: 600;
  background: var(--pk-paper); box-shadow: inset 0 0 0 3px var(--pk-ink), inset 6px 0 0 3px var(--pk-gold);
  clip-path: var(--pk-corner-4);
}
.pk-toast--success { box-shadow: inset 0 0 0 3px var(--pk-ink), inset 9px 0 0 var(--pk-offer); }
.pk-toast--danger, .pk-toast--error { box-shadow: inset 0 0 0 3px var(--pk-ink), inset 9px 0 0 var(--pk-red); }
.pk-toast { transition: opacity .4s ease; }
.pk-toast.is-hidden { opacity: 0; pointer-events: none; height: 0; padding: 0; margin: 0; overflow: hidden; }

.pk-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--pk-6); align-items: start; }
.pk-layout--single { grid-template-columns: minmax(0, 1fr); }
.pk-main { min-width: 0; display: flex; flex-direction: column; gap: var(--pk-6); }
.pk-section__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--pk-4); flex-wrap: wrap; }
.pk-link { font-weight: 700; }

/* ---------- hero ---------- */
.pk-hero {
  display: grid; grid-template-columns: minmax(0, 1fr); align-items: center;
  min-height: 400px; padding: var(--pk-8) var(--pk-8); margin-bottom: var(--pk-6);
  background-color: var(--pk-cream); background-position: right center; background-size: auto 100%; background-repeat: no-repeat;
  image-rendering: pixelated;
}
.pk-hero__text { max-width: 560px; }
.pk-h1__accent { color: var(--pk-red); }
.pk-hero__lead { font: 700 clamp(1.25rem, 1.1rem + .6vw, 1.625rem)/1.2 var(--pk-font-body); margin: 0 0 var(--pk-2); }
.pk-hero__sub { margin: 0 0 var(--pk-6); color: var(--pk-muted); max-width: 52ch; }
.pk-hero__cta { display: flex; gap: var(--pk-3); flex-wrap: wrap; }
.pk-hero__art { display: none; }

/* ---------- categories ---------- */
/* Categorías: 4 por fila y la última fila centrada (simétrico con cualquier número de categorías) */
.pk-cats { --pk-cols: 4; --pk-gap: var(--pk-4); list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--pk-gap); }
.pk-cats > li { flex: 0 0 calc((100% - (var(--pk-cols) - 1) * var(--pk-gap)) / var(--pk-cols)); min-width: 0; }
.pk-cat {
  display: flex; flex-direction: column; text-decoration: none; color: var(--pk-ink); height: 100%;
  background: #70452C; padding: 6px;
  box-shadow: inset 0 0 0 3px var(--pk-ink), inset 0 0 0 6px var(--pk-gold);
  clip-path: var(--pk-corner-8);
  transition: transform .12s ease;
}
.pk-cat:hover { transform: translateY(-3px); color: var(--pk-ink); }
.pk-cat__img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.pk-cat__img--empty { background: var(--pk-night); }
.pk-cat--img { padding: 0; background: none; box-shadow: none; clip-path: none; }
.pk-cat--img .pk-cat__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pk-cat__name {
  margin-top: 6px; padding: 10px 8px; text-align: center; font-size: 1.05rem; line-height: 1.1; text-transform: uppercase;
  background: var(--pk-gold); box-shadow: inset 0 0 0 3px var(--pk-ink), inset 0 4px 0 rgba(255, 255, 255, .45);
  clip-path: var(--pk-corner-4);
}

/* ---------- product grid ---------- */
.pk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--pk-4); }
.pk-product { display: flex; flex-direction: column; gap: var(--pk-3); padding: var(--pk-4); text-align: center; }
.pk-product__media { position: relative; display: block; }
.pk-product__media img { display: block; width: 100%; max-width: 256px; margin: 0 auto; aspect-ratio: 1; object-fit: contain; }
.pk-product__noimg { display: block; aspect-ratio: 1; background: var(--pk-cream); }
.pk-product__media .pk-badge { position: absolute; top: 8px; right: 8px; }
.pk-product__name { margin: 0; font: 700 1.125rem/1.25 var(--pk-font-body); }
.pk-product__name a { color: var(--pk-ink); text-decoration: none; }
.pk-product__name a:hover { text-decoration: underline; }
.pk-product .pk-buy { margin-top: auto; }
.pk-grid--list { grid-template-columns: 1fr; }
.pk-grid--list .pk-product { display: grid; grid-template-columns: 128px minmax(0, 1fr) minmax(200px, 260px); align-items: center; text-align: left; }
.pk-grid--list .pk-product__media img { max-width: 128px; }

.pk-buy { display: flex; flex-direction: column; gap: var(--pk-2); }
.pk-price { margin: 0; display: flex; flex-direction: column; align-items: inherit; line-height: 1.1; }
.pk-product .pk-price { align-items: center; }
.pk-price__now { font: 700 var(--pk-fs-price)/1.1 var(--pk-font-body); font-variant-numeric: tabular-nums; }
.pk-price__now--small { font-size: 1.125rem; }
.pk-price__old { color: var(--pk-muted); font-size: var(--pk-fs-small); display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; }
.pk-price__old .pk-badge { font-size: .85rem; padding: 3px 6px; }

/* ---------- page head / crumbs ---------- */
.pk-pagehead { display: flex; flex-direction: column; gap: var(--pk-1); }
.pk-pagehead .pk-h1 { margin: 0; }
.pk-pagehead__sub { margin: 0; color: var(--pk-muted); }
.pk-crumbs { margin: 0; font-size: var(--pk-fs-small); color: var(--pk-muted); }
.pk-crumbs a { color: var(--pk-muted); }

/* ---------- a medida banner ---------- */
.pk-medida { display: flex; align-items: center; gap: var(--pk-4); text-decoration: none; color: var(--pk-ink); }
.pk-medida:hover { color: var(--pk-ink); }
.pk-medida__icon { flex: none; width: 72px; height: 72px; object-fit: contain; image-rendering: pixelated; }
.pk-medida__text { flex: 1; display: flex; flex-direction: column; gap: 4px; color: var(--pk-muted); }
.pk-medida__text .pk-h3 { color: var(--pk-ink); }

/* ---------- package detail ---------- */
.pk-detail { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--pk-6) var(--pk-8); padding: var(--pk-8); }
.pk-detail__media { display: flex; flex-direction: column; gap: var(--pk-3); }
.pk-detail__img { display: block; width: 100%; max-width: 420px; margin: 0 auto; aspect-ratio: 1; object-fit: contain; }
.pk-detail__thumbs { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.pk-detail__info { display: flex; flex-direction: column; gap: var(--pk-4); align-items: flex-start; }
.pk-detail__info .pk-h1 { margin: 0; }
.pk-detail__info .pk-buy { width: 100%; max-width: 420px; }
.pk-detail__facts { margin: 0; padding-left: 1.2em; color: var(--pk-muted); }
.pk-detail__descr { grid-column: 1 / -1; border-top: 3px dashed var(--pk-tab); padding-top: var(--pk-6); }

/* ---------- basket ---------- */
.pk-basket { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--pk-6); align-items: start; }
.pk-basket__list { list-style: none; margin: 0; padding: 0; }
.pk-line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: var(--pk-4); align-items: center; padding: var(--pk-4) 0; border-bottom: 3px dashed var(--pk-tab); }
.pk-line:last-child { border-bottom: 0; }
.pk-line__name { font-weight: 700; font-size: 1.125rem; color: var(--pk-ink); text-decoration: none; }
.pk-line__name:hover { text-decoration: underline; }
.pk-line__opts { margin: 4px 0 0; padding-left: 1.1em; color: var(--pk-muted); font-size: var(--pk-fs-small); }
.pk-line__price { display: block; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; }
.pk-line__remove { color: var(--pk-red); font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }
.pk-qty { display: flex; align-items: stretch; }
.pk-qty__btn {
  width: 44px; min-height: 44px; border: 0; cursor: pointer; font: 700 1.25rem/1 var(--pk-font-body);
  background: var(--pk-tab); color: var(--pk-ink); box-shadow: inset 0 0 0 3px var(--pk-ink);
}
.pk-qty__btn:hover { background: var(--pk-tab-hover); }
.pk-qty__btn:disabled { background: var(--pk-disabled); color: var(--pk-muted); cursor: not-allowed; }
.pk-qty__input {
  width: 56px; min-height: 44px; border: 0; text-align: center; font: 700 1.125rem/1 var(--pk-font-body); color: var(--pk-ink);
  background: #fff; box-shadow: inset 0 3px 0 var(--pk-ink), inset 0 -3px 0 var(--pk-ink); -moz-appearance: textfield;
}
.pk-qty__input::-webkit-outer-spin-button, .pk-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.is-busy { opacity: .6; pointer-events: none; }
.pk-basket__pay { display: flex; flex-direction: column; gap: var(--pk-3); position: sticky; top: var(--pk-4); }
.pk-basket__count { margin: 0; color: var(--pk-muted); }
.pk-basket__total { margin: 0; display: flex; justify-content: space-between; align-items: baseline; font-size: 1.25rem; }
.pk-basket__total strong { font-size: var(--pk-fs-price); font-variant-numeric: tabular-nums; }
.pk-basket__hint { margin: 0; font-size: var(--pk-fs-small); color: var(--pk-muted); }
.pk-empty { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--pk-3); }
.pk-empty p { margin: 0; }

/* ---------- sidebar modules ---------- */
.pk-side { display: flex; flex-direction: column; gap: var(--pk-4); min-width: 0; }
.pk-mod { padding: 0 var(--pk-4) var(--pk-4); display: flex; flex-direction: column; gap: var(--pk-3); }
.pk-mod__title {
  margin: 0 calc(var(--pk-4) * -1); padding: 12px var(--pk-4); font-size: 1.15rem; line-height: 1.1;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--pk-ink); color: var(--pk-cream);
}
.pk-mod--featured { gap: var(--pk-3); }
.pk-mod--featured .pk-mod__title { margin: 0; clip-path: var(--pk-corner-4); }
.pk-mod__empty, .pk-mod__note { margin: 0; color: var(--pk-muted); font-size: var(--pk-fs-small); }
.pk-mod__meta { margin: 0; }
.pk-mod__img { width: 100%; }
.pk-mod__text > :first-child { margin-top: 0; }
.pk-mod__text > :last-child { margin-bottom: 0; }
.pk-pays { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pk-pay { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; padding: 8px 0; border-bottom: 2px dashed var(--pk-tab); font-size: .95rem; }
.pk-pay:last-child { border-bottom: 0; }
.pk-pay__skin { grid-row: span 2; width: 32px; height: 32px; image-rendering: pixelated; }
.pk-pay__who { font-weight: 700; overflow-wrap: anywhere; }
.pk-pay__what, .pk-pay__price, .pk-pay__time { color: var(--pk-muted); grid-column: 2; }
.pk-pay:not(:has(.pk-pay__skin)) { grid-template-columns: 1fr; }
.pk-pay:not(:has(.pk-pay__skin)) > * { grid-column: 1; }
.pk-top-donor { display: flex; gap: 12px; align-items: center; }
.pk-copy {
  font: 700 1rem/1.2 var(--pk-font-body); color: var(--pk-ink); background: var(--pk-cream); border: 0; cursor: pointer;
  padding: 6px 10px; box-shadow: inset 0 0 0 2px var(--pk-ink); min-height: 36px;
}
.pk-copy:hover { background: #fff; }
.pk-copy--big { width: 100%; min-height: 44px; font-size: 1.125rem; }

/* ---------- footer ---------- */
.pk-foot {
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--pk-3) var(--pk-6); align-items: center;
  padding: var(--pk-4) var(--pk-2) 0; color: var(--pk-cream); font-size: .95rem;
}
.pk-foot a { color: var(--pk-cream); }
.pk-foot a:hover { color: #fff; }
.pk-foot__brand { display: flex; flex-direction: column; gap: 4px; }
.pk-foot__brand strong { font: 700 1.2rem/1 var(--pk-font-pixel); text-transform: uppercase; }
.pk-foot__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; justify-content: center; }
.pk-foot__links a { display: inline-flex; min-height: 44px; align-items: center; }
.pk-foot__currency { display: flex; align-items: center; gap: 8px; }
.pk-foot__currency select { min-height: 40px; font: 700 1rem var(--pk-font-body); padding: 4px 8px; border: 0; color: var(--pk-ink); background: var(--pk-cream); box-shadow: inset 0 0 0 2px var(--pk-ink); }
.pk-foot__note { grid-column: 1 / -1; margin: 0; font-size: .8rem; opacity: .9; }

/* =====================================================================
   Responsive
   ===================================================================== */
@media (max-width: 1100px) {
  .pk-layout { grid-template-columns: minmax(0, 1fr); }
  .pk-side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .pk-basket { grid-template-columns: minmax(0, 1fr); }
  .pk-basket__pay { position: static; }
}

@media (max-width: 860px) {
  .pk-device { margin: 0; padding: 0 8px 10px; clip-path: none; }
  .pk-top__bar { flex-wrap: wrap; padding: 10px 0; }
  .pk-lens { width: 48px; height: 48px; margin: 6px; box-shadow: 0 0 0 4px var(--pk-cream), 0 0 0 7px var(--pk-ink); }
  .pk-leds i { width: 10px; height: 10px; }
  .pk-brand__logo { display: none; }
  .pk-top__actions { width: 100%; display: grid; grid-template-columns: 1fr 1.6fr; }
  .pk-top__actions .pk-btn { padding: 8px 10px; min-height: 44px; }
  .pk-nav__toggle { display: flex; width: 100%; justify-content: space-between; }
  .pk-nav__list { display: none; margin-top: 6px; flex-direction: column; }
  .pk-nav.is-open .pk-nav__list { display: flex; }
  .pk-nav.is-open .pk-nav__toggle .pk-ico { transform: rotate(180deg); }
  .pk-tab { justify-content: flex-start; }
  .pk-nav__sub { display: flex; flex-direction: column; padding-left: 16px; }
  .pk-screen { padding: var(--pk-3); }
  .pk-hero { min-height: 0; padding: var(--pk-4); background-image: none !important; }
  .pk-hero__art { display: block; width: 100%; height: auto; margin-top: var(--pk-4); image-rendering: pixelated; box-shadow: 0 0 0 2px var(--pk-ink); }
  .pk-cats { --pk-cols: 2; --pk-gap: var(--pk-3); }
  .pk-cat__name { font-size: .95rem; padding: 8px 4px; }
  .pk-steps__list { grid-template-columns: 1fr; }
  .pk-medida { flex-wrap: wrap; }
  .pk-medida .pk-btn { width: 100%; }
  .pk-detail { grid-template-columns: 1fr; padding: var(--pk-4); }
  .pk-detail__info .pk-buy { max-width: none; }
  .pk-grid--list .pk-product { grid-template-columns: 96px minmax(0, 1fr); }
  .pk-grid--list .pk-product .pk-buy { grid-column: 1 / -1; }
  .pk-foot { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .pk-card { padding: var(--pk-4); }
  .pk-login { padding: var(--pk-6) var(--pk-4); }
}

@media (max-width: 560px) {
  .pk-side { grid-template-columns: minmax(0, 1fr); }
  .pk-grid { grid-template-columns: minmax(0, 1fr); }
  .pk-line { grid-template-columns: minmax(0, 1fr) auto; }
  .pk-line__info { grid-column: 1 / -1; }
  .pk-brand__name { font-size: 1.15rem; }
}


/* ---------- regalar / código de creador ---------- */
.pk-gift { width: 100%; }
.pk-gift > summary { list-style: none; }
.pk-gift > summary::-webkit-details-marker { display: none; }
.pk-gift[open] > summary { --bg: var(--pk-tab); }
.pk-gift__form { margin-top: var(--pk-3); text-align: left; }
.pk-product .pk-gift .pk-btn { min-height: 44px; font-size: .95rem; }
.pk-code--note { display: block; margin: 0; line-height: 1.4; }
.pk-code { display: flex; flex-direction: column; gap: 6px; padding-top: var(--pk-2); border-top: 3px dashed var(--pk-tab); }
.pk-code__row { display: flex; gap: 8px; }
.pk-code__row .pk-input { flex: 1; min-width: 0; min-height: 48px; }
.pk-code__row .pk-input:disabled { background: var(--pk-cream); color: var(--pk-ink); font-weight: 700; }
.pk-buy .pk-hint { margin: 0; text-align: left; }
/* Motivo de Tebex cuando no deja comprar un paquete (se ve siempre, no solo al pasar el ratón) */
.pk-why { margin: 0; font-size: .95rem; line-height: 1.35; text-align: left; color: var(--pk-ink); }
@media (min-width: 861px) { .pk-foot { grid-template-columns: auto 1fr auto auto; } }
.pk-foot__note { grid-column: 1 / -1; }


/* ---------- requisitos de Tebex: cuenta atrás, galería, niveles ---------- */
.pk-countdown { margin: 0; font-weight: 700; color: var(--pk-red); font-variant-numeric: tabular-nums; }
.pk-detail__gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pk-detail__gallery .slide:first-child { grid-column: 1 / -1; }
.pk-detail__gallery .slide-image { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; image-rendering: pixelated; }
.pk-detail__gallery .slide:first-child .slide-image { max-width: 420px; margin: 0 auto; }
.pk-detail__gallery .slide:not(:first-child) .slide-image { background: var(--pk-cream); box-shadow: inset 0 0 0 2px var(--pk-ink); }
.slide-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; box-shadow: 0 0 0 3px var(--pk-ink); }
.pk-detail__gallery .slide:has(.slide-frame) { grid-column: 1 / -1; }
.pk-line__expiry { display: block; color: var(--pk-muted); font-size: var(--pk-fs-small); }
.pk-link--small { font-size: var(--pk-fs-small); font-weight: 600; }
.pk-gateway { display: flex; flex-direction: column; gap: var(--pk-2); }
.pk-gateway .pk-h3 { margin: 0; }
.pk-tier { display: flex; flex-direction: column; gap: 6px; }
.pk-tier.is-current .pk-product { box-shadow: inset 0 0 0 3px var(--pk-ink), inset 0 0 0 7px var(--pk-gold); }

/* ---------- texto de inicio del panel (index.description) ---------- */
/* Bloques por idioma: el texto del panel puede traer los dos y se ve el del idioma elegido */
html:not([lang^="en"]) .pk-solo-en, html[lang^="en"] .pk-solo-es { display: none; }
.pk-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pk-4); }
.pk-info__card { display: flex; flex-direction: column; gap: var(--pk-3); padding: 0 var(--pk-4) var(--pk-4); background: var(--pk-cream); box-shadow: inset 0 0 0 2px var(--pk-ink); }
.pk-info__card p { margin: 0; }
.pk-info__title { margin: 0 calc(var(--pk-4) * -1); padding: 10px var(--pk-4); font: 700 1.15rem/1.2 var(--pk-font-body); color: #fff; }
.pk-info__title--azul { background: var(--pk-blue-deep); }
.pk-info__title--rojo { background: var(--pk-red); }
.pk-info__list { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; }
.pk-info__card .pk-btn { align-self: flex-start; }
@media (max-width: 860px) { .pk-info { grid-template-columns: minmax(0, 1fr); } }

/* ---------- inicio: lo que ofrece el servidor (iconos del PokéNav en una sola imagen) ---------- */
.pk-ic { flex: none; display: inline-block; width: 48px; height: 48px; background-repeat: no-repeat; background-size: 432px 48px; image-rendering: pixelated; }
.pk-ic--1 { background-position: 0 0; } .pk-ic--2 { background-position: -48px 0; } .pk-ic--3 { background-position: -96px 0; }
.pk-ic--4 { background-position: -144px 0; } .pk-ic--5 { background-position: -192px 0; } .pk-ic--6 { background-position: -240px 0; }
.pk-ic--7 { background-position: -288px 0; } .pk-ic--8 { background-position: -336px 0; } .pk-ic--9 { background-position: -384px 0; }
.pk-feats { --pk-cols: 2; --pk-gap: var(--pk-3); list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--pk-gap); }
.pk-feats > li { flex: 0 0 calc((100% - (var(--pk-cols) - 1) * var(--pk-gap)) / var(--pk-cols)); min-width: 0; }
.pk-feat { display: flex; gap: var(--pk-3); align-items: flex-start; padding: var(--pk-4); color: var(--pk-muted); }
.pk-feat strong { display: block; color: var(--pk-ink); font-size: 1.1rem; }

/* ---------- ayuda y pagos a todo el ancho ---------- */
.pk-help { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pk-6); margin-top: var(--pk-6); }
.pk-help__card { display: flex; flex-direction: column; gap: var(--pk-3); padding-top: 0; }
.pk-help__card p { margin: 0; }
.pk-help__card .pk-btn { align-self: flex-start; }
.pk-help__title { display: flex; align-items: center; gap: var(--pk-3); margin: 0 calc(var(--pk-6) * -1) var(--pk-1); padding: 10px var(--pk-6); color: #fff; font: 700 1.25rem/1.2 var(--pk-font-body); }
.pk-help__title .pk-ic { width: 40px; height: 40px; background-size: 360px 40px; }
.pk-help__title .pk-ic--8 { background-position: -280px 0; } .pk-help__title .pk-ic--9 { background-position: -320px 0; }
.pk-help__title--azul { background: var(--pk-blue-deep); }
.pk-help__title--rojo { background: var(--pk-red); }
.pk-help__list { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; }

/* ---------- destacados de la columna derecha: tarjeta compacta ---------- */
.pk-mod--featured .pk-product { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 6px 12px; padding: 12px; text-align: left; align-items: center; }
.pk-mod--featured .pk-product__media img { max-width: 88px; }
.pk-mod--featured .pk-product__name { font-size: 1rem; }
.pk-mod--featured .pk-product .pk-buy { grid-column: 1 / -1; margin-top: 0; }
.pk-mod--featured .pk-product .pk-price { align-items: flex-start; }
.pk-mod--featured .pk-price__now { font-size: 1.35rem; }
.pk-mod--featured .pk-gift, .pk-mod--featured .pk-hint, .pk-mod--featured .pk-countdown { display: none; }
.pk-mod--featured .pk-btn { min-height: 44px; font-size: .95rem; }

@media (max-width: 860px) {
  .pk-help { grid-template-columns: minmax(0, 1fr); gap: var(--pk-4); }
  .pk-help__title { margin: 0 calc(var(--pk-4) * -1) var(--pk-1); padding: 10px var(--pk-4); }
}
@media (max-width: 560px) { .pk-feats { --pk-cols: 1; } }