@import url("https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&display=swap");

:root {
  /* AstrumLux Network — nebulosa morada + estrella naranja */
  --color-bg: #1b1338;
  --color-brighter-bg: #2a1f55;
  --color-text: #f4efff;
  --color-text-darker: #d8cfee;
  --color-text-secondary: #9d8fc4;
  --color-primary: #ff9a2e;
  --color-primary-hover: #ffb454;
  --color-primary-text: #1a1033;
  --color-primary-text-hover: #1a1033;

  --cs-primary-light: rgb(from var(--color-primary) calc(r + (255 - r) * 0.72) calc(g + (255 - g) * 0.72) calc(b + (255 - b) * 0.72));
  --cs-primary-deep: rgb(from var(--color-primary) calc(r * 0.73) calc(g * 0.73) calc(b * 0.73));
  --cs-discord: #5865f2;
  --cs-discord-deep: #4046b8;

  --color-secondary: #392a6e;
  --color-secondary-hover: #47358a;
  --color-secondary-text: #f4efff;
  --color-secondary-text-hover: #ffffff;

  --color-tertiary: transparent;
  --color-tertiary-hover: rgb(from var(--color-primary) r g b / 0.16);
  --color-tertiary-text: #d8cfee;
  --color-tertiary-text-hover: #f4efff;

  --color-removed: #e5484d;

  --cs-radius: 16px;
  --cs-border: #3d2f70;
  --cs-border-width: 3px;

  /* tonos de marca usados por el glow del hero */
  --cs-nebula: #6c3fa8;
  --cs-nebula-pink: #c86ad0;

  --cs-hero-height: 55vh;
  --cs-bg-fade: 55vh;

  --content-inner-width: 1272px;
  --sidebar-width: 345px;
  --cs-col-gap: 10px;
  --cs-account-height: 52px;
  --cs-lead-offset: 72px;
}

@media (width > 960px) {
  :root { --content-padding: var(--widget-padding); }
}

html,
body {
  background-color: var(--color-bg);
}
body {
  position: relative;
  z-index: 0;
  font-family: "Sora", "Segoe UI", sans-serif;
  color: var(--color-text-darker);
}
h1, h2, h3, h4, h5, h6 {
  color: var(--color-text);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(to bottom, rgb(from var(--color-bg) r g b / 0.7) 0%, var(--color-bg) var(--cs-bg-fade)),
    var(--bg-image, none),
    radial-gradient(120% 80% at 50% -10%, rgb(from var(--cs-nebula) r g b / 0.55) 0%, transparent 60%),
    radial-gradient(80% 55% at 78% 6%, rgb(from var(--cs-nebula-pink) r g b / 0.26) 0%, transparent 55%),
    radial-gradient(90% 60% at 18% 0%, rgb(from var(--color-primary) r g b / 0.16) 0%, transparent 55%);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  z-index: -1;
  pointer-events: none;
}

.cs-particles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--cs-hero-height);
  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}
.cs-particles span {
  position: absolute;
  bottom: -16px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--cs-primary-light);
  opacity: 0;
  animation: cs-rise 15s linear infinite;
}
.cs-particles span:nth-child(1)  { left: 5%;  width: 6px;  height: 6px;  animation-duration: 13s; animation-delay: -1s; }
.cs-particles span:nth-child(2)  { left: 13%; width: 9px;  height: 9px;  animation-duration: 18s; animation-delay: -6s; animation-name: cs-rise-b; }
.cs-particles span:nth-child(3)  { left: 21%; width: 5px;  height: 5px;  animation-duration: 16s; animation-delay: -3s; }
.cs-particles span:nth-child(4)  { left: 29%; width: 8px;  height: 8px;  animation-duration: 20s; animation-delay: -9s; animation-name: cs-rise-b; }
.cs-particles span:nth-child(5)  { left: 37%; width: 6px;  height: 6px;  animation-duration: 14s; animation-delay: -2s; }
.cs-particles span:nth-child(6)  { left: 45%; width: 10px; height: 10px; animation-duration: 22s; animation-delay: -11s; animation-name: cs-rise-b; }
.cs-particles span:nth-child(7)  { left: 53%; width: 5px;  height: 5px;  animation-duration: 15s; animation-delay: -5s; }
.cs-particles span:nth-child(8)  { left: 61%; width: 8px;  height: 8px;  animation-duration: 19s; animation-delay: -8s; animation-name: cs-rise-b; }
.cs-particles span:nth-child(9)  { left: 69%; width: 6px;  height: 6px;  animation-duration: 13s; animation-delay: -4s; }
.cs-particles span:nth-child(10) { left: 77%; width: 9px;  height: 9px;  animation-duration: 21s; animation-delay: -10s; animation-name: cs-rise-b; }
.cs-particles span:nth-child(11) { left: 85%; width: 5px;  height: 5px;  animation-duration: 16s; animation-delay: -1.5s; }
.cs-particles span:nth-child(12) { left: 92%; width: 8px;  height: 8px;  animation-duration: 18s; animation-delay: -7s; animation-name: cs-rise-b; }
.cs-particles span:nth-child(13) { left: 33%; width: 4px;  height: 4px;  animation-duration: 17s; animation-delay: -13s; }
.cs-particles span:nth-child(14) { left: 66%; width: 4px;  height: 4px;  animation-duration: 19s; animation-delay: -14s; animation-name: cs-rise-b; }
@keyframes cs-rise {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  12% {
    opacity: 0.18;
  }
  30% {
    transform: translate(10px, -15vh);
  }
  55% {
    transform: translate(-10px, -28vh);
  }
  80% {
    transform: translate(8px, -40vh);
    opacity: 0.18;
  }
  100% {
    transform: translate(-4px, -50vh);
    opacity: 0;
  }
}
@keyframes cs-rise-b {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  12% {
    opacity: 0.14;
  }
  28% {
    transform: translate(-11px, -14vh);
  }
  52% {
    transform: translate(12px, -27vh);
  }
  80% {
    transform: translate(-8px, -41vh);
    opacity: 0.14;
  }
  100% {
    transform: translate(6px, -50vh);
    opacity: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cs-particles {
    display: none;
  }
}

@media (width > 960px) {
  body .site {
    grid-template-columns: var(--sidebar-width) 1fr;
    grid-auto-rows: auto;
    gap: 0;
    max-width: var(--content-width);
    margin: 0 auto;
    padding: 0;
    width: 100%;
  }

  .site-main {
    padding: 30px 45px 30px 25px;
  }

  .site-main .site-header,
  .site-main .site-sale-banner,
  .site-main .site-home-categories,
  .site-main .site-content {
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
  }

  .site-main > .site-header { margin-bottom: calc(24px + var(--cs-lead-offset)); }

  .site-main > .site-header ~ * { margin-bottom: 28px; }
}
.site-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}
@media (width <= 960px) {

  body .site {
    display: flex;
    flex-direction: column;
    /* shared.css pone align-items:start para la rejilla de escritorio; en
       columna eso es el eje horizontal y encoge el contenido a su ancho
       intrinseco, dejando media pantalla vacia en tablets */
    align-items: stretch;
    gap: 24px;
  }
  .site-main { order: -1; padding: 20px; gap: 20px; }
}

.site-content-widgets {
  display: block;
}
.site-content-widgets .store-sidebar {
  display: none;
}

body .site-content-widgets h1,
body .site-content-widgets h2,
body .site-content-widgets h3,
body .site-content-widgets h4,
body .site-content-widgets h5,
body .site-content-widgets h6 {
  text-align: left;
}

body .site-content-widgets h1,
body .site-content-widgets h2:first-child {
  color: var(--color-primary);
  text-transform: uppercase;
  font-weight: 800;
}

.store-sidebar {
  padding: 30px 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.store-sidebar .widget + .widget { margin-top: 0; }
.cs-sidebar-logo {
  display: block;
  margin: 0 -16px;
  padding: 0 0 4px;
  text-align: center;
  line-height: 1;
  text-decoration: none;
  color: var(--color-primary);
  transition: transform 0.12s ease;
}
.cs-sidebar-logo:hover { transform: scale(1.04); }
.cs-sidebar-logo:active { transform: scale(0.95); }
.cs-sidebar-logo img {
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: contain;
}
.cs-sidebar-logo .cs-logo-text {
  display: block;
  font-weight: 800;
  font-size: 26px;
  padding: 10px 0;
}
@media (width <= 960px) {

  .store-sidebar { padding: 20px; }
  .store-sidebar .cs-sidebar-logo { display: none; }
}

.navigation-vertical .cs-menu-ico {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}
.navigation-vertical .cs-menu-ico img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (width > 960px) {
  .navigation-vertical.widget { padding: 14px; }

  .navigation-vertical .cs-menu-head {
    color: var(--color-text);
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 4px 6px;
    margin-bottom: 10px;
  }

  .navigation-vertical .menu {
    display: flex;
    flex-direction: column;
    gap: 3px;
    line-height: 1.3;
    font-size: 16px;
    font-weight: 400;
    color: var(--color-text-secondary);
  }

  .navigation-vertical .menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: var(--cs-radius);
    color: var(--color-text-secondary);
    font-size: 16px;
    font-weight: 400;
    transition: transform 0.12s ease, color 0.12s ease, background 0.12s ease;
  }
  .navigation-vertical .menu a:hover {
    color: var(--color-text);
    transform: scale(1.02);
  }
  .navigation-vertical .menu a.link-active {
    background: var(--color-tertiary-hover);
    color: var(--color-text);
    font-weight: 600;
  }

  .navigation-vertical ul ul { padding-left: 0; }
  .navigation-vertical ul ul a {
    padding: 9px 12px 9px 50px;
    font-size: 16px;
  }

  .navigation-vertical .has-children > a { max-width: calc(100% - 40px); }
}

.cs-menu-parent {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  margin: 0;
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 12px;
}
.cs-menu-parent-name { flex: 1 1 auto; min-width: 0; }
.cs-menu-chevron {
  flex: none;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: rotate 0.18s ease;
}
.cs-menu-chevron svg { width: 100%; height: 100%; }
.has-children.expanded > .cs-menu-parent .cs-menu-chevron { rotate: 180deg; }

@media (width > 960px) {
  .navigation-vertical .has-children { display: block; }
  .navigation-vertical .menu .cs-menu-parent {
    padding: 9px 12px;
    border-radius: var(--cs-radius);
    color: var(--color-text-secondary);
    font-size: 16px;
    font-weight: 400;
    transition: color 0.12s ease, background 0.12s ease;
  }
  .navigation-vertical .menu .cs-menu-parent:hover {
    color: var(--color-text);
    background: var(--color-tertiary-hover);
  }
  .navigation-vertical .has-children.expanded > .cs-menu-parent { color: var(--color-text); }
}

