/* El Rey De Las Botas — Home landing (Brand Guidelines §1 tints, §7 Soft Brutalism). */

/* ---------- Section rhythm & pastel backgrounds ---------- */
html body .er-sec {
	position: relative;
	padding-top: clamp(48px, 6vw, 88px) !important;
	padding-bottom: clamp(48px, 6vw, 88px) !important;
	border-top: var(--er-bw) solid var(--er-negro);
}
html body .er-sec .elementor-widget-spacer {
	display: none; /* rhythm comes from section padding now */
}
html body .er-bg-mantequilla { background-color: var(--er-mantequilla) !important; }
html body .er-bg-menta       { background-color: var(--er-menta) !important; }
html body .er-bg-salvia      { background-color: var(--er-salvia) !important; }
html body .er-bg-cal         { background-color: var(--er-cal) !important; }
html body .er-bg-verde {
	background-color: var(--er-verde) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cg fill='%23F2B632' fill-opacity='.13'%3E%3Ccircle cx='14' cy='14' r='5'/%3E%3Ccircle cx='42' cy='42' r='5'/%3E%3Ccircle cx='42' cy='14' r='2.5'/%3E%3Ccircle cx='14' cy='42' r='2.5'/%3E%3C/g%3E%3C/svg%3E") !important;
}
/* Brand pattern "Placa de Tacos" on light tints, very subtle. */
html body .er-bg-mantequilla,
html body .er-bg-menta {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cg fill='%230B3D2C' fill-opacity='.06'%3E%3Ccircle cx='14' cy='14' r='5'/%3E%3Ccircle cx='42' cy='42' r='5'/%3E%3Ccircle cx='42' cy='14' r='2.5'/%3E%3Ccircle cx='14' cy='42' r='2.5'/%3E%3C/g%3E%3C/svg%3E") !important;
}

/* ---------- Section header (shortcode) ---------- */
.er-sec-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	max-width: 760px;
	margin: 0 auto clamp(28px, 4vw, 44px);
	text-align: center;
}
.er-sec-head--left {
	align-items: flex-start;
	margin-left: 0;
	text-align: left;
}
html body .er-sec-head .er-sec-title {
	margin: 0;
	font-family: var(--er-fd);
	font-weight: 900;
	font-size: clamp(40px, 6vw, 72px);
	line-height: 0.92;
	letter-spacing: 0;
	text-transform: uppercase;
	color: var(--er-negro);
}
.er-sec-text {
	margin: 0;
	max-width: 56ch;
	font-family: var(--er-fb);
	font-size: 17px;
	line-height: 1.55;
	color: var(--er-grada);
}
.er-sec-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--er-fu);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--er-verde) !important;
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 2px;
}
.er-sec-link .erh-icon { width: 18px; height: 18px; transition: transform .15s ease; }
.er-sec-link:hover .erh-icon { transform: translateX(3px); }

/* ---------- Existing ThemeREX titles restyled to the same system ---------- */
html body .er-sec .sc_title {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
	margin-bottom: clamp(28px, 4vw, 44px);
	text-align: center;
}
html body .er-sec .sc_title .sc_item_subtitle {
	display: inline-block;
	margin: 0 !important;
	padding: 6px 14px;
	font-family: var(--er-fu) !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	line-height: 1.2 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase;
	color: var(--er-negro) !important;
	background-color: var(--er-oro);
	border: var(--er-bw) solid var(--er-negro);
	border-radius: var(--er-r-pill);
	box-shadow: var(--er-sh-sm);
}
html body .er-sec .sc_title .sc_item_title {
	margin: 0 !important;
	font-family: var(--er-fd) !important;
	font-weight: 900 !important;
	font-size: clamp(40px, 6vw, 72px) !important;
	line-height: 0.92 !important;
	letter-spacing: 0 !important;
	text-transform: uppercase;
	color: var(--er-negro) !important;
	text-shadow: none !important;
}
html body .er-sec .sc_title .sc_item_title::before,
html body .er-sec .sc_title .sc_item_title::after {
	display: none !important; /* theme "shadow" title style */
}

