/* ================================================
   La Mia Casa - Blue Corporate Theme for OpenCart 4.1
   Design system: design.md ("La Mía Casa" - José María Fiorenza)
   Blanco domina, azul corporativo de identidad, grises neutros.
   ================================================ */

/* ================================================
   :root — Design Tokens & CSS Custom Properties
   Template: global
   Pages:    ALL
   Palette:  azul corporativo / blanco / grises
   ================================================ */
:root {
	/* Brand */
	--color-brand-primary: #263b93;
	--color-brand-hover: #1f3080;
	--color-brand-dark: #182663;
	--color-brand-border: #e5e5e5;
	--color-brand-divide: #f7f7f7;
	--color-brand-bg: #ffffff;

	/* Semantic colors */
	--background: #ffffff;
	--foreground: #333333;
	--card: #ffffff;
	--card-foreground: #333333;
	--primary: #263b93;
	--primary-foreground: #ffffff;
	--secondary: #f7f7f7;
	--secondary-foreground: #333333;
	--muted: #f7f7f7;
	--muted-foreground: #666666;
	--accent: #f7f7f7;
	--accent-foreground: #263b93;
	--destructive: #dc3545;
	--destructive-foreground: #ffffff;
	--border: #e5e5e5;
	--input: #dddddd;
	--ring: #263b93;

	/* Functional colors */
	--success: #22c55e;
	--warning: #d97706;
	--danger: #ef4444;
	--info: #263b93;

	/* Bootstrap overrides: azul corporativo */
	--bs-primary: #263b93;
	--bs-primary-rgb: 38, 59, 147;
	--bs-info: #263b93;
	--bs-info-rgb: 38, 59, 147;
	--bs-link-color: #263b93;
	--bs-link-color-rgb: 38, 59, 147;
	--bs-link-hover-color: #1f3080;

	/* Typography */
	--font-sans: "Inter", "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif;
	--font-display: "Fraunces", Georgia, "Times New Roman", serif;
	--font-script: "Caveat", "Segoe Script", cursive;
	--font-copper: "Copperplate", "Copperplate Gothic Bold", "Copperplate Gothic Light", "Engravers MT", Cinzel, "Trajan Pro", Georgia, serif;
	--font-century: "Century Gothic", "CenturyGothic", "AppleGothic", Jost, "Gill Sans", "Segoe UI", Tahoma, sans-serif;
	--font-arial: Arial, "Helvetica Neue", Helvetica, sans-serif;

	/* Bootstrap semantic overrides */
	--bs-primary-text-emphasis: #263b93;
	--bs-primary-bg-subtle: #eef1fa;
	--bs-primary-border-subtle: #c5cdec;
	--bs-focus-ring-color: rgba(38, 59, 147, 0.15);

	/* Spacing scale (design.md §23) */
	--space-1: 8px;
	--space-2: 16px;
	--space-3: 24px;
	--space-4: 32px;
	--space-5: 48px;
	--space-6: 64px;
	--space-7: 96px;
}

/* ================================================
   Base — body & heading reset
   Template: global
   Pages:    ALL
   ================================================ */
body {
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.5;
	background-color: var(--background);
	color: var(--foreground);
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: #222222;
	font-weight: 700;
	line-height: 1.2;
}

a {
	color: var(--bs-link-color);
	text-decoration: none;
	transition: color 0.15s ease;
}

a:hover {
	color: var(--bs-link-hover-color);
	text-decoration: none;
}

a:focus,
a:active,
a:focus-visible {
	outline: none;
	box-shadow: none;
}

/* ================================================
   Container & Layout (design.md §24)
   Template: global
   Pages:    ALL
   ================================================ */
.container {
	max-width: 1200px;
	padding-inline: 24px;
}

@media (min-width: 1200px) {
	.container {
		max-width: 1200px;
	}
}

/* ================================================
   Buttons — azul corporativo (design.md §18)
   Template: global (Bootstrap classes)
   Pages:    ALL
   ================================================ */
.btn {
	font-family: var(--font-sans);
	font-weight: 600;
	border-radius: 6px;
	padding: 0.7rem 1.5rem;
	height: auto;
	min-height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	transition:
		background-color 0.15s ease,
		border-color 0.15s ease,
		color 0.15s ease;
}

.btn-sm {
	min-height: 34px;
	padding: 0.35rem 0.85rem;
	font-size: 0.75rem;
}

.btn-lg {
	min-height: 52px;
	padding: 0.85rem 1.9rem;
	font-size: 0.95rem;
}

.btn-block {
	display: flex;
	width: 100%;
}