@media (width <= 960px) {
  .site-navigation .has-children { display: block; }
  .site-navigation .cs-menu-parent {
    padding: 11px 0;
    color: var(--color-text-secondary);
    font-size: 18px;
    transition: color 0.15s ease-in-out;
  }
  .site-navigation .cs-menu-parent:hover { color: var(--color-primary); }
  .site-navigation .has-children.expanded > .cs-menu-parent { color: var(--color-text); }
}

@media (width > 960px) {
  .store-sidebar .widget { padding: 14px; }
}

.store-sidebar .widget-title {
  text-align: left;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text);
  padding: 4px 6px;
  margin-bottom: 10px;
}

.cs-purchase-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.cs-purchase {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.cs-purchase-avatar {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-secondary);
  border: 2px solid var(--cs-border);
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.cs-purchase-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}
.cs-purchase:hover .cs-purchase-avatar {
  transform: scale(1.08);
  border-color: var(--color-primary);
}
.cs-purchase.cs-tip-open .cs-purchase-avatar {
  border-color: var(--color-primary);
}
.cs-purchase-tip {
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) scale(0.8);
  transform-origin: bottom center;
  z-index: 50;
  min-width: 120px;
  max-width: 180px;
  padding: 10px 12px;
  background: var(--color-bg);
  border: var(--cs-border-width) solid var(--cs-border);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease, transform 0.12s cubic-bezier(0.4, 0, 1, 1), visibility 0s linear 0.13s;
}
.cs-purchase-tip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 7px solid transparent;
  border-top-color: var(--cs-border);
}
.cs-purchase.cs-tip-open .cs-purchase-tip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) scale(1);
  transition: opacity 0.13s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0s linear 0s;
}
.cs-purchase-tip-name {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cs-purchase-tip-pkg {
  display: block;
  margin-top: 2px;
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.35;
}

/* ---------- ticker de compras recientes: rotador con fundido ---------- */
/* cada compra se muestra un tiempo FIJO (ver DURATION en el JS) en vez de
   depender de un scroll continuo: con un scroll, ver una compra concreta
   puede tardar mucho si tiene muchos items o si el usuario mira a mitad de
   vuelta. Aqui, con N compras, todas se ven en N * ~3.2s siempre. */

.cs-ticker {
  position: relative;
  min-height: 46px;
  padding-bottom: 16px;
}

.cs-ticker-slide {
  position: absolute;
  inset: 0;
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s linear 0.4s;
  pointer-events: none;
}
.cs-ticker-slide.cs-on {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s linear 0s;
  pointer-events: auto;
}

.cs-ticker-dot {
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: #3fb950;
  box-shadow: 0 0 0 0 rgb(63 185 80 / 0.55);
  animation: cs-ticker-pulse 2.2s ease-out infinite;
}
@keyframes cs-ticker-pulse {
  0% { box-shadow: 0 0 0 0 rgb(63 185 80 / 0.55); }
  70% { box-shadow: 0 0 0 5px rgb(63 185 80 / 0); }
  100% { box-shadow: 0 0 0 0 rgb(63 185 80 / 0); }
}
.cs-ticker-avatar {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-secondary);
}
.cs-ticker-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}
.cs-ticker-text {
  min-width: 0;
  font-size: 14px;
  line-height: 1.3;
  color: var(--color-text-secondary);
}
.cs-ticker-text strong { color: var(--color-text); font-weight: 700; }
.cs-ticker-pkg { color: var(--color-primary); font-weight: 600; }

.cs-ticker-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 100%;
  overflow: hidden;
}
.cs-ticker-navdot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cs-border);
  transition: background 0.2s ease, transform 0.2s ease;
}
.cs-ticker-navdot.cs-on {
  background: var(--color-primary);
  transform: scale(1.25);
}

@media (prefers-reduced-motion: reduce) {
  .cs-ticker { padding-bottom: 0; }
  .cs-ticker-dots { display: none; }
  .cs-ticker-slide {
    transition: none;
    position: static;
    display: none;
  }
  .cs-ticker-slide.cs-on { display: flex; }
  .cs-ticker-dot { animation: none; }
}

.cs-empty {
  font-size: 14px;
  color: var(--color-text-secondary);
  padding: 4px 6px;
}

.widget-gift-card .cs-giftcard-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.widget-gift-card .cs-giftcard-input {
  flex: 1;
  min-width: 0;
  background: var(--color-bg);
  border: var(--cs-border-width) solid var(--cs-border);
  border-radius: var(--cs-radius);
  color: var(--color-text);
  box-shadow: none;
  height: auto;
  padding: 10px 12px;
  font-size: 14px;
}
.widget-gift-card .cs-giftcard-input::placeholder { color: var(--color-text-secondary); }
.widget-gift-card .cs-giftcard-input:focus {
  border-color: var(--color-primary);
  outline: none;
  box-shadow: none;
}

.widget-gift-card .cs-giftcard-input:-webkit-autofill,
.widget-gift-card .cs-giftcard-input:-webkit-autofill:hover,
.widget-gift-card .cs-giftcard-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-text);
  -webkit-box-shadow: 0 0 0 1000px var(--color-bg) inset;
          box-shadow: 0 0 0 1000px var(--color-bg) inset;
  caret-color: var(--color-text);
}
.store-form input:-webkit-autofill,
.store-form input:-webkit-autofill:hover,
.store-form input:-webkit-autofill:focus,
.store-form textarea:-webkit-autofill,
.store-form select:-webkit-autofill {
  -webkit-text-fill-color: var(--color-text);
  -webkit-box-shadow: 0 0 0 1000px var(--color-bg) inset;
          box-shadow: 0 0 0 1000px var(--color-bg) inset;
  caret-color: var(--color-text);
}
.widget-gift-card .cs-giftcard-btn {
  flex-shrink: 0;
  padding: 0 16px;
  background: var(--color-primary);
  color: var(--color-primary-text);
  border: none;
  border-radius: var(--cs-radius);
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: pointer;
  transition: transform 0.12s ease;
}
.widget-gift-card .cs-giftcard-btn:hover,
.widget-gift-card .cs-giftcard-btn:focus {
  transform: scale(1.03);
  color: var(--color-primary-text);
}
.widget-gift-card .cs-giftcard-alert {
  margin-top: 12px;
  font-size: 14px;
  color: var(--color-text-darker);
}

.cs-topcustomer {
  position: relative;
  container-type: inline-size;
  overflow: hidden;
  aspect-ratio: 720 / 344;
  border-radius: var(--cs-radius);
  border: var(--cs-border-width) solid var(--cs-border);
  background: linear-gradient(160deg, var(--color-primary) 0%, var(--color-primary) 55%, var(--cs-primary-deep) 100%);
}
.cs-topcustomer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(82% 82% at 100% 100%, var(--color-brighter-bg) 0%, var(--color-brighter-bg) 34%, transparent 88%);
}
.cs-topcustomer-char {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 42%;
  overflow: hidden;
  z-index: 2;
}
.cs-topcustomer-char::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 45%;
  width: 90%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, var(--cs-primary-light) 0%, transparent 68%);
  z-index: 0;
}
.cs-topcustomer-fallback,
.cs-topcustomer-canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  transform: scale(1.25);
  transform-origin: center top;
  transition: opacity 0.35s ease;
}
@media (prefers-reduced-motion: reduce) {
  .cs-topcustomer-fallback,
  .cs-topcustomer-canvas {
    transition: none;
  }
}
.cs-topcustomer-fallback {
  object-fit: cover;
  object-position: center top;
  opacity: 1;
}

/* skeleton neutro: se ve MIENTRAS se decide si se muestra el render 3D o
   el 2D de respaldo, para nunca cruzar dos imagenes reales "de una
   persona" (ese cruce es lo que se percibia como un salto/cambio brusco,
   sin importar cuanto se ajustara la pose). Sin JS, esta capa nunca se
   activa y el fallback 2D de siempre se ve directo. */
.cs-topcustomer-skeleton {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  background: linear-gradient(100deg, var(--cs-primary-deep) 25%, var(--cs-primary-light) 50%, var(--cs-primary-deep) 75%);
  background-size: 200% 100%;
  transition: opacity 0.35s ease;
}
.cs-topcustomer-char.cs-loading .cs-topcustomer-skeleton {
  opacity: 1;
  animation: cs-topcustomer-shimmer 1.6s ease-in-out infinite;
}
.cs-topcustomer-char.cs-loading .cs-topcustomer-fallback {
  opacity: 0;
}
@keyframes cs-topcustomer-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-topcustomer-skeleton { transition: none; }
  .cs-topcustomer-char.cs-loading .cs-topcustomer-skeleton { animation: none; }
}
.cs-topcustomer-title {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 4;
  height: 26%;
  display: flex;
  align-items: center;
  gap: 3cqw;
  padding: 0 4cqw 0 5cqw;
  background: var(--color-brighter-bg);
  border-radius: 0 0 0 16px;
}
.cs-topcustomer-title svg {
  flex: none;
  width: clamp(18px, 5cqw, 34px);
  height: clamp(18px, 5cqw, 34px);
  color: var(--color-primary);
}
.cs-topcustomer-title span {
  font-size: clamp(14px, 5cqw, 30px);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--color-text);
  white-space: nowrap;
}
.cs-topcustomer-body {
  position: absolute;
  left: 41%;
  top: 33%;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2.6cqw;
  padding: 0 4.5cqw 6cqw 4cqw;
}
.cs-topcustomer-line,
.cs-topcustomer-amount {
  margin: 0;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65), 0 0 12px rgba(0, 0, 0, 0.5);
}
.cs-topcustomer-line {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--color-text);
}
.cs-topcustomer-user { font-weight: 700; }
.cs-topcustomer-divider {
  height: 1px;
  background: linear-gradient(to right, var(--color-tertiary-hover), transparent);
}
.cs-topcustomer-amount {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text);
}

.cs-goal {
  display: flex;
  align-items: center;
  gap: 16px;
}
.cs-goal-ring {
  position: relative;
  width: 74px;
  height: 74px;
  flex: none;
}
.cs-goal-ring svg {
  width: 100%;
  height: 100%;
  display: block;
  transform: rotate(-90deg);
}
.cs-goal-track {
  fill: none;
  stroke: var(--color-secondary);
  stroke-width: 9;
}
.cs-goal-bar {
  fill: none;
  stroke: url(#csGoalGrad);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: var(--cs-goal-off, 100);
}
.cs-goal-grad-a { stop-color: var(--color-primary); }
.cs-goal-grad-b { stop-color: var(--cs-primary-light); }
.cs-goal-animate .cs-goal-bar {
  animation: cs-goal-fill 0.9s cubic-bezier(0.4, 0, 0.2, 1);
}
@keyframes cs-goal-fill {
  from { stroke-dashoffset: 100; }
  to { stroke-dashoffset: var(--cs-goal-off, 100); }
}
.cs-goal-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--color-primary);
}
.cs-goal-info { min-width: 0; }
.cs-goal-title {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text);
  margin-bottom: 5px;
}
.cs-goal-desc {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  color: var(--color-text-secondary);
}

