/*
 * Custom style goes here.
 * A template should always ship with an empty custom.css
 */
.youtube-player {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
  background: #000;
  margin: 5px;
}

.youtube-player iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  background: transparent;
}

.youtube-player img {
  object-fit: cover;
  display: block;
  left: 0;
  bottom: 0;
  margin: auto;
  max-width: 100%;
  width: 100%;
  position: absolute;
  right: 0;
  top: 0;
  border: none;
  height: auto;
  cursor: pointer;
  -webkit-transition: 0.4s all;
  -moz-transition: 0.4s all;
  transition: 0.4s all;
}

.youtube-player img:hover {
  -webkit-filter: brightness(75%);
}

.youtube-player .play {
  height: 72px;
  width: 72px;
  left: 50%;
  top: 50%;
  margin-left: -36px;
  margin-top: -36px;
  position: absolute;
  background: url('https://kubekings.com/img/play.png') no-repeat;
  cursor: pointer;
}

#contacto div div i.material-icons {
  font-size: 3rem !important;
}

.social-sharing .whatsapp-share a i,
.social-sharing .telegram-share a i {
  color: #cb2027;
}

.social-sharing .whatsapp-share a:hover {
  background-color: #00bb2d;
}

.social-sharing .telegram-share a:hover {
  background-color: #0088cc;
}

.accordion-button {
  font-size: 1rem;
}

.pagination .page-list {
  display: flex;
  justify-content: center;
  margin-bottom: 0;
  padding: 0;
}

.pagination .page-list .previous {
  font-size: 1rem;
  padding-left: 0;
  margin-right: 10px;
  height: 48px;
  line-height: 48px;
  border: 1px solid #c7c7c7;
  border-radius: 5px;
}

.pagination .page-list .next {
  font-size: 1rem;
  padding-right: 0;
  margin-left: 10px;
  height: 48px;
  line-height: 48px;
  border: 1px solid #c7c7c7;
  border-radius: 5px;
}

@media (max-width: 768px) {
  #lgcookieslaw_fixed_button svg {
    width: 30px;
    height: 30px;
  }
  .lgcookieslaw-fixed-button {
    height: 35px;
    width: 35px;
  }
  .pagination .page-list .previous {
    margin-right: 5px;
    font-size: 0.9rem;
  }
  .pagination .page-list .next {
    margin-left: 5px;
    font-size: 0.9rem;
  }
  .pagination-wrapper.light-box-bg {
    padding: 0.9375rem 0.3375rem;
  }
}

@media (max-width: 370px) {
  .pagination .page-list .previous {
    font-size: 0.8rem;
  }
  .pagination .page-list .next {
    font-size: 0.8rem;
  }
}

.dropdown-customer-account-links svg {
  width: 15px;
  height: 15px;
}

span[data-goto],
span[data-gotoh] {
  cursor: pointer;
}

span[data-goto]:hover {
  color: #FE0000;
}

.user-info .account-link > span[data-goto] {
  align-items: center;
  display: flex;
  font-size: .875rem;
  padding: 5px 7px;
  white-space: nowrap;
}

.user-info .account-link > span[data-goto] .material-icons {
  font-size: 120%;
  height: 100%;
  line-height: inherit;
  margin-top: 0;
}

.user-info .account-link > span[data-goto] > span {
  padding: 0 2px;
}

.mobile-header-version .user-info .account-link > span[data-goto] i {
  font-size: 25px;
  margin-right: 0;
}

.mobile-header-version .user-info .account-link > span[data-goto] {
  font-size: inherit;
  line-height: inherit;
  padding: 2px 6px;
}

.linklist li span[data-goto]::before {
  content: "";
  display: inline-block;
  font-family: FontAwesome;
  padding-right: 8px;
}

.ed_orderbefore {
  text-align: center;
}

#product .product-add-to-cart {
  position: relative;
}

.category_landing h1 {
  font-size: 1.9rem;
}

.category_landing .title-block {
  text-transform: none;
}

.category_landing .subcategory-image {
  margin-bottom: 20px;
}

@media (min-width: 992px) {
  .category_landing .subcategory-image.col-lg-2 {
    width: 20%;
  }
}

.category_landing .subcategory-image .img-thumbnail {
  padding: 5px;
  border: none;
  border-radius: 10px;
  margin-bottom: 10px;
  background-color: transparent;
}

.subcategory-landing-child-section .subcategory-images-container {
  display: flex;
  flex-wrap: wrap;
}

.subcategory-landing-child-section a {
  display: block;
}

.subcategory-landing-section {
  margin-bottom: 20px;
}

.subcategory-landing-section .subcategory-name {
  text-align: left;
  font-size: 1.5rem;
  margin-bottom: 20px;
}

