@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");
:root {
  --color-primary: #41C4C3;
  --bg-image: url("https://template-assets.tebex.io/images/page-bg.jpg");
}

body {
  font-family: Lato, sans-serif;
}
body::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  max-height: 400px;
  z-index: -1;
  background: var(--bg-image) center center/cover no-repeat;
  mask-image: linear-gradient(rgba(0, 0, 0, 0.75) 50%, rgba(0, 0, 0, 0.25));
  pointer-events: none;
}

.btn-primary,
.btn-secondary,
.btn-tertiary {
  border-radius: 2px;
}

.btn-primary:hover, .btn-primary:focus,
.btn-secondary:hover,
.btn-secondary:focus {
  box-shadow: 0 0 6px rgb(from var(--btn-color-bg-hover) r g b/0.6);
}

.quantity-field {
  border-radius: 5px;
}

.site-header-inner .info .image {
  border-radius: 5px;
}

.site-sale-banner {
  border-radius: 5px;
}

.site-home-categories .category {
  border-radius: 5px;
  padding: 20px var(--widget-padding);
  background: var(--color-brighter-bg);
  transition: color 0.15s ease-in-out;
}
.site-home-categories .category:hover {
  color: var(--color-primary);
}

.category-description {
  border-radius: 5px;
  background: var(--color-brighter-bg);
}

.store-text {
  border-radius: 5px;
  background: var(--color-brighter-bg);
}
.store-text h1,
.store-text h2,
.store-text h3,
.store-text h4,
.store-text h5,
.store-text h6 {
  text-align: center;
}

.store-products-list .store-product,
.store-products-images .store-product {
  border-radius: 5px;
  background: var(--color-brighter-bg);
}

.store-products-images .store-product {
  text-align: center;
}

.widget-title {
  text-align: center;
}

.widget .store-product {
  text-align: center;
}

.no-products {
  color: var(--color-text-secondary);
  background: var(--color-brighter-bg);
  border-radius: 5px;
}

.store-product-full {
  border-radius: 5px;
  background: var(--color-brighter-bg);
}

.store-product .quantity-field {
  border-radius: 5px;
  background: var(--color-brighter-bg);
}
.store-product .quantity-field input[type=number] {
  border: none;
}

@media (width > 960px) {
  .navigation-horizontal > ul {
    border-radius: 5px;
  }
}
.navigation-horizontal .has-children > ul {
  border-radius: 5px;
}

.widget {
  border-radius: 5px;
  background: var(--color-brighter-bg);
}
@media (width <= 960px) {
  .widget.site-navigation {
    border-radius: 0;
    background: transparent;
  }
}

.widget-gift-card .gift-card-input {
  border-radius: 2px;
}

.widget-top-donator .avatar {
  border-radius: 50%;
}

.widget-community-goal .progress,
.widget-goal .progress {
  border-radius: 2px;
}
.widget-community-goal .progress-bar,
.widget-goal .progress-bar {
  border-radius: 2px;
}

.popup-content {
  border-radius: 5px;
}

.popup-close {
  border-radius: 0 5px 0 5px;
}

.basket-popup-content,
.basket-popup-content .popup-close {
  border-radius: 0;
}

.basket-items {
  padding: var(--widget-padding) calc(var(--content-padding) - var(--widget-padding));
}

.basket-item {
  border-radius: 5px;
}
.basket-item .quantity {
  border-radius: 2px;
}

.toast {
  border-radius: 6px;
}

.toast-close {
  border-radius: 2px;
}

.store-category-tiered {
  border-radius: 5px;
  background: var(--color-brighter-bg);
}

.store-category-tiered-header h1,
.store-category-tiered-header h2,
.store-category-tiered-header h3,
.store-category-tiered-header h4,
.store-category-tiered-header h5,
.store-category-tiered-header h6 {
  text-align: center;
}

.store-product-tiered {
  border-radius: 5px;
  background: rgb(from var(--color-bg) r g b/0.5);
}

.media-slider .slider,
.media-slider .thumb {
  border-radius: 5px;
}
.media-slider .open-lightbox {
  border-radius: 2px;
}

.popup.popup-media-slider .thumb {
  border-radius: 5px;
}
.popup.popup-media-slider .popup-close {
  border-radius: 5px;
}


/* HEADER */
/* ============================= */
/* HEADER PECADO CRAFT */
/* ============================= */

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

.site-header {
  position: relative;
  width: 100%;
}

.site-header-inner {
  position: relative !important;
  width: 100%;
  min-height: 150px;
}

/* Contenedor principal del header */
.pc-header-top {
  position: relative !important;
  width: 100%;
  min-height: 150px;
}