.cs-goal-text {
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-darker);
}
.cs-goal-times {
  margin-top: 8px;
  font-size: 13px;
  color: var(--color-text-secondary);
}

.site-header-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--cs-account-height);
  height: auto;
  padding: 0;
}
.site-header-inner .user-actions.cs-account-bar {
  position: static;
  inset: auto;
  margin-left: auto;
}

.cs-mobile-logo { display: none; }
.cs-mobile-logo img { height: 54px; width: auto; object-fit: contain; }
.cs-mobile-logo .cs-logo-text { font-weight: 800; font-size: 20px; color: var(--color-primary); }
@media (width <= 960px) {
  .cs-mobile-logo { display: block; color: var(--color-primary); text-decoration: none; }

  .site-header-inner .actions { position: static; inset: auto; }
}
@media (width > 960px) {
  .site-header-inner .actions { display: none; }
}

.cs-home-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (width <= 600px) {
  .cs-home-cards { grid-template-columns: 1fr; }
}

.cs-home-cards .info {
  z-index: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 14px;
  border-radius: var(--cs-radius);
  border: var(--cs-border-width) solid var(--color-primary);
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--cs-primary-deep) 100%);
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.12s ease;
}

.cs-home-cards .info,
.cs-home-cards .info.server,
.cs-home-cards .info.discord {
  position: relative;
  inset: auto;
  margin: 0;
  width: auto;
  max-width: none;
  padding: 12px 14px;
  text-align: left;
  line-height: 1.3;
}
.cs-home-cards .info.discord {
  border-color: var(--cs-discord);
  background: linear-gradient(180deg, var(--cs-discord) 0%, var(--cs-discord-deep) 100%);
}
.cs-home-cards .info:hover,
.cs-home-cards .info:focus {
  transform: scale(1.02);
  text-decoration: none;
}

.cs-home-cards .info::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 90'%3E%3Ccircle cx='34' cy='20' r='17' fill='%23fff' fill-opacity='.09'/%3E%3Ccircle cx='96' cy='70' r='25' fill='%23fff' fill-opacity='.05'/%3E%3Ccircle cx='168' cy='30' r='10' fill='%23fff' fill-opacity='.11'/%3E%3Ccircle cx='232' cy='64' r='32' fill='%23fff' fill-opacity='.04'/%3E%3Ccircle cx='280' cy='22' r='14' fill='%23fff' fill-opacity='.08'/%3E%3Ccircle cx='306' cy='74' r='9' fill='%23fff' fill-opacity='.09'/%3E%3Ccircle cx='132' cy='12' r='7' fill='%23fff' fill-opacity='.08'/%3E%3C/svg%3E") 0 0 / auto 90px repeat;
  animation: cs-cardfloat 7s linear infinite;
  animation-play-state: paused;
}
.cs-home-cards .info.discord::before {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 90'%3E%3Cdefs%3E%3Cpath id='d' fill='%23fff' d='M20.317 4.3698a19.7913 19.7913 0 0 0-4.8851-1.5152.0741.0741 0 0 0-.0785.0371c-.211.3753-.4447.8648-.6083 1.2495-1.8447-.2762-3.68-.2762-5.4868 0-.1636-.3933-.4058-.8742-.6177-1.2495a.077.077 0 0 0-.0785-.037 19.7363 19.7363 0 0 0-4.8852 1.515.0699.0699 0 0 0-.0321.0277C.5334 9.0458-.319 13.5799.0992 18.0578a.0824.0824 0 0 0 .0312.0561c2.0528 1.5076 4.0413 2.4228 5.9929 3.0294a.0777.0777 0 0 0 .0842-.0276c.4616-.6304.8731-1.2952 1.226-1.9942a.076.076 0 0 0-.0416-.1057c-.6528-.2476-1.2743-.5495-1.8722-.8923a.077.077 0 0 1-.0076-.1277c.1258-.0943.2517-.1923.3718-.2914a.0743.0743 0 0 1 .0776-.0105c3.9278 1.7933 8.18 1.7933 12.0614 0a.0739.0739 0 0 1 .0785.0095c.1202.099.246.1981.3728.2924a.077.077 0 0 1-.0066.1276 12.2986 12.2986 0 0 1-1.873.8914.0766.0766 0 0 0-.0407.1067c.3604.698.7719 1.3628 1.225 1.9932a.076.076 0 0 0 .0842.0286c1.961-.6067 3.9495-1.5219 6.0023-3.0294a.077.077 0 0 0 .0313-.0552c.5004-5.177-.8382-9.6739-3.5485-13.6604a.061.061 0 0 0-.0312-.0286zM8.02 15.3312c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9555-2.4189 2.157-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.9555 2.4189-2.1569 2.4189zm7.9748 0c-1.1825 0-2.1569-1.0857-2.1569-2.419 0-1.3332.9554-2.4189 2.1569-2.4189 1.2108 0 2.1757 1.0952 2.1568 2.419 0 1.3332-.946 2.4189-2.1568 2.4189Z'/%3E%3C/defs%3E%3Cuse href='%23d' transform='translate(6 8) scale(0.9) rotate(-15 12 12)' opacity='.1'/%3E%3Cuse href='%23d' transform='translate(120 42) scale(1.7) rotate(16 12 12)' opacity='.05'/%3E%3Cuse href='%23d' transform='translate(238 6) scale(0.95) rotate(-9 12 12)' opacity='.09'/%3E%3Cuse href='%23d' transform='translate(270 52) scale(1.3) rotate(11 12 12)' opacity='.05'/%3E%3Cuse href='%23d' transform='translate(74 58) scale(0.75) rotate(22 12 12)' opacity='.08'/%3E%3C/svg%3E") 0 0 / auto 90px repeat;
}
.cs-home-cards .info:hover::before,
.cs-home-cards .info:focus::before {
  animation-play-state: running;
}
@keyframes cs-cardfloat {
  to { background-position: 0 -90px; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-home-cards .info::before { animation: none; }
}

.cs-home-cards .info .cs-nav-icon {
  --cs-hex-color: var(--color-primary);
  position: relative;
  isolation: isolate;
  width: 56px;
  height: 56px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: none;
}
.cs-home-cards .info .cs-nav-icon::before,
.cs-home-cards .info .cs-nav-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.cs-home-cards .info .cs-nav-icon::after {
  z-index: 0;
  background-color: var(--color-bg);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M58.7 9.9 L81.3 22.6 Q90 27.5 90 37.5 L90 62.5 Q90 72.5 81.3 77.4 L58.7 90.1 Q50 95 41.3 90.1 L18.7 77.4 Q10 72.5 10 62.5 L10 37.5 Q10 27.5 18.7 22.6 L41.3 9.9 Q50 5 58.7 9.9 Z' fill='%23fff'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M58.7 9.9 L81.3 22.6 Q90 27.5 90 37.5 L90 62.5 Q90 72.5 81.3 77.4 L58.7 90.1 Q50 95 41.3 90.1 L18.7 77.4 Q10 72.5 10 62.5 L10 37.5 Q10 27.5 18.7 22.6 L41.3 9.9 Q50 5 58.7 9.9 Z' fill='%23fff'/%3E%3C/svg%3E");
}
.cs-home-cards .info .cs-nav-icon::before {
  z-index: 1;
  background-color: var(--cs-hex-color);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M58.7 9.9 L81.3 22.6 Q90 27.5 90 37.5 L90 62.5 Q90 72.5 81.3 77.4 L58.7 90.1 Q50 95 41.3 90.1 L18.7 77.4 Q10 72.5 10 62.5 L10 37.5 Q10 27.5 18.7 22.6 L41.3 9.9 Q50 5 58.7 9.9 Z' fill='none' stroke='%23fff' stroke-width='5.5' stroke-linejoin='round'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M58.7 9.9 L81.3 22.6 Q90 27.5 90 37.5 L90 62.5 Q90 72.5 81.3 77.4 L58.7 90.1 Q50 95 41.3 90.1 L18.7 77.4 Q10 72.5 10 62.5 L10 37.5 Q10 27.5 18.7 22.6 L41.3 9.9 Q50 5 58.7 9.9 Z' fill='none' stroke='%23fff' stroke-width='5.5' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.cs-home-cards .info.discord .cs-nav-icon {
  --cs-hex-color: var(--cs-discord);
}
.cs-home-cards .info .cs-nav-icon svg {
  position: relative;
  z-index: 2;
  width: 26px;
  height: 26px;
}

.cs-home-cards .info .cs-nav-text { flex: 1; min-width: 0; }
.cs-home-cards .info .cs-nav-title {
  display: block;
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.cs-home-cards .info .cs-nav-subtitle {
  display: block;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.85);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.cs-home-cards .info .cs-nav-sub-hover { display: none; }
.cs-home-cards .info:hover .cs-nav-sub-base,
.cs-home-cards .info:focus .cs-nav-sub-base { display: none; }
.cs-home-cards .info:hover .cs-nav-sub-hover,
.cs-home-cards .info:focus .cs-nav-sub-hover { display: inline; }

.cs-home-cards .info .cs-nav-chev {
  flex: none;
  width: 18px;
  height: 18px;
  color: rgba(255, 255, 255, 0.85);
}

.cs-welcome { margin-bottom: 24px; }
.cs-welcome-pre {
  display: block;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--color-text-secondary);
  margin-bottom: 2px;
}
.cs-welcome-name {
  display: block;
  font-size: 28px;
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-primary);
}

.cs-featured-card { display: none; }
/* sin titulo visible arriba del carrusel (a pedido, queda solo el
   aria-label para lectores de pantalla -- ver layout.html). El titulo
   ocupaba ~32px (texto + margen) que empujaban la tarjeta hacia abajo
   respecto al widget MENU de la barra lateral; este margen-top lo repone
   para que ambos queden nivelados. */
.cs-featured { margin-top: 16px; }

/* ---------- carrusel de paquetes destacados ---------- */
/* cada instancia del widget "Paquete destacado" que se agregue en Tebex
   renderiza UNA tarjeta (module.featuredpackage.html solo recibe un
   module.package); el script de layout.html junta todas las que haya en la
   pagina y arma este carrusel encima. Con 1 sola tarjeta no hay carrusel que
   valga la pena: se muestra sola en .cs-fcar-solo.
   Una sola tarjeta ANCHA a la vez (no un coverflow 3D con tarjetas girando y
   huecos alrededor): imagen a un lado, nombre/precio/botones al otro. */
.cs-featured-card {
  position: relative;
  align-items: center;
  gap: 24px;
  min-height: 200px;
  padding: 26px;
  background: var(--color-brighter-bg);
  border: var(--cs-border-width) solid var(--cs-border);
  border-radius: var(--cs-radius);
  box-shadow: 0 20px 36px -16px rgba(0, 0, 0, 0.55);
}
/* .cs-featured-card arranca con display:none (arriba): solo se muestra una
   vez que el JS de layout.html la mete dentro de .cs-fcar-solo o de un
   .cs-fcar-slide. Si el JS llegara a fallar, no se ve un batiburrillo de
   tarjetas sueltas regadas por la pagina en su posicion original de widget. */
.cs-fcar-solo .cs-featured-card,
.cs-fcar-slide .cs-featured-card { display: flex; }
.cs-fcar-solo { margin: 0 auto; }

.cs-featured-img {
  position: relative;
  width: 170px;
  height: 170px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  text-decoration: none;
}
.cs-featured-img img,
.cs-featured-img .image-default {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.cs-featured-sale {
  position: absolute;
  top: -6px;
  right: -6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--color-removed);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.cs-featured-body {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cs-featured-name {
  display: block;
  font-size: clamp(18px, 2.4vw, 24px);
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--color-text);
  text-decoration: none;
}
.cs-featured-name:hover, .cs-featured-name:focus { color: var(--color-primary); text-decoration: none; }
.cs-featured-price {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--color-primary);
}
.cs-featured-price-old {
  margin-right: 8px;
  color: var(--color-removed);
  text-decoration: line-through;
  font-weight: 600;
  font-size: 15px;
}
.cs-featured-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 4px;
}
.cs-featured-buy,
.cs-featured-similar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--cs-radius);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.12s ease;
}
.cs-featured-buy { background: var(--color-primary); color: var(--color-primary-text); }
.cs-featured-buy:hover, .cs-featured-buy:focus { transform: scale(1.03); color: var(--color-primary-text); text-decoration: none; }
.cs-featured-similar { background: transparent; border: var(--cs-border-width) solid var(--cs-border); color: var(--color-text-secondary); }
.cs-featured-similar:hover, .cs-featured-similar:focus { border-color: var(--color-primary); color: var(--color-text); text-decoration: none; }
.cs-featured-buy svg, .cs-featured-similar svg { width: 16px; height: 16px; flex: none; }

