/* =========================================================
   MASCOTILLAS — NUEVA CABECERA
   ========================================================= */
@media only screen and (min-width: 992px) {
  .header-top-right #search_widget {
    display: none;
  }
}
@media only screen and (min-width: 768px) {
  #search_widget {
    float: unset;
  }
}
/* =========================================================
   MASCOTILLAS · HEADER REDESIGN (DESDE CERO)
   ========================================================= */
/* =========================================================
   0) VARIABLES
   ========================================================= */ 
:root {
  /* Brand */
  --tw-brand-900: #fff; /* tinta / headers */
  --tw-brand-700: #1f7a3a; /* apoyo */
  --tw-brand-500: #3b5120; /* azul vivo (acción) */
  --tw-accent-500: #F7C60B; /* coral cálido (acento) */
  --tw-accent-200: #FFE3D8; /* coral suave */
  /* Backgrounds */
  --tw-bg: #F6FAFF;
  --tw-surface: #FFFFFF;
  --tw-surface-2: #F1F7FF;
  /* Text */
  --tw-ink: #0B1F2D;
  --tw-text: #24384A;
  --tw-muted: #ffffffd6;
  /* Borders */
  --tw-border: rgba(15, 42, 58, .12);
  --tw-border-2: rgba(15, 42, 58, .08);
  /* Shadows */
  --tw-shadow-1: 0 10px 26px rgba(15, 42, 58, .10);
  --tw-shadow-2: 0 18px 46px rgba(15, 42, 58, .14);
  /* Radius */
  --tw-radius-10: 10px;
  --tw-radius-14: 14px;
  --tw-radius-18: 18px;
  /* Typography (NO sistema como principal) */
  --tw-font: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  --tw-size-14: 14px;
  --tw-size-12: 12px;
  /* Layout */
  --tw-container-pad: 36px;
  /* Header heights */
  --tw-header-topbar-h: 44px;
  --tw-header-main-h: 68px;
  /* Focus ring */
  --tw-ring: 0 0 0 4px rgba(43, 125, 233, .18);
}

#checkout a, #order-confirmation a, #password a, #my-account a, #identity a, #addresses a, #history a, #order-detail a, #order-slip a, #module-blockwishlist-lists a, .text-primary, #module-psgdpr-gdpr a, #authentication a, #registration a {
	color: var(--tw-brand-700);
}
body#checkout a:hover, #order-confirmation a:hover, #password a:hover, #my-account a:hover, #identity a:hover, #addresses a:hover, #history a:hover, #order-detail a:hover, #order-slip a:hover, #module-blockwishlist-lists a:hover, #module-psgdpr-gdpr a:hover, #authentication a:hover, 
.carousel .carousel-control .icon-next:hover i, .carousel .carousel-control .icon-prev:hover i, .dropdown:hover .expand-more, .page-my-account #content .links a:hover i, .search-widget form button[type="submit"] .search:hover, .top-menu .sub-menu a:hover, .wishlist-list-item:hover .wishlist-list-item-title, #registration a:hover {
	color: #08501d !important;
}
.custom-radio input[type="radio"]:checked + span {
	background-color: var(--tw-brand-700);
}
.form-control:focus {
	outline: .1875rem solid var(--tw-brand-700);
}
.form-control:focus {
	border-color: var(--tw-brand-700);
}
#authentication .custom-checkbox span {
	flex: unset;
}
body#checkout section.checkout-step .address-item.selected {
	border: var(--tw-brand-700) 2px solid;
	border-radius: 20px;
}


.btn.btn-primary{
  height: 44px;
  border: 0 !important;
  border-radius: 12px;
  font-weight: 900;
  letter-spacing: .01em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #f3c316, #ffd666);
  color: #123a2c !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, .10);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 14px;
}

.btn.btn-primary:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 30px rgba(15, 23, 42, .14);
  filter: saturate(1.03);
}

.btn.btn-primary:active{
  transform: translateY(0);
  box-shadow: 0 10px 22px rgba(15, 23, 42, .10);
}
.btn.disabled, .btn.disabled:hover {
	color: #333;
	background: #f7c60b;
	opacity: 0.4;
}
.btn-primary.active.focus, .btn-primary.active:focus, .btn-primary.active:hover, .btn-primary:active.focus, .btn-primary:active:focus, .btn-primary:active:hover, .open > .btn-primary.dropdown-toggle.focus, .open > .btn-primary.dropdown-toggle:focus, .open > .btn-primary.dropdown-toggle:hover {
	color: #333;
}
.product-price {
	color: #333;
}

#_desktop_user_info a.account {display: none !important;}
/* =========================================================
   1) CONTAINER (1440)
   ========================================================= */

@media (min-width: 576px) {
  .container {
    width: 100%;
  }
}
@media (min-width: 992px) {
  .container {
    width: 100%;
  }
}
@media (min-width: 1200px) {
  .container {
    max-width: 1440px;
    width: 100%;
  }
}
.row {
	margin-right: 0 !important;
	margin-left: 0 !important;
}
.container {
	padding: 0 !important;
}
#content-wrapper {
  padding: 0 3% 2rem;
}
/* =========================================================
   2) BASE
   ========================================================= */
body {
  font-family: var(--tw-font);
  color: var(--tw-text);
}
html, body {
  overflow-x: hidden;
}
/* =========================================================
   3) HEADER WRAPPER
   ========================================================= */
#header {
  position: relative;
  z-index: 60;
  background: transparent;
}
/* Quita el bloque banner vacío si existe */
#header .header-banner {
  display: none !important;
}
#index #wrapper {
  padding-top: 0;
}
body:not(#index) #wrapper {
  padding: 2.4rem 3% 2rem;
}


/* =========================================================
   4) TOP BAR (contacto + search + user + cart) — NUEVO LOOK
   - Fondo claro con “tinte” suave (no pills)
   - Elementos como “controles” limpios, no cápsulas apiladas
   ========================================================= */
#header .header-nav {
  position: relative;
  background: none !important;
  backdrop-filter: none !important;
}
#header .header-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(620px 160px at 22% 40%, rgba(255,255,255,.18), transparent 62%),
              radial-gradient(760px 180px at 88% 10%, rgba(255,255,255,.12), transparent 66%),
              linear-gradient(rgba(255,255,255,.06), rgba(0,0,0,.12)),
              linear-gradient(90deg, #65802f 0%, #7a993c 18%, #7c953f 42%, #7a933e 70%, #90ac58 100%);
  backdrop-filter: saturate(140%) blur(10px);
}
#header .header-nav > * { position: relative; z-index: 1; }
#header .header-nav .container {
  padding: 0 3% !important;
}
#header .header-nav .row {
  min-height: var(--tw-header-topbar-h);
  align-items: center;
}
/* Forzar columnas en desktop */
#header .header-nav .hidden-sm-down {
  width: 100%;
}
#header .header-nav .hidden-sm-down .col-md-5, #header .header-nav .hidden-sm-down .col-md-7 {
  display: flex;
  align-items: center;
}
#header .header-nav .hidden-sm-down .col-md-5 {
  justify-content: flex-start;
}
#header .header-nav .hidden-sm-down .col-md-7 {
  justify-content: flex-end;
}
/* Contacto */
#header #contact-link a {
  color: var(--tw-brand-900);
  font-weight: 800;
  text-decoration: none;
}
#header #contact-link a:hover {
  color: var(--tw-brand-500);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* CONTACT LINK (texto blanco) — armonizado con #acento (sin tocar #acento) */
#header #contact-link {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .1px;
  white-space: nowrap;
  /* Blanco cálido (no gris) + contraste real sobre verde */
  color: rgba(255, 255, 255, .92);
  -webkit-text-stroke: .9px rgba(12, 18, 10, .42);
  paint-order: stroke fill;
  text-shadow:
    0 2px 0 rgba(12, 18, 10, .30), 0 10px 22px rgba(0, 0, 0, .20);
  margin: 13px 0 0 8px !important;
}
/* “La Tienda de tus” un pelín más sutil para que “Mascotas” sea el foco */
#header #contact-link {
  opacity: 1;
}
#header #contact-link {
  /* micro-contraste extra si el fondo cambia de luminosidad */
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .12));
}
#acento {
  color: #ffd24a; /* amarillo cálido */
  font-weight: 900;
  letter-spacing: .2px;
  line-height: 1.05;
  /* “Stroke” oscuro + brillo cálido */
  -webkit-text-stroke: 1.2px rgba(12, 18, 10, .55);
  paint-order: stroke fill;
  /* Contraste real: sombra oscura + halo cálido */
  text-shadow:
    0 2px 0 rgba(12, 18, 10, .45), 0 10px 22px rgba(0, 0, 0, .28), 0 0 18px rgba(255, 196, 66, .28);
  /* Mejor legibilidad en pantallas pequeñas */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Right cluster */
#header .right-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 48px;
  flex-wrap: nowrap;
}
#header .right-nav > * {
  margin: 0 !important;
}
/* =========================================================
   SEARCH (solo el de la topbar)
   ========================================================= */
#header .header-nav #search_widget {
  position: relative;
  flex: 1 1 520px;
  min-width: 260px;
  max-width: 620px;
}
#header .header-nav #search_widget form {
  position: relative;
  margin: 0;
}
#header .header-nav #search_widget input[type="text"] {
  max-width: 300px;
  height: 34px;
  padding: 0 17px 0 40px;
  border-radius: 20px;
  border: 1px solid var(--tw-border);
  background: #fff;
  color: var(--tw-ink);
  font-size: var(--tw-size-14);
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
#header .header-nav #search_widget input[type="text"]::placeholder {
  color: rgba(36, 56, 74, .55);
}
#header .header-nav #search_widget input[type="text"]:focus {
  border-color: rgba(233, 221, 43, 0.55);
}
/* Iconos search/clear (sin “pills” internas) */
#header .header-nav #search_widget i.material-icons.search {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: rgba(15, 42, 58, .62);
  pointer-events: none;
}
#header .header-nav #search_widget i.material-icons.clear {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: rgba(15, 42, 58, .44);
  cursor: pointer;
}
#header .header-nav #search_widget i.material-icons.clear:hover {
  color: var(--tw-brand-500);
}
/* =========================================================
   USER + CART — estilo “control” limpio (no cápsulas dentro de cápsulas)
   - Texto + icono con “badge” de fondo solo en el icono
   ========================================================= */
#header .user-info a, #header .blockcart .header {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  height: 36px;
  padding: 0 2px; /* sin “botón” grande */
  background: transparent;
  border: 0;
  text-decoration: none;
  color: var(--tw-brand-900);
  font-weight: 700;
  letter-spacing: .1px;
  user-select: none;
  white-space: nowrap;
}
#header .blockcart .header {
  gap: 0;
}
#header .blockcart a .hidden-sm-down {
	margin: 0 6px;
	vertical-align: text-bottom;
}
#header .blockcart a .cart-products-count {
	top: 1px !important;
}
#header .blockcart a i.material-icons {
	width: 31px !important;
}
#header .user-info a:hover, #header .blockcart .header:hover {
  color: var(--tw-brand-500);
}
#header .user-info a:focus-visible, #header .blockcart .header:focus-visible {
  outline: none;
  box-shadow: var(--tw-ring);
  border-radius: 10px;
}
/* Icon “chip” (solo el icono lleva fondo) */
#header .user-info i.material-icons {
  width: 36px;
  height: 27px;
  font-size: 19px;
}
#header .blockcart .header i.material-icons {
  width: 49px;
  height: 28px;
  font-size: 16px;
}
#header .user-info i.material-icons, #header .blockcart .header i.material-icons {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(241, 247, 255, .92));
  border: 1px solid var(--tw-border-2);
  box-shadow: 0 10px 22px rgba(15, 42, 58, .08);
  color: #597932;
  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
}
#header .user-info a:hover i.material-icons, #header .blockcart .header:hover i.material-icons {
  background: var(--tw-brand-500);
  color: #fff;
}
/* Cart count badge */
#header .cart-products-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 19px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--tw-accent-500);
  color: #555;
  font-weight: 900;
  font-size: var(--tw-size-12);
  line-height: 1;
  margin-left: 0;
}
#header a .cart-products-count {
	padding: 0 7px;
}
/* No “inactive” apagado */
#header .blockcart.cart-preview.inactive {
  opacity: 1;
}
/* Limpieza de paddings del tema */
#header .header-nav .blockcart {
  background: transparent;
  padding: 0 !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
}
#header .header-nav .cart-preview.active {
	background: transparent;
}
#header .header-nav #_desktop_cart {
  display: flex;
  align-items: center;
}
#header .header-nav .language-selector, #header .header-nav .user-info {
  margin-top: 0;
}
/* =========================================================
   5) HEADER MAIN (logo + menú) — CLARO, PREMIUM
   - Nada de fondo oscuro plano
   - Superficie blanca con “banda” superior color suave
   - Separación limpia con sombra sutil
   ========================================================= */