/* Login izquierda */
.pc-header-left {
  position: absolute !important;
  left: 120px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Logo centrado */
.pc-header-logo,
.site-title.pc-header-logo {
  position: absolute !important;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0 !important;
  padding: 0 !important;
  z-index: 20;
  text-align: center;
  line-height: 1;
}

.pc-header-logo a,
.site-title.pc-header-logo a {
  display: block;
  text-decoration: none;
}

.pc-header-logo img,
.site-title.pc-header-logo img {
  display: block;
  max-width: 150px;
  height: auto;
}

/* Carrito derecha */
.pc-header-right {
  position: absolute !important;
  right: 120px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Botones generales */
.pc-header-btn {
  min-height: 46px;
  padding: 0 16px;
  border-radius: 6px;
  border: 3px solid #2f2f2f;
  background: linear-gradient(180deg, #222222 0%, #111111 100%);
  color: #ffffff !important;
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: 'Press Start 2P', monospace;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  text-shadow: 2px 2px 0 #000000;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.14),
    inset 0 -4px 0 rgba(0,0,0,0.35),
    0 4px 0 #000000;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.12s ease, filter 0.12s ease;
}

.pc-header-btn:hover {
  filter: brightness(1.12);
  transform: translateY(-2px);
}

/* Botón login */
.pc-login-btn {
  background: linear-gradient(180deg, #7a5cff 0%, #4356e8 100%);
  border-color: #2e3192;
}

/* Botón carrito */
.pc-cart-btn {
  background: linear-gradient(180deg, #5f8f3d 0%, #3f6f28 100%);
  border-color: #2f4b1d;
}

/* Icono carrito */
.pc-cart-icon {
  font-size: 15px;
  line-height: 1;
}

/* Número del carrito */
.pc-cart-count {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: #ffcc33;
  color: #1a1a1a;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
  font-size: 12px;
  font-weight: 900;
  text-shadow: none;
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.18);
}

/* Texto cuando está logueado */
.pc-small-text {
  font-size: 7px;
  opacity: 0.75;
  text-transform: uppercase;
}

.pc-hover-text {
  font-size: 8px;
  opacity: 0.85;
}

/* Botón menú móvil */
.pc-nav-toggle {
  display: none !important;
}

/* Quitar estilos antiguos del header EXO */
.site-header .actions,
.site-header .user-actions,
.site-header .log-in {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  margin: 0 !important;
}

/* Evita que botones antiguos se queden flotando */
.site-header > .actions,
.site-header > .user-actions {
  display: none !important;
}

/* Info de servidor y Discord debajo si existen */
.site-header .info.server,
.site-header .info.discord {
  position: relative;
  z-index: 10;
}

/* Banner de oferta */
.site-sale-banner {
  position: relative;
  z-index: 40;
}

/* ============================= */
/* RESPONSIVE */
/* ============================= */

@media (max-width: 1024px) {
  .pc-header-left {
    left: 50px;
  }

  .pc-header-right {
    right: 50px;
  }

  .pc-header-logo img,
  .site-title.pc-header-logo img {
    max-width: 135px;
  }
}

@media (max-width: 768px) {
  .site-header-inner,
  .pc-header-top {
    min-height: 230px;
  }

  .pc-header-logo,
  .site-title.pc-header-logo {
    top: 38%;
  }

  .pc-header-logo img,
  .site-title.pc-header-logo img {
    max-width: 115px;
  }

  .pc-header-left {
    left: 16px;
    top: 68%;
  }

  .pc-header-right {
    right: 16px;
    top: 68%;
  }

  .pc-header-btn {
    min-height: 40px;
    padding: 0 11px;
    font-size: 8px;
    border-width: 2px;
    box-shadow:
      inset 0 2px 0 rgba(255,255,255,0.14),
      inset 0 -3px 0 rgba(0,0,0,0.35),
      0 3px 0 #000000;
  }

  .pc-cart-icon {
    font-size: 13px;
  }

  .pc-cart-count {
    min-width: 18px;
    height: 18px;
    font-size: 10px;
  }

  .pc-nav-toggle {
    display: inline-flex !important;
  }
}

@media (max-width: 480px) {
  .site-header-inner,
  .pc-header-top {
    min-height: 250px;
  }

  .pc-header-left,
  .pc-header-right {
    top: 72%;
  }

  .pc-header-left {
    left: 12px;
  }

  .pc-header-right {
    right: 12px;
  }

  .pc-header-logo,
  .site-title.pc-header-logo {
    top: 35%;
  }

  .pc-header-btn {
    font-size: 7px;
    padding: 0 8px;
    min-height: 38px;
  }

  .pc-header-logo img,
  .site-title.pc-header-logo img {
    max-width: 105px;
  }
}

/* Centrar emojis dentro de los botones del header */
.pc-header-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px;
}

/* Iconos emoji */
.pc-cart-icon,
.pc-login-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  min-width: 18px;
  height: 18px;
  line-height: 1;
  font-size: 15px;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  text-shadow: none;
  transform: translateY(-1px);
}

/* Texto del botón */
.pc-header-btn span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Ajuste del contador del carrito */
.pc-cart-count {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1;
  transform: translateY(-1px);
}

/* ============================= */
/* TOP DONADOR PECADO CRAFT */
/* ============================= */
/* ============================= */
/* TOP DONADOR CON CUERPO ENTERO */
/* ============================= */

.pc-top-donator-widget {
  width: 100%;
  padding: 16px;
  border-radius: 8px;
  background: linear-gradient(180deg, #171717 0%, #0f0f0f 100%);
  border: 3px solid #2c2c2c;
  box-shadow:
    inset 0 0 0 2px #3e3e3e,
    0 8px 18px rgba(0,0,0,0.45);
  box-sizing: border-box;
}

.pc-top-title {
  margin: 0 0 14px 0 !important;
  padding: 0 0 12px 0;
  color: #ffffff;
  text-align: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  line-height: 1.4;
  text-shadow: 2px 2px 0 #000;
  border-bottom: 2px solid rgba(255,255,255,0.12);
}

.pc-top-content {
  width: 100%;
  margin: 0;
  padding: 0;
}

.pc-top-card {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 170px;
  padding: 14px;
  border-radius: 7px;
  background: linear-gradient(180deg, #4d7f34 0%, #345a24 100%);
  border: 3px solid #243f19;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.14),
    inset 0 -4px 0 rgba(0,0,0,0.28),
    0 4px 0 #000;
  box-sizing: border-box;
}

/* Placeholder */
.pc-top-placeholder {
  background: linear-gradient(180deg, #6f55ff 0%, #4150d8 100%);
  border-color: #2e3192;
}

.pc-top-body-wrap {
  position: relative;
  width: 96px;
  min-width: 96px;
  height: 138px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: linear-gradient(180deg, #242424 0%, #111111 100%);
  border: 3px solid #050505;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.10),
    0 3px 0 rgba(0,0,0,0.55);
  overflow: visible;
}

.pc-top-body {
  display: block;
  max-width: 74px;
  max-height: 122px;
  width: auto;
  height: auto;
  object-fit: contain;
  image-rendering: pixelated;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.pc-top-crown {
  position: absolute;
  top: -10px;
  right: -10px;
  z-index: 3;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: linear-gradient(180deg, #ffd84d 0%, #d7951f 100%);
  border: 2px solid #5a3900;
  color: #ffffff;
  font-size: 13px;
  line-height: 1;
  text-shadow: 1px 1px 0 #000;
  box-shadow: 0 2px 0 #000;
}

.pc-top-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.pc-top-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  margin-bottom: 8px;
  padding: 5px 7px;
  border-radius: 4px;
  background: rgba(0,0,0,0.32);
  color: #ffd84d;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  line-height: 1.2;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 #000;
}

.pc-top-username {
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  color: #ffffff;
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  line-height: 1.35;
  text-shadow: 2px 2px 0 #000;
  word-break: break-word;
}

.pc-top-text {
  margin: 0 !important;
  padding: 0 !important;
  color: #ffffff;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 700;
  text-shadow: 1px 1px 0 #000;
}

.pc-top-text strong {
  color: #ffd84d;
  font-weight: 900;
}

/* Limpieza de estilos viejos */
.widget-top-donator .avatar,
.widget-top-donator .username,
.widget-top-donator .empty {
  margin: 0;
}

/* Responsive */
@media (max-width: 768px) {
  .pc-top-card {
    flex-direction: column;
    text-align: center;
    align-items: center;
    min-height: auto;
  }

  .pc-top-info {
    align-items: center;
  }

  .pc-top-label {
    width: auto;
  }

  .pc-top-body-wrap {
    width: 100px;
    min-width: 100px;
    height: 146px;
  }

  .pc-top-body {
    max-width: 78px;
    max-height: 128px;
  }

  .pc-top-username {
    font-size: 10px;
  }

  .pc-top-text {
    font-size: 12px;
  }
}
/* ============================= */
/* ESPACIADO ENTRE WIDGETS */
/* ============================= */

/* Separación general entre widgets del lateral */
.sidebar .widget,
.site-sidebar .widget,
.widgets .widget,
.widget {
  margin-bottom: 22px !important;
}

/* Separación específica cuando un widget va justo debajo de otro */
.widget + .widget {
  margin-top: 22px !important;
}

/* Más aire entre el menú y el Top Donador */
.mc-navigation {
  margin-bottom: 24px !important;
}

/* Si el Top Donador queda muy pegado al menú */
.pc-top-donator-widget {
  margin-top: 24px !important;
}

/* Separación horizontal entre sidebar y contenido principal */
.site-content,
.content,
.body-content,
.store-content {
  gap: 36px !important;
}

/* Responsive */
@media (max-width: 768px) {
  .sidebar .widget,
  .site-sidebar .widget,
  .widgets .widget,
  .widget {
    margin-bottom: 18px !important;
  }

  .widget + .widget {
    margin-top: 18px !important;
  }

  .mc-navigation {
    margin-bottom: 20px !important;
  }

  .pc-top-donator-widget {
    margin-top: 20px !important;
  }
}


/* HOME */
/* ============================= */
/* HOME PECADO CRAFT */
/* ============================= */

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

.page-index .site-content {
  width: 100%;
  max-width: 1260px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
}

.page-index .site-content,
.page-index .site-content * {
  box-sizing: border-box;
}

.page-index .site-content-widgets > main,
.page-index .pc-home-main {
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
}

.pc-home-main {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* ============================= */
/* BLOQUES GENERALES */
/* ============================= */

.pc-featured-section,
.pc-description-card {
  width: 100%;
  max-width: 100%;
  border-radius: 8px;
  background: linear-gradient(180deg, #171717 0%, #0f0f0f 100%);
  border: 3px solid #2c2c2c;
  box-shadow:
    inset 0 0 0 2px #3e3e3e,
    0 8px 18px rgba(0,0,0,0.45);
  box-sizing: border-box;
  overflow: hidden;
}

.pc-featured-section {
  padding: 22px;
}

.pc-description-card {
  padding: 26px;
}

/* ============================= */
/* CABECERA DEL SLIDER */
/* ============================= */

.pc-featured-header {
  margin-bottom: 20px;
  text-align: center;
}

.pc-featured-kicker {
  display: inline-block;
  margin-bottom: 10px;
  padding: 6px 9px;
  border-radius: 4px;
  background: linear-gradient(180deg, #ffd84d 0%, #d7951f 100%);
  border: 2px solid #5a3900;
  color: #1b1b1b;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 3px 0 #000;
}

.pc-featured-header h2,
.pc-description-title h2 {
  margin: 0;
  color: #ffffff;
  font-family: 'Press Start 2P', monospace;
  font-size: 15px;
  line-height: 1.4;
  text-shadow: 2px 2px 0 #000;
}

.pc-featured-header p {
  max-width: 760px;
  margin: 12px auto 0;
  color: #ffffff;
  font-size: 14px;
  line-height: 1.55;
  font-weight: 700;
  text-shadow: 1px 1px 0 #000;
}

/* =========================================================
   HOME SLIDER - PECADO CRAFT PRO
========================================================= */

.pc-featured-section {
  position: relative;
  padding: 26px !important;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(65,196,195,0.12), transparent 34%),
    linear-gradient(180deg, #181818 0%, #0f0f0f 100%) !important;
}

.pc-featured-section::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.06);
  pointer-events: none;
}

.pc-featured-header {
  position: relative;
  z-index: 2;
  margin-bottom: 24px;
  text-align: center;
}

.pc-featured-kicker {
  margin-bottom: 12px;
}

.pc-featured-header h2 {
  font-size: 16px;
  letter-spacing: 0.5px;
}

.pc-featured-header p {
  max-width: 760px;
  margin: 14px auto 0;
  color: rgba(255,255,255,0.92);
}

/* Slider */
.pc-featured-slider {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 0 52px;
  box-sizing: border-box;
}

.pc-slider-window {
  width: 100%;
  overflow: hidden;
  border-radius: 8px;
}

.pc-slider-track {
  display: flex;
  gap: 16px;
  transition: transform 0.32s ease;
  will-change: transform;
}

/* Flechas */
.pc-slider-arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  transform: translateY(-50%);

  width: 38px;
  height: 88px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 7px;
  border: 3px solid #2f2f2f;
  background: linear-gradient(180deg, #252525 0%, #111 100%);
  color: #ffffff;

  font-size: 28px;
  line-height: 1;
  text-shadow: 2px 2px 0 #000;

  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.12),
    inset 0 -4px 0 rgba(0,0,0,0.4),
    0 4px 0 #000;

  cursor: pointer;
  transition: transform 0.12s ease, filter 0.12s ease;
}

.pc-slider-prev {
  left: 0;
}

.pc-slider-next {
  right: 0;
}

.pc-slider-arrow:hover {
  filter: brightness(1.15);
  transform: translateY(calc(-50% - 2px));
}

/* Tarjeta del paquete */
.pc-package-card {
  position: relative;
  flex: 0 0 100%;

  display: grid;
  grid-template-columns: 155px minmax(0, 1fr);
  align-items: center;
  gap: 28px;

  min-height: 220px;
  padding: 28px 30px;

  border-radius: 9px;
  border: 3px solid #263f1c;

  background:
    radial-gradient(circle at 18% 50%, rgba(255,216,77,0.16), transparent 24%),
    radial-gradient(circle at 88% 18%, rgba(122,92,255,0.18), transparent 26%),
    linear-gradient(135deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 38%),
    linear-gradient(180deg, #4d7f34 0%, #315321 100%);

  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.16),
    inset 0 -6px 0 rgba(0,0,0,0.32),
    0 5px 0 #000,
    0 12px 22px rgba(0,0,0,0.45);

  overflow: hidden;
  box-sizing: border-box;
}

.pc-package-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      115deg,
      transparent 0%,
      transparent 35%,
      rgba(255,255,255,0.08) 45%,
      transparent 56%,
      transparent 100%
    );
  opacity: 0.8;
  pointer-events: none;
}

.pc-package-card::after {
  content: "";
  position: absolute;
  inset: 10px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.08);
  pointer-events: none;
}

/* Imagen */
.pc-package-icon-wrap {
  position: relative;
  z-index: 2;

  width: 150px;
  height: 150px;
  min-width: 150px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,0.08), transparent 42%),
    linear-gradient(180deg, #242424 0%, #101010 100%);

  border: 3px solid #050505;

  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.10),
    inset 0 -5px 0 rgba(0,0,0,0.42),
    0 5px 0 rgba(0,0,0,0.75);
}

.pc-package-icon {
  width: auto;
  height: auto;
  max-width: 116px;
  max-height: 116px;
  object-fit: contain;
  image-rendering: pixelated;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,0.5));
}

/* Info */
.pc-package-info {
  position: relative;
  z-index: 2;

  min-width: 0;
  min-height: 150px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding-right: 126px;
}

