@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap");

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.toast {
  border-radius: 6px;
}

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

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

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

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

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

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


/* HOME CATEGORIES — tiles grandes + label dentro */
.site-home-categories.kh-homeCats{
  display:flex;
  gap: 12px;
  padding: 10px 0 6px;
  margin: 10px 0 18px;
  overflow-x:auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.site-home-categories.kh-homeCats::-webkit-scrollbar{ display:none; }

.site-home-categories.kh-homeCats .category{
  position: relative;
  flex: 0 0 auto;
  width: 150px;
  height: 210px;
  border-radius: 16px;
  overflow: hidden;

  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
  transform: translateZ(0);
  transition: transform .12s ease, border-color .12s ease;
}

.site-home-categories.kh-homeCats .category:hover{
  transform: translateY(-1px);
  border-color: rgba(224,35,46,.45);
}

.site-home-categories.kh-homeCats .category .image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit: cover;
  filter: contrast(1.05) brightness(.95);
  transition: filter .14s ease, transform .14s ease;
}

.site-home-categories.kh-homeCats .category:hover .image{
  filter: grayscale(1) contrast(1.05) brightness(.9);
  transform: scale(1.03);
}

.site-home-categories.kh-homeCats .kh-catLabel{
  position:absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 3;

  height: 32px;
  display:flex;
  align-items:center;
  justify-content:center;

  border-radius: 12px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(8px);

  font-size: 12px;
  font-weight: 900;
  letter-spacing: .3px;
  text-transform: uppercase;
  text-shadow: 0 10px 18px rgba(0,0,0,.55);
  color: rgba(255,255,255,.92);

  padding: 0 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* =========================
   KHARAN — Landing Skin (base)
   Paste at END of shared.css
========================= */

:root{
  --kh-bg:#070708;
  --kh-panel:rgba(255,255,255,.06);
  --kh-panel2:rgba(255,255,255,.04);
  --kh-stroke:rgba(255,255,255,.12);
  --kh-text:rgba(255,255,255,.92);
  --kh-muted:rgba(255,255,255,.72);
  --kh-red:#e0232e;
  --kh-red2:#a80f18;
  --kh-shadow: 0 30px 80px rgba(0,0,0,.55);
  --kh-radius:18px;
  --kh-radius2:14px;
}

/* Background like landing */
body{
  background:
    radial-gradient(900px 520px at 15% 0%, rgba(224,35,46,.18), transparent 60%),
    radial-gradient(820px 520px at 85% 10%, rgba(224,35,46,.12), transparent 55%),
    linear-gradient(180deg, #070708 0%, #070708 60%, #060607 100%) !important;
  color: var(--kh-text) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Links */
a{ color: inherit; }

/* “Pill” button style */
.kh-btn,
button,
input[type="submit"],
a.button,
.button{
  border-radius: 999px !important;
}

/* Primary action (red) */
button.primary,
.button.primary,
a.button.primary,
input[type="submit"].primary{
  border: 1px solid rgba(224,35,46,.45) !important;
  background: linear-gradient(135deg, rgba(224,35,46,.22), rgba(224,35,46,.08)) !important;
  color: var(--kh-text) !important;
}
button.primary:hover,
.button.primary:hover,
a.button.primary:hover,
input[type="submit"].primary:hover{
  background: linear-gradient(135deg, rgba(224,35,46,.32), rgba(224,35,46,.12)) !important;
}

/* Generic “card” look */
.card,
.package,
.package-card,
.category,
.panel{
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.04) !important;
  border-radius: var(--kh-radius) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.35) !important;
}

/* Inputs / filters */
input, select, textarea{
  border: 1px solid var(--kh-stroke) !important;
  background: rgba(255,255,255,.04) !important;
  color: var(--kh-text) !important;
  border-radius: 14px !important;
}
input:focus, select:focus, textarea:focus{
  outline: none !important;
  border-color: rgba(224,35,46,.45) !important;
  box-shadow: 0 0 0 4px rgba(224,35,46,.18) !important;
}

/* Price badge (landing style) */
.kh-priceToast{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .2px;
  color: rgba(255,255,255,.95);
  background: rgba(0, 255, 140, .18);
  border: 1px solid rgba(0, 255, 140, .35);
  box-shadow: 0 10px 22px rgba(0,0,0,.28);
  white-space: nowrap;
}



/* =========================
   KHARAN — Global store shell (layout.html)
   Paste at END of shared.css
========================= */

:root{
  --kh-max: 1120px;
}

/* Global background across all pages (store) */
body{
  background:
    radial-gradient(900px 520px at 15% 0%, rgba(224,35,46,.18), transparent 60%),
    radial-gradient(820px 520px at 85% 10%, rgba(224,35,46,.12), transparent 55%),
    linear-gradient(180deg, #070708 0%, #070708 60%, #060607 100%) !important;
  color: rgba(255,255,255,.92);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Site wrapper: keep content centered like landing */
.site{
  max-width: var(--kh-max);
  margin: 0 auto;
  padding: 0 22px;
}

/* Make footer/header span full width visually but still aligned */
.site-header,
.site-footer{
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - (var(--kh-max) / 2));
  padding-right: calc(50vw - (var(--kh-max) / 2));
}

/* On small screens, don't do fancy full-bleed math */
@media (max-width: 1160px){
  .site-header,
  .site-footer{
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
}

/* Links default */
a{ color: inherit; }


/* =========================
   KHARAN — Home categories (index.html)
========================= */

/* Make home categories look like landing “tiles/strip” */
.site-home-categories,
.kh-homeCats{
  display:flex;
  gap: 10px;
  padding: 10px 0 8px;
  margin: 8px 0 18px;

  flex-wrap: nowrap;
  align-items:center;
  justify-content:center;

  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;

  scrollbar-width: none;
}
.site-home-categories::-webkit-scrollbar{ display:none; }

.site-home-categories .category,
.kh-homeCats .category{
  position: relative;
  flex: 0 0 auto;

  width: 120px;
  height: 180px;

  border-radius: 14px;
  overflow: hidden;

  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  box-shadow: 0 12px 30px rgba(0,0,0,.35);

  display:block;
  text-decoration:none;
  color: rgba(255,255,255,.92);

  transform: translateZ(0);
  transition: transform .12s ease, border-color .12s ease;
}

.site-home-categories .category:hover,
.kh-homeCats .category:hover{
  transform: translateY(-1px);
  border-color: rgba(224,35,46,.45);
}

.site-home-categories .category .image,
.kh-homeCats .category .image{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0) contrast(1.05) brightness(.95);
  transition: filter .14s ease, transform .14s ease;
}

.site-home-categories .category:hover .image,
.kh-homeCats .category:hover .image{
  filter: grayscale(1) contrast(1.05) brightness(.9);
  transform: scale(1.03);
}

/* Category name label overlay */
.site-home-categories .category{
  padding: 0; /* Exo might add padding; neutralize */
}
.site-home-categories .category::after,
.kh-homeCats .category::after{
  content: attr(aria-label);
  display:none; /* just in case */
}

/* Exo prints category.name as text node; wrap it visually */
.site-home-categories .category,
.kh-homeCats .category{
  font-size: 0; /* hide raw text spacing issues */
}
.site-home-categories .category > *:not(.image):not(.image-default),
.kh-homeCats .category > *:not(.image):not(.image-default){
  font-size: 0;
}

/* Create a label using the link text via CSS isn't possible reliably.
   So we style the text node by targeting the anchor and using text-shadow + background via pseudo. */
.site-home-categories .category{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .2px;
  text-align:center;
  line-height: 1;
}
.site-home-categories .category{
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.site-home-categories .category{
  padding: 6px;
}
.site-home-categories .category{
  text-shadow: 0 10px 18px rgba(0,0,0,.55);
}
.site-home-categories .category{
  background: rgba(255,255,255,.04);
}
.site-home-categories .category{
  position: relative;
}
.site-home-categories .category{
  color: rgba(255,255,255,.92);
}
.site-home-categories .category{
  /* label plate */
}
.site-home-categories .category{
  /* Use a pseudo overlay plate at the bottom */
}
.site-home-categories .category::before{
  content:"";
  position:absolute;
  left: 6px;
  right: 6px;
  bottom: 6px;
  height: 28px;
  border-radius: 10px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(8px);
  z-index: 2;
}
.site-home-categories .category{
  z-index: 1;
}
.site-home-categories .category{
  /* Make the text sit above the plate */
}
.site-home-categories .category{
  align-items:flex-end;
}
.site-home-categories .category{
  padding-bottom: 10px;
}
.site-home-categories .category{
  position: relative;
}
.site-home-categories .category{
  z-index: 1;
}
.site-home-categories .category{
  /* force text above plate */
}
.site-home-categories .category{
  /* nothing else */
}
.site-home-categories .category{
  /* ensure stacking */
}
.site-home-categories .category{
  /* ok */
}
.site-home-categories .category{
  /* done */
}
.site-home-categories .category{
  z-index: 1;
}
.site-home-categories .category{
  /* The text node is inside anchor; it will render above ::before due to z-index */
}
.site-home-categories .category{
  position: relative;
}
.site-home-categories .category{
  /* keep */
}
.site-home-categories .category{
  /* done */
}
.site-home-categories .category{
  /* final */
}
.site-home-categories .category{
  /* important: ensure anchor text is above plate */
}
.site-home-categories .category{
  /* We'll use a span if we change twig later; for now OK */
}

@media (max-width: 420px){
  .site-home-categories .category,
  .kh-homeCats .category{
    width: 88px;
    height: 88px;
    border-radius: 12px;
  }
  .site-home-categories,
  .kh-homeCats{
    justify-content:flex-start;
  }
}


/* =========================
   KHARAN — Exo Skin (layout + components)
   Paste at END of generic.css
========================= */

:root{
  --kh-bg:#070708;
  --kh-panel:rgba(255,255,255,.06);
  --kh-panel2:rgba(255,255,255,.04);
  --kh-stroke:rgba(255,255,255,.12);
  --kh-text:rgba(255,255,255,.92);
  --kh-muted:rgba(255,255,255,.72);
  --kh-red:#e0232e;
  --kh-shadow: 0 30px 80px rgba(0,0,0,.55);
  --kh-radius:18px;
  --kh-radius2:14px;
}

/* Header / topbar */
.kh-header{
  position: sticky;
  top: 0;
  z-index: 80;
  backdrop-filter: blur(12px);
  background: rgba(7,7,8,.70);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.kh-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  padding: 12px 18px;
}

.kh-brand{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 220px;
  text-decoration:none;
}

.kh-brand__logo{
  width: 40px;
  height: 40px;
  border-radius: 999px;
  box-shadow: 0 0 0 2px rgba(224,35,46,.18);
  transition: transform .15s ease;
}
.kh-brand:hover .kh-brand__logo{ transform: scale(1.10); }

.kh-brand__text{ line-height: 1.05; }
.kh-brand__name{
  font-weight: 600;
  letter-spacing: 2.5px;
  color: rgba(255,255,255,.96);
  font-size: 15px;
}
.kh-brand__sub{
  margin-top: 2px;
  font-weight: 400;
  letter-spacing: 2.8px;
  color: rgba(255,255,255,.60);
  font-size: 12px;
}

.kh-actions{
  display:flex;
  align-items:center;
  gap: 10px;
  justify-content:flex-end;
}

/* Pills */
.kh-pill{
  padding: 9px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.04) !important;
  color: var(--kh-text) !important;
  text-decoration:none !important;
}
.kh-pill:hover{
  background: rgba(255,255,255,.07) !important;
}

.kh-pill--red{
  border-color: rgba(224,35,46,.40) !important;
  background: linear-gradient(135deg, rgba(224,35,46,.25), rgba(224,35,46,.10)) !important;
}
.kh-pill--red:hover{
  background: linear-gradient(135deg, rgba(224,35,46,.32), rgba(224,35,46,.12)) !important;
}

/* Icon button (hamburger) */
.kh-iconBtn{
  width: 40px;
  height: 40px;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.04) !important;
}
.kh-iconBtn:hover{
  border-color: rgba(224,35,46,.40) !important;
  background: rgba(255,255,255,.07) !important;
}

/* Nav inside topbar (horizontal) */
.kh-navWrap{
  flex: 1 1 auto;
  display:flex;
  justify-content:center;
}

.kh-nav--horizontal{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

.kh-nav__list{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items:center;
  justify-content:center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kh-nav__link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  color: rgba(255,255,255,.72);
  font-size: 13px;
  text-decoration:none;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
}
.kh-nav__link:hover{
  color: rgba(255,255,255,.92);
  border-color: rgba(224,35,46,.35);
  background: rgba(255,255,255,.06);
  transform: translateY(-1px);
}
.kh-nav__link.is-active{
  color: rgba(255,255,255,.92);
  border-color: rgba(224,35,46,.45);
  background: linear-gradient(135deg, rgba(224,35,46,.20), rgba(224,35,46,.08));
}

/* Subnav (dropdown list style) */
.kh-subnav{
  margin: 10px 0 0;
  padding: 10px;
  list-style: none;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
}
.kh-subnav__link{
  display:block;
  padding: 8px 10px;
  border-radius: 12px;
  color: rgba(255,255,255,.72);
  text-decoration:none;
}
.kh-subnav__link:hover{
  color: rgba(255,255,255,.92);
  background: rgba(255,255,255,.06);
}

/* Info row under header (server/discord) */
.kh-infoRow{
  display:flex;
  gap: 12px;
  padding: 10px 18px 14px;
  flex-wrap: wrap;
}
.kh-infoCard{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  text-decoration:none;
  color: var(--kh-text);
}
.kh-infoCard__icon{ width: 22px; height: 22px; opacity: .9; }
.kh-infoCard__title{ display:block; font-weight: 800; font-size: 12px; letter-spacing: .4px; }
.kh-infoCard__action{
  display:inline-flex;
  margin-top: 4px;
  font-size: 12px;
  color: rgba(255,255,255,.70);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.kh-infoCard__action:hover{ color: rgba(255,255,255,.92); }

/* Sale banner to match landing badge vibe */
.kh-saleBanner{
  margin: 0;
  padding: 10px 18px 12px;
  color: rgba(255,255,255,.92);
  font-weight: 900;
  letter-spacing: .4px;
  text-transform: uppercase;
  border-top: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(135deg, rgba(224,35,46,.20), rgba(224,35,46,.08));
}

/* Product cards */
.kh-productCard{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: var(--kh-radius);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  overflow: hidden;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.kh-productCard:hover{
  transform: translateY(-2px);
  border-color: rgba(224,35,46,.45);
  box-shadow: 0 26px 70px rgba(0,0,0,.45);
}

.kh-productCard__img{
  display:block;
  height: 150px;
  background: rgba(0,0,0,.35);
  padding: 10px;
}
.kh-productCard__img .image{
  width: 100%;
  height: 100%;
  object-fit: contain;
  display:block;
  filter: contrast(1.05) brightness(.95);
}
.kh-productCard__ph{
  display:grid;
  place-items:center;
  font-weight: 900;
  color: rgba(255,255,255,.88);
}

.kh-productCard__body{
  padding: 12px;
}

.kh-productCard__title{
  margin: 0 0 10px;
  font-size: 14px;
  line-height: 1.25;
}
.kh-productCard__title a{
  text-decoration:none;
  color: rgba(255,255,255,.92);
}
.kh-productCard__title a:hover{
  color: rgba(255,255,255,.98);
}

.kh-productCard__countdown{
  display:inline-flex;
  margin-left: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .2px;
  border: 1px solid rgba(224,35,46,.35);
  background: rgba(224,35,46,.10);
}

/* Make package-actions align like landing “price + button row”
   (depends on Exo’s markup inside package-actions.twig, but this helps) */
.kh-productCard__actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  flex-wrap: wrap;
}

/* Responsive header */
@media (max-width: 980px){
  .kh-navWrap{ display:none; }
  .kh-topbar{ padding: 12px 14px; }
}


/* =========================
   KHARAN — Product Actions (price + CTA row)
========================= */

.kh-priceToast{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .2px;
  color: rgba(255,255,255,.95);
  background: rgba(0, 255, 140, .18);
  border: 1px solid rgba(0, 255, 140, .35);
  box-shadow: 0 10px 22px rgba(0,0,0,.28);
  white-space: nowrap;
}

.kh-priceNote{
  color: rgba(255,255,255,.72);
  font-size: 13px;
}

.kh-discount{
  margin-right: 8px;
  opacity: .85;
}

/* Layout: price left, CTA right */
.kh-productActions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  flex-wrap: nowrap;
}

/* left */
.kh-productActions__price{
  display:flex;
  align-items:center;
  gap: 8px;
  min-width: 0;
}

/* right */
.kh-productActions__cta{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

/* Make Exo "wide/half" not break the row */
.kh-productActions__cta .wide,
.kh-productActions__cta .half{
  width: auto !important;
}

/* If there are multiple buttons (both subscribe + add), keep them neat */
.kh-productActions__cta a,
.kh-productActions__cta button{
  white-space: nowrap;
}

/* Quantity field: landing-ish */
.kh-qty{
  display:flex;
  align-items:center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}

.kh-qty__btn{
  width: 34px;
  height: 34px;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(255,255,255,.04) !important;
  color: rgba(255,255,255,.92) !important;
}

.kh-qty__btn:hover{
  border-color: rgba(224,35,46,.40) !important;
  background: rgba(255,255,255,.07) !important;
}

.kh-qty__label{
  border: 0;
  background: transparent;
  color: rgba(255,255,255,.72);
  font-weight: 800;
}

.kh-qty__input{
  width: 56px;
  text-align:center;
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  background: rgba(0,0,0,.25) !important;
  color: rgba(255,255,255,.92) !important;
  padding: 6px 8px;
}

/* Mobile: let it wrap safely */
@media (max-width: 520px){
  .kh-productActions{
    flex-wrap: wrap;
    align-items:flex-start;
  }
  .kh-productActions__cta{
    width: 100%;
    justify-content:flex-start;
  }
}


/* =========================
   KHARAN — Sidebar (filters/modules)
========================= */

/* Layout (catalog + sidebar) */
.site-content.site-content-widgets{
  display:grid;
  grid-template-columns: 1fr 320px;
  gap: 18px;
  align-items:start;
}

@media (max-width: 980px){
  .site-content.site-content-widgets{
    grid-template-columns: 1fr;
  }
}

/* Sidebar glass panel */
.store-sidebar{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: var(--kh-radius);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  overflow: hidden;
}

/* Sticky sidebar on desktop */
@media (min-width: 981px){
  .store-sidebar{
    position: sticky;
    top: 86px; /* ajusta si tu header es más alto */
    max-height: calc(100vh - 110px);
    overflow: auto;
  }
}

/* Inside: keep spacing consistent */
.store-sidebar > *{
  padding: 14px;
}

/* Widgets inside modules (Exo uses .widget often) */
.store-sidebar .widget{
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(0,0,0,.25);
  margin: 12px 0;
  overflow: hidden;
}

/* Widget headings */
.store-sidebar .widget h2,
.store-sidebar .widget h3,
.store-sidebar .widget .title,
.store-sidebar .widget .widget-title{
  margin: 0;
  padding: 12px 14px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255,255,255,.88);
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: linear-gradient(135deg, rgba(224,35,46,.12), rgba(0,0,0,.12));
}

/* Widget body */
.store-sidebar .widget .content,
.store-sidebar .widget .body,
.store-sidebar .widget .widget-body{
  padding: 12px 14px;
  color: rgba(255,255,255,.72);
}

/* Lists/links inside sidebar */
.store-sidebar a{
  color: rgba(255,255,255,.78);
  text-decoration:none;
}
.store-sidebar a:hover{
  color: rgba(255,255,255,.95);
}

/* Form elements in sidebar */
.store-sidebar input,
.store-sidebar select,
.store-sidebar textarea{
  width: 100%;
  border: 1px solid var(--kh-stroke);
  background: rgba(255,255,255,.04);
  color: var(--kh-text);
  border-radius: 14px;
  padding: 10px 12px;
}

.store-sidebar input:focus,
.store-sidebar select:focus,
.store-sidebar textarea:focus{
  outline: none;
  border-color: rgba(224,35,46,.45);
  box-shadow: 0 0 0 4px rgba(224,35,46,.18);
}

/* Buttons inside modules */
.store-sidebar button,
.store-sidebar .button,
.store-sidebar a.button,
.store-sidebar input[type="submit"]{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
  cursor:pointer;
  font-weight: 800;
}

.store-sidebar button:hover,
.store-sidebar .button:hover,
.store-sidebar a.button:hover,
.store-sidebar input[type="submit"]:hover{
  background: rgba(255,255,255,.07);
  border-color: rgba(224,35,46,.35);
}

/* Primary button feel (if Exo marks primary) */
.store-sidebar .btn-primary,
.store-sidebar .primary{
  border-color: rgba(224,35,46,.40) !important;
  background: linear-gradient(135deg, rgba(224,35,46,.25), rgba(224,35,46,.10)) !important;
}
.store-sidebar .btn-primary:hover,
.store-sidebar .primary:hover{
  background: linear-gradient(135deg, rgba(224,35,46,.32), rgba(224,35,46,.12)) !important;
}

/* Vertical nav in sidebar (when isNavigationVertical) */
.store-sidebar .kh-nav--vertical{
  margin-bottom: 12px;
}

/* Scrollbar subtle (desktop) */
@media (min-width: 981px){
  .store-sidebar{
    scrollbar-width: thin;
  }
  .store-sidebar::-webkit-scrollbar{ width: 10px; }
  .store-sidebar::-webkit-scrollbar-thumb{
    background: rgba(255,255,255,.10);
    border-radius: 999px;
    border: 2px solid rgba(0,0,0,.35);
  }
}



/* =========================
   KHARAN — Page spacing + content rhythm
========================= */

/* Reduce excessive top spacing Exo sometimes adds */
.site-content{
  padding-top: 18px;
  padding-bottom: 22px;
}

/* Main area breathing */
main{
  min-width: 0;
}

/* Make “no products” notice match your panels */
.no-products{
  border: 1px dashed rgba(224,35,46,.45);
  background: rgba(224,35,46,.08);
  color: rgba(255,255,255,.86);
  border-radius: 14px;
  padding: 12px 14px;
}


/* =========================
   FIX — Header compacto + nav centrado (Exo)
   Pegar al FINAL de generic.css
========================= */

:root{ --kh-max: 1120px; }

/* Asegura que el header tenga contenedor centrado */
.site-header{
  padding: 0 !important;
  margin: 0 !important;
}

.site-header-inner{
  max-width: var(--kh-max) !important;
  margin: 0 auto !important;
  padding: 10px 22px !important;   /* <- baja/ajusta altura del header */
  display: grid !important;
  grid-template-columns: 220px 1fr 220px !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Centrar el menú horizontal */
.site-header-inner .navigation-horizontal{
  justify-self: center !important;
  width: auto !important;
}

.navigation-horizontal > ul{
  padding: 6px 10px !important;    /* <- hace el “pill bar” más fino */
  gap: 10px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
}

/* Botones del menú: menos padding para que no engorden */
.navigation-horizontal > ul > li > a{
  padding: 8px 12px !important;
  line-height: 1 !important;
}

/* Acciones (login/basket) a la derecha */
.site-header-inner .actions,
.site-header-inner .site-header-actions{
  justify-self: end !important;
}

/* Responsive: en móvil que no se rompa la grid */
@media (max-width: 980px){
  .site-header-inner{
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    padding: 10px 14px !important;
  }
  .site-header-inner .actions,
  .site-header-inner .site-header-actions{
    justify-self: center !important;
  }
}


/* =========================
   FIX — Sidebar widgets más estrecho
========================= */

.site-content.site-content-widgets{
  grid-template-columns: minmax(0, 1fr) 280px !important; /* prueba 260px si quieres más fino */
  gap: 18px !important;
}

/* Asegura que el panel sidebar no se expanda raro */
.store-sidebar{
  max-width: 280px !important;
}

@media (max-width: 980px){
  .site-content.site-content-widgets{
    grid-template-columns: 1fr !important;
  }
  .store-sidebar{
    max-width: none !important;
  }
}

/* =========================================================
   FIX #1 + #2 — Header más fino + web un poco más ancha
   (pegar al FINAL de generic.css)
========================================================= */

/* 1) Ensancha el contenedor general */
:root{
  --kh-max: 1260px; /* antes 1120px — súbelo a 1280/1320 si aún falta */
}

/* 2) Header más fino (como landing) */
.site-header{
  padding: 0 !important;
}
.site-header-inner{
  padding: 0 !important;
}

/* tu header custom */
.kh-header{
  /* quita “grosor” visual */
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* reduce alto real */
.kh-topbar{
  padding: 10px 18px !important; /* antes 12px 18px */
  gap: 10px !important;
  min-height: 64px; /* controla el alto del header */
  align-items: center;
}

/* logo un poco más pequeño */
.kh-brand__logo{
  width: 34px !important;  /* antes 40 */
  height: 34px !important; /* antes 40 */
}

/* píldoras más compactas (Kharans / Basket / etc.) */
.kh-pill{
  padding: 7px 10px !important; /* antes 9px 12px */
  font-size: 13px;
}

/* 3) Evita que el menú principal se vaya a 2 filas */
.kh-nav__list{
  flex-wrap: nowrap !important;  /* antes wrap */
  gap: 8px !important;
  white-space: nowrap;
}

/* Si aún no cabe, que scrollee horizontal (mejor que 2 filas) */
.kh-navWrap{
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.kh-navWrap::-webkit-scrollbar{ display:none; }

/* Links del menú un pelín más compactos */
.kh-nav__link{
  padding: 7px 9px !important; /* antes 8px 10px */
  font-size: 13px;
}


/* =========================================================
   HEADER ULTRA FINO — matar altura heredada de Exo
   (pegar al FINAL de generic.css)
========================================================= */

/* Quita padding/márgenes que Exo mete en el header */
.site-header,
.site-header-inner{
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
}

/* Tu wrapper sticky: sin padding vertical extra */
.kh-header{
  padding: 0 !important;
}

/* Barra superior: fija un alto real (FINO) */
.kh-topbar{
  padding: 6px 18px !important;   /* MÁS fino */
  min-height: 52px !important;    /* altura objetivo */
  height: 52px !important;
  align-items: center !important;
}

/* Ajusta logo y textos para que no estiren */
.kh-brand{
  align-items: center !important;
}
.kh-brand__logo{
  width: 30px !important;
  height: 30px !important;
}
.kh-brand__name{ line-height: 1 !important; }
.kh-brand__sub{ line-height: 1 !important; }

/* Menú y botones: que no crezcan por line-height */
.kh-nav__link,
.kh-pill{
  line-height: 1 !important;
}

/* MUY IMPORTANTE:
   Si Exo está renderizando debajo del topbar un bloque tipo "infoRow" o "saleBanner",
   aunque esté vacío o apenas visible, te añade altura. Lo anulamos. */
.kh-infoRow,
.kh-saleBanner,
.site-sale-banner,
.site-header-inner .info,
.site-header-inner .site-sale-banner{
  display: none !important;
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Y por si Exo mete separación debajo del header */
.site-header + .site-content{
  margin-top: 0 !important;
  padding-top: 18px; /* deja solo el ritmo del contenido, no del header */
}

/* =========================================================
   1) QUITAR “FONDO GRIS” BAJO EL MENÚ (barra/placa)
========================================================= */

/* Elimina cualquier panel/placa que Exo ponga detrás del UL del nav */
.navigation-horizontal,
.navigation-horizontal > ul,
.navigation-horizontal > ul::before,
.navigation-horizontal > ul::after,
.kh-navWrap,
.kh-nav--horizontal,
.kh-nav__list{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  backdrop-filter: none !important;
}

/* Si Exo mete padding y eso “parece” una placa */
.navigation-horizontal > ul,
.kh-nav__list{
  padding: 0 !important;
}


/* =========================================================
   2) BOTÓN USUARIO LOGUEADO — FORZAR QUE SE VEA EL NOMBRE
========================================================= */

/* A veces Exo deja el texto con opacity/fill raro o hereda color gris */
.kh-actions a,
.kh-actions .kh-pill,
.site-header a,
.site-header .kh-pill{
  color: rgba(255,255,255,.92) !important;
  opacity: 1 !important;
}

/* Fuerza tipografía y tamaño del texto dentro del botón */
.kh-actions .kh-pill,
.kh-actions a.kh-pill{
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: .2px !important;
  line-height: 1 !important;

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

  padding: 9px 12px !important;
  min-width: 120px;          /* evita que quede “vacío”/aplastado */
  max-width: none !important;
  overflow: visible !important;
  text-indent: 0 !important;
}

/* Por si el nombre está dentro de un span típico */
.kh-actions .kh-pill span,
.kh-actions .kh-pill .name,
.kh-actions .kh-pill .username,
.kh-actions .kh-pill .user-name{
  color: rgba(255,255,255,.92) !important;
  opacity: 1 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  display: inline !important;
}


/* =========================================================
   DROPDOWNS DEL MENÚ — QUE SALGAN POR ENCIMA (NO RECORTADOS)
========================================================= */

/* 1) El header y contenedores NO deben recortar el dropdown */
.site-header,
.site-header-inner,
.site-header .site,
.kh-header,
.kh-topbar,
.kh-navWrap,
.navigation-horizontal,
.navigation-horizontal > ul,
.navigation-horizontal .has-children{
  overflow: visible !important;
}

/* 2) Asegura stacking por encima del contenido */
.site-header,
.kh-header{
  position: sticky; /* por si acaso */
  top: 0;
  z-index: 9999 !important;
}

/* 3) El dropdown en sí: por encima y bien posicionado */
.navigation-horizontal .has-children{
  position: relative !important;
}

.navigation-horizontal .has-children > ul{
  position: absolute !important;
  top: calc(100% + 10px) !important;
  left: 0 !important;
  z-index: 100000 !important;

  /* look & feel consistente */
  background: rgba(0,0,0,.70) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  backdrop-filter: blur(10px) !important;
}

/* Si el dropdown tiene sombra/clip raro */
.navigation-horizontal .has-children > ul{
  box-shadow: 0 18px 50px rgba(0,0,0,.55) !important;
  border-radius: 16px !important;
}


/* =========================================================
   FIX LAYOUT: sidebar izquierda + contenido ancho derecha
   + GRID de productos (3 por fila)
========================================================= */

/* 1) Layout principal: 2 columnas (320px + resto) */
.site-content.site-content-widgets{
  display: grid !important;
  grid-template-columns: 320px minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: start !important;
}

/* 2) Sidebar SIEMPRE a la izquierda */
.store-sidebar{
  grid-column: 1 !important;
}

/* 3) Contenido (main / listado productos) SIEMPRE a la derecha y ancho */
.site-content.site-content-widgets > main,
.site-content.site-content-widgets .store-content,
.site-content.site-content-widgets .store-products,
.site-content.site-content-widgets .store-category,
.site-content.site-content-widgets .store-products-images,
.site-content.site-content-widgets .store-products-list{
  grid-column: 2 !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* 4) Grid de productos: 3 por fila */
.store-products-images,
.store-products-list{
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

/* Asegura que cada card no tenga ancho fijo raro */
.store-products-images .store-product,
.store-products-list .store-product{
  width: auto !important;
  max-width: none !important;
}

/* Responsive */
@media (max-width: 1180px){
  .store-products-images,
  .store-products-list{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 980px){
  .site-content.site-content-widgets{
    grid-template-columns: 1fr !important;
  }
  .store-sidebar,
  .site-content.site-content-widgets > main,
  .site-content.site-content-widgets .store-content,
  .site-content.site-content-widgets .store-products,
  .site-content.site-content-widgets .store-category,
  .site-content.site-content-widgets .store-products-images,
  .site-content.site-content-widgets .store-products-list{
    grid-column: 1 !important;
  }
}
@media (max-width: 640px){
  .store-products-images,
  .store-products-list{
    grid-template-columns: 1fr !important;
  }
}

/* =========================
   KH Scripts slider (store)
========================= */

.khScriptsSection{
  max-width: 1120px;            /* si tu layout usa otra, ajusta */
  margin: 0 auto;
  padding: 14px 22px 10px;
}

.khScriptsSection__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 16px;
  margin-bottom: 10px;
}

.khScriptsSection__kicker{
  font-size: 11px;
  letter-spacing: 4px;
  color: rgba(224,35,46,.85);
}

.khScriptsSection__sub{
  margin-top: 6px;
  font-size: 13px;
  color: rgba(255,255,255,.70);
}

.khScriptsControls{
  display:flex;
  gap: 10px;
}

.khScriptsBtn{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
  cursor:pointer;
  font-size: 22px;
  line-height: 1;
  display:grid;
  place-items:center;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}
.khScriptsBtn:hover{
  transform: translateY(-1px);
  border-color: rgba(224,35,46,.40);
  background: rgba(255,255,255,.07);
}

.khScriptsSlider{
  position: relative;
  border-radius: 18px;

  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.khScriptsTrack{
  display:flex;
  gap: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 8px 6px 10px;

  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.khScriptsTrack::-webkit-scrollbar{ display:none; }

.khScriptCard{
  position: relative;
  flex: 0 0 auto;
  width: 260px;
  height: 170px;
  scroll-snap-align: start;

  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  border-radius: 16px;
  overflow:hidden;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);

  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.khScriptCard:hover{
  border-color: rgba(224,35,46,.40);
  box-shadow: 0 26px 70px rgba(0,0,0,.45);
  transform: translateY(-1px);
}

.khScriptCard__media{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,.35);
}
.khScriptCard__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
  filter: contrast(1.05) brightness(.85);
  transform: scale(1.01);
}

.khScriptCard::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 70%, rgba(0,0,0,.72) 100%);
}

.khScriptCard__overlay{
  position:absolute;
  inset:0;
  z-index: 2;

  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap: 10px;

  padding: 12px;
}

.khScriptCard__title{
  margin: 0;
  font-size: 14px;
  line-height: 1.2;
  font-weight: 900;
  color: rgba(255,255,255,.92);
  text-shadow: 0 8px 18px rgba(0,0,0,.55);
}

.khScriptCard__row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

.khPriceToast{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .2px;

  color: rgba(255,255,255,.95);
  background: rgba(0, 255, 140, .18);
  border: 1px solid rgba(0, 255, 140, .35);

  box-shadow: 0 10px 22px rgba(0,0,0,.28);
  white-space: nowrap;
}

.khScriptCard__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 7px 12px;
  border-radius: 999px;

  font-size: 12px;
  font-weight: 900;
  letter-spacing: .2px;

  color: rgba(255,255,255,.92);
  background: rgba(224,35,46,.18);
  border: 1px solid rgba(224,35,46,.38);
  box-shadow: 0 10px 22px rgba(0,0,0,.28);

  white-space: nowrap;
}

.khScriptCard:hover .khScriptCard__cta{
  background: rgba(224,35,46,.28);
  border-color: rgba(224,35,46,.55);
}


/* =========================
   KH Town Strip (Home)
========================= */

.khTownStripWrap{
  margin: 10px 0 18px;
  padding: 10px 0 8px;
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,0));
  overflow: visible;
}

.khTownStrip{
  display:flex;
  gap: 12px;
  align-items: center;
  justify-content: center;

  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;

  padding: 6px 14px 8px;
  scrollbar-width: none; /* Firefox */
}
.khTownStrip::-webkit-scrollbar{ display:none; } /* Chromium */

.khTownTile{
  position: relative;
  flex: 0 0 auto;

  width: 190px;
  height: 110px;

  border-radius: 18px;
  overflow: hidden;

  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  box-shadow: 0 18px 50px rgba(0,0,0,.35);

  transform: translateZ(0);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}

.khTownTile:hover{
  transform: translateY(-2px);
  border-color: rgba(224,35,46,.45);
  box-shadow: 0 26px 70px rgba(0,0,0,.45);
}

.khTownTile__img{
  position:absolute;
  inset:0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0) contrast(1.05) brightness(.90);
  transition: filter .14s ease, transform .14s ease;
}

.khTownTile:hover .khTownTile__img{
  filter: grayscale(1) contrast(1.05) brightness(.85);
  transform: scale(1.03);
}

.khTownTile__ph{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  font-weight: 900;
  font-size: 22px;
  color: rgba(255,255,255,.88);
  background: rgba(0,0,0,.35);
}

.khTownTile__label{
  position:absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;

  padding: 10px 12px;
  border-radius: 14px;

  font-size: 18px;
  font-weight: 900;
  letter-spacing: .2px;
  text-align: center;

  color: rgba(255,255,255,.95);
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(8px);
}

/* Responsive */
@media (max-width: 520px){
  .khTownTile{ width: 160px; height: 96px; border-radius: 16px; }
  .khTownTile__label{ font-size: 16px; padding: 9px 10px; border-radius: 12px; }
}

/* =========================
   KH Town Strip (Home) - like landing
========================= */

/* Quita huecos arriba/abajo y le da un fondo suave como separador */
.khTownStripWrap{
  width: 100%;
  margin: 0;
  padding: 8px 0; /* menos altura = menos “rectángulos rojos” */
  background: linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,0));
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* Una sola línea, centrada, con scroll horizontal si no cabe */
.khTownStrip{
  max-width: 1120px;              /* ajústalo si tu layout usa otro ancho */
  margin: 0 auto;
  padding: 0 18px;

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

  flex-wrap: nowrap;               /* clave: no baja a otra fila */
  overflow-x: auto;                /* clave: aparece Armadillo via scroll */
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;

  scrollbar-width: none;           /* Firefox */
}
.khTownStrip::-webkit-scrollbar{ display:none; }