/* Contenedor principal del bloque amarillo */
#header .header-top {
  position: relative;
  z-index: 20;
  padding: 2px 0px 2px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .24) 0%, rgba(255, 255, 255, 0) 28%, rgba(0, 0, 0, .06) 100%), radial-gradient(900px 140px at 18% -35%, rgba(255, 255, 255, .45) 0%, rgba(255, 255, 255, 0) 60%), radial-gradient(820px 140px at 84% -45%, rgba(255, 170, 40, .38) 0%, rgba(255, 170, 40, 0) 62%), linear-gradient(90deg, #F6C423 0%, #F2B617 42%, #F8CF3A 100%);
  border-top: 1px solid rgba(255, 255, 255, .35);
  border-bottom: 1px solid rgba(0, 0, 0, .12);
  box-shadow: 0 10px 22px rgba(0, 0, 0, .18), 0 2px 0 rgba(255, 255, 255, .22) inset;
}
/* Brillo suave + micro-textura (sin imágenes) */
#header .header-top::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 220px at 50% 0%, rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, 0) 70%), repeating-linear-gradient(135deg, rgba(255, 255, 255, .06) 0px, rgba(255, 255, 255, .06) 2px, rgba(0, 0, 0, 0) 2px, rgba(0, 0, 0, 0) 8px);
  mix-blend-mode: soft-light;
  opacity: .28;
  pointer-events: none;
}
/* Alineación del logo y zona derecha */
#header .header-top .row {
  align-items: center;
}
#header .header-top .container {
  padding-left: var(--tw-container-pad);
  padding-right: var(--tw-container-pad);
}
#header .header-top .row {
  min-height: 55px;
  align-items: center;
}
/* Logo */
#header #_desktop_logo h1 {
  margin: 0;
  line-height: 0;
}
#header .header-nav .user-info {
  margin-left: 1rem;
  text-align: right;
}
/* =========================================================
   LOGO “SALIDO” DEL HEADER (sin agrandar el header)
   - Mantiene el logo en el mismo sitio (columna izquierda)
   - Permite que el logo sobresalga hacia arriba/abajo
   - Evita que el header aumente de altura
   ========================================================= */
/* 1) Asegura que el header NO crece y permite que el logo “salga” */
#header .header-top {
  position: relative;
  overflow: visible; /* importante: si está en hidden, el logo se recorta */
}
/* 3) Saca el logo del flujo normal para que no empuje la altura del header */
#_desktop_logo h1 {
  margin: 0;
  line-height: 0;
  position: relative;
  overflow: visible;
}
#_desktop_logo h1 > a {
  display: inline-block;
  position: relative;
  overflow: visible;
}
#_desktop_logo img.logo {
  position: absolute;
	left: 29px;
	top: 3px;	
  transform: translateY(-50%);
  height: auto;
  width: 290px;
  max-width: none;
  z-index: 5;
  pointer-events: auto;
  opacity: 0.94;
}

#index #_desktop_logo img.logo {
  left: 14px;
  top: -1px;
}

/* 5) Reserva “ancho” visual para que el resto del header no se te monte encima
   (no aumenta altura, solo evita solapes horizontales) */
#_desktop_logo {
  min-height: 1px; /* evita colapsos raros */
}
/* Si tu header tiene overflow hidden en algún wrapper intermedio, fuerza visible */
#header .header-top .container, #header .header-top .row {
  overflow: visible;
}

/* =========================================================
   8) MOBILE (<=991px) — limpio, sin “chips” por todas partes
   ========================================================= */
@media (max-width: 991px) {
  :root {
    --tw-container-pad: 12px;
    --tw-header-topbar-h: 46px;
    --tw-header-main-h: 62px;
  }
  #header .header-nav .hidden-md-up.mobile {
    min-height: var(--tw-header-topbar-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }
  /* Icono menú */
  #header #menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 38px;
	margin: 0 0.2rem 0 1rem !important;
    border-radius: 14px;
    background: rgba(255, 255, 255, .92);
    border: 1px solid var(--tw-border-2);
    box-shadow: 0 12px 22px rgba(15, 42, 58, .10);
  }
  #header #menu-icon i.material-icons {
    font-size: 22px;
    color: var(--tw-brand-700);
	line-height: 1 !important;
  }
  /* Logo mobile */
  #header .top-logo img {
    max-height: 47px;
    width: auto;
  }
  /* Ocultar texto en user/cart si tema no lo hace */
  #header .user-info .hidden-sm-down, #header .blockcart .header .hidden-sm-down {
    display: none !important;
  }
  /* Ajuste icon chips */
  #header .user-info i.material-icons, #header .blockcart .header i.material-icons {
    width: 38px;
    height: 38px;
    border-radius: 14px;
  }
	#header .cart-products-count {
		margin-left: -8px;
	}
  /* mmB overlay fuera en móvil */
  #mmB {
    display: none !important;
  }
	

	.header-top .search-widgets {
		max-width: unset;
	}	
	
	#search_widget {
		margin-bottom: 0;
	}
	#search_widget form input::placeholder {
		color: #fff;
	}
	#search_widget form input {
		width: 100%;
		padding: 7px 20px 8px 40px;
		outline: none;
		background-color: transparent;
		border: none;
		color: #fff;
	}
	#header .header-top {
		padding: 0;
		border-top: none;
		border-bottom: none;
	}	
	#header .header-top .row {
		min-height: unset;
	}	
	#search_widget form i {
		padding: 0.45rem 0.5rem !important;
		color: #fff;
		opacity: 0.8;
		font-size: 1.4rem;
	}
	
	
	
	/* ==========================================================
	   HEADER SEARCH BAR — “relieve negativo” (inset / hundido)
	   Aplica al contenedor naranja: #header .header-top
	   ========================================================== */

	#header .header-top{
	  background:
		linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 34%, rgba(0,0,0,.12) 100%),
		radial-gradient(900px 140px at 18% -35%, rgba(255,255,255,.28) 0%, rgba(255,255,255,0) 62%),
		radial-gradient(820px 140px at 84% -45%, rgba(255,170,40,.24) 0%, rgba(255,170,40,0) 64%),
		linear-gradient(90deg, #F6C423 0%, #F2B617 42%, #F8CF3A 100%);

	  border-top: 1px solid rgba(0,0,0,.16);          /* arriba más “oscuro” */

	  /* Quita volumen hacia fuera y crea hundido */
	  box-shadow:
		0 -1px 0 rgba(255,255,255,.18) inset,
		0 10px 22px rgba(0,0,0,.18),
		0 2px 0 rgba(255,255,255,.22) inset,
		0 0 0 transparent;
	  box-shadow:
		0 1px 0 rgba(255,255,255,.18) inset,
		0 -2px 0 rgba(0,0,0,.10) inset,
		0 10px 22px rgba(0,0,0,.14);

	  /* “surco” interior (relieve negativo) */
	  position: relative;
	}

	#header .header-top::after{
	  content: "";
	  position: absolute;
	  left: 10px;
	  right: 10px;
	  top: 6px;
	  bottom: 6px;
	  pointer-events: none;
	  border-radius: 14px;

	  /* borde interior + sombra inset para efecto hundido */
	  box-shadow:
		0 2px 10px rgba(0,0,0,.18) inset,
		0 -1px 0 rgba(255,255,255,.22) inset;
	  opacity: .55;
	}	
	
	
	.tw-trustbar {
		margin: 24px 0 0 !important;
	}
	
	#custom-text {
		margin-bottom: -2rem !important;
	}	
	#wrapper .banner {
		margin: 2.3rem 0 -1rem !important;
	}
	.tw-reviewsblock {
		margin: 70px 0 -48px !important;
	}	
	.block-contact #contact-infos {
		padding: 0 .625rem .625rem 1.225rem !important;
	}	
	body:not(#index) #wrapper {
		padding: 1.7rem 3% 2rem !important;
	}	
	
	
	.product-description {
		padding: 0px 9px 9px !important;
	}	
	.product-miniature .product-title {
		margin-bottom: 2px !important;
	}
	.thumbnail-top {
		padding: 9px 9px 8px !important;
	}	
	#js-product-list .js-product.product {
		padding: 11px 5px !important;
	}
}


/* =========================================================
   9) ACCESIBILIDAD
   ========================================================= */
a:focus-visible {
  outline: none;
  box-shadow: var(--tw-ring);
  border-radius: 10px;
}
/* =========================================================
   10) FIXES DEL TEMA
   ========================================================= */
#search_widget form i {
  padding: 1px 0 0 0;
}
/* Evitar “bailes” raros en el carrito */
#header .blockcart .header > * {
  line-height: 1;
}
#header .blockcart .header i.material-icons {
  position: relative;
  top: 0;
}
#header .blockcart .header .cart-products-count {
  position: relative;
  top: 0;
}




/* =========================================================
	=========================================================

   MENU PRINCIPAL + SUBMENUS — CSS COMPLETO

	=========================================================
   ========================================================= */

/* ---------- RESET / BASE ---------- */
#header #top-menu, #header #top-menu ul.top-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}
#header #top-menu a.dropdown-item {
  text-decoration: none !important;
}
#header #top-menu a.dropdown-item:hover, #header #top-menu a.dropdown-item:focus, #header #top-menu a.dropdown-item:active {
  text-decoration: none !important;
  color: inherit;
}
#header #top-menu * {
  box-sizing: border-box;
}
/* Evitar “subrayados raros” del tema */
#header #top-menu a.dropdown-item::before, #header #top-menu a.dropdown-item::after {
  content: none !important;
}
/* ---------- DESKTOP/TABLET (>=992px) ---------- */
#header .header-top .menu {
  width: 100%;
}
/* Contenedor UL nivel 0 */
#header #top-menu.top-menu {
  display: flex;
  align-items: center;
  justify-content: space-between; /* columnas iguales -> separador perfecto */
  width: 100%;
  gap: 0 !important;
  position: relative;
}
/* Cada LI = columna igual */
#header #top-menu.top-menu > li.category {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
/* Links nivel 0: “rotulado” (no pill) + peso visual */
#header #top-menu.top-menu > li.category > a.dropdown-item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: 1.05px;
  text-transform: uppercase;
  color: rgba(8, 15, 18, .92);
  padding: 10px 10px;
  border-radius: 0;
  /* efecto “rotulado” sutil: borde claro + ligera sombra */
  text-shadow:
    -1px 0 rgba(255, 255, 255, .55), 1px 0 rgba(255, 255, 255, .55), 0 -1px rgba(255, 255, 255, .55), 0 1px rgba(255, 255, 255, .55), 0 2px 0 rgba(0, 0, 0, .10);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Separadores hairline centrados entre opciones */
#header #top-menu.top-menu > li.category:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 1px;
  height: 16px;
  border-radius: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .74), rgba(255, 255, 255, 0));
  box-shadow: 1px 0 0 rgba(0, 0, 0, .10);
  opacity: .95;
  pointer-events: none;
}
/* Indicador discreto de “tiene submenu” (solo si existe popover sub-menu) */
#header #top-menu.top-menu > li.category > a.dropdown-item {
  padding-right: 14px;
}
#header #top-menu.top-menu > li.category:has(> .popover.sub-menu) > a.dropdown-item::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 8px;
  border-right: 2px solid rgba(0, 0, 0, .40);
  border-bottom: 2px solid rgba(0, 0, 0, .40);
  transform: rotate(45deg) translateY(-1px);
  opacity: .9;
}
/* Hover/focus sutil (no pill) */
#header #top-menu.top-menu > li.category > a.dropdown-item:hover {
  color: rgba(0, 0, 0, .98);
  text-shadow:
    -1px 0 rgba(255, 255, 255, .70), 1px 0 rgba(255, 255, 255, .70), 0 -1px rgba(255, 255, 255, .70), 0 1px rgba(255, 255, 255, .70), 0 2px 0 rgba(0, 0, 0, .12);
}
#header #top-menu.top-menu > li.category > a.dropdown-item:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, .16);
}


/* ---------- MENU MOBILE (<=767px) ---------- */
@media (max-width:767px) {
  /* Menú vertical */
  #header #top-menu.top-menu {
    display: block !important;
    width: 100%;
  }
  #header #top-menu.top-menu > li.category {
    display: block !important;
    width: 100% !important;
    position: relative;
  }
  /* Link nivel 0 */
	#header #top-menu.top-menu > li.category > a.dropdown-item {
		justify-content: left;
		padding: 20px 12px;
		letter-spacing: .9px;
	}
	
  /* Toggler móvil */