.pc-package-tag {
  position: absolute;
  top: 0;
  right: 0;

  margin: 0;
  padding: 7px 10px;

  border-radius: 4px;
  border: 2px solid #5a3900;
  background: linear-gradient(180deg, #ffd84d 0%, #d7951f 100%);
  color: #1b1b1b;

  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: none;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 -2px 0 rgba(0,0,0,0.22),
    0 3px 0 #000;
}

.pc-package-info h3 {
  margin: 0 0 14px 0;

  color: #ffffff;
  font-family: 'Press Start 2P', monospace;
  font-size: 17px;
  line-height: 1.35;
  text-align: left;
  text-shadow: 2px 2px 0 #000;
}

.pc-package-info p {
  max-width: 620px;
  margin: 0 0 22px 0;

  color: rgba(255,255,255,0.94);
  font-size: 14px;
  line-height: 1.6;
  font-weight: 800;
  text-align: left;
  text-shadow: 1px 1px 0 #000;
}

/* Precio + botón */
.pc-package-bottom {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 18px;
  margin-top: auto;
}

.pc-package-price {
  color: #ffd84d;
  font-family: 'Press Start 2P', monospace;
  font-size: 12px;
  line-height: 1;
  text-shadow: 2px 2px 0 #000;
  white-space: nowrap;
}

.pc-package-btn {
  margin-left: auto;

  min-width: 170px;
  min-height: 44px;
  padding: 0 18px;

  border-radius: 6px;
  border: 3px solid #2e3192;
  background: linear-gradient(180deg, #7a5cff 0%, #4356e8 100%);

  color: #ffffff !important;
  text-decoration: none !important;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  line-height: 1;

  text-shadow: 1px 1px 0 #000;

  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.14),
    inset 0 -3px 0 rgba(0,0,0,0.35),
    0 3px 0 #000;

  transition: transform 0.12s ease, filter 0.12s ease;
}

.pc-package-btn:hover {
  filter: brightness(1.14);
  transform: translateY(-2px);
}

/* Responsive */
@media (max-width: 768px) {
  .pc-featured-section {
    padding: 18px !important;
  }

  .pc-featured-slider {
    padding: 0 42px;
  }

  .pc-slider-track {
    gap: 10px;
  }

  .pc-slider-arrow {
    width: 32px;
    height: 78px;
    font-size: 24px;
  }

  .pc-package-card {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;

    min-height: auto;
    padding: 24px 18px;
    gap: 18px;
  }

  .pc-package-icon-wrap {
    width: 128px;
    height: 128px;
    min-width: 128px;
  }

  .pc-package-icon {
    max-width: 96px;
    max-height: 96px;
  }

  .pc-package-info {
    width: 100%;
    min-height: 0;
    align-items: center;
    padding-right: 0;
  }

  .pc-package-tag {
    position: static;
    margin-bottom: 14px;
  }

  .pc-package-info h3,
  .pc-package-info p {
    text-align: center;
  }

  .pc-package-info h3 {
    font-size: 13px;
  }

  .pc-package-info p {
    font-size: 13px;
  }

  .pc-package-bottom {
    flex-direction: column;
    justify-content: center;
    gap: 14px;
  }

  .pc-package-btn {
    margin-left: 0;
    width: 100%;
    max-width: 240px;
  }
}

/* ============================= */
/* DESCRIPCIÓN HOME */
/* ============================= */

.pc-description-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 2px solid rgba(255,255,255,0.12);
}

