/* =====================================================
CATÁLOGO ITSHOP
===================================================== */

/* =====================================================
CATÁLOGO A ANCHO COMPLETO
===================================================== */

.entry-content .itshop-catalog {
	position: relative;

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

	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;

	padding: 64px 0;

	background: #f7f9fc;

	overflow-x: clip;
}

.itshop-catalog__container {
	width: calc(100% - 48px);
	max-width: 1280px !important;

	margin-right: auto;
	margin-left: auto;
}


/* =====================================================
HEADER
===================================================== */

.itshop-catalog__header{

    margin-bottom:48px;

}

.itshop-catalog__eyebrow{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:8px 18px;

    border-radius:999px;

    background:rgba(0,208,255,.10);

    color:#214c8e;

    font-size:.85rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.08em;

}

.itshop-catalog__title{

    margin:18px 0 16px;

    color:#2A2757;

    font-size:clamp(2rem,4vw,3.3rem);

    font-weight:800;

    line-height:1.1;

}

.itshop-catalog__description{

    max-width:760px;

    color:#6B7280;

    font-size:1.05rem;

    line-height:1.8;

}


/* =====================================================
LAYOUT
===================================================== */

.itshop-catalog__layout{

    display:grid;

    grid-template-columns:290px 1fr;

    gap:36px;

    align-items:start;

}




/* =====================================================
PANEL DE FILTROS
===================================================== */

.itshop-catalog__filters {
	position: sticky;
	top: 24px;

	padding: 24px;

	background: #ffffff;

	border: 1px solid rgba(33, 76, 142, 0.12);
	border-radius: 18px;

	box-shadow:
		0 12px 30px rgba(24, 50, 100, 0.08);
}

.itshop-catalog-filter + .itshop-catalog-filter {
	margin-top: 28px;
	padding-top: 28px;

	border-top: 1px solid #e5eaf2;
}

.itshop-catalog-filter__title {
	margin: 0 0 16px;

	color: #2a2757;

	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.3;
}

.itshop-catalog-filter__options {
	display: flex;
	flex-direction: column;

	gap: 12px;
}

.itshop-catalog-filter__option {
	display: flex;
	align-items: center;

	gap: 10px;

	margin: 0;

	color: #5f6673;

	font-size: 0.95rem;
	line-height: 1.35;

	cursor: pointer;
}

.itshop-catalog-filter__option input {
	width: 18px;
	height: 18px;
	margin: 0;

	accent-color: #214c8e;

	cursor: pointer;
}

.itshop-catalog-filter__option span {
	flex: 1;
}

.itshop-catalog-filter__option:hover span {
	color: #214c8e;
}


/* =====================================================
FILTRO DE PRECIO
===================================================== */

.itshop-catalog-filter__price {
	display: grid;
	grid-template-columns: 1fr 1fr;

	gap: 12px;
}

.itshop-catalog-filter__price label {
	display: flex;
	flex-direction: column;

	gap: 7px;

	margin: 0;
}

.itshop-catalog-filter__price span {
	color: #69717e;

	font-size: 0.82rem;
	font-weight: 600;
}

.itshop-catalog-filter__price input {
	width: 100%;
	height: 44px;

	padding: 0 12px;

	color: #2a2757;

	background: #ffffff;

	border: 1px solid rgba(33, 76, 142, 0.18);
	border-radius: 10px;

	font-size: 0.95rem;

	outline: none;

	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease;
}

.itshop-catalog-filter__price input:focus {
	border-color: #214c8e;

	box-shadow:
		0 0 0 3px rgba(33, 76, 142, 0.10);
}


/* =====================================================
BOTÓN LIMPIAR FILTROS
===================================================== */

.itshop-catalog-filter__clear {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	min-height: 44px;

	margin-top: 28px;
	padding: 10px 16px;

	color: #214c8e !important;

	background: transparent !important;

	border: 1px solid #214c8e !important;
	border-radius: 10px !important;

	font-size: 0.95rem;
	font-weight: 700;
	text-align: center;

	cursor: pointer;

	transition:
		color 0.2s ease,
		background-color 0.2s ease,
		transform 0.2s ease;
}

.itshop-catalog-filter__clear:hover,
.itshop-catalog-filter__clear:focus {
	color: #ffffff !important;

	background: #214c8e !important;

	transform: translateY(-1px);
}





/* =====================================================
RESULTADOS
===================================================== */

.itshop-catalog__results{

	min-width:0;

}