.cs-featured-label {
  position: absolute;
  top: 14px;
  left: 26px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--cs-glow, var(--color-primary));
  color: var(--color-primary-text);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  white-space: nowrap;
  z-index: 2;
}

/* aro y resplandor propio de la tarjeta, marcador {glow=color} en la
   descripcion del paquete (mismo patron que la tabla comparativa) */
.cs-featured-card-glow {
  box-shadow: 0 0 0 2px var(--cs-glow), 0 0 24px -8px var(--cs-glow), 0 20px 36px -16px rgba(0, 0, 0, 0.55);
  animation: cs-featured-glow-pulse 2.6s ease-in-out infinite;
}
@keyframes cs-featured-glow-pulse {
  0%, 100% { box-shadow: 0 0 0 2px var(--cs-glow), 0 0 20px -8px var(--cs-glow), 0 20px 36px -16px rgba(0, 0, 0, 0.55); }
  50% { box-shadow: 0 0 0 2px var(--cs-glow), 0 0 36px -4px var(--cs-glow), 0 20px 36px -16px rgba(0, 0, 0, 0.55); }
}

.cs-fcar {
  display: flex;
  align-items: center;
  gap: 14px;
}
.cs-fcar-viewport {
  flex: 1;
  min-width: 0;
}
.cs-fcar-track {
  position: relative;
  min-height: 252px;
}
/* crossfade de a una tarjeta a la vez -- el mismo patron ya usado en el
   ticker de pagos recientes, no un efecto 3D con tarjetas peekeando a los
   lados y huecos vacios de por medio. */
.cs-fcar-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s linear 0.4s;
}
.cs-fcar-slide.cs-on {
  position: relative;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s linear 0s;
}

.cs-fcar-nav {
  flex: none;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: var(--cs-border-width) solid var(--cs-border);
  background: var(--color-brighter-bg);
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.cs-fcar-nav:hover, .cs-fcar-nav:focus { border-color: var(--color-primary); }
.cs-fcar-nav:active { transform: scale(0.92); }
.cs-fcar-nav svg { width: 18px; height: 18px; }

.cs-fcar-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}
.cs-fcar-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: var(--cs-border);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.cs-fcar-dot.cs-on { background: var(--color-primary); transform: scale(1.3); }

@media (prefers-reduced-motion: reduce) {
  .cs-fcar-slide { transition: none; }
  .cs-featured-card-glow { animation: none; }
  .cs-fcar-nav, .cs-fcar-dot { transition: none; }
}

@media (width <= 767px) {
  .cs-featured-card { flex-direction: column; text-align: center; padding: 22px; }
  .cs-featured-actions { justify-content: center; }
  .cs-featured-img { width: 140px; height: 140px; }
  .cs-featured-label { left: 50%; transform: translateX(-50%); }
}

.cs-text-card { display: none; }
.cs-textcards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}
.cs-textcards .cs-text-card {
  display: block;
  background: var(--color-brighter-bg);
  border: var(--cs-border-width) solid var(--cs-border);
  border-radius: var(--cs-radius);
  padding: 22px;
}
.cs-text-card-head {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text);
  margin-bottom: 12px;
  text-align: center;
}
.cs-text-card-body {
  color: var(--color-text-darker);
  background: transparent;
  padding: 0;
  font-size: 16px;
}
.cs-text-card-body a { color: var(--color-primary); }
.cs-text-card-body p:empty { display: none; }

/* si un parrafo de la descripcion de un paquete contenia solo un marcador
   ({glow=...}, {best}, etc.), tras limpiarlo (ver .cs-cleanable en
   layout.html) el parrafo queda vacio -- se colapsa para no dejar un hueco
   en blanco en la pagina propia del paquete. */
.cs-cleanable p:empty { display: none; }
.cs-text-card-body > :first-child { margin-top: 0; }
.cs-text-card-body > :last-child { margin-bottom: 0; }
.cs-text-card-body img { max-width: 100%; height: auto; border-radius: 8px; }

.cs-text-card-refund { --cs-tc: #e5484d; --cs-tc-tint: rgba(229, 72, 77, 0.1); }
.cs-text-card-support { --cs-tc: #3fb950; --cs-tc-tint: rgba(63, 185, 80, 0.1); }
.cs-text-card-info { --cs-tc: #4493e0; --cs-tc-tint: rgba(68, 147, 224, 0.1); }
.cs-textcards .cs-text-card-refund,
.cs-textcards .cs-text-card-support,
.cs-textcards .cs-text-card-info {
  border-color: var(--cs-tc);
  background: linear-gradient(var(--cs-tc-tint), var(--cs-tc-tint)), var(--color-brighter-bg);
}
.cs-text-card-refund .cs-text-card-head,
.cs-text-card-support .cs-text-card-head,
.cs-text-card-info .cs-text-card-head { color: var(--cs-tc); }
.cs-text-card-refund .cs-text-card-body a,
.cs-text-card-support .cs-text-card-body a,
.cs-text-card-info .cs-text-card-body a { color: var(--cs-tc); }
@media (width <= 767px) {
  .cs-textcards { grid-template-columns: 1fr; }
}

.site-header-inner .user-actions.cs-account-bar {
  display: flex;
  align-items: center;
  gap: 0;
  height: var(--cs-account-height);
}

.cs-cart-pill {
  display: flex;
  align-items: center;
  gap: calc(var(--cs-account-height) * 0.2);
  height: 100%;
  padding: 0 calc(var(--cs-account-height) * 1.1) 0 calc(var(--cs-account-height) * 0.42);
  background: var(--color-primary);
  color: var(--color-text);
  border: var(--cs-border-width) solid var(--cs-border);
  border-radius: 999px 0 0 999px;
  margin-right: calc(var(--cs-account-height) * -0.95);
  text-decoration: none;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: filter 0.18s ease, transform 0.12s ease;
}
.cs-cart-pill:hover,
.cs-cart-pill:focus {
  filter: brightness(1.07);
  color: var(--color-text);
  text-decoration: none;
}
.cs-cart-pill:active { transform: scale(0.97); }

.cs-account-bar .cs-cart-pill:last-child {
  margin-right: 0;
  border-radius: 999px;
  padding-right: calc(var(--cs-account-height) * 0.5);
}
.cs-cart-basket {
  width: calc(var(--cs-account-height) * 0.42);
  height: calc(var(--cs-account-height) * 0.42);
  flex: none;
}
.cs-cart-amount {
  font-weight: 700;
  font-size: calc(var(--cs-account-height) * 0.32);
  letter-spacing: 0.5px;
  line-height: 1;
  white-space: nowrap;
}
.cs-cart-amount strong { font-weight: 700; }

.cs-account-pill {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: var(--color-brighter-bg);
  color: var(--color-text);
  border: var(--cs-border-width) solid var(--cs-border);
  border-radius: 999px;
  padding: 0 calc(var(--cs-account-height) * 1.25) 0 calc(var(--cs-account-height) * 0.55);
  text-decoration: none;
  cursor: pointer;
  z-index: 2;
  transition: background 0.18s ease, transform 0.12s ease;
}
.cs-account-pill:hover,
.cs-account-pill:focus {
  background: var(--color-secondary);
  color: var(--color-text);
  text-decoration: none;
}
.cs-account-pill:active { transform: scale(0.985); }
.cs-account-label {
  font-weight: 600;
  font-size: calc(var(--cs-account-height) * 0.32);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1;
  white-space: nowrap;
}
.cs-account-avatar {
  position: absolute;
  top: 50%;
  right: calc(var(--cs-account-height) * -0.05);
  transform: translateY(-50%);
  width: calc(var(--cs-account-height) * 1.16);
  height: calc(var(--cs-account-height) * 1.16);
  border-radius: 50%;
  padding: 3px;
  background: var(--color-primary);
  transition: filter 0.18s ease, transform 0.18s ease;
}
.cs-account-pill:hover .cs-account-avatar {
  transform: translateY(-50%) scale(1.04);
  filter: brightness(1.07);
}
.cs-account-face {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-primary);
}
.cs-account-face img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  image-rendering: pixelated;
}
.cs-account-usericon { width: 58%; height: 58%; }

a.cs-account-pill .cs-account-face {
  background: var(--color-primary);
  color: #ffffff;
}

.cs-account-menu {
  position: relative;
  height: 100%;
}
.cs-account-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 230px;
  background: var(--color-brighter-bg);
  border: var(--cs-border-width) solid var(--cs-border);
  border-radius: var(--cs-radius);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 200;
  transform-origin: top right;
  transition: opacity 0.13s ease, transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), visibility 0s linear 0s;
}