/* Tiles verticales (más altos) */
.khTownTile{
  position: relative;
  flex: 0 0 auto;

  width: 120px;
  height: 180px;                   /* <- más alto (vertical) */
  border-radius: 16px;
  overflow: hidden;

  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  box-shadow: 0 14px 34px rgba(0,0,0,.38);

  transform: translateZ(0);
  transition: transform .12s ease, border-color .12s ease, filter .12s ease;
}

.khTownTile:hover{
  transform: translateY(-1px);
  border-color: rgba(224,35,46,.45);
}

/* Imagen a pantalla completa */
.khTownTile__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;

  filter: grayscale(0) contrast(1.05) brightness(.92);
  transition: filter .14s ease, transform .14s ease;
}

.khTownTile:hover .khTownTile__img{
  filter: grayscale(1) contrast(1.05) brightness(.88);
  transform: scale(1.03);
}

/* Label dentro del tile */
.khTownTile__label{
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;

  padding: 7px 8px;
  border-radius: 12px;

  font-size: 12px;
  font-weight: 900;
  letter-spacing: .2px;
  text-align: center;

  color: rgba(255,255,255,.92);
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(8px);
}

/* En pantallas estrechas: un pelín más compactos */
@media (max-width: 520px){
  .khTownTile{ width: 104px; height: 168px; border-radius: 14px; }
}