#header #top-menu .navbar-toggler.collapse-icons {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 20px;
	background: rgba(255, 255, 255, .55);
	border: 1px solid rgba(15, 23, 42, .10);
	pointer-events: auto !important;
	position: relative;
	z-index: 3;
}
  #header #top-menu .navbar-toggler.collapse-icons i.material-icons {
    font-size: 18px;
    line-height: 1;
    color: rgba(0, 0, 0, .55);
  }
  /* Submenú nivel 1 en móvil (colapsable) */
  #header #top-menu > li.category > .popover.sub-menu {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    padding: 6px 10px 10px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  #header #top-menu > li.category > .popover.sub-menu::before {
    content: none !important;
  }
  #header #top-menu ul.top-menu[data-depth="1"] {
    display: block;
    padding: 0;
    margin: 0;
  }
	#header #top-menu ul.top-menu[data-depth="1"] > li.category > a.dropdown-item {
		display: flex;
		align-items: center;
		justify-content: left;
		padding: 15px 44px 15px 14px;
		font-weight: 600;
		font-size: 12.5px;
		letter-spacing: .4px;
		opacity: 0.9;
	}
	
	#header #top-menu.top-menu > li.category .top-menu[data-depth="2"] li {
		padding-left: 22px;
	}	
	
	
  /* Nivel 2 en móvil (colapsable bajo nivel 1) */
  #header #top-menu ul.top-menu[data-depth="1"] > li.category > .collapse {
    position: static !important;
    width: 100% !important;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none !important;
  }
  #header #top-menu ul.top-menu[data-depth="2"] {
    padding: 6px 0 28px 0;
    margin: 0;
  }
  #header #top-menu ul.top-menu[data-depth="2"] > li.category > a.dropdown-item {
    display: block;
    padding: 9px 12px;
    margin: 6px 0 0;
    border-radius: 10px;
    font-weight: 700;
    font-size: 12.5px;
    color: rgba(10, 18, 22, .84);
    background: rgba(255, 255, 255, .45);
    border: 1px solid rgba(15, 23, 42, .06);
  }
  /* Quitar separadores en móvil */
  #header #top-menu.top-menu > li.category::after {
    content: none !important;
  }
	

/* El span del toggler: detrás */
#header #top-menu.top-menu > li.category > a.dropdown-item > span.float-xs-right.hidden-md-up,
#header #top-menu.top-menu > li.category .top-menu span.float-xs-right.hidden-md-up
	{
  position: absolute;
  right: 10px;                     
}
	
	
}


/* =========================================================
   MEGA MENU #mmB — ITERACIÓN NUEVA (MÁS SIMPLE, MENOS RECARGADA)
   - Mantiene HTML + JS (top/left inline)
   - Derecha: SIEMPRE 1 columna de subcategorías
   - CTA "Ver productos": más plano, sin sombra exagerada, color más neutro
   - Izquierda: sin separadores/bordes entre items
   - Menos “pills/cápsulas” (radios más contenidos, sombras mínimas)
   Breakpoint principal = 992px
   ========================================================= */
@media (min-width: 768px) {
  /* Cuando overlay esté abierto, ocultamos el popover nativo */
  body.mmB-open #header #top-menu > li > .popover.sub-menu {
    display: none !important;
  }
	#header .header-top #search_widget {
	  display: none;
	}
	#header #top-menu ul.top-menu {
	  display: none;
	}	
  /* =========================
     CONTENEDOR OVERLAY
     ========================= */
  #mmB {
    position: absolute;
    z-index: 9999;
    display: none;
    /* Respeta posición inline del JS */
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: min(840px, calc(100vw - 32px));
    max-width: min(840px, calc(100vw - 32px));
    box-sizing: border-box;
    background: #ffffffed;
    border: 1px solid rgba(18, 32, 14, .10);
    border-radius: 16px;
    box-shadow: 0 20px 56px rgba(0, 0, 0, .16);
    overflow: hidden;
    -webkit-backdrop-filter: saturate(1.1) blur(10px);
    backdrop-filter: saturate(1.1) blur(10px);
  }
  #mmB.is-open {
    display: block;
  }
  /* Puente de hover */
  #mmB::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -14px;
    height: 14px;
  }
  /* =========================
     LAYOUT
     ========================= */
  #mmB .mmB-inner {
    display: flex;
    align-items: stretch;
    gap: 14px;
    padding: 14px;
    box-sizing: border-box;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  /* ====== IZQUIERDA ====== */
  #mmB .mmB-left {
    flex: 0 0 300px;
    width: 300px;
    min-width: 300px;
    padding: 8px;
    box-sizing: border-box;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  #mmB .mmB-left ul {
    margin: 0;
    padding: 0;
    list-style: none;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  #mmB .mmB-left li {
    margin: 0;
    padding: 0;
  }
  #mmB .mmB-left a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 30px 10px 10px;
    border-radius: 10px;
    text-decoration: none;
    color: rgba(18, 32, 14, .90);
    font-weight: 900;
    font-size: 12.5px;
    letter-spacing: .12px;
    text-transform: none;
    background: transparent;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* sin sombras, sin bordes inferiores */
    box-shadow: none !important;
    transition: background .16s ease, color .16s ease, transform .16s ease;
  }
  /* IMPORTANTE: quita el “borde por abajo” entre opciones */
  #mmB .mmB-left li + li > a {
    box-shadow: none !important;
  }
  #mmB .mmB-left a:hover {
    background: rgba(18, 32, 14, .06);
    color: rgba(18, 32, 14, .98);
    transform: translateX(1px);
  }
  #mmB .mmB-left li.is-active > a {
    background: rgba(145, 188, 86, .12);
    color: rgba(18, 32, 14, .98);
  }
  /* Flecha SOLO si hay subcategorías */
  #mmB .mmB-left a::after {
    content: none;
  }
  #mmB .mmB-left li.has-children > a::after {
    content: "›";
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    line-height: 1;
    color: rgba(18, 32, 14, .40);
  }
  #mmB .mmB-left li.is-active.has-children > a::after {
    color: rgba(18, 32, 14, .60);
  }
  /* ====== DERECHA ====== */
  #mmB .mmB-right {
    flex: 1 1 auto;
    min-width: 0;
    padding: 4px 0;
    box-sizing: border-box;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  #mmB .mmB-right-content {
    padding: 0 6px 6px 6px;
    box-sizing: border-box;
  }
  /* =========================
     CABECERA DERECHA
     ========================= */
  #mmB .mmB-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 2px 0 10px;
    margin: 0 0 8px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    width: 100%;
    box-sizing: border-box;
  }
  #mmB .mmB-head-title {
    flex: 1 1 auto;
    min-width: 0;
    color: rgba(18, 32, 14, .92);
    font-weight: 950;
    font-size: 13px;
    letter-spacing: .34px;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  /* CTA: más plano, sin sombra grande, sin color “chillón” */
  #mmB .mmB-head-cta {
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 10px; /* menos pill */
    background: rgba(18, 32, 14, .06);
    color: rgba(18, 32, 14, .92);
    text-decoration: none !important;
    font-weight: 900;
    font-size: 12px;
    letter-spacing: .18px;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid rgba(18, 32, 14, .10);
    box-shadow: none;
    transition: background .16s ease, border-color .16s ease, transform .16s ease, color .16s ease;
  }
  #mmB .mmB-head-cta::after {
    content: none !important;
  }
  #mmB .mmB-head-cta:hover {
    background: rgba(18, 32, 14, .10);
    border-color: rgba(18, 32, 14, .14);
    color: rgba(18, 32, 14, .98);
    transform: translateY(-1px);
  }
  #mmB .mmB-head-cta:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 210, 74, .18);
  }
  /* =========================
     SUBCATEGORÍAS: SIEMPRE 1 COLUMNA
     ========================= */
  #mmB .mmB-grid {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 6px;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  #mmB.mmB-cols-2 .mmB-grid, #mmB.mmB-cols-4 .mmB-grid {
    grid-template-columns: 1fr !important;
  }
  #mmB .mmB-grid > li {
    margin: 0;
    padding: 0;
  }
  /* Subcategorías: filas simples, sin “píldoras” */
  #mmB .mmB-grid > li > a {
    display: flex;
    align-items: center;
    padding: 9px 10px;
    text-decoration: none;
    color: rgba(18, 32, 14, .88);
    font-weight: 850;
    font-size: 13px;
    letter-spacing: .06px;
    background: rgba(255, 255, 255, .40);
    border: 1px solid rgba(18, 32, 14, .06);
    border-radius: 10px;
    box-shadow: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background .16s ease, border-color .16s ease, transform .16s ease, color .16s ease;
  }
  /* Marcador mínimo (más discreto) */
  #mmB .mmB-grid > li > a::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 99px;
    background: rgba(145, 188, 86, .75);
    margin-right: 10px;
    flex: 0 0 6px;
    box-shadow: none;
  }
  #mmB .mmB-grid > li > a:hover {
    background: rgba(255, 255, 255, .60);
    border-color: rgba(18, 32, 14, .10);
    color: rgba(18, 32, 14, .98);
    transform: translateX(1px);
  }
  #mmB .mmB-grid > li > a:hover::before {
    background: rgba(255, 210, 74, .92);
  }
  /* =========================
     “SIN SUBCATEGORÍAS”
     ========================= */
  #mmB .mmB-empty {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }
  #mmB .mmB-empty .mmB-empty-title, #mmB .mmB-empty a.mmB-empty-cta {
    display: none !important;
  }
  #mmB .mmB-empty .mmB-empty-note {
    display: block;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: rgba(18, 32, 14, .62) !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    line-height: 1.35 !important;
  }
  /* =========================
     AJUSTES DE ANCHO
     ========================= */
  @media (max-width: 1100px) {
    #mmB {
      width: min(820px, calc(100vw - 32px));
      max-width: min(820px, calc(100vw - 32px));
    }
    #mmB .mmB-left {
      flex-basis: 280px;
      width: 280px;
      min-width: 280px;
    }
  }
}
/* En móvil no existe overlay */
@media (max-width: 991px) {
  #mmB {
    display: none !important;
  }
}

/* =========================================================
	=========================================================

   FIN MENU PRINCIPAL + SUBMENUS — CSS COMPLETO

	=========================================================
   ========================================================= */







/* =========================================================
	=========================================================

   SLIDER

	=========================================================
   ========================================================= */

.carousel .carousel-inner {
  height: auto;
}
.carousel .carousel-control .icon-next i, .carousel .carousel-control .icon-prev i {
	font-size: 2.625rem;
	color: var(--tw-accent-500);
}
.carousel .carousel-control .icon-next:hover i, .carousel .carousel-control .icon-prev:hover i {
	color: #fff;
}

.carousel{
	box-shadow: 0 18px 40px rgba(0,0,0,.10);
}
.carousel::after{
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 46px;
	pointer-events: none;
	background: linear-gradient(to top, rgba(0,0,0,0.07), rgba(0,0,0,0));
	z-index: 3;
}
@media (max-width: 991px) {
  .carousel {
    padding-bottom: 0;
  }
}
@media (min-width: 992px){
  .carousel{
	border-radius: 0 0 18px 18px;
  }
  .carousel::after{
    border-radius: 0 0 18px 18px;
  }
  .carousel .carousel-item img{
    border-radius: 0 0 18px 18px;
  }
}







/* =========================================================
   HOME · TÍTULO SECCIÓN · SIN SUBRAYADOS · REAJUSTE POSICIONES
   - Quita: cualquier subrayado (short + full-width)
   - Mantiene: número watermark + corte tipográfico (“mascota” en 2ª línea)
   - Ajusta: espaciado, alineación, proporciones y relación con el número
   HTML:
   <h2 class="h2 products-section-title text-uppercase">
     <span>Ofertas</span> para mimar a tu <span>mascota</span>
   </h2>
   ========================================================= */

body#index{ counter-reset: twSection; }

body#index h2.products-section-title{
  counter-increment: twSection;

  position: relative;
  isolation: isolate;

  width: min(1200px, calc(100vw - 80px));
  margin: 60px auto 60px;
  padding: 21px 0 0 104px; /* más “aire” con el número */

  text-align: left;
  text-transform: uppercase;

  font-family: 'Baloo 2', system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 25px;
  line-height: 1.02;
  letter-spacing: .85px;
  font-weight: 760;

  color: rgba(10, 24, 16, .78);

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

  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

/* Número watermark: más integrado y “en su sitio” */
body#index h2.products-section-title::before{
  content: counter(twSection, decimal-leading-zero);

  position: absolute;
  left: 28px;
  top: 0;                    /* anclado arriba para evitar que “pise” productos */
  transform: translate(-10%, -18%);

  font-family: 'Anton', system-ui, sans-serif;
  font-size: 118px;
  line-height: 1;
  letter-spacing: -2px;

  color: rgb(229, 236, 229);
  z-index: -1;

  pointer-events: none;
  user-select: none;
}

/* Quitar TODOS los subrayados, por si hay restos */
body#index h2.products-section-title::after{
  content: none !important;
}

/* Spans */
body#index h2.products-section-title > span{
  position: relative;
  display: inline-block;
}

/* “Ofertas” con más punch pero sin subrayados/efectos */
body#index h2.products-section-title > span:first-of-type{
  font-weight: 900;
  color: rgba(10, 24, 16, .90);
  letter-spacing: 1.0px;
}

/* “mascota” a 2ª línea con mejor jerarquía y espaciado */
body#index h2.products-section-title > span:last-of-type {
	display: block;
	margin-top: 1px;
	font-weight: 900;
	font-size: 28px;
	line-height: 1.00;
	letter-spacing: .55px;
	color: rgba(42, 132, 76, .90);
}

/* Quitar subrayados/efectos de spans por si quedaron de iteraciones anteriores */
body#index h2.products-section-title > span::before,
body#index h2.products-section-title > span::after{
  content: none !important;
}

/* Neutraliza floats del tema */
body#index .h2.products-section-title{
  float: none !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
}