.cs-account-dropdown[hidden] {
  display: flex;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: scale(0.85);
  transition: opacity 0.13s ease, transform 0.13s cubic-bezier(0.4, 0, 1, 1), visibility 0s linear 0.14s;
}
.cs-account-dropdown-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--color-text);
  font-size: 15px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}
.cs-account-dropdown-item svg { width: 20px; height: 20px; flex: none; }
.cs-account-dropdown-item:hover,
.cs-account-dropdown-item:focus {
  background: var(--color-secondary);
  color: var(--color-text);
  text-decoration: none;
}
.cs-account-dropdown-logout { color: var(--color-removed); }
.cs-account-dropdown-logout:hover,
.cs-account-dropdown-logout:focus { color: var(--color-removed); }

.cs-login {
  max-width: 420px;
  margin: 0 auto;
}
.cs-login-title {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 0 0 20px;
}
.cs-login .cs-field { margin-bottom: 18px; }
.cs-login .cs-field-label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 6px;
}

.cs-login .cs-input-wrap { position: relative; }
.cs-login .cs-input-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--color-text-secondary);
  pointer-events: none;
  z-index: 1;
}
.cs-login .cs-input-wrap input[type=text] {
  width: 100%;
  margin: 0;
  padding: 13px 14px 13px 42px;
  background: var(--color-secondary);
  border: var(--cs-border-width) solid var(--cs-border);
  border-radius: var(--cs-radius);
  color: var(--color-text);
  font-size: 16px;
}
.cs-login .cs-input-wrap input[type=text]::placeholder { color: var(--color-text-secondary); }
.cs-login .cs-edition { display: flex; gap: 10px; }
.cs-login .cs-edition-opt { flex: 1; margin: 0; cursor: pointer; }
.cs-login .cs-edition-opt input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.cs-login .cs-edition-opt > span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 12px;
  border-radius: var(--cs-radius);
  border: var(--cs-border-width) solid var(--cs-border);
  background: var(--color-secondary);
  color: var(--color-text-secondary);
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.cs-login .cs-edition-opt > span svg { width: 17px; height: 17px; }
.cs-login .cs-edition-opt:hover > span { color: var(--color-text); }
.cs-login .cs-edition-opt input:checked + span {
  border-color: var(--color-primary);
  background: var(--color-tertiary-hover);
  color: var(--color-text);
}
.cs-login .cs-signin-btn {
  width: 100%;
  height: auto;
  line-height: 1.2;
  margin-top: 22px;
  padding: 14px;
  text-align: center;
}

.btn-primary,
.btn-secondary,
.btn-tertiary {
  border-radius: var(--cs-radius);
}
.btn-secondary {
  border: var(--cs-border-width) solid var(--cs-border);
}
.btn-primary:hover, .btn-primary:focus,
.btn-secondary:hover,
.btn-secondary:focus {
  box-shadow: 0 0 8px rgb(from var(--btn-color-bg-hover) r g b/0.6);
}

.quantity-field {
  border-radius: var(--cs-radius);
  border: var(--cs-border-width) solid var(--cs-border);

  height: calc(var(--btn-size) + var(--cs-border-width) * 2);

  overflow: hidden;
}

.quantity-field .adjust {
  border-radius: 0;
}
.quantity-field .adjust.decrease {
  border-radius: 0 calc(var(--cs-radius) - var(--cs-border-width)) calc(var(--cs-radius) - var(--cs-border-width)) 0;
}
.quantity-field .adjust.increase {
  border-radius: calc(var(--cs-radius) - var(--cs-border-width)) 0 0 calc(var(--cs-radius) - var(--cs-border-width));
}

.cs-home-cards .info .image {
  border-radius: var(--cs-radius);
}

.site-sale-banner {
  border-radius: var(--cs-radius);
}

.site-home-categories .category {
  border-radius: var(--cs-radius);
  border: var(--cs-border-width) solid var(--cs-border);
  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: var(--cs-radius);
  border: var(--cs-border-width) solid var(--cs-border);
  background: var(--color-brighter-bg);
}

.store-text {
  border-radius: var(--cs-radius);
  border: var(--cs-border-width) solid var(--cs-border);
  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-text.cs-page-lead h1,
.store-text.cs-page-lead h2,
.store-text.cs-page-lead h3,
.store-text.cs-page-lead h4,
.store-text.cs-page-lead h5,
.store-text.cs-page-lead h6 {
  text-align: left;
}
.cs-page-lead .cs-welcome-name {
  font-size: 26px;
}

.store-products-grid .store-product,
.store-products-list .store-product,
.store-products-images .store-product {
  border-radius: var(--cs-radius);
  border: var(--cs-border-width) solid var(--cs-border);
  background: var(--color-brighter-bg);
  transition: transform 0.12s ease;
}

.store-products-grid .store-product:hover,
.store-products-list .store-product:hover,
.store-products-images .store-product:hover {
  transform: scale(1.02);
}

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

/* shared.css corta TODO boton con nowrap+ellipsis: en tarjetas estrechas
   "Add to Basket" se queda en "Add to Bas...". Aqui dejamos que envuelva. */
.store-products-grid .store-product .actions .add,
.store-products-grid .store-product .actions .subscribe,
.store-products-list .store-product .actions .add,
.store-products-list .store-product .actions .subscribe,
.store-products-images .store-product .actions .add,
.store-products-images .store-product .actions .subscribe {
  width: 100%;
  height: auto;
  min-height: var(--btn-size);
  padding-block: 8px;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.25;
}

.store-products-grid .store-product .image-link,
.store-products-images .store-product .image-link {
  width: 100%;
}
.store-products-grid .store-product .image,
.store-products-images .store-product .image,
.store-products-grid .store-product .image-default,
.store-products-images .store-product .image-default {
  width: 100%;
  height: 170px;
  aspect-ratio: auto;
  object-fit: contain;
}

.cs-price-badge { display: none; }
.cs-cards-s2 .store-products-grid .store-product,
.cs-cards-s2 .store-products-images .store-product {
  position: relative;
  background: linear-gradient(rgb(from var(--color-primary) r g b / 0.1), rgb(from var(--color-primary) r g b / 0.1)), var(--color-brighter-bg);
}
.cs-cards-s2 .store-products-grid .cs-price-badge,
.cs-cards-s2 .store-products-images .cs-price-badge {
  display: block;
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 2;
  padding: 5px 14px;
  background: var(--color-bg);
  border: var(--cs-border-width) solid var(--cs-border);
  border-radius: var(--cs-radius);
  color: var(--color-primary);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  pointer-events: none;
}
.cs-cards-s2 .store-products-grid .store-product .actions .price,
.cs-cards-s2 .store-products-images .store-product .actions .price {
  display: none;
}

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

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

.no-products {
  color: var(--color-text-secondary);
  background: var(--color-brighter-bg);
  border: var(--cs-border-width) solid var(--cs-border);
  border-radius: var(--cs-radius);
}

.store-product-full {
  border-radius: var(--cs-radius);
  border: var(--cs-border-width) solid var(--cs-border);
  background: var(--color-brighter-bg);
}

.popup-content.store-product-popup-content { max-width: 760px; }
@media (width > 600px) {
  .store-product-full {
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    align-items: start;
    gap: 22px;
  }
}
.cs-product-media {
  position: relative;
  z-index: 0; /* crea su propio contexto de apilamiento: el glow de abajo usa
                 z-index:-1 y sin esto se escaparia detras de todo el popup */
  min-width: 0;
}
.cs-product-media::before {
  content: "";
  position: absolute;
  inset: -12%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, var(--cs-primary-light) 0%, transparent 70%);
  opacity: 0.55;
  pointer-events: none;
}
.cs-product-media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--cs-radius);
}
.cs-product-media .image-default {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--cs-radius);
}
.cs-product-detail {
  display: flex;
  flex-direction: column;
  gap: var(--widget-padding);
  min-width: 0;
}

.store-product-full .cs-product-detail .actions {
  position: static !important;
  bottom: auto;
  order: 0;
  margin: 0;
  padding: 0;
  background: none;
  backdrop-filter: none;
}

/* la descripcion del paquete (.descr) viene del editor de texto enriquecido
   de Tebex: los "subtitulos" (BENEFICIOS GLOBAL, etc.) no son <h2> de
   verdad, son un <p> cuyo unico contenido es un <strong> -- eso es lo que
   distingue un subtitulo real de una palabra en negrita dentro de una
   oracion (ej. "3 libros de categoria VANILLA"), que debe seguir leyendose
   como texto normal con solo un tinte de color, no como un titulo de
   seccion. */
.descr strong { color: var(--color-primary); font-weight: 700; }
.descr p:has(> strong:only-child) {
  margin-top: 24px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: var(--cs-border-width) solid var(--cs-border);
}
.descr p:has(> strong:only-child) strong {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.descr > p:first-child { margin-top: 0; }

/* un <hr> suelto del editor de Tebex no tiene color propio: sobre el fondo
   oscuro del theme se vuelve practicamente invisible, y lo unico que se
   nota es el hueco vacio que deja -- por eso se veia como "un espacio
   random". Se le da una linea visible a juego con el resto del tema. Si el
   <hr> ya viene justo antes de un subtitulo, el subtitulo no necesita
   TAMBIEN su propio margen de arriba (se veian las dos separaciones
   sumadas, un hueco aun mas grande). */
.descr hr {
  margin: 20px 0;
  border: none;
  border-top: var(--cs-border-width) solid var(--cs-border);
}
.descr hr + p:has(> strong:only-child) { margin-top: 0; }

.descr ul { list-style: none; padding-left: 0; margin: 0 0 14px; }
.descr ul li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
}
.descr ul li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}
.descr ul ul { margin: 8px 0 0 6px; }
.descr ul ul li::before {
  width: 5px;
  height: 5px;
  background: transparent;
  border: 1px solid var(--color-primary);
}

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

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

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

.store-form input[type=text],
.store-form input[type=number],
.store-form input[type=email],
.store-form input[type=search],
.store-form select,
.store-form textarea,
.widget-gift-card .gift-card-input {
  border-radius: var(--cs-radius);
  border: var(--cs-border-width) solid var(--cs-border);
}

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

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

.popup-content {
  border-radius: var(--cs-radius);
  border: var(--cs-border-width) solid var(--cs-border);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.6);
}

