/* =========================================================================
   POSITIVE DEMO - ADAPTACION DE LA MAQUETA
   Aplica la estetica de site.css a los templates propios de este sitio:
   tarjeta de producto mayorista, arbol de filtros generado por el
   importador, detalle de producto, checkout, confirmacion y buscador
   predictivo.
   Se carga siempre despues de theme.css y site.css.
   No interviene ninguna clase del panel de vendedores.
   ========================================================================= */

/* ── Contenedores heredados ───────────────────────────────────────────── */
.page_margins_big { width: 100%; margin-inline: auto; }
.body_margins { padding-block: 0; }

/* ── Breadcrumbs ──────────────────────────────────────────────────────── */
.breadcrumbs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.45rem;
	color: var(--muted);
	font-size: 0.8rem;
	font-weight: 600;
}
.breadcrumbs a { color: var(--muted); transition: color var(--transition); }
.breadcrumbs a:hover, .breadcrumbs a:focus-visible { color: var(--brand-deep); }
.breadcrumbs span:last-child { color: var(--text); }

/* ── Chips de categorias del home (menu_home_categories) ──────────────── */
.swiper-categories { overflow: hidden; }
.swiper-categories .swiper-slide { width: auto; height: auto; }
.item_cat_menu_home {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 3.1rem;
	padding: 0.7rem 1.35rem;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--panel);
	box-shadow: var(--shadow-sm);
	color: var(--text);
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background var(--transition), color var(--transition),
	            border-color var(--transition), transform var(--transition);
}
.swiper-categories a:hover .item_cat_menu_home,
.swiper-categories a:focus-visible .item_cat_menu_home {
	background: var(--brand);
	border-color: var(--brand);
	color: #fff;
	transform: translateY(-2px);
}

/* ── Tarjeta de producto ──────────────────────────────────────────────── */
.card_wrap {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 0.85rem;
	border-radius: var(--radius-md);
	border: 1px solid var(--line);
	background: var(--panel);
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--transition), transform var(--transition),
	            border-color var(--transition);
}
.card_wrap:hover {
	border-color: rgba(18,172,231,0.35);
	box-shadow: 0 16px 36px rgba(10,42,61,0.12);
	transform: translateY(-3px);
}
.card_wrap .card {
	position: relative;
	border-radius: calc(var(--radius-md) - 0.35rem);
	overflow: hidden;
	background: var(--light-color-shade);
}
.card_wrap .card .img,
.card_wrap .card .link_img { display: block; }
.card_wrap .card img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform 500ms ease;
}
.card_wrap:hover .card img { transform: scale(1.05); }

/* Badge de descuento / oferta */
.card_wrap .descount {
	position: absolute;
	top: 0.55rem;
	left: 0.55rem;
	z-index: 2;
	display: flex;
	gap: 0.3rem;
}
.card_wrap .descount .number,
.card_wrap .descount .oferta {
	display: inline-flex;
	align-items: center;
	min-height: 1.6rem;
	padding: 0 0.6rem;
	border-radius: 999px;
	background: var(--brand);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	box-shadow: 0 6px 14px rgba(18,172,231,0.3);
}
.card_wrap .descount .oferta { background: var(--secondary-color); }