.subcategory-landing-section .sub_subcategory-name {
  font-size: 1rem;
  padding: 0px 5px;
}

.category_landing .load-more-container {
  margin: 20px 0;
}

.category_landing .load-more-btn {
  padding: 10px 20px;
}

.category_landing .subcategory-image {
  transition: opacity 0.3s ease-in-out;
}

@media (max-width: 767.98px) {
  .category_landing .title-block {
    font-size: 1.5rem;
  }
}

#header .mobile-header-version .header-logo {
  max-width: 45px;
  padding-bottom: 0;
  padding-top: 0;
  text-align: center;
  position: relative;
  top: 5px;
  left: 12px;
}

.mobile-header-version .user-info .account-link > span[data-goto] span {
  display: none;
}

.mobile-header-version .customer-signin-module {
  position: relative;
  top: 0;
  right: 10px;
}

.mobile-header-version .user-info .account-link {
  border: none;
}

.mobile-header-version .search-widget {
  width: 70%;
}

.mobile-header-version .header-nav {
  display: none;
}

.mobile-header-version .user-info .account-link > a > span {
  display: none;
}

.mobile-header-version .user-info .account-link > a i {
  font-size: 25px;
  color: #e30314;
}

.mobile-header-version .search-widget form input[type="text"] {
  height: 36px;
}

#header .mobile-header-version .mobile-sticky-wrapper.is-sticky .sticky-background {
  height: 57px;
}

#header .mobile-header-version .search-widget form [type="submit"] {
  top: -3px;
}

#header .mobile-header-version .header-right {
  flex-wrap: wrap;
}

#header .mobile-header-version .display-top > div {
  margin-left: 0;
}

#kubekings_top_filter_bar {
  flex-basis: 110%;
  background-color: #333333;
  margin-right: -10px;
  margin-left: -10px;
  padding-right: 30px;
  padding-left: 30px;
  position: relative;
  top: 10px;
}

#category #header .mobile-header-version .mobile-sticky-wrapper.is-sticky .sticky-background,
#manufacturer #header .mobile-header-version .mobile-sticky-wrapper.is-sticky .sticky-background {
  height: 101px;
}

#kubekings_top_filter_bar .products-selection .filter-button #search_filter_toggler-mobile {
  background-color: #333333;
}

#kubekings_top_filter_bar .products-sort-order .select-title {
  background-color: #333;
  border: 0;
  color: white;
  text-transform: uppercase;
  font-size: 14px;
}

#icon-searchers-mobile {
  display: none;
}

#kubekings_top_filter_bar .products-selection {
  padding: .3rem 0;
}

/* ==========================================
   Menú subcategorías (Versión final optimizada)
   ========================================== */

.category-menu {
  overflow: hidden;
}

.category-menu-scroll {
  display: flex;
  flex-wrap: nowrap;
  padding: 0.5rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  position: relative;
}

/* Oculta scrollbar en Webkit (Chrome, Safari) */
.category-menu-scroll::-webkit-scrollbar {
  display: none;
}

/* === Items individuales === */
.category-menu-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #333;
  flex: 0 0 auto;
  width: 90px;
  margin: 0 8px;
  transition: transform 0.2s ease-in-out;
}

.category-menu-item:hover img {
  transform: scale(1.05); /* efecto hover */
}

/* Estilo circular para iconos */
.category-menu-item img {
  width: 64px;
  height: 64px;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 50%;
  padding: 12px;
  box-sizing: content-box;
  margin-bottom: 0.25rem;
}

/* Etiqueta debajo del icono */
.category-menu-item .menu-label {
  font-size: 0.9rem;
  white-space: nowrap;
}

/* ===== DESKTOP MEDIO (992px a 1219px - max 7 elementos visibles) ===== */
@media (min-width: 992px) and (max-width: 1219.98px) {
  .category-menu-item {
    flex: 0 0 calc((100% / 7) - 16px); /* 7 elementos máx visibles, restando margen */
    width: auto;
    margin: 0 8px;
  }
}

/* ===== DESKTOP GRANDE (desde 1220px - max 8 elementos visibles) ===== */
@media (min-width: 1220px) {
  .category-menu-item {
    flex: 0 0 calc((100% / 8) - 16px); /* 8 elementos máx visibles, restando margen */
    width: auto;
    margin: 0 8px;
  }
}

/* ================
   Inicio Selector de modelo en los productos
   ================ */

.selector-modelo {
  margin-top: 20px;
}

.selector-modelo h2 {
  font-size: 1.3rem;
  margin-bottom: 10px;
  font-weight: bold;
}

.modelo-opciones {
  display: flex;
  gap: 10px;
}