/* Más pegado al header y al contenido de abajo */
.khTownStripWrap{
  padding: 2px 0 !important;   /* antes 8px */
  margin: 0 !important;
  background: transparent !important;  /* por si el wrapper hereda fondo */
  border: 0 !important;               /* por si hereda borde */
}


/* Reduce el espacio superior del contenido en Home */
.page-index .site-content,
.page-index .site-content-widgets{
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Elimina el “panel/caja” alrededor de los tiles */
.khTownStrip{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;

  padding: 0 18px !important;     /* solo lateral */
  margin: 0 auto !important;
}

/* Quita margen superior del primer elemento dentro del main en Home */
.page-index .store-products > *:first-child{
  margin-top: 0 !important;
}


/* =========================
   KH ABOUT (landing clone)
========================= */

.khAboutSection{
  padding: 10px 0 16px; /* ajusta el “pegado” con town strip y slider */
}

.khAboutGrid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 36px;
  align-items: center;
}

@media (max-width: 980px){
  .khAboutGrid{
    grid-template-columns: 1fr;
    gap: 22px;
  }
}

/* LEFT: media */
.khAboutMedia{
  position: relative;
  min-height: 320px;
}

.khAboutMedia__frame{
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.03);
  box-shadow: 0 30px 80px rgba(0,0,0,.55);
}