/* ============================================================
   MASCOTILLAS · HOME SLIDER PRODUCTS · PREMIUM / SOBRIO (ITERACIÓN 2 · FIX)
   Scope: .tw-product-swiper (no afecta al resto de listados)

   Cambios en esta iteración:
   1) NO tocamos flechas del slider: se elimina por completo la sección SWIPER BUTTONS.
   2) Imagen: mantiene “producto completo” pero más grande/“natural” (sin hueco feo).
   3) Sombra: se ve por laterales y más por abajo SIN abrir overflow (no enseña slides cortados).
============================================================ */


/* ============================================================
   SWIPER CONTAINER + SPACING (evitar “producto cortado” y recuperar separación)
   - Mantengo overflow:hidden para NO mostrar slides cortados.
   - Añado padding real (laterales y abajo) para que la sombra “quepa” dentro del contenedor.
============================================================ */

.tw-product-swiper{
  position: relative;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  padding: 0 10px 22px;        /* + aire lateral y + fondo para sombra */
}

.tw-product-swiper .swiper-wrapper{
  align-items: stretch;
  gap: 18px;
}

/* Evitar que el gap sume con el margin-right inline del Swiper (cuando exista) */
.tw-product-swiper .swiper-slide{
  height: auto;
  display: flex;
  margin-right: 0 !important;
}

/* En algunos temas, estas clases meten padding/márgenes “legacy” */
.tw-product-swiper .js-product.product{
  padding: 0 !important;
  margin: 0 !important;
}


/* ============================================================
   CARD BASE (sombra reforzada, pero contenida dentro del padding del contenedor)
============================================================ */

article.product-miniature{
  width: 100%;
  height: 100%;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 6px 11px rgba(15,23,42,.08), 0 2px 6px rgba(15,23,42,.05);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  position: relative;
}

article.product-miniature:hover{
  transform: translateY(-3px);
  box-shadow:
    0 13px 14px rgba(15,23,42,.1), 0 3px 10px rgba(15,23,42,.07);
  border-color: rgba(15,23,42,.14);
}

article.product-miniature:focus-within{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(245,190,40,.28),
    0 16px 34px rgba(15,23,42,.12),
    0 3px 10px rgba(15,23,42,.07);
  border-color: rgba(15,23,42,.16);
}

.thumbnail-container{
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0 !important;
}


/* ============================================================
   IMAGE (ver producto completo + más grande/“natural”)
   - Mantiene object-fit:contain (no recorta).
   - Ajusto paddings para que la imagen no se vea “pequeña” dentro del cuadrado.
   - Reduzco hueco entre imagen y título.
============================================================ */

.thumbnail-top{
  position: relative;
  padding: 12px 12px 10px;     /* antes 0 abajo; ahora acerca el contenido */
}

a.thumbnail.product-thumbnail{
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  width: 100%;
  height: 100% !important;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(15,23,42,.06);
}

a.thumbnail.product-thumbnail picture{
  display: block;
  width: 100%;
  height: 100%;
}

a.thumbnail.product-thumbnail img{
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: contain;
  background: #fff;
  padding: 6px;                /* menos padding = imagen más grande */
  box-sizing: border-box;
  transform: scale(1);
  transition: transform .22s ease, filter .22s ease;
  filter: saturate(.98) contrast(.99);
}

article.product-miniature:hover a.thumbnail.product-thumbnail img{
  filter: saturate(1) contrast(1);
}


/* ============================================================
   FLAGS (descuento / nuevo) - ajustar “Nuevo” a paleta Mascotillas
============================================================ */

ul.product-flags{
  position: absolute;
	top: 7px;
  left: 9px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
  z-index: 5;
  pointer-events: none;
}

ul.product-flags li.product-flag{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  max-width: 160px;
  padding: 6px 10px;
  margin-top: 0.2rem;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  font-weight: 800 !important;
  letter-spacing: .2px;
  background: rgba(15,23,42,.82);
  color: #fff;
  box-shadow: 0 8px 14px rgba(15,23,42,.06);
  backdrop-filter: blur(8px);
  min-height: unset !important;
}


ul.product-flags li.product-flag.new{
background: #E5ECE5;
  color: #1f4e3c;
  border: 1px solid rgba(36, 90, 69, 0.15);
}


ul.product-flags li.product-flag.discount {
	background: rgb(251, 241, 203);
	border: 1px solid rgba(243, 195, 22, .35);
	color: #7a5200;
}


/* ============================================================
   WISHLIST BUTTON (top-right, limpio)
============================================================ */

.wishlist-button-add {
	position: absolute !important;
top: 0.635rem !important;
  right: 0.735rem !important;
	z-index: 10 !important;
	width: 33px !important;
	height: 33px !important;
	border-radius: 999px;
	background: rgba(255,255,255,.92);
	box-shadow: 2px 1px 4px rgba(15,23,42,.10) !important;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
	min-width: auto !important;
}

.wishlist-button-add i.material-icons{
  font-size: 17px;
  color: rgba(15,23,42,.72);
}

.wishlist-button-add:hover{
  box-shadow: 0 6px 6px rgba(15,23,42,.1);
}

.wishlist-button-add:focus{ outline: none; }

.wishlist-button-add:focus-visible{
  box-shadow: 0 0 0 3px rgba(245,190,40,.28), 0 14px 24px rgba(15,23,42,.14);
}


/* ============================================================
   QUICK VIEW (solo en hover/focus, sobrio)
============================================================ */

.highlighted-informations {display: none;}
.product-miniature .thumbnail-container:focus .product-description::after, .product-miniature .thumbnail-container:hover .product-description::after {
	border-top: none;
}

/* ============================================================
   CONTENT (title + price + reviews)
============================================================ */

.product-miniature .product-description{
  padding: 10px 14px 14px;     /* sube el contenido (menos hueco) */
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
}

/* Title */
h3.product-title{
  margin: 0 !important;
  padding: 0;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 900;
  letter-spacing: -.2px;
}

#js-product-list .js-product.product {
	padding: 18px 10px;
}
.product-miniature .product-title {
	margin-top: 0;
}


h3.product-title a{
  color: rgba(15,23,42,.92) !important;
  text-decoration: none;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

h3.product-title a:hover{
  color: rgba(15,23,42,1);
}

/* Price row (centrado y consistente con/sin descuento) */
.product-price-and-shipping{
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(15,23,42,.03);
  border: 1px solid rgba(15,23,42,.06);
}

/* Quitamos badge de descuento en la fila (ya está en flags) */
.product-price-and-shipping .discount-percentage,
.product-price-and-shipping .discount-amount{
  display: none !important;
}

.product-price-and-shipping .regular-price{
  font-size: 12px;
  color: rgba(15,23,42,.48);
  text-decoration: line-through;
  white-space: nowrap;
}

.product-price-and-shipping .price{
  font-size: 16px;
  font-weight: 950;
  letter-spacing: -.3px;
  color: rgba(15,23,42,.96);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Reviews (compacto) */
.product-list-reviews{
	top: -18px;
	background: rgba(255, 255, 255, 0.84);
}
.product-list-reviews .star-content div.star-on, .star-content div.star-hover {
	filter: invert(60%) sepia(95%) saturate(550%) hue-rotate(0deg) brightness(135%) contrast(105%);
}
.product-list-reviews .grade-stars{
  transform: translateY(-1px);
}

.product-list-reviews .comments-nb{
  font-size: 12px;
  color: rgba(15,23,42,.55);
}






/* ============================================================
   MASCOTILLAS · HOME · LINK “ALL PRODUCT LINK” (premium, NO pill) · ITERACIÓN 2
   Ajustes:
   - Desktop: bajar el link (alineación real con el H2 aunque tenga margen/padding)
   - Desktop: separar de la derecha (como el aire de las cards)
   - Estilo: el “hover” pasa a ser el estado normal (más visible)
   - Móvil: se queda donde está (debajo del carrusel)
============================================================ */

/* Base (móvil / default) */
a.all-product-link {
	display: inline-flex;
	align-items: center;
	gap: 0;
	padding: 0;
	margin: 14px 0 0 !important;
	text-decoration: none;
	font-weight: 900 !important;
	font-size: 14px;
	letter-spacing: -.2px;
	color: rgba(15,23,42,.96) !important;
	border-bottom: 1px solid rgba(245,190,40,.90);
	transition: color .18s ease, border-color .18s ease, transform .18s ease, opacity .18s ease;
}

a.all-product-link:hover{
  color: rgba(15,23,42,1);
  border-bottom-color: rgba(245,190,40,1);
  transform: translateY(-1px);
}

a.all-product-link:focus{
  outline: none;
}

a.all-product-link:focus-visible{
  border-bottom-color: rgba(245,190,40,1);
  box-shadow: 0 2px 0 rgba(245,190,40,.70);
}

/* Icono (material) */
a.all-product-link i.material-icons{
  font-size: 18px;
  line-height: 1;
  opacity: 1;                                 /* más visible por defecto */
  transform: translate(2px, 1px);             /* “hover” como normal */
  transition: transform .18s ease, opacity .18s ease;
}

a.all-product-link:hover i.material-icons{
  transform: translate(4px, 1px);
}

/* ============================================================
   Desktop: colocarlo arriba a la derecha, pero bajado y con aire lateral
   - Sin tocar HTML: usamos position absolute con top calculado visualmente
   - El H2 tiene margen/padding grande: por eso lo bajamos con top más alto
============================================================ */

@media (min-width: 992px){

  section.featured-products{
    position: relative;
  }

  /* Reserva para que el título no se meta debajo del link */
  section.featured-products > h2.products-section-title{
    padding-right: 300px;
  }

	section.featured-products > a.all-product-link {
		position: absolute;
		top: 63px;
		right: 34px;
		white-space: nowrap;
	}
}









/* =========================================================
   Mascotillas - Miniatura: fila precio + CTA icon-only AJAX
========================================================= */

.product-miniature .product-price-and-shipping .tw-pps-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
}

.product-miniature .product-price-and-shipping .tw-pps-prices{
  min-width:0;
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:6px 10px;
}

.product-miniature .product-price-and-shipping .price,
.product-miniature .product-price-and-shipping .regular-price{
  white-space:nowrap;
}

.product-miniature .tw-card-atc-form{
  margin:0;
  padding:0;
  display:flex;
  align-items:center;
}

/* Botón icon-only */
.product-miniature .tw-card-atc{
  appearance:none;
  border:0;
  cursor:pointer;

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

  width:38px;
  height:36px;
  border-radius:12px;

  background: rgba(245,190,40,.95);
  color: rgba(255,255,255,.92);
  text-decoration:none;

  box-shadow: 0 1px 3px rgba(0,0,0,.10);
  transition: transform .15s ease, box-shadow .18s ease, filter .15s ease, opacity .15s ease;
}

.product-miniature .tw-card-atc svg{
  width:18px;
  height:18px;
  display:block;
}

@media (hover:hover){
  .product-miniature .tw-card-atc:hover{
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0,0,0,.14);
    filter: brightness(1.02);
  }
}

.product-miniature .tw-card-atc:focus-visible{
  outline:2px solid rgba(0,0,0,.30);
  outline-offset:2px;
}

.product-miniature .tw-card-atc.is-disabled{
  width:38px;
  height:36px;
  border-radius:12px;
  background: rgba(0,0,0,.08);
  color: rgba(255,255,255,.55);
  box-shadow:none;
  cursor:not-allowed;
}

@media (max-width:420px){
  .product-miniature .tw-card-atc{
    width:36px;
    height:34px;
  }
  .product-miniature .tw-card-atc.is-disabled{
    width:36px;
    height:34px;
  }
  .product-miniature .tw-card-atc svg{
    width:17px;
    height:17px;
  }
}




/* =========================================================
   BANNER PORTADA
========================================================= */

.banner img {width: 100%;}
#wrapper .banner {
	display: block;
	margin: 5rem 0 5.3rem;
}

a.banner{
  position: relative;
  display: block;
  overflow: hidden;

  border-radius: 18px;

  background: #fff;
  border: 1px solid rgba(0,0,0,.06);

  box-shadow: 0 18px 40px rgba(0,0,0,.10);
  transform: translateZ(0);
  transition: transform .18s ease, box-shadow .22s ease, filter .22s ease;
}

a.banner img{
  display: block;
  width: 100%;
  height: auto;

  border-radius: inherit;

  transform: scale(1.01);
  transition: transform .28s ease, filter .22s ease;
}


@media (hover:hover){
  a.banner:hover{
    transform: translateY(-2px);
    box-shadow: 0 16px 40px rgba(0,0,0,.12);
  }

  a.banner:hover img{
    transform: scale(1.03);
    filter: saturate(1.02) contrast(1.02);
  }

  a.banner:hover::after{
    opacity: .40;
  }
}

a.banner:focus-visible{
  outline: 2px solid rgba(245,190,40,.55);
  outline-offset: 4px;
}

@media (max-width: 767px){
  a.banner{
    border-radius: 16px;
    box-shadow: 0 8px 20px rgba(0,0,0,.08);
  }
}

@media (max-width: 420px){
  a.banner{
    border-radius: 14px;
  }
}



/* =========================================================
   CUSTOM TEXT
========================================================= */

#custom-text {
  padding: 0 !important;
  margin-bottom: 1.5rem;
  background: transparent !important;
  border-radius: 0 !important;
}