/* Boton de favorito */
.card_wrap .fav_button {
	position: absolute;
	top: 0.55rem;
	right: 0.55rem;
	z-index: 2;
	display: inline-grid;
	place-items: center;
	width: 2.1rem;
	height: 2.1rem;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: rgba(255,255,255,0.92);
	color: var(--muted);
	cursor: pointer;
	transition: background var(--transition), color var(--transition),
	            border-color var(--transition), transform var(--transition);
}
.card_wrap .fav_button svg { width: 1rem; height: 1rem; fill: currentColor; }
.card_wrap .fav_button:hover { transform: scale(1.08); color: var(--brand-deep); }
.card_wrap .fav_button.fill { background: var(--brand); border-color: var(--brand); color: #fff; }

/* Texto */
.card_wrap .card_name { margin-top: 0.75rem; min-height: 2.6rem; }
.card_wrap .card_name a,
.card_wrap .card_name div {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--text);
	font-size: 0.88rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: -0.01em;
}
.card_wrap .card_name a:hover { color: var(--brand-deep); }
.card_wrap .code {
	margin-top: 0.3rem;
	color: var(--muted);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

/* Precios */
.card_wrap .price_wrap {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.5rem;
}
.card_wrap .price_wrap .price {
	color: var(--text);
	font-size: 1.2rem;
	font-weight: 800;
	letter-spacing: -0.03em;
}
.card_wrap .price_wrap .old_price {
	color: var(--muted);
	font-size: 0.85rem;
	font-weight: 500;
	text-decoration: line-through;
}

/* Escalera de ofertas por cantidad */
.card_wrap .offers_list { display: grid; gap: 0.25rem; margin-top: 0.5rem; }
.card_wrap .offers_list > div {
	padding: 0.3rem 0.55rem;
	border-radius: 0.6rem;
	background: var(--brand-soft);
	color: var(--brand-strong);
	font-size: 0.76rem;
	font-weight: 700;
	cursor: pointer;
	transition: background var(--transition);
}
.card_wrap .offers_list > div:hover { background: rgba(18,172,231,0.22); }

/* Bloque de compra */
.card_wrap .buy_content {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-top: auto;
	padding-top: 0.85rem;
}
.card_wrap .wrp_input_card {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--light-color-shade);
	overflow: hidden;
}
.card_wrap .input_card input {
	width: 3.1rem;
	height: 2.4rem;
	border: 0;
	background: transparent;
	color: var(--text);
	font: inherit;
	font-weight: 700;
	font-size: 0.85rem;
	text-align: center;
	outline: none;
	-moz-appearance: textfield;
}
.card_wrap .input_card input::-webkit-outer-spin-button,
.card_wrap .input_card input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.card_wrap .content_contol_quantity { display: flex; flex-direction: column; padding-right: 0.35rem; }
.card_wrap .right_btn_input,
.card_wrap .left_btn_input {
	display: grid;
	place-items: center;
	width: 1.1rem;
	height: 1.2rem;
	cursor: pointer;
	color: var(--muted);
}
.card_wrap .right_btn_input:hover,
.card_wrap .left_btn_input:hover { color: var(--brand-deep); }
.card_wrap .right_btn_input svg,
.card_wrap .left_btn_input svg { width: 0.6rem; height: 0.6rem; fill: currentColor; }
.card_wrap .button_card {
	flex: 1 1 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.5rem;
	padding: 0 0.9rem;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--main-color-lighter), var(--brand), var(--brand-deep));
	color: #fff;
	font-size: 0.82rem;
	font-weight: 800;
	letter-spacing: 0.01em;
	white-space: nowrap;
	cursor: pointer;
	box-shadow: 0 10px 22px rgba(18,172,231,0.28);
	transition: transform var(--transition), box-shadow var(--transition);
}
.card_wrap .button_card:hover { transform: translateY(-1px); }

/* ── Grilla del listado ───────────────────────────────────────────────── */
.list, .main_list { width: 100%; min-width: 0; }
.products { min-width: 0; }
.list_flex {
	display: grid;
	grid-template-columns: repeat(2, minmax(0,1fr));
	gap: 1rem;
}
.no_products {
	padding: 3rem 1rem;
	border-radius: var(--radius-md);
	border: 1px dashed var(--line);
	background: var(--panel);
	color: var(--muted);
	font-weight: 600;
	text-align: center;
}
.content_pager { padding-block: 1.5rem; }