/* corner/gradient feel */
.khAboutMedia__frame::before{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(224,35,46,.18), transparent 35%),
    radial-gradient(600px 260px at 25% 15%, rgba(0,0,0,.35), transparent 60%);
  mix-blend-mode: normal;
}

.khAboutMedia__frame img{
  width: 100%;
  height: 100%;
  display:block;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: contrast(1.05) brightness(.9);
  transform: scale(1.01);
}

/* Badge */
.khAboutBadge{
  position:absolute;
  right: 18px;
  bottom: 14px;
  display:flex;
  align-items:center;
  gap: 12px;

  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(224,35,46,.35);
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
}

.khAboutBadge__logo{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  display:grid;
  place-items:center;
  background: rgba(224,35,46,.14);
  border: 1px solid rgba(224,35,46,.28);
  overflow:hidden;
}

.khAboutBadge__logo img{
  width: 100%;
  height: 100%;
  display:block;
  object-fit: contain;
  padding: 1px;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.35));
}

.khAboutBadge__title{
  font-weight: 900;
  color: rgba(224,35,46,.95);
  letter-spacing: .4px;
  line-height: 1.0;
}

.khAboutBadge__sub{
  margin-top: 3px;
  font-size: 11px;
  letter-spacing: 2px;
  color: rgba(255,255,255,.70);
}