.popup:not(.drawer) {
  --fade-duration: 160ms;
}
.popup:not(.drawer) .popup-content {
  transition: scale 0.26s cubic-bezier(0.34, 1.56, 0.64, 1),
              translate 0.26s cubic-bezier(0.34, 1.56, 0.64, 1),
              opacity var(--fade-duration) ease;
}
@starting-style {
  .popup:not(.drawer) .popup-content {
    scale: 0.82;
    translate: 0 18px;
  }
}
.popup:not(.drawer)[hidden] .popup-content {
  scale: 0.82;
  translate: 0 18px;
  transition: scale 0.14s cubic-bezier(0.4, 0, 1, 1), translate 0.14s cubic-bezier(0.4, 0, 1, 1), opacity var(--fade-duration) ease;
}

/* boton de cerrar generico de Tebex (icono blanco pegado a la esquina): se
   redondea a circulo con el mismo lenguaje visual que .cs-modal-close (los
   dialogos de copiar IP, etc.), en vez del cuadrado por defecto. El popup
   del carrito (.basket-popup-content) ya tenia su propio corte de esquina
   mas abajo, que sigue ganando ahi por ser mas especifico. */
.popup-close {
  top: 14px;
  right: 14px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: var(--color-secondary);
  opacity: 1;
  transition: transform 0.12s ease, background-color 0.12s ease;
}
.popup-close::before { mask-size: 16px; }
.popup-close:hover {
  background-color: var(--color-secondary-hover);
  transform: scale(1.08);
}

.basket-popup .popup-scroll-cont {
  padding: 0;
  justify-content: flex-end;
}
.basket-popup-content {
  border-radius: var(--cs-radius) 0 0 var(--cs-radius);

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

.basket .basket-title::before {
  display: none;
}

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

.basket-item {
  border-radius: var(--cs-radius);
  border: var(--cs-border-width) solid var(--cs-border);
}
.basket-item .quantity {
  border-radius: var(--cs-radius);
}
.cs-basket-thumb {
  flex: none;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-basket-thumb img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.toast {
  border-radius: var(--cs-radius);
  border: var(--cs-border-width) solid var(--cs-border);
}

.toast-close {
  border-radius: var(--cs-radius);
}

.cs-modal {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 1050;
  align-items: center;
  justify-content: center;
  padding: 16px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.15s ease, visibility 0s linear 0.16s;
}
.cs-modal.cs-modal-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.15s ease, visibility 0s linear 0s;
}
.cs-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
}
.cs-modal-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
  background: var(--color-brighter-bg);
  border: var(--cs-border-width) solid var(--cs-border);
  border-radius: var(--cs-radius);
  padding: 26px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  transform: scale(0.82);
  transition: transform 0.14s cubic-bezier(0.4, 0, 1, 1);
}
.cs-modal.cs-modal-open .cs-modal-card {
  transform: scale(1);
  transition: transform 0.26s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cs-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--color-secondary);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--color-text-secondary);
  transition: transform 0.12s ease, color 0.12s ease;
}
.cs-modal-close svg { width: 18px; height: 18px; }
.cs-modal-close:hover,
.cs-modal-close:focus {
  transform: scale(1.1);
  color: var(--color-text);
}
.cs-modal-title {
  margin: 0 32px 18px 0;
  font-size: 28px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text);
}
.cs-modal-text {
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--color-text-darker);
}
.cs-modal-text .cs-copy-ip {
  color: var(--color-primary);
  font-weight: 700;
}
.cs-modal-success .cs-modal-title { color: #3fb950; }
.cs-modal-error .cs-modal-title { color: var(--color-removed); }
.cs-modal-warning .cs-modal-title { color: var(--color-primary); }
@media (prefers-reduced-motion: reduce) {
  .cs-modal,
  .cs-modal.cs-modal-open,
  .cs-modal .cs-modal-card,
  .cs-modal.cs-modal-open .cs-modal-card {
    transition: none !important;
  }
}

.store-category-tiered {
  border-radius: var(--cs-radius);
  border: var(--cs-border-width) solid var(--cs-border);
  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: var(--cs-radius);
  border: var(--cs-border-width) solid var(--cs-border);
  background: rgb(from var(--color-bg) r g b/0.5);
}

.media-slider .slider,
.media-slider .thumb {
  border-radius: var(--cs-radius);
}
.media-slider .open-lightbox {
  border-radius: var(--cs-radius);
}

.popup.popup-media-slider .thumb {
  border-radius: var(--cs-radius);
}
.popup.popup-media-slider .popup-close {
  border-radius: var(--cs-radius);
}

.cs-cmp-scroll {
  overflow-x: auto;
  padding-bottom: 10px;
  --cs-cmp-labelw: 200px;
  --cs-cmp-colw: 150px;
}
@media (width <= 1280px) {
  .cs-cmp-scroll { --cs-cmp-labelw: 172px; --cs-cmp-colw: 136px; }
}
/* min-content (no max-content): la rejilla se adapta al ancho disponible
   y solo aparece scroll horizontal cuando de verdad no caben las columnas */
.cs-cmp { display: grid; min-width: min-content; overflow: hidden; }
.cs-cmp-panel {
  grid-column: 2 / -1;
  grid-row: 1 / -1;
  z-index: 0;
  background: var(--color-brighter-bg);
  border: var(--cs-border-width) solid var(--cs-border);
  border-radius: var(--cs-radius);
}
/* aro + cometa por rango: {glow=color} en la descripcion del paquete crea UNA
   caja independiente por columna que abarca TODA su altura (header con
   precio/comprar + todas las filas de abajo), con su propio aro fijo y su
   propio cometa animado. Cada rango es su propia caja -- nunca comparten
   borde ni cometa con la columna vecina, asi no se mezclan ni se "prestan"
   la animacion entre si.
   El aro es INSET (hacia adentro): .cs-cmp recorta con overflow:hidden para
   mantener las esquinas redondeadas de toda la tabla, un glow hacia afuera
   se veria cortado en los bordes. */
.cs-cmp-colglow {
  position: relative;
  z-index: 0;
  pointer-events: none;
  border-radius: var(--cs-radius);
  box-shadow: inset 0 0 0 2px var(--cs-glow), inset 0 0 20px -8px var(--cs-glow);
  animation: cs-cmp-colglow-pulse 2.6s ease-in-out infinite;
}
@keyframes cs-cmp-colglow-pulse {
  0%, 100% { box-shadow: inset 0 0 0 2px var(--cs-glow), inset 0 0 16px -8px var(--cs-glow); }
  50% { box-shadow: inset 0 0 0 2px var(--cs-glow), inset 0 0 28px -4px var(--cs-glow); }
}
/* el trazo es un SVG cuyo <rect> se mide y se anima por JS (ver
   layoutColGlows en category.html) con numeros reales en pixeles -- nada de
   mask-composite (fragil entre navegadores: se veia el color entero sin
   recortar) ni de pathLength en <rect> (soporte parejo entre navegadores:
   el trazo aparecia en cualquier parte del cuadro, no en el borde real). */
.cs-cmp-colglow-svg {
  position: absolute;
  inset: 0;
  /* recorte estricto a la propia caja: con overflow:visible el trazo (2.5px,
     centrado en el borde) podia sangrar 1-2px hacia la columna vecina si dos
     rangos con glow quedaban pegados, mezclando su color con el de al lado. */
  overflow: hidden;
}
.cs-cmp-colglow-svg rect {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
}
@media (prefers-reduced-motion: reduce) {
  .cs-cmp-colglow { animation: none; }
}
.cs-cmp-card {
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 12px 16px;
  border-right: var(--cs-border-width) solid var(--cs-border);
  border-bottom: var(--cs-border-width) solid var(--cs-border);
  overflow: hidden;
}
.cs-cmp-card.cs-cmp-firstcol { border-top-left-radius: var(--cs-radius); }
.cs-cmp-card.cs-cmp-lastcol { border-top-right-radius: var(--cs-radius); }
.cs-cmp-card-featured { background: linear-gradient(180deg, rgb(from var(--color-primary) r g b / 0.18), rgb(from var(--color-primary) r g b / 0) 55%); }
.cs-cmp-banner {
  width: calc(100% + 32px);
  margin: 0 -16px;
  padding: 6px 0;
  background: linear-gradient(180deg, var(--cs-primary-light), var(--color-primary));
  color: var(--color-primary-text);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.5px;
}
.cs-cmp-banner-spacer { height: 30px; }
.cs-cmp-badge { width: 78px; height: 78px; margin: 14px 0 10px; display: flex; align-items: center; justify-content: center; }
.cs-cmp-badge img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cs-cmp-name {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--color-text);
  margin-bottom: 10px;
  max-width: 100%;
  overflow-wrap: break-word;
  hyphens: auto;
}
.cs-cmp-price { margin-bottom: 14px; line-height: 1.2; }
.cs-cmp-price-old { display: block; color: var(--color-removed); text-decoration: line-through; font-weight: 700; font-size: 14px; }
.cs-cmp-price-now { font-size: 20px; font-weight: 700; color: var(--color-text); }
.cs-cmp-price-now small { font-size: 14px; }
.cs-cmp-buy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: auto;
  padding: 10px 10px;
  border-radius: var(--cs-radius);
  background: var(--color-primary);
  color: var(--color-primary-text);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
  text-decoration: none;
  transition: transform 0.12s ease;
}
.cs-cmp-buy:hover, .cs-cmp-buy:focus { transform: scale(1.03); color: var(--color-primary-text); text-decoration: none; }
.cs-cmp-buy svg { width: 16px; height: 16px; }
.cs-cmp-label {
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: 58px;
  padding: 0 14px;
  background: var(--color-brighter-bg);
  border-left: var(--cs-border-width) solid var(--cs-border);
  border-bottom: var(--cs-border-width) solid var(--cs-border);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-darker);
}
.cs-cmp-label.cs-cmp-first { border-top: var(--cs-border-width) solid var(--cs-border); border-top-left-radius: var(--cs-radius); }
.cs-cmp-label.cs-cmp-last { border-bottom: var(--cs-border-width) solid var(--cs-border); border-bottom-left-radius: var(--cs-radius); }
.cs-cmp-cell {
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 58px;
  padding: 8px 10px;
  border-right: var(--cs-border-width) solid var(--cs-border);
  border-bottom: var(--cs-border-width) solid var(--cs-border);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}