/* =========================================================
   BLOQUE 1: TRUST BAR (reaseguros)
   Moderno, limpio, con aire. Sin depender del slider.
========================================================= */

.tw-trustbar{
  margin: 56px 0 56px;
  padding: 0;
}

.tw-trustbar .tw-trustbar-grid{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
}

.tw-trustbar .tw-trustbar-item{
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 16px 16px;
  border-radius: 18px;

  background: rgba(255,255,255,.92);
  border: 1px solid rgba(0,0,0,.07);
  box-shadow: none;

  transition: transform .16s ease, border-color .16s ease, background-color .16s ease;
}

.tw-trustbar .tw-trustbar-ico{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  margin-right: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: rgba(0,0,0,.04);
  border: 1px solid rgba(0,0,0,.06);
  color: rgba(0,0,0,.70);

  flex: 0 0 auto;
}

.tw-trustbar .tw-trustbar-ico .material-icons{
  font-size: 21px;
  line-height: 1;
}

.tw-trustbar .tw-trustbar-title{
  font-size: 14px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.12px;
  color: rgba(0,0,0,.82);
  margin: 0;
  text-align: left;	
}

.tw-trustbar .tw-trustbar-desc{
  margin: 6px 0 0;
  font-size: 12.8px;
  line-height: 1.4;
  color: rgba(0,0,0,.56);
	text-align: left;
}

@media (hover:hover){
  .tw-trustbar .tw-trustbar-item:hover{
    transform: translateY(-2px);
    border-color: rgba(0,0,0,.10);
    background: rgba(255,255,255,.98);
  }
}

@media (max-width: 1100px){
  .tw-trustbar .tw-trustbar-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}



/* ==========================================================
   TW TRUSTBAR — scroll horizontal en móvil (<600px)
   Solo esta capa (sin tocar el resto del layout)
   ========================================================== */

@media (max-width: 560px){

  .tw-trustbar{
    position: relative;
  }

  /* Área scrolleable */
  .tw-trustbar-inner{
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding: 6px 0 12px;
        mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 18px), transparent 100%) !important;
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 18px), transparent 100%) !important;
  }

  /* “Pista” en grid horizontal */
  .tw-trustbar .tw-trustbar-grid{
    /* override del desktop (tiene !important) */
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(290px, 78%) !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 0 18px !important;
  }	
	.tw-trustbar .tw-trustbar-item:hover {
		transform: translateY(0px);
	}	

  /* Tarjetas: snap + consistencia */
  .tw-trustbar-item{
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* Indicador visual de que hay scroll (fade + “hint” sutil) */
  .tw-trustbar-inner::after{
    content: "";
    position: sticky;
    right: 0;
    top: 0;
    height: 100%;
    width: 26px;
    display: block;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,1));
  }

  /* Scrollbar suave (Chrome/Safari/Edge) */
  .tw-trustbar-inner::-webkit-scrollbar{
    height: 8px;
  }
  .tw-trustbar-inner::-webkit-scrollbar-track{
    background: rgba(15,42,24,0.08);
    border-radius: 999px;
  }
  .tw-trustbar-inner::-webkit-scrollbar-thumb{
    background: rgba(15,42,24,0.22);
    border-radius: 999px;
  }
	body#index h2.products-section-title::before {
		top: unset;
	}	
	#blockcart-modal .cart-content .cart-content-btn button {
		margin-right: 0;
	}
}

/* =========================================================
   BLOQUE 2: TESTIMONIOS (slider)
   No comparte contenedor con trustbar.
========================================================= */

.tw-reviewsblock{
  margin: 56px 0 64px;
  padding: 0;
}

.tw-reviewsblock .tw-reviewsblock-head{
  display: flex;
  justify-content: center;
  margin: 0 0 16px;
}

.tw-reviewsblock .tw-reviewsblock-title{
  font-size: 16px;
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.15px;
  color: rgba(0,0,0,.80);
}

/* Slider wrapper */
.tw-reviewsblock .tw-reviewsblock-slider{
  position: relative;
  padding: 0;
  overflow: visible;
}

/* Viewport */
.tw-reviewsblock .tw-reviewsblock-viewport{
  overflow: hidden;
  border-radius: 18px;
  background: transparent;
  border: 0;
  padding: 0;
}

.tw-reviewsblock .tw-reviewsblock-track{
  display: flex;
  gap: 14px;
  margin: 0;
  padding: 4px 0 60px;
  transform: translate3d(0,0,0);
  transition: transform .28s ease;
  will-change: transform;
}

/* =========================================================
   Card sizing: 4 / 3 / 2 / 1 enteras
========================================================= */

.tw-reviewsblock .tw-review{
  flex: 0 0 calc((100% - (14px * 2)) / 3); /* default: 3 */
  border-radius: 18px;

  background:
    radial-gradient(620px 160px at 22% 40%, rgba(255, 255, 255, .18), transparent 62%), radial-gradient(760px 180px at 88% 10%, rgba(255, 255, 255, .12), transparent 66%), linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .12)), linear-gradient(90deg, #65802f 0%, #799b37 18%, #7c953f 42%, #819d3b 70%, #7b9745 100%);

  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 14px 30px rgba(0,0,0,.18);

  padding: 16px 18px 14px;
  position: relative;
  min-width: 0;

  color: #ffffff;

  display: flex;
  flex-direction: column;
  gap: 10px;

  overflow: hidden;
}

.tw-reviewsblock .tw-review:after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius: 18px;
  pointer-events:none;

  background:
    radial-gradient(14px 14px at 78% 28%, rgba(255,255,255,.10), rgba(255,255,255,0) 70%),
    radial-gradient(18px 18px at 90% 56%, rgba(255,255,255,.08), rgba(255,255,255,0) 72%),
    radial-gradient(12px 12px at 18% 38%, rgba(255,255,255,.08), rgba(255,255,255,0) 70%),
    radial-gradient(16px 16px at 34% 78%, rgba(255,255,255,.06), rgba(255,255,255,0) 72%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.08));

  mix-blend-mode: soft-light;
  opacity: .9;
}


.tw-reviewsblock .tw-review > *{
  position: relative;
  z-index: 3;
}

@media (min-width: 1440px){
  .tw-reviewsblock .tw-review{
    flex-basis: calc((100% - (14px * 3)) / 4);
  }
}

@media (max-width: 1100px){
  .tw-reviewsblock .tw-review{
    flex-basis: calc((100% - 14px) / 2);
    border-radius: 16px;
  }
  .tw-reviewsblock .tw-review:before{
    left: 16px;
    right: 16px;
  }
}

@media (max-width: 560px){
  .tw-reviewsblock .tw-review{
    flex-basis: 100%;
    border-radius: 16px;
  }
  .tw-reviewsblock .tw-review:before{
    left: 16px;
    right: 16px;
  }
}

/* --- Card inner --- */
.tw-reviewsblock .tw-review-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
}

.tw-reviewsblock .tw-review-stars{
  font-size: 13px;
  letter-spacing: 1px;
  color: rgba(245,190,40,.98);
  font-weight: 900;
  user-select: none;
  white-space: nowrap;
  text-shadow: 0 1px 0 rgba(0,0,0,.18);
}

.tw-reviewsblock .tw-review-badge {
	font-size: 11px;
	line-height: 1;
	padding: 6px 9px;
	border-radius: 12px;
	background: rgba(0, 0, 0, 0.24);
	border: 1px solid rgba(255,255,255,.18);
	color: rgba(255,255,255,.96);
	white-space: nowrap;
	backdrop-filter: blur(2px);
}

.tw-reviewsblock .tw-review-text{
  font-size: 13px;
  line-height: 1.55;
  color: #ffffff;
  font-weight: 650;
  letter-spacing: -0.10px;

  margin: 0;
  min-height: 0;

  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.43);
}

.tw-reviewsblock .tw-review-meta{
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.16);

  display: flex;
  align-items: center;
  gap: 8px;

  font-size: 12.5px;
  color: rgba(255,255,255,.88);
  font-weight: 650;
  justify-content: space-around;
  text-shadow: 0 1px 0 rgba(0,0,0,.18);
}

.tw-reviewsblock .tw-review-name{
  font-weight: 900;
  color: #ffffff;
}

.tw-reviewsblock .tw-review-sep{
  opacity: .55;
}

/* --- Flechas --- */
.tw-reviewsblock .tw-rev-nav{
  position: absolute;
  top: -28px;
  transform: translateY(-50%);

  width: 42px;
  height: 42px;
  border-radius: 999px;

  border: 1px solid rgba(0,0,0,.18);
  background: rgba(255,255,255,.96);
  color: rgba(0, 0, 0, 0.61);

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

  box-shadow: 0 14px 30px rgba(0,0,0,.14);
  cursor: pointer;

  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  z-index: 5;
}

.tw-reviewsblock .tw-rev-prev{ left: 3px; }
.tw-reviewsblock .tw-rev-next{ right: 3px; }

.tw-reviewsblock .tw-rev-nav .material-icons{
  font-size: 22px;
  line-height: 1;
}


#index section.featured-products:nth-of-type(3) {
	margin: -35px 0 32px !important;
}



@media (hover:hover){
  .tw-reviewsblock .tw-rev-nav:hover{
    transform: translateY(-50%) translateY(-1px);
    box-shadow: 0 18px 38px rgba(0,0,0,.18);
  }

  .tw-reviewsblock .tw-review:hover{
    box-shadow: 0 18px 40px rgba(0,0,0,.22);
    border-color: rgba(255,255,255,.20);
  }
}

.tw-reviewsblock .tw-rev-nav.is-disabled,
.tw-reviewsblock .tw-rev-nav:disabled{
  opacity: .35;
  cursor: not-allowed;
  box-shadow: none;
}

@media (max-width: 1100px){
  .tw-reviewsblock .tw-rev-prev{ left: 8px; }
  .tw-reviewsblock .tw-rev-next{ right: 8px; }
}

@media (max-width: 560px){
  .tw-reviewsblock .tw-rev-prev{ left: 6px; }
  .tw-reviewsblock .tw-rev-next{ right: 6px; }
}

/* --- Defensivo --- */
.tw-reviewsblock .tw-reviewsblock-viewport,
.tw-reviewsblock .tw-reviewsblock-track,
.tw-reviewsblock .tw-review{
  box-sizing: border-box;
}


.tw-reviewsblock-viewport{
  touch-action: pan-y; /* permite scroll vertical, pero deja swipe horizontal al JS */
  user-select: none;
}
.tw-reviewsblock-track{
  will-change: transform;
}

















/* ==========================================================
   MASCOTILLAS.COM — FOOTER PREMIUM (iteración 6)
   Correcciones solicitadas (sin perder tus cambios):
   - Social: iconos visibles (NO generamos content; dejamos SVG/background-image del tema)
   - Jerarquía: títulos de bloque vs enlaces (más profesional y claro)
   - GDPR: checkbox + texto alineados y con “aire” (desplazado a la derecha)
   - Mantener: z-index del botón newsletter + tu ajuste de margen en info tienda
   ========================================================== */

#footer {
	position: relative;
	background: #fff;
	border-top: 1px solid rgba(23, 87, 38, 0.10);
}
#footer .container{
  max-width: 1520px;
  padding-left: 34px;
  padding-right: 34px;
}

@media (max-width: 991px){
  #footer .container{
    padding-left: 18px;
    padding-right: 18px;
  }
	
	#footer #block_myaccount_infos.links.wrapper {
		margin: 0 16px 0 10px;
	}	
	
	
}

/* ==========================================================
   1) NEWSLETTER — limpio, sin panel blanco, sin autofill raro
   ========================================================== */
#footer #blockEmailSubscription_displayFooterBefore{
  padding: 15px 20px 40px;
}

#footer .block_newsletter{
  width: 100%;
}

#footer .block_newsletter > .row{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 18px;
  margin-left: 0;
  margin-right: 0;
}

/* Título newsletter centrado */
#footer #block-newsletter-label{
  margin: 0;
  padding: 0;
  flex: 0 0 100%;
  max-width: 920px;
  text-align: center;
  color: #164b26;
  font-weight: 900;
  letter-spacing: -0.02em;
  font-size: 16px;
  line-height: 1.25;
}

/* Col form */
#footer .block_newsletter > .row > .col-md-7,
#footer .block_newsletter > .row > .col-xs-12{
  flex: 0 1 920px;
  max-width: 920px;
  padding: 0;
}

/* Neutraliza wrapper/panel del tema */
#footer .block_newsletter,
#footer .block_newsletter form,
#footer .block_newsletter form .row,
#footer .block_newsletter form .col-xs-12{
  background: transparent !important;
  box-shadow: none !important;
}

#footer .block_newsletter form{
  width: 100%;
}

#footer .block_newsletter form .row{
  margin-left: 0;
  margin-right: 0;
}

#footer .block_newsletter form .col-xs-12{
  position: relative;
  padding: 0;
}

/* Input pill */
#footer .block_newsletter .input-wrapper{
  position: relative;
  width: 100%;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(23, 87, 38, 0.16);
  border-radius: 999px;
  padding: 10px 12px;
  box-shadow: none;
  backdrop-filter: blur(6px);
  overflow: hidden;
}