@media (min-width: 768px) {
	.list_flex { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (min-width: 1200px) {
	.list_flex { grid-template-columns: repeat(4, minmax(0,1fr)); gap: 1.1rem; }
}
@media (min-width: 1500px) {
	.list_flex { grid-template-columns: repeat(5, minmax(0,1fr)); }
}

/* ── Carrusel de agrupadores ──────────────────────────────────────────── */
.grouper-rail { position: relative; }
.grouper-rail .swiper-slide { height: auto; box-sizing: border-box; padding: 0.4rem; }
.grouper-rail .swiper-scrollbar {
	position: static;
	height: 4px;
	margin-top: 1rem;
	background: var(--line);
}
.grouper-rail .swiper-scrollbar-drag { background: var(--brand); }

/* ── Arbol de filtros generado por el importador (filter.html) ────────── */
.filter { display: grid; gap: 0.1rem; }
.filter > .close { display: none; }
.category_filter { border-bottom: 1px solid rgba(15,44,60,0.06); }
.category_filter:last-child { border-bottom: 0; }
.category_filter > .button {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	padding: 0.5rem 0.6rem;
	border-radius: 0.8rem;
	cursor: pointer;
	transition: background var(--transition);
}
.category_filter > .button:hover { background: rgba(18,172,231,0.08); }
.category_filter > .button .title { min-width: 0; }
.category_filter > .button .title a {
	display: block;
	color: var(--text);
	font-size: 0.83rem;
	font-weight: 700;
	letter-spacing: 0.01em;
}
.category_filter > .button .title a:hover { color: var(--brand-deep); }
.category_filter > .button .arrow { flex: 0 0 auto; display: grid; place-items: center; }
.category_filter > .button .arrow svg {
	width: 0.6rem;
	height: 0.6rem;
	fill: var(--muted);
	transition: transform var(--transition);
}
.category_filter .checkboxs { padding: 0.1rem 0 0.5rem 0.6rem; }
.category_filter .checkbox_1 a {
	display: block;
	padding: 0.35rem 0.6rem;
	border-radius: 0.6rem;
	color: var(--muted);
	font-size: 0.8rem;
	font-weight: 500;
	transition: background var(--transition), color var(--transition), transform var(--transition);
}
.category_filter .checkbox_1 a:hover {
	background: rgba(18,172,231,0.08);
	color: var(--brand-deep);
	transform: translateX(2px);
}

/* ── Detalle de producto ─────────────────────────────────────────────── */
.details { padding-top: 1.1rem; }
.details_wrapp { display: grid; gap: 1.25rem; align-items: start; }
.details_wrapp .main_img,
.details_wrapp .info_details {
	padding: 1.15rem;
	border-radius: var(--radius-lg);
	border: 1px solid var(--line);
	background: var(--panel);
	box-shadow: var(--shadow-sm);
}
.content_img_detalle { display: grid; gap: 0.75rem; }
.content_img_detalle img {
	width: 100%;
	border-radius: var(--radius-md);
	background: var(--light-color-shade);
	object-fit: contain;
	aspect-ratio: 1 / 1;
	mix-blend-mode: multiply;
}
.swiper-img .swiper-slide img { cursor: pointer; }
.swiper-img .swiper-slide-thumb-active img { outline: 2px solid var(--brand); outline-offset: -2px; }
.info_details { display: grid; gap: 0.85rem; }
.info_details .name {
	margin: 0;
	color: var(--text);
	font-size: clamp(1.25rem, 2.4vw, 1.75rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.035em;
}
.info_details .name .app_button {
	flex: 0 0 auto;
	display: inline-grid;
	place-items: center;
	width: 2.4rem;
	height: 2.4rem;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--panel);
	color: var(--muted);
	cursor: pointer;
}
.info_details .name .app_button svg { width: 1.1rem; height: 1.1rem; fill: currentColor; }
.info_details .name .app_button.fill { background: var(--brand); border-color: var(--brand); color: #fff; }
.info_details > .line { height: 1px; background: var(--line); }
.info_details .code {
	color: var(--muted);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}
.info_details > .price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.7rem; }
.info_details .new_price {
	color: var(--text);
	font-size: clamp(1.7rem, 3.4vw, 2.35rem);
	font-weight: 800;
	letter-spacing: -0.045em;
	line-height: 1;
}
.info_details .old_price {
	color: var(--muted);
	font-size: 1rem;
	font-weight: 500;
	text-decoration: line-through;
}
.offer_percentage_detail {
	display: inline-flex;
	align-items: center;
	min-height: 1.7rem;
	padding: 0 0.65rem;
	border-radius: 999px;
	background: var(--brand);
	color: #fff;
	font-size: 0.78rem;
	font-weight: 800;
}
.offers_list_get { display: grid; gap: 0.35rem; }
.offers_list_get > .title,
.observation > .title,
.description > .title {
	color: var(--muted);
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}
.offer_detail {
	padding: 0.5rem 0.75rem;
	border-radius: 0.8rem;
	background: var(--brand-soft);
	color: var(--brand-strong);
	font-size: 0.85rem;
	font-weight: 700;
	cursor: pointer;
	transition: background var(--transition);
}
.offer_detail:hover { background: rgba(18,172,231,0.2); }
.observation { display: grid; gap: 0.35rem; }
.observation textarea {
	width: 100%;
	min-height: 4.5rem;
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-base);
	background: var(--light-color-shade);
	color: var(--text);
	font: inherit;
	font-size: 0.88rem;
	resize: vertical;
	outline: none;
}
.observation textarea:focus { border-color: var(--brand); background: #fff; }
.info_details .send { display: flex; align-items: center; flex-wrap: wrap; gap: 0.65rem; }
.info_details .quantity {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--light-color-shade);
	overflow: hidden;
}
.info_details .quantity button {
	width: 2.5rem;
	height: 2.85rem;
	border: 0;
	background: transparent;
	color: var(--muted);
	font-size: 1.15rem;
	font-weight: 700;
	cursor: pointer;
	transition: background var(--transition), color var(--transition);
}
.info_details .quantity button:hover { background: rgba(18,172,231,0.12); color: var(--brand-strong); }
.info_details .quantity input {
	width: 3.4rem;
	height: 2.85rem;
	border: 0;
	background: transparent;
	color: var(--text);
	font: inherit;
	font-weight: 800;
	text-align: center;
	outline: none;
	-moz-appearance: textfield;
}
.info_details .quantity input::-webkit-outer-spin-button,
.info_details .quantity input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.info_details .buy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	flex: 1 1 12rem;
	min-height: 2.95rem;
	padding: 0 1.3rem;
	border: 0;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--main-color-lighter), var(--brand), var(--brand-deep));
	color: #fff;
	font: inherit;
	font-size: 0.9rem;
	font-weight: 800;
	cursor: pointer;
	box-shadow: 0 14px 28px rgba(18,172,231,0.28);
	transition: transform var(--transition);
}
.info_details .buy:hover { transform: translateY(-1px); }
.info_details .buy .cart { display: inline-grid; place-items: center; }
.info_details .buy svg { width: 1.05rem; height: 1.05rem; fill: currentColor; }
.description { display: grid; gap: 0.35rem; }
.description_description { color: var(--muted); font-size: 0.92rem; line-height: 1.6; }

