/**
 * Paneles laterales del header (inc/theme/offcanvas.php): menú móvil, carrito, favoritos,
 * comparar y cuenta. Los selectores parten de la plantilla 5592 para ganar a Elementor.
 */

/* ======================================================================
   Estructura común de los paneles
   ====================================================================== */
body .elementor.elementor-5592 .etheme-elementor-off-canvas__main {
	font-family: var(--sym-font-body, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
	color: #111;
}

body .elementor.elementor-5592 .etheme-elementor-off-canvas__close-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
	transition: transform 0.2s ease;
}

body .elementor.elementor-5592 .etheme-elementor-off-canvas__close-button:hover { transform: rotate(90deg); }

/* Cabecera del panel: ícono en ficha amarilla y título sin subrayado. */
body .elementor.elementor-5592 .etheme-elementor-off-canvas_content-head {
	padding-bottom: 16px;
	border-bottom: 1px solid #eceeee;
}

body .elementor.elementor-5592 .etheme-elementor-off-canvas_content-head a {
	gap: 10px;
	color: #111;
	text-decoration: none;
}

body .elementor.elementor-5592 .etheme-elementor-off-canvas_content-head-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 12px;
	background: #ffc300;
	color: #000;
}

body .elementor.elementor-5592 .etheme-elementor-off-canvas_content-head-icon svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

body .elementor.elementor-5592 .etheme-elementor-off-canvas_content-head-label {
	font-size: 18px;
	font-weight: 800;
	letter-spacing: 0;
	text-decoration: none;
	text-transform: none;
}

/* Estado vacío: ícono, mensaje y botón amarillo. */
body .elementor.elementor-5592 .etheme-elementor-off-canvas_content-empty-message {
	padding: 28px 8px 8px;
	text-align: center;
}

body .elementor.elementor-5592 .etheme-elementor-off-canvas_content-empty-message::before {
	content: "";
	display: block;
	width: 64px;
	height: 64px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: #f2f4f4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa1a1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='18' cy='20' r='1.4'/%3E%3Cpath d='M3 4h2l2.4 11h11.2L21 8H6.3'/%3E%3C/svg%3E") center / 28px no-repeat;
}

body .elementor.elementor-5592 .elementor-element-2246936f .etheme-elementor-off-canvas_content-empty-message::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa1a1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-9-9.2C1.6 7.3 4 4 7.2 4c2 0 3.5 1.1 4.8 2.8C13.3 5.1 14.8 4 16.8 4 20 4 22.4 7.3 21 10.8 19 15.6 12 20 12 20z'/%3E%3C/svg%3E");
}

body .elementor.elementor-5592 .elementor-element-ce3b3b6 .etheme-elementor-off-canvas_content-empty-message::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239aa1a1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 20V10M12 20V4M18 20v-7'/%3E%3C/svg%3E");
}

body .elementor.elementor-5592 .etheme-elementor-off-canvas_content-empty-message p {
	margin: 0 0 16px;
	color: #111;
	font-size: 15px;
	font-weight: 600;
}

body .elementor.elementor-5592 .etheme-elementor-off-canvas_content-empty-message .btn {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 22px;
	border: 0;
	border-radius: 999px;
	background: #ffc300;
	color: #000;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0;
	text-transform: none;
	transition: background-color 0.15s ease;
}

body .elementor.elementor-5592 .etheme-elementor-off-canvas_content-empty-message .btn:hover { background: #e6af00; color: #000; }

/* Pie del panel (botones de carrito / lista). */
body .elementor.elementor-5592 .etheme-elementor-off-canvas_content-footer .button,
body .elementor.elementor-5592 .etheme-elementor-off-canvas_content-footer .btn-view-cart,
body .elementor.elementor-5592 .etheme-elementor-off-canvas_content-footer .btn-checkout {
	border-radius: 999px;
	font-weight: 800;
	letter-spacing: 0;
	text-transform: none;
}

/* Sugerencias cuando el panel está vacío (carrito, favoritos, comparar). */
.sym-oc-suggest {
	margin-top: 26px;
	padding-top: 20px;
	border-top: 1px solid #eceeee;
}

.etheme-elementor-off-canvas_content:not(:has(.etheme-elementor-off-canvas_content-empty-message)) .sym-oc-suggest { display: none; }

.sym-oc-suggest__title {
	margin: 0 0 12px;
	color: #5e6565;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sym-oc-suggest ul.sym-oc-suggest__list {
	display: grid !important;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sym-oc-suggest ul.sym-oc-suggest__list > li { margin: 0; padding: 0; }

/* Cuenta: lista de enlaces y formulario de ingreso. */
body .elementor.elementor-5592 .elementor-element-7b74a5fb .etheme-elementor-off-canvas_content ul {
	margin: 8px 0 0;
	padding: 0;
	list-style: none;
}

body .elementor.elementor-5592 .elementor-element-7b74a5fb .etheme-elementor-off-canvas_content li { border: 0; }

body .elementor.elementor-5592 .elementor-element-7b74a5fb .etheme-elementor-off-canvas_content li a {
	display: flex;
	align-items: center;
	min-height: 46px;
	padding: 0 12px;
	border-radius: 10px;
	color: #111;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	transition: background-color 0.15s ease;
}

body .elementor.elementor-5592 .elementor-element-7b74a5fb .etheme-elementor-off-canvas_content li a:hover { background: #fff8dc; }

body .elementor.elementor-5592 .elementor-element-7b74a5fb .et_b-tabs .et-tab {
	font-weight: 700;
	letter-spacing: 0;
	text-transform: none;
}

body .elementor.elementor-5592 .elementor-element-7b74a5fb .etheme-elementor-off-canvas_content input.input-text {
	min-height: 46px;
	border: 1.5px solid #e3e6e6;
	border-radius: 10px;
	background: #f7f8f8;
}

body .elementor.elementor-5592 .elementor-element-7b74a5fb .etheme-elementor-off-canvas_content input.input-text:focus {
	border-color: #111;
	background: #fff;
}

body .elementor.elementor-5592 .elementor-element-7b74a5fb .etheme-elementor-off-canvas_content button[type="submit"] {
	width: 100%;
	min-height: 46px;
	border: 0;
	border-radius: 999px;
	background: #ffc300;
	color: #000;
	font-weight: 800;
	letter-spacing: 0;
	text-transform: none;
}

/* ======================================================================
   Menú móvil (widget 65da5aba)
   ====================================================================== */
/* El bloque propio reemplaza las pestañas y los accesos de XStore. */
body .elementor.elementor-5592 .elementor-element-65da5aba .sym-mm ~ .etheme-elementor-mobile-menu-element { display: none; }

body .elementor.elementor-5592 .elementor-element-65da5aba .etheme-elementor-mobile-menu-logo img {
	max-height: 48px;
	width: auto;
}

/* Buscador con el mismo estilo del header. */
body .elementor.elementor-5592 .elementor-element-65da5aba .etheme-search-input-form-wrapper {
	overflow: hidden;
	border: 1.5px solid #e3e6e6;
	border-radius: 12px;
	background: #f6f7f7;
}

body .elementor.elementor-5592 .elementor-element-65da5aba .etheme-search-input-form-wrapper:focus-within {
	border-color: #111;
	background: #fff;
}

body .elementor.elementor-5592 .elementor-element-65da5aba .etheme-search-form-input { border: 0; background: transparent; }

body .elementor.elementor-5592 .elementor-element-65da5aba .etheme-search-form-button-wrapper { padding: 4px; }

body .elementor.elementor-5592 .elementor-element-65da5aba .etheme-search-form-submit {
	min-width: 44px;
	border: 0;
	border-radius: 9px;
	background: #ffc300;
	color: #000;
}

.sym-mm { margin-top: 18px; }
.sym-mm ul { margin: 0; padding: 0; list-style: none; }
.sym-mm a { text-decoration: none; }

/* Accesos rápidos */
.sym-mm ul.sym-mm__actions {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
}

.sym-mm ul.sym-mm__actions > li { margin: 0; padding: 0; border: 0; }

.sym-mm .sym-mm__action {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 10px 4px;
	border-radius: 12px;
	background: #f7f8f8;
	color: #111;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	transition: background-color 0.15s ease;
}

.sym-mm .sym-mm__action:hover,
.sym-mm .sym-mm__action:focus-visible { background: #fff3cc; }

.sym-mm__action-icon { display: inline-flex; color: #111; }

/* Ofertas */
.sym-mm .sym-mm__promo {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 14px;
	padding: 16px 16px 16px 18px;
	overflow: hidden;
	border-radius: 14px;
	background: #111;
	color: #fff;
	isolation: isolate;
}

.sym-mm .sym-mm__promo::before {
	content: "";
	position: absolute;
	right: -40px;
	top: -50px;
	z-index: -1;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 195, 0, 0.5), rgba(255, 195, 0, 0));
}

.sym-mm__promo-text { display: grid; gap: 2px; }

.sym-mm__promo-eyebrow {
	color: #ffc300;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.sym-mm__promo-text strong { font-size: 17px; font-weight: 800; line-height: 1.25; }
.sym-mm__promo-addi { color: #b8c8ff; font-size: 12px; font-weight: 600; }

.sym-mm__promo-btn {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #ffc300;
	color: #000;
}

/* Categorías */
.sym-mm .sym-mm__eyebrow { margin-top: 22px !important; margin-bottom: 10px !important; }
.sym-mm ul.sym-mm__tiles { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sym-mm ul.sym-mm__tiles > li { margin: 0; padding: 0; border: 0; }
.sym-mm .sym-mega__tile { padding: 6px 8px 6px 6px; }
.sym-mm .sym-mega__tile-img { width: 40px; height: 40px; }
.sym-mm .sym-mm__all { margin-top: 10px; }

/* Enlaces */
.sym-mm ul.sym-mm__links { display: grid !important; margin-top: 18px; border-top: 1px solid #eceeee; }
.sym-mm ul.sym-mm__links > li { margin: 0; padding: 0; border-bottom: 1px solid #eceeee; }

.sym-mm .sym-mm__links a {
	display: flex;
	align-items: center;
	gap: 12px;
	min-height: 52px;
	color: #111;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

.sym-mm .sym-mm__links .sym-mm__icon { color: #5e6565; }
.sym-mm .sym-mm__links .sym-mega__arrow { margin-left: auto; color: #9aa1a1; }

/* Ayuda por WhatsApp */
.sym-mm__help {
	margin-top: 18px;
	padding: 16px;
	border-radius: 14px;
	background: #f7f8f8;
	text-align: center;
}

.sym-mm__help p { margin: 0 0 12px; color: #4e5454; font-size: 14px; line-height: 1.4; }
.sym-mm__help strong { color: #111; }

.sym-mm .sym-mm__wa {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 46px;
	border-radius: 999px;
	background: #25d366;
	color: #fff;
	font-size: 15px;
	font-weight: 800;
}

.sym-mm .sym-mm__wa:hover { background: #1fb857; color: #fff; }
.sym-mm .sym-mm__wa .sym-mm__icon { color: #fff; }

@media (prefers-reduced-motion: reduce) {
	body .elementor.elementor-5592 .etheme-elementor-off-canvas__close-button,
	.sym-mm * { transition: none !important; }
}

/* Ajustes: categorías en columna (imagen arriba) para que los nombres no se corten. */
.sym-mm ul.sym-mm__tiles .sym-mega__tile {
	flex-direction: column;
	gap: 6px;
	padding: 10px 6px;
	text-align: center;
}

.sym-mm ul.sym-mm__tiles .sym-mega__tile-img { width: 48px; height: 48px; }
.sym-mm ul.sym-mm__tiles .sym-mega__tile-text { justify-items: center; }
.sym-mm ul.sym-mm__tiles .sym-mega__tile-name { font-size: 13px; -webkit-line-clamp: 1; }
.sym-mm ul.sym-mm__tiles .sym-mega__tile-count { font-size: 11.5px; }
.sym-mm ul.sym-mm__tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* El botón del estado vacío: XStore le pone fondo gris con más prioridad. */
body .elementor.elementor-5592 .etheme-elementor-off-canvas_content-empty-message a.btn {
	background: #ffc300 !important;
	color: #000 !important;
}

body .elementor.elementor-5592 .etheme-elementor-off-canvas_content-empty-message a.btn:hover { background: #e6af00 !important; }

body .elementor.elementor-5592 .elementor-element-7b74a5fb .etheme-elementor-off-canvas_content button[type="submit"] { font-size: 15px; }