#footer .block_newsletter input[name="email"]{
  width: 100%;
  border: 0 !important;
  outline: none !important;
  background: transparent !important;
  padding: 12px 170px 12px 12px;
  color: #0f2a18;
  font-size: 14px;
  line-height: 1.2;
  box-shadow: none !important;
  filter: none !important;
}

/* Autofill Chrome (quita amarillo) */
#footer .block_newsletter input[name="email"]:-webkit-autofill,
#footer .block_newsletter input[name="email"]:-webkit-autofill:hover,
#footer .block_newsletter input[name="email"]:-webkit-autofill:focus{
  -webkit-text-fill-color: #0f2a18;
  transition: background-color 999999s ease-in-out 0s;
  box-shadow: 0 0 0 1000px rgba(255,255,255,0) inset !important;
  caret-color: #0f2a18;
}

#footer .block_newsletter .input-wrapper:before,
#footer .block_newsletter .input-wrapper:after{
  content: none !important;
}

#footer .block_newsletter input[name="email"]::placeholder{
  color: rgba(15, 42, 24, 0.55);
}

/* Botón (mantener tu fix de z-index) */
#footer .block_newsletter input[name="submitNewsletter"].btn{
  position: absolute;
  right: 12px;
  top: 12px;
  border: 0;
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 900;
  letter-spacing: -0.01em;
  line-height: 1;
  background: linear-gradient(180deg, #f7d34a 0%, #f1b90b 100%);
  color: #1b2a12;
  box-shadow: none;
  z-index: 2; /* <- importante para que no quede debajo */
}

#footer .block_newsletter input[name="submitNewsletter"][disabled]{
  opacity: .55;
  cursor: not-allowed;
}

@media (max-width: 991px){
  #footer .block_newsletter input[name="email"]{
    padding-right: 110px;
  }
  #footer .block_newsletter input[name="submitNewsletter"].btn{
    right: 10px;
    top: 10px;
    padding: 10px 14px;
  }
}

/* ==========================================================
   GDPR — alineación y “aire” (más a la derecha, mejor centrado)
   ========================================================== */
#footer .gdpr_consent {
	margin-top: 15px;
	text-align: center;
}

@media (max-width: 991px){
  #footer .gdpr_consent{
    padding-left: 10px;
  }
}

#footer .gdpr_consent .custom-checkbox{
  background: transparent;
  border: 0;
  padding: 0;
  box-shadow: none;
}

#footer .gdpr_consent .psgdpr_consent_message{
  margin: 0;
  display: inline-flex;
  gap: 10px;
  align-items: center;         /* <- checkbox y texto alineados */
  color: rgba(15, 42, 24, 0.75);
  font-size: 13px;
  line-height: 1.35;
}
.custom-checkbox input[type="checkbox"] + span {
	margin-right: 0.2rem !important;
}

#footer .gdpr_consent input[type="checkbox"]{
  margin: 0;
  transform: scale(1.05);
  accent-color: var(--tw-brand-700);
}

#footer .gdpr_consent .psgdpr_consent_message a{
  color: var(--tw-brand-700);
  font-weight: 900;
  text-decoration: none;
  border-bottom: 1px solid rgba(31,122,58,0.28);
  margin-left: 1px;	
}

/* ==========================================================
   2) FOOTER LINKS — jerarquía y alineación
   ========================================================== */
#footer .footer-container {
	padding: 52px 0 0;
	background: linear-gradient(180deg, #f6fbf6 0%, #eef6ee 100%);
}
#footer .footer-container .row{
  margin-left: -16px;
  margin-right: -16px;
}

#footer .footer-container [class*="col-"]{
  padding-left: 16px;
  padding-right: 16px;
}

/* Evita que “Productos” se pegue */
#footer .footer-container .col-md-6.links{
  padding-left: 10px;
}

/* ==========================================================
   TÍTULOS — más “pro”: tamaño, peso, tracking, separación
   ========================================================== */
#footer .footer-container p.h3{
  margin: 0 0 12px 0;
  color: #133e20;
  font-weight: 1000;
  letter-spacing: -0.02em;
  text-transform: none !important;
  font-size: 16px;
  line-height: 1.15;
}

/* Su cuenta (HTML distinto) -> igualar exactamente */
#footer #block_myaccount_infos .myaccount-title{
  margin: 0 40px 12px 0px;
}

#footer #block_myaccount_infos .myaccount-title a{
  display: inline-block;
  color: #133e20;
  font-weight: 1000;
  letter-spacing: -0.02em;
  font-size: 16px;
  line-height: 1.15;
  text-transform: none !important;
  text-decoration: none;
}

/* Subrayado sutil de jerarquía (solo títulos desktop) */
@media (max-width: 991px){
  #footer .footer-container p.h3 {
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(19,62,32,0.10);
  }
	#footer .footer-container ul {
		padding: 0 20px 30px !important;
		background: transparent;
	}	
	#footer .footer-container .block-contact.links.wrapper {
		margin: 0 16px 16px 10px !important;
		background: transparent !important;
		border: none !important;
		max-width: unset !important;
	}
	#footer #block_myaccount_infos.links.wrapper {
		margin-bottom: 0 !important;
	}	
	#footer .footer-container .block-contact.links.wrapper {
		padding: 0 0 16px !important;
	}
	#footer .block-social ul {
		padding: 10px 12px !important;
	}
	#footer .footer-container > .container > .row:nth-of-type(3) {
		padding: 0px 0 20px !important;
	}	
	.tw-trustbar .tw-trustbar-ico {
		margin: 0 5px 0 0 !important;
	}
}

/* ==========================================================
   ENLACES — más ligeros que el título (jerarquía clara)
   ========================================================== */
#footer .footer-container ul{
  margin: 0;
  padding: 0;
  list-style: none;
}

#footer .footer-container li{
  margin: 0;
  padding: 0;
}

#footer .footer-container .links a,
#footer #block_myaccount_infos ul.account-list a{
  display: inline;
  padding: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;

  color: rgba(15, 42, 24, 0.78);  /* <- más suave que el título */
  text-decoration: none;
  font-weight: 800;
  font-size: 13px;
  line-height: 1.95;
  border-bottom: 1px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}

#footer .footer-container .links a:hover,
#footer #block_myaccount_infos ul.account-list a:hover{
  color: rgba(15, 42, 24, 0.92);
  border-bottom-color: rgba(15,42,24,0.16);
}

/* spacing entre items */
#footer .footer-container .links ul li + li,
#footer #block_myaccount_infos ul.account-list li + li{
  margin-top: 6px;
}

/* Su cuenta wrapper (sin hover-card) */
#footer #block_myaccount_infos.links.wrapper{
  background: transparent;
  border: 0;
  box-shadow: none;
  padding-top: 2px;
  margin-bottom: 16px;
}

#footer #block_myaccount_infos *{
  box-shadow: none;
}

/* ==========================================================
   4) INFO TIENDA — mantener tu ajuste (no perderlo)
   ========================================================== */
#footer .footer-container .block-contact.links.wrapper{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(23, 87, 38, 0.10);
  border-radius: 18px;
  box-shadow: none;
  padding: 18px 18px;
  margin: 0 auto 16px;
  max-width: 520px;
}

/* <- mantener tu modificación */
@media (min-width: 992px){
  #footer .footer-container .block-contact.links.wrapper{
    margin-left: -30px;
  }
}

/* Tel/email sin “sub-cards” */
#footer .block-contact #contact-infos{
  color: rgba(15,42,24,0.76);
  font-size: 13px;
  line-height: 1.60;
}

#footer .block-contact #contact-infos a{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  display: inline !important;
  color: var(--tw-brand-700);
  font-weight: 900;
  text-decoration: none;
  border-bottom: 1px solid rgba(31,122,58,0.28);
}


/* ==========================================================
   6) COPYRIGHT
   ========================================================== */
#footer .footer-container .text-sm-center{
  margin: 18px 0 0;
  padding-top: 16px;
  text-align: center;
}

#footer .footer-container .text-sm-center a {
	color: #fff;
	text-decoration: none;
	font-weight: 800;
	font-size: 13px;
}

#footer .footer-container .text-sm-center a:hover{
  color: rgb(246, 193, 51);
}

/* ==========================================================
   ACCESIBILIDAD
   ========================================================== */
#footer a:focus-visible,
#footer button:focus-visible,
#footer input:focus-visible{
  outline: 3px solid rgba(241,185,11,0.55);
  outline-offset: 2px;
  border-radius: 12px;
}

#footer .clearfix::after{
  content: "";
  display: block;
  clear: both;
}






/* ==========================================================
   MASCOTILLAS.COM — FOOTER SOCIAL (complementario al tema)
   Objetivo:
   - NO romper el sistema existente (li con background-image por clase .facebook, etc.)
   - Evitar que aparezca texto en los botones
   - Eliminar el “cuadrado” externo y dejar solo el botón redondo limpio
   - Mejorar contraste y coherencia con el footer (verde/amarillo) sin tocar SVGs
   ========================================================== */

/* Mantén centrado en footer (tu layout actual) */
#footer .block-social{
  width: 100%;
  margin: 25px 0 35px;
  display: flex;
  justify-content: center;
  text-align: center; /* sobreescribe el right del tema SOLO en footer */
}

/* “Píldora” contenedora */
#footer .block-social ul{
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;

  padding: 10px 12px;
  margin: 0;
  list-style: none;

  background: rgba(255,255,255,.78);
  border: 1px solid rgba(23, 87, 38, 0.10);
  border-radius: 999px;
  box-shadow: none;
}

/* IMPORTANTE:
   El tema pone el icono como background-image en el LI (.facebook, .instagram, etc.)
   así que NO tocamos pseudo-content, solo afinamos forma/colores y “recortamos” */
#footer .block-social ul li {
	width: 42px;
	height: 40px;
	margin: 0;
	padding: 0;
	display: inline-block;
	border-radius: 999px;
	background-color: rgba(131, 153, 80, 0.61);
	/* border: 1px solid rgba(15, 42, 24, 0.22); */
	box-shadow: none;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 18px 18px;
	overflow: hidden;
	transition: transform .15s ease, background-color .15s ease, border-color .15s ease, filter .15s ease;
}
/* Hover: mantiene el sistema del tema (cambia a icono blanco) pero con tu color */
#footer .block-social ul li:hover {
	background-color: rgba(241, 185, 11, 0.63);
	border-color: rgba(241,185,11,0.38);
	transform: translateY(-1px);
}

/* Link dentro: debe cubrir todo y nunca mostrar texto */
#footer .block-social ul li a{
  display: block;
  width: 100%;
  height: 100%;

  overflow: hidden;
  text-indent: 200%;
  white-space: nowrap;

  font-size: 0;
  line-height: 0;
}

/* Evitar que ::before del tema genere “otra capa” visual extra dentro del LI */
#footer .block-social ul li::before,
#footer .block-social ul li::after{
  content: "" !important;
  display: none !important;
}

/* Si alguna red social usa .icon-gray, no queremos el fondo gris plano del tema */
#footer .block-social ul li.icon-gray{
  background-color: rgba(15, 42, 24, 0.58);
}

/* Asegura que el foco sea visible (accesibilidad) */
#footer .block-social ul li a:focus-visible{
  outline: 3px solid rgba(241,185,11,0.55);
  outline-offset: 2px;
  border-radius: 999px;
}

/* ==========================================================
   TikTok (sin archivo) — IGUAL que las otras:
   - Normal: icono BLANCO (como el resto)
   - Hover: sigue blanco (el cambio es el fondo amarillo del LI)
   ========================================================== */
#footer .block-social ul li.tiktok{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M16.5 1c.4 3.1 2.3 5.6 5.2 6.7v3.5c-1.9 0-3.6-.6-5-1.6v7.3c0 4.6-3.7 8.3-8.3 8.3S0 22.8 0 18.2s3.7-8.3 8.3-8.3c.3 0 .7 0 1 .1v3.9c-.3-.1-.6-.2-1-.2-2.4 0-4.4 2-4.4 4.4s2 4.4 4.4 4.4 4.4-2 4.4-4.4V1h3.5z'/%3E%3C/svg%3E");
}

#footer .block-social ul li.tiktok:hover{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M16.5 1c.4 3.1 2.3 5.6 5.2 6.7v3.5c-1.9 0-3.6-.6-5-1.6v7.3c0 4.6-3.7 8.3-8.3 8.3S0 22.8 0 18.2s3.7-8.3 8.3-8.3c.3 0 .7 0 1 .1v3.9c-.3-.1-.6-.2-1-.2-2.4 0-4.4 2-4.4 4.4s2 4.4 4.4 4.4 4.4-2 4.4-4.4V1h3.5z'/%3E%3C/svg%3E");
}

/* FOOTER: aplicar al 3er .row dentro de .footer-container */
#footer .footer-container > .container > .row:nth-of-type(3){
  background:
    radial-gradient(620px 160px at 22% 40%, rgba(255, 255, 255, .18), transparent 62%), radial-gradient(760px 180px at 88% 10%, rgba(255, 255, 255, .12), transparent 66%), linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(0, 0, 0, .12)), linear-gradient(90deg, #65802f 0%, #7a993c 18%, #7c953f 42%, #7a933e 70%, #90ac58 100%);
  padding: 0 0 28px;
}