@media (min-width: 900px) {
	.details_wrapp { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; }
}
@media (min-width: 1200px) {
	.details_wrapp { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
}

/* ── Checkout ─────────────────────────────────────────────────────────── */
.checkout-layout { display: grid; gap: 1.25rem; align-items: start; }
.checkout-card {
	padding: 1.2rem;
	border-radius: var(--radius-lg);
	border: 1px solid var(--line);
	background: var(--panel);
	box-shadow: var(--shadow-sm);
}
.checkout-card + .checkout-card { margin-top: 1rem; }
.checkout-card__title { margin: 0 0 0.9rem; font-size: 1.05rem; font-weight: 800; letter-spacing: -0.02em; }
.checkout-card__hint { margin: -0.55rem 0 0.9rem; color: var(--muted); font-size: 0.85rem; }
.checkout-grid { display: grid; gap: 0.85rem; }
.checkout-field { display: grid; gap: 0.3rem; }
.checkout-field label {
	color: var(--muted);
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}
.checkout-field input,
.checkout-field textarea {
	width: 100%;
	min-height: 2.7rem;
	padding: 0.6rem 0.85rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-base);
	background: var(--light-color-shade);
	color: var(--text);
	font: inherit;
	font-size: 0.9rem;
	outline: none;
}
.checkout-field input:disabled { color: var(--medium-color-darker); cursor: not-allowed; }
.checkout-field textarea { min-height: 5rem; resize: vertical; }
.checkout-field textarea:focus,
.checkout-field input:focus:not(:disabled) { border-color: var(--brand); background: #fff; }

@media (min-width: 640px) {
	.checkout-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
	.checkout-field--wide { grid-column: 1 / -1; }
}
@media (min-width: 992px) {
	.checkout-layout { grid-template-columns: minmax(0,1.5fr) minmax(20rem,0.85fr); gap: 1.5rem; }
}

/* Opciones de envio (get_shipping) */
.content_retirar_enviar { display: grid; gap: 0.7rem; }
.content_retirar_sucur {
	padding: 0.9rem 1rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-md);
	background: var(--light-color-shade);
	transition: border-color var(--transition), background var(--transition);
}
.content_retirar_sucur:hover { border-color: rgba(18,172,231,0.4); background: #fff; }
.nombre_retiro {
	margin-bottom: 0.35rem;
	color: var(--text);
	font-size: 0.95rem;
	font-weight: 800;
	letter-spacing: -0.01em;
}
.nombre_form_retiro { color: var(--muted); font-size: 0.86rem; line-height: 1.55; }
.nombre_form_retiro input[type="checkbox"] { accent-color: var(--brand); width: 1.05rem; height: 1.05rem; }
.nombre_form_retiro b { color: var(--text); }

/* Resumen del checkout */
.checkout-summary {
	position: sticky;
	top: calc(var(--header-height) + 1rem);
	padding: 1.2rem;
	border-radius: var(--radius-lg);
	border: 1px solid var(--line);
	background: var(--panel);
	box-shadow: var(--shadow);
}
.checkout-summary__list { display: grid; gap: 0.6rem; list-style: none; margin: 0.9rem 0; padding: 0; }
.checkout-summary__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	color: var(--muted);
	font-size: 0.88rem;
	font-weight: 600;
}
.checkout-lines { display: grid; gap: 0.7rem; max-height: 20rem; overflow-y: auto; }
.checkout-line { display: grid; grid-template-columns: 3.2rem minmax(0,1fr) auto; gap: 0.7rem; align-items: center; }
.checkout-line__media {
	width: 3.2rem;
	height: 3.2rem;
	border-radius: 0.75rem;
	background: var(--light-color-shade);
	overflow: hidden;
}
.checkout-line__media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.checkout-line__name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--text);
	font-size: 0.84rem;
	font-weight: 600;
	line-height: 1.3;
}
.checkout-line__meta { color: var(--muted); font-size: 0.75rem; font-weight: 600; }
.checkout-line__total { color: var(--text); font-size: 0.88rem; font-weight: 800; white-space: nowrap; }
.total_final_check {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-top: 0.85rem;
	margin-top: 0.35rem;
	border-top: 1px solid var(--line);
	color: var(--text);
	font-size: 1.15rem;
	font-weight: 800;
	letter-spacing: -0.03em;
}
.btn_pagar_mp {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 3rem;
	margin-top: 0.9rem;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--main-color-lighter), var(--brand), var(--brand-deep));
	color: #fff;
	font-size: 0.9rem;
	font-weight: 800;
	letter-spacing: 0.01em;
	cursor: pointer;
	box-shadow: 0 14px 28px rgba(18,172,231,0.28);
	transition: transform var(--transition);
}
.btn_pagar_mp:hover { transform: translateY(-1px); }