.cs-cmp-check { width: 26px; height: 26px; border-radius: 50%; background: #4caf50; display: inline-flex; align-items: center; justify-content: center; }
.cs-cmp-check svg { width: 15px; height: 15px; }
.cs-cmp-cross {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--color-text-secondary);
  color: var(--color-text-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.cs-cmp-cell-icon { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; line-height: 0; }
.cs-cmp-cell-icon img, .cs-cmp-cell-icon svg { height: 20px; width: auto; max-width: 100%; display: block; }
.cs-cmp-foot {
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 10px;
  border-right: var(--cs-border-width) solid var(--cs-border);
}
.cs-cmp-lastcol { border-right: none; }
.cs-cmp-nav { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-bottom: 12px; }
.cs-cmp-nav-info { font-size: 13px; font-weight: 700; letter-spacing: 0.5px; color: var(--color-text-secondary); }
.cs-cmp-nav-btn {
  width: 40px;
  height: 40px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: var(--cs-border-width) solid var(--cs-border);
  background: var(--color-brighter-bg);
  color: var(--color-text);
  cursor: pointer;
  transition: transform 0.12s ease, border-color 0.15s ease, color 0.15s ease;
}
.cs-cmp-nav-btn svg { width: 18px; height: 18px; }
.cs-cmp-nav-btn:hover:not(:disabled), .cs-cmp-nav-btn:focus:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary); transform: scale(1.08); }
.cs-cmp-nav-btn:disabled { opacity: 0.35; cursor: default; }
@keyframes cs-cmp-slide-next { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: translateX(0); } }
@keyframes cs-cmp-slide-prev { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: translateX(0); } }
.cs-cmp-anim-next .cs-cmp-card, .cs-cmp-anim-next .cs-cmp-cell, .cs-cmp-anim-next .cs-cmp-foot { animation: cs-cmp-slide-next 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.cs-cmp-anim-prev .cs-cmp-card, .cs-cmp-anim-prev .cs-cmp-cell, .cs-cmp-anim-prev .cs-cmp-foot { animation: cs-cmp-slide-prev 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
@media (prefers-reduced-motion: reduce) {
  .cs-cmp-anim-next .cs-cmp-card, .cs-cmp-anim-next .cs-cmp-cell, .cs-cmp-anim-next .cs-cmp-foot,
  .cs-cmp-anim-prev .cs-cmp-card, .cs-cmp-anim-prev .cs-cmp-cell, .cs-cmp-anim-prev .cs-cmp-foot { animation: none; }
}

/* ---------- comparativa: toggle "solo diferencias" ---------- */

.cs-cmp-tools {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 14px;
}
.cs-cmp-diff {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border: var(--cs-border-width) solid var(--cs-border);
  border-radius: var(--cs-radius);
  background: var(--color-brighter-bg);
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.cs-cmp-diff:hover,
.cs-cmp-diff:focus-visible { color: var(--color-text); border-color: var(--color-primary); }
.cs-cmp-diff-dot {
  position: relative;
  width: 34px;
  height: 18px;
  flex: 0 0 auto;
  border-radius: 999px;
  background: var(--cs-border);
  transition: background 0.15s ease;
}
.cs-cmp-diff-dot::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-text-secondary);
  transition: transform 0.18s ease, background 0.18s ease;
}
.cs-cmp-diff.cs-on { color: var(--color-text); border-color: var(--color-primary); }
.cs-cmp-diff.cs-on .cs-cmp-diff-dot { background: var(--color-primary); }
.cs-cmp-diff.cs-on .cs-cmp-diff-dot::after { transform: translateX(16px); background: var(--color-primary-text); }
@media (prefers-reduced-motion: reduce) {
  .cs-cmp-diff, .cs-cmp-diff-dot, .cs-cmp-diff-dot::after { transition: none; }
}

/* ---------- comparativa: rango que el cliente YA tiene ---------- */

/* Tebex marca purchasable=false por cliente; en vez de un boton muerto con
   tooltip invisible, mostramos el motivo que da Tebex tal cual. */
.cs-cmp-owned {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: auto;
  padding: 10px;
  border: var(--cs-border-width) solid var(--cs-border);
  border-radius: var(--cs-radius);
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.cs-cmp-owned svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  color: var(--color-text-secondary);
}
.cs-cmp-card-owned,
.cs-cmp-cell-owned {
  box-shadow: inset 0 0 0 999px rgb(from var(--color-text-secondary) r g b / 0.08);
}
.cs-cmpm-tab-owned { opacity: 0.7; }

/* ---------- comparativa: resaltado e interaccion ---------- */

.cs-cmp-card,
.cs-cmp-cell,
.cs-cmp-foot,
.cs-cmp-label {
  transition: box-shadow 0.18s ease, color 0.18s ease;
}

/* fila bajo el cursor: tinte muy suave */
.cs-cmp-hot-row {
  box-shadow: inset 0 0 0 999px rgb(from var(--color-primary) r g b / 0.045);
}
.cs-cmp-label.cs-cmp-hot-row {
  color: var(--color-text);
}

/* columna bajo el cursor: gana sobre la fila */
.cs-cmp-hot {
  box-shadow: inset 0 0 0 999px rgb(from var(--color-primary) r g b / 0.1);
}
.cs-cmp-card.cs-cmp-hot {
  box-shadow: inset 0 0 0 999px rgb(from var(--color-primary) r g b / 0.14);
}

/* columna del paquete destacado (oferta o {best}) */
.cs-cmp-cell-featured,
.cs-cmp-cell-best {
  border-right-color: rgb(from var(--color-primary) r g b / 0.45);
}
.cs-cmp-card-best {
  background: linear-gradient(180deg, rgb(from var(--color-primary) r g b / 0.24), rgb(from var(--color-primary) r g b / 0) 60%);
}
.cs-cmp-banner-best {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--cs-primary-light), var(--color-primary));
  text-transform: uppercase;
}
/* brillo que recorre la cinta de "Mas popular" en loop, aparte del glow de
   rango (ese vive en .cs-cmp-colglow, alrededor de toda la columna) */
.cs-cmp-banner-best::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgb(255 255 255 / 0.6), transparent);
  animation: cs-cmp-banner-sheen 2.8s ease-in-out infinite;
}
@keyframes cs-cmp-banner-sheen {
  0% { left: -60%; }
  60% { left: 115%; }
  100% { left: 115%; }
}
@media (prefers-reduced-motion: reduce) {
  .cs-cmp-banner-best::after { display: none; }
}

/* entrada escalonada de las columnas */
@keyframes cs-cmp-pop { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.cs-cmp-anim-in .cs-cmp-card {
  animation: cs-cmp-pop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  animation-delay: calc(var(--cs-i, 0) * 80ms);
}

.cs-cmp-check,
.cs-cmp-cross {
  transition: transform 0.18s ease;
}
.cs-cmp-hot .cs-cmp-check,
.cs-cmp-hot .cs-cmp-cross {
  transform: scale(1.15);
}

@media (prefers-reduced-motion: reduce) {
  .cs-cmp-anim-in .cs-cmp-card { animation: none; }
  .cs-cmp-check, .cs-cmp-cross,
  .cs-cmp-hot .cs-cmp-check, .cs-cmp-hot .cs-cmp-cross { transition: none; transform: none; }
}

/* ---------- comparativa en movil: selector de rango + lista ---------- */

.cs-cmpm { display: none; }

.cs-cmpm-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 14px;
}
.cs-cmpm-tab {
  flex: 0 0 auto;
  padding: 10px 16px;
  border: var(--cs-border-width) solid var(--cs-border);
  border-radius: var(--cs-radius);
  background: var(--color-brighter-bg);
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.cs-cmpm-tab.cs-cmpm-on {
  color: var(--color-text);
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 999px rgb(from var(--color-primary) r g b / 0.12);
}
.cs-cmpm-tab-best::after {
  content: "★";
  margin-left: 6px;
  color: var(--color-primary);
}
.cs-cmpm-tab-glow { border-color: var(--cs-glow); }
.cs-cmpm-tab-glow.cs-cmpm-on { border-color: var(--cs-glow); box-shadow: inset 0 0 0 999px rgb(from var(--color-primary) r g b / 0.12), inset 0 0 0 2px var(--cs-glow); }

.cs-cmpm-panel {
  border: var(--cs-border-width) solid var(--cs-border);
  border-radius: var(--cs-radius);
  background: var(--color-brighter-bg);
  padding: 16px;
}
.cs-cmpm-panel[hidden] { display: none; }
.cs-cmpm-panel-glow { box-shadow: inset 0 0 0 2px var(--cs-glow), inset 0 0 40px -10px var(--cs-glow); }
.cs-cmpm-flag {
  display: inline-block;
  margin-bottom: 12px;
  padding: 4px 12px;
  border-radius: var(--cs-radius);
  background: linear-gradient(180deg, var(--cs-primary-light), var(--color-primary));
  color: var(--color-primary-text);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.cs-cmpm-top {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.cs-cmpm-img {
  flex: 0 0 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cs-cmpm-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cs-cmpm-name {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--color-text);
}
.cs-cmpm-price { margin-top: 4px; }

.cs-cmpm-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
}
.cs-cmpm-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-top: 1px solid var(--cs-border);
}
.cs-cmpm-k { font-size: 14px; color: var(--color-text-darker); }
.cs-cmpm-v {
  flex: 0 0 auto;
  font-size: 14px;
  font-weight: 600;
  text-align: right;
  color: var(--color-text);
}

/* ---------- comparativa: fallback sin JS y en pantallas estrechas ---------- */

.cs-cmp-fallback,
.cs-qbuy-fallback {
  display: grid;
  /* min(...,100%) evita que la columna sea mas ancha que el contenedor:
     en movil colapsa a una columna en vez de desbordar en horizontal */
  grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr));
  gap: 16px;
}
.cs-js .cs-cmp-fallback,
.cs-js .cs-qbuy-fallback { display: none; }

@media (width <= 991px) {
  .cs-cmp-scroll,
  .cs-cmp-nav { display: none; }
  .cs-cmpm { display: block; }
}