/* =========================================================
   MASCOTILLAS — BREADCRUMB (ITERACIÓN 3 — FORZADO + SEPARADOR VISIBLE)
   - Forzamos especificidad y prioridad para que se aplique aunque el tema “gane”
   - Separador único y visible
   - Sin pills
   - Padding exacto: 0 14px 13px
========================================================= */

body:not(#index) #wrapper nav.breadcrumb{
  padding: 0 27px 18px !important;
  margin: 0 0 12px !important;
  background: transparent !important;
  border: 0 !important;
}

/* estructura */
body:not(#index) #wrapper nav.breadcrumb > ol{
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 0 !important; /* el separador lo gestionamos con ::before */
}

body:not(#index) #wrapper nav.breadcrumb > ol > li{
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* mata cualquier separador previo del tema */
body:not(#index) #wrapper nav.breadcrumb > ol > li::after{
  content: none !important;
  display: none !important;
  background: none !important;
}

/* separador único (garantizado) */
body:not(#index) #wrapper nav.breadcrumb > ol > li + li::before{
  content: "›" !important;
  display: inline-block !important;
  margin: 0 10px !important;
  color: rgba(0, 0, 0, 0.38) !important;
  font-size: 15px !important;
  line-height: 1 !important;
  transform: translateY(-0.5px) !important;
}

/* enlaces */
body:not(#index) #wrapper nav.breadcrumb a{
  color: rgba(15, 42, 23, 0.88) !important;
  text-decoration: none !important;
  background: transparent !important;
  border: 0 !important;
  padding: 2px 0 !important;
  border-radius: 0 !important;
  transition: color .15s ease, box-shadow .15s ease !important;
}

body:not(#index) #wrapper nav.breadcrumb a:hover{
  color: rgba(15, 42, 23, 1) !important;
  box-shadow: inset 0 -2px 0 rgba(47, 107, 63, 0.25) !important;
}

/* texto */
body:not(#index) #wrapper nav.breadcrumb span{
  font-size: 12.5px !important;
  line-height: 1.15 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  padding: 2px 0 0;
}

/* último elemento (actual) */
body:not(#index) #wrapper nav.breadcrumb > ol > li:last-child > span{
  color: rgba(0, 0, 0, 0.60) !important;
  font-weight: 600 !important;
}

/* responsive */
@media (max-width: 575px){
  body:not(#index) #wrapper nav.breadcrumb{
    padding: 0 14px 11px 22px !important;
    margin-bottom: 10px !important;
  }
  body:not(#index) #wrapper nav.breadcrumb > ol > li + li::before{
    margin: 0 8px !important;
    font-size: 14px !important;
  }
  body:not(#index) #wrapper nav.breadcrumb span{
    font-size: 12px !important;
  }
	body:not(#index) #wrapper nav.breadcrumb li:last-child{
	  flex: 1 1 auto;
	  min-width: 0;
	  overflow: hidden;
	}

	body:not(#index) #wrapper nav.breadcrumb li:last-child span{
	  display: block;
	  white-space: nowrap;
	  overflow: hidden;
	  text-overflow: ellipsis;
	}
	
	
	.product-list-reviews {
		top: -30px;
	}	
	.product-miniature .product-flags li.product-flag {
		min-width: unset !important;
		min-height: unset !important;
	}	
	ul.product-flags li.product-flag {
		padding: 5px 7px !important;
		margin-top: 0rem !important;
		font-size:10px;
	}
	ul.product-flags {
		top: 7px;
		left: 5px;
		gap: 7px;
	}
	.wishlist-button-add {
		top: 0.435rem !important;
		right: 0.435rem !important;
		width: 30px !important;
		height: 30px !important;
	}	
	
	.tw-reviewsblock .tw-rev-nav {
		top: -25px;
		width: 32px;
		height: 32px;
	}	
	
}












/* =========================================================
   ADD-TO-CART MODAL — Mascotillas (Global) — AIRY / MORE SPACING
   Ajustes:
   - Más padding general
   - Separación entre bloques
   - Info del producto baja respecto a la imagen
   - “Hay X artículos…” con más padding y más contraste
   - Resumen (subtotal/envío/total) con más aire
   - Botones se mantienen
========================================================= */

/* Modal body */
#blockcart-modal .modal-body{
  padding: 24px 24px 20px;
  background: #ffffff;
  color: #2f3f2c;
}

/* Separador columna izquierda */
#blockcart-modal .divide-right{
  border-right: 1px solid #e5eadf;
  padding-right: 18px;
}

/* Imagen producto */
#blockcart-modal .product-image{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
  border: 1px solid #e5eadf;
  background: #ffffff;
}

/* Bajar y airear la info del producto (columna derecha de la imagen) */
#blockcart-modal .product-name{
  margin: 14px 0 8px; /* antes 2px 0 6px */
  font-weight: 900;
  font-size: 14px;
  letter-spacing: .01em;
  color: #123a2c;
}

#blockcart-modal .product-price{
  margin: 0 0 10px; /* más aire */
  font-weight: 900;
  font-size: 16px;
  color: #123a2c;
}

#blockcart-modal .product-quantity{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #5c6f58;
}

#blockcart-modal .product-quantity strong{
  font-weight: 900;
  color: #123a2c;
}

/* Columna resumen: más separación del separador */
#blockcart-modal .cart-content{
  padding-left: 18px; /* antes 10px */
}

/* Aviso artículos carrito: más padding + más contraste */
#blockcart-modal .cart-products-count {
	margin: 4px 0 14px !important;
	padding: 14px 14px !important;
	border-radius: 14px;
	background: #eaf4e3;
	border: 1px solid #d7e8cf;
	color: #123a2c !important;
}

/* Subtotal / envío: más padding y ritmo vertical */
#blockcart-modal .cart-content p{
  margin: 0 0 10px;
  padding: 6px 0;               /* aire interno */
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  font-size: 13px;
  color: #4b5d48;
}

#blockcart-modal .cart-content p .label{
  font-weight: 800;
  color: #4b5d48;
}

#blockcart-modal .cart-content p .value{
  font-weight: 900;
  color: #123a2c;
  white-space: nowrap;
}

/* Total destacado: bloque separado */
#blockcart-modal .product-total{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e5eadf;
  font-size: 14px;
}

#blockcart-modal .product-total .label{
  font-weight: 900;
  color: #123a2c;
}

#blockcart-modal .product-total .value{
  font-weight: 900;
  color: #123a2c;
}

/* Botonera (se mantiene, solo un poco más de separación) */
#blockcart-modal .cart-content-btn {
	margin: 36px 0 6px;
	display: flex !important;
	gap: 10px;
	align-items: center;
	justify-content: center !important;
	flex-wrap: wrap;
}


/* Botones base */
#blockcart-modal .cart-content-btn .btn{
  height: 44px;
  border-radius: 999px;
  font-weight: 900;
  font-size: 13px;
  letter-spacing: .01em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  box-shadow: none;
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease, filter .12s ease;
}

/* Continuar comprando */
#blockcart-modal .cart-content-btn .btn.btn-secondary{
  background: #ffffff;
  border: 1px solid #d9e1d4;
  color: #2f3f2c;
}

#blockcart-modal .cart-content-btn .btn.btn-secondary:hover{
  background: #f3f7ef;
  border-color: #cfd8c9;
  box-shadow: 0 10px 18px rgba(40, 80, 40, .08);
}

/* Finalizar compra (amarillo marca) */
#blockcart-modal .cart-content-btn .btn.btn-primary{
  border: 0 !important;
  background: linear-gradient(180deg, #f3c316, #ffd666);
  color: #123a2c;
}

#blockcart-modal .cart-content-btn .btn.btn-primary:hover{
  filter: brightness(.98);
  box-shadow: 0 12px 22px rgba(15, 23, 42, .10);
}

/* Icono CTA */
#blockcart-modal .cart-content-btn .btn .material-icons{
  font-size: 18px;
  line-height: 1;
}

/* Quitar subrayado si es <a> */
#blockcart-modal .cart-content-btn a.btn{
  text-decoration: none !important;
}







/* =========================================
   MASCOTILLAS — CART (Carrito) simplificado
   - 1 sola “card” para el contenedor principal
   - Sin cards por producto: separador fino entre líneas
   - Sin bordes en imagen ni en botón eliminar
   - Descuento: mismo estilo que product page
   - TouchSpin: número visible + flechas centradas + no desaparecen al hover/focus
   ========================================= */
@media (min-width: 992px){
	#cart #content-wrapper {
		padding-top: 28px;
	}
}

/* Scope seguro a la página de carrito */
body#cart .cart-container{
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .08);
  margin-bottom: 44px;
}

body#cart .cart-container .card-block{
  padding: 18px 20px;
}

body#cart .cart-container h1.h1{
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: .01em;
  color: #0f172a;
}

body#cart .cart-container hr.separator{
  margin: 0;
  border: 0;
  height: 1px;
  background: rgba(15, 23, 42, .08);
}

/* Listado (sin “cards” por item) */
body#cart .cart-overview{
  padding: 8px 0;
}

body#cart .cart-items{
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Más padding arriba/abajo por línea */
body#cart .cart-item{
  margin: 0;
  padding: 22px 18px; /* + padding vertical */
  border: 0;
  border-radius: 0;
  background: transparent;
}

body#cart .cart-item + .cart-item{
  border-top: 1px solid rgba(15, 23, 42, .08);
}

/* Grid de cada línea */
body#cart .product-line-grid{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 0;
}

/* Imagen (sin borde) */
body#cart .product-line-grid-left{
  display: flex;
  align-items: center;
  justify-content: center;
}

body#cart .product-line-grid-left .product-image{
  display: block;
  width: 100%;
  max-width: 120px;
}

body#cart .product-line-grid-left img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  border: 0;
  background: transparent;
}

/* Info producto */
body#cart .product-line-grid-body{
  padding-top: 2px;
}

body#cart .product-line-info .label{
  display: inline-block;
  font-size: 14px;
  line-height: 1.25;
  color: #0f172a;
  text-decoration: none;
}

body#cart .product-line-info .label:hover{
  text-decoration: underline;
}

/* Precios y descuento */
body#cart .product-line-info.product-price{
  margin-top: 8px;
}

body#cart .product-line-info.product-price .product-discount{
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}

body#cart .product-line-info.product-price .regular-price{
  color: #94a3b8;
  text-decoration: line-through;
  font-weight: 700;
  font-size: 13px;
}

/* Descuento: aplicar el CSS que usas en product page */
body#cart .product-line-info.product-price .discount.discount-percentage{
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .01em;
  text-transform: uppercase;
  background: rgba(243,195,22,.22);
  border: 1px solid rgba(243,195,22,.45);
  color: #7a5200;
}

body#cart .product-line-info.product-price .current-price .price{
  font-weight: 900;
  font-size: 16px;
  color: #0f172a;
}

/* Zona derecha */
body#cart .product-line-grid-right{
  padding-top: 2px;
}

body#cart .product-line-grid-right .row{
  display: flex;
  align-items: center;
}

body#cart .product-line-grid-right .price .product-price strong{
  font-size: 16px;
  font-weight: 900;
  color: #0f172a;
}

/* Eliminar (sin borde/caja) */
body#cart .cart-line-product-actions{
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

body#cart a.remove-from-cart{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  transition: background .12s ease;
}

body#cart a.remove-from-cart:hover{
  background: rgba(15, 23, 42, .06);
}

body#cart a.remove-from-cart i.material-icons{
  font-size: 20px;
  color: #0f172a;
}

/* =========================================
   FIX Bootstrap TouchSpin (cantidad)
   Objetivos:
   - Número visible SIEMPRE
   - Flechas centradas, sin botones “anchos raros”
   - Flechas NO desaparecen al hover/focus
   ========================================= */

body#cart .product-line-actions .qty .bootstrap-touchspin{
  position: relative;
  display: inline-block;
  width: 112px;
  max-width: 100%;
  vertical-align: middle;
}

/* Input: forzamos visibilidad del número */
body#cart .product-line-actions .qty .bootstrap-touchspin > input.form-control{
  width: 100% !important;
  height: 42px;
  padding: 10px 38px 10px 12px; /* espacio realista para flechas */
  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, .14);
  background: #fff;
  box-shadow: none;

  /* Forzamos texto visible */
  color: #0f172a !important;
  font-size: 15px !important;
  line-height: 20px;
  opacity: 1 !important;
  -webkit-text-fill-color: #0f172a; /* Safari */
  text-align: center;
}

/* No spinners nativos */
body#cart .product-line-actions .qty input[type="number"]::-webkit-outer-spin-button,
body#cart .product-line-actions .qty input[type="number"]::-webkit-inner-spin-button{
  -webkit-appearance: none;
  margin: 0;
}
body#cart .product-line-actions .qty input[type="number"]{
  -moz-appearance: textfield;
  appearance: textfield;
}

/* Contenedor de flechas: SIEMPRE visible */
body#cart .product-line-actions .qty .bootstrap-touchspin .input-group-btn-vertical{
  position: absolute;
  top: 6px;
  right: 0;
  width: 28px;                 /* más estrecho */
  height: calc(100% - 12px);
  display: flex !important;    /* evita “desaparecen” */
  flex-direction: column;
  gap: 6px;
  z-index: 3;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Asegurar que al hover/focus no se oculta por reglas del theme */
body#cart .product-line-actions .qty .bootstrap-touchspin:hover .input-group-btn-vertical,
body#cart .product-line-actions .qty .bootstrap-touchspin:focus-within .input-group-btn-vertical{
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Botones de flechas: centrados, sin anchura excesiva */
body#cart .product-line-actions .qty .bootstrap-touchspin .btn-touchspin{
  flex: 1 1 0;
  width: 24px;
  min-width: 24px;
  padding: 0;
  border-radius: 9px;
  border: 1px solid rgba(15, 23, 42, .12);
  background: rgba(15, 23, 42, .03);
  box-shadow: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .10s ease, background .10s ease, border-color .10s ease;
}

body#cart .product-line-actions .qty .bootstrap-touchspin .btn-touchspin:hover{
  background: rgba(15, 23, 42, .06);
  border-color: rgba(15, 23, 42, .20);
  transform: translateY(-1px);
}

body#cart .product-line-actions .qty .bootstrap-touchspin .btn-touchspin:active{
  transform: translateY(0);
}

/* Importante: NO meter contenido extra */
body#cart .product-line-actions .qty .bootstrap-touchspin .btn-touchspin .touchspin-up:before,
body#cart .product-line-actions .qty .bootstrap-touchspin .btn-touchspin .touchspin-down:before{
  content: none !important;
}

/* Iconos Material dentro del botón: centrado perfecto */
body#cart .product-line-actions .qty .bootstrap-touchspin .btn-touchspin i.material-icons {
	display: inline-flex;
	align-items: center;
	width: 100%;
	height: 100%;
	color: #0f172a;
}

/* Si el theme mete padding/márgenes raros en esos botones, lo anulamos */
body#cart .product-line-actions .qty .bootstrap-touchspin .btn-touchspin,
body#cart .product-line-actions .qty .bootstrap-touchspin .btn-touchspin:focus{
  outline: none;
}

/* =========================================
   Responsive
   ========================================= */
@media (max-width: 767px){
  body#cart .cart-overview{
    padding: 6px 0;
  }

  body#cart .cart-item{
    padding: 20px 12px; /* + padding vertical en móvil */
  }

  body#cart .product-line-grid-left .product-image{
    max-width: 96px;
  }

  body#cart .product-line-actions .qty .bootstrap-touchspin{
    width: 104px;
  }

  body#cart .product-line-actions .qty .bootstrap-touchspin > input.form-control{
    padding-right: 36px;
  }

  body#cart .product-line-grid-right .row{
    align-items: flex-start;
  }

  body#cart .product-line-grid-right .price .product-price strong{
    display: inline-block;
    padding-top: 6px;
  }
}


#subcategories ul li .subcategory-name:hover, .block-categories .arrows .arrow-down:hover, .block-categories .arrows .arrow-right:hover, .block-categories .collapse-icons .add:hover, .block-categories .collapse-icons .remove:hover, .cart-grid-body a.label:hover {
	color: var(--tw-brand-700);
}






/* =========================================
   MASCOTILLAS — CART SUMMARY (columna derecha)
   HTML objetivo:
   .card.cart-summary
   .cart-detailed-totals
   .cart-detailed-subtotals / .cart-summary-totals
   .cart-summary-line (+ .cart-total)
   .checkout.cart-detailed-actions a.btn.btn-primary
   ========================================= */

body#cart .cart-summary{
  border: 1px solid rgba(15, 23, 42, .10);
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .08);
}

/* Padding consistente en los bloques internos */
body#cart .cart-summary .card-block{
  padding: 16px 18px;
}

/* Filas: label a la izquierda, value a la derecha */
body#cart .cart-summary .cart-summary-line{
  padding: 10px 0;
}

/* Separador fino entre líneas de subtotales */
body#cart .cart-summary .cart-detailed-subtotals .cart-summary-line + .cart-summary-line{
  border-top: 1px solid rgba(15, 23, 42, .08);
}

/* Texto */
body#cart .cart-summary .cart-summary-line .label{
  color: rgba(15, 23, 42, .78);
  font-weight: 800;
  font-size: 14px;
}

body#cart .cart-summary .cart-summary-line .value{
  color: #0f172a;
  font-weight: 900;
  font-size: 14px;
  white-space: nowrap;
}

/* Bloque de total */
body#cart .cart-summary .cart-summary-totals{
  border-top: 1px solid rgba(15, 23, 42, .10);
}

body#cart .cart-summary .cart-summary-line.cart-total{
  padding: 14px 0;
}

body#cart .cart-summary .cart-summary-line.cart-total .label{
  color: #0f172a;
  font-weight: 900;
}

body#cart .cart-summary .cart-summary-line.cart-total .value{
  font-size: 18px;
  font-weight: 900;
}




body#cart .cart-summary .cart-detailed-actions{
  border-top: 1px solid rgba(15, 23, 42, .10);
}

body#cart .cart-summary .cart-detailed-actions .text-sm-center{
  width: 100%;
}








.card-block.cart-detailed-subtotals + .cart-summary-totals .cart-total {
	border-top: 0;
}
/* Responsive */
@media (max-width: 767px){
  body#cart .cart-summary .card-block{
    padding: 14px 14px;
  }

  body#cart .cart-summary .cart-summary-line.cart-total .value{
    font-size: 17px;
  }
}




/* ---------- Reassurance block (no shadow, clean list) — CART ---------- */
.blockreassurance_product{
  margin-top: 26px;
  background: #ffffff;
  border: 1px solid #e6eaf0;
  border-radius: 16px;
  box-shadow: none;
  padding: 8px 12px;
}

.blockreassurance_product .clearfix{
  display: none !important;
}

.blockreassurance_product > div{
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 12px;
  align-items: center;
  padding: 14px 6px;
  border-radius: 0;
}

/* Borde a todos menos al primero */
.blockreassurance_product > div + div{
  border-top: 1px solid #eef2f7;
}

.blockreassurance_product > div:last-child{
  border-top: 0;
}

.blockreassurance_product .item-product{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: #f4f8f6;
  border: 1px solid #e2efe8;
}

/* Neutralizamos el &nbsp; que viene dentro del span */
.blockreassurance_product .item-product{
  font-size: 0;
  line-height: 0;
}

/* SVG dentro del badge */
.blockreassurance_product .item-product svg{
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  display: block;
}

/* Título */
.blockreassurance_product p.block-title{
  margin: 0 !important;
  font-size: 14px;
  line-height: 1.25;
  font-weight: 800;
  color: #0f172a !important;
}

/* Responsive */
@media (max-width: 767px){
  .blockreassurance_product{
    margin-top: 18px;
    padding: 8px 10px;
  }
	.blockreassurance_product > div{
    padding: 12px 4px;
    gap: 10px;
  }
}



@media (max-width: 992px){
	body#cart .cart-summary {
		margin: 33px 0 55px;
	}
	body#cart .product-line-grid-right {
		padding-left: 0;
	}
	body#checkout section.checkout-step .step-title {
		padding-bottom: 1.35rem;
		font-size: 1.2rem;
		font-weight: 600;
	}
}


/* =========================================
   MASCOTILLAS — CART (MÓVIL ≤ 767px)
   FIX layout línea derecha: qty + precio + borrar
   - Evita solapes (precio / papelera)
   - TouchSpin estable: número visible y flechas bien pegadas
   HTML objetivo:
   .product-line-grid-right.product-line-actions ...
   ========================================= */

@media (max-width: 1240px){

  /* Quita el “hueco” fantasma que rompe el layout */
  body#cart .product-line-grid-right .row > .col-xs-4.hidden-md-up{
    display: none !important;
  }

  /* Primera fila derecha: convertir en flex real (Bootstrap 3/4 a veces hace cosas raras) */
  body#cart .product-line-grid-right.product-line-actions > .row{
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap;
  }

  /* Bloque qty+precio (col-md-10 col-xs-6) ocupa todo el espacio disponible */
  body#cart .product-line-grid-right.product-line-actions > .row > .col-md-10.col-xs-6{
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
	padding-left: 0;
  }

  /* Columna borrar (col-md-2 col-xs-2) fija y sin empujar el precio */
  body#cart .product-line-grid-right.product-line-actions > .row > .col-md-2.col-xs-2{
    flex: 0 0 40px !important;
    width: 40px !important;
    max-width: 40px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  /* Fila interna: qty y precio en una línea, sin romper */
  body#cart .product-line-grid-right.product-line-actions > .row > .col-md-10.col-xs-6 > .row{
    display: flex !important;
    align-items: center;
    flex-wrap: nowrap;
    gap: 12px;
  }

  /* QTY: ancho fijo para que el input no colapse */
  body#cart .product-line-grid-right .qty.col-md-6.col-xs-6{
    flex: 0 0 100px !important;
    padding-right: 0 !important;
  }

  /* PRECIO: ocupa el resto, alineado a la derecha */
  body#cart .product-line-grid-right .price.col-md-6.col-xs-2{
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
    text-align: right !important;
    padding-left: 0 !important;
  }

  body#cart .product-line-grid-right .price .product-price{
    display: inline-block;
    white-space: nowrap;
  }

  /* Papelera: evitar floats que invaden */
  body#cart .product-line-grid-right .cart-line-product-actions,
  body#cart .product-line-grid-right .cart-line-product-actions a,
  body#cart .product-line-grid-right .cart-line-product-actions i{
    float: none !important;
  }

  /* =========================================
     TouchSpin: estabilidad visual en móvil
     ========================================= */

  body#cart .product-line-grid-right .qty .bootstrap-touchspin{
    position: relative;
    width: 75px !important;
    max-width: 75px !important;
  }

  /* Input: más espacio a la derecha para que NO tape el número */
  body#cart .product-line-grid-right .qty .bootstrap-touchspin > input.form-control{
    height: 42px;
    padding: 10px 44px 10px 12px !important; /* + espacio flechas */
    border-radius: 12px;
    text-align: center;
    font-weight: 900;
    font-size: 15px !important;
    line-height: 20px;
    color: #0f172a !important;
    opacity: 1 !important;
    -webkit-text-fill-color: #0f172a;
  }

  /* Flechas: pegadas a la derecha, sin “botón ancho” y centradas */
  body#cart .product-line-grid-right .qty .bootstrap-touchspin .input-group-btn-vertical{
    position: absolute;
    top: 6px;
    right: 6px;
    width: 30px !important;
    height: calc(100% - 12px) !important;
    display: flex !important;
    flex-direction: column;
    gap: 6px;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 5;
  }

  /* No permitir que desaparezcan al hover/focus */
  body#cart .product-line-grid-right .qty .bootstrap-touchspin:hover .input-group-btn-vertical,
  body#cart .product-line-grid-right .qty .bootstrap-touchspin:focus-within .input-group-btn-vertical{
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body#cart .product-line-grid-right .qty .bootstrap-touchspin .btn-touchspin{
    width: 30px !important;
    min-width: 30px !important;
    padding: 0 !important;
    border-radius: 9px;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  body#cart .product-line-grid-right .qty .bootstrap-touchspin .btn-touchspin i.material-icons{
    margin: 0 !important;
    width: 100%;
    height: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}


body#checkout section.checkout-step.-reachable.-current .step-number {
	background-color: var(--tw-brand-700);
}

body#checkout #_desktop_logo img.logo {
	top: 23px;
}



/* =========================================
   CARD STYLE — Checkout + CMS
   Capas afectadas:
   - body#checkout .cart-grid-body
   - body#checkout .cart-grid-right .card
   - #cms #content
   ========================================= */

body#checkout .cart-grid-body,
body#checkout .cart-grid-right .card,
#cms #content{
  background: #ffffff;
  border: 1px solid #e6eaf0;
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .08);
  padding: 24px 25px 40px;
  transition: box-shadow .2s ease, transform .12s ease;
}

/* Hover sutil (solo en checkout, CMS no suele ser interactivo) */
body#checkout .cart-grid-body:hover,
body#checkout .cart-grid-right .card:hover{
  box-shadow: 0 18px 40px rgba(15, 23, 42, .12);
}

/* Responsive */
@media (max-width: 767px){
  body#checkout .cart-grid-body,
  body#checkout .cart-grid-right .card,
  #cms #content{
    padding: 16px 16px;
    border-radius: 14px;
  }
}



#cms h3 {
	margin: 34px 0 15px;
}

.header-top { z-index: auto !important; }  /* revertir el cambio anterior */
.header-nav { z-index: 2 !important; }      /* nuevo: sube el contenedor del popup */

.ets_solo_slide_widget {
	background: #758942 none repeat scroll 0 0;
}
.ets_solo_social_wrapper.slw_and_alw .forgot-password, #header .ets_solo_social_wrapper.slw_and_alw .forgot-password a, .ets_solo_social_wrapper.slw_and_alw .no-account, #header .ets_solo_social_wrapper.slw_and_alw .no-account a {
	color: #758942;
}