/* RIGHT: copy */
.khAboutCopy{
  padding: 6px 0;
}

.khAboutKicker{
  font-size: 11px;
  letter-spacing: 4px;
  color: rgba(224,35,46,.85);
  margin-bottom: 14px;
}

.khAboutTitle{
  margin: 0 0 14px;
  line-height: 1.02;
  letter-spacing: -0.6px;
  font-family: ui-serif, Georgia, "Times New Roman", Times, serif;
  font-size: 54px;
}

.khAboutTitle span{
  color: #e0232e;
}

@media (max-width: 520px){
  .khAboutTitle{ font-size: 40px; }
}

.khAboutText{
  margin: 0 0 14px;
  color: rgba(255,255,255,.72);
  line-height: 1.7;
  max-width: 60ch;
}

/* Stats row */
.khAboutStats{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 22px 0 18px;

  border: 1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,.02);
}

.khAboutStat{
  padding: 18px 14px;
  text-align:center;
  border-right: 1px solid rgba(255,255,255,.10);
}

.khAboutStat:last-child{
  border-right: none;
}

.khAboutStat__num{
  font-size: 22px;
  font-weight: 900;
  letter-spacing: .2px;
  color: rgba(224,35,46,.95);
}

.khAboutStat__label{
  margin-top: 8px;
  font-size: 10px;
  letter-spacing: 3px;
  color: rgba(255,255,255,.60);
}