.cs-qbuy-scroll { overflow-x: auto; padding-bottom: 10px; }
.cs-qbuy-grid { display: flex; flex-direction: column; gap: 12px; }
.cs-qbuy-row {
  display: grid;
  grid-template-columns: minmax(150px, 1.4fr) repeat(var(--cs-qbuy-cols, 1), minmax(96px, 1fr));
  gap: 12px;
  align-items: stretch;
}
.cs-qbuy-product {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 10px;
  padding: 16px 14px;
  background: var(--color-brighter-bg);
  border: var(--cs-border-width) solid var(--cs-border);
  border-radius: var(--cs-radius);
}
.cs-qbuy-product-sale {
  border-color: var(--color-primary);
  background: linear-gradient(180deg, rgb(from var(--color-primary) r g b / 0.18), rgb(from var(--color-primary) r g b / 0) 60%), var(--color-brighter-bg);
}
.cs-qbuy-badge {
  position: absolute;
  top: 0;
  right: 0;
  padding: 4px 12px;
  background: linear-gradient(180deg, var(--cs-primary-light), var(--color-primary));
  color: var(--color-primary-text);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.5px;
  border-bottom-left-radius: 12px;
}
.cs-qbuy-img { flex: none; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; }
.cs-qbuy-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.cs-qbuy-pname {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.2;
  color: var(--color-text);
}
.cs-qbuy-cell { margin: 0; display: flex; }
.cs-qbuy-cell-empty { align-items: center; justify-content: center; font-size: 18px; color: var(--color-text-secondary); opacity: 0.4; }
.cs-qbuy-buy {
  position: relative;
  overflow: hidden;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 12px 8px;
  border: var(--cs-border-width) solid var(--cs-border);
  border-radius: var(--cs-radius);
  background: var(--color-brighter-bg);
  color: var(--color-text);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.cs-qbuy-buy-n { font-size: 22px; font-weight: 800; line-height: 1; color: var(--color-text); transition: opacity 0.15s ease; }
.cs-qbuy-buy-p { font-size: 12px; font-weight: 600; letter-spacing: 0.3px; white-space: nowrap; color: var(--color-text-secondary); transition: opacity 0.15s ease; }
.cs-qbuy-buy-old { font-size: 11px; font-weight: 600; color: var(--color-text-secondary); text-decoration: line-through; white-space: nowrap; transition: opacity 0.15s ease; }
.cs-qbuy-buy-sale { border-color: var(--color-primary); }
.cs-qbuy-buy-sale .cs-qbuy-buy-p { color: var(--color-primary); }
.cs-qbuy-cart {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 4px;
  opacity: 0;
  color: var(--color-primary);
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.cs-qbuy-cart svg { width: 24px; height: 24px; }
.cs-qbuy-cart-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; line-height: 1.1; text-align: center; }
.cs-qbuy-buy:hover, .cs-qbuy-buy:focus { border-color: var(--color-primary); background: var(--color-tertiary-hover); color: var(--color-text); }
.cs-qbuy-buy:hover .cs-qbuy-buy-n, .cs-qbuy-buy:focus .cs-qbuy-buy-n,
.cs-qbuy-buy:hover .cs-qbuy-buy-p, .cs-qbuy-buy:focus .cs-qbuy-buy-p,
.cs-qbuy-buy:hover .cs-qbuy-buy-old, .cs-qbuy-buy:focus .cs-qbuy-buy-old { opacity: 0; }
.cs-qbuy-buy:hover .cs-qbuy-cart, .cs-qbuy-buy:focus .cs-qbuy-cart { opacity: 1; }
.cs-qbuy-buy.cs-qbuy-loading { pointer-events: none; }
.cs-qbuy-buy.cs-qbuy-loading .cs-qbuy-buy-n,
.cs-qbuy-buy.cs-qbuy-loading .cs-qbuy-buy-p,
.cs-qbuy-buy.cs-qbuy-loading .cs-qbuy-buy-old,
.cs-qbuy-buy.cs-qbuy-loading .cs-qbuy-cart { opacity: 0; }
.cs-qbuy-buy.cs-qbuy-loading::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 22px;
  margin: -11px 0 0 -11px;
  border: 3px solid var(--color-secondary);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: cs-spin 0.6s linear infinite;
}
@keyframes cs-spin { to { transform: rotate(360deg); } }

.site-footer { background: transparent; }
.cs-footer {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 40px 30px 36px 16px;
}

.cs-footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
}
.cs-footer-legal { min-width: 0; }
.cs-footer-rights {
  display: block;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text);
  margin-bottom: 6px;
}
.cs-footer-notice {
  display: block;
  max-width: 460px;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.cs-footer-play {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  border: none;
  border-radius: var(--cs-radius);
  background: transparent;
  color: var(--color-text);
  text-align: right;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s ease;
}
.cs-footer-play:hover,
.cs-footer-play:focus {
  background: rgba(255, 255, 255, 0.05);
  text-decoration: none;
}
.cs-footer-play-icon {
  flex: none;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--cs-primary-deep) 100%);
  color: #fff;
}
.cs-footer-play-icon svg { width: 18px; height: 18px; }
.cs-footer-play .cs-nav-text { min-width: 0; }
.cs-footer-play .cs-nav-title {
  display: block;
  font-weight: 700;
  font-size: 16px;
  color: var(--color-text);
}
.cs-footer-play .cs-nav-subtitle {
  display: block;
  font-size: 13px;
  color: var(--color-text-secondary);
}
.cs-footer-play .cs-nav-sub-hover { display: none; }
.cs-footer-play:hover .cs-nav-sub-base,
.cs-footer-play:focus .cs-nav-sub-base { display: none; }
.cs-footer-play:hover .cs-nav-sub-hover,
.cs-footer-play:focus .cs-nav-sub-hover { display: inline; }

.cs-footer-divider {
  height: 1px;
  background: var(--cs-border);
  margin: 26px 0;
}

.cs-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px 28px;
  flex-wrap: wrap;
}
.cs-footer-pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 22px;
}
.cs-footer-link {
  color: var(--color-text-secondary);
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  transition: color 0.12s ease;
}
.cs-footer-link:hover,
.cs-footer-link:focus {
  color: var(--color-primary);
  text-decoration: none;
}
.cs-footer-social {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cs-footer-social-link {
  width: 38px;
  height: 38px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: transparent;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: background 0.12s ease, color 0.12s ease;
}
.cs-footer-social-link:hover,
.cs-footer-social-link:focus {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text);
  text-decoration: none;
}
.cs-footer-social-link svg { width: 20px; height: 20px; }

@media (width <= 767px) {
  .cs-footer { padding: 28px 18px 24px; }
  .cs-footer-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
  .cs-footer-play { text-align: left; padding-left: 0; }
  .cs-footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
}

@media (width <= 960px) {
  .site-main .site-header,
  .site-main .site-content {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
  }
  .site-header-inner .toggle-navigation {
    --btn-size: 40px;
    background-position: center;
    margin-left: calc((var(--btn-icon-size) - var(--btn-size)) / 2);
  }
  .navigation-vertical .cs-menu-head {
    position: absolute;
    top: 26px;
    left: var(--widget-padding);
    z-index: 1;
    margin: 0;
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--color-text);
  }
}

@media (width <= 600px) {
  .basket-popup-content {
    max-width: 100%;
    border-radius: 0;
  }
}

@media (width <= 767px) {
  .cs-qbuy-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .cs-qbuy-row .cs-qbuy-product {
    grid-column: 1 / -1;
  }
  .cs-qbuy-row .cs-qbuy-cell-empty,
  .cs-qbuy-row .cs-qbuy-extra {
    display: none;
  }
}

@media (width <= 960px) {
  body.cs-mobile-l2.page-index .site {
    padding: 20px;
    gap: 20px;
  }
  body.cs-mobile-l2.page-index .site-main,
  body.cs-mobile-l2.page-index .store-sidebar {
    display: contents;
  }

  body.cs-mobile-l2.page-index .site-header,
  body.cs-mobile-l2.page-index .cs-sidebar-logo,
  body.cs-mobile-l2.page-index .site-navigation,
  body.cs-mobile-l2.page-index .cs-home-cards,
  body.cs-mobile-l2.page-index .cs-featured,
  body.cs-mobile-l2.page-index .site-content,
  body.cs-mobile-l2.page-index .cs-textcards,
  body.cs-mobile-l2.page-index .widget:not(.site-navigation) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    align-self: stretch;
    flex: 0 0 auto;
  }

  body.cs-mobile-l2.page-index .site-header { order: 0; }
  body.cs-mobile-l2.page-index .cs-sidebar-logo { order: 1; }
  body.cs-mobile-l2.page-index .site-navigation { order: 2; }
  body.cs-mobile-l2.page-index .cs-home-cards { order: 3; }
  body.cs-mobile-l2.page-index .cs-featured { order: 4; }
  body.cs-mobile-l2.page-index .site-content { order: 5; }
  body.cs-mobile-l2.page-index .cs-textcards { order: 6; }
  body.cs-mobile-l2.page-index .widget:not(.site-navigation) { order: 7; }

  body.cs-mobile-l2.page-index .site-header .actions,
  body.cs-mobile-l2.page-index .site-header .cs-mobile-logo {
    display: none;
  }

  body.cs-mobile-l2.page-index .cs-sidebar-logo {
    display: block;
    margin: 0;
    padding: 6px 0 2px;
    text-align: center;
  }
  body.cs-mobile-l2.page-index .cs-sidebar-logo img {
    width: auto;
    max-width: 100%;
    max-height: 180px;
  }
  body.cs-mobile-l2.page-index .cs-sidebar-logo .cs-logo-text {
    font-size: 34px;
    padding: 0;
  }

  body.cs-mobile-l2.page-index .site-navigation {
    position: static;
    inset: auto;
    z-index: auto;
    visibility: visible;
    opacity: 1;
    transition: none;
    padding: 14px;
    border-radius: var(--cs-radius);
    border: var(--cs-border-width) solid var(--cs-border);
    background: var(--color-brighter-bg);
  }
  body.cs-mobile-l2.page-index .site-navigation .menu {
    position: static;
    inset: auto;
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 0;
    background: none;
    overflow: visible;
    opacity: 1;
    scale: 1;
    translate: none;
    transition: none;
    font-size: 16px;
  }
  body.cs-mobile-l2.page-index .site-navigation .menu::after { display: none; }
  body.cs-mobile-l2.page-index .site-navigation .close-navigation { display: none; }
  body.cs-mobile-l2.page-index .site-navigation .cs-menu-head {
    position: static;
    top: auto;
    left: auto;
    margin: 0 0 10px;
    padding: 4px 6px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--color-text);
  }
  body.cs-mobile-l2.page-index .site-navigation .has-children { display: block; }
  body.cs-mobile-l2.page-index .site-navigation .menu a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-radius: var(--cs-radius);
    color: var(--color-text-secondary);
    font-size: 16px;
  }
  body.cs-mobile-l2.page-index .site-navigation .menu a:hover { color: var(--color-text); }
  body.cs-mobile-l2.page-index .site-navigation .menu a.link-active {
    background: var(--color-tertiary-hover);
    color: var(--color-text);
    font-weight: 600;
  }
  body.cs-mobile-l2.page-index .site-navigation .cs-menu-parent {
    padding: 9px 12px;
    border-radius: var(--cs-radius);
    color: var(--color-text-secondary);
    font-size: 16px;
  }
  body.cs-mobile-l2.page-index .site-navigation .cs-menu-parent:hover {
    color: var(--color-text);
    background: var(--color-tertiary-hover);
  }
  body.cs-mobile-l2.page-index .site-navigation .has-children.expanded > .cs-menu-parent {
    color: var(--color-text);
  }
  body.cs-mobile-l2.page-index .site-navigation ul ul { padding-left: 0; }
  body.cs-mobile-l2.page-index .site-navigation ul ul a {
    padding: 9px 12px 9px 50px;
    font-size: 16px;
  }
}