/* ---------- Trust bar ---------- */
.erh-trust {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 18px;
	max-width: 1290px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}
.erh-trust__item {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	padding: 18px 20px;
	background: var(--er-blanco);
	border: var(--er-bw) solid var(--er-negro);
	border-radius: var(--er-r);
	box-shadow: var(--er-sh);
}
.erh-trust__item::before { display: none !important; }
.erh-trust__item .erh-icon {
	flex: 0 0 auto;
	width: 44px;
	height: 44px;
	padding: 9px;
	color: var(--er-negro);
	background: var(--er-oro);
	border: var(--er-bw) solid var(--er-negro);
	border-radius: var(--er-r-pill);
}
.erh-trust__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.erh-trust__text strong {
	font-family: var(--er-fu);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--er-negro);
}
.erh-trust__text span {
	font-family: var(--er-fb);
	font-size: 14px;
	line-height: 1.35;
	color: var(--er-grada);
}

/* ---------- "Ver todas" CTA under each grid ---------- */
.er-view-all {
	display: flex;
	justify-content: center;
	margin-top: clamp(28px, 4vw, 40px);
}
.er-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 52px;
	padding: 12px 28px;
	font-family: var(--er-fu);
	font-weight: 700;
	font-size: 17px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none !important;
	border: var(--er-bw) solid var(--er-negro);
	border-radius: var(--er-r-sm);
	box-shadow: var(--er-sh-sm);
	transition: transform .08s ease, box-shadow .08s ease, background-color .15s ease;
}
.er-btn--primary { color: var(--er-cal) !important; background: var(--er-verde); }
.er-btn--primary:hover { color: var(--er-cal) !important; background: var(--er-noche); }
.er-btn:active { transform: translate(3px, 3px); box-shadow: none; }
.er-btn:focus-visible, .er-sec-link:focus-visible { outline: 3px solid var(--er-oro); outline-offset: 3px; }
.er-btn .erh-icon { width: 20px; height: 20px; transition: transform .15s ease; }
.er-btn:hover .erh-icon { transform: translateX(3px); }

/* Product grids on tinted backgrounds: keep cards crisp. */
html body .er-sec ul.products { margin-bottom: 0 !important; }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
	.erh-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.erh-trust { gap: 12px; }
	.erh-trust__item { padding: 12px; gap: 10px; box-shadow: var(--er-sh-sm); }
	.erh-trust__item .erh-icon { width: 38px; height: 38px; padding: 7px; }
	.erh-trust__text strong { font-size: 16px; }
	.erh-trust__text span { font-size: 12px; }
	.er-btn { width: 100%; }
}
@media (max-width: 479px) {
	.erh-trust { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.erh-trust__item { flex-direction: column; align-items: flex-start; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
	.er-btn, .er-btn .erh-icon, .er-sec-link .erh-icon { transition: none; }
}

/* Title section + product section read as one block. */
html body .er-sec.er-sec--head { padding-bottom: 0 !important; }
html body .er-sec.er-sec--body { padding-top: 0 !important; border-top: 0 !important; }
html body .er-sec.er-sec--head .sc_title { margin-bottom: clamp(28px, 4vw, 44px) !important; }
/* First block right under the slider. */
html body .er-sec.er-sec--first { border-top: var(--er-bw) solid var(--er-negro); }
/* Trust bar: compact band. */
html body .er-sec.er-sec--trust {
	padding-top: clamp(28px, 4vw, 44px) !important;
	padding-bottom: clamp(28px, 4vw, 44px) !important;
}
/* Featured grid inside the Novedades section uses WooCommerce's [products] markup. */
html body .er-sec .woocommerce.columns-4 { margin: 0; }

/* =========================================================
   v1.1 — Full-bleed sections, lighter tints, responsive grids
   ========================================================= */

/* Full-bleed: break out of the theme's centered content_wrap, keep content at a readable width. */
html body { overflow-x: clip; }
html body .er-sec {
	width: 100vw !important;
	max-width: 100vw !important;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
	left: auto !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
html body .er-sec > .elementor-container {
	max-width: 1360px !important;
	width: 100%;
	margin: 0 auto;
	padding-left: clamp(16px, 3vw, 40px);
	padding-right: clamp(16px, 3vw, 40px);
	box-sizing: border-box;
}
html body .er-sec > .elementor-container > .elementor-column > .elementor-widget-wrap {
	padding: 0 !important;
}

/* Lighter tints (~45 % of the brand tint over Blanco Cal). */
html body .er-bg-mantequilla { background-color: #F7ECCB !important; }
html body .er-bg-menta       { background-color: #E3EEE1 !important; }
html body .er-bg-cal         { background-color: var(--er-cal) !important; }
html body .er-bg-mantequilla,
html body .er-bg-menta {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Cg fill='%230B3D2C' fill-opacity='.04'%3E%3Ccircle cx='14' cy='14' r='5'/%3E%3Ccircle cx='42' cy='42' r='5'/%3E%3Ccircle cx='42' cy='14' r='2.5'/%3E%3Ccircle cx='14' cy='42' r='2.5'/%3E%3C/g%3E%3C/svg%3E") !important;
}
@supports (background-color: color-mix(in srgb, red 50%, white)) {
	html body .er-bg-mantequilla { background-color: color-mix(in srgb, var(--er-mantequilla) 45%, var(--er-cal)) !important; }
	html body .er-bg-menta       { background-color: color-mix(in srgb, var(--er-menta) 45%, var(--er-cal)) !important; }
}

/* Responsive product grids: 4 → 3 → 2 columns, cards stretch to equal height. */
html body .er-sec .woocommerce,
html body .er-sec .sc_extended_products,
html body .er-sec .sc_extended_products_content {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
html body .er-sec ul.products,
html body .er-sec .woocommerce ul.products {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(14px, 2.2vw, 30px);
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}
html body .er-sec ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
html body .er-sec ul.products::before,
html body .er-sec ul.products::after {
	display: none !important;
	content: none !important;
}
html body .er-sec ul.products li.product {
	float: none !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	clear: none !important;
}
html body .er-sec ul.products li.product .post_item.post_layout_thumbs {
	margin: 0 5px 5px 0 !important;
}

@media (max-width: 1199px) {
	html body .er-sec ul.products,
	html body .er-sec ul.products.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	/* 4 cards → avoid a lonely 4th card: show 2 columns instead of 3 for 4-item grids. */
	html body .er-sec ul.products:has(> li:nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	html body .er-sec ul.products,
	html body .er-sec ul.products.columns-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
	html body .er-sec ul.products li.product .post_item.post_layout_thumbs { margin: 0 3px 3px 0 !important; }
	html body .er-sec-head { margin-bottom: 24px; }
	html body .er-sec-head .er-sec-title,
	html body .er-sec .sc_title .sc_item_title { font-size: clamp(36px, 11vw, 48px) !important; }
	.er-sec-text { font-size: 15px; }
}
@media (max-width: 359px) {
	html body .er-sec ul.products { grid-template-columns: 1fr; }
}

/* Category list ("Nuevos packs") also spans the full content width. */
html body .er-sec .widget_categories_list,
html body .er-sec .sc_widget_categories_list { width: 100%; }

/* Hero section wrapper: no padding/gaps, hero handles its own full-bleed layout. */
html body .er-hero-sec,
html body .er-hero-sec > .elementor-container,
html body .er-hero-sec .elementor-column,
html body .er-hero-sec .elementor-widget-wrap,
html body .er-hero-sec .elementor-widget-shortcode,
html body .er-hero-sec .elementor-shortcode {
	margin: 0 !important;
	padding: 0 !important;
	max-width: none !important;
}
html body .er-hero-sec + .er-sec--first { border-top: 0; }