/* Ficha de producto de GATERING (template-parts/gatering-pdp.php), compartida por PawCode y MediaSnout.
   Tiene que ir dentro de un contenedor con container-type: inline-size (la letra va en cqw) y con --ease y --rebote.
   PawCode la arma en boceto (data-ver / data-real con el scroll); MediaSnout la muestra terminada. */

@keyframes pcw-pop { 40% { transform: scale(1.04); } }

/* ----------  ficha de producto de GATERING con diseño propio ----------
   Referencia de Santiago (tienda de té "narra"): cinta, menú y cuerpo con los colores de GATERING con esquinas redondeadas,
   foto con flores y beneficios a la izquierda, título serif y opciones de compra a la derecha. Arranca en boceto
   gris; con data-marca toma los colores y cada [data-pp] se enciende con data-real. */
.pcw-pdp {
	/* Colores de GATERING (los de BrandPet, captura de Santiago 2026-09-28): magenta #FF006E y amarillo #FFD60A. */
	--gt-fuerte: #FF006E; --gt-fondo: #FFD60A; --gt-fondo-osc: #F5C400; --gt-claro: #FFF6C7; --gt-cinta: #FFD60A; --gt-acento: #FFD60A;
	position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; overflow: hidden;
	font-family: var(--koi-font-texto); font-size: 1.32cqw; color: var(--gt-fuerte); text-align: left;
	background: #fff; opacity: 0; transition: opacity .45s var(--ease), background-color .6s var(--ease);
}
.pcw-pdp[data-on] { opacity: 1; }
.pcw-pdp[data-marca] { background: var(--gt-fuerte); }
.pcw-pdp svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.pcw-pdp__cinta { flex: none; overflow: hidden; padding: .42em 0; background: var(--gt-cinta); font-size: .6em; font-weight: 800; white-space: nowrap; }
.pcw-pdp__cinta span { display: inline-flex; gap: 2.2em; animation: pcw-cinta 18s linear infinite; }
.pcw-pdp__cinta i { font-style: normal; }
@keyframes pcw-cinta { to { transform: translateX(-50%); } }

.pcw-pdp__nav { flex: none; display: flex; align-items: center; gap: 2.4em; padding: .75em 2.4em; color: var(--gt-claro); }
.pcw-pdp__logo { margin-right: auto; color: var(--gt-fondo); font-family: 'Fascinate', var(--koi-font-display); font-size: 1.55em; line-height: 1; }
.pcw-pdp__links { display: flex; gap: 2.4em; font-size: .72em; font-weight: 700; }
.pcw-pdp__links i { font-style: normal; }
.pcw-pdp__iconos { display: flex; gap: 1.1em; color: var(--gt-acento); }
.pcw-pdp__iconos svg { width: 1.35em; height: 1.35em; }

.pcw-pdp__cuerpo {
	flex: 1; min-height: 0; display: grid; grid-template-columns: .85fr 1fr; gap: 2.4em; align-items: start;
	margin: 0 1.3em; padding: 1em 2em 0; border-radius: 1.2em 1.2em 0 0; overflow: hidden;
	background: #F6F7F8; transition: background-color .6s var(--ease);
}
.pcw-pdp[data-marca] .pcw-pdp__cuerpo { background: var(--gt-fondo); }