@media (max-width: 980px){
  .khAboutStats{ grid-template-columns: repeat(2, 1fr); }
  .khAboutStat:nth-child(2){ border-right: none; }
  .khAboutStat:nth-child(1),
  .khAboutStat:nth-child(2){
    border-bottom: 1px solid rgba(255,255,255,.10);
  }
}

/* Buttons row */
.khAboutRow{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

.khAboutBtn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
  color: rgba(255,255,255,.92);
  font-weight: 800;
  text-decoration:none;
}

.khAboutBtn:hover{
  background: rgba(255,255,255,.07);
  border-color: rgba(224,35,46,.35);
}


/* =========================
   NAV: FREE (green)
========================= */
.kh-nav__link--free{
  border-color: rgba(0,255,140,.45) !important;
  background: rgba(0,255,140,.14) !important;
  color: rgba(255,255,255,.95) !important;
}

.kh-nav__link--free:hover{
  border-color: rgba(0,255,140,.70) !important;
  background: rgba(0,255,140,.22) !important;
}

/* =========================
   NAV: OTHERS badge
========================= */
.kh-nav__link--others{
  position: relative;
  padding-right: 34px; /* espacio para el badge */
}

.kh-navBadge{
  position: absolute;
  top: -8px;
  right: -10px;
  z-index: 3;

  padding: 4px 8px;
  border-radius: 999px;

  font-size: 10px;
  font-weight: 900;
  letter-spacing: .6px;
  text-transform: uppercase;

  color: rgba(255,255,255,.95);
  background: linear-gradient(135deg, rgba(224,35,46,.40), rgba(224,35,46,.18));
  border: 1px solid rgba(224,35,46,.55);

  box-shadow: 0 14px 30px rgba(0,0,0,.45);
  pointer-events: none;
  white-space: nowrap;
}




/* --- FORCE: que nada recorte el badge --- */
.site-header,
.site-navigation,
#site-navigation,
.kh-nav,
.kh-nav__list,
.kh-nav__item,
.kh-nav__item > a{
  overflow: visible !important;
}

.kh-nav__link--others{
  position: relative !important;
  overflow: visible !important;
}

/* Badge fuera */
.kh-navBadge{
  position: absolute !important;
  top: -12px !important;
  right: -12px !important;
  z-index: 9999 !important;
  pointer-events: none !important;
  white-space: nowrap !important;

  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(6px);
}