.pc-description-icon {
  width: 42px;
  height: 42px;
  min-width: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  background: linear-gradient(180deg, #6f55ff 0%, #4150d8 100%);
  border: 3px solid #2e3192;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.14),
    inset 0 -3px 0 rgba(0,0,0,0.35),
    0 3px 0 #000;
}

.pc-description-text {
  width: 100%;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.pc-description-text p,
.pc-description-card p {
  margin: 0 0 14px 0;
  color: #ffffff;
  font-size: 15px;
  line-height: 1.65;
  font-weight: 700;
  text-shadow: 1px 1px 0 #000;
}

.pc-description-text strong,
.pc-description-card strong {
  color: #ffd84d;
}

.pc-description-points {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.pc-description-points div {
  min-height: 74px;
  padding: 14px;
  border-radius: 7px;
  background: linear-gradient(180deg, #222222 0%, #151515 100%);
  border: 3px solid #2e2e2e;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.10),
    inset 0 -4px 0 rgba(0,0,0,0.30),
    0 4px 0 #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;
  text-align: center;
}

.pc-description-points span {
  font-size: 24px;
  line-height: 1;
}

.pc-description-points strong {
  color: #ffffff;
  font-family: 'Press Start 2P', monospace;
  font-size: 8px;
  line-height: 1.35;
  text-shadow: 1px 1px 0 #000;
}

/* ============================= */
/* RESPONSIVE */
/* ============================= */

@media (max-width: 1024px) {
  .pc-package-card {
    flex: 0 0 100%;
    min-width: 0;
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .page-index .site-content {
    padding-left: 14px;
    padding-right: 14px;
  }

  .pc-home-main {
    gap: 22px;
  }

  .pc-featured-section,
  .pc-description-card {
    padding: 18px;
  }

  .pc-featured-header h2,
  .pc-description-title h2 {
    font-size: 12px;
  }

  .pc-featured-header p {
    font-size: 13px;
  }

  .pc-featured-slider {
    gap: 8px;
  }

  .pc-slider-track {
    gap: 10px;
  }

  .pc-slider-arrow {
    flex: 0 0 34px;
    width: 34px;
    min-width: 34px;
    max-width: 34px;
    font-size: 24px;
  }

  .pc-package-card {
    flex: 0 0 100%;
    max-width: 100%;
    flex-direction: column;
    text-align: center;
  }

  .pc-package-info {
    width: 100%;
  }

  .pc-package-bottom {
    flex-direction: column;
    justify-content: center;
  }

  .pc-description-title {
    flex-direction: column;
    text-align: center;
  }

  .pc-description-points {
    grid-template-columns: 1fr;
  }
}

/* ============================= */
/* FIX ETIQUETAS SLIDER */
/* ============================= */

.pc-package-card {
  position: relative;
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  align-items: center;
  gap: 24px;
  padding: 26px 26px 24px 26px;
}

/* Badge fijo, ya no flota en mitad del contenido */
.pc-package-tag {
  position: absolute;
  top: 18px;
  right: 18px;

  margin: 0;
  padding: 6px 9px;

  border-radius: 4px;
  background: linear-gradient(180deg, #ffd84d 0%, #d7951f 100%);
  border: 2px solid #5a3900;

  color: #1b1b1b;
  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  line-height: 1;
  text-transform: uppercase;
  text-shadow: none;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.25),
    inset 0 -2px 0 rgba(0,0,0,0.22),
    0 3px 0 #000;

  z-index: 3;
}

/* Contenido alineado y con espacio para la badge */
.pc-package-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 0;
  padding-right: 115px;
}

/* Título del paquete */
.pc-package-info h3 {
  margin: 0 0 12px 0;
  text-align: left;
}

/* Descripción */
.pc-package-info p {
  margin: 0 0 18px 0;
  text-align: left;
}

/* Precio + botón */
.pc-package-bottom {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Icono más integrado */
.pc-package-icon-wrap {
  justify-self: center;
}

/* Responsive */
@media (max-width: 768px) {
  .pc-package-card {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 22px 18px;
  }

  .pc-package-tag {
    top: 14px;
    right: 14px;
    font-size: 6px;
  }

  .pc-package-info {
    align-items: center;
    padding-right: 0;
  }

  .pc-package-info h3,
  .pc-package-info p {
    text-align: center;
  }

  .pc-package-bottom {
    flex-direction: column;
    justify-content: center;
    gap: 12px;
  }
}


/* ============================= */
/* LOGIN MODAL PECADO CRAFT FIX */
/* ============================= */

/* Overlay general */
.modal,
.popup,
.dialog {
  position: fixed !important;
  inset: 0 !important;
  z-index: 9999 !important;

  display: flex ;
  align-items: center !important;
  justify-content: center !important;

  padding: 24px !important;
  background: rgba(0, 0, 0, 0.72) !important;
  backdrop-filter: blur(3px);
}

/* Caja del login: compacta, no pantalla completa */
.modal-content,
.popup-content,
.dialog-content,
.login-modal,
#login-modal,
.login {
  position: relative !important;

  width: 100% !important;
  max-width: 420px !important;

  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;

  margin: 0 auto !important;
  padding: 28px !important;

  overflow: visible !important;

  background: linear-gradient(180deg, #1b1b1b 0%, #101010 100%) !important;
  border: 3px solid #2c2c2c !important;
  border-radius: 8px !important;

  box-shadow:
    inset 0 0 0 2px #3e3e3e,
    0 14px 35px rgba(0,0,0,0.75) !important;

  color: #ffffff !important;
  box-sizing: border-box !important;
}

/* Por si el tema fuerza altura completa */
.modal-content > *,
.popup-content > *,
.dialog-content > *,
.login-modal > *,
#login-modal > *,
.login > * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Título */
.modal h1,
.modal h2,
.modal h3,
.modal h4,
.popup h1,
.popup h2,
.popup h3,
.popup h4,
.dialog h1,
.dialog h2,
.dialog h3,
.dialog h4,
.login h1,
.login h2,
.login h3,
.login h4 {
  margin: 0 42px 18px 0 !important;

  color: #ffffff !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 15px !important;
  line-height: 1.45 !important;
  text-shadow: 2px 2px 0 #000 !important;
}

/* Etiquetas y textos */
.modal label,
.modal p,
.popup label,
.popup p,
.dialog label,
.dialog p,
.login label,
.login p {
  display: block !important;
  margin: 0 0 10px 0 !important;

  color: rgba(255,255,255,0.92) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  font-weight: 700 !important;
  text-shadow: 1px 1px 0 #000 !important;
}

/* Input visible y grande */
.modal input,
.popup input,
.dialog input,
.login input,
input[name="ign"],
input[name="username"] {
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;
  min-height: 54px !important;

  margin: 0 0 18px 0 !important;
  padding: 0 16px !important;

  background: linear-gradient(180deg, #2a2a2a 0%, #151515 100%) !important;
  border: 3px solid #4a4a4a !important;
  border-radius: 7px !important;

  color: #ffffff !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 11px !important;
  line-height: 1 !important;

  text-shadow: 1px 1px 0 #000 !important;

  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.12),
    inset 0 -4px 0 rgba(0,0,0,0.38),
    0 4px 0 #000 !important;

  outline: none !important;
  box-sizing: border-box !important;
}

.modal input::placeholder,
.popup input::placeholder,
.dialog input::placeholder,
.login input::placeholder {
  color: rgba(255,255,255,0.5) !important;
}

.modal input:focus,
.popup input:focus,
.dialog input:focus,
.login input:focus {
  border-color: #7a5cff !important;
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.12),
    inset 0 -4px 0 rgba(0,0,0,0.38),
    0 0 0 3px rgba(122,92,255,0.35),
    0 4px 0 #000 !important;
}

/* Botón login */
.modal button,
.modal input[type="submit"],
.modal .btn,
.popup button,
.popup input[type="submit"],
.popup .btn,
.dialog button,
.dialog input[type="submit"],
.dialog .btn,
.login button,
.login input[type="submit"],
.login .btn {
  min-height: 46px !important;
  padding: 0 18px !important;

  border-radius: 6px !important;
  border: 3px solid #2e3192 !important;

  background: linear-gradient(180deg, #7a5cff 0%, #4356e8 100%) !important;
  color: #ffffff !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  font-family: 'Press Start 2P', monospace !important;
  font-size: 10px !important;
  line-height: 1 !important;
  font-weight: 800 !important;

  text-shadow: 2px 2px 0 #000 !important;

  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.14),
    inset 0 -3px 0 rgba(0,0,0,0.35),
    0 3px 0 #000 !important;

  cursor: pointer !important;
}

.modal button:hover,
.modal input[type="submit"]:hover,
.popup button:hover,
.popup input[type="submit"]:hover,
.dialog button:hover,
.dialog input[type="submit"]:hover,
.login button:hover,
.login input[type="submit"]:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

/* Cerrar */
.modal .close,
.modal .modal-close,
.popup .close,
.popup .popup-close,
.dialog .close,
button.close,
a.close {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;

  width: 34px !important;
  height: 34px !important;
  min-height: 34px !important;

  padding: 0 !important;
  margin: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background: linear-gradient(180deg, #333333 0%, #181818 100%) !important;
  border: 2px solid #4a4a4a !important;
  border-radius: 6px !important;

  color: transparent !important;
  font-size: 0 !important;
  text-decoration: none !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -2px 0 rgba(0,0,0,0.35),
    0 2px 0 #000 !important;
}

.modal .close::before,
.modal .modal-close::before,
.popup .close::before,
.popup .popup-close::before,
.dialog .close::before,
button.close::before,
a.close::before {
  content: "×";
  color: #ffffff;
  font-size: 22px;
  line-height: 1;
  text-shadow: 1px 1px 0 #000;
}

/* Evita que el formulario se estire raro */
.modal form,
.popup form,
.dialog form,
.login form {
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Mobile */
@media (max-width: 768px) {
  .modal,
  .popup,
  .dialog {
    align-items: flex-start !important;
    padding: 80px 16px 24px 16px !important;
  }

  .modal-content,
  .popup-content,
  .dialog-content,
  .login-modal,
  #login-modal,
  .login {
    max-width: 100% !important;
    padding: 24px !important;
  }

  .modal h1,
  .modal h2,
  .modal h3,
  .modal h4,
  .popup h1,
  .popup h2,
  .popup h3,
  .popup h4,
  .login h1,
  .login h2,
  .login h3,
  .login h4 {
    font-size: 12px !important;
  }

  .modal input,
  .popup input,
  .dialog input,
  .login input {
    min-height: 50px !important;
    font-size: 10px !important;
  }
}
/* ============================= */
/* FIX TEXTO INPUT LOGIN */
/* ============================= */

.modal input,
.popup input,
.dialog input,
.login input,
input[name="ign"],
input[name="username"] {
  font-size: 9px !important;
  letter-spacing: 0 !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
  text-overflow: ellipsis !important;
}

.modal input::placeholder,
.popup input::placeholder,
.dialog input::placeholder,
.login input::placeholder {
  font-size: 9px !important;
  color: rgba(255,255,255,0.55) !important;
}


/* ============================= */
/* LOGIN MODAL TAMAÑO EQUILIBRADO */
/* ============================= */

.modal-content,
.modal-dialog,
.modal-window,
.modal-inner,
.modal-box,
.popup-content,
.popup-inner,
.dialog-content,
.dialog-inner,
.login-modal,
#login-modal,
.login,
.modal > div,
.popup > div,
.dialog > div {
  width: 460px !important;
  max-width: calc(100vw - 32px) !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

/* La caja interna no debe estirar el input */
.modal form,
.popup form,
.dialog form,
.login form,
.login-modal form,
#login-modal form {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

/* Input bien contenido dentro de la caja */
.modal input:not([type="submit"]),
.popup input:not([type="submit"]),
.dialog input:not([type="submit"]),
.login input:not([type="submit"]),
.login-modal input:not([type="submit"]),
#login-modal input:not([type="submit"]),
input[name="ign"],
input[name="username"] {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  height: 54px !important;
  margin: 0 0 18px 0 !important;
  padding: 0 14px !important;

  box-sizing: border-box !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  font-size: 9px !important;
  letter-spacing: 0 !important;
}

/* Placeholder */
.modal input::placeholder,
.popup input::placeholder,
.dialog input::placeholder,
.login input::placeholder,
.login-modal input::placeholder,
#login-modal input::placeholder {
  font-size: 9px !important;
  opacity: 0.65 !important;
}

/* Botón login normal, sin estirar */
.modal button,
.popup button,
.dialog button,
.login button,
.login-modal button,
#login-modal button,
.modal input[type="submit"],
.popup input[type="submit"],
.dialog input[type="submit"],
.login input[type="submit"] {
  width: auto !important;
  min-width: 100px !important;
  max-width: 100% !important;
}

/* Móvil */
@media (max-width: 768px) {
  .modal-content,
  .modal-dialog,
  .modal-window,
  .modal-inner,
  .modal-box,
  .popup-content,
  .popup-inner,
  .dialog-content,
  .dialog-inner,
  .login-modal,
  #login-modal,
  .login,
  .modal > div,
  .popup > div,
  .dialog > div {
    width: calc(100vw - 32px) !important;
    max-width: calc(100vw - 32px) !important;
    min-width: 0 !important;
  }

  .modal input:not([type="submit"]),
  .popup input:not([type="submit"]),
  .dialog input:not([type="submit"]),
  .login input:not([type="submit"]) {
    font-size: 8px !important;
  }
}

/* =========================================================
   FIX CARRITO / BASKET POPUP TEBEX
   Pegar AL FINAL del CSS
========================================================= */

.popup:has(.basket-popup-content) {
  padding: 18px !important;
}



/* Evita que el cierre del login rompa el carrito */
.basket-popup-content .popup-close {
  top: 14px !important;
  right: 14px !important;

  width: 36px !important;
  height: 32px !important;
  min-height: 32px !important;

  padding: 0 !important;
  margin: 0 !important;
}

/* Contenido interior */
.basket-popup-content .basket-items {
  padding: 18px 22px !important;
  box-sizing: border-box !important;
}

/* Item del carrito */
.basket-popup-content .basket-item {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;

  padding: 18px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;

  border-radius: 6px !important;
  background: rgba(0,0,0,0.28) !important;
}

/* Fila de cantidad */
.basket-popup-content .basket-item .quantity,
.basket-popup-content .basket-item .quantity-field {
  display: inline-flex !important;
  align-items: stretch !important;
  justify-content: flex-start !important;

  width: auto !important;
  max-width: 160px !important;

  height: 42px !important;
  min-height: 42px !important;

  margin: 10px 0 8px 0 !important;
  padding: 0 !important;

  gap: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;

  border-radius: 6px !important;
}

/* Botones - y + */
.basket-popup-content .basket-item .quantity button,
.basket-popup-content .basket-item .quantity .btn,
.basket-popup-content .basket-item .quantity-field button,
.basket-popup-content .basket-item .quantity-field .btn {
  flex: 0 0 42px !important;

  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;

  height: 42px !important;
  min-height: 42px !important;

  margin: 0 !important;
  padding: 0 !important;

  border-radius: 0 !important;

  font-family: 'Press Start 2P', monospace !important;
  font-size: 10px !important;
  line-height: 1 !important;

  box-sizing: border-box !important;
}

/* Input numérico del carrito */
.basket-popup-content .basket-item input[type="number"],
.basket-popup-content .basket-item .quantity input,
.basket-popup-content .basket-item .quantity-field input {
  flex: 0 0 64px !important;

  width: 64px !important;
  min-width: 64px !important;
  max-width: 64px !important;

  height: 42px !important;
  min-height: 42px !important;

  margin: 0 !important;
  padding: 0 6px !important;

  text-align: center !important;

  font-family: 'Press Start 2P', monospace !important;
  font-size: 9px !important;
  line-height: 1 !important;

  border-radius: 0 !important;
  box-shadow: none !important;
  box-sizing: border-box !important;
}

/* Evita desbordes de textos/precios */
.basket-popup-content,
.basket-popup-content * {
  max-width: 100%;
  box-sizing: border-box;
}

.basket-popup-content .basket-item,
.basket-popup-content .basket-item * {
  overflow-wrap: anywhere;
}

/* Total y checkout */
.basket-popup-content .basket-total,
.basket-popup-content .total {
  padding-left: 22px !important;
  padding-right: 22px !important;
}

.basket-popup-content .btn-primary,
.basket-popup-content a.btn,
.basket-popup-content button[type="submit"] {
  max-width: 100% !important;
  white-space: normal !important;
}

/* =========================================================
   FIX POPUP DE PAQUETE / PRODUCTO TEBEX
   Pegar AL FINAL del CSS
========================================================= */

/* Caja del popup de producto */
.popup:has(.store-product-full) .popup-content,
.popup:has(.store-product) .popup-content {
  width: min(460px, calc(100vw - 32px)) !important;
  max-width: min(460px, calc(100vw - 32px)) !important;
  min-width: 0 !important;

  height: auto !important;
  max-height: calc(100vh - 32px) !important;

  margin: auto !important;
  padding: 28px !important;

  overflow: hidden auto !important;
  box-sizing: border-box !important;

  border-radius: 8px !important;
  background: linear-gradient(180deg, #1b1b1b 0%, #101010 100%) !important;
  border: 3px solid #2c2c2c !important;

  box-shadow:
    inset 0 0 0 2px #3e3e3e,
    0 14px 35px rgba(0,0,0,0.75) !important;
}

/* Evita que el popup se salga */
.popup:has(.store-product-full),
.popup:has(.store-product) {
  padding: 20px !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Imagen del producto */
.popup:has(.store-product-full) img,
.popup:has(.store-product) img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

/* Contenedor del producto */
.popup:has(.store-product-full) .store-product-full,
.popup:has(.store-product) .store-product {
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  box-sizing: border-box !important;
}

/* Descripción */
.popup:has(.store-product-full) .description,
.popup:has(.store-product) .description,
.popup:has(.store-product-full) .store-product-description,
.popup:has(.store-product) .store-product-description {
  max-width: 100% !important;
  overflow-wrap: anywhere !important;
  font-size: 12px !important;
  line-height: 1.55 !important;
}

/* =========================================================
   PRODUCT POPUP TEBEX - ANCHO + SIN CANTIDAD
   Pegar AL FINAL del CSS
========================================================= */

/* Fuerza también el contenedor directo del popup, no solo .popup-content */
.popup:not(:has(.basket-popup-content)):not(.popup-media-slider) > div,
.popup:not(:has(.basket-popup-content)):not(.popup-media-slider) .popup-content {
  width: 720px !important;
  max-width: calc(100vw - 40px) !important;

  min-width: 0 !important;
  height: auto !important;
  max-height: calc(100vh - 40px) !important;

  margin: auto !important;
  padding: 28px !important;

  overflow-x: hidden !important;
overflow-y: hidden;

  box-sizing: border-box !important;
}

/* Caja visual */
.popup:not(:has(.basket-popup-content)):not(.popup-media-slider) .popup-content {
  border-radius: 8px !important;
  background: linear-gradient(180deg, #1b1b1b 0%, #101010 100%) !important;
  border: 3px solid #2c2c2c !important;

  box-shadow:
    inset 0 0 0 2px #3e3e3e,
    0 14px 35px rgba(0,0,0,0.75) !important;
}

/* Evita recortes internos */
.popup:not(:has(.basket-popup-content)):not(.popup-media-slider) .popup-content,
.popup:not(:has(.basket-popup-content)):not(.popup-media-slider) .popup-content * {
  box-sizing: border-box !important;
}

/* Título */
.popup:not(:has(.basket-popup-content)):not(.popup-media-slider) .popup-content h1,
.popup:not(:has(.basket-popup-content)):not(.popup-media-slider) .popup-content h2,
.popup:not(:has(.basket-popup-content)):not(.popup-media-slider) .popup-content h3 {
  margin: 0 58px 24px 0 !important;

  color: #ffffff !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 16px !important;
  line-height: 1.4 !important;
  text-shadow: 2px 2px 0 #000 !important;

  overflow-wrap: anywhere !important;
}

/* Botón cerrar limpio */
.popup:not(:has(.basket-popup-content)):not(.popup-media-slider) .popup-close,
.popup:not(:has(.basket-popup-content)):not(.popup-media-slider) .close {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;

  width: 42px !important;
  height: 36px !important;
  min-height: 36px !important;

  padding: 0 !important;
  margin: 0 !important;

  overflow: hidden !important;
  text-indent: -9999px !important;
  white-space: nowrap !important;

  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;

  border-radius: 6px !important;
  border: 2px solid #4a4a4a !important;
  background: linear-gradient(180deg, #333333 0%, #181818 100%) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.12),
    inset 0 -2px 0 rgba(0,0,0,0.35),
    0 2px 0 #000 !important;
}

.popup:not(:has(.basket-popup-content)):not(.popup-media-slider) .popup-close::before,
.popup:not(:has(.basket-popup-content)):not(.popup-media-slider) .close::before {
  content: "×" !important;

  position: absolute !important;
  inset: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  text-indent: 0 !important;

  color: #ffffff !important;
  font-size: 24px !important;
  line-height: 1 !important;
  text-shadow: 1px 1px 0 #000 !important;
}

/* Imagen centrada y sin salirse */
.popup:not(:has(.basket-popup-content)):not(.popup-media-slider) .popup-content img {
  display: block !important;

  width: auto !important;
  max-width: 100% !important;
  max-height: 360px !important;

  height: auto !important;
  object-fit: contain !important;

  margin: 0 auto 24px auto !important;

  border-radius: 6px !important;
}

/* Descripción */
.popup:not(:has(.basket-popup-content)):not(.popup-media-slider) .popup-content p,
.popup:not(:has(.basket-popup-content)):not(.popup-media-slider) .popup-content .description,
.popup:not(:has(.basket-popup-content)):not(.popup-media-slider) .popup-content .store-product-description {
  max-width: 100% !important;

  margin: 0 0 24px 0 !important;

  color: #ffffff !important;
  font-size: 12px !important;
  line-height: 1.65 !important;
  font-weight: 700 !important;
  text-shadow: 1px 1px 0 #000 !important;

  overflow-wrap: anywhere !important;
}

/* =========================================================
   OCULTAR SELECTOR DE CANTIDAD
========================================================= */

.popup:not(:has(.basket-popup-content)):not(.popup-media-slider) .popup-content .quantity,
.popup:not(:has(.basket-popup-content)):not(.popup-media-slider) .popup-content .quantity-field,
.popup:not(:has(.basket-popup-content)):not(.popup-media-slider) .popup-content input[type="number"] {
  display: none !important;
}

/* Formulario inferior: solo precio + botón */
.popup:not(:has(.basket-popup-content)):not(.popup-media-slider) .popup-content form,
.popup:not(:has(.basket-popup-content)):not(.popup-media-slider) .popup-content .actions,
.popup:not(:has(.basket-popup-content)):not(.popup-media-slider) .popup-content .store-product-actions {
  display: grid !important;
  grid-template-columns: auto minmax(220px, 1fr) !important;
  align-items: center !important;
  gap: 18px !important;

  width: 100% !important;
  max-width: 100% !important;

  margin: 26px 0 0 0 !important;
  padding: 22px 0 0 0 !important;

  border-top: 2px solid rgba(255,255,255,0.1) !important;

  overflow: visible !important;
  box-sizing: border-box !important;
}

.popup:not(:has(.basket-popup-content)):not(.popup-media-slider) .login-popup-content form{
    display:flex!important;
    flex-direction:column!important;
}

/* Precio */
.popup:not(:has(.basket-popup-content)):not(.popup-media-slider) .popup-content .price,
.popup:not(:has(.basket-popup-content)):not(.popup-media-slider) .popup-content .amount,
.popup:not(:has(.basket-popup-content)):not(.popup-media-slider) .popup-content .cost,
.popup:not(:has(.basket-popup-content)):not(.popup-media-slider) .popup-content [class*="price"] {
  width: auto !important;
  min-width: 130px !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #41C4C3 !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 18px !important;
  line-height: 1.2 !important;
  text-align: left !important;
  white-space: nowrap !important;
  text-shadow: 2px 2px 0 #000 !important;
}

/* Botón Add to Basket */
.popup:not(:has(.basket-popup-content)):not(.popup-media-slider) .popup-content form button[type="submit"],
.popup:not(:has(.basket-popup-content)):not(.popup-media-slider) .popup-content form input[type="submit"],
.popup:not(:has(.basket-popup-content)):not(.popup-media-slider) .popup-content form .btn-primary {
  width: 100% !important;
  min-width: 220px !important;
  max-width: 100% !important;

  height: 48px !important;
  min-height: 48px !important;

  margin: 0 !important;
  padding: 0 18px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 6px !important;

  font-family: 'Press Start 2P', monospace !important;
  font-size: 9px !important;
  line-height: 1.25 !important;
  text-align: center !important;

  white-space: normal !important;
  overflow: hidden !important;

  box-sizing: border-box !important;
}

/* Pantallas pequeñas */
@media (max-width: 620px) {
  .popup:not(:has(.basket-popup-content)):not(.popup-media-slider) > div,
  .popup:not(:has(.basket-popup-content)):not(.popup-media-slider) .popup-content {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    padding: 22px !important;
  }

  .popup:not(:has(.basket-popup-content)):not(.popup-media-slider) .popup-content img {
    max-height: 300px !important;
  }

  .popup:not(:has(.basket-popup-content)):not(.popup-media-slider) .popup-content form,
  .popup:not(:has(.basket-popup-content)):not(.popup-media-slider) .popup-content .actions,
  .popup:not(:has(.basket-popup-content)):not(.popup-media-slider) .popup-content .store-product-actions {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .popup:not(:has(.basket-popup-content)):not(.popup-media-slider) .popup-content [class*="price"] {
    min-width: 0 !important;
    text-align: center !important;
    font-size: 16px !important;
  }

  .popup:not(:has(.basket-popup-content)):not(.popup-media-slider) .popup-content form button[type="submit"],
  .popup:not(:has(.basket-popup-content)):not(.popup-media-slider) .popup-content form input[type="submit"],
  .popup:not(:has(.basket-popup-content)):not(.popup-media-slider) .popup-content form .btn-primary {
    min-width: 0 !important;
    width: 100% !important;
  }
}


/* =========================================================
   CATEGORÍA / PRODUCTOS - PECADO CRAFT DEFINITIVO
   Pegar AL FINAL del CSS
========================================================= */

/* Contenedor */
.pc-category-main {
  width: 100%;
  min-width: 0;
}

.pc-category-products,
.pc-category-main .store-products-list {
  display: grid !important;
  gap: 18px !important;
}

/* Descripción de categoría */
.pc-category-main .category-description {
  margin-bottom: 22px !important;
  padding: 24px !important;

  border-radius: 8px !important;
  background: linear-gradient(180deg, #171717 0%, #0f0f0f 100%) !important;
  border: 3px solid #2c2c2c !important;

  box-shadow:
    inset 0 0 0 2px #3e3e3e,
    0 8px 18px rgba(0,0,0,0.45) !important;

  color: #ffffff !important;
}

/* Tarjeta de producto */
.pc-category-main .store-products-list .store-product {
  display: grid !important;
  grid-template-columns: 82px minmax(0, 1fr) minmax(360px, 430px) !important;
  grid-template-areas: "image title actions";
  align-items: center !important;
  gap: 22px !important;

  width: 100% !important;
  min-height: 128px !important;

  margin: 0 !important;
  padding: 18px 22px !important;

  border-radius: 8px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.035) 0%, rgba(0,0,0,0.12) 100%),
    linear-gradient(180deg, #182417 0%, #111a10 100%) !important;

  border: 3px solid #314f2a !important;

  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.08),
    inset 0 -5px 0 rgba(0,0,0,0.35),
    0 5px 0 #000,
    0 10px 18px rgba(0,0,0,0.35) !important;

  box-sizing: border-box !important;
  overflow: visible !important;

  transition: transform 0.12s ease, filter 0.12s ease;
}

.pc-category-main .store-products-list .store-product:hover {
  transform: translateY(-2px);
  filter: brightness(1.08);
}

/* Imagen */
.pc-category-main .store-products-list .store-product .image-link {
  grid-area: image !important;

  width: 74px !important;
  height: 74px !important;
  margin: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 7px !important;
  background: linear-gradient(180deg, #242424 0%, #111111 100%) !important;
  border: 3px solid #050505 !important;

  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.10),
    inset 0 -4px 0 rgba(0,0,0,0.35),
    0 4px 0 rgba(0,0,0,0.65) !important;

  overflow: hidden !important;
}

.pc-category-main .store-products-list .store-product .image {
  width: auto !important;
  max-width: 56px !important;
  max-height: 56px !important;
  margin: 0 !important;

  object-fit: contain !important;
  image-rendering: pixelated;
}

/* Título */
.pc-category-main .store-products-list .store-product .product-title {
  grid-area: title !important;

  margin: 0 !important;
  padding: 0 !important;

  color: #ffffff !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 13px !important;
  line-height: 1.45 !important;
  font-weight: 700 !important;

  text-shadow: 2px 2px 0 #000 !important;
  overflow-wrap: anywhere !important;
}

.pc-category-main .store-products-list .store-product .product-title a {
  color: #ffffff !important;
}

/* Acciones: precio + botón + selector */
.pc-category-main .store-products-list .store-product .actions {
  grid-area: actions !important;

  display: grid !important;
  grid-template-columns: 120px minmax(230px, 260px) !important;
  grid-template-areas:
    "price button"
    "price quantity";

  align-items: center !important;
  justify-content: end !important;

  gap: 8px 16px !important;

  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;
  position: relative !important;
}

/* Precio */
.pc-category-main .store-products-list .store-product .actions .price {
  grid-area: price !important;

  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;

  justify-self: center !important;
  align-self: center !important;

  color: #ffd84d !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  text-align: center !important;
  white-space: nowrap !important;

  text-shadow: 2px 2px 0 #000 !important;
}

.pc-category-main .store-products-list .store-product .actions .price strong {
  font-size: inherit !important;
  font-weight: inherit !important;
}

/* Botón principal */
.pc-category-main .store-products-list .store-product .actions > .btn-primary,
.pc-category-main .store-products-list .store-product .actions > .btn-secondary,
.pc-category-main .store-products-list .store-product .actions > a.btn,
.pc-category-main .store-products-list .store-product .actions > button[type="submit"],
.pc-category-main .store-products-list .store-product .actions > input[type="submit"] {
  grid-area: button !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;

  height: 44px !important;
  min-height: 44px !important;

  margin: 0 !important;
  padding: 0 14px !important;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  border-radius: 6px !important;
  border: 3px solid #2e3192 !important;

  background: linear-gradient(180deg, #7a5cff 0%, #4356e8 100%) !important;
  color: #ffffff !important;

  font-family: 'Press Start 2P', monospace !important;
  font-size: 0 !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  text-align: center !important;
  text-decoration: none !important;

  text-shadow: 1px 1px 0 #000 !important;

  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.14),
    inset 0 -3px 0 rgba(0,0,0,0.35),
    0 3px 0 #000 !important;

  overflow: hidden !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
}

.pc-category-main .store-products-list .store-product .actions > .btn-primary::before,
.pc-category-main .store-products-list .store-product .actions > .btn-secondary::before,
.pc-category-main .store-products-list .store-product .actions > a.btn::before,
.pc-category-main .store-products-list .store-product .actions > button[type="submit"]::before {
  content: "Añadir al carrito";
  font-size: 8px !important;
  line-height: 1.2 !important;
}

.pc-category-main .store-products-list .store-product .actions > .btn-primary:hover,
.pc-category-main .store-products-list .store-product .actions > .btn-secondary:hover,
.pc-category-main .store-products-list .store-product .actions > a.btn:hover,
.pc-category-main .store-products-list .store-product .actions > button[type="submit"]:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

/* Selector de cantidad */
.pc-category-main .store-products-list .store-product .actions .quantity-field {
  grid-area: quantity !important;

  --btn-size: 36px !important;

  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;

  height: 42px !important;
  min-height: 42px !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  align-items: stretch !important;
  justify-content: stretch !important;

  border-radius: 6px !important;
  border: 3px solid #4a4a4a !important;

  background: linear-gradient(180deg, #222222 0%, #111111 100%) !important;

  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.10),
    inset 0 -3px 0 rgba(0,0,0,0.35),
    0 3px 0 #000 !important;

  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Botones - y + */
.pc-category-main .store-products-list .store-product .quantity-field .adjust {
  flex: 0 0 42px !important;

  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;

  height: 36px !important;
  min-height: 36px !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  color: #ffffff !important;

  font-family: 'Press Start 2P', monospace !important;
  font-size: 0 !important;
  line-height: 1 !important;

  text-shadow: 1px 1px 0 #000 !important;
}

.pc-category-main .store-products-list .store-product .quantity-field .adjust::before {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 100% !important;
  height: 100% !important;

  background: none !important;
  mask: none !important;

  color: #ffffff !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

.pc-category-main .store-products-list .store-product .quantity-field .adjust.decrease {
  order: 1 !important;
  margin-right: 0 !important;
}

.pc-category-main .store-products-list .store-product .quantity-field .adjust.decrease::before {
  content: "−" !important;
}

.pc-category-main .store-products-list .store-product .quantity-field .adjust.increase {
  order: 4 !important;
  margin-left: 0 !important;
}

.pc-category-main .store-products-list .store-product .quantity-field .adjust.increase::before {
  content: "+" !important;
}

/* Número */
.pc-category-main .store-products-list .store-product .quantity-field input[type="number"] {
  order: 2 !important;

  flex: 0 0 30px !important;

  width: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;

  height: 36px !important;
  min-height: 36px !important;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-left: 2px solid rgba(255,255,255,0.08) !important;

  background: rgba(0,0,0,0.22) !important;
  color: #ffffff !important;

  font-family: 'Press Start 2P', monospace !important;
  font-size: 8px !important;
  line-height: 36px !important;
  text-align: right !important;

  box-shadow: none !important;
  box-sizing: border-box !important;
}

/* Texto "en carrito" */
.pc-category-main .store-products-list .store-product .quantity-field .open-basket {
  order: 3 !important;

  flex: 1 1 auto !important;

  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;

  height: 36px !important;
  min-height: 36px !important;

  margin: 0 !important;
  padding: 0 8px 0 4px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;

  border: 0 !important;
  border-right: 2px solid rgba(255,255,255,0.08) !important;

  background: rgba(0,0,0,0.22) !important;
  color: #ffffff !important;

  font-family: 'Press Start 2P', monospace !important;
  font-size: 0 !important;
  line-height: 1 !important;
  text-align: left !important;

  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;

  box-sizing: border-box !important;
}

.pc-category-main .store-products-list .store-product .quantity-field .open-basket::before {
  content: "en carrito";
  display: block;

  color: #ffffff !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 7px !important;
  line-height: 1.1 !important;
  text-shadow: 1px 1px 0 #000 !important;

  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Evita que estilos globales de botones rompan el selector */
.pc-category-main .store-products-list .store-product .quantity-field .btn-primary,
.pc-category-main .store-products-list .store-product .quantity-field .btn-secondary,
.pc-category-main .store-products-list .store-product .quantity-field .btn-tertiary,
.pc-category-main .store-products-list .store-product .quantity-field .btn-icon,
.pc-category-main .store-products-list .store-product .quantity-field .btn-glyph {
  width: 42px !important;
  min-width: 42px !important;
  height: 36px !important;
  min-height: 36px !important;

  padding: 0 !important;
  line-height: 1 !important;

  background-image: none !important;
  background-color: transparent !important;
}

/* Sin productos */
.pc-category-main .no-products {
  padding: 24px !important;

  border-radius: 8px !important;
  background: linear-gradient(180deg, #171717 0%, #0f0f0f 100%) !important;
  border: 3px solid #2c2c2c !important;

  box-shadow:
    inset 0 0 0 2px #3e3e3e,
    0 8px 18px rgba(0,0,0,0.45) !important;

  color: #ffffff !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 11px !important;
  line-height: 1.5 !important;
  text-align: center !important;
  text-shadow: 2px 2px 0 #000 !important;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1050px) {
  .pc-category-main .store-products-list .store-product {
    grid-template-columns: 76px minmax(0, 1fr) !important;
    grid-template-areas:
      "image title"
      "image actions";
    gap: 14px 18px !important;
  }

  .pc-category-main .store-products-list .store-product .actions {
    justify-content: start !important;
    grid-template-columns: 110px minmax(230px, 260px) !important;
  }

  .pc-category-main .store-products-list .store-product .actions .price {
    justify-self: start !important;
    text-align: left !important;
  }
}

@media (max-width: 700px) {
  .pc-category-main .store-products-list .store-product {
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "image"
      "title"
      "actions";

    justify-items: center !important;
    text-align: center !important;

    padding: 20px !important;
  }

  .pc-category-main .store-products-list .store-product .product-title {
    text-align: center !important;
    font-size: 11px !important;
  }

  .pc-category-main .store-products-list .store-product .actions {
    width: 100% !important;
    max-width: 320px !important;

    grid-template-columns: 1fr !important;
    grid-template-areas:
      "price"
      "button"
      "quantity";

    justify-content: center !important;
    gap: 12px !important;
  }

  .pc-category-main .store-products-list .store-product .actions .price {
    justify-self: center !important;
    text-align: center !important;
  }

  .pc-category-main .store-products-list .store-product .actions > .btn-primary,
  .pc-category-main .store-products-list .store-product .actions > .btn-secondary,
  .pc-category-main .store-products-list .store-product .actions > a.btn,
  .pc-category-main .store-products-list .store-product .actions > button[type="submit"],
  .pc-category-main .store-products-list .store-product .actions > input[type="submit"],
  .pc-category-main .store-products-list .store-product .actions .quantity-field {
    width: 100% !important;
    max-width: 320px !important;
  }
}
/* =========================================================
   HOME SLIDER - FIX ESPACIADO FINAL
   Pegar AL FINAL del CSS
========================================================= */

.pc-package-card {
  display: grid !important;
  grid-template-columns: 155px minmax(0, 1fr) 180px !important;
  grid-template-rows: auto 1fr auto !important;
  grid-template-areas:
    "image title tag"
    "image text  tag"
    "image bottom bottom" !important;

  align-items: center !important;
  gap: 14px 28px !important;

  min-height: 220px !important;
  padding: 28px 30px !important;
}

/* Imagen izquierda */
.pc-package-icon-wrap {
  grid-area: image !important;
  align-self: center !important;
  justify-self: center !important;
}

/* Hacemos que los hijos de info entren en la grid de la tarjeta */
.pc-package-info {
  display: contents !important;
  padding-right: 0 !important;
  min-height: 0 !important;
}

/* Título */
.pc-package-info h3 {
  grid-area: title !important;

  margin: 0 !important;
  align-self: end !important;

  font-size: 17px !important;
  line-height: 1.35 !important;
  text-align: left !important;
}

/* Descripción */
.pc-package-info p {
  grid-area: text !important;

  max-width: 100% !important;
  margin: 0 !important;

  align-self: start !important;

  font-size: 14px !important;
  line-height: 1.6 !important;
  text-align: left !important;
}

/* Badge derecha arriba */
.pc-package-tag {
  grid-area: tag !important;

  position: static !important;
  justify-self: end !important;
  align-self: start !important;

  margin: 0 !important;
}

/* Fila inferior: precio izquierda, botón derecha */
.pc-package-bottom {
  grid-area: bottom !important;

  width: 100% !important;

  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 180px !important;
  align-items: center !important;
  gap: 20px !important;

  margin: 4px 0 0 0 !important;
}

/* Precio */
.pc-package-price {
  justify-self: start !important;
  align-self: center !important;

  font-size: 12px !important;
}

/* Botón */
.pc-package-btn {
  justify-self: end !important;

  width: 180px !important;
  min-width: 180px !important;
  margin-left: 0 !important;
}

/* Más limpieza visual dentro del banner */
.pc-package-card::after {
  inset: 10px !important;
}

/* Responsive */
@media (max-width: 768px) {
  .pc-package-card {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    grid-template-areas:
      "tag"
      "image"
      "title"
      "text"
      "bottom" !important;

    justify-items: center !important;
    text-align: center !important;

    gap: 16px !important;
    padding: 24px 18px !important;
  }

  .pc-package-tag {
    justify-self: center !important;
  }

  .pc-package-info h3,
  .pc-package-info p {
    text-align: center !important;
  }

  .pc-package-bottom {
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 14px !important;
    margin-top: 0 !important;
  }

  .pc-package-price {
    justify-self: center !important;
  }

  .pc-package-btn {
    justify-self: center !important;
    width: 100% !important;
    max-width: 240px !important;
    min-width: 0 !important;
  }
}

/* =========================================================
   DESCRIPCIÓN HOME - PECADO CRAFT MEJORADA
   Pegar AL FINAL del CSS
========================================================= */

.pc-description-card {
  position: relative;
  padding: 30px !important;
  border-radius: 10px !important;
  overflow: hidden;

  background:
    radial-gradient(circle at 12% 0%, rgba(122,92,255,0.18), transparent 34%),
    radial-gradient(circle at 88% 12%, rgba(65,196,195,0.14), transparent 30%),
    linear-gradient(180deg, #1a1a1a 0%, #0d0d0d 100%) !important;

  border: 3px solid #2c2c2c !important;

  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.08),
    inset 0 -6px 0 rgba(0,0,0,0.35),
    0 6px 0 #000,
    0 14px 28px rgba(0,0,0,0.55) !important;
}

.pc-description-card::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.07);
  pointer-events: none;
}

.pc-description-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      120deg,
      transparent 0%,
      transparent 36%,
      rgba(255,255,255,0.055) 47%,
      transparent 58%,
      transparent 100%
    );
  pointer-events: none;
}

.pc-description-title,
.pc-description-text,
.pc-description-actions,
.pc-description-points {
  position: relative;
  z-index: 2;
}

/* Título */
.pc-description-title {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;

  margin-bottom: 22px !important;
  padding-bottom: 18px !important;

  border-bottom: 2px solid rgba(255,255,255,0.12) !important;
}

.pc-description-icon {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;

  border-radius: 8px !important;
  background:
    radial-gradient(circle at 50% 25%, rgba(255,255,255,0.22), transparent 35%),
    linear-gradient(180deg, #7a5cff 0%, #4356e8 100%) !important;

  border: 3px solid #2e3192 !important;

  font-size: 22px;
  line-height: 1;

  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.18),
    inset 0 -4px 0 rgba(0,0,0,0.35),
    0 4px 0 #000 !important;
}

.pc-description-kicker {
  display: inline-flex;
  width: fit-content;

  margin-bottom: 8px;
  padding: 5px 8px;

  border-radius: 4px;
  border: 2px solid #5a3900;

  background: linear-gradient(180deg, #ffd84d 0%, #d7951f 100%);
  color: #1b1b1b;

  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  line-height: 1;
  text-transform: uppercase;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 -2px 0 rgba(0,0,0,0.22),
    0 3px 0 #000;
}

.pc-description-title h2 {
  margin: 0 !important;
  color: #ffffff !important;

  font-family: 'Press Start 2P', monospace !important;
  font-size: 16px !important;
  line-height: 1.45 !important;

  text-shadow: 2px 2px 0 #000 !important;
}

/* Texto */
.pc-description-text {
  max-width: 940px;
}

.pc-description-text p,
.pc-description-card p {
  margin: 0 0 15px 0 !important;

  color: rgba(255,255,255,0.94) !important;
  font-size: 15px !important;
  line-height: 1.75 !important;
  font-weight: 800 !important;

  text-shadow: 1px 1px 0 #000 !important;
}

.pc-description-text strong,
.pc-description-card strong {
  color: #ffd84d;
}

/* Botón Discord */
.pc-description-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;

  margin-top: 22px;
}

.pc-discord-btn {
  min-height: 48px;
  padding: 0 18px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  border-radius: 7px;
  border: 3px solid #2e3192;

  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.18), transparent 40%),
    linear-gradient(180deg, #7a5cff 0%, #4356e8 100%);

  color: #ffffff !important;
  text-decoration: none !important;

  font-family: 'Press Start 2P', monospace;
  font-size: 9px;
  line-height: 1.25;
  text-align: center;

  text-shadow: 2px 2px 0 #000;

  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.16),
    inset 0 -4px 0 rgba(0,0,0,0.36),
    0 4px 0 #000;

  transition:
    transform 0.12s ease,
    filter 0.12s ease,
    box-shadow 0.12s ease;
}

.pc-discord-btn:hover,
.pc-discord-btn:focus {
  filter: brightness(1.14);
  transform: translateY(-2px);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.18),
    inset 0 -4px 0 rgba(0,0,0,0.36),
    0 6px 0 #000,
    0 0 18px rgba(122,92,255,0.35);
}

.pc-discord-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 22px;
  min-width: 22px;
  height: 22px;

  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 17px;
  line-height: 1;
  text-shadow: none;
}

/* Tarjetas inferiores */
.pc-description-points {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;

  margin-top: 26px !important;
}

.pc-description-points div {
  position: relative;

  min-height: 88px !important;
  padding: 16px 14px !important;

  border-radius: 8px !important;
  border: 3px solid #2e2e2e !important;

  background:
    radial-gradient(circle at 50% 0%, rgba(255,216,77,0.10), transparent 42%),
    linear-gradient(180deg, #242424 0%, #121212 100%) !important;

  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.10),
    inset 0 -5px 0 rgba(0,0,0,0.34),
    0 4px 0 #000 !important;

  transition:
    transform 0.12s ease,
    filter 0.12s ease,
    border-color 0.12s ease;
}

.pc-description-points div:hover {
  transform: translateY(-2px);
  filter: brightness(1.12);
  border-color: rgba(255,216,77,0.55) !important;
}

.pc-description-points span {
  font-size: 27px !important;
  line-height: 1 !important;

  filter: drop-shadow(0 3px 0 rgba(0,0,0,0.55));
}

.pc-description-points strong {
  color: #ffffff !important;

  font-family: 'Press Start 2P', monospace !important;
  font-size: 8px !important;
  line-height: 1.45 !important;

  text-shadow: 1px 1px 0 #000 !important;
}

/* Responsive */
@media (max-width: 768px) {
  .pc-description-card {
    padding: 22px !important;
  }

  .pc-description-title {
    flex-direction: column !important;
    text-align: center !important;
    gap: 12px !important;
  }

  .pc-description-kicker {
    margin-left: auto;
    margin-right: auto;
  }

  .pc-description-title h2 {
    font-size: 13px !important;
  }

  .pc-description-text p,
  .pc-description-card p {
    font-size: 13px !important;
    line-height: 1.65 !important;
    text-align: center;
  }

  .pc-description-actions {
    justify-content: center;
  }

  .pc-discord-btn {
    width: 100%;
    max-width: 320px;
    min-height: 46px;
    font-size: 8px;
  }

  .pc-description-points {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .pc-description-points div {
    min-height: 78px !important;
  }
}


/* =========================================================
   AVISO CUPÓN APERTURA - PECADO CRAFT
   Pegar AL FINAL del CSS
========================================================= */

.pc-coupon-banner {
  position: relative;
  width: 100%;
  max-width: 100%;

  display: grid;
  grid-template-columns: 72px minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;

  padding: 24px 26px;
  border-radius: 10px;

  background:
    radial-gradient(circle at 12% 0%, rgba(255,216,77,0.22), transparent 34%),
    radial-gradient(circle at 88% 20%, rgba(122,92,255,0.20), transparent 30%),
    linear-gradient(180deg, #4d7f34 0%, #315321 100%);

  border: 3px solid #263f1c;

  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.16),
    inset 0 -6px 0 rgba(0,0,0,0.34),
    inset 0 0 0 2px rgba(255,255,255,0.08),
    0 6px 0 #000,
    0 14px 28px rgba(0,0,0,0.55);

  overflow: hidden;
  box-sizing: border-box;
}

.pc-coupon-banner::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.10);
  pointer-events: none;
}

.pc-coupon-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      120deg,
      transparent 0%,
      transparent 35%,
      rgba(255,255,255,0.08) 47%,
      transparent 58%,
      transparent 100%
    );
  pointer-events: none;
}

.pc-coupon-icon,
.pc-coupon-content,
.pc-coupon-box {
  position: relative;
  z-index: 2;
}

.pc-coupon-icon {
  width: 64px;
  height: 64px;
  min-width: 64px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 25%, rgba(255,255,255,0.24), transparent 36%),
    linear-gradient(180deg, #ffd84d 0%, #d7951f 100%);

  border: 3px solid #5a3900;

  font-size: 30px;
  line-height: 1;

  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.22),
    inset 0 -4px 0 rgba(0,0,0,0.28),
    0 4px 0 #000;
}

.pc-coupon-kicker {
  display: inline-flex;
  width: fit-content;

  margin-bottom: 8px;
  padding: 6px 9px;

  border-radius: 4px;
  border: 2px solid #5a3900;

  background: linear-gradient(180deg, #ffd84d 0%, #d7951f 100%);
  color: #1b1b1b;

  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  line-height: 1;
  text-transform: uppercase;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 -2px 0 rgba(0,0,0,0.22),
    0 3px 0 #000;
}

.pc-coupon-content h2 {
  margin: 0 0 9px 0 !important;

  color: #ffffff !important;
  font-family: 'Press Start 2P', monospace !important;
  font-size: 17px !important;
  line-height: 1.4 !important;
  text-align: left !important;

  text-shadow: 2px 2px 0 #000 !important;
}

.pc-coupon-content p {
  margin: 0 !important;

  color: rgba(255,255,255,0.95) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  font-weight: 800 !important;
  text-align: left !important;

  text-shadow: 1px 1px 0 #000 !important;
}

.pc-coupon-content strong {
  color: #ffd84d !important;
}

.pc-coupon-box {
  min-width: 180px;
  padding: 14px 16px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;

  border-radius: 8px;
  border: 3px solid #050505;

  background:
    radial-gradient(circle at 50% 0%, rgba(65,196,195,0.18), transparent 42%),
    linear-gradient(180deg, #242424 0%, #101010 100%);

  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.10),
    inset 0 -5px 0 rgba(0,0,0,0.42),
    0 5px 0 rgba(0,0,0,0.75);
}

.pc-coupon-label {
  color: rgba(255,255,255,0.8);

  font-family: 'Press Start 2P', monospace;
  font-size: 7px;
  line-height: 1;
  text-transform: uppercase;

  text-shadow: 1px 1px 0 #000;
}

.pc-coupon-code {
  padding: 9px 12px;

  border-radius: 5px;
  border: 2px dashed #ffd84d;

  background: rgba(0,0,0,0.32);
  color: #ffd84d;

  font-family: 'Press Start 2P', monospace;
  font-size: 13px;
  line-height: 1;
  letter-spacing: 1px;

  text-shadow: 2px 2px 0 #000;
  box-shadow: inset 0 0 12px rgba(255,216,77,0.10);
}

/* Responsive */
@media (max-width: 768px) {
  .pc-coupon-banner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;

    padding: 22px 18px;
    gap: 16px;
  }

  .pc-coupon-content h2,
  .pc-coupon-content p {
    text-align: center !important;
  }

  .pc-coupon-content h2 {
    font-size: 13px !important;
  }

  .pc-coupon-content p {
    font-size: 13px !important;
  }

  .pc-coupon-kicker {
    margin-left: auto;
    margin-right: auto;
  }

  .pc-coupon-box {
    width: 100%;
    max-width: 280px;
    min-width: 0;
  }

  .pc-coupon-code {
    font-size: 12px;
  }
}
/* =========================================================
   FIX FUENTE ACENTOS - PECADO CRAFT
   Pegar AL FINAL del CSS
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400;500;600;700&display=swap');

/* Fuente pixel más compatible con acentos */
:root {
  --pc-font-pixel-readable: 'Pixelify Sans', Lato, sans-serif;
  --pc-font-pixel-retro: 'Press Start 2P', monospace;
}

/* Títulos grandes con acentos: más legibles */
.pc-coupon-content h2,
.pc-featured-header h2,
.pc-description-title h2,
.pc-package-info h3,
.pc-top-username,
.pc-category-main .store-products-list .store-product .product-title {
  font-family: var(--pc-font-pixel-readable) !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
  line-height: 1.15 !important;
}

/* Ajustes de tamaño para que no pierda fuerza visual */
.pc-coupon-content h2 {
  font-size: 28px !important;
}

.pc-featured-header h2,
.pc-description-title h2 {
  font-size: 26px !important;
}

.pc-package-info h3 {
  font-size: 26px !important;
}

/* Textos normales: mejor con Lato */
.pc-coupon-content p,
.pc-featured-header p,
.pc-package-info p,
.pc-description-text p,
.pc-description-card p {
  font-family: Lato, sans-serif !important;
  font-weight: 800 !important;
}

/* Mantener estilo retro en etiquetas, botones y código */
.pc-coupon-kicker,
.pc-coupon-label,
.pc-coupon-code,
.pc-featured-kicker,
.pc-package-tag,
.pc-package-price,
.pc-package-btn,
.pc-discord-btn,
.pc-header-btn {
  font-family: var(--pc-font-pixel-retro) !important;
}

/* Responsive */
@media (max-width: 768px) {
  .pc-coupon-content h2 {
    font-size: 22px !important;
  }

  .pc-featured-header h2,
  .pc-description-title h2 {
    font-size: 22px !important;
  }

  .pc-package-info h3 {
    font-size: 22px !important;
  }
}

/* FIX: cambiar fuente del label "Código" del cupón */
.pc-coupon-label {
  font-family: var(--pc-font-pixel-readable) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.8px !important;
  line-height: 1 !important;
  text-transform: uppercase !important;
}

/* =========================================================
   TOP COMPRADOR - PERSONAJE INTEGRADO SIN CAJA
   Pegar AL FINAL del CSS
========================================================= */

.pc-top-donator-widget {
  width: 100%;
  padding: 14px !important;
  border-radius: 10px !important;

  background:
    linear-gradient(180deg, #181818 0%, #0d0d0d 100%) !important;

  border: 3px solid #2c2c2c !important;

  box-shadow:
    inset 0 0 0 2px rgba(255,255,255,0.07),
    inset 0 -4px 0 rgba(0,0,0,0.35),
    0 5px 0 #000,
    0 12px 24px rgba(0,0,0,0.55) !important;

  box-sizing: border-box;
  overflow: visible;
}

.pc-top-title {
  margin: 0 0 12px 0 !important;
  padding: 0 0 10px 0 !important;

  color: #ffffff !important;
  text-align: center !important;

  font-family: var(--pc-font-pixel-readable, 'Pixelify Sans', Lato, sans-serif) !important;
  font-size: 20px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  letter-spacing: 0.3px !important;

  text-shadow: 2px 2px 0 #000 !important;
  border-bottom: 2px solid rgba(255,255,255,0.12) !important;
}

.pc-top-content {
  width: 100%;
  margin: 0;
  padding: 0;
}

.pc-top-card {
  position: relative;

  display: grid !important;
  grid-template-columns: 86px minmax(0, 1fr) !important;
  grid-template-areas:
    "badge badge"
    "skin info" !important;

  align-items: center !important;
  gap: 10px 14px !important;

  width: 100%;
  min-height: 0 !important;
  padding: 13px 14px 14px 14px !important;

  border-radius: 9px !important;

  background:
    radial-gradient(circle at 14% 45%, rgba(255,216,77,0.08), transparent 34%),
    radial-gradient(circle at 92% 0%, rgba(65,196,195,0.06), transparent 30%),
    linear-gradient(180deg, #20331d 0%, #101810 100%) !important;

  border: 3px solid #314f2a !important;

  box-shadow:
    inset 0 2px 0 rgba(255,255,255,0.13),
    inset 0 -5px 0 rgba(0,0,0,0.34),
    inset 0 0 0 2px rgba(255,255,255,0.06),
    0 4px 0 #000,
    0 10px 20px rgba(0,0,0,0.40) !important;

  box-sizing: border-box;
  overflow: hidden;
}

.pc-top-card::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 7px;
  border: 1px solid rgba(255,255,255,0.08);
  pointer-events: none;
}

.pc-top-card::after {
  display: none !important;
}

.pc-top-placeholder {
  background:
    radial-gradient(circle at 14% 45%, rgba(255,216,77,0.08), transparent 34%),
    linear-gradient(180deg, #332b72 0%, #17153a 100%) !important;

  border-color: #2e3192 !important;
}

/* Badge superior */
.pc-top-badge {
  grid-area: badge !important;
  justify-self: center !important;

  position: relative;
  z-index: 3;

  margin: 0 !important;
  padding: 6px 10px !important;

  border-radius: 5px;
  border: 2px solid #5a3900;

  background:
    linear-gradient(180deg, #ffd84d 0%, #d7951f 100%) !important;

  color: #1b1b1b !important;

  font-family: var(--pc-font-pixel-retro, 'Press Start 2P', monospace) !important;
  font-size: 6px !important;
  line-height: 1 !important;
  letter-spacing: 0.2px !important;
  text-transform: uppercase;
  text-align: center;

  text-shadow: none !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.28),
    inset 0 -2px 0 rgba(0,0,0,0.20),
    0 3px 0 #000 !important;
}

/* Contenedor del personaje: sin fondo, sin borde, sin caja */
.pc-top-body-wrap {
  grid-area: skin !important;

  position: relative;
  z-index: 2;

  width: 86px !important;
  min-width: 86px !important;
  height: 122px !important;

  margin: 0 !important;
  padding: 0 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  align-self: center !important;
  justify-self: center !important;

  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  overflow: visible !important;
}

/* Quitar cualquier luz/fondo anterior */
.pc-top-body-wrap::before {
  display: none !important;
}

/* Sombra muy sutil para apoyar el personaje */
.pc-top-body-wrap::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;

  width: 42px;
  height: 8px;

  transform: translateX(-50%);

  border-radius: 50%;
  background: rgba(0,0,0,0.28);
  filter: blur(2px);

  pointer-events: none;
}

.pc-top-body {
  position: relative;
  z-index: 2;

  display: block;

  width: auto !important;
  height: auto !important;

  max-width: 72px !important;
  max-height: 116px !important;

  object-fit: contain !important;
  image-rendering: pixelated;

  background: transparent !important;
  border: none !important;
  box-shadow: none !important;

  filter:
    drop-shadow(0 7px 7px rgba(0,0,0,0.70))
    drop-shadow(1px 1px 0 rgba(255,255,255,0.08)) !important;
}

/* Por seguridad: elimina la estrella si quedó de CSS/HTML antiguo */
.pc-top-crown {
  display: none !important;
}

/* Información */
.pc-top-info {
  grid-area: info !important;

  position: relative;
  z-index: 2;

  width: 100% !important;
  min-width: 0 !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;

  text-align: left !important;
}

.pc-top-label {
  display: none !important;
}

.pc-top-username {
  width: 100% !important;
  max-width: 100% !important;

  margin: 0 0 6px 0 !important;
  padding: 0 !important;

  color: #ffffff !important;

  font-family: var(--pc-font-pixel-readable, 'Pixelify Sans', Lato, sans-serif) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: 0.2px !important;

  text-align: left !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  text-shadow: 2px 2px 0 #000 !important;
}

.pc-top-text {
  max-width: 100% !important;

  margin: 0 !important;
  padding: 0 !important;

  color: rgba(255,255,255,0.96) !important;

  font-family: Lato, sans-serif !important;
  font-size: 11.5px !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;

  text-align: left !important;
  text-shadow: 1px 1px 0 #000 !important;
}

.pc-top-text strong {
  color: #ffd84d !important;
  font-weight: 900 !important;
}

.pc-top-subtext {
  max-width: 100% !important;

  margin: 5px 0 0 0 !important;
  padding: 0 !important;

  color: rgba(255,255,255,0.74) !important;

  font-family: Lato, sans-serif !important;
  font-size: 10.5px !important;
  line-height: 1.32 !important;
  font-weight: 700 !important;

  text-align: left !important;
  text-shadow: 1px 1px 0 #000 !important;
}

/* Limpieza de estilos viejos del módulo original */
.widget-top-donator .avatar,
.widget-top-donator .username,
.widget-top-donator .empty {
  margin: 0 !important;
}

/* Responsive */
@media (max-width: 768px) {
  .pc-top-card {
    grid-template-columns: 84px minmax(0, 1fr) !important;
    grid-template-areas:
      "badge badge"
      "skin info" !important;

    gap: 10px 13px !important;
  }

  .pc-top-title {
    font-size: 20px !important;
  }

  .pc-top-body-wrap {
    width: 84px !important;
    min-width: 84px !important;
    height: 120px !important;
  }

  .pc-top-body {
    max-width: 70px !important;
    max-height: 114px !important;
  }

  .pc-top-username {
    font-size: 18px !important;
  }

  .pc-top-text {
    font-size: 11.5px !important;
  }

  .pc-top-subtext {
    font-size: 10.5px !important;
  }
}