.modelo-opcion {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 10px 15px;
  border: 2px solid #ccc;
  border-radius: 5px;
  text-decoration: none;
  color: #333;
  font-size: 0.9rem;
  line-height: 1.2;
  min-width: 80px;
  transition: border-color 0.3s, background-color 0.3s;
}

.modelo-opcion:hover {
  border-color: #777;
}

.modelo-opcion.seleccionado {
  border-color: #E20E17;
  background-color: #f7e4e4;
  font-weight: bold;
}

/* ================
   Fin Selector de modelo en los productos
   ================ */

:root {
  --kk-red: #E20E17;                /* rojo corporativo */
}

/* Colores y tipografía corporativos */
.border-kk   { border-color: var(--kk-red) !important; }
.bg-kk-red   { background-color: var(--kk-red) !important; }
.text-kk-red { color: var(--kk-red) !important; }

.kk-copy {
  font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
  font-size: .95rem;
}

@media (min-width: 992px) {
  .kk-copy {
    font-size: 1rem;
  }
}

/* Hover sutil para dar sensación de clicable */
.card-hover {
  transition: .2s;
}

.card-hover:hover {
  box-shadow: 0 0 .75rem rgba(0, 0, 0, .08);
  transform: translateY(-2px);
}

/* ================
   Fin estilos personalizados para ventajas de comprar en kubekings
   ================ */

/* ===== Entrega rápida Kubekings ===== */
.kk-delivery {
  font-family: "Helvetica Neue", sans-serif;
  font-size: 16px;
  line-height: 1.3;
}

.kk-delivery strong,
.kk-delivery .ed_countdown,
.kk-delivery .date_green {        /* los tres elementos clave */
  color: #E20E17;                 /* rojo corporativo */
  font-weight: 700;
}

.kk-delivery .ed_countdown {
  font-size: 18px;
}

@media (max-width: 320px) {
  .kk-delivery small {
    display: none;
  }
}

/* ===== Fin Entrega rápida Kubekings ===== */

/* --- Entrega estimada KubeKings (versión simplificada) --- */
.estimateddelivery-list .ed_item {
  /* Layout */
  display: inline-flex !important;      /* d-inline-flex */
  align-items: center !important;       /* icono y texto alineados */
  gap: .4rem !important;                /* separación icono-texto */

  /* Caja y tipografía */
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: .875rem !important;        /* 14 px */
  font-weight: 600 !important;
  color: #000 !important;               /* texto e icono negros */
}

/* Icono camión */
.estimateddelivery-list .ed_item i {
  font-size: 1rem !important;
  color: #000 !important;               /* asegura negro incluso si <i> lleva otra clase */
}

/* Texto “Recíbelo …” */
.estimateddelivery-list .ed_orderbefore {
  margin: 0 !important;
  color: #000 !important;
}

/* Sólo la fecha / “mañana” en rojo corporativo */
.estimateddelivery-list .date_green {
  color: #E20E17 !important;            /* respeta manual de marca */
  font-weight: 700;                     /* un toque de énfasis */
}

/* Quitar fondo y borde al “Recíbelo…” */
.product-list-wrapper .estimateddelivery > div.ed_item {
  background: transparent !important;   /* sin verde */
  border: none !important;              /* sin borde */
  border-radius: 0 !important;          /* esquinas rectas */
  box-shadow: none !important;          /* por si hubiera sombra */
  padding: 0 !important;                /* elimina el padding del recuadro */
  color: inherit !important;            /* usa el color de texto normal */
  display: inline !important;           /* para que se vea en línea con el precio (opcional) */
}

/* FIN Estilos KubeKings para la entrega estimada en listados */

/* Barra envío gratis */
.AFSC-remaining-progress {
  display: block;
  width: 100%;
  height: 0.4rem;
  background-color: #cccccc;
  border-radius: 5px;
  margin: 3px 0px 3px 0px;
}

.AFSC-remaining-progress-bar {
  height: 100%;
  text-align: center;
  line-height: auto;
  color: white;
  font-weight: bold;
  transition: width 0.4s ease;
  border-radius: 5px;
}

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

.hidden-xs-up {
  display: none !important;
}

.cart-detailed-totals .iqitfreedeliverycount {
  margin: 0 -15px;
}

#js-cart-sidebar .iqitfreedeliverycount-title {
  font-size: 14px;
}

.cart-summary .cart-products-count {
  display: none;
}

#js-cart-sidebar .cart-subtotal-shipping.free span.price,
.cart-summary-subtotals .cart-subtotal-shipping.free span.price {
  color: #1A1A1A;
  font-weight: bold;
  background-color: #C8E7D4;
  border-radius: 5px;
  padding: 2px 8px;
  text-transform: uppercase;
}

