/* ==========================================================
   vistarubro.css  –  Category / Rubro page
   Design tokens: design.css
     --c-dark #0f172a  --c-navy #1e3a5f  --c-orange #e8530e
     --c-surface #f8fafc  --c-border #e2e8f0
     --c-text #334155  --c-muted #64748b
     --font-ui  --font-display  --h-header 76px  --max-w 1100px
   ========================================================== */


/* ── Page-level layout constraint ────────────────────────────
   .center_right_inner has only 5px padding from common.css.
   We apply consistent max-width + padding to every top-level
   vistarubro element so the content sits properly.
   ─────────────────────────────────────────────────────────── */

.vr-breadcrumb,
.vr-hero,
.vr-toolbar,
.vista_rubro {
	box-sizing: border-box;
	max-width: calc(var(--max-w, 1100px) + 56px);
	margin-left: auto;
	margin-right: auto;
}

.vr-breadcrumb { padding-left: 28px; padding-right: 28px; }
.vr-hero       { padding-left: 28px; padding-right: 28px; }
.vr-toolbar    { margin-left: auto; margin-right: auto; }   /* keeps its own h-padding */
.vista_rubro   { padding: 0 28px 72px; }


/* ── Breadcrumb ───────────────────────────────────────────── */

.vr-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .15rem .3rem;
	padding-top: 1.25rem;
	padding-bottom: 1rem;
	font-size: .73rem;
	font-weight: 500;
	color: var(--c-muted, #64748b);
	letter-spacing: .01em;
	font-family: var(--font-ui, roboto, sans-serif);
}
.vr-breadcrumb a {
	color: var(--c-muted, #64748b);
	text-decoration: none;
	transition: color .15s;
}
.vr-breadcrumb a:hover { color: var(--c-orange, #e8530e); }
.vr-breadcrumb [aria-hidden="true"] { opacity: .4; margin: 0 .05rem; }
.vr-breadcrumb__current {
	color: var(--c-dark, #0f172a);
	font-weight: 600;
}


/* ── Hero ─────────────────────────────────────────────────── */

.vr-hero {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 3rem;
	padding-top: .25rem;
	padding-bottom: 2.75rem;
}

.vr-hero__body {
	flex: 1;
	min-width: 0;
}

.vr-hero__title {
	font-family: var(--font-display, Boldy, 'Arial Black', sans-serif);
	font-size: 3rem;
	font-weight: 700;
	color: var(--c-dark, #0f172a);
	margin: 0 0 1rem;
	line-height: 1.05;
	letter-spacing: -.03em;
}

/* Short orange rule that lives inside the h1 */
.vr-hero__title::after {
	content: '';
	display: block;
	width: 52px;
	height: 4px;
	background: var(--c-orange, #e8530e);
	border-radius: 2px;
	margin-top: .65rem;
}

.vr-hero__desc {
	color: var(--c-text, #334155);
	font-size: 1rem;
	line-height: 1.75;
	margin: 0 0 1.1rem;
	max-width: 58ch;
}

.vr-hero__count {
	display: inline-flex;
	align-items: center;
	font-size: .72rem;
	font-weight: 600;
	color: var(--c-muted, #64748b);
	background: var(--c-surface, #f8fafc);
	border: 1px solid var(--c-border, #e2e8f0);
	padding: .28rem .9rem;
	border-radius: 999px;
	letter-spacing: .03em;
}

.vr-hero__img {
	flex-shrink: 0;
	max-width: 210px;
	align-self: center;
}
.vr-hero__img img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
	box-shadow: 0 12px 40px rgba(15,23,42,.13);
	display: block;
}


/* ── Toolbar ──────────────────────────────────────────────── */

.vr-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	flex-wrap: wrap;
	padding: .6rem 28px;
	background: rgba(255,255,255,.93);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border-top: 1px solid var(--c-border, #e2e8f0);
	border-bottom: 1px solid var(--c-border, #e2e8f0);
	position: sticky;
	top: var(--h-header, 76px);
	z-index: 90;
	margin-bottom: 1.5rem;
	box-shadow: 0 4px 20px rgba(15,23,42,.07);
}

.vr-toolbar__sort {
	display: flex;
	align-items: center;
	gap: .5rem;
	flex-wrap: wrap;
}
.vr-toolbar__label {
	font-size: .67rem;
	font-weight: 700;
	color: var(--c-muted, #64748b);
	text-transform: uppercase;
	letter-spacing: .09em;
	white-space: nowrap;
}
.vr-sort-group { display: flex; gap: .2rem; }
.vr-sort-btn {
	padding: .3rem .8rem;
	font-size: .78rem;
	font-weight: 600;
	border: 1px solid var(--c-border, #e2e8f0);
	background: none;
	color: var(--c-text, #334155);
	cursor: pointer;
	border-radius: 999px;
	transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
	white-space: nowrap;
	line-height: 1;
}
.vr-sort-btn:hover {
	background: var(--c-surface, #f8fafc);
	border-color: #94a3b8;
	color: var(--c-dark, #0f172a);
}
.vr-sort-btn.is-active {
	background: var(--c-orange, #e8530e);
	border-color: var(--c-orange, #e8530e);
	color: #fff;
	box-shadow: 0 2px 8px rgba(232,83,14,.3);
}

.vr-toolbar__view { display: flex; gap: .25rem; }
.vr-view-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--c-border, #e2e8f0);
	background: none;
	border-radius: 7px;
	cursor: pointer;
	color: #94a3b8;
	transition: background .15s, color .15s, border-color .15s;
}
.vr-view-btn:hover { background: var(--c-surface, #f8fafc); color: var(--c-dark, #0f172a); border-color: #94a3b8; }
.vr-view-btn.is-active { background: var(--c-dark, #0f172a); border-color: var(--c-dark, #0f172a); color: #fff; }


/* ── Subgroup jump nav ────────────────────────────────────── */

.vr-sg-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .3rem .4rem;
	padding: .75rem 0 1.1rem;
	margin-bottom: .5rem;
	border-bottom: 1px solid var(--c-border, #e2e8f0);
}
.vr-sg-nav::before {
	content: 'Secciones:';
	font-size: .67rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--c-muted, #64748b);
	margin-right: .2rem;
	white-space: nowrap;
}
.vr-sg-nav__link {
	display: inline-block;
	padding: .28rem .82rem;
	font-size: .79rem;
	font-weight: 600;
	color: var(--c-dark, #0f172a);
	background: var(--c-surface, #f8fafc);
	border-radius: 999px;
	text-decoration: none;
	border: 1px solid var(--c-border, #e2e8f0);
	transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.vr-sg-nav__link:hover,
.vr-sg-nav__link.is-active {
	background: var(--c-orange, #e8530e);
	border-color: var(--c-orange, #e8530e);
	color: #fff;
	box-shadow: 0 2px 8px rgba(232,83,14,.28);
}


/* ── Subgroup header (full-span section divider in grid) ──── */

.vr-sg-header {
	grid-column: 1 / -1;
	padding: 2.5rem 0 .8rem;
	margin-top: .25rem;
	scroll-margin-top: calc(var(--h-header, 76px) + 80px);
}
.vr-sg-header h2 {
	font-family: var(--font-display, Boldy, 'Arial Black', sans-serif);
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--c-dark, #0f172a);
	margin: 0 0 .4rem;
	display: flex;
	align-items: center;
	gap: .6rem;
	letter-spacing: -.02em;
}
.vr-sg-header h2::before {
	content: '';
	flex-shrink: 0;
	width: 5px;
	height: 1.15em;
	background: var(--c-orange, #e8530e);
	border-radius: 3px;
}
.vr-sg-header p {
	font-size: .9rem;
	color: var(--c-muted, #64748b);
	margin: 0 0 0 1.1rem;
	line-height: 1.65;
}
.vr-sg-header::after {
	content: '';
	display: block;
	height: 1px;
	margin-top: .8rem;
	background: linear-gradient(
		to right,
		var(--c-border, #e2e8f0) 0%,
		var(--c-border, #e2e8f0) 100%
	);
}


/* ── Product grids ────────────────────────────────────────── */

.vr-grid { display: grid; gap: 1.1rem; }
.vr-grid--cards   { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.vr-grid--fullsize{ grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.vr-grid--compact { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }


/* ── Product card: grid-context overrides ─────────────────── */
/*
 * common.css sets width:215px, height:245px, float:left on .detalle_elemento.
 * These overrides make cards fill the grid cell and use a flex column layout.
 */

.vr-grid .detalle_elemento.elemento_cuadros {
	width: auto !important;
	height: auto !important;
	float: none !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: column;
	border: 1px solid var(--c-border, #e2e8f0) !important;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	transition: box-shadow .22s, transform .22s, border-color .22s;
	position: relative;
}

.vr-grid .detalle_elemento.elemento_cuadros:hover {
	box-shadow: 0 6px 28px rgba(15,23,42,.11);
	transform: translateY(-3px);
	border-color: #cbd5e1 !important;
}

/* Image container — square aspect, contains lazy-loaded img */
.vr-grid .elemento_cuadros .img_producto {
	display: block !important;
	width: 100%;
	aspect-ratio: 1;
	height: auto !important;
	background: #f8fafc;
	overflow: hidden;
	flex-shrink: 0;
	position: relative;
}

.vr-grid .elemento_cuadros .img_producto img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
	transition: transform .3s ease;
}

.vr-grid .elemento_cuadros:hover .img_producto img {
	transform: scale(1.04);
}

/* Product name */
.vr-grid .elemento_cuadros .nombre_producto {
	display: -webkit-box !important;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	padding: .6rem .8rem .15rem;
	font-size: .875rem;
	font-weight: 600;
	color: var(--c-dark, #0f172a);
	text-decoration: none;
	text-align: left !important;
	line-height: 1.35;
}

.vr-grid .elemento_cuadros .nombre_producto:hover {
	color: var(--c-orange, #e8530e);
}

/* Short properties */
.vr-grid .elemento_cuadros .producto_props {
	display: -webkit-box !important;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	padding: .15rem .8rem .3rem;
	font-size: .76rem;
	color: var(--c-muted, #64748b);
	text-align: left !important;
	line-height: 1.45;
	flex: 1;
}

/* Footer: price + code side by side */
.vr-grid .elemento_cuadros .card_footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .4rem;
	padding: .5rem .8rem .35rem;
	border-top: 1px solid #f1f5f9;
	margin-top: auto;
}

.vr-grid .elemento_cuadros .precio_producto {
	position: static !important;
	bottom: auto !important;
	right: auto !important;
	font-weight: 700;
	font-size: .95rem;
	color: var(--c-orange, #e8530e) !important;
	font-family: maven-bold, sans-serif;
	line-height: 1;
}

.vr-grid .elemento_cuadros .precio_a_convenir {
	font-size: .8rem;
	font-weight: 500;
	color: var(--c-muted, #64748b) !important;
}

.vr-grid .elemento_cuadros .codigo_producto {
	position: static !important;
	bottom: auto !important;
	left: auto !important;
	font-size: .68rem;
	color: #94a3b8;
	text-align: right;
	flex-shrink: 0;
}

/* Offer badge */
.badge_oferta {
	position: absolute;
	top: 8px;
	left: 8px;
	background: var(--c-orange, #e8530e);
	color: #fff;
	font-size: .65rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	padding: .22rem .55rem;
	border-radius: 4px;
	line-height: 1;
	z-index: 1;
	pointer-events: none;
}

/* Color swatch (overlay) */
.vr-grid .elemento_cuadros .color_producto {
	position: absolute;
	bottom: 8px;
	right: 8px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,.25);
	display: block;
}


/* ── Add-to-cart button on cards ─────────────────────────── */

.card-add-btn {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .35rem;
	width: calc(100% - 1.6rem);
	margin: .1rem .8rem .65rem;
	padding: .5rem .6rem;
	font-size: .78rem;
	font-weight: 600;
	font-family: var(--font-ui, roboto, sans-serif);
	text-align: center;
	text-decoration: none;
	line-height: 1;
	letter-spacing: .015em;
	border: none;
	border-radius: 8px;
	cursor: pointer;
	background: var(--c-orange, #e8530e);
	color: #fff;
	overflow: hidden;
	-webkit-tap-highlight-color: transparent;
	transition: background .2s cubic-bezier(.4,0,.2,1),
	            box-shadow .25s cubic-bezier(.4,0,.2,1),
	            transform .15s cubic-bezier(.4,0,.2,1);
}

/* Subtle inner highlight for depth */
.card-add-btn::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(180deg, rgba(255,255,255,.15) 0%, transparent 60%);
	pointer-events: none;
	transition: opacity .2s;
}

.card-add-icon {
	width: .95rem;
	height: .95rem;
	flex-shrink: 0;
	transition: transform .2s cubic-bezier(.4,0,.2,1);
}

.card-add-btn:hover {
	background: var(--c-orange-h, #c44409);
	box-shadow: 0 4px 16px rgba(232,83,14,.32), 0 1.5px 4px rgba(0,0,0,.06);
	transform: translateY(-1px);
}
.card-add-btn:hover .card-add-icon { transform: scale(1.12); }
.card-add-btn:hover::before { opacity: .7; }

.card-add-btn:active {
	transform: translateY(0) scale(.97);
	box-shadow: 0 1px 3px rgba(232,83,14,.18);
	background: #b83d08;
	transition-duration: .08s;
}

.card-add-btn:focus-visible {
	outline: 2px solid var(--c-orange, #e8530e);
	outline-offset: 2px;
}

/* ·· "Ver opciones" — ghost variant ·· */
.card-add-btn--options {
	background: transparent;
	color: var(--c-text, #334155);
	box-shadow: inset 0 0 0 1.5px var(--c-border, #e2e8f0);
	font-weight: 600;
}
.card-add-btn--options::before { display: none; }
.card-add-btn--options .card-add-icon { opacity: .55; }
.card-add-btn--options:hover {
	background: var(--c-orange, #e8530e);
	color: #fff;
	box-shadow: inset 0 0 0 1.5px var(--c-orange, #e8530e),
	            0 4px 16px rgba(232,83,14,.28);
}
.card-add-btn--options:hover .card-add-icon { opacity: 1; }
.card-add-btn--options:active {
	background: var(--c-orange-h, #c44409);
	color: #fff;
	box-shadow: inset 0 0 0 1.5px var(--c-orange-h, #c44409);
}

/* ·· Loading — spinner replaces content ·· */
.card-add-btn.is-adding {
	color: transparent !important;
	pointer-events: none;
	cursor: wait;
}
.card-add-btn.is-adding .card-add-icon { visibility: hidden; }
.card-add-btn.is-adding::after {
	content: '';
	position: absolute;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255,255,255,.3);
	border-top-color: #fff;
	border-radius: 50%;
	animation: card-spin .55s linear infinite;
}
.card-add-btn--options.is-adding::after {
	border-color: rgba(232,83,14,.2);
	border-top-color: var(--c-orange, #e8530e);
}
@keyframes card-spin { to { transform: rotate(360deg); } }

/* ·· Success — green with checkmark ·· */
.card-add-btn.is-added {
	background: #16a34a;
	pointer-events: none;
	animation: card-added-pop .3s cubic-bezier(.34,1.56,.64,1);
}
.card-add-btn.is-added::before { opacity: 0; }
@keyframes card-added-pop {
	0%   { transform: scale(.92); }
	100% { transform: scale(1); }
}

/* Hide add-to-cart in list view for cleaner layout */
.vr-grid--list .card-add-btn { display: none; }


/* ── Fullsize card overrides ──────────────────────────────── */

.vr-grid--fullsize .elemento_cuadros_fullsize .precio_del_articulo {
	position: absolute;
	top: 0;
	right: 0;
	background: var(--c-orange, #e8530e);
	color: #fff;
	font-size: .95rem;
	font-weight: 700;
	font-family: maven-bold, sans-serif;
	padding: .45rem .9rem .45rem 1.1rem;
	border-radius: 0 10px 0 16px;
	z-index: 2;
	letter-spacing: .02em;
	line-height: 1;
}

.vr-grid--fullsize .elemento_cuadros_fullsize .producto_specs {
	padding: .3rem .8rem .6rem;
	border-top: 1px solid #f1f5f9;
	margin-top: auto;
}

.vr-grid--fullsize .elemento_cuadros_fullsize .producto_specs ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .35rem;
}

.vr-grid--fullsize .elemento_cuadros_fullsize .producto_specs li {
	display: flex;
	align-items: flex-start;
	gap: .5rem;
	font-size: .78rem;
	color: var(--c-muted, #64748b);
	line-height: 1.35;
}

.vr-grid--fullsize .elemento_cuadros_fullsize .producto_specs li img {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	margin-top: 1px;
	object-fit: contain;
}

.vr-grid--fullsize .elemento_cuadros_fullsize .producto_specs .mensaje span {
	font-weight: 600;
	color: var(--c-dark, #0f172a);
	font-size: .8rem;
}

.vr-grid--fullsize .elemento_cuadros_fullsize .producto_specs .mensaje p {
	margin: 0;
}

/* No-image placeholder for fullsize cards */
.vr-grid .elemento_cuadros .img_producto img[src*="no-image"] {
	width: 60%;
	height: auto;
	margin: auto;
	opacity: .35;
	object-fit: contain;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}


/* ── Compact view card ────────────────────────────────────── */

.vr-grid--compact .detalle_elemento.vista_compacta {
	width: auto !important;
	height: auto !important;
	float: none !important;
	margin: 0 !important;
	border: 1px solid var(--c-border, #e2e8f0) !important;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	transition: box-shadow .18s, border-color .18s;
}

.vr-grid--compact .detalle_elemento.vista_compacta:hover {
	box-shadow: 0 4px 16px rgba(15,23,42,.09);
	border-color: #cbd5e1 !important;
}

.vr-grid--compact .detalle_elemento.vista_compacta > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	padding: .65rem .9rem;
	text-decoration: none;
	color: inherit;
}

.vr-grid--compact .detalle_elemento.vista_compacta .atributo_articulo {
	font-size: .84rem;
	color: var(--c-dark, #0f172a);
	font-weight: 500;
	flex: 1;
	line-height: 1.35;
	display: block;
}

.vr-grid--compact .detalle_elemento.vista_compacta .precio_producto {
	position: static !important;
	bottom: auto !important;
	right: auto !important;
	font-size: .88rem;
	font-weight: 700;
	color: var(--c-orange, #e8530e) !important;
	white-space: nowrap;
	flex-shrink: 0;
}

/* ── List view (JS-toggled via .vr-grid--list) ───────────── */

.vr-grid--list { grid-template-columns: 1fr !important; gap: .5rem !important; }

/*
 * Card wrapper.
 * common.css sets: width:215px, height:245px, float:left, margin:1px
 * Those must all be overridden. display:grid alone does NOT clear float
 * on a block element — width still wins via specificity, hence the clamp.
 */
.vr-grid--list .detalle_elemento.elemento_cuadros {
	display: grid !important;
	/* col 1 = image | col 2 = text details | col 3 = price */
	grid-template-columns: 92px 1fr auto !important;
	/* 3 explicit rows: name / props / code  (image & price span all 3) */
	grid-template-rows: auto auto auto !important;
	column-gap: 1.25rem !important;
	row-gap: .1rem !important;
	align-items: center !important;   /* each item centred in its track */
	padding: .85rem 1.1rem !important;
	/* ↓ the critical fixes from common.css interference */
	width: 100% !important;
	height: auto !important;
	min-height: 92px !important;
	float: none !important;
	margin: 0 !important;
	box-sizing: border-box !important;
	border-radius: 8px !important;
}

/* Image link — col 1, spans all 3 rows */
.vr-grid--list .detalle_elemento.elemento_cuadros .img_producto {
	grid-column: 1 !important;
	grid-row: 1 / -1 !important;
	align-self: center !important;
	width: 92px !important;
	height: 92px !important;
	background-size: contain !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
.vr-grid--list .detalle_elemento.elemento_cuadros .img_producto img {
	width: 92px !important;
	height: 92px !important;
	object-fit: contain !important;
	display: block !important;
}

/* Product name — col 2, row 1 */
.vr-grid--list .detalle_elemento.elemento_cuadros .nombre_producto {
	grid-column: 2 !important;
	grid-row: 1 !important;
	display: block !important;
	font-size: .9rem !important;
	font-weight: 600 !important;
	text-align: left !important;
	color: var(--c-dark, #0f172a);
	align-self: end !important;     /* push down so name sits close to props */
	line-height: 1.3 !important;
}

/* Short properties — col 2, row 2 */
.vr-grid--list .detalle_elemento.elemento_cuadros .producto_props {
	grid-column: 2 !important;
	grid-row: 2 !important;
	display: block !important;
	font-size: .78rem !important;
	text-align: left !important;
	line-height: 1.35 !important;
	align-self: center !important;
}

/* Product code — col 2, row 3
 * common.css: position:absolute left:20px bottom:3px → must be reset */
.vr-grid--list .detalle_elemento.elemento_cuadros .codigo_producto {
	grid-column: 2 !important;
	grid-row: 3 !important;
	position: static !important;
	display: block !important;
	font-size: .7rem !important;
	text-align: left !important;
	align-self: start !important;
	left: auto !important;
	bottom: auto !important;
}

/* Price — col 3, spans all 3 rows, vertically centred
 * common.css on .elemento_cuadros: position:absolute bottom:0 right:0 → reset */
.vr-grid--list .detalle_elemento.elemento_cuadros .precio_producto {
	grid-column: 3 !important;
	grid-row: 1 / -1 !important;
	align-self: center !important;
	position: static !important;    /* override position:absolute */
	bottom: auto !important;
	right: auto !important;
	display: block !important;
	font-size: 1.1rem !important;
	font-weight: 700 !important;
	white-space: nowrap !important;
	text-align: right !important;
	color: var(--c-orange, #e8530e);
}

/* card_footer: transparent wrapper so price/code remain direct grid items */
.vr-grid--list .detalle_elemento.elemento_cuadros .card_footer {
	display: contents !important;
}


/* ── Pagination ───────────────────────────────────────────── */

.vr-paginado { margin: 1.5rem 0; }
.vr-paginado--top { margin-top: 0; }
.vr-pages { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; }
.vr-page-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	padding: 0 .65rem;
	border: 1px solid var(--c-border, #e2e8f0);
	background: #fff;
	color: var(--c-dark, #0f172a);
	font-size: .875rem;
	font-weight: 500;
	border-radius: 7px;
	text-decoration: none;
	transition: background .15s, border-color .15s, box-shadow .15s;
}
.vr-page-btn:hover {
	background: var(--c-surface, #f8fafc);
	border-color: #94a3b8;
	box-shadow: 0 1px 4px rgba(15,23,42,.07);
	text-decoration: none;
}
.vr-page-btn--active {
	background: var(--c-orange, #e8530e) !important;
	border-color: var(--c-orange, #e8530e) !important;
	color: #fff !important;
	font-weight: 700;
	pointer-events: none;
	box-shadow: 0 2px 8px rgba(232,83,14,.3) !important;
}
.vr-page-btn--nav { font-size: 1.1rem; }
.vr-page-ellipsis { padding: 0 .25rem; color: #94a3b8; user-select: none; line-height: 38px; }


/* ── Empty state ──────────────────────────────────────────── */

.vr-empty {
	text-align: center;
	padding: 4.5rem 2rem;
	color: var(--c-muted, #64748b);
	border: 1.5px dashed var(--c-border, #e2e8f0);
	border-radius: 14px;
	background: var(--c-surface, #f8fafc);
}
.vr-empty p { font-size: 1rem; margin: 0 0 .85rem; color: var(--c-text, #334155); }
.vr-sugg {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem;
	justify-content: center;
	margin-top: .85rem;
}
.vr-sugg a {
	padding: .35rem .9rem;
	background: #fff;
	border-radius: 7px;
	text-decoration: none;
	color: var(--c-dark, #0f172a);
	font-size: .85rem;
	font-weight: 500;
	border: 1px solid var(--c-border, #e2e8f0);
	transition: background .15s, border-color .15s, color .15s;
}
.vr-sugg a:hover { background: var(--c-orange, #e8530e); color: #fff; border-color: var(--c-orange, #e8530e); }


/* ── Section titles ───────────────────────────────────────── */

.vr-section-title {
	font-family: var(--font-display, Boldy, 'Arial Black', sans-serif);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--c-dark, #0f172a);
	margin: 2.5rem 0 1.25rem;
	padding-bottom: .6rem;
	letter-spacing: -.02em;
	position: relative;
}
.vr-section-title::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 44px;
	height: 3px;
	background: var(--c-orange, #e8530e);
	border-radius: 2px;
}


/* ── Destacados ───────────────────────────────────────────── */

.vr-destacados { margin-bottom: 2.75rem; }


/* ── Horizontal product slider (subcategory rows) ────────── */

.vr-slider-wrap {
	position: relative;
}

.vr-slider-track {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;          /* Firefox */
	padding-bottom: 4px;            /* prevent shadow clip */
}
.vr-slider-track::-webkit-scrollbar { display: none; }

.vr-slider-track > .detalle_elemento.elemento_cuadros {
	scroll-snap-align: start;
	flex: 0 0 210px;
	width: 210px !important;
	height: auto !important;
	float: none !important;
	margin: 0 !important;
	display: flex !important;
	flex-direction: column;
	border: 1px solid var(--c-border, #e2e8f0) !important;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	transition: box-shadow .22s, transform .22s, border-color .22s;
	position: relative;
}

.vr-slider-track > .detalle_elemento.elemento_cuadros:hover {
	box-shadow: 0 6px 28px rgba(15,23,42,.11);
	transform: translateY(-3px);
	border-color: #cbd5e1 !important;
}

/* Inherit card sub-element styles from vr-grid */
.vr-slider-track .img_producto {
	display: block !important;
	width: 100%;
	aspect-ratio: 1;
	height: auto !important;
	background: #f8fafc;
	overflow: hidden;
	flex-shrink: 0;
	position: relative;
}
.vr-slider-track .img_producto img {
	width: 100%; height: 100%;
	object-fit: contain; display: block;
	transition: transform .3s ease;
}
.vr-slider-track .detalle_elemento:hover .img_producto img { transform: scale(1.04); }

.vr-slider-track .nombre_producto {
	display: -webkit-box !important;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	padding: .6rem .8rem .15rem;
	font-size: .875rem;
	font-weight: 600;
	color: var(--c-dark, #0f172a);
	text-decoration: none;
	text-align: left !important;
	line-height: 1.35;
}
.vr-slider-track .nombre_producto:hover { color: var(--c-orange, #e8530e); }

.vr-slider-track .producto_props {
	display: -webkit-box !important;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	padding: .15rem .8rem .3rem;
	font-size: .76rem;
	color: var(--c-muted, #64748b);
	text-align: left !important;
	line-height: 1.45;
	flex: 1;
}

.vr-slider-track .card_footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .4rem;
	padding: .5rem .8rem .35rem;
	border-top: 1px solid #f1f5f9;
	margin-top: auto;
}
.vr-slider-track .precio_producto {
	position: static !important;
	bottom: auto !important; right: auto !important;
	font-weight: 700; font-size: .95rem;
	color: var(--c-orange, #e8530e) !important;
	font-family: maven-bold, sans-serif;
	line-height: 1;
}
.vr-slider-track .codigo_producto {
	position: static !important;
	bottom: auto !important; left: auto !important;
	font-size: .68rem; color: #94a3b8;
	text-align: right; flex-shrink: 0;
}

.vr-slider-track .card-add-btn {
	width: calc(100% - 1.6rem);
	margin: .1rem .8rem .65rem;
}

/* No-image in slider */
.vr-slider-track .img_producto img[src*="no-image"] {
	width: 60%; height: auto; margin: auto; opacity: .35;
	object-fit: contain; position: absolute;
	top: 50%; left: 50%; transform: translate(-50%, -50%);
}

/* Arrow buttons */
.vr-slider-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 1px solid var(--c-border, #e2e8f0);
	background: rgba(255,255,255,.95);
	color: var(--c-dark, #0f172a);
	font-size: 1.1rem;
	cursor: pointer;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 10px rgba(15,23,42,.1);
	transition: background .15s, box-shadow .15s, border-color .15s;
	padding: 0;
	line-height: 1;
}
.vr-slider-arrow:hover {
	background: #fff;
	box-shadow: 0 4px 16px rgba(15,23,14,.16);
	border-color: #94a3b8;
}
.vr-slider-arrow[disabled] {
	opacity: 0;
	pointer-events: none;
}
.vr-slider-arrow--prev { left: -14px; }
.vr-slider-arrow--next { right: -14px; }

/* Loading spinner for lazy load */
.vr-slider-loader {
	flex: 0 0 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 200px;
}
.vr-slider-loader .sac-spinner {
	width: 20px;
	height: 20px;
}

/* On mobile, slider becomes full-width swipeable */
@media (max-width: 640px) {
	.vr-slider-track > .detalle_elemento.elemento_cuadros {
		flex: 0 0 165px;
		width: 165px !important;
	}
	.vr-slider-arrow { display: none; }
}


/* ── Many subrubros (grid of category tiles) ─────────────── */

.vr-subrubros-section {
	margin: 1.25rem 0 3rem;
}

.vr-subrubros-hd {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1.25rem;
	margin-bottom: 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid #eceff3;
}
.vr-subrubros-hd__text {
	min-width: 0;
	position: relative;
	padding-left: .85rem;
}
.vr-subrubros-hd__text::before {
	content: "";
	position: absolute;
	left: 0; top: .2em; bottom: .2em;
	width: 4px;
	border-radius: 4px;
	background: linear-gradient(180deg, var(--c-orange, #e8530e), #ff8a3d);
}
.vr-subrubros-hd__title {
	font-family: var(--font-display, Boldy, 'Arial Black', sans-serif);
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--c-dark, #0f172a);
	margin: 0;
	letter-spacing: -.025em;
	line-height: 1.1;
}
.vr-subrubros-hd__sub {
	margin: .4rem 0 0;
	font-size: .82rem;
	color: var(--c-muted, #64748b);
	letter-spacing: .01em;
	text-transform: uppercase;
	font-weight: 500;
}
.vr-subrubros-count { font-weight: 700; color: var(--c-orange, #e8530e); }

.vr-subrubros-filter {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .5rem .85rem;
	background: #fff;
	border: 1px solid var(--c-border, #e2e8f0);
	border-radius: 999px;
	color: var(--c-muted, #64748b);
	transition: border-color .15s, box-shadow .15s;
	flex-shrink: 0;
	min-width: 240px;
}
.vr-subrubros-filter:focus-within {
	border-color: var(--c-orange, #e8530e);
	box-shadow: 0 0 0 3px rgba(232,83,14,.12);
	color: var(--c-dark, #0f172a);
}
.vr-subrubros-filter input {
	border: 0;
	outline: 0;
	background: transparent;
	font: inherit;
	font-size: .88rem;
	color: var(--c-dark, #0f172a);
	width: 100%;
	padding: 0;
}
.vr-subrubros-filter input::-webkit-search-cancel-button { cursor: pointer; }

.vr-subrubros {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 1.25rem;
}

.vr-subrubros .detalle_elemento.elemento_cuadros {
	position: relative;
	display: flex;
	flex-direction: column;
	width: auto !important;
	height: auto !important;
	float: none !important;
	margin: 0;
	padding: 0;
	background: #fff;
	border: 1px solid #ebeef3;
	border-radius: 16px;
	overflow: hidden;
	isolation: isolate;
	transition: transform .25s cubic-bezier(.2,.7,.2,1),
	            box-shadow .25s cubic-bezier(.2,.7,.2,1),
	            border-color .2s ease;
	box-shadow: 0 1px 2px rgba(15,23,42,.035);
}
.vr-subrubros .detalle_elemento.elemento_cuadros::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 1px;
	background: linear-gradient(180deg, rgba(232,83,14,.55), rgba(232,83,14,0) 65%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	transition: opacity .25s ease;
	pointer-events: none;
	z-index: 2;
}
.vr-subrubros .detalle_elemento.elemento_cuadros:hover {
	transform: translateY(-4px);
	border-color: transparent;
	box-shadow:
		0 18px 38px -14px rgba(15,23,42,.18),
		0 4px 10px -4px rgba(232,83,14,.15);
}
.vr-subrubros .detalle_elemento.elemento_cuadros:hover::before { opacity: 1; }

.vr-subrubros .elemento_cuadros .img_producto {
	position: relative;
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	background: #fff;
	overflow: hidden;
	padding: 0;
	border-bottom: 1px solid #f1f3f6;
}
.vr-subrubros .elemento_cuadros .img_producto img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 14px;
	transition: transform .45s cubic-bezier(.2,.7,.2,1);
}
.vr-subrubros .elemento_cuadros:hover .img_producto img {
	transform: scale(1.06);
}
.vr-subrubros .elemento_cuadros .img_producto img[src*="no-image"] {
	opacity: .3;
	padding: 32px;
}

.vr-subrubros .elemento_cuadros .nombre_producto {
	position: static;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 60px;
	padding: .85rem 1rem 1rem;
	font-family: var(--font-ui, roboto, sans-serif);
	font-size: .92rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--c-dark, #0f172a);
	text-align: center;
	letter-spacing: -.005em;
	text-decoration: none;
	transition: color .15s ease;
	background:
		linear-gradient(180deg, #fafbfc 0%, #f5f7fa 100%);
	border-top: 1px solid #eef0f4;
}
.vr-subrubros .elemento_cuadros:hover .nombre_producto {
	color: var(--c-orange, #e8530e);
	background: linear-gradient(180deg, #fff 0%, #fff7f1 100%);
}

.vr-subrubros-empty {
	margin: 1.5rem 0 0;
	padding: 1.25rem;
	text-align: center;
	color: var(--c-muted, #64748b);
	background: var(--c-surface, #f8fafc);
	border: 1px dashed var(--c-border, #e2e8f0);
	border-radius: 10px;
	font-size: .9rem;
}

@media (max-width: 900px) {
	.vr-subrubros { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: .85rem; }
	.vr-subrubros-hd { flex-direction: column; align-items: stretch; gap: .85rem; }
	.vr-subrubros-filter { min-width: 0; width: 100%; }
	.vr-subrubros-hd__title { font-size: 1.25rem; }
}

@media (max-width: 640px) {
	.vr-subrubros { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .7rem; }
	.vr-subrubros .elemento_cuadros .nombre_producto { font-size: .82rem; min-height: 48px; padding: .55rem .5rem .7rem; }
	.vr-subrubros .elemento_cuadros { border-radius: 11px; }
}


/* ── Subrubro sections (preview + ver todos) ──────────────── */

.vr-subrubro-section { margin-bottom: 3.25rem; }

.vr-subrubro-section__hd {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.1rem;
	padding-bottom: .7rem;
	border-bottom: 1px solid var(--c-border, #e2e8f0);
}
.vr-subrubro-section__hd h2 {
	font-family: var(--font-display, Boldy, 'Arial Black', sans-serif);
	font-size: 1.3rem;
	font-weight: 700;
	color: var(--c-dark, #0f172a);
	margin: 0;
	letter-spacing: -.02em;
}
.vr-viewmore {
	display: inline-flex;
	align-items: center;
	font-size: .78rem;
	font-weight: 700;
	color: var(--c-orange, #e8530e);
	text-decoration: none;
	white-space: nowrap;
	flex-shrink: 0;
	padding: .3rem .85rem;
	border: 1px solid rgba(232,83,14,.35);
	border-radius: 999px;
	transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
	letter-spacing: .01em;
}
.vr-viewmore:hover {
	background: var(--c-orange, #e8530e);
	color: #fff;
	border-color: var(--c-orange, #e8530e);
	box-shadow: 0 2px 10px rgba(232,83,14,.28);
	text-decoration: none;
}


/* ── "Also consult" strip ─────────────────────────────────── */

.vr-also {
	margin: 2rem 0;
	padding: 1rem 1.25rem;
	background: var(--c-surface, #f8fafc);
	border: 1px solid var(--c-border, #e2e8f0);
	border-left: 4px solid var(--c-navy, #1e3a5f);
	border-radius: 10px;
	font-size: .9rem;
	color: var(--c-text, #334155);
	line-height: 1.7;
}
.vr-also a { color: var(--c-orange, #e8530e); font-weight: 500; text-decoration: none; }
.vr-also a:hover { text-decoration: underline; }


/* ── Bottom content ───────────────────────────────────────── */

.vr-bottom {
	margin-top: 2.75rem;
	padding-top: 2rem;
	border-top: 1px solid var(--c-border, #e2e8f0);
	font-size: .94rem;
	color: var(--c-text, #334155);
	line-height: 1.8;
	font-family: var(--font-ui, roboto, sans-serif);
}
.vr-bottom h2, .rubro_bottom_info h2 {
	font-family: var(--font-display, Boldy, 'Arial Black', sans-serif);
	font-size: 1.15rem;
	color: var(--c-dark, #0f172a);
	margin: 1.5rem 0 .5rem;
	letter-spacing: -.01em;
	border-bottom: none;
	font-weight: 700;
}
.vr-bottom h3, .rubro_bottom_info h3 {
	font-size: 1rem;
	font-weight: 700;
	color: var(--c-dark, #0f172a);
	font-family: var(--font-ui, roboto, sans-serif);
}
.vr-bottom p, .rubro_bottom_info p {
	color: var(--c-text, #334155);
	font-family: var(--font-ui, roboto, sans-serif);
}


/* ── WP posts section ─────────────────────────────────────── */

.vr-posts { margin-top: 2.75rem; }
.vr-posts > p { font-size: .9rem; color: var(--c-muted, #64748b); margin: -.25rem 0 1rem; }
.vr-posts__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: .85rem;
}
.vr-post-card {
	display: flex;
	align-items: center;
	gap: .85rem;
	padding: .9rem 1rem;
	background: #fff;
	border: 1px solid var(--c-border, #e2e8f0);
	border-radius: 10px;
	text-decoration: none;
	color: var(--c-dark, #0f172a);
	transition: box-shadow .2s, border-color .2s, transform .2s;
}
.vr-post-card:hover {
	border-color: var(--c-orange, #e8530e);
	box-shadow: 0 6px 22px rgba(232,83,14,.11);
	transform: translateY(-2px);
	text-decoration: none;
}
.vr-post-card img {
	width: 64px; height: 64px;
	object-fit: cover;
	border-radius: 6px;
	flex-shrink: 0;
}
.vr-post-card__title { font-size: .875rem; font-weight: 600; line-height: 1.4; }


/* ── Responsive — 900px ───────────────────────────────────── */

@media (max-width: 900px) {
	.vr-hero__title { font-size: 2.5rem; }
}


/* ── Responsive — 768px ───────────────────────────────────── */

@media (max-width: 768px) {
	.vr-hero { gap: 2rem; }
	.vr-hero__title { font-size: 2.1rem; }
	.vr-hero__img { max-width: 160px; }
}


/* ── Responsive — mobile (640px) ─────────────────────────── */

@media (max-width: 640px) {
	.vr-breadcrumb,
	.vr-hero,
	.vista_rubro { padding-left: 16px; padding-right: 16px; }

	.vr-toolbar { padding-left: 16px; padding-right: 16px; }

	.vr-hero { flex-direction: column; padding-bottom: 2rem; gap: 1.25rem; }
	.vr-hero__title { font-size: 1.75rem; letter-spacing: -.02em; }
	.vr-hero__title::after { width: 40px; height: 3px; margin-top: .5rem; }
	.vr-hero__desc { font-size: .94rem; }
	.vr-hero__img { max-width: 100%; }
	.vr-hero__img img { max-height: 220px; object-fit: cover; width: 100%; border-radius: 10px; }

	.vr-toolbar {
		position: static;
		flex-direction: column;
		align-items: flex-start;
		gap: .55rem;
		backdrop-filter: none;
	}
	.vr-sort-group { flex-wrap: wrap; }
	.vr-sg-nav::before { display: none; }

	.vr-sg-header { padding-top: 2rem; }
	.vr-sg-header h2 { font-size: 1.2rem; }

	.vr-subrubro-section__hd { flex-direction: column; gap: .4rem; align-items: flex-start; }
	.vr-subrubro-section__hd h2 { font-size: 1.15rem; }

	.vr-section-title { font-size: 1.25rem; margin-top: 2rem; }

	.vr-grid--cards   { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); }
	.vr-grid--fullsize { grid-template-columns: 1fr; }
	.vr-grid--compact  { grid-template-columns: 1fr; }

	.vr-posts__list { grid-template-columns: 1fr; }
	.vr-post-card:hover { transform: none; }

	.vr-empty { padding: 3rem 1.25rem; }

	/* Larger pagination touch targets on mobile */
	.vr-page-btn { min-width: 44px; height: 44px; font-size: .88rem; }
	.vr-pages { gap: .4rem; }
}


/* ══════════════════════════════════════════════════════════
   Search page — server-side sort links (same look as .vr-sort-btn)
   ══════════════════════════════════════════════════════════ */

.vr-sort-link {
	display: inline-block;
	padding: .3rem .8rem;
	font-size: .78rem;
	font-weight: 600;
	border: 1px solid var(--c-border, #e2e8f0);
	background: none;
	color: var(--c-text, #334155);
	cursor: pointer;
	border-radius: 999px;
	transition: background .15s, border-color .15s, color .15s, box-shadow .15s;
	text-decoration: none;
	white-space: nowrap;
	line-height: 1.6;
}
.vr-sort-link:hover {
	background: var(--c-surface, #f8fafc);
	border-color: #94a3b8;
	color: var(--c-dark, #0f172a);
}
.vr-sort-link.is-active {
	background: var(--c-orange, #e8530e);
	border-color: var(--c-orange, #e8530e);
	color: #fff;
	box-shadow: 0 2px 8px rgba(232,83,14,.3);
	pointer-events: none;
}


/* ══════════════════════════════════════════════════════════
   Search page — two-column layout (sidebar + results)
   ══════════════════════════════════════════════════════════ */

.bsq-layout {
	display: flex;
	gap: 1.75rem;
	align-items: start;
	max-width: calc(var(--max-w, 1100px) + 56px);
	margin: 0 auto;
	padding: 0 28px 72px;
	box-sizing: border-box;
}

.bsq-sidebar {
	width: 220px;
	flex-shrink: 0;
	position: sticky;
	top: calc(var(--h-header, 76px) + 62px);
	display: flex;
	flex-direction: column;
	gap: .6rem;
}

.bsq-results { flex: 1; min-width: 0; }

/* ── Active filter chips ──────────────────────────────────── */

.bsq-chips {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .4rem;
	margin-top: .75rem;
}

.bsq-chip {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	background: #fef9f7;
	border: 1px solid #f8c4aa;
	color: var(--c-orange, #e8530e);
	border-radius: 999px;
	padding: .25rem .7rem;
	font-size: .73rem;
	font-weight: 600;
	text-decoration: none;
	transition: background .12s;
}
.bsq-chip:hover { background: #fdebd9; }

.bsq-clear-all {
	font-size: .73rem;
	color: var(--c-muted, #64748b);
	text-decoration: none;
	font-weight: 500;
}
.bsq-clear-all:hover { color: var(--c-orange, #e8530e); }

/* ── Filter panel card ────────────────────────────────────── */

.bsq-filter {
	background: #fff;
	border: 1px solid var(--c-border, #e2e8f0);
	border-radius: 10px;
	overflow: hidden;
}

.bsq-filter__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .6rem .9rem;
	font-size: .68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--c-muted, #64748b);
	background: var(--c-surface, #f8fafc);
	border-bottom: 1px solid var(--c-border, #e2e8f0);
}

.bsq-filter__clear {
	font-size: .7rem;
	font-weight: 600;
	color: var(--c-orange, #e8530e);
	text-decoration: none;
	text-transform: none;
	letter-spacing: 0;
}
.bsq-filter__clear:hover { text-decoration: underline; }

.bsq-filter__body { padding: .65rem .9rem; }

/* ── On-sale toggle ───────────────────────────────────────── */

.bsq-oferta-toggle {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .65rem .9rem;
	font-size: .86rem;
	color: var(--c-text, #334155);
	text-decoration: none;
	font-weight: 500;
	transition: background .12s;
	cursor: pointer;
}
.bsq-oferta-toggle:hover { background: #fef9f7; }
.bsq-oferta-toggle.is-active { color: var(--c-orange, #e8530e); font-weight: 600; }

/* ── Checkbox item (brand list) ───────────────────────────── */

.bsq-check-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .2rem;
}

.bsq-check-item {
	display: flex;
	align-items: center;
	gap: .55rem;
	padding: .3rem .1rem;
	font-size: .84rem;
	color: var(--c-text, #334155);
	text-decoration: none;
	border-radius: 5px;
	transition: color .12s;
	cursor: pointer;
}
.bsq-check-item:hover { color: var(--c-dark, #0f172a); }
.bsq-check-item.is-active { color: var(--c-orange, #e8530e); font-weight: 600; }

.bsq-check-box {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	border: 1.5px solid var(--c-border, #e2e8f0);
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: border-color .12s, background .12s;
	color: #fff;
}
.bsq-check-item.is-active .bsq-check-box,
.bsq-oferta-toggle.is-active .bsq-check-box {
	background: var(--c-orange, #e8530e);
	border-color: var(--c-orange, #e8530e);
}

.bsq-check-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bsq-check-count {
	flex-shrink: 0;
	font-size: .7rem;
	color: var(--c-muted, #64748b);
	background: var(--c-surface, #f8fafc);
	border: 1px solid var(--c-border, #e2e8f0);
	padding: .08rem .4rem;
	border-radius: 999px;
	font-weight: 500;
}

/* ── Price range inputs ───────────────────────────────────── */

.bsq-price-form { display: flex; flex-direction: column; gap: .55rem; }

.bsq-price-range {
	display: flex;
	align-items: center;
	gap: .4rem;
}

.bsq-range-input {
	flex: 1;
	min-width: 0;
	border: 1px solid var(--c-border, #e2e8f0);
	border-radius: 6px;
	padding: .38rem .5rem;
	font-size: .82rem;
	font-family: inherit;
	color: var(--c-dark, #0f172a);
	transition: border-color .15s;
	-moz-appearance: textfield;
}
.bsq-range-input::-webkit-outer-spin-button,
.bsq-range-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.bsq-range-input:focus { outline: none; border-color: var(--c-orange, #e8530e); }

.bsq-range-sep { color: var(--c-muted, #64748b); font-size: .85rem; flex-shrink: 0; }

.bsq-apply-btn {
	align-self: flex-end;
	background: var(--c-orange, #e8530e);
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: .38rem .9rem;
	font-size: .78rem;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s;
	font-family: inherit;
}
.bsq-apply-btn:hover { background: #d44a0d; }

/* ── Responsive: sidebar collapses above grid on mobile ───── */

@media (max-width: 768px) {
	.bsq-layout {
		flex-direction: column;
		gap: 1rem;
		padding-left: 16px;
		padding-right: 16px;
	}
	.bsq-sidebar {
		width: 100%;
		position: static;
		flex-direction: row;
		flex-wrap: wrap;
	}
	.bsq-filter {
		flex: 1;
		min-width: 160px;
	}
}


/* Search autocomplete styles moved to /css/search-autocomplete.css
   (loaded globally so the dropdown is styled on every page that has the
   header search box, not just rubro/search pages). */


/* ══════════════════════════════════════════════════════════
   Dual-range price slider  (.bsq-slider-*)
   ══════════════════════════════════════════════════════════ */

.bsq-slider-wrap {
	position: relative;
	height: 20px;
	margin-bottom: .6rem;
}

.bsq-slider-track {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	right: 0;
	height: 4px;
	background: var(--c-border, #e2e8f0);
	border-radius: 2px;
	pointer-events: none;
}

.bsq-slider-fill {
	position: absolute;
	top: 0;
	height: 100%;
	background: var(--c-orange, #e8530e);
	border-radius: 2px;
}

/* Both thumbs sit over the same track; only the thumb knob gets pointer events */
.bsq-slider-thumb {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	pointer-events: none;
	margin: 0;
	padding: 0;
	outline: none;
}

.bsq-slider-thumb::-webkit-slider-runnable-track {
	-webkit-appearance: none;
	background: transparent;
	height: 4px;
}

.bsq-slider-thumb::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--c-orange, #e8530e);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
	cursor: pointer;
	pointer-events: all;
	margin-top: -6px;
	transition: box-shadow .15s;
}

.bsq-slider-thumb:focus::-webkit-slider-thumb {
	box-shadow: 0 0 0 3px rgba(232, 83, 14, .22);
}

.bsq-slider-thumb::-moz-range-track {
	background: transparent;
	height: 4px;
}

.bsq-slider-thumb::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--c-orange, #e8530e);
	box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
	cursor: pointer;
	pointer-events: all;
	transition: box-shadow .15s;
}

.bsq-slider-thumb:focus::-moz-range-thumb {
	box-shadow: 0 0 0 3px rgba(232, 83, 14, .22);
}


/* ══════════════════════════════════════════════════════════
   Search page — polished chrome (hero, sidebar, states)
   ══════════════════════════════════════════════════════════ */

/* Hero refinement for search page */
.bsq-hero {
	align-items: center;
	gap: 2rem;
	padding-top: 1.75rem;
	padding-bottom: 2rem;
	border-bottom: 1px solid var(--c-border, #e2e8f0);
	margin-bottom: 1.25rem;
}
.bsq-hero .vr-hero__title {
	font-size: 2.1rem;
	margin: 0 0 .5rem;
	letter-spacing: -.025em;
}
.bsq-hero .vr-hero__title::after { display: none; }
.bsq-hero__body { display: flex; flex-direction: column; gap: .55rem; }

.bsq-eyebrow {
	font-size: .7rem;
	font-weight: 700;
	color: var(--c-muted, #64748b);
	text-transform: uppercase;
	letter-spacing: .1em;
	margin: 0;
}
.bsq-hero__query { color: var(--c-orange, #e8530e); }

.bsq-hero .vr-hero__count {
	align-self: flex-start;
	font-size: .74rem;
	padding: .3rem 1rem;
}

/* Search form */
.bsq-search-form {
	display: flex;
	align-items: center;
	gap: .4rem;
	background: #fff;
	border: 1.5px solid var(--c-border, #e2e8f0);
	border-radius: 10px;
	padding: .3rem .3rem .3rem .9rem;
	box-shadow: 0 2px 12px rgba(15, 23, 42, .04);
	transition: border-color .15s, box-shadow .15s;
	min-width: 280px;
}
.bsq-search-form:focus-within {
	border-color: var(--c-orange, #e8530e);
	box-shadow: 0 4px 20px rgba(232, 83, 14, .13);
}
.bsq-search-form__input {
	flex: 1;
	border: none;
	outline: none;
	background: transparent;
	font: inherit;
	font-size: .92rem;
	color: var(--c-dark, #0f172a);
	padding: .5rem 0;
	min-width: 0;
}
.bsq-search-form__input::placeholder { color: #94a3b8; }
.bsq-search-form__btn {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	background: var(--c-dark, #0f172a);
	color: #fff;
	border: none;
	border-radius: 7px;
	padding: .55rem 1.05rem;
	font: inherit;
	font-size: .85rem;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s, transform .15s;
	flex-shrink: 0;
}
.bsq-search-form__btn:hover { background: var(--c-orange, #e8530e); }
.bsq-search-form__btn:active { transform: translateY(1px); }

/* Sidebar polish */
.bsq-sidebar {
	gap: .75rem;
}
.bsq-sidebar__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 .25rem .35rem;
	border-bottom: 2px solid var(--c-dark, #0f172a);
	margin-bottom: .25rem;
}
.bsq-sidebar__title {
	font-size: .78rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--c-dark, #0f172a);
	display: inline-flex;
	align-items: center;
	gap: .45rem;
}
.bsq-sidebar__title svg { color: var(--c-orange, #e8530e); }

/* Filter cards: softer and more refined */
.bsq-filter {
	border-radius: 12px;
	border-color: #eef1f5;
	box-shadow: 0 1px 2px rgba(15, 23, 42, .025);
	transition: box-shadow .15s, border-color .15s;
}
.bsq-filter:hover { box-shadow: 0 4px 18px rgba(15, 23, 42, .06); border-color: #e2e8f0; }

.bsq-filter__head {
	background: #fff;
	border-bottom: 1px solid #eef1f5;
	font-size: .72rem;
	letter-spacing: .09em;
	color: var(--c-dark, #0f172a);
	padding: .75rem .95rem;
}

.bsq-filter__body { padding: .85rem .95rem 1rem; }

/* "Solo ofertas" standalone card */
.bsq-oferta-toggle {
	padding: .85rem .95rem;
	font-size: .88rem;
	font-weight: 600;
	color: var(--c-dark, #0f172a);
	border-radius: 12px;
}
.bsq-oferta-toggle .bsq-check-box { width: 17px; height: 17px; border-width: 2px; }

/* Brand check items: tighter, more refined */
.bsq-check-item {
	padding: .4rem .35rem;
	font-size: .85rem;
	transition: background .12s, color .12s;
}
.bsq-check-item:hover { background: #f8fafc; }

.bsq-check-count {
	font-size: .68rem;
	background: #f1f5f9;
	border-color: transparent;
	color: #64748b;
}
.bsq-check-item.is-active .bsq-check-count {
	background: #fef1e9;
	color: var(--c-orange, #e8530e);
	font-weight: 600;
}

/* Chips polish */
.bsq-chips {
	gap: .45rem;
	margin-top: 1rem;
	padding-top: .9rem;
	border-top: 1px dashed var(--c-border, #e2e8f0);
}
.bsq-chip {
	padding: .3rem .75rem;
	box-shadow: 0 1px 2px rgba(232, 83, 14, .08);
}
.bsq-chip svg { opacity: .7; transition: opacity .12s; }
.bsq-chip:hover svg { opacity: 1; }

.bsq-clear-all {
	padding: .3rem .55rem;
	border-radius: 999px;
	transition: background .12s, color .12s;
}
.bsq-clear-all:hover { background: #f1f5f9; }

/* Refined price slider backdrop */
.bsq-price-form { gap: .75rem; }

/* Empty state CTA button */
.bsq-empty-cta {
	display: inline-block;
	background: var(--c-orange, #e8530e);
	color: #fff;
	padding: .6rem 1.5rem;
	border-radius: 8px;
	text-decoration: none;
	font-weight: 600;
	font-size: .88rem;
	margin-top: 1rem;
	box-shadow: 0 4px 14px rgba(232, 83, 14, .22);
	transition: background .15s, transform .15s, box-shadow .15s;
}
.bsq-empty-cta:hover { background: #d44a0d; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(232, 83, 14, .28); }

.vr-empty {
	border-color: #eef1f5;
	background: #fff;
	box-shadow: 0 2px 14px rgba(15, 23, 42, .035);
}
.vr-empty__title {
	font-size: 1.2rem;
	font-weight: 700;
	color: var(--c-dark, #0f172a);
	margin: 0 0 .5rem;
	font-family: var(--font-display, Boldy, 'Arial Black', sans-serif);
	letter-spacing: -.01em;
}

/* Toolbar refinement for search page */
.vr-toolbar {
	border-radius: 10px;
	border: 1px solid #eef1f5;
	margin-top: .25rem;
	box-shadow: 0 2px 12px rgba(15, 23, 42, .04);
}

@media (max-width: 860px) {
	.bsq-hero {
		flex-direction: column;
		align-items: stretch;
		gap: 1.25rem;
	}
	.bsq-search-form { min-width: 0; width: 100%; }
	.bsq-hero .vr-hero__title { font-size: 1.65rem; }
}