/* Carro lateral (src/carroLateral.js). Prefijo gcl- para no chocar con el CSS del sitio.
 * Mismo lenguaje que el footer (css/gustore-modern.css: .gs-footer*, .gs-pay-*, .gs-newsletter-form):
 * fondo plano #222 + franja #2c2c2c, títulos blancos en mayúscula, píldoras con borde tenue,
 * botón píldora rosado. Las fotos van sobre recuadro claro (una polera negra no se vería). */
.gcl {
	--gcl-fondo: var(--gs-primary, #222222); --gcl-franja: #2c2c2c;
	--gcl-texto: #ffffff; --gcl-suave: rgba(255, 255, 255, .6); --gcl-tenue: rgba(255, 255, 255, .45);
	--gcl-linea: rgba(255, 255, 255, .08); --gcl-chip: rgba(255, 255, 255, .06); --gcl-chip-borde: rgba(255, 255, 255, .14);
	--gcl-rosa: var(--gs-accent, #E63973); --gcl-rosa-hover: var(--gs-accent-hover, #cf2d63); --gcl-verde: #4fd69c;
	--gcl-foto: #f2f2f3;
	position: fixed; inset: 0; z-index: 100000; pointer-events: none;
	font-family: var(--gs-font, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
}
.gcl-fondo { position: absolute; inset: 0; background: rgba(0, 0, 0, .55); opacity: 0; transition: opacity .25s ease; }
.gcl-panel {
	position: absolute; top: 0; right: 0; bottom: 0; width: 420px; max-width: 100vw;
	background: var(--gcl-fondo); color: var(--gcl-suave); display: flex; flex-direction: column; font-size: 14px;
	border-left: 1px solid var(--gcl-linea); box-shadow: -12px 0 40px rgba(0, 0, 0, .35);
	transform: translateX(105%); transition: transform .3s cubic-bezier(.4, 0, .2, 1); outline: none;
}
.gcl.gcl-abierto { pointer-events: auto; }
.gcl.gcl-abierto .gcl-fondo { opacity: 1; }
.gcl.gcl-abierto .gcl-panel { transform: none; }
html.gcl-sin-scroll, html.gcl-sin-scroll body { overflow: hidden !important; }

.gcl *, .gcl *::before, .gcl *::after { box-sizing: border-box; }
.gcl a { color: inherit; }
.gcl b { color: var(--gcl-texto); font-weight: 700; }

/* ---------------------------------------------------------------- cabecera */
.gcl-cab { display: flex; align-items: center; justify-content: space-between; padding: 20px 22px 16px; border-bottom: 1px solid var(--gcl-linea); }
.gcl-cab h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.01em; color: var(--gcl-texto); display: flex; align-items: center; gap: 10px; font-family: inherit; }
.gcl-cuenta {
	display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 24px; padding: 0 8px;
	border-radius: 999px; background: var(--gcl-chip); border: 1px solid var(--gcl-chip-borde); color: var(--gcl-texto); font-size: 12px; font-weight: 700;
}
.gcl-cerrar { background: var(--gcl-chip); border: 1px solid var(--gcl-chip-borde); width: 36px; height: 36px; border-radius: 50%; cursor: pointer; color: var(--gcl-texto); display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: border-color .16s, color .16s; }
.gcl-cerrar:hover { border-color: var(--gcl-rosa); color: var(--gcl-rosa); }
.gcl-cerrar svg { width: 18px; height: 18px; }

/* Títulos de sección: como los h4 del footer (AYUDA, VISÍTANOS) */
.gcl-etiqueta { display: block; color: var(--gcl-texto) !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 1px; text-transform: uppercase; margin: 18px 0 6px !important; }
.gcl-scroll > .gcl-etiqueta:first-child { margin-top: 4px !important; }

.gcl-cuerpo { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.gcl-scroll { flex: 1; overflow-y: auto; padding: 14px 22px 16px; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: #444 transparent; }

/* Aviso "Agregaste…": como .gs-newsletter-ok del footer */
.gcl-agregado { display: flex; align-items: center; gap: 10px; color: var(--gcl-texto); font-size: 14px; background: rgba(230, 57, 115, .08); border: 1px solid rgba(230, 57, 115, .4); border-radius: 14px; padding: 11px 14px; margin-bottom: 10px; }
.gcl-agregado svg { color: var(--gcl-rosa); flex: 0 0 auto; }
.gcl-tip { font-style: italic; font-family: Georgia, 'Times New Roman', serif; color: #ff6b9a; font-size: 14px; margin: 4px 2px 10px; }

/* ---------------------------------------------------------------- productos */
.gcl-items { list-style: none; margin: 0; padding: 0; }
.gcl-item { display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--gcl-linea); transition: opacity .2s; }
.gcl-item:last-child { border-bottom: 0; }
.gcl-saliendo { opacity: .35; pointer-events: none; }
.gcl-foto { flex: 0 0 80px; width: 80px; height: 80px; border-radius: 12px; overflow: hidden; background: var(--gcl-foto); display: block; }
.gcl-foto img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gcl-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.gcl-fila { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.gcl-nombre { font-weight: 700; font-size: 14.5px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gcl-texto); }
.gcl-detalle { font-size: 13px; color: var(--gcl-tenue); line-height: 1.4; }
.gcl-quitar { background: none; border: 0; color: var(--gcl-tenue); cursor: pointer; padding: 4px; border-radius: 6px; line-height: 0; flex: 0 0 auto; transition: color .16s; }
.gcl-quitar:hover { color: var(--gcl-rosa); }
/* Cantidad: píldora como las del footer */
.gcl-cant { display: inline-flex; align-items: center; background: var(--gcl-chip); border: 1px solid var(--gcl-chip-borde); border-radius: 999px; overflow: hidden; }
.gcl-cant button { width: 32px; height: 30px; border: 0; background: transparent; font-size: 16px; cursor: pointer; color: var(--gcl-texto); font-family: inherit; }
.gcl-cant button:hover:not([disabled]) { color: var(--gcl-rosa); }
.gcl-cant button[disabled] { color: rgba(255, 255, 255, .25); cursor: default; }
.gcl-cant span { min-width: 24px; text-align: center; font-size: 14px; font-weight: 700; color: var(--gcl-texto); }
.gcl-cant-fija { font-size: 12.5px; color: var(--gcl-tenue); }
.gcl-precio { text-align: right; font-size: 14.5px; white-space: nowrap; }
.gcl-precio s { color: var(--gcl-tenue); font-size: 12px; margin-right: 6px; }

/* ---------------------------------------------------------------- completa tu pedido (carrusel fijo) */
.gcl-rel { margin: 0; padding: 12px 22px 14px; border-top: 1px solid var(--gcl-linea); flex: 0 0 auto; }
.gcl-rel-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.gcl-rel-cab .gcl-etiqueta { margin: 0 !important; }
.gcl-rel-nav { display: flex; gap: 6px; }
.gcl-rel-nav[hidden] { display: none; }
.gcl-rel-nav button { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--gcl-chip-borde); background: var(--gcl-chip); color: var(--gcl-texto); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; transition: border-color .16s, color .16s, opacity .16s; }
.gcl-rel-nav button:hover:not(:disabled) { border-color: var(--gcl-rosa); color: var(--gcl-rosa); }
.gcl-rel-nav button:disabled { opacity: .3; cursor: default; }
.gcl-rel-pista { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.gcl-rel-pista::-webkit-scrollbar { display: none; }
.gcl-rel-card { flex: 0 0 104px; scroll-snap-align: start; text-decoration: none !important; color: inherit !important; border: 1px solid var(--gcl-chip-borde); border-radius: 12px; overflow: hidden; background: var(--gcl-chip); transition: border-color .16s; }
.gcl-rel-card:hover { border-color: var(--gcl-rosa); }
.gcl-rel-img { display: block; aspect-ratio: 1 / 1; background: var(--gcl-foto); }
.gcl-rel-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.gcl-rel-nombre { display: block; font-size: 11.5px; font-weight: 700; padding: 6px 8px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--gcl-texto); }
.gcl-rel-prenda { display: block; font-size: 10.5px; color: var(--gcl-tenue); padding: 0 8px 8px; }
@media (max-height: 640px) { .gcl-rel-card { flex-basis: 84px; } }


/* ---------------------------------------------------------------- pie: como la franja del newsletter */
.gcl-pie { background: var(--gcl-franja); border-top: 1px solid var(--gcl-linea); padding: 16px 22px calc(14px + env(safe-area-inset-bottom)); }
.gcl-total { display: flex; justify-content: space-between; align-items: baseline; }
.gcl-total span { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--gcl-texto); }
.gcl-total b { font-size: 24px; font-weight: 800; letter-spacing: -.01em; }
.gcl-ahorro { display: flex; justify-content: space-between; font-size: 13px; color: var(--gcl-verde); margin-top: 2px; }
.gcl-nota { font-size: 12px; color: var(--gcl-tenue); margin: 6px 0 12px; line-height: 1.45; }
.gcl-envio { margin: 0 0 14px; }
.gcl-envio-msg { font-size: 13px; margin-bottom: 7px; color: var(--gcl-suave); }
.gcl-envio-barra { height: 5px; background: rgba(255, 255, 255, .1); border-radius: 3px; overflow: hidden; }
.gcl-envio-barra span { display: block; height: 100%; background: var(--gcl-rosa); border-radius: 3px; transition: width .4s ease; }
.gcl-envio-ok .gcl-envio-barra span { background: var(--gcl-verde); }
.gcl-envio-glosa { font-size: 11.5px; color: var(--gcl-tenue); margin-top: 6px; }
/* Botón: el de "Suscribirme" del footer */
.gcl-btn { display: block; width: 100%; text-align: center; background: var(--gcl-rosa); color: #fff !important; text-decoration: none !important; font: inherit; font-size: 15px; font-weight: 700; padding: 15px 24px; border-radius: 999px; border: 0; cursor: pointer; transition: background .16s; }
.gcl-btn:hover { background: var(--gcl-rosa-hover); }
.gcl-seguir { display: block; width: 100%; margin-top: 6px; background: none; border: 0; color: var(--gcl-suave); font: inherit; font-size: 13px; padding: 8px; cursor: pointer; transition: color .16s; }
.gcl-seguir:hover { color: var(--gcl-rosa); }
/* Pago seguro + medios: .gs-pay-secure / .gs-pay-chip del footer */
.gcl-seguro { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--gcl-linea); font-size: 12.5px; }
.gcl-seguro svg { color: rgba(255, 255, 255, .8); flex: 0 0 auto; }
.gcl-medios { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 8px; }
.gcl-medios span { font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, .82); background: var(--gcl-chip); border: 1px solid var(--gcl-chip-borde); border-radius: 9px; padding: 5px 9px; white-space: nowrap; }

/* ---------------------------------------------------------------- vacío / cargando */
.gcl-vacio { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 24px; color: var(--gcl-suave); gap: 14px; }
.gcl-vacio svg { color: rgba(255, 255, 255, .5); }
.gcl-vacio p { margin: 0; font-size: 15px; color: var(--gcl-texto); }
.gcl-vacio .gcl-btn { display: inline-block; width: auto; padding: 12px 26px; }
.gcl-cargando { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; }
.gcl-cargando span { width: 8px; height: 8px; border-radius: 50%; background: var(--gcl-rosa); animation: gclPunto 1s infinite ease-in-out; }
.gcl-cargando span:nth-child(2) { animation-delay: .15s; }
.gcl-cargando span:nth-child(3) { animation-delay: .3s; }
@keyframes gclPunto { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: none; } }

@media (max-width: 480px) {
	.gcl-panel { width: 100vw; border-left: 0; }
	.gcl-scroll { padding: 12px 16px 14px; }
	.gcl-cab, .gcl-pie, .gcl-rel { padding-left: 16px; padding-right: 16px; }
}
@media (prefers-reduced-motion: reduce) { .gcl-panel, .gcl-fondo { transition: none; } }
/* Pie compacto: "Seguir comprando" y "Pago 100% seguro" en una fila; medios solo en pantallas altas */
.gcl-pie-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 8px; }
.gcl-pie-fila .gcl-seguir { width: auto; margin: 0; padding: 4px 0; text-align: left; }
.gcl-pie-fila .gcl-seguro { margin: 0; padding: 0; border: 0; }
.gcl-nota { margin: 4px 0 12px; }
.gcl-agregado { padding: 9px 12px; font-size: 13.5px; }
.gcl-item { padding: 12px 0; }
@media (max-height: 899px) { .gcl-medios { display: none; } }
@media (max-height: 760px) { .gcl-rel-card { flex-basis: 84px; } .gcl-rel { padding-top: 10px; padding-bottom: 10px; } }
/* Subtotal compacto (2 columnas) y envío en una línea */
.gcl-pie { padding-top: 12px; }
.gcl-total { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.gcl-total small { display: block; font-size: 11.5px; color: var(--gcl-tenue); margin-top: 3px; line-height: 1.3; }
.gcl-total-lbl { font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--gcl-texto); }
.gcl-total-monto { text-align: right; white-space: nowrap; }
.gcl-total-monto b { display: block; font-size: 22px; line-height: 1.1; }
.gcl-total-monto .gcl-ahorro { display: block; color: var(--gcl-verde); font-size: 12px; margin-top: 2px; }
.gcl-pie .gcl-envio { margin: 10px 0 12px; }
.gcl-envio-msg { font-size: 12.5px; margin-bottom: 6px; }
.gcl-pie .gcl-btn { padding: 13px 24px; }
.gcl-pie-fila { margin-top: 6px; }

/* "Psst…" abajo, en el pie, en blanco */
.gcl-pie .gcl-tip { color: var(--gcl-texto); font-size: 13.5px; margin: 0 0 12px; text-align: center; opacity: .92; }


/* Sin salto al abrir: al bloquear el scroll se reserva el hueco de la barra (header y chat no se mueven).
   Respaldo para navegadores sin scrollbar-gutter: padding del mismo ancho (--gcl-sb lo pone el JS). */
html.gcl-sin-scroll { scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable) {
	html.gcl-sin-scroll body { padding-right: var(--gcl-sb, 0px) !important; }
	html.gcl-sin-scroll .gs-header { width: calc(100% - var(--gcl-sb, 0px)) !important; }
}
/* La franja vive oculta desde la carga: cerrada no se ve ni recibe foco con Tab */
.gcl-panel { visibility: hidden; transition: transform .3s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .3s; }
.gcl.gcl-abierto .gcl-panel { visibility: visible; transition: transform .3s cubic-bezier(.4, 0, .2, 1), visibility 0s; }

/* ---------------------------------------------------------------- menú lateral del sitio (.gs-sidebar)
   Va acá porque este CSS se carga en todo el sitio con versión por fecha (gustore-modern.css depende
   de $version en header.php). La X tenía su propia fila encima del botón y quedaba pegada; la barra
   de scroll era la gris del navegador. */
.gs-sidebar { scrollbar-width: thin; scrollbar-color: #3a3a3a transparent; }
.gs-sidebar::-webkit-scrollbar { width: 6px; }
.gs-sidebar::-webkit-scrollbar-track { background: transparent; }
.gs-sidebar::-webkit-scrollbar-thumb { background: #3a3a3a; border-radius: 6px; }
.gs-sidebar::-webkit-scrollbar-thumb:hover { background: #555; }
.gs-sidebar .gs-sidebar-close {
	top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1;
	color: #fff; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
	transition: border-color .16s, color .16s;
}
.gs-sidebar .gs-sidebar-close:hover { color: var(--gs-accent, #E63973); border-color: var(--gs-accent, #E63973); }
.gs-sidebar .gs-sidebar-cta { padding-top: 46px; }