/* Inicio personalizar iconos metodos de pago */
/* 1 ▸ El contenedor .custom-radio ocupa la fila y se convierte en flex */
.payment-option .custom-radio {
  display: flex;          /* fila flex */
  align-items: center;    /* centra verticalmente el input y el label */
  width: 100%;            /* a lo ancho del bloque blanco */
}

/* 2 ▸ El span que contiene el input mantiene su tamaño y no se estira */
.payment-option .custom-radio .check-wrap {
  flex: 0 0 auto;         /* ancho fijo (icono del radio) */
}

/* 3 ▸ El label ocupa TODO el resto de la fila y reparte interiormente */
.payment-option .custom-radio label {
  flex: 1 1 auto;         /* se estira para rellenar */
  display: flex;          /* 2ª capa flex */
  align-items: center;    /* centra verticalmente texto e iconos */
  justify-content: space-between;  /* texto a la izq · logos a la dcha */
  gap: 12px;              /* espacio entre texto e iconos */
}

/* 4 ▸ Texto normal */
.payment-option .custom-radio .option-text {
  /* nada especial; inherit */
}

/* 5 ▸ Iconos: tamaño coherente; si hay varios se quedan juntos */
.payment-option .custom-radio .option-logo {
  height: 20px;           /* ajusta a tu gusto */
  width: auto;
}

/* 6 ▸ Si quieres separar varios logos entre sí */
.payment-option .custom-radio .option-logo + .option-logo {
  margin-left: 6px;
}

/* 7 ▸ Ajuste opcional para pantallas muy estrechas */
@media (max-width: 420px) {
  .payment-option .custom-radio .option-logo {
    height: 18px;
  }
}

/* FIN personalizar iconos metodos de pago */

/* Quien somos inicio */
/* Burbujas de testimonio con mayor contraste */
.testimonial-card {
  position: relative;
  background: white;                /* blanco → contraste claro */
  border: 1px solid #dee2e6;       /* fino borde gris Bootstrap */
  border-radius: .5rem;
}

.testimonial-card::after {         /* pico de la burbuja */
  content: "";
  position: absolute;
  bottom: -12px;
  left: 40px;
  width: 0;
  height: 0;
  border-top: 12px solid #fff;     /* mismo color que la tarjeta */
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
}

.bg-primary {
  background-color: #E20E17 !important;
}

.text-primary {
  color: #E20E17 !important;
}

.border-primary {
  border-color: #E20E17 !important;
}

/* --- Botones de marca --- */
.btn-brand {
  background-color: #E20E17;
  border-color: #E20E17;
  color: #fff;
}

.btn-brand:hover,
.btn-brand:focus {
  background-color: #AD1B0F;
  border-color: #AD1B0F;
  color: #fff;
}

.btn-brand-outline {
  background-color: transparent;
  color: #E20E17;
  border: 2px solid #E20E17;
}

.btn-brand-outline:hover,
.btn-brand-outline:focus {
  background-color: #E20E17;
  color: #fff;
}

/* Quien somos fin */
@media (max-width: 720px) {
  /*tamaño fijo imgagenes producto*/
  #product .product-left {
    width: 450px;
    aspect-ratio: 450 / 450;
  }
}

/*Estilos personalizados menu pc*/

/* ---- Columna Marcas: una sola columna limpia ---- */
.kk-brands.kk-onecol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;        /* fuerza columna única */
}

/* Título "Marcas" discreto y consistente */
.kk-brands__title {
  margin: 0 0 .35rem 0;
  font-size: .8rem;               /* más pequeño que los enlaces */
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #6c757d;                 /* gris Bootstrap */
}

/* Reseteo de items para que no añadan bordes ni paddings extra */
.kk-brands li { padding: 0; }
.kk-brands .list-group-item { background: transparent; }

/* Enlaces: ritmo compacto y target accesible */
.kk-brands a {
  display: block;
  padding: .35rem .5rem .35rem .75rem;  /* ≈34–36px de altura */
  line-height: 1.25;
  border-radius: .4rem;
  border-left: 2px solid transparent;
  color: #212529;
  text-decoration: none;
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Estados */
.kk-brands a:hover {
  background-color: rgba(13,110,253,.06);  /* azul sutil */
  border-left-color: #0d6efd;
}
.kk-brands a:active { transform: translateY(1px); }
.kk-brands a:focus-visible {
  outline: 3px solid #0d6efd;
  outline-offset: 2px;
  background-color: rgba(13,110,253,.06);
  border-left-color: #0d6efd;
}

/* Variante aún más compacta si te hiciera falta en el futuro */
/*
.kk-brands.kk-onecol a { padding: .3rem .45rem .3rem .7rem; }
.kk-brands__title { margin-bottom: .25rem; font-size: .78rem; }
*/

@media (prefers-reduced-motion: reduce) {
  .kk-brands a { transition: none !important; }
}


/*Fin Estilos personalizados menu pc*/