.btn-primary {
	--bs-btn-focus-shadow-rgb: 38, 59, 147;
	background-color: var(--color-brand-primary);
	border-color: var(--color-brand-primary);
	color: var(--primary-foreground);
	border-radius: 6px;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:focus-visible,
.btn-primary:active {
	background-color: var(--color-brand-hover) !important;
	border-color: var(--color-brand-hover) !important;
	color: #ffffff !important;
	box-shadow: none !important;
	outline: none !important;
}

.btn-primary:disabled,
.btn-primary.disabled {
	background-color: var(--color-brand-primary);
	border-color: var(--color-brand-primary);
	color: #ffffff;
	opacity: 0.4;
}

.btn-outline-primary {
	--bs-btn-focus-shadow-rgb: 38, 59, 147;
	color: var(--color-brand-primary);
	border: 1px solid var(--color-brand-primary);
	background-color: #ffffff;
	border-radius: 6px;
}

.btn-outline-primary:hover {
	background-color: var(--color-brand-primary) !important;
	color: #ffffff !important;
	border-color: var(--color-brand-primary) !important;
}

.btn-outline-dark {
	color: var(--color-brand-primary);
	border: 1px solid var(--color-brand-primary);
	background-color: #ffffff;
	border-radius: 6px;
}

.btn-outline-dark:hover {
	background-color: var(--color-brand-primary) !important;
	color: #ffffff !important;
	border-color: var(--color-brand-primary) !important;
}

.btn-light {
	border: 1px solid var(--border);
	color: var(--foreground);
	background-color: #ffffff;
	border-radius: 6px;
}

.btn-light:hover,
.btn-light:focus,
.btn-light:focus-visible,
.btn-light:active {
	background-color: var(--accent) !important;
	border-color: var(--border) !important;
	color: var(--accent-foreground) !important;
}

/* ================================================
   Form controls (design.md §18)
   Template: global (Bootstrap)
   Pages:    ALL
   ================================================ */
.form-control,
.form-select {
	border: 1px solid var(--input);
	border-radius: 6px;
}

.form-control:focus,
.form-select:focus {
	border-color: var(--color-brand-primary);
	box-shadow: none;
}

/* ================================================
   Checkboxes & radios — azul corporativo
   Template: checkout/register.twig, account/*.twig
   Pages:    Checkout, Account
   Bootstrap los pinta #229ac8 (celeste); la identidad
   de la tienda es el azul corporativo.
   ================================================ */
.form-check-input {
	border-color: var(--color-brand-primary);
}

.form-check-input:checked {
	background-color: var(--color-brand-primary);
	border-color: var(--color-brand-primary);
}

.form-check-input:focus {
	border-color: var(--color-brand-primary);
	box-shadow: 0 0 0 0.25rem rgba(38, 59, 147, 0.15);
}

/* El knob del switch va embebido como SVG: se repinta para
   que el toggle no quede celeste sobre fondo azul. */
.form-switch .form-check-input {
	--bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23263b93'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:focus {
	--bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%231f3080'/%3e%3c/svg%3e");
}

/* Los labels de checkbox quedan 2px más arriba que el control:
   el knob del switch es más alto que la caja y empuja el texto. */
.form-check-label {
	position: relative;
	top: -2px;
}

/* Aviso del paso de envío bloqueado */
#checkout-shipping-locked {
	margin-top: -0.5rem;
	font-size: 0.875rem;
	color: var(--color-brand-primary);
}

#checkout-shipping-locked i {
	margin-right: 0.35rem;
}

/* ================================================
   #top — Top Info Bar (design.md §6)
   Template: common/header.twig (override lamiacasa)
   Pages:    ALL
   Barra delgada blanca, teléfono/ubicación izq y sociales der.
   ================================================ */
#top {
	background-color: #ffffff;
	border-bottom: 1px solid var(--border);
	font-size: 0.8125rem;
	color: var(--muted-foreground);
	padding: 0;
}

#top .container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	min-height: 48px;
}

.topbar-left {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-wrap: wrap;
}

.topbar-right {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	flex-wrap: wrap;
}

.topbar-item,
.topbar-control {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: #444444;
	padding: 0.4rem 0;
	white-space: nowrap;
}

.topbar-item i,
.topbar-control i {
	color: #666666;
}

.topbar-item a,
.topbar-control a {
	color: #444444;
}

.topbar-item a:hover,
.topbar-control a:hover {
	color: #333333;
}

.topbar-social {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.topbar-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	color: #666666;
	transition: color 0.15s ease, border-color 0.15s ease;
}

.topbar-social a:hover {
	color: #333333;
	border-color: #333333;
}

#top .dropdown-menu {
	border: 1px solid var(--border);
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
	margin-top: 6px;
	min-width: 170px;
	padding: 0.4rem 0;
}

#top .dropdown-item {
	font-size: 0.85rem;
	color: #444444;
	padding: 0.4rem 1rem;
}

#top .dropdown-item:hover {
	color: var(--color-brand-primary);
	background: var(--accent);
}

/* ================================================
   Header — Main Header (design.md §7)
   Template: common/header.twig (override lamiacasa)
   Pages:    ALL
   Blanco, alto, logo | buscador | carrito azul.
   ================================================ */
header {
	background-color: #ffffff;
	padding: 0.5rem 0;
	border-bottom: 1px solid #e5e5e5;
}

.header-row {
	display: flex;
	align-items: center;
	gap: 2rem;
}

.header-logo {
	flex: 0 0 34%;
	max-width: 340px;
}

#logo img {
	max-width: 100%;
	max-height: 88px;
	width: auto;
	height: auto;
	object-fit: contain;
}

#logo h1 {
	margin: 0;
}

.header-search {
	flex: 0 1 380px;
	min-width: 240px;
}

.header-search .input-group {
	flex-wrap: nowrap;
	border: 1px solid #dddddd;
	border-radius: 6px;
	overflow: hidden;
}

.header-search .form-control {
	border: none;
	border-radius: 0;
	min-height: 48px;
	font-size: 0.9375rem;
	color: #333333;
}

.header-search .form-control:focus {
	border-color: transparent;
	box-shadow: none;
	outline: none;
}

.header-search .form-control::placeholder {
	color: #999999;
}

.header-search .btn {
	border: none;
	border-radius: 0;
	background-color: #ffffff;
	color: #666666;
	min-height: 48px;
}

.header-search .btn:hover {
	background-color: #ffffff !important;
	border-color: transparent !important;
	color: #333333 !important;
}

.header-cart {
	flex: 0 0 auto;
}

.header-cart #cart .btn-primary {
	position: relative;
	top: 4px;
	background-color: var(--color-brand-primary);
	border: 1px solid var(--color-brand-primary);
	border-radius: 6px;
	color: #ffffff;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	min-height: 50px;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.7rem 1.25rem;
	white-space: nowrap;
}

.header-cart #cart .btn-primary:hover {
	background-color: var(--color-brand-hover) !important;
	border-color: var(--color-brand-hover) !important;
	color: #ffffff !important;
}

/* ================================================
   #menu — Category Navigation (design.md §7)
   Template: common/menu.twig (override lamiacasa)
   Pages:    ALL
   Links negros, peso 600, hover con subrayado.
   ================================================ */
#menu.navbar.bg-primary,
#menu {
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0;
}

@media (min-width: 992px) {
	#menu .navbar-collapse {
		justify-content: center;
	}

	#menu .navbar-nav {
		gap: 2.5rem;
	}
}

#menu .navbar-nav .nav-link {
	color: #000000;
	font-weight: 600;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 1rem 0.25rem;
	text-decoration: none;
	transition: none;
	text-shadow: none;
}

#menu .navbar-nav .nav-link:hover,
#menu .navbar-nav .nav-link:focus {
	color: #000000;
	background: none !important;
}