.pcw-pdp__foto { position: relative; aspect-ratio: 1.5; border-radius: .7em; background: var(--gt-fondo-osc); }
.pcw-pdp__foto img { position: absolute; left: 22%; top: 7%; width: 56%; height: 86%; object-fit: cover; border-radius: .6em; }
.pcw-pdp__flor { position: absolute; width: 27%; }
.pcw-pdp__flor ellipse { fill: #fff; stroke: none; }
.pcw-pdp__flor-centro { fill: #FF006E; stroke: none; }
.pcw-pdp__flor-punto { fill: #C8005A; stroke: none; }
.pcw-pdp__flor:first-of-type { right: 3%; top: 5%; transform: rotate(12deg); }
.pcw-pdp__flor:last-of-type { left: 2%; bottom: 4%; width: 30%; transform: rotate(-8deg); }
.pcw-pdp__beneficios { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6em; margin-top: .6em; }
.pcw-pdp__beneficios span { display: grid; justify-items: center; gap: .35em; padding: .6em .3em .55em; border-radius: .6em; background: var(--gt-fondo-osc); text-align: center; }
.pcw-pdp__beneficios svg { width: 2.1em; height: 2.1em; padding: .35em; border: 1.5px solid currentColor; border-radius: 50%; }
.pcw-pdp__beneficios b { font-size: .62em; font-weight: 800; }

.pcw-pdp__der { display: flex; flex-direction: column; align-items: flex-start; gap: .6em; }
.pcw-pdp__titulo { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 2.7em; line-height: 1.02; max-width: 11em; letter-spacing: -.01em; }
.pcw-pdp__estrellas { font-size: .82em; letter-spacing: .12em; }
.pcw-pdp__packs { display: flex; gap: 1.4em; font-size: .72em; font-weight: 800; }
.pcw-pdp__packs i { font-style: normal; }
.pcw-pdp__packs i:last-child { text-decoration: underline; text-underline-offset: .25em; }
.pcw-pdp__sabores { display: flex; gap: .55em; }
.pcw-pdp__sabores i { display: grid; place-items: center; width: 2.2em; height: 2.2em; border-radius: 50%; background: var(--c); color: var(--gt-claro); }
.pcw-pdp__sabores i:first-child { box-shadow: 0 0 0 .14em var(--gt-fondo), 0 0 0 .28em var(--gt-fuerte); }
.pcw-pdp__sabores svg { width: 1.2em; height: 1.2em; }
.pcw-pdp__opcion { align-self: stretch; display: flex; flex-direction: column; gap: .4em; padding: .5em .9em; border: 1.5px solid var(--gt-fuerte); border-radius: .8em; background: var(--gt-claro); font-size: .72em; }
.pcw-pdp__opcion:not(.pcw-pdp__opcion--sub), .pcw-pdp__fila { flex-direction: row; display: flex; align-items: center; gap: .7em; }
.pcw-pdp__opcion b { margin-right: auto; font-weight: 800; }
.pcw-pdp__opcion small { font-size: .92em; }
.pcw-pdp__opcion em { font-style: normal; font-weight: 800; }
.pcw-pdp__opcion s { opacity: .45; }
.pcw-pdp__radio { flex: none; width: 1em; height: 1em; border: 1.5px solid var(--gt-fuerte); border-radius: 50%; }
.pcw-pdp__opcion--sub .pcw-pdp__radio { background: var(--gt-cinta); box-shadow: inset 0 0 0 .18em var(--gt-claro); }
.pcw-pdp__select { display: flex; align-items: center; justify-content: space-between; padding: .4em .9em; border: 1.5px solid var(--gt-fuerte); border-radius: 999px; background: #FFFBE3; font-weight: 700; }
.pcw-pdp__select svg { width: 1.2em; height: 1.2em; }
.pcw-pdp__lista { display: grid; gap: .15em; font-size: .82em; }
.pcw-pdp__lista i { font-style: normal; }
.pcw-pdp__lista i::before { content: '✓'; margin-right: .5em; font-weight: 800; }
.pcw-pdp__comprar { align-self: stretch; display: grid; grid-template-columns: 1fr auto; gap: .8em; font-size: .76em; }
.pcw-pdp__comprar b { display: flex; align-items: center; justify-content: center; padding: .7em; border-radius: 999px; background: var(--gt-fuerte); color: var(--gt-claro); font-weight: 800; }
.pcw-pdp__cant { display: flex; align-items: center; gap: 1.4em; padding: .7em 1.2em; border: 1.5px solid var(--gt-fuerte); border-radius: 999px; font-weight: 700; }
.pcw-pdp__cant i { font-style: normal; }
.pcw-pdp__texto { font-size: .72em; line-height: 1.45; }

.pcw-pdp__carrito { position: relative; display: inline-flex; }
.pcw-pdp__carrito b { position: absolute; top: -.5em; right: -.6em; display: grid; place-items: center; width: 1.3em; height: 1.3em; border-radius: 50%; background: var(--gt-cinta); color: var(--gt-fuerte); font-size: .58em; font-weight: 800; }
/* Fase 3: el cursor toca "Agregar al carrito". */
.pcw-pdp__comprar b { transition: transform .2s var(--ease), box-shadow .3s; }
.pcw-pdp__comprar b[data-clic] { transform: scale(.94); box-shadow: 0 0 0 .5em rgba(255, 0, 110, .25); }

/* Boceto: cada pieza es un bloque gris hasta que toma la marca. */
.pcw-pdp [data-pp] { transition: background-color .45s var(--ease), color .45s var(--ease), border-color .45s, box-shadow .45s, opacity .45s; }
.pcw-pdp [data-pp]:not([data-ver]) { opacity: 0; }
.pcw-pdp [data-pp]:not([data-real]) { background: #E4E6E9 !important; color: transparent !important; border-color: transparent !important; box-shadow: none !important; border-radius: .5em; }
.pcw-pdp [data-pp]:not([data-real]) > *, .pcw-pdp [data-pp]:not([data-real]) svg, .pcw-pdp [data-pp]:not([data-real]) i { visibility: hidden; }
.pcw-pdp [data-pp][data-real] { animation: pcw-pop .5s var(--rebote); }

/* Ventana angosta o celular: una columna, la foto arriba. */
@container (max-width: 480px) {
	.pcw-pdp { font-size: 3.7cqw; }
	.pcw-pdp__nav { padding: .6em 1.2em; }
	.pcw-pdp__links { display: none; }
	.pcw-pdp__cuerpo { grid-template-columns: 1fr; align-content: start; gap: .7em; margin: 0 .6em; padding: .7em .9em 0; }
	.pcw-pdp__foto { aspect-ratio: 2.3; }
	.pcw-pdp__foto img { left: 30%; width: 40%; }
	.pcw-pdp__flor { width: 21%; }
	.pcw-pdp__flor:last-of-type { width: 23%; }
	.pcw-pdp__beneficios, .pcw-pdp__packs { display: none; }
	.pcw-pdp__texto { padding-bottom: 4em; } /* que no quede debajo del botón fijo */
	.pcw-pdp__der { gap: .5em; }
	.pcw-pdp__titulo { font-size: 1.7em; max-width: none; }
	.pcw-pdp__sabores i { width: 1.9em; height: 1.9em; }
	.pcw-pdp__opcion small, .pcw-pdp__opcion s { display: none; }
	/* En el celular "Agregar al carrito" queda fijo abajo, al alcance del pulgar. */
	.pcw-pdp__comprar { position: absolute; z-index: 2; left: .9em; right: .9em; bottom: .9em; padding: .45em; border-radius: 999px; background: var(--gt-claro); box-shadow: 0 .4em 1.4em rgba(255, 0, 110, .3); }
}