.itshop-catalog__grid{

	display:grid;

	grid-template-columns:
		repeat(4,minmax(0,1fr));

	gap:24px;

	align-items:stretch;

}

.itshop-catalog__product{

	display:flex;

}


/* =====================================================
MENSAJE SIN RESULTADOS
===================================================== */

.itshop-catalog__empty{

	display:flex;

	align-items:center;

	justify-content:center;

	min-height:260px;

	padding:40px;

	border:2px dashed
		rgba(33,76,142,.18);

	border-radius:18px;

	background:#ffffff;

	color:#6b7280;

	font-size:1.05rem;

	text-align:center;

}



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

@media (max-width:1100px){

	.itshop-catalog__layout{

		grid-template-columns:
			250px 1fr;

		gap:28px;

	}

	.itshop-catalog__grid{

		grid-template-columns:
			repeat(3,minmax(0,1fr));

	}

}

@media (max-width:900px){

	.itshop-catalog{

		padding:48px 0;

	}

	.itshop-catalog__layout{

		grid-template-columns:1fr;

	}

	.itshop-catalog__filters{

		position:relative;

		top:auto;

	}

	.itshop-catalog__grid{

		grid-template-columns:
			repeat(2,minmax(0,1fr));

	}

}



html,
body {
	overflow-x: hidden;
}




/* =====================================================
BOTÓN FILTRAR
===================================================== */

.itshop-catalog__filter-toggle{
	display:none;
}


/* =====================================================
OCULTAR PRODUCTOS / MENSAJE POR FILTRADO
===================================================== */

.itshop-catalog__product[hidden]{
	display:none !important;
}

.itshop-catalog__empty[hidden]{
	display:none !important;
}


/* =====================================================
MÓVIL
===================================================== */

