/*
 * Tema Aurora
 * -----------
 * Skin editorial para PRZshop. Se carga despues de bootstrap + style.min.css
 * (base Porto), que quedan solo como red de seguridad para las paginas que
 * todavia no tienen vista propia en el tema (product, cart, checkout...).
 *
 * Todo el color, radio y tipografia sale de las custom properties --shop-*
 * que emite includes/tema.php: los valores de acá son solo el fallback del
 * tema, y el admin los puede pisar desde Configuración > Apariencia.
 *
 * OJO con las unidades: Porto define html{font-size:62.5%} y despues 9px, asi
 * que `rem` no es confiable en este documento. Todo en px/em a proposito.
 */

/* == 1. Tokens ============================================================ */

:root {
	--au-primary: var(--shop-primary, #0b6e5f);
	--au-primary-dark: var(--shop-primary-dark, #085548);
	--au-primary-tint: var(--shop-primary-tint, #e7f2f0);
	--au-secondary: var(--shop-secondary, #b5651d);
	--au-ink: var(--shop-dark, #12181b);
	--au-text: var(--shop-text, #5c6468);
	--au-bg: var(--shop-bg, #fff);
	--au-surface: var(--shop-surface, #f6f5f2);
	--au-border: var(--shop-border, #e4e2dd);
	--au-radius: var(--shop-radius, 4px);
	--au-font: var(--shop-font, Inter, system-ui, sans-serif);
	--au-font-head: var(--shop-font-head, Fraunces, Georgia, serif);

	--au-shadow: 0 1px 2px rgba(18, 24, 27, .04), 0 8px 24px rgba(18, 24, 27, .06);

	/* legacy.css redefine el .container de Bootstrap con ESTOS mismos valores:
	   si no coinciden, el chrome del tema queda corrido respecto del contenido
	   de las paginas aun sin migrar. */
	--au-gutter: 15px;
	--au-max: 1200px;
}

/* == 2. Base ============================================================== */

body {
	background: var(--au-bg);
	color: var(--au-text) !important;
	font-family: var(--au-font);
	font-size: 15px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--au-font-head);
	color: var(--au-ink);
	font-weight: 600;
	letter-spacing: -.01em;
	line-height: 1.2;
}

a {
	color: var(--au-ink);
	text-decoration: none;
	transition: color .18s ease;
}

a:hover,
a:focus {
	color: var(--au-primary);
	text-decoration: none;
}

img {
	max-width: 100%;
	height: auto;
}

.au-container {
	width: 100%;
	max-width: var(--au-max);
	margin: 0 auto;
	padding: 0 var(--au-gutter);
}

.au-eyebrow {
	font-family: var(--au-font);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--au-primary);
}

.au-section {
	padding: 64px 0;
}

.au-section-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 32px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--au-border);
}

.au-section-head h2 {
	font-size: 30px;
	margin: 0;
}

.au-section-head p {
	margin: 6px 0 0;
	font-size: 14px;
}

.au-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* == 3. Botones y formularios ============================================= */

.au-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 26px;
	border: 1px solid transparent;
	border-radius: var(--au-radius);
	background: var(--au-primary);
	color: #fff;
	font-family: var(--au-font);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}

.au-btn:hover,
.au-btn:focus {
	background: var(--au-primary-dark);
	color: #fff;
}

.au-btn-ghost {
	background: transparent;
	border-color: var(--au-ink);
	color: var(--au-ink);
}

.au-btn-ghost:hover,
.au-btn-ghost:focus {
	background: var(--au-ink);
	border-color: var(--au-ink);
	color: #fff;
}

.au-btn-sm {
	padding: 9px 18px;
	font-size: 12px;
}

.au-field {
	width: 100%;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--au-border);
	border-radius: var(--au-radius);
	background: var(--au-bg);
	color: var(--au-ink);
	font-family: var(--au-font);
	font-size: 14px;
}

.au-field:focus {
	outline: none;
	border-color: var(--au-primary);
	box-shadow: 0 0 0 3px var(--au-primary-tint);
}

select.au-field {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 34px;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 18px) 20px, calc(100% - 13px) 20px;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

/* == 4. Header ============================================================ */

.au-header {
	position: relative;
	z-index: 40;
	background: var(--au-bg);
	border-bottom: 1px solid var(--au-border);
}

.au-topbar {
	background: var(--au-ink);
	color: rgba(255, 255, 255, .72);
	font-size: 12px;
	letter-spacing: .04em;
}

.au-topbar .au-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 38px;
}

.au-topbar a {
	color: rgba(255, 255, 255, .72);
}

.au-topbar a:hover,
.au-topbar a.is-active {
	color: #fff;
}

.au-topbar-links {
	display: flex;
	align-items: center;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.au-topbar-note {
	display: flex;
	align-items: center;
	gap: 8px;
}

.au-currency {
	display: inline-flex;
	gap: 8px;
	align-items: center;
}

.au-currency a.is-active {
	color: #fff;
	font-weight: 600;
}

.au-header-main .au-container {
	display: flex;
	align-items: center;
	gap: 28px;
	min-height: 86px;
}

.au-logo {
	flex: 0 0 auto;
	display: block;
}

.au-logo img {
	display: block;
	max-height: 46px;
	width: auto;
}

.au-search {
	flex: 0 1 620px;
	max-width: 620px;
	/* margenes auto = el espacio sobrante se reparte igual a los dos lados,
	   o sea que queda centrado entre el logo y los iconos. Requiere
	   flex-grow:0, si no el item se queda con todo el espacio libre. */
	margin: 0 auto;
}

.au-search form {
	/* Porto le pone form{margin-bottom:5rem} a todos los formularios. Sin
	   resetearlo, la caja del buscador mide 98px contra 48px del form visible:
	   el flex centra la caja, pero lo que se ve queda 25px mas arriba que el
	   logo y los iconos. */
	margin: 0;
	display: flex;
	align-items: stretch;
	border: 1px solid var(--au-border);
	border-radius: var(--au-radius);
	overflow: hidden;
	background: var(--au-bg);
	transition: border-color .18s ease;
}

.au-search form:focus-within {
	border-color: var(--au-primary);
}

.au-search input[type="search"] {
	flex: 1 1 auto;
	height: 46px;
	padding: 0 16px;
	border: 0;
	background: transparent;
	font-family: var(--au-font);
	font-size: 14px;
	color: var(--au-ink);
}

.au-search input[type="search"]:focus {
	outline: none;
}

.au-search select {
	height: 46px;
	max-width: 170px;
	border: 0;
	border-left: 1px solid var(--au-border);
	background: transparent;
	padding: 0 12px;
	font-family: var(--au-font);
	font-size: 13px;
	color: var(--au-text);
}

.au-search select:focus {
	outline: none;
}

.au-search button {
	flex: 0 0 auto;
	width: 52px;
	border: 0;
	/* En reposo va el primario, no --au-ink: en los skins oscuros esa variable
	   toma un valor claro (la paleta invierte los roles) y el boton salia
	   practicamente blanco. Con el primario funciona igual en claro y en oscuro. */
	background: var(--au-primary);
	color: #fff;
	cursor: pointer;
	transition: background .18s ease;
}

/* el hover aclara el mismo color en vez de cambiarlo: asi sirve para cualquier
   paleta que se configure desde el admin, sin depender de un segundo tono */
.au-search button:hover {
	filter: brightness(1.14);
}

.au-actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 6px;
}

.au-icon-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: var(--au-radius);
	color: var(--au-ink);
	transition: background .18s ease, color .18s ease;
}

.au-icon-btn:hover {
	background: var(--au-surface);
	color: var(--au-primary);
}

.au-icon-btn svg {
	width: 21px;
	height: 21px;
}

.au-icon-btn.is-on {
	color: var(--au-primary);
}

.au-badge {
	position: absolute;
	top: 4px;
	right: 2px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	border-radius: 9px;
	background: var(--au-primary);
	color: #fff;
	font-family: var(--au-font);
	font-size: 11px;
	font-weight: 600;
	line-height: 18px;
	text-align: center;
}

.au-burger {
	display: none;
	width: 42px;
	height: 42px;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	color: var(--au-ink);
	cursor: pointer;
}

/* -- nav principal -- */

.au-nav {
	border-top: 1px solid var(--au-border);
	background: var(--au-bg);
}

.au-nav-list {
	display: flex;
	align-items: stretch;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.au-nav-list > li > a {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 15px 16px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--au-ink);
	position: relative;
}

.au-nav-list > li > a::after {
	content: "";
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 0;
	height: 2px;
	background: var(--au-primary);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .22s ease;
}

.au-nav-list > li:hover > a::after,
.au-nav-list > li.is-active > a::after {
	transform: scaleX(1);
}

.au-has-sub {
	position: relative;
}

.au-submenu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 240px;
	margin: 0;
	padding: 10px 0;
	list-style: none;
	background: var(--au-bg);
	border: 1px solid var(--au-border);
	border-radius: var(--au-radius);
	box-shadow: var(--au-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
	z-index: 50;
}

.au-has-sub:hover > .au-submenu,
.au-has-sub:focus-within > .au-submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.au-submenu li {
	position: relative;
}

.au-submenu a {
	display: block;
	padding: 9px 20px;
	font-size: 14px;
	color: var(--au-text);
}

.au-submenu a:hover {
	background: var(--au-surface);
	color: var(--au-primary);
}

.au-submenu .au-submenu {
	top: -10px;
	left: 100%;
}

/* == 5. Drawer mobile ===================================================== */

.au-drawer-overlay {
	position: fixed;
	inset: 0;
	background: rgba(18, 24, 27, .5);
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, visibility .25s;
	z-index: 100;
}

.au-drawer {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: 320px;
	max-width: 88vw;
	background: var(--au-bg);
	transform: translateX(-100%);
	transition: transform .28s ease;
	z-index: 101;
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}

body.au-drawer-open .au-drawer-overlay {
	opacity: 1;
	visibility: visible;
}

body.au-drawer-open .au-drawer {
	transform: translateX(0);
}

body.au-drawer-open {
	overflow: hidden;
}

.au-drawer-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 20px;
	border-bottom: 1px solid var(--au-border);
}

.au-drawer-close {
	border: 0;
	background: transparent;
	font-size: 24px;
	line-height: 1;
	color: var(--au-ink);
	cursor: pointer;
}

.au-drawer-body {
	padding: 12px 0 32px;
}

.au-drawer-menu,
.au-drawer-menu ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.au-drawer-menu a {
	display: block;
	padding: 12px 20px;
	font-size: 14px;
	font-weight: 500;
	color: var(--au-ink);
	border-bottom: 1px solid var(--au-border);
}

.au-drawer-menu ul a {
	padding-left: 36px;
	font-weight: 400;
	color: var(--au-text);
}

.au-drawer-menu ul ul a {
	padding-left: 52px;
	font-size: 13px;
}

.au-drawer-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.au-drawer-toggle::after {
	content: "+";
	font-size: 18px;
	line-height: 1;
	color: var(--au-text);
}

.au-drawer-item.is-open > .au-drawer-toggle::after {
	content: "–";
}

.au-drawer-item > ul {
	display: none;
	background: var(--au-surface);
}

.au-drawer-item.is-open > ul {
	display: block;
}

.au-drawer-foot {
	margin-top: auto;
	padding: 20px;
	border-top: 1px solid var(--au-border);
	display: flex;
	gap: 14px;
}

/* == 6. Hero / home ======================================================= */

.au-hero {
	position: relative;
	background: var(--au-surface);
}

.au-hero-track {
	display: flex;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scrollbar-width: none;
}

.au-hero-track::-webkit-scrollbar {
	display: none;
}

.au-slide {
	position: relative;
	flex: 0 0 100%;
	scroll-snap-align: start;
	min-height: 440px;
	display: flex;
	align-items: center;
}

.au-slide img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.au-slide::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(18, 24, 27, .72) 0%, rgba(18, 24, 27, .35) 55%, rgba(18, 24, 27, 0) 100%);
}

.au-slide-content {
	position: relative;
	z-index: 2;
	max-width: 560px;
	padding: 48px 0;
	color: #fff;
}

.au-slide-content .au-eyebrow {
	color: #fff;
	opacity: .85;
}

.au-slide-content h2 {
	margin: 12px 0 26px;
	font-size: 46px;
	color: #fff;
}

.au-hero-dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 22px;
	display: flex;
	justify-content: center;
	gap: 8px;
	z-index: 3;
}

.au-hero-dots button {
	width: 28px;
	height: 3px;
	padding: 0;
	border: 0;
	background: rgba(255, 255, 255, .45);
	cursor: pointer;
	transition: background .2s ease;
}

.au-hero-dots button.is-active {
	background: #fff;
}

.au-usp {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1px;
	background: var(--au-border);
	border: 1px solid var(--au-border);
	border-radius: var(--au-radius);
	overflow: hidden;
	margin-top: 48px;
}

.au-usp > div {
	background: var(--au-bg);
	padding: 24px 26px;
}

.au-usp strong {
	display: block;
	font-family: var(--au-font-head);
	font-size: 16px;
	color: var(--au-ink);
	margin-bottom: 2px;
}

.au-usp span {
	font-size: 13px;
}

/* == 7. Grilla y card de producto ========================================= */

.au-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 36px 28px;
}

.au-grid-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.au-card {
	position: relative;
	display: flex;
	flex-direction: column;
}

.au-card-media {
	position: relative;
	display: block;
	background: var(--au-surface);
	border-radius: var(--au-radius);
	overflow: hidden;
	aspect-ratio: 1 / 1;
}

.au-card-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}

.au-card:hover .au-card-media img {
	transform: scale(1.045);
}

.au-card-flag {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	padding: 4px 10px;
	background: var(--au-secondary);
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	border-radius: var(--au-radius);
}

.au-card-wish {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: var(--au-ink);
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity .2s ease, transform .2s ease, color .2s ease;
}

.au-card:hover .au-card-wish,
.au-card-wish:focus {
	opacity: 1;
	transform: translateY(0);
}

.au-card-wish:hover {
	color: var(--au-primary);
}

.au-card-cta {
	position: absolute;
	left: 12px;
	right: 12px;
	bottom: 12px;
	z-index: 2;
	text-align: center;
	padding: 11px 0;
	background: var(--au-ink);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	border-radius: var(--au-radius);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .22s ease, transform .22s ease, background .18s ease;
}

.au-card:hover .au-card-cta {
	opacity: 1;
	transform: translateY(0);
}

.au-card-cta:hover {
	background: var(--au-primary);
	color: #fff;
}

.au-card-body {
	padding-top: 14px;
}

.au-card-cat {
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--au-text);
	margin-bottom: 6px;
}

.au-card-title {
	font-size: 16px;
	margin: 0 0 8px;
	line-height: 1.35;
}

.au-card-title a {
	color: var(--au-ink);
}

.au-card-title a:hover {
	color: var(--au-primary);
}

.au-card-price {
	font-family: var(--au-font);
	font-size: 16px;
	font-weight: 600;
	color: var(--au-ink);
}

.au-card-price small {
	font-size: 13px;
	font-weight: 400;
	color: var(--au-text);
}

/* == 8. Catalogo ========================================================== */

.au-crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 22px 0;
	list-style: none;
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--au-text);
}

.au-crumbs li + li::before {
	content: "/";
	margin-right: 8px;
	color: var(--au-border);
}

.au-crumbs a {
	color: var(--au-text);
}

.au-crumbs a:hover {
	color: var(--au-primary);
}

.au-crumbs .is-current {
	color: var(--au-ink);
	font-weight: 600;
}

.au-catalog {
	display: grid;
	grid-template-columns: 268px minmax(0, 1fr);
	gap: 44px;
	padding-bottom: 72px;
}

.au-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 0 18px;
	border-bottom: 1px solid var(--au-border);
	margin-bottom: 32px;
}

.au-toolbar-group {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
}

.au-toolbar-group label {
	margin: 0;
	color: var(--au-text);
	white-space: nowrap;
}

.au-toolbar select {
	height: 38px;
	min-width: 132px;
	padding: 0 30px 0 12px;
	border: 1px solid var(--au-border);
	border-radius: var(--au-radius);
	background-color: var(--au-bg);
	font-family: var(--au-font);
	font-size: 13px;
	color: var(--au-ink);
	appearance: none;
	-webkit-appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 16px) 17px, calc(100% - 11px) 17px;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

.au-filter-open {
	display: none;
}

.au-facet + .au-facet {
	margin-top: 28px;
	padding-top: 28px;
	border-top: 1px solid var(--au-border);
}

.au-facet h3 {
	font-family: var(--au-font);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--au-ink);
	margin: 0 0 14px;
}

.au-facet ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.au-facet li + li {
	margin-top: 2px;
}

.au-facet a {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 6px 0;
	font-size: 14px;
	color: var(--au-text);
}

.au-facet a:hover {
	color: var(--au-primary);
}

.au-facet .au-count {
	font-size: 12px;
	color: var(--au-border);
}

.au-facet-sub {
	margin-left: 12px !important;
	padding-left: 12px !important;
	border-left: 1px solid var(--au-border);
}

.au-price-filter {
	margin-top: 4px;
}

.au-price-filter .au-price-inputs {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 14px;
}

.au-price-filter .au-field {
	height: 38px;
	font-size: 13px;
}

.au-empty {
	grid-column: 1 / -1;
	padding: 72px 0;
	text-align: center;
	color: var(--au-text);
}

.au-empty strong {
	display: block;
	font-family: var(--au-font-head);
	font-size: 22px;
	color: var(--au-ink);
	margin-bottom: 8px;
}

.au-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 48px 0 0;
	padding: 0;
	list-style: none;
}

.au-pager a,
.au-pager span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	border: 1px solid var(--au-border);
	border-radius: var(--au-radius);
	font-size: 14px;
	color: var(--au-ink);
}

.au-pager a:hover {
	border-color: var(--au-ink);
}

.au-pager .is-current {
	background: var(--au-ink);
	border-color: var(--au-ink);
	color: #fff;
	font-weight: 600;
}

/* == 9. Footer ============================================================ */

.au-footer {
	margin-top: 0;
	background: var(--au-ink);
	color: rgba(255, 255, 255, .66);
	font-size: 14px;
}

.au-footer a {
	color: rgba(255, 255, 255, .66);
}

.au-footer a:hover {
	color: #fff;
}

.au-footer-top {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1fr;
	gap: 40px;
	padding: 64px 0 48px;
}

.au-footer h4 {
	font-family: var(--au-font);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 18px;
}

.au-footer ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.au-footer li + li {
	margin-top: 9px;
}

.au-footer-brand p {
	margin: 0 0 18px;
	max-width: 34ch;
}

.au-social {
	display: flex;
	gap: 10px;
}

.au-social-footer {
	margin-top: 20px;
}

.au-social a svg {
	display: block;
}

.au-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: var(--au-radius);
	color: rgba(255, 255, 255, .66);
}

.au-social a:hover {
	background: var(--au-primary);
	border-color: var(--au-primary);
	color: #fff;
}

.au-footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 20px 0 24px;
	border-top: 1px solid rgba(255, 255, 255, .12);
	font-size: 13px;
}

/* == 10. Barra inferior mobile + flotantes ================================ */

.au-tabbar {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 60;
	background: var(--au-bg);
	border-top: 1px solid var(--au-border);
	box-shadow: 0 -2px 14px rgba(18, 24, 27, .07);
}

.au-tabbar a {
	position: relative;
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 9px 0 7px;
	font-size: 10px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--au-text);
}

.au-tabbar a svg {
	width: 20px;
	height: 20px;
}

.au-tabbar a:hover,
.au-tabbar a.is-active {
	color: var(--au-primary);
}

.au-tabbar .au-badge {
	top: 2px;
	right: 50%;
	margin-right: -20px;
}

.au-whatsapp {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 55;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: var(--au-shadow);
}

.au-whatsapp img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.au-top {
	position: fixed;
	right: 18px;
	bottom: 84px;
	z-index: 55;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: var(--au-radius);
	background: var(--au-ink);
	color: #fff;
	opacity: 0;
	visibility: hidden;
	transition: opacity .22s ease, visibility .22s;
}

.au-top.is-visible {
	opacity: 1;
	visibility: visible;
}

/* -- banner de cookies (el markup lo emite el footer del tema) -- */

.cookie-consent-banner {
	display: none;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 9999;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	padding: 16px 24px;
	background: var(--au-ink);
	color: #fff;
	font-size: 14px;
}

.cookie-consent-banner.active {
	display: flex;
}

.cookie-consent-text {
	flex: 1 1 260px;
}

.cookie-consent-actions {
	display: flex;
	gap: 10px;
	flex: 0 0 auto;
}

.cookie-consent-actions button {
	border: 1px solid transparent;
	border-radius: var(--au-radius);
	padding: 9px 20px;
	font-family: var(--au-font);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

#cookie-consent-accept {
	background: var(--au-primary);
	color: #fff;
}

#cookie-consent-accept:hover {
	background: var(--au-primary-dark);
}

#cookie-consent-reject {
	background: transparent;
	color: #fff;
	border-color: rgba(255, 255, 255, .4);
}

#cookie-consent-reject:hover {
	border-color: #fff;
}

/* == 11. Puente con el markup heredado (Porto) ============================ *
 * Las paginas que todavia no tienen vista propia en Aurora (product, cart,
 * checkout, dashboard...) siguen emitiendo el HTML de Porto. Esto las alinea
 * con los tokens del tema para que no se vean como otro sitio.
 * A medida que esas paginas se migren a views/, este bloque se achica.
 * ------------------------------------------------------------------------ */

.main .container h1,
.main .container h2,
.main .container h3 {
	font-family: var(--au-font-head);
}

.btn,
.btn-primary,
.btn-dark {
	border-radius: var(--au-radius) !important;
	font-family: var(--au-font);
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	box-shadow: none !important;
}

.btn-primary,
.btn-dark {
	background-color: var(--au-primary) !important;
	border-color: var(--au-primary) !important;
	color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-dark:hover,
.btn-dark:focus {
	background-color: var(--au-primary-dark) !important;
	border-color: var(--au-primary-dark) !important;
}

.bg-primary {
	background-color: var(--au-primary) !important;
}

.text-primary,
.product-price,
.product-title a:hover {
	color: var(--au-primary) !important;
}

/* Buscador de direcciones de Google Places en el checkout. Es un web component,
   asi que hay que forzarle el ancho para que no salga con su tamaño por defecto. */
#ac-slot gmp-place-autocomplete,
#ac-slot > * {
	width: 100%;
}

#ac-slot {
	--gmp-mat-color-surface: var(--au-bg);
	--gmp-mat-color-on-surface: var(--au-ink);
	--gmp-mat-color-outline: var(--au-border);
}

/* Metodos de envio (carrito y checkout) */
.envio-gratis,
.envio-costo {
	margin-left: 6px;
	font-family: var(--au-font);
	font-size: 12px;
	font-weight: 600;
}

.envio-gratis {
	padding: 2px 8px;
	border-radius: var(--au-radius);
	background: var(--au-primary-tint);
	color: var(--au-primary-dark);
	text-transform: uppercase;
	letter-spacing: .08em;
}

.envio-costo {
	color: var(--au-ink);
}

.envio-desc {
	display: block;
	margin-top: 2px;
	font-size: 12px;
	line-height: 1.45;
	color: var(--au-text);
}

.envio-nota {
	margin: 10px 0 0;
	padding-top: 10px;
	border-top: 1px solid var(--au-border);
	font-size: 12px;
	color: var(--au-text);
}

/* Mapa de ubicacion en el checkout (solo si hay zonas dibujadas) */
.envio-mapa-ayuda {
	margin: 0 0 10px;
	font-size: 13px;
	color: var(--au-text);
}

#mapa-envio {
	width: 100%;
	height: 300px;
	margin-top: 10px;
	border: 1px solid var(--au-border);
	border-radius: var(--au-radius);
}

.envio-mapa-estado {
	margin: 8px 0 0;
	font-size: 12px;
	color: var(--au-text);
}

/* Armado del plan de suscripcion en la ficha (productos.tipo=2) */
.product-subscription {
	margin: 0 0 24px;
	padding: 20px;
	background: var(--au-surface);
	border: 1px solid var(--au-border);
	border-radius: var(--au-radius);
}

.product-subscription .form-group {
	margin-bottom: 14px;
}

.product-subscription label {
	display: block;
	margin-bottom: 5px;
	font-family: var(--au-font);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--au-text);
}

.product-subscription-resumen {
	margin: 4px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--au-border);
	font-size: 14px;
	color: var(--au-text);
}

.product-subscription-resumen strong {
	color: var(--au-primary);
}

/* Datos de transferencia (includes/transferencia.inc.php) */
.transferencia-cuentas {
	margin: 18px 0;
	padding: 0;
	list-style: none;
}

.transferencia-cuentas li {
	padding: 14px 16px;
	border: 1px solid var(--au-border);
	border-radius: var(--au-radius);
	background: var(--au-surface);
}

.transferencia-cuentas li + li {
	margin-top: 8px;
}

.transferencia-cuentas strong {
	display: block;
	color: var(--au-ink);
}

.transferencia-numero {
	display: block;
	font-size: 17px;
	font-weight: 600;
	color: var(--au-primary);
	letter-spacing: .02em;
}

.transferencia-titular,
.transferencia-moneda {
	display: block;
	font-size: 13px;
}

/* Boton "Repetir" en Mis compras (repetir.php) */
.order-repeat {
	margin-left: 12px;
	padding-left: 12px;
	border-left: 1px solid var(--au-border);
}

.product-subtotal-label {
	display: block;
	margin-bottom: 2px;
	font-family: var(--au-font);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--au-text);
}

.form-control {
	border-radius: var(--au-radius);
	border-color: var(--au-border);
	font-family: var(--au-font);
}

.form-control:focus {
	border-color: var(--au-primary);
	box-shadow: 0 0 0 3px var(--au-primary-tint);
}

.page-header {
	background: var(--au-surface);
	border-color: var(--au-border);
}

/* las migas heredadas van sin fondo, igual que .au-crumbs en las vistas
   propias del tema: con banda gris quedaban como un bloque suelto */
.breadcrumb-nav {
	background: transparent;
	border: 0;
	padding: 22px 0;
}

.breadcrumb-nav .breadcrumb {
	background: transparent;
	margin: 0;
	padding: 0;
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.product-default figure {
	border-radius: var(--au-radius);
	overflow: hidden;
	background: var(--au-surface);
}

.product-default .product-title {
	font-family: var(--au-font-head);
}

.card,
.panel,
.checkout-steps,
.cart-table {
	border-radius: var(--au-radius);
	border-color: var(--au-border);
}

/* flotantes que emiten las paginas heredadas con las clases de Porto */
.float-whatsapp {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 55;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: var(--au-shadow);
}

.float-whatsapp img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

#scroll-top {
	right: 18px;
	bottom: 84px;
	border-radius: var(--au-radius);
	background: var(--au-ink);
	color: #fff;
}

table.cart-table thead th,
.checkout .card-header {
	background: var(--au-surface);
	color: var(--au-ink);
	font-family: var(--au-font);
	letter-spacing: .08em;
	text-transform: uppercase;
	font-size: 12px;
}

/* == 12. Responsive ======================================================= */

@media (max-width: 1199px) {
	.au-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.au-catalog {
		grid-template-columns: 240px minmax(0, 1fr);
		gap: 32px;
	}
}

@media (max-width: 991px) {
	.au-burger {
		display: inline-flex;
	}

	.au-nav,
	.au-topbar-links {
		display: none;
	}

	.au-header-main .au-container {
		min-height: 68px;
		gap: 12px;
		flex-wrap: wrap;
	}

	.au-search {
		order: 3;
		flex: 1 0 100%;
		max-width: none;
		margin: 0;
		padding-bottom: 14px;
	}

	.au-search select {
		display: none;
	}

	.au-slide {
		min-height: 340px;
	}

	.au-slide-content h2 {
		font-size: 32px;
	}

	.au-catalog {
		grid-template-columns: minmax(0, 1fr);
	}

	.au-facets {
		display: none;
	}

	.au-facets.is-open {
		display: block;
		margin-bottom: 28px;
		padding: 22px;
		background: var(--au-surface);
		border-radius: var(--au-radius);
	}

	.au-filter-open {
		display: inline-flex;
	}

	.au-footer-top {
		grid-template-columns: repeat(2, 1fr);
		gap: 32px;
		padding: 48px 0 36px;
	}

	.au-usp {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 767px) {
	.au-section {
		padding: 40px 0;
	}

	.au-section-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}

	.au-section-head h2 {
		font-size: 24px;
	}

	.au-grid,
	.au-grid-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 26px 16px;
	}

	.au-card-cta,
	.au-card-wish {
		opacity: 1;
		transform: none;
	}

	.au-tabbar {
		display: flex;
	}

	.au-footer {
		padding-bottom: 60px;
	}

	.au-whatsapp,
	.float-whatsapp {
		bottom: 74px;
		width: 48px;
		height: 48px;
	}

	.au-top,
	#scroll-top {
		bottom: 130px;
	}

	.au-footer-top {
		grid-template-columns: 1fr;
	}
}


/* == Pulido global ========================================================= *
 * Sin Porto (style.min.css) el html vuelve al font-size estandar de 16px.
 * Aurora ya estaba escrita en px a proposito, asi que nada se mueve.
 * ------------------------------------------------------------------------ */

:focus-visible {
	outline: 2px solid var(--au-primary);
	outline-offset: 2px;
	border-radius: 2px;
}

::selection {
	background: var(--au-primary);
	color: #fff;
}

.au-btn.disabled,
.au-btn[disabled] {
	background: var(--au-border);
	color: var(--au-text);
	cursor: not-allowed;
	pointer-events: auto;
}

.au-btn:active:not(.disabled):not([disabled]) {
	transform: translateY(1px);
}

/* radios y checkboxes nativos, tintados con la paleta del skin */
input[type="radio"],
input[type="checkbox"] {
	accent-color: var(--au-primary);
}

.au-alert {
	margin: 18px 0;
	padding: 13px 16px;
	border: 1px solid var(--au-border);
	border-left: 4px solid var(--au-secondary);
	border-radius: var(--au-radius);
	background: var(--au-surface);
	font-size: 14px;
	color: var(--au-ink);
}

/* == Barra de progreso de compra ========================================== */

.au-steps {
	display: flex;
	justify-content: center;
	gap: 0;
	margin: 26px 0 34px;
	padding: 0;
	list-style: none;
	counter-reset: paso;
}

.au-steps li {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 22px;
	counter-increment: paso;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--au-text);
}

.au-steps li::before {
	content: counter(paso);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border: 2px solid var(--au-border);
	border-radius: 50%;
	font-size: 12px;
	background: var(--au-bg);
}

.au-steps li.is-active {
	color: var(--au-ink);
}

.au-steps li.is-active::before {
	border-color: var(--au-primary);
	background: var(--au-primary);
	color: #fff;
}

.au-steps li.is-done::before {
	content: "✓";
	border-color: var(--au-primary);
	color: var(--au-primary);
}

.au-steps a {
	color: inherit;
}

@media (max-width: 767px) {
	.au-steps li {
		padding: 0 10px;
		font-size: 11px;
	}
}

/* == Stepper de cantidad ================================================== */

.au-qty {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var(--au-border);
	border-radius: var(--au-radius);
	overflow: hidden;
	background: var(--au-bg);
}

.au-qty button {
	width: 38px;
	border: 0;
	background: var(--au-surface);
	color: var(--au-ink);
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
	transition: background .15s ease;
}

.au-qty button:hover {
	background: var(--au-primary-tint);
	color: var(--au-primary-dark);
}

.au-qty input {
	width: 52px;
	height: 44px;
	border: 0;
	text-align: center;
	font-family: var(--au-font);
	font-size: 15px;
	font-weight: 600;
	color: var(--au-ink);
	background: var(--au-bg);
	-moz-appearance: textfield;
}

.au-qty input::-webkit-outer-spin-button,
.au-qty input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.au-qty input:focus {
	outline: none;
}

/* == Pestañas ============================================================= */

.au-tabs {
	margin: 56px 0 40px;
}

.au-tabs-nav {
	display: flex;
	gap: 4px;
	border-bottom: 1px solid var(--au-border);
	overflow-x: auto;
}

.au-tabs-nav button {
	padding: 12px 20px;
	border: 0;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	background: none;
	font-family: var(--au-font);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--au-text);
	cursor: pointer;
	white-space: nowrap;
	transition: color .15s ease, border-color .15s ease;
}

.au-tabs-nav button:hover {
	color: var(--au-ink);
}

.au-tabs-nav button.is-active {
	color: var(--au-ink);
	border-bottom-color: var(--au-primary);
}

.au-tab-pane {
	display: none;
	padding: 26px 2px;
	font-size: 15px;
	line-height: 1.75;
}

.au-tab-pane.is-active {
	display: block;
}

.au-chip {
	display: inline-block;
	padding: 7px 15px;
	border: 1px solid var(--au-border);
	border-radius: var(--au-radius);
	font-size: 13px;
	color: var(--au-ink);
	background: var(--au-bg);
}

/* == Ficha de producto ==================================================== */

.au-product {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
	gap: 48px;
	padding: 8px 0 20px;
}

.au-pgal-main {
	position: relative;
	aspect-ratio: 1 / 1;
	border-radius: var(--au-radius);
	overflow: hidden;
	background: var(--au-surface);
}

.au-pgal-main img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.au-pgal-flag {
	position: absolute;
	top: 14px;
	left: 14px;
	z-index: 2;
	padding: 5px 12px;
	border-radius: var(--au-radius);
	background: var(--au-secondary);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.au-pgal-nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: var(--au-ink);
	cursor: pointer;
	opacity: 0;
	transition: opacity .2s ease;
}

.au-pgal-main:hover .au-pgal-nav {
	opacity: 1;
}

.au-pgal-nav:hover {
	color: var(--au-primary);
}

[data-gal-prev] { left: 12px; }
[data-gal-next] { right: 12px; }

.au-pgal-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 12px;
}

.au-pgal-thumbs button {
	width: 72px;
	height: 72px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: var(--au-radius);
	overflow: hidden;
	background: var(--au-surface);
	cursor: pointer;
	transition: border-color .15s ease;
}

.au-pgal-thumbs button img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.au-pgal-thumbs button.is-active {
	border-color: var(--au-primary);
}

.au-pinfo h1 {
	font-size: 34px;
	margin: 0 0 12px;
	line-height: 1.15;
}

.au-pinfo-precio {
	display: flex;
	align-items: baseline;
	gap: 12px;
	margin-bottom: 18px;
}

.au-pinfo-precio .actual {
	font-family: var(--au-font);
	font-size: 26px;
	font-weight: 700;
	color: var(--au-ink);
}

.au-pinfo-precio .anterior {
	font-size: 16px;
	color: var(--au-text);
	text-decoration: line-through;
}

.au-pinfo-desc {
	font-size: 15px;
	line-height: 1.7;
	color: var(--au-text);
	margin-bottom: 18px;
}

.au-pinfo-meta {
	margin: 0 0 26px;
	padding: 14px 0;
	border-top: 1px solid var(--au-border);
	border-bottom: 1px solid var(--au-border);
	list-style: none;
	font-size: 13px;
	color: var(--au-text);
}

.au-pinfo-meta li + li {
	margin-top: 5px;
}

.au-pinfo-meta strong {
	color: var(--au-ink);
	font-weight: 600;
}

.au-pinfo-meta a {
	color: var(--au-primary);
}

.au-variantes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 14px;
	margin-bottom: 20px;
}

.au-variantes label,
.au-compra-sub label {
	display: block;
	margin-bottom: 5px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--au-text);
}

.au-subtotal {
	margin-bottom: 18px;
}

.au-subtotal .rotulo {
	display: block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--au-text);
	margin-bottom: 2px;
}

.au-subtotal .monto {
	font-size: 22px;
	font-weight: 700;
	color: var(--au-primary);
}

.au-compra {
	display: flex;
	align-items: stretch;
	gap: 12px;
	margin-bottom: 14px;
}

.au-compra .au-btn {
	flex: 1 1 auto;
	max-width: 340px;
}

.au-stockmsg {
	min-height: 20px;
	font-size: 13px;
	color: var(--au-secondary);
	margin-bottom: 8px;
}

.au-wish-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--au-text);
}

.au-wish-link:hover {
	color: var(--au-primary);
}

@media (max-width: 991px) {
	.au-product {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.au-pinfo h1 {
		font-size: 26px;
	}
}

/* == Carrito ============================================================== */

.au-cart {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
	gap: 40px;
	align-items: start;
	padding-bottom: 64px;
}

.au-cart-list {
	border: 1px solid var(--au-border);
	border-radius: var(--au-radius);
	overflow: hidden;
}

.au-cart-item {
	display: grid;
	grid-template-columns: 86px minmax(0, 1fr) auto auto;
	gap: 18px;
	align-items: center;
	padding: 16px;
	background: var(--au-bg);
}

.au-cart-item + .au-cart-item {
	border-top: 1px solid var(--au-border);
}

.au-cart-img {
	width: 86px;
	height: 86px;
	border-radius: var(--au-radius);
	overflow: hidden;
	background: var(--au-surface);
	display: block;
}

.au-cart-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.au-cart-nombre a {
	font-weight: 600;
	font-size: 15px;
	color: var(--au-ink);
}

.au-cart-nombre a:hover {
	color: var(--au-primary);
}

.au-cart-variante {
	font-size: 12px;
	color: var(--au-text);
	margin-top: 2px;
}

.au-cart-unit {
	font-size: 12px;
	color: var(--au-text);
	margin-top: 6px;
}

.au-cart-sub {
	text-align: right;
	min-width: 110px;
}

.au-cart-sub .monto {
	font-size: 16px;
	font-weight: 700;
	color: var(--au-ink);
	white-space: nowrap;
}

.au-cart-quitar {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin-top: 8px;
	font-size: 12px;
	color: var(--au-text);
}

.au-cart-quitar:hover {
	color: var(--au-secondary);
}

.au-resumen {
	position: sticky;
	top: 20px;
	padding: 24px;
	border: 1px solid var(--au-border);
	border-radius: var(--au-radius);
	background: var(--au-surface);
}

.au-resumen h3 {
	font-size: 19px;
	margin: 0 0 18px;
}

.au-resumen-linea {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	padding: 9px 0;
	font-size: 14px;
	color: var(--au-text);
}

.au-resumen-linea strong {
	color: var(--au-ink);
}

.au-resumen-total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	margin-top: 10px;
	padding-top: 14px;
	border-top: 2px solid var(--au-border);
	font-size: 15px;
	font-weight: 600;
	color: var(--au-ink);
}

.au-resumen-total .monto {
	font-size: 22px;
	font-weight: 700;
}

.au-resumen .au-btn {
	width: 100%;
	margin-top: 18px;
}

.au-resumen-envios {
	margin: 6px 0 4px;
	padding-top: 10px;
	border-top: 1px solid var(--au-border);
}

@media (max-width: 991px) {
	.au-cart {
		grid-template-columns: 1fr;
	}

	.au-cart-item {
		grid-template-columns: 70px minmax(0, 1fr);
	}

	.au-cart-qtycell,
	.au-cart-sub {
		grid-column: 2;
		justify-self: start;
		text-align: left;
	}

	.au-resumen {
		position: static;
	}
}

/* == Opciones (envio / pago) ============================================== */

.au-opt {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 14px;
	border: 1px solid var(--au-border);
	border-radius: var(--au-radius);
	background: var(--au-bg);
	cursor: pointer;
	margin: 0 0 8px;
	font-weight: 400;
	transition: border-color .15s ease;
}

.au-opt:hover {
	border-color: var(--au-primary);
}

.au-opt:has(input:checked) {
	border-color: var(--au-primary);
	background: var(--au-primary-tint);
}

.au-opt input {
	margin-top: 3px;
	flex: 0 0 auto;
}

.au-opt-body {
	flex: 1 1 auto;
	font-size: 14px;
	color: var(--au-ink);
}

.au-opt-body strong {
	font-weight: 600;
}

.au-opt-logos {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 6px;
}

.au-opt-logos img {
	height: 24px;
	width: auto;
	border-radius: 3px;
}

/* == Checkout ============================================================= */

.au-checkout {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 44px;
	align-items: start;
	padding-bottom: 64px;
}

.au-checkout h2 {
	font-size: 22px;
	margin: 0 0 20px;
}

.au-checkout .form-group {
	margin-bottom: 15px;
}

.au-checkout label {
	display: block;
	margin-bottom: 5px;
	font-size: 13px;
	font-weight: 600;
	color: var(--au-ink);
}

.au-checkout label .required {
	color: var(--au-secondary);
	border: 0;
	text-decoration: none;
}

.au-check-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 16px;
}

.au-alt-envio {
	display: none;
	margin-top: 6px;
	padding: 18px;
	border: 1px dashed var(--au-border);
	border-radius: var(--au-radius);
	background: var(--au-surface);
}

.au-checkout .au-resumen h4 {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin: 18px 0 10px;
	color: var(--au-ink);
}

.au-mini-item {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	padding: 8px 0;
	font-size: 14px;
	border-bottom: 1px solid var(--au-border);
}

.au-mini-item .cant {
	color: var(--au-text);
	white-space: nowrap;
}

@media (max-width: 991px) {
	.au-checkout {
		grid-template-columns: 1fr;
	}

	.au-check-cols {
		grid-template-columns: 1fr;
	}
}


/* == Formularios genericos del tema ====================================== */

.au-form-group {
	margin-bottom: 15px;
}

.au-form-group label {
	display: block;
	margin-bottom: 5px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--au-ink);
}

.au-form-group small {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: var(--au-text);
}

.au-textarea {
	height: auto;
	min-height: 120px;
	padding: 12px 14px;
	resize: vertical;
	line-height: 1.55;
}

.au-form-error,
.au-form-ok {
	display: none;
	margin: -4px 0 12px;
	padding: 10px 12px;
	border-radius: var(--au-radius);
	font-size: 13px;
}

.au-form-error.is-visible,
.au-form-ok:not(:empty) {
	display: block;
}

.au-form-error {
	background: color-mix(in srgb, var(--au-secondary) 12%, transparent);
	color: var(--au-secondary);
}

.au-form-ok {
	background: var(--au-primary-tint);
	color: var(--au-primary-dark);
}

.au-btn-lg {
	padding: 14px 32px;
	font-size: 14px;
}

/* == Fin de compra (order-done) =========================================== */

.au-done-check {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 18px;
	border-radius: 50%;
	background: var(--au-primary-tint);
	color: var(--au-primary);
}

.au-done-texto {
	font-size: 16px;
	line-height: 1.7;
	color: var(--au-text);
	margin: 8px 0 26px;
	max-width: 56ch;
}

.au-done-transf {
	margin: 0 0 28px;
	padding: 22px 24px;
	border: 1px solid var(--au-border);
	border-radius: var(--au-radius);
	background: var(--au-surface);
}

.au-done-transf p:last-child {
	margin-bottom: 0;
}

.au-done-aviso {
	margin-top: 26px;
	max-width: 56ch;
}

.au-done-form {
	margin: 0;
}

/* == Acceso / registro / recuperar clave ================================= */

.au-auth {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	max-width: 960px;
	margin: 12px auto 72px;
}

.au-auth.is-solo {
	grid-template-columns: minmax(0, 480px);
	justify-content: center;
}

.au-auth-card {
	padding: 34px 32px;
	border: 1px solid var(--au-border);
	border-radius: var(--au-radius);
	background: var(--au-bg);
}

.au-auth-card h2 {
	font-size: 26px;
	margin: 6px 0 22px;
}

.au-auth-card .au-btn {
	width: 100%;
	margin-top: 4px;
}

.au-auth-link {
	display: block;
	margin-top: 14px;
	text-align: center;
	font-size: 13px;
	color: var(--au-text);
}

.au-auth-link:hover {
	color: var(--au-primary);
}

@media (max-width: 767px) {
	.au-auth {
		grid-template-columns: 1fr;
	}

	.au-auth-card {
		padding: 26px 20px;
	}
}

/* == Blog ================================================================= */

.au-blog-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 36px 28px;
}

.au-post-media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	border-radius: var(--au-radius);
	overflow: hidden;
	background: var(--au-surface);
}

.au-post-media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}

.au-post:hover .au-post-media img {
	transform: scale(1.04);
}

.au-post-fecha {
	position: absolute;
	left: 14px;
	bottom: 14px;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 54px;
	padding: 6px 8px;
	border-radius: var(--au-radius);
	background: var(--au-bg);
	color: var(--au-text);
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1.1;
}

.au-post-fecha strong {
	font-size: 20px;
	color: var(--au-ink);
	letter-spacing: 0;
}

.au-post-body {
	padding-top: 16px;
}

.au-post-body h3 {
	font-size: 20px;
	margin: 0 0 8px;
	line-height: 1.3;
}

.au-post-body p {
	font-size: 14px;
	line-height: 1.65;
	color: var(--au-text);
	margin: 0 0 10px;
}

.au-post-mas {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--au-primary);
}

.au-blog-aside .au-facet a.is-active {
	color: var(--au-primary);
	font-weight: 600;
}

@media (max-width: 767px) {
	.au-blog-grid {
		grid-template-columns: 1fr;
	}
}

/* == Articulo (blog-det / cont) ========================================== */

.au-article-solo {
	max-width: 780px;
	margin: 0 auto;
	padding-bottom: 64px;
}

.au-article-head {
	margin-bottom: 26px;
}

.au-article-head h1 {
	font-size: 36px;
	line-height: 1.15;
	margin: 6px 0 14px;
}

.au-article-intro {
	font-size: 19px;
	line-height: 1.6;
	color: var(--au-text);
	margin: 0;
}

.au-article-img {
	margin: 0 0 26px;
	border-radius: var(--au-radius);
	overflow: hidden;
	background: var(--au-surface);
}

.au-article-img img {
	width: 100%;
	display: block;
}

.au-article-body {
	font-size: 16px;
	line-height: 1.8;
	color: var(--au-ink);
	margin-bottom: 26px;
}

.au-article-cierre {
	padding-top: 20px;
	border-top: 1px solid var(--au-border);
}

.au-article-adjuntos {
	margin-top: 32px;
	padding: 20px 22px;
	border: 1px solid var(--au-border);
	border-radius: var(--au-radius);
	background: var(--au-surface);
}

.au-article-adjuntos h3 {
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	margin: 0 0 10px;
}

.au-article-adjuntos ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.au-article-adjuntos li + li {
	margin-top: 6px;
}

.au-article-adjuntos a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--au-primary);
}

@media (max-width: 767px) {
	.au-article-head h1 {
		font-size: 26px;
	}
}

/* == Contacto ============================================================= */

.au-contact-map {
	height: 360px;
	background: var(--au-surface);
}

.au-contact-map iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.au-contact-datos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 16px;
	margin-bottom: 44px;
}

.au-contact-dato {
	padding: 22px 20px;
	border: 1px solid var(--au-border);
	border-radius: var(--au-radius);
	background: var(--au-surface);
}

.au-contact-dato svg {
	width: 24px;
	height: 24px;
	color: var(--au-primary);
	margin-bottom: 10px;
}

.au-contact-dato strong {
	display: block;
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--au-ink);
	margin-bottom: 4px;
}

.au-contact-dato span {
	font-size: 14px;
	line-height: 1.55;
	color: var(--au-text);
}

.au-contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
	gap: 44px;
	padding-bottom: 64px;
}

.au-contact-grid h3 {
	font-size: 22px;
	margin: 0 0 18px;
}

.au-faq-item {
	border: 1px solid var(--au-border);
	border-radius: var(--au-radius);
	background: var(--au-bg);
	margin-bottom: 8px;
}

.au-faq-item summary {
	padding: 14px 16px;
	font-size: 15px;
	font-weight: 600;
	color: var(--au-ink);
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
}

.au-faq-item summary::-webkit-details-marker {
	display: none;
}

.au-faq-item summary::after {
	content: "+";
	flex: 0 0 auto;
	font-size: 20px;
	line-height: 1;
	color: var(--au-primary);
	transition: transform .18s ease;
}

.au-faq-item[open] summary::after {
	transform: rotate(45deg);
}

.au-faq-resp {
	padding: 0 16px 16px;
	font-size: 14px;
	line-height: 1.7;
	color: var(--au-text);
}

@media (max-width: 991px) {
	.au-contact-grid {
		grid-template-columns: 1fr;
	}
}

/* == Favoritos ============================================================ */

.au-wish-item {
	display: flex;
	flex-direction: column;
}

.au-wish-quitar {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 10px;
	font-size: 12px;
	color: var(--au-text);
}

.au-wish-quitar:hover {
	color: var(--au-secondary);
}

/* == Mi cuenta ============================================================ */

.au-account {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 44px;
	align-items: start;
	padding-bottom: 72px;
}

.au-account-nav {
	position: sticky;
	top: 20px;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--au-border);
	border-radius: var(--au-radius);
	overflow: hidden;
	background: var(--au-bg);
}

.au-account-user {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 16px;
	border-bottom: 1px solid var(--au-border);
	background: var(--au-surface);
}

.au-account-user strong {
	display: block;
	font-size: 14px;
	color: var(--au-ink);
	line-height: 1.2;
}

.au-account-user small {
	font-size: 12px;
	color: var(--au-text);
	word-break: break-all;
}

.au-account-avatar {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--au-primary);
	color: #fff;
	font-weight: 700;
	font-size: 16px;
}

.au-account-nav > a {
	padding: 12px 16px;
	font-size: 14px;
	color: var(--au-text);
	border-bottom: 1px solid var(--au-border);
}

.au-account-nav > a:last-child {
	border-bottom: 0;
}

.au-account-nav > a:hover {
	background: var(--au-surface);
	color: var(--au-ink);
}

.au-account-nav > a.is-active {
	background: var(--au-primary-tint);
	color: var(--au-primary-dark);
	font-weight: 600;
	box-shadow: inset 3px 0 0 var(--au-primary);
}

.au-account-salir {
	color: var(--au-secondary) !important;
}

.au-panel {
	display: none;
}

.au-panel.is-active {
	display: block;
}

.au-panel h2 {
	font-size: 26px;
	margin: 0 0 8px;
}

.au-panel > p {
	color: var(--au-text);
	margin: 0 0 22px;
}

.au-account-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 14px;
	margin-top: 26px;
}

.au-tile {
	display: flex;
	flex-direction: column;
	padding: 22px 20px;
	border: 1px solid var(--au-border);
	border-radius: var(--au-radius);
	background: var(--au-surface);
	transition: border-color .15s ease;
}

.au-tile:hover {
	border-color: var(--au-primary);
}

.au-tile strong {
	font-size: 30px;
	line-height: 1;
	color: var(--au-ink);
}

.au-tile span {
	margin-top: 4px;
	font-size: 12px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--au-text);
}

.au-order {
	border: 1px solid var(--au-border);
	border-radius: var(--au-radius);
	background: var(--au-bg);
	margin-bottom: 12px;
	overflow: hidden;
}

.au-order-head {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 14px 18px;
}

.au-order-head > div {
	flex: 1 1 auto;
}

.au-order-head strong {
	display: block;
	font-size: 15px;
	color: var(--au-ink);
}

.au-order-head small {
	font-size: 12px;
	color: var(--au-text);
}

.au-order-total {
	font-size: 16px !important;
	white-space: nowrap;
}

.au-order-estado {
	padding: 4px 10px;
	border-radius: 40px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .08em;
	text-transform: uppercase;
	background: var(--au-surface);
	color: var(--au-text);
	white-space: nowrap;
}

.au-order-estado.is-ok {
	background: var(--au-primary-tint);
	color: var(--au-primary-dark);
}

.au-order-estado.is-proc {
	background: color-mix(in srgb, var(--au-secondary) 14%, transparent);
	color: var(--au-secondary);
}

.au-order-estado.is-cancel {
	opacity: .6;
	text-decoration: line-through;
}

.au-order-acciones {
	display: flex;
	gap: 8px;
	padding: 0 18px 14px;
}

.au-order-detalle {
	display: none;
	padding: 4px 18px 18px;
	border-top: 1px solid var(--au-border);
	background: var(--au-surface);
}

.au-order-detalle.is-open {
	display: block;
}

.au-order-detalle table {
	width: 100%;
	font-size: 13px;
	margin-top: 10px;
}

.au-order-detalle th,
.au-order-detalle td {
	padding: 8px 6px;
	border-bottom: 1px solid var(--au-border);
	text-align: left;
	vertical-align: middle;
}

.au-order-detalle th {
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--au-text);
}

.au-order-detalle img {
	width: 44px;
	height: 44px;
	object-fit: cover;
	border-radius: 4px;
}

.au-sub-resumen {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	padding: 0 18px 14px;
}

.au-sub-resumen div {
	text-align: center;
	padding: 10px 6px;
	border-radius: var(--au-radius);
	background: var(--au-surface);
}

.au-sub-resumen strong {
	display: block;
	font-size: 18px;
	color: var(--au-ink);
}

.au-sub-resumen span {
	font-size: 11px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--au-text);
}

.au-sub-calendario {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: 6px;
	margin: 0;
	padding: 0 18px 18px;
	list-style: none;
}

.au-sub-calendario li {
	padding: 8px 10px;
	border: 1px solid var(--au-border);
	border-radius: var(--au-radius);
	font-size: 12px;
}

.au-sub-calendario li span {
	display: block;
	font-weight: 600;
	color: var(--au-ink);
}

.au-sub-calendario li em {
	font-style: normal;
	color: var(--au-text);
}

.au-sub-calendario li.is-done {
	background: var(--au-primary-tint);
	border-color: transparent;
}

.au-sub-calendario li.is-done em {
	color: var(--au-primary-dark);
}

.au-sub-calendario li.is-late em {
	color: var(--au-secondary);
}

.au-addr-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 20px;
}

.au-addr-card {
	padding: 22px;
	border: 1px solid var(--au-border);
	border-radius: var(--au-radius);
	background: var(--au-surface);
	margin: 0;
}

.au-addr-card h3 {
	font-size: 16px;
	margin: 0 0 16px;
}

.au-addr-card h3 small {
	font-weight: 400;
	color: var(--au-text);
}

.au-addr-card .au-field {
	background: var(--au-bg);
}

.au-addr-card .au-field[readonly] {
	background: transparent;
	border-style: dashed;
	color: var(--au-text);
}

@media (max-width: 991px) {
	.au-account {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.au-account-nav {
		position: static;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.au-account-user {
		flex: 1 0 100%;
	}

	.au-account-nav > a {
		flex: 1 1 auto;
		text-align: center;
		border-bottom: 0;
		border-right: 1px solid var(--au-border);
		font-size: 13px;
		padding: 10px 8px;
	}

	.au-order-head {
		flex-wrap: wrap;
	}

	.au-sub-resumen {
		grid-template-columns: repeat(2, 1fr);
	}
}