#menu .dropdown-menu {
	border: 1px solid var(--border);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	padding: 0.75rem 0;
	margin-top: 0 !important;
	top: 100% !important;
}

#menu .dropdown-item {
	color: #333333;
	padding: 0.4rem 1.25rem;
	font-size: 0.875rem;
	text-align: center !important;
}

#menu .dropdown-item:hover,
#menu .dropdown-item:focus {
	color: #000000 !important;
	background: var(--accent);
}

#menu #category {
	color: #000000;
	text-shadow: none;
}

#menu .navbar-toggler {
	border: none;
	color: #000000;
}

#menu .navbar-toggler i {
	color: #000000;
}

@media (max-width: 991.98px) {
	#menu .navbar-nav {
		padding: 0.5rem 0;
	}

	#menu .navbar-nav .nav-link {
		padding: 0.75rem 0.25rem;
	}
}

/* ================================================
   Breadcrumb — minimalista, discreto
   Template: inline in each page template
   Pages:    ALL (except home)
   ================================================ */
.breadcrumb {
	margin: 0 0 16px 0;
	padding: 8px 0;
	background: none;
	border: none;
	border-radius: 0;
	font-size: 0.75rem;
	color: #999999;
	flex-wrap: nowrap;
	overflow: hidden;
}

.breadcrumb>li.breadcrumb-item {
	padding: 0;
	white-space: nowrap;
	overflow: hidden;
	text-shadow: none;
}

/* Ocultar el ítem de inicio (icono): solo la ubicación actual */
.breadcrumb>li.breadcrumb-item:first-child {
	display: none;
}

/* El primer ítem visible no lleva separador */
.breadcrumb>li.breadcrumb-item:nth-child(2)::before {
	content: none !important;
}

.breadcrumb>li.breadcrumb-item:last-child {
	text-overflow: ellipsis;
}

.breadcrumb>li.breadcrumb-item>a {
	text-decoration: none;
	color: #999999;
	transition: color 0.15s ease;
}

.breadcrumb>li.breadcrumb-item>a:hover {
	color: #000000;
	text-decoration: none;
}

.breadcrumb-item+.breadcrumb-item::before {
	content: "/" !important;
	color: #dddddd !important;
	padding: 0 6px !important;
	font-weight: 300;
}

.breadcrumb-item.active {
	color: #333333 !important;
	font-weight: 400;
}

@media (max-width: 575.98px) {
	.breadcrumb {
		font-size: 0.6875rem;
		margin-bottom: 12px;
		padding: 6px 0;
	}
}

/* ================================================
   Sidebar — Category Tree & Account Menu
   Templates: extension/opencart/module/{category,account}.twig
   Pages:    Category, Search, Product, Account pages
   ================================================ */
#column-left .list-group,
#column-right .list-group {
	border: none;
	border-radius: 0;
	background: none;
	margin-bottom: 0;
}

#column-left .list-group-item,
#column-right .list-group-item {
	border: none;
	border-radius: 0;
	padding: 5px 12px;
	background: none;
	color: #444444;
	font-size: 0.875rem;
	margin-bottom: 0;
}

#column-left .list-group-item:hover,
#column-right .list-group-item:hover {
	color: #000000;
	background: none;
}

#column-left .list-group-item.active,
#column-right .list-group-item.active {
	background: none;
	border: none;
	color: var(--color-brand-primary);
	font-weight: 600;
	border-left: 3px solid var(--color-brand-primary);
	padding-left: 9px;
}

#column-left .list-group-item .badge {
	background: none;
	color: #999999;
	font-weight: 400;
}

.list-group-item {
	color: var(--foreground);
	border-color: var(--border);
}

.list-group-item:hover,
.list-group-item:focus {
	color: #000000;
	background-color: var(--accent);
}

.list-group-item.active {
	color: #ffffff;
	background-color: #000000;
	border-color: #000000;
}

.list-group-item.active:hover,
.list-group-item.active:focus {
	color: #ffffff;
	background-color: #000000;
	border-color: #000000;
}

/* ================================================
   Categoría — ocultar imagen + descripción
   Template: product/category.twig (override lamiacasa)
   Pages:    Categorías
   El bloque con la imagen y la descripción de la
   categoría es la primera .row y el <hr/> que siguen
   al <h1> del título dentro de #content. Se ocultan
   con selectores adyacentes para no tocar la plantilla.
   Para volver a mostrarlos, borrar este bloque.
   ================================================ */
#product-category #content > h1 + .row,
#product-category #content > h1 + .row + hr {
	display: none;
}

/* ================================================
   Product Card — .product-thumb (design.md §10)
   Template: product/thumb.twig (override lamiacasa)
   Pages:    Home, Category, Search
   Catálogo: fondo blanco, borde gris claro, sin sombras.
   ================================================ */
.product-card,
.product-thumb {
	display: flex;
	flex-direction: column;
	background-color: #ffffff;
	border: 1px solid #e5e5e5;
	border-radius: 10px;
	overflow: hidden;
}

.product-thumb .content {
	display: flex;
	flex-direction: column;
	flex: 1;
}

.product-thumb .image {
	position: relative;
	background-color: #ffffff;
	padding: 10px 10px 0;
}

.product-thumb .image img {
	border-radius: 8px;
	width: 100%;
	height: auto;
	display: block;
}

.product-thumb .description {
	flex: 1;
	padding: 14px;
	margin-bottom: 0;
}

.product-thumb .description h4 {
	font-size: 0.9375rem;
	font-weight: 600;
	margin-bottom: 4px;
	line-height: 1.35;
}

.product-thumb .description h4 a {
	color: #222222;
	text-decoration: none;
}

.product-thumb .description h4 a:hover {
	color: #000000;
}

.product-thumb .description p {
	font-size: 0.8125rem;
	color: #666666;
	margin-bottom: 6px;
}

.product-thumb .price {
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--color-brand-primary);
}

.product-thumb .price-new {
	font-weight: 700;
}

.product-thumb .price-old {
	font-size: 0.8125rem;
	color: #999999;
	text-decoration: line-through;
	margin-left: 6px;
}

.product-thumb .rating {
	font-size: 0.75rem;
	color: #f59e0b;
	margin-bottom: 4px;
}

.product-thumb .price-tax {
	font-size: 0.75rem;
	color: #999999;
	display: block;
}

/* Stock badge */
.stock-badge {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 10;
	display: inline-block;
	padding: calc(0.25rem + 1px) 0.6rem calc(0.25rem - 1px);
	font-size: 0.6875rem;
	font-weight: 600;
	line-height: 1;
	border-radius: 9999px;
	background-color: var(--success);
	color: #ffffff;
}

.stock-badge.out-of-stock {
	background-color: var(--danger);
}

/* Action toolbar — iconos lineales */
.product-thumb .button {
	position: static;
	display: flex;
	width: 100%;
	border-top: 1px solid #e5e5e5;
	background: none;
}

.product-thumb .button button {
	width: 33.33%;
	background: none;
	border: none;
	color: #666666;
	line-height: 42px;
	text-align: center;
	transition: color 0.15s, background-color 0.15s;
}

.product-thumb .button button:hover {
	color: #000000;
	background: #fafafa;
}

.product-thumb .button button+button {
	border-left: 1px solid #e5e5e5;
}

.product-thumb .button button:disabled {
	opacity: 0.35;
	cursor: not-allowed;
}

.product-thumb .button button:disabled i {
	color: #555555 !important;
}

@media (min-width: 960px) {
	.product-list .product-thumb .button {
		position: static;
		border-top: 1px solid #e5e5e5;
		width: 100%;
		margin-left: 0;
		border-left: none;
	}
}

/* ================================================
   Product Detail (design.md §16)
   Template: product/product.twig (override lamiacasa)
   Pages:    Product detail only
   ================================================ */
#product-info {
	padding-top: 1.5rem;
	padding-bottom: var(--space-6);
}

#product-info h1 {
	font-size: 1.75rem;
	font-weight: 700;
	color: #222222;
	margin-bottom: 0.75rem;
}

#product-info .img-thumbnail {
	border: 1px solid var(--border);
	border-radius: 10px;
	padding: 0.5rem;
	background: #ffffff;
}

.product-thumbs {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.product-thumbs img {
	max-width: 90px;
	cursor: pointer;
}

#product-info .price-new {
	color: var(--color-brand-primary);
	font-weight: 800;
	font-size: 1.5rem;
}

#product-info .price-old {
	color: #999999;
	text-decoration: line-through;
	font-size: 1rem;
}

#product-info .list-unstyled li {
	margin-bottom: 4px;
	color: #666666;
	font-size: 0.875rem;
}

#button-cart {
	border-radius: 6px;
	margin-top: 0.75rem;
}

.whatsapp-consulta-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	background-color: #25d366;
	border: 1px solid #25d366;
	color: #ffffff;
	border-radius: 6px;
	font-weight: 600;
}

.whatsapp-consulta-btn:hover,
.whatsapp-consulta-btn:focus {
	background-color: #1da851;
	border-color: #1da851;
	color: #ffffff;
}

.nav-tabs {
	border-bottom: 1px solid var(--border);
	margin-top: 1.5rem;
}

.nav-tabs .nav-link {
	color: #666666;
	border: none;
	border-bottom: 2px solid transparent;
	font-weight: 600;
	padding: 0.75rem 1.25rem;
}

.nav-tabs .nav-link.active {
	color: var(--color-brand-primary);
	border-bottom-color: var(--color-brand-primary);
	background: none;
}

.tab-content {
	padding-top: 1.25rem;
}

/* ================================================
   Cart dropdown (mini-cart)
   Template: common/cart.twig (override lamiacasa)
   Pages:    ALL
   ================================================ */
#cart .dropdown-menu {
	border: 1px solid var(--border);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
	min-width: 340px;
	right: -3px;
}

.cart-dropdown .cart-item {
	border-bottom: 1px solid #f0f0f0;
}

.cart-item-image img {
	max-width: 56px;
	border: 1px solid var(--border);
	border-radius: 6px;
}

.cart-item-name {
	color: #222222;
	font-size: 0.875rem;
}

.cart-item-name:hover {
	color: var(--color-brand-primary);
}

.cart-item-total {
	color: var(--color-brand-primary);
}

.cart-item-remove {
	color: #999999;
}

.cart-item-remove:hover {
	color: #dc3545;
	background: none;
}

.cart-total-last {
	color: var(--color-brand-primary);
}

.cart-footer a:first-child {
	position: relative;
	top: 5px;
}

/* ================================================
   Cart page & checkout lists
   Template: checkout/cart_list.twig, checkout/*
   Pages:    Cart page, Checkout
   ================================================ */
.table-bordered {
	border-color: var(--border);
}

.table-bordered > :not(caption) > * > * {
	border-color: var(--border);
}

.table thead th {
	background-color: #f7f7f7;
	color: #333333;
	border-bottom: 1px solid var(--border);
}

/* ================================================
   Cart page — listado responsive (design.md §18, §20-§22)
   Template: checkout/cart_list.twig (override lamiacasa)
   Pages:    Cart page
   Un solo markup: 6 columnas en escritorio, cards apiladas
   en <768px. En mobile no se muestra el precio unitario
   (solo el total) y la cantidad usa stepper - / + de 44px.
   ================================================ */
.cart-row {
	display: grid;
	grid-template-columns: 76px minmax(0, 1fr) auto;
	gap: 12px 14px;
	align-items: start;
	margin-bottom: 12px;
	padding: 16px;
	border: 1px solid var(--border);
	border-radius: 10px;
}

.cart-row:last-of-type {
	margin-bottom: 0;
}

.cart-col {
	min-width: 0;
}

.cart-col--image img {
	max-width: 76px;
	border-radius: 6px;
}

.cart-col--name {
	grid-column: 2;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.cart-name {
	color: #222222;
	font-weight: 600;
	line-height: 1.35;
}

.cart-name:hover {
	color: var(--color-brand-primary);
}

.cart-meta {
	margin-bottom: 0;
	color: #666666;
}

.cart-col--remove {
	grid-column: 3;
	grid-row: 1;
	justify-self: end;
}

.cart-remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
}

.cart-col--qty {
	grid-column: 1 / -1;
	grid-row: 2;
}

.cart-qty-form {
	display: flex;
	align-items: stretch;
	gap: 8px;
}

.cart-qty {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: stretch;
	background-color: #ffffff;
	border: 1px solid var(--input);
	border-radius: 6px;
	overflow: hidden;
}

.cart-qty-btn {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 44px;
	min-height: 44px;
	border: 0;
	background-color: #f7f7f7;
	color: #333333;
	font-size: 0.875rem;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.cart-qty-btn:hover {
	background-color: var(--color-brand-primary);
	color: #ffffff;
}

.cart-qty-btn:disabled {
	opacity: 0.5;
	cursor: default;
}

.cart-qty-btn:disabled:hover {
	background-color: #f7f7f7;
	color: #333333;
}

/* Teclado: anillo de foco visible en los botones del stepper */
.cart-qty-btn:focus-visible,
.cart-qty-input:focus-visible {
	outline: 2px solid var(--color-brand-primary);
	outline-offset: -2px;
}

.cart-qty-input {
	flex: 0 0 auto;
	width: 56px;
	min-height: 44px;
	padding-inline: 4px;
	border: 0;
	border-left: 1px solid var(--input);
	border-right: 1px solid var(--input);
	border-radius: 0;
	text-align: center;
	box-shadow: none;
}

.cart-qty-input:focus {
	box-shadow: none;
}

.cart-qty-input.is-invalid {
	background-image: none;
	padding-right: 4px;
}

.cart-qty-update {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
}

.cart-qty-error {
	margin-top: 6px;
}

.cart-col--total {
	grid-column: 1 / -1;
	grid-row: 3;
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--border);
}

.cart-total-label {
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: #666666;
}

.cart-total-value {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--color-brand-primary);
}

.cart-totals {
	margin-top: 16px;
	padding: 8px 16px 16px;
	background-color: #ffffff;
	border: 1px solid var(--border);
	border-radius: 10px;
}

.cart-total-line {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 6px 0;
	color: #333333;
}

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

.cart-total-line.cart-total-last {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--color-brand-primary);
}

/* El reboot de Bootstrap deja los headings sin margin: sin esto el
   "What would you like to do next?" queda pegado al bloque de totales */
#output-cart + h2 {
	margin-top: 32px;
}

@media (min-width: 768px) {
	.cart-list {
		border: 1px solid var(--border);
		border-radius: 10px;
		overflow: hidden;
	}

	.cart-head {
		grid-template-columns: 56px minmax(0, 1fr) 176px 88px 96px 44px;
		gap: 0 12px;
		padding: 12px 16px;
		background-color: #f7f7f7;
		font-size: 0.8125rem;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.04em;
		color: #333333;
	}

	.cart-row {
		grid-template-columns: 56px minmax(0, 1fr) 176px 88px 96px 44px;
		gap: 0 12px;
		align-items: center;
		margin-bottom: 0;
		padding: 14px 16px;
		border: 0;
		border-top: 1px solid var(--border);
		border-radius: 0;
	}

	.cart-col--name,
	.cart-col--remove,
	.cart-col--total {
		grid-column: auto;
		grid-row: auto;
	}

	.cart-col--name {
		gap: 2px;
	}

	.cart-col--image img {
		max-width: 56px;
	}

	/* Columnas angostas en tablet: el alto de 44px se mantiene, el ancho se recorta */
	.cart-qty-btn {
		width: 40px;
	}

	.cart-qty-input {
		width: 44px;
	}

	.cart-qty-update {
		min-width: 40px;
	}

	.cart-remove {
		width: 40px;
		height: 40px;
	}

	.cart-col--qty {
		grid-column: auto;
		grid-row: auto;
	}

	.cart-col--price,
	.cart-col--total {
		text-align: right;
		white-space: nowrap;
	}

	.cart-col--price {
		font-size: 0.9375rem;
		color: #666666;
	}

	.cart-col--total {
		display: block;
		padding-top: 0;
		border-top: 0;
	}

	/* El label "Total" sólo existe en mobile (d-md-none) */
	.cart-col--total .cart-total-label {
		display: none;
	}

	.cart-total-value {
		font-size: 1rem;
	}

	.cart-totals {
		margin-top: 0;
		padding: 12px 20px 16px;
		border: 0;
		border-top: 1px solid var(--border);
		border-radius: 0;
		max-width: 420px;
		margin-left: auto;
	}

	.cart-total-line {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
	}
}

@media (min-width: 1200px) {
	.cart-head,
	.cart-row {
		grid-template-columns: 72px minmax(0, 1fr) 200px 110px 110px 48px;
		gap: 0 16px;
		padding: 16px 20px;
	}

	.cart-col--image img {
		max-width: 72px;
	}

	.cart-qty-btn {
		width: 44px;
	}

	.cart-qty-input {
		width: 56px;
	}

	.cart-qty-update {
		min-width: 44px;
	}

	.cart-remove {
		width: 44px;
		height: 44px;
	}
}

@media (max-width: 767.98px) {
	#checkout-cart h1 {
		font-size: 1.75rem;
	}

	/* En el carrito el breadcrumb sólo repite el título de la página: sobra en celular */
	#checkout-cart > .breadcrumb {
		display: none;
	}

	#output-cart + h2 {
		margin-top: 24px;
	}

	/* Botones de acción apilados, del mismo tamaño y con alto de tap comfortable.
	   .col de Bootstrap es flex-basis:0 (dos columnas al 50%), hay que forzar 100%
	   para que no queden angostos y el texto largo no los despliegue a distinto alto. */
	#shopping-cart > .row > .col {
		flex: 0 0 100%;
		max-width: 100%;
		margin-bottom: 12px;
		text-align: left !important;
	}

	#shopping-cart > .row > .col .btn {
		width: 100%;
		min-height: 48px;
		white-space: nowrap;
	}

	#shopping-cart > .row > .col:last-child {
		margin-bottom: 0;
	}
}

/* ================================================
   Home — Hero (design.md §9-§10)
   Template: common/home.twig (override lamiacasa)
   Pages:    Home only
   Marca en serif display + script + fotografía decorativa.
   ================================================ */
.home-hero {
	background-color: #ffffff;
	padding: 48px 0 56px;
	position: relative;
	overflow: hidden;
}

.home-hero--has-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--hero-bg);
	background-size: cover;
	background-position: center;
	filter: blur(6px);
	transform: scale(1.08);
	opacity: 0.55;
}

.home-hero--has-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(255, 255, 255, 0.85);
}

.home-hero--has-bg.home-hero--no-blur::before {
	filter: none;
	transform: none;
	opacity: 1;
}

.home-hero--has-bg.home-hero--no-blur::after {
	background-color: rgba(255, 255, 255, 0.6);
}

.home-hero-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3rem;
	position: relative;
	z-index: 1;
}

.home-hero-brand {
	flex: 0 0 auto;
	width: var(--hero-logo-width, 220px);
	max-width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.home-hero-logo {
	width: 100%;
	max-height: var(--hero-logo-height, 220px);
	height: auto;
	object-fit: contain;
}

.home-hero-copy {
	flex: 1 1 auto;
	max-width: 620px;
	text-align: left;
}

.home-hero-title {
	font-family: "Caprasimo", "Cooper Black", "Cooper Std Black", Georgia, serif;
	font-size: clamp(3.375rem, 6vw, 4.75rem);
	font-weight: 400;
	line-height: 1;
	color: var(--color-brand-primary);
	text-transform: uppercase;
	letter-spacing: 0;
	margin-bottom: 0.5rem;
}

.home-hero-subtitle {
	font-family: var(--font-century);
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 400;
	font-style: italic;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-brand-primary);
	margin-bottom: 1rem;
}

.home-hero-tagline {
	font-family: var(--font-arial);
	font-size: clamp(2.25rem, 5vw, 3.25rem);
	font-weight: 700;
	line-height: 1;
	color: var(--color-brand-primary);
	text-transform: uppercase;
	letter-spacing: -0.01em;
	margin-bottom: 1.25rem;
}

.home-hero-script {
	font-family: var(--font-script);
	font-weight: 700;
	font-size: 1em;
	text-transform: none;
	letter-spacing: 0;
	color: var(--color-brand-primary);
}

.home-hero-description {
	font-size: 1.0625rem;
	color: #555555;
	max-width: 480px;
	margin-bottom: 1.5rem;
}

.home-hero-cta {
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	min-width: 225px;
}

.home-hero-decor {
	flex: 1 1 auto;
	width: var(--hero-img-width, 320px);
	max-width: var(--hero-img-width, 320px);
	flex-basis: var(--hero-img-width, 320px);
}

.home-hero-decor-img {
	width: 100%;
	height: var(--hero-img-height, auto);
	border-radius: 14px;
	display: block;
	object-fit: cover;
}

/* ================================================
   Home — Benefits (design.md §11)
   Template: common/home.twig (override lamiacasa)
   Pages:    Home only
   ================================================ */
.home-benefits {
	background-color: #ffffff;
	border-top: 1px solid #f0f0f0;
	border-bottom: 1px solid #f0f0f0;
	padding: 32px 0;
}

.home-benefits-grid {
	align-items: stretch;
}

.home-benefit {
	text-align: center;
	padding: 8px 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
}

.home-benefit-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-bottom: 8px;
}

.home-benefit-icon svg {
	width: 32px;
	height: 32px;
	color: var(--color-brand-primary);
}

.home-benefit-title {
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--color-brand-primary);
	margin-bottom: 4px;
}

.home-benefit-text {
	font-size: 0.875rem;
	color: #666666;
	margin-bottom: 0;
	max-width: 280px;
}

/* ================================================
   Home — Modules ("Últimos")
   Template: common/home.twig (override lamiacasa)
   Pages:    Home only
   ================================================ */
.home-modules {
	padding: 48px 0 64px;
}

#content h3 {
	font-size: 1.625rem;
	font-weight: 800;
	color: #222222;
	margin-bottom: 1.125rem;
	text-align: left;
}

/* ================================================
   Prefooter — Contact Info Bar (design.md)
   Template: common/footer.twig (override lamiacasa)
   Pages:    ALL
   Azul corporativo, 3 bloques: teléfono, ubicación, horario.
   ================================================ */
.prefooter {
	background-color: var(--color-brand-primary);
	color: #ffffff;
	margin-top: var(--space-4);
	padding: var(--space-3) 0;
	width: 100%;
}

.prefooter .container {
	max-width: 1200px;
}

.prefooter .row {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	justify-content: center;
	gap: var(--space-2);
}

.prefooter-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.5rem 0;
	flex: 1 1 280px;
	min-width: 240px;
	justify-content: center;
}

.prefooter-icon {
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	color: #ffffff;
}

.prefooter-item span {
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.4;
	color: #ffffff;
	white-space: nowrap;
}

@media (max-width: 991.98px) {
	.prefooter {
		padding: var(--space-3) 0;
	}

	.prefooter .row {
		gap: var(--space-3);
	}

	.prefooter-item {
		flex: 1 1 100%;
		max-width: 100%;
		justify-content: center;
	}

	.prefooter-item span {
		font-size: 1rem;
	}
}


/* ================================================
   Footer — Footer azul (design.md §15)
   Template: common/footer.twig (override lamiacasa)
   Pages:    ALL
   Logo + tagline + categorías + contacto, sobre azul.
   ================================================ */
footer {
	position: static !important;
	background-color: var(--color-brand-primary);
	color: #ffffff;
	padding: var(--space-6) 0 var(--space-3);
	border: none;
}

footer .container {
	max-width: 1200px;
}

footer .footer-top {
	padding-bottom: var(--space-4);
}

footer h5 {
	color: #ffffff;
	font-weight: 700;
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-bottom: 1.25rem;
}

footer a {
	color: #c5d4f5;
	text-decoration: none;
	transition: color 0.15s ease;
}

footer a:hover {
	color: #ffffff;
}

footer ul {
	line-height: 2;
}

footer hr {
	border-color: rgba(255, 255, 255, 0.25);
	opacity: 1;
	margin: var(--space-2) 0;
}

.footer-divider {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	margin: var(--space-4) 0 var(--space-3);
}

footer p {
	color: #d9e2f7;
	font-size: 0.875rem;
}

/* Brand */
.footer-logo img {
	max-height: 130px;
	max-width: 100%;
	width: auto;
}

.footer-logo img.footer-logo-invert {
	filter: brightness(0) invert(1);
}

.footer-name {
	font-size: 1.5rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* Footer Bottom */
.footer-bottom {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	text-align: center;
	padding-top: var(--space-2);
}

.footer-social {
	display: flex;
	gap: 0.75rem;
	justify-content: center;
}

.footer-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 50%;
	color: #ffffff;
	font-size: 1rem;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.footer-social a:hover {
	background-color: rgba(255, 255, 255, 0.15);
	color: #ffffff;
}

.footer-bottom p {
	font-size: 0.8125rem;
	color: #c5d4f5;
	margin-bottom: 0;
}

/* Créditos — Aurora Labs + OpenCart */
.footer-credits {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
}

.footer-credits a {
	color: #c5d4f5;
	font-weight: 600;
}

.footer-credits a:hover {
	color: #ffffff;
	text-decoration: underline;
}

.footer-credits-sep {
	color: rgba(255, 255, 255, 0.45);
}

/* ================================================
   Footer — Métodos de pago (último bloque del pie)
   Template: common/footer.twig (override lamiacasa)
   Pages:    ALL
   Cierra el pie de página: chips blancos con los
   distintivos a color sobre el azul del footer.
   ================================================ */
.footer-payments {
	margin-top: var(--space-4);
	padding-top: var(--space-3);
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	text-align: center;
}

.footer-payments-title {
	margin-bottom: var(--space-3);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #ffffff;
}

.footer-payments-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-payment {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	padding: 0 12px;
	background-color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.45);
	border-radius: 8px;
}

.footer-payment--mercadopago {
	padding: 0 10px;
}

.footer-payment--mercadopago img {
	display: block;
	height: 36px;
	width: auto;
}

.footer-payment--text {
	gap: 10px;
	padding: 0 16px;
}

.footer-payment--text svg {
	display: block;
	flex-shrink: 0;
	height: 24px;
	width: 24px;
}

.footer-payment-icon {
	flex-shrink: 0;
	color: var(--color-brand-primary);
}

.footer-payment--text span {
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	color: #333333;
	white-space: nowrap;
}

@media (max-width: 575.98px) {
	.footer-payments {
		margin-top: var(--space-3);
	}

	.footer-payments-title {
		font-size: 0.75rem;
		letter-spacing: 0.02em;
	}

	.footer-payments-list {
		gap: 8px;
	}

	.footer-payment {
		height: 40px;
	}

	.footer-payment--mercadopago {
		padding: 0 8px;
	}

	.footer-payment--mercadopago img {
		height: 30px;
	}
}

/* Contacto */
.footer-address {
	font-style: normal;
	color: #d9e2f7;
	font-size: 0.875rem;
	margin-bottom: 0.25rem;
	line-height: 1.5;
}

.footer-phone {
	margin-bottom: 1rem;
}

.footer-links {
	margin-bottom: 0;
}

/* Mobile Footer Improvements */
@media (max-width: 767.98px) {
	footer {
		padding: var(--space-5) 0 var(--space-3);
	}

	footer .footer-top {
		padding-bottom: var(--space-3);
	}

	.footer-brand,
	.footer-col {
		padding-bottom: var(--space-4);
		text-align: center;
	}

	.footer-brand {
		padding-bottom: var(--space-3);
	}

	.footer-logo img {
		max-height: 100px;
		margin: 0 auto;
	}

	.footer-name {
		display: block;
		text-align: center;
	}

	footer h5 {
		margin-bottom: 0.875rem;
		font-size: 0.75rem;
		letter-spacing: 0.1em;
	}

	footer ul {
		line-height: 2.2;
		padding-left: 0;
	}

	footer ul li {
		display: inline-block;
		margin: 0 0.5rem;
	}

	footer ul li:first-child {
		margin-left: 0;
	}

	footer ul li:last-child {
		margin-right: 0;
	}

	.footer-links li {
		display: inline-block;
		margin: 0 0.35rem;
	}

	.footer-links a {
		font-size: 0.8125rem;
		padding: 0.25rem 0.5rem;
		border-radius: 4px;
		background-color: rgba(255, 255, 255, 0.08);
		transition: background-color 0.15s ease, color 0.15s ease;
	}

	.footer-links a:hover {
		background-color: rgba(255, 255, 255, 0.18);
		color: #ffffff;
	}

	.footer-divider {
		margin: var(--space-3) 0;
	}

	.footer-bottom {
		gap: var(--space-2);
		padding-top: var(--space-1);
	}

	.footer-social a {
		width: 36px;
		height: 36px;
		font-size: 0.875rem;
	}

	.footer-bottom p {
		font-size: 0.75rem;
	}
}

@media (min-width: 768px) and (max-width: 991.98px) {
	footer .footer-top {
		padding-bottom: var(--space-4);
	}

	.footer-brand {
		text-align: center;
	}

	.footer-logo img {
		margin: 0 auto;
	}

	.footer-name {
		display: block;
		text-align: center;
	}

	.footer-col {
		padding-top: var(--space-3);
		text-align: center;
	}

	footer h5 {
		margin-bottom: 1rem;
	}

	footer ul li {
		display: inline-block;
		margin: 0 0.75rem;
	}

	.footer-links li {
		display: inline-block;
		margin: 0 0.5rem;
	}

	.footer-links a {
		font-size: 0.8125rem;
		padding: 0.25rem 0.5rem;
		border-radius: 4px;
		background-color: rgba(255, 255, 255, 0.08);
	}

	.footer-links a:hover {
		background-color: rgba(255, 255, 255, 0.18);
	}

	.footer-bottom {
		flex-direction: row;
		justify-content: space-between;
		text-align: left;
		padding-top: var(--space-2);
	}

	.footer-social {
		margin-top: 0;
	}
}

@media (min-width: 992px) {
	.footer-bottom {
		flex-direction: row;
		justify-content: space-between;
		text-align: left;
		padding-top: var(--space-2);
	}

	.footer-social {
		margin-top: 0;
	}

	.footer-brand {
		text-align: left;
	}

	.footer-logo img {
		margin: 0;
	}

	.footer-col {
		text-align: left;
	}

	footer h5 {
		margin-bottom: 1.25rem;
	}

	footer ul li {
		display: block;
	}

	.footer-links li {
		display: block;
	}

	.footer-links a {
		background: none;
		padding: 0;
	}

	.footer-links a:hover {
		background: none;
		color: #ffffff;
	}
}

/* ================================================
   Sticky Footer Fix
   Template: global (layout override)
   Pages:    ALL
   Anula los hacks del tema default de OpenCart
   (stylesheet.css del core), que no aplican a este
   layout y dejan un bloque blanco gigante:
     #container { position: absolute; margin-bottom: 300px }
     #content, #column-left, #column-right { padding-bottom: 730px/400px }
   ================================================ */
html,
body {
	height: auto !important;
	min-height: 100% !important;
	overflow: visible !important;
}

#container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	position: static;
	margin-bottom: 0;
}

#content,
#column-left,
#column-right {
	padding-bottom: 0;
}

main {
	flex: 1 0 auto;
}

footer {
	flex-shrink: 0;
}

/* ================================================
   Modals & Alerts
   Template: global (Bootstrap)
   Pages:    ALL
   ================================================ */
.modal-content {
	border: none;
	border-radius: 12px;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
}

.modal-header {
	border-bottom: 1px solid var(--border);
}

.alert {
	border: none;
	border-radius: 8px;
}

#alert {
	max-width: 100%;
}

/* ================================================
   Account Pages
   Template: account/account.twig, account/*.twig
   Pages:    Account dashboard, Login, Register
   ================================================ */
.account-dashboard .list-group-item {
	border: 1px solid var(--border);
	color: #333333;
}

.account-dashboard .list-group-item:hover {
	color: var(--color-brand-primary);
	border-color: var(--color-brand-primary);
}

/* ================================================
   Login / Register
   Template: account/login.twig, account/register.twig
   Pages:    Login, Register
   ================================================ */
.well {
	border: 1px solid var(--border);
	border-radius: 10px;
	background: #ffffff;
}

/* ================================================
   Pagination
   Template: common/pagination.twig
   Pages:    Category, Search, Account lists
   ================================================ */
.pagination .page-link {
	color: #333333;
	border-color: var(--border);
}

.pagination .page-link:hover {
	color: var(--color-brand-primary);
	border-color: var(--color-brand-primary);
}

.pagination .active .page-link {
	background-color: var(--color-brand-primary);
	border-color: var(--color-brand-primary);
	color: #ffffff;
}

/* ================================================
   Mobile Refinements (design.md §20-§22)
   Template: global
   Pages:    ALL
   ================================================ */
@media (max-width: 991.98px) {
	.header-row {
		flex-wrap: wrap;
		gap: 1rem;
	}

	.header-logo {
		order: 1;
		flex: 1 1 100%;
		max-width: 100%;
		text-align: center;
	}

	.header-search {
		order: 2;
		flex: 1 1 100%;
	}

	.header-cart {
		order: 3;
		flex: 1 1 100%;
	}

	.home-hero-inner {
		flex-direction: column;
		gap: 1.5rem;
		text-align: center;
	}

	.home-hero-copy {
		max-width: 100%;
		text-align: center;
	}

	.home-hero-description {
		margin-inline: auto;
	}

	.home-hero-brand {
		max-width: var(--hero-logo-width, 180px);
	}

	.home-hero-decor {
		max-width: 260px;
	}
}

@media (max-width: 767.98px) {
	#top {
		padding-top: 4px;
	}

	#top .container {
		justify-content: space-between;
	}

	.topbar-left,
	.topbar-right {
		gap: 0.75rem;
	}

	.topbar-social {
		display: none;
	}

	.topbar-address {
		display: none;
	}

	.container {
		padding-left: 16px;
		padding-right: 16px;
	}

	.header-cart #cart .btn-primary {
		font-size: 0.75rem;
		padding: 0.5rem 0.75rem;
	}

	.footer-logo {
		margin-bottom: 1.5rem;
	}

	.btn-wa-product,
	.btn-whatsapp {
		width: 100%;
	}

	#product-info .row.mb-3 > .col-sm + .col-sm {
		padding-top: 24px;
	}
}

@media (max-width: 575.98px) {
	#alert {
		left: 12px;
		right: 12px;
		width: auto;
		margin-left: 0;
	}

	/* La cabecera emite style="max-width:340px" inline desde la config del logo
	   (oc_setting logo_width/height). Ese inline gana sobre el CSS y desborda con
	   scroll horizontal por debajo de ~370px, así que acá hay que usar !important. */
	#logo img {
		max-width: 100% !important;
		max-height: 96px;
	}

	.home-hero {
		padding: 32px 0 40px;
	}

	.home-hero-decor {
		display: none;
	}

	.home-recipe-cards .card {
		margin-bottom: 16px;
	}

	.product-thumb .image img {
		aspect-ratio: 1 / 1;
		object-fit: cover;
	}
}

/* ================================================
   OVERRIDE SECTIONS — Extension Override Hooks
   ================================================ */

/* Publicidad Banner */
[id^="publicidad-banner-"] {
	border-radius: 12px !important;
	overflow: hidden;
}

/* Category / Manufacturer carousels */
[id^="carousel-category"],
[id^="carousel-manufacturer"] {
	border-radius: 12px;
}

/* WhatsApp Floating Button — verde (identidad externa) */
#whatsapp-floating-btn {
	transition: transform 0.2s ease;
}

#whatsapp-floating-btn:hover {
	transform: scale(1.05);
}

/* Product toolbar — listado reordenado y compacto */
.product-toolbar {
	margin-bottom: 1rem;
}

.product-toolbar #compare-total {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	white-space: nowrap;
	padding: 0.45rem 0.9rem;
	font-size: 0.9rem;
}

.product-toolbar .input-group {
	flex-wrap: nowrap;
}

.product-toolbar .input-group .form-select {
	min-width: 140px;
}

/* Página de Comparación */
#product-compare .table-responsive {
	-webkit-overflow-scrolling: touch;
	border-radius: 10px;
}

#product-compare .compare-table {
	min-width: 640px;
	margin-bottom: 0;
}

#product-compare .compare-actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

#product-compare .compare-actions .btn {
	width: 100%;
}

/* Animations suaves (design.md §29) */
.fade-in {
	animation: fadeInUp 0.3s ease-out forwards;
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.product-thumb {
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.product-thumb:hover {
	border-color: #d0d0d0;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}