/* Carrito lateral — ajuste visual al diseño del sitio.
   El plugin (Xoo Side Cart) trae un aspecto genérico: esquinas a 0, bordes negros de 1px,
   títulos de 16px en negrita y botones macizos. Nada de eso sale de nuestro diseño.
   Aquí NO se cambia comportamiento, sólo presentación, y se usan los tokens del tema
   (--tme-verde, --tme-verde-osc, --tme-crema, --tme-tinta) para que no haya un segundo
   verde compitiendo con el de la marca.
   Referencia deliberada: el cajón de haakaa.co.nz. */

.xoo-wsc-modal{
	--wsc-borde:#e7e1d6;
	--wsc-suave:#8a8377;
	font-family:var(--tme-fuente);
}

/* ── Cabecera ───────────────────────────────────────────────────────────── */
.xoo-wsc-modal .xoo-wsc-header{
	border-bottom:1px solid var(--wsc-borde);
	padding:20px 24px 0;
}
.xoo-wsc-modal .xoo-wsch-top{
	padding:0 0 16px;
	align-items:center;
}
.xoo-wsc-modal .xoo-wsch-text{
	font-size:1.25rem;
	font-weight:600;
	color:var(--tme-verde-osc);
	letter-spacing:-.01em;
}
.xoo-wsc-modal .xoo-wsch-close{
	color:var(--wsc-suave);
	opacity:1;
	transition:color .15s;
}
.xoo-wsc-modal .xoo-wsch-close:hover{ color:var(--tme-tinta); }

/* Barra de envío gratis: fina y redondeada, no un bloque. */
.xoo-wsc-modal .xoo-wsc-ship-bar-cont{ padding:0 0 18px; }
.xoo-wsc-modal .xoo-wsc-sb-txt{
	font-size:.86rem;
	color:var(--wsc-suave);
	display:block;
	margin-bottom:8px;
}
.xoo-wsc-modal .xoo-wsc-sb-bar{
	height:6px;
	border-radius:999px;
	background:#efeae0;
	overflow:hidden;
}
.xoo-wsc-modal .xoo-wsc-sb-bar span,
.xoo-wsc-modal .xoo-wsc-sb-bar > div{
	border-radius:999px;
	background:var(--tme-verde);
}

/* ── Línea de producto ──────────────────────────────────────────────────── */
.xoo-wsc-modal .xoo-wsc-body{ padding:8px 24px; }
.xoo-wsc-modal .xoo-wsc-product{
	padding:18px 0;
	border-bottom:1px solid var(--wsc-borde);
	gap:16px;
}
.xoo-wsc-modal .xoo-wsc-img-col{
	background:var(--tme-crema);
	border-radius:10px;
	padding:8px;
	align-self:flex-start;
}
.xoo-wsc-modal .xoo-wsc-img-col img{ border-radius:6px; mix-blend-mode:multiply; }

/* El título era 16px/600 en negro y ocupaba tres líneas. */
.xoo-wsc-modal .xoo-wsc-pname,
.xoo-wsc-modal .xoo-wsc-pname a{
	font-size:.875rem;
	font-weight:600;
	line-height:1.35;
	color:var(--tme-verde-osc);
	text-decoration:none;
}
.xoo-wsc-modal .xoo-wsc-pname a:hover{ color:var(--tme-verde); }
.xoo-wsc-modal .xoo-wsc-pprice{
	font-size:.8rem;
	color:var(--wsc-suave);
	margin:4px 0 12px;
}

/* Selector de cantidad: era un rectángulo con borde negro de 1px. */
.xoo-wsc-modal .xoo-wsc-qty-box{
	border:1px solid var(--wsc-borde);
	border-radius:8px;
	overflow:hidden;
	width:max-content;
}
.xoo-wsc-modal .xoo-wsc-qty-box.xoo-wsc-qtb-square{ border-radius:8px; }
.xoo-wsc-modal .xoo-wsc-chng{
	color:var(--tme-verde-osc);
	font-size:1.05rem;
	line-height:1;
	width:34px;
	height:34px;
	display:flex;
	align-items:center;
	justify-content:center;
	transition:background .15s;
}
.xoo-wsc-modal .xoo-wsc-chng:hover{ background:var(--tme-verde-cl); }
.xoo-wsc-modal input.xoo-wsc-qty{
	border:0;
	width:38px;
	height:34px;
	font-size:.9rem;
	font-weight:600;
	color:var(--tme-tinta);
	background:transparent;
}

.xoo-wsc-modal .xoo-wsc-smr-ptotal{
	font-size:.95rem;
	font-weight:600;
	color:var(--tme-tinta);
}
.xoo-wsc-modal .xoo-wsc-smr-del{
	color:#c9c2b6;
	transition:color .15s;
}
.xoo-wsc-modal .xoo-wsc-smr-del:hover{ color:#b3261e; }

/* ── Pie ────────────────────────────────────────────────────────────────── */
.xoo-wsc-modal .xoo-wsc-footer{
	border-top:1px solid var(--wsc-borde);
	padding:18px 24px 24px;
	box-shadow:0 -10px 24px rgba(0,0,0,.04);
}
.xoo-wsc-modal .xoo-wsc-ft-totals{ border:0; padding:0 0 14px; }
.xoo-wsc-modal .xoo-wsc-ft-amt-label{
	font-size:.8rem;
	text-transform:uppercase;
	letter-spacing:.08em;
	color:var(--wsc-suave);
	font-weight:700;
}
.xoo-wsc-modal .xoo-wsc-ft-amt-value{
	font-size:1.15rem;
	font-weight:700;
	color:var(--tme-verde-osc);
}

/* Tres botones macizos, cuadrados y del mismo peso: nada guiaba a la compra.
   Ahora "Finalizar compra" manda y los otros dos son secundarios. */
.xoo-wsc-modal .xoo-wsc-ft-buttons-cont{ gap:10px; }
/* Especificidad alta a propósito (4 clases + etiqueta): el CSS que el plugin genera desde
   sus ajustes se imprime después del nuestro, así que se gana por selector y no con
   !important, que dejaría el siguiente ajuste imposible de tocar desde su panel. */
.xoo-wsc-modal .xoo-wsc-footer .xoo-wsc-ft-buttons-cont a.xoo-wsc-ft-btn{
	border-radius:8px;
	font-weight:600;
	font-size:.9rem;
	padding:13px 16px;
	letter-spacing:0;
	text-transform:none;
	border:1px solid var(--tme-verde-osc);
	transition:background .15s,color .15s,box-shadow .15s;
	box-shadow:none;
}
.xoo-wsc-modal .xoo-wsc-footer .xoo-wsc-ft-buttons-cont a.xoo-wsc-ft-btn-continue,
.xoo-wsc-modal .xoo-wsc-footer .xoo-wsc-ft-buttons-cont a.xoo-wsc-ft-btn-cart{
	background:transparent;
	color:var(--tme-verde-osc);
}
.xoo-wsc-modal .xoo-wsc-footer .xoo-wsc-ft-buttons-cont a.xoo-wsc-ft-btn-continue:hover,
.xoo-wsc-modal .xoo-wsc-footer .xoo-wsc-ft-buttons-cont a.xoo-wsc-ft-btn-cart:hover{ background:var(--tme-verde-cl); }
.xoo-wsc-modal .xoo-wsc-footer .xoo-wsc-ft-buttons-cont a.xoo-wsc-ft-btn-checkout{
	background:var(--tme-verde-osc);
	color:#fff;
}
.xoo-wsc-modal .xoo-wsc-footer .xoo-wsc-ft-buttons-cont a.xoo-wsc-ft-btn-checkout:hover{
	background:#00360e;
	box-shadow:0 6px 16px rgba(0,72,19,.22);
}

/* Burbuja flotante del carrito: mismo verde que el resto de la marca. */
.xoo-wsc-modal .xoo-wsc-basket{
	background:var(--tme-verde-osc);
	box-shadow:0 8px 20px rgba(0,72,19,.24);
}
.xoo-wsc-modal .xoo-wsc-items-count{
	background:var(--tme-verde);
	color:#fff;
	font-weight:700;
}

@media (max-width:480px){
	.xoo-wsc-modal .xoo-wsc-header{ padding:16px 18px 0; }
	.xoo-wsc-modal .xoo-wsc-body{ padding:4px 18px; }
	.xoo-wsc-modal .xoo-wsc-footer{ padding:16px 18px 20px; }
}

/* La línea de puntos sobre el total la pinta el plugin en varios elementos del pie. */
.xoo-wsc-modal .xoo-wsc-ft-totals,
.xoo-wsc-modal .xoo-wsc-ft-amt,
.xoo-wsc-modal .xoo-wsc-ft-amt-total,
.xoo-wsc-modal .xoo-wsc-ft-extras{
	border-top:0;
	border-bottom:0;
	border-style:none;
}
/* El separador real, uno solo y sólido. */
.xoo-wsc-modal .xoo-wsc-footer .xoo-wsc-ft-totals{
	border-top:1px solid var(--wsc-borde);
	padding-top:14px;
}