/* ── Confirmacion de pedido ───────────────────────────────────────────── */
.order-done {
	display: grid;
	gap: 0.85rem;
	justify-items: center;
	max-width: 34rem;
	margin: 0 auto;
	padding: 2.5rem 1.5rem;
	border-radius: var(--radius-lg);
	border: 1px solid var(--line);
	background: var(--panel);
	box-shadow: var(--shadow-sm);
	text-align: center;
}
.order-done__icon {
	display: grid;
	place-items: center;
	width: 3.6rem;
	height: 3.6rem;
	border-radius: 999px;
	background: rgba(32,193,111,0.12);
	color: var(--success-color);
}
.order-done__icon svg { width: 1.8rem; height: 1.8rem; }
.order-done h1 { margin: 0; font-size: 1.5rem; font-weight: 800; letter-spacing: -0.035em; }
.order-done p { margin: 0; color: var(--muted); line-height: 1.6; }
.order-done__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-top: 0.4rem; }

/* ── Buscador predictivo ──────────────────────────────────────────────── */
.presearch-panel {
	position: absolute;
	z-index: 3000;
	top: calc(100% + 0.5rem);
	right: 0;
	left: 0;
	max-height: 24rem;
	overflow-y: auto;
	padding: 0.35rem;
	border-radius: var(--radius-md);
	border: 1px solid var(--line);
	background: var(--panel);
	box-shadow: var(--shadow-lg);
	text-align: left;
}
.presearch-panel:empty { display: none; }
.list_of_products { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
.pre_search_product_list_element .list_element {
	display: grid;
	grid-template-columns: 2.7rem minmax(0,1fr) auto;
	gap: 0.6rem;
	align-items: center;
	padding: 0.4rem 0.5rem;
	border-radius: 0.7rem;
	cursor: pointer;
	transition: background var(--transition);
}
.pre_search_product_list_element .list_element:hover { background: rgba(18,172,231,0.08); }
.pre_search_product_list_element .image_container {
	width: 2.7rem;
	height: 2.7rem;
	border-radius: 0.6rem;
	background: var(--light-color-shade);
	overflow: hidden;
}
.pre_search_product_list_element .image_container img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.pre_search_product_list_element .product_title p {
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: var(--text);
	font-size: 0.83rem;
	font-weight: 600;
}
.presearch_product_code { color: var(--muted); font-size: 0.72rem; font-weight: 700; }
.pre_search_product_list_element .product_price { display: flex; gap: 0.4rem; align-items: baseline; }
.pre_search_product_list_element .product_price .price { margin: 0; color: var(--text); font-size: 0.83rem; font-weight: 800; }
.pre_search_product_list_element .product_price .old_price { margin: 0; color: var(--muted); font-size: 0.72rem; text-decoration: line-through; }

/* ── WhatsApp flotante ────────────────────────────────────────────────── */
.wp_float { display: grid; place-items: center; }
.wp_float svg { width: 3.3rem; height: 3.3rem; filter: drop-shadow(0 10px 20px rgba(7,24,35,0.25)); }
.wp_float .text_wp { display: none; }

/* ── Popup de exportacion de catalogo ─────────────────────────────────── */
.line_desplegable {
	display: inline-flex;
	align-items: center;
	min-height: 2.25rem;
	padding: 0 0.95rem;
	border-radius: 999px;
	background: rgba(7,24,35,0.24);
	border: 1px solid rgba(255,255,255,0.14);
	color: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	cursor: pointer;
}

/* ── Menu de usuario en el header ──────────────────────────────────────── */
.header-user { position: relative; display: inline-flex; }
.header-user__menu {
	position: absolute;
	z-index: 3000;
	top: calc(100% + 0.4rem);
	right: 0;
	min-width: 12.5rem;
	display: grid;
	gap: 0.1rem;
	padding: 0.4rem;
	border-radius: var(--radius-m);
	border: 1px solid var(--line);
	background: var(--panel);
	box-shadow: var(--shadow-lg);
	text-align: left;
}
.header-user__menu[hidden] { display: none; }
.header-user__name {
	margin: 0;
	padding: 0.35rem 0.6rem 0.5rem;
	border-bottom: 1px solid var(--line);
	color: var(--muted);
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.header-user__item {
	display: block;
	padding: 0.5rem 0.6rem;
	border-radius: 0.6rem;
	color: var(--text);
	font-size: 0.85rem;
	font-weight: 600;
	transition: background var(--transition), color var(--transition);
}
.header-user__item:hover, .header-user__item:focus-visible {
	background: rgba(18,172,231,0.1);
	color: var(--brand-deep);
}
.header-user__item--out { color: var(--muted); }

/* ── Menu lateral: categorias generadas por el importador ──────────────── */
.menu-categories-nav { display: grid; gap: 0.1rem; }
.category_menu {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	min-height: 2.8rem;
	padding: 0.55rem 0.75rem;
	border-radius: 0.85rem;
	color: var(--text);
	font-size: 0.86rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	cursor: pointer;
	transition: background var(--transition), color var(--transition), transform var(--transition);
}
.category_menu::after {
	content: "";
	flex: 0 0 auto;
	width: 0.5rem;
	height: 0.5rem;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
	opacity: 0.35;
}
.category_menu:hover, .category_menu:focus-visible {
	background: rgba(18,172,231,0.1);
	color: var(--brand-deep);
	transform: translateX(2px);
}

/* Paneles de subcategorias: entran desde la izquierda sobre el drawer */
.menu_responsive {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	padding: 1.15rem 1.25rem;
	overflow-y: auto;
	background: var(--panel);
	transform: translate(-4000px, 0);
	transition: transform var(--transition-slow);
}
.back_menu {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	align-self: flex-start;
	min-height: 2.25rem;
	padding: 0 0.9rem;
	margin-bottom: 0.5rem;
	border-radius: 999px;
	border: 1px solid var(--line);
	background: var(--light-color-shade);
	color: var(--muted);
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	cursor: pointer;
	transition: background var(--transition), color var(--transition);
}
.back_menu:hover { background: rgba(18,172,231,0.1); color: var(--brand-deep); }
.title_menu_responsive {
	margin-bottom: 0.5rem;
	color: var(--text);
	font-size: 1.15rem;
	font-weight: 800;
	letter-spacing: -0.03em;
}
.subcategory_menu a {
	display: block;
	padding: 0.5rem 0.7rem;
	border-radius: 0.7rem;
	color: var(--muted);
	font-size: 0.85rem;
	font-weight: 500;
	transition: background var(--transition), color var(--transition), transform var(--transition);
}
.subcategory_menu a:hover, .subcategory_menu a:focus-visible {
	background: rgba(18,172,231,0.08);
	color: var(--brand-deep);
	transform: translateX(2px);
}

/* ── Banner principal (banner 1 escritorio / banner 8 responsive) ──────── */
.slider_home_responsive { display: none; }
@media (max-width: 767px) {
	.slider_home_desktop { display: none; }
	.slider_home_responsive { display: block; }
}

/* Los banners cargados son 2000x910 (escritorio) y 540x910 (responsive):
   se respeta la proporcion en lugar de una altura fija para no recortarlos. */
.slider_home_desktop .hero-card {
	min-height: 0;
	aspect-ratio: 2000 / 910;
	max-height: 88vh;
}
.slider_home_responsive .hero-card {
	min-height: 0;
	aspect-ratio: 540 / 910;
	max-height: 92vh;
}
.hero-card::after { display: none; }

.hero-swiper {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	--swiper-theme-color: #fff;
	--swiper-navigation-size: 24px;
}
.hero-swiper,
.hero-swiper .swiper-wrapper,
.hero-swiper .swiper-slide { min-height: inherit; height: 100%; }
.hero-swiper .swiper-slide { position: relative; }
.hero-swiper .swiper-slide > a { display: block; height: 100%; }
.hero-swiper .swiper-button-prev,
.hero-swiper .swiper-button-next { color: #fff; }
.hero-swiper .swiper-pagination { bottom: var(--space-2); }

/* Banners de rubro sin texto encima: sin degradado ni recorte agresivo */
.category-card--plain { min-height: 0; aspect-ratio: 270 / 370; background: var(--light-color-shade); }
.category-card--plain::after { display: none; }
.category-card--plain > a { display: block; height: 100%; }
.category-card--plain img { object-fit: cover; }

/* ── Skeleton de los agrupadores asincronicos ─────────────────────────── */
.cards-skeleton-container-slider { display: flex; flex-direction: column; gap: 1rem; }
.skeleton-slider-title { width: 16rem; height: 2.25rem; border-radius: var(--radius-s); }
.cards-skeleton-container {
	display: flex;
	gap: 1rem;
	overflow: hidden;
	padding-block: 0.5rem;
}
.cards-skeleton-container .skeleton-card {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	width: 13rem;
	height: 17rem;
	padding: 0.85rem;
	border: 1px solid var(--line);
	background: var(--panel);
	animation: none;
}
.cards-skeleton-container .skeleton-image {
	width: 100%;
	height: 65%;
	border-radius: var(--radius-s);
}

/* ── Superposicion del header ──────────────────────────────────────────── */
/* La maqueta hace que el header se monte sobre el banner del home. En el
   resto de las vistas el header ocupa su lugar, asi ninguna pagina queda
   tapada aunque no declare padding superior. */
.site-header { margin-bottom: 0; }
body.home .site-header { margin-bottom: calc(var(--header-height) * -1); }

.catalog-page,
.cart-page,
.login-page { padding-top: clamp(1.5rem, 3vw, 2.5rem) !important; }

/* El arbol de filtros generado usa class="button", que en la maqueta es un CTA.
   Se neutraliza para que se vea como una lista de rubros. */
.filter .category_filter > .button {
	background: transparent;
	background-image: none;
	color: var(--text);
	min-height: 0;
	box-shadow: none;
	border: 0;
	font: inherit;
	text-transform: none;
	letter-spacing: 0;
}
.filter .category_filter > .button:hover { background: rgba(18,172,231,0.08); transform: none; }

/* Legibilidad del header transparente del home: scrim superior mas marcado. */
body.home .hero-card::before { height: 220px; background: linear-gradient(180deg, rgba(4,19,29,0.55) 0%, rgba(4,19,29,0) 100%); }

/* Placeholder de imagen faltante: se muestra contenido, no recortado. */
.hero-media img.is-placeholder { object-fit: contain; padding: 3rem; }

/* Los paneles de subcategorias se posicionan sobre el nav del drawer. */
.menu-panel__nav { position: relative; }

/* ── Area de cuenta (mi perfil / mis pedidos) ──────────────────────────────
   Mantiene su maquetacion historica (user.css) y solo se alinea al alto del
   header nuevo y se le da legibilidad a las tablas de pedidos. */
:root { --site-header-offset: calc(var(--header-height) + 2.45rem); }

.site_users { min-height: calc(100vh - var(--site-header-offset)); }
.sidebar {
	top: var(--site-header-offset) !important;
	height: calc(100vh - var(--site-header-offset)) !important;
}
.home-section { min-height: calc(100vh - var(--site-header-offset)) !important; }

.sections_user { padding: 1.25rem; }
.title_datos_user {
	margin-bottom: 1rem;
	color: var(--text);
	font-size: clamp(1.2rem, 2vw, 1.6rem);
	font-weight: 800;
	letter-spacing: -0.03em;
}
.tabla_listado_news,
.tabla_detalle_pedido,
.tabla_pie_pedido {
	width: 100%;
	border-collapse: collapse;
	border-radius: var(--radius-m);
	overflow: hidden;
	background: var(--panel);
	box-shadow: var(--shadow-sm);
	font-size: 0.88rem;
}
.tabla_listado_news th, .tabla_listado_news td,
.tabla_detalle_pedido th, .tabla_detalle_pedido td,
.tabla_pie_pedido th, .tabla_pie_pedido td {
	padding: 0.7rem 0.85rem;
	border-bottom: 1px solid var(--line);
	text-align: left;
}
.tabla_listado_news tr:first-child td,
.tabla_detalle_pedido tr:first-child td {
	color: var(--muted);
	font-size: 0.74rem;
	font-weight: 800;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	background: var(--light-color-shade);
}
.btn_ver_detalle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.2rem;
	padding: 0 0.9rem;
	border-radius: 999px;
	background: var(--brand);
	color: #fff;
	font-size: 0.78rem;
	font-weight: 800;
	cursor: pointer;
}
.order_header, .content_order_header {
	padding: 1rem;
	border-radius: var(--radius-m);
	border: 1px solid var(--line);
	background: var(--panel);
	margin-bottom: 1rem;
}
.titulo_header { font-weight: 800; letter-spacing: -0.02em; }
.titulo_linea_header { color: var(--muted); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }