/* Página individual de producto */
.single-product .product-title {
    color: #1a1a1a;
    font-family: "Poppins", sans-serif;
}

.single-product .product-price {
    color: #c12b3b;
    font-family: "Poppins", sans-serif;
}

.single-product .woocommerce-tabs ul.tabs li a {
    color: #1a1a1a;
}

.single-product .woocommerce-tabs ul.tabs li.active a {
    border-bottom: 2px solid #c12b3b;
}

.single-product .woocommerce-tabs .panel {
    color: #333;
    font-size: 1rem;
}

.single-product .woocommerce-button {
    background-color: #c12b3b;
    color:#fff;
    padding:12px 20px;
    text-transform: uppercase;
    font-weight:700;
}

.single-product .woocommerce-button:hover {
    background-color: #a22630;
    color:#fff;
}



/* contenedor fijo principal, pegado al borde izquierdo */
#sf-panel {
	position: fixed;
	left: 0;                 /* pegado al borde izquierdo */
	bottom: 95px;
	width: 86px;             /* ancho del panel */
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
}

/* el panel amarillo: todo dentro de un solo contenedor */
#sf-panel .panel {
	pointer-events: auto;
	width: 86px;
	background: linear-gradient(180deg, #f4c43a 0%, #f0b71d 100%);
	color: #111;
	border-radius: 0 24px 24px 0; /* redondeo solo en la derecha */
	box-shadow: 10px 10px 30px rgba(0,0,0,0.35), inset -10px -6px 18px rgba(0,0,0,0.06);
	padding: 18px 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;               /* separación entre íconos */
	min-height: 10px;       /* alto del panel, ajusta si quieres */
	position: relative;
	overflow: visible;
}

/* icon links dentro del panel */
.sf-item {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	text-decoration: none;
	color: inherit;
	font-size: 27px;
	transition: transform .16s ease, box-shadow .16s ease;
	background: rgba(255,255,255,0); /* transparente para mantener panel uniforme */
}

/* icon sizes (fontawesome) */
.sf-item i { width: 28px; height: 28px; display:block; text-align:center; }

/* hover ligero para cada icono */
.sf-item:hover, .sf-item:focus {
	transform: translateX(6px);
	box-shadow: 0 8px 18px rgba(0,0,0,0.22);
	outline: none;
}

/* estilos para sobrescribir color del icono según tipo (si quieres iconos blanco) */
.sf-item.sf-insta i { color: #000; }
.sf-item.sf-link i { color: #000; }
.sf-item.sf-web i { color: #000; }

/* Punto indicador externo (a la derecha del panel) */
#sf-dot { 	
	position: absolute;
	left: 100%; /* justo a la derecha del panel */
	top: 50%;   /* se moverá verticalmente con JS */
	transform: translate(-12px, -50%); /* offset inicial a la derecha */
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(255,255,255,0.6) 18%, rgba(0,0,0,0.18) 70%), linear-gradient(180deg,#8b6a0b,#4b3506);
	box-shadow: 0 6px 18px rgba(0,0,0,0.45);
	pointer-events: none;
	transition: transform .18s cubic-bezier(.2,.9,.3,1), opacity .16s;
	opacity: .98;
}

/* reducir opacidad cuando no hay interacción para efecto sutil */
#sf-panel:not(:hover) #sf-dot { opacity: 0.2; transform: translate(-12px, -45%); }

/* adaptativo móvil: reducir panel */
@media (max-width: 600px) {
	#sf-panel {
		display: none;
	}
}

/* foco accesible */
.sf-item:focus { box-shadow: 0 0 0 4px rgba(255,255,255,0.12), 0 8px 18px rgba(0,0,0,0.28); }