@media (max-width:560px){

	/* =================================================
	CONTENEDOR
	================================================= */

	.entry-content .itshop-catalog{
		padding:32px 0 48px;
	}

	.itshop-catalog__container{
		width:calc(100% - 24px);

		max-width:none !important;
	}


	/* =================================================
	HEADER DEL CATÁLOGO
	================================================= */

	.itshop-catalog__header{
		margin-bottom:24px;
	}

	.itshop-catalog__eyebrow{
		padding:6px 12px;

		font-size:11px;
	}

	.itshop-catalog__title{
		margin:12px 0 10px;

		font-size:30px;
		line-height:1.08;
	}

	.itshop-catalog__description{
		font-size:14px;
		line-height:1.5;
	}


	/* =================================================
	LAYOUT
	================================================= */

	.itshop-catalog__layout{
		display:block;

		width:100%;
	}


	/* =================================================
	BOTÓN FILTRAR
	================================================= */

	.entry-content
	.itshop-catalog
	button.itshop-catalog__filter-toggle,

	.entry-content
	.itshop-catalog
	button.itshop-catalog__filter-toggle:focus,

	.entry-content
	.itshop-catalog
	button.itshop-catalog__filter-toggle:focus-visible,

	.entry-content
	.itshop-catalog
	button.itshop-catalog__filter-toggle:active{

		display:flex !important;

		align-items:center;
		justify-content:space-between;

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

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

		color:#214c8e !important;

		background-color:#ffffff !important;
		background-image:none !important;

		border:
			1px solid rgba(33,76,142,.18) !important;

		border-radius:12px !important;

		outline:none !important;

		box-shadow:
			0 4px 14px rgba(24,50,100,.06) !important;

		font-family:"Titillium Web",sans-serif !important;

		font-size:14px !important;
		font-weight:700 !important;
		line-height:1 !important;

		text-transform:none !important;

		cursor:pointer;

		appearance:none;
		-webkit-appearance:none;

		-webkit-tap-highlight-color:transparent;

		transition:
			background-color .22s ease,
			color .22s ease,
			border-color .22s ease,
			box-shadow .22s ease;
	}


	/* Hover */

	.entry-content
	.itshop-catalog
	button.itshop-catalog__filter-toggle:hover{

		color:#214c8e !important;

		background-color:#f5f8fc !important;
		background-image:none !important;

		border-color:#214c8e !important;

		box-shadow:
			0 5px 16px rgba(33,76,142,.10) !important;
	}


	/* Filtro abierto */

	.entry-content
	.itshop-catalog
	button.itshop-catalog__filter-toggle[
		aria-expanded="true"
	],

	.entry-content
	.itshop-catalog
	button.itshop-catalog__filter-toggle[
		aria-expanded="true"
	]:focus,

	.entry-content
	.itshop-catalog
	button.itshop-catalog__filter-toggle[
		aria-expanded="true"
	]:active{

		color:#ffffff !important;

		background-color:#214c8e !important;

		background-image:
			linear-gradient(
				90deg,
				#214c8e 0%,
				#2b6cb0 65%,
				#2584c7 100%
			) !important;

		border-color:#214c8e !important;

		box-shadow:
			0 6px 18px rgba(33,76,142,.16) !important;
	}


	/* Icono + */

	.itshop-catalog__filter-toggle-icon{
		display:flex;

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

		width:24px;
		height:24px;

		color:inherit;

		font-size:20px;
		font-weight:400;
		line-height:1;

		transition:
			transform .25s ease;
	}


	/* + se convierte visualmente en X */

	.itshop-catalog__filter-toggle[
		aria-expanded="true"
	]
	.itshop-catalog__filter-toggle-icon{

		transform:rotate(45deg);
	}


	/* =================================================
	PANEL DE FILTROS
	================================================= */

	.itshop-catalog__filters{
		display:none;

		position:relative;

		top:auto;

		width:100%;

		margin:0 0 20px;
		padding:20px;

		background:#ffffff;

		border:
			1px solid rgba(33,76,142,.12);

		border-radius:14px;

		box-shadow:
			0 8px 22px rgba(24,50,100,.06);
	}


	.itshop-catalog__filters.is-open{
		display:block;
	}


	/* =================================================
	FILTRO PRECIO
	================================================= */

	.itshop-catalog-filter__price{
		grid-template-columns:
			repeat(2,minmax(0,1fr));

		gap:8px;
	}


	.itshop-catalog-filter__price input{
		height:40px;

		padding:0 8px;

		font-size:12px;
	}


	/* =================================================
	GRID PRODUCTOS
	2 PRODUCTOS POR FILA
	================================================= */

	.itshop-catalog__results{
		width:100%;

		min-width:0;
	}

	.itshop-catalog__grid{
		display:grid !important;

		grid-template-columns:
			repeat(2,minmax(0,1fr)) !important;

		gap:12px !important;

		width:100% !important;
	}


	.itshop-catalog__product{
		display:flex !important;

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

		margin:0 !important;
		padding:0 !important;
		align-items:flex-start !important;
	height:auto !important;
	}

/* =====================================================
CARD MÓVIL — SISTEMA 8PT
===================================================== */
.itshop-catalog__product
.itshop-product-card{

	display:flex !important;
	flex-direction:column !important;

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

	/* IMPORTANTE */
	height:auto !important;
	min-height:0 !important;

	margin:0 !important;

	padding:16px !important;

	align-self:flex-start !important;

	border-radius:16px !important;

	box-sizing:border-box !important;
}
/* =====================================================
IMAGEN
128px = 16 × 8
===================================================== */

.itshop-catalog__product
.itshop-product-image{

	display:flex !important;

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

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

height:144px !important;

	/* separación inferior = 16px */
	margin:0 0 16px !important;

	padding:0 !important;

	aspect-ratio:auto !important;

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


.itshop-catalog__product
.itshop-product-image img{

	display:block;

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

	max-width:100% !important;
max-height:144px !important;

	margin:0 auto !important;

	object-fit:contain;
}


/* =====================================================
CONTENIDO
===================================================== */

.itshop-catalog__product
.itshop-product-content{

	display:flex !important;
	flex-direction:column !important;

	flex:1 1 auto;

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

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

	text-align:left !important;

	box-sizing:border-box;
}


/* =====================================================
TÍTULO
16px
===================================================== */

.itshop-catalog__product
.itshop-product-title{

	display:-webkit-box !important;

	width:100%;

	min-height:40px;

	/* 8px entre título y descripción */
	margin:0 0 8px !important;

	overflow:hidden;

	color:#2a2757;

	font-size:16px !important;
	font-weight:700 !important;
	line-height:1.25 !important;

	text-align:left !important;

	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
}


/* =====================================================
DESCRIPCIÓN
12px — ajuste óptico dentro del sistema
===================================================== */

.itshop-catalog__product
.itshop-product-description{

	display:-webkit-box !important;

	width:100%;

	min-height:32px;

	/* 16px antes del precio */
	margin:0 0 8px !important;

	overflow:hidden;

	color:#6b7280;

	font-size:12px !important;
	font-weight:400;
	line-height:1.35 !important;

	text-align:left !important;

	-webkit-box-orient:vertical;
	-webkit-line-clamp:2;
}


/* =====================================================
PRECIO
16px
===================================================== */
.itshop-catalog__product
.itshop-product-price{

	display:block;

	width:100%;

	margin-top:0 !important;
	margin-bottom:16px !important;

	color:#214c8e;

	font-size:16px !important;
	font-weight:700 !important;
	line-height:1.2 !important;

	text-align:left !important;

	white-space:normal !important;

	word-break:normal !important;
	overflow-wrap:normal !important;
}


/* =====================================================
BOTÓN
40px = 5 × 8
===================================================== */

.itshop-catalog__product
.itshop-product-button{

	display:flex !important;

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

	width:100% !important;

	min-height:40px;

	margin:0 !important;

	padding:8px !important;

	border-radius:8px !important;

	font-size:12px !important;
	font-weight:700 !important;
	line-height:1.2 !important;

	text-align:center;

	white-space:normal;
}

	/* =================================================
	SEGURIDAD CONTRA DESBORDES
	================================================= */

	.itshop-catalog__product *,
	.itshop-catalog__product *::before,
	.itshop-catalog__product *::after{

		box-sizing:border-box;

		min-width:0;
	}

}
/* =====================================================
BUSCADOR DEL CATÁLOGO
===================================================== */

.itshop-catalog-search {
  position: relative;

  width: 100%;
  max-width: none;

  margin:
    0
    0
    18px;

  box-sizing: border-box;
}


/* =====================================================
CAMPO
===================================================== */

.itshop-catalog-search__field {
  position: relative;

  width: 100%;

  display: flex;
  align-items: center;

  background:
    #ffffff;

  border:
    1px solid rgba(33, 76, 142, 0.18);

  border-radius:
    12px;

  box-sizing:
    border-box;

  box-shadow:
    0 5px 16px rgba(33, 76, 142, 0.04);

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}


/* =====================================================
FOCUS
===================================================== */

.itshop-catalog-search__field:focus-within {
  border-color:
    #214c8e;

  box-shadow:
    0 0 0 3px rgba(33, 76, 142, 0.08);
}


/* =====================================================
ICONO
===================================================== */

.itshop-catalog-search__field > i {
  width:
    48px;

  display:
    grid;

  place-items:
    center;

  flex:
    0 0
    48px;

  color:
    #214c8e;

  font-size:
    16px;

  line-height:
    1;
}


/* =====================================================
INPUT
===================================================== */

.itshop-catalog-search__input {
  width:
    100%;

  height:
    48px;

  margin:
    0 !important;

  padding:
    0
    44px
    0
    0 !important;

  border:
    0 !important;

  outline:
    0 !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

  color:
    #2a2757;

  font-family:
    "Titillium Web",
    sans-serif;

  font-size:
    15px;

  font-weight:
    400;

  line-height:
    1;

  box-sizing:
    border-box;
}


/* Placeholder */

.itshop-catalog-search__input::placeholder {
  color:
    #9aa3b2;

  opacity:
    1;
}


/* Quitar decoraciones nativas del input search */

.itshop-catalog-search__input::-webkit-search-cancel-button,
.itshop-catalog-search__input::-webkit-search-decoration {
  -webkit-appearance:
    none;

  appearance:
    none;
}


/* =====================================================
BOTÓN LIMPIAR
===================================================== */

.itshop-catalog-search__clear {
  position:
    absolute;

  top:
    50%;

  right:
    10px;

  width:
    32px;

  height:
    32px;

  display:
    grid;

  place-items:
    center;

  margin:
    0;

  padding:
    0;

  border:
    0;

  border-radius:
    8px;

  background:
    transparent;

  color:
    #697386;

  cursor:
    pointer;

  transform:
    translateY(-50%);

  transition:
    color 0.2s ease,
    background-color 0.2s ease;
}


/* Evitar estilos externos del botón */

.itshop-catalog-search__clear,
.itshop-catalog-search__clear:hover,
.itshop-catalog-search__clear:focus,
.itshop-catalog-search__clear:active {
  min-width:
    0;

  box-shadow:
    none;

  outline:
    none;
}


.itshop-catalog-search__clear:hover,
.itshop-catalog-search__clear:focus-visible {
  color:
    #214c8e;

  background:
    rgba(33, 76, 142, 0.07);
}


/* =====================================================
RESULTADOS
===================================================== */

.itshop-catalog-search__results {
  position:
    absolute;

  z-index:
    50;

  top:
    calc(100% + 8px);

  left:
    0;

  width:
    100%;

  max-height:
    340px;

  overflow-y:
    auto;

  overflow-x:
    hidden;

  background:
    #ffffff;

  border:
    1px solid rgba(33, 76, 142, 0.16);

  border-radius:
    12px;

  box-shadow:
    0 14px 34px rgba(33, 76, 142, 0.14);

  box-sizing:
    border-box;
}


/* Respetar atributo hidden */

.itshop-catalog-search__results[hidden] {
  display:
    none !important;
}


/* =====================================================
MÓVIL
===================================================== */

@media (max-width: 767px) {

  .itshop-catalog-search {
    width:
      100%;

    max-width:
      100%;

    margin:
      0
      0
      16px;
  }


  .itshop-catalog-search__input {
    height:
      46px;

    font-size:
      14px;
  }


  .itshop-catalog-search__field > i {
    width:
      44px;

    flex-basis:
      44px;

    font-size:
      15px;
  }


  .itshop-catalog-search__clear {
    right:
      8px;

    width:
      30px;

    height:
      30px;
  }


  .itshop-catalog-search__results {
    max-height:
      300px;
  }

}


/* =====================================================
RESULTADO INDIVIDUAL DEL BUSCADOR
===================================================== */

.itshop-catalog-search-result {
  display: flex;
  align-items: center;

  gap: 14px;

  width: 100%;

  padding:
    12px
    14px;

  color:
    inherit;

  background:
    #ffffff;

  border-bottom:
    1px solid rgba(33, 76, 142, 0.10);

  text-decoration:
    none !important;

  box-sizing:
    border-box;

  transition:
    background-color 0.2s ease;
}


.itshop-catalog-search-result:last-child {
  border-bottom:
    0;
}


.itshop-catalog-search-result:hover {
  background:
    #f7f9fc;
}


/* =====================================================
IMAGEN DEL RESULTADO
===================================================== */

.itshop-catalog-search-result__image {
  width:
    64px;

  height:
    64px;

  flex:
    0 0
    64px;

  display:
    block;

  object-fit:
    contain;

  object-position:
    center;

  padding:
    4px;

  background:
    #ffffff;

  border-radius:
    8px;

  box-sizing:
    border-box;
}


/* Placeholder si no hay imagen */

.itshop-catalog-search-result__image--placeholder {
  display:
    grid;

  place-items:
    center;

  color:
    #214c8e;

  background:
    #f2f6fb;

  font-size:
    18px;
}


/* =====================================================
CONTENIDO
===================================================== */

.itshop-catalog-search-result__content {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;

  flex:
    1 1
    auto;
}


/* Título */

.itshop-catalog-search-result__title {
  display:
    block;

  color:
    #214c8e;

  font-size:
    15px;

  font-weight:
    700;

  line-height:
    1.25;
}


/* Categoría */

.itshop-catalog-search-result__category {
  display:
    block;

  color:
    #7b8492;

  font-size:
    12px;

  font-weight:
    400;

  line-height:
    1.3;
}


/* =====================================================
FLECHA
===================================================== */

.itshop-catalog-search-result__arrow {
  width:
    28px;

  height:
    28px;

  display:
    grid;

  place-items:
    center;

  flex:
    0 0
    28px;

  color:
    #214c8e;

  border-radius:
    50%;

  font-size:
    12px;

  transition:
    transform 0.2s ease,
    background-color 0.2s ease;
}


.itshop-catalog-search-result:hover
.itshop-catalog-search-result__arrow {
  transform:
    translateX(2px);

  background:
    rgba(33, 76, 142, 0.07);
}


/* =====================================================
SIN RESULTADOS
===================================================== */

.itshop-catalog-search-result--empty {
  padding:
    18px;

  color:
    #6b7280;

  font-size:
    14px;

  text-align:
    center;
}


/* =====================================================
MÓVIL
===================================================== */

@media (max-width: 767px) {

  .itshop-catalog-search-result {
    gap:
      10px;

    padding:
      10px
      12px;
  }


  .itshop-catalog-search-result__image {
    width:
      52px;

    height:
      52px;

    flex-basis:
      52px;
  }


  .itshop-catalog-search-result__title {
    font-size:
      14px;
  }


  .itshop-catalog-search-result__category {
    font-size:
      11px;
  }

}