/* Petmarket · Tarjeta de producto (diseño aprobado 2026-09-14).
   La misma tarjeta en la ficha nueva, la tienda y los carruseles del home. Fuera de la
   ficha no existe el contenedor .pmf, así que los tokens van en la propia tarjeta. */
.pmf-card{
	--pmf-plus:#4739a0; --pmf-plus-pale:#efedfa; --pmf-grn:#3a9e48; --pmf-grn-dark:#227a35; --pmf-grn-tint:#eaf6ec; --pmf-grn-line:#cbe6cf; --pmf-badge:#4aa64e;
	--pmf-org:#ed6436; --pmf-org-dark:#d4562b; --pmf-ink:#201d2b; --pmf-soft:#6d6885; --pmf-faint:#8b87a0; --pmf-line:#e7e5ef; --pmf-panel:#f4f3f9;
	--pmf-star:#e8a33d; --pmf-star-off:#dcd9e6; --pmf-amber:#fff4e0; --pmf-amber-ink:#8a5a00;
	position:relative; box-sizing:border-box; width:100%; min-width:0; border:1px solid var(--pmf-line); border-radius:14px; background:#fff; padding:12px;
	display:flex; flex-direction:column; row-gap:10px; text-align:left; font-family:Nunito,inherit; color:var(--pmf-ink); line-height:1.3;
	transition:border-color .15s,box-shadow .15s;
}
.pmf-card *{ box-sizing:border-box; }
.pmf-card:hover{ border-color:#d6d2e6; box-shadow:none; }
.pmf-card--off .pmf-card-img,.pmf-card--off .pmf-card-t,.pmf-card--off .pmf-card-price,.pmf-card--off .pmf-card-alt{ opacity:.55; }

/* Imagen sobre el panel, con la etiqueta de envío arriba a la derecha (cliente, 2026-09-14). */
.pmf-card-img{ position:relative; display:flex; align-items:center; justify-content:center; aspect-ratio:1/1; border-radius:10px; background:var(--pmf-panel); padding:4px; overflow:hidden; }
.pmf-card-img img{ width:100%; height:100%; max-width:100%; max-height:100%; object-fit:contain; display:block; border-radius:8px; }
.pmf-card-ship{ position:absolute; top:8px; right:8px; z-index:1; padding:3px 7px; border-radius:999px; background:var(--pmf-plus); color:#fff; border:0; font-size:9px; font-weight:900; letter-spacing:.05em; text-transform:uppercase; line-height:1.2; white-space:nowrap; }

/* Estrellas encima del título, solo con opiniones. */
.pmf-card-stars{ display:flex; align-items:center; gap:6px; font-size:12px; font-weight:800; color:var(--pmf-soft); font-variant-numeric:tabular-nums; line-height:1; }
.pmf-card-stars i{ position:relative; display:inline-block; font-style:normal; font-size:12px; letter-spacing:1px; color:var(--pmf-star-off); line-height:1; }
.pmf-card-stars i::before{ content:"★★★★★"; }
.pmf-card-stars i::after{ content:"★★★★★"; position:absolute; left:0; top:0; width:var(--pmf-r,100%); overflow:hidden; white-space:nowrap; color:var(--pmf-star); }
.pmf-card-stars span{ color:var(--pmf-faint); font-weight:700; }

/* Título partido: nombre (2 líneas) y medida. */
.pmf-card-t{ display:block !important; overflow:visible !important; max-height:none !important; white-space:normal !important; min-height:0; margin:0 !important; padding:0 !important; font-size:13.5px !important; font-weight:800 !important; line-height:1.3 !important; text-transform:none !important; letter-spacing:0 !important; }
.pmf-card-t a{ color:var(--pmf-ink) !important; text-decoration:none !important; }
.pmf-card-t a:hover{ color:var(--pmf-plus) !important; }
.pmf-card-t .pm-title-name{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; }
.pmf-card-t .pm-title-measure{ display:block; overflow:visible; white-space:normal; margin-top:3px; font-size:12px; font-weight:700; color:var(--pmf-soft); }

/* Precio grande (con RD$) y, para el miembro, el normal tachado. */
.pmf-card-price{ display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; min-height:22px; }
.pmf-card-price b{ font-size:19px; font-weight:900; letter-spacing:-.02em; line-height:1; color:var(--pmf-ink); }
.pmf-card-price del{ font-size:12.5px; font-weight:700; color:var(--pmf-faint); text-decoration:line-through; }

/* Chips: lila para recurrente/programado, verde para Plus, ámbar para 10+1. Sin "RD$". */
.pmf-card-alt{ display:flex; flex-direction:column; gap:5px; }
.pmf-card-plus,.pmf-card-recu,.pmf-card-ten{ display:flex; align-items:center; justify-content:space-between; gap:6px; min-height:32px; padding:4px 9px 4px 6px; border-radius:9px; font-size:12.5px; font-weight:800; line-height:1.2; }
.pmf-card-plus{ background:var(--pmf-grn-tint); border:1px solid var(--pmf-grn-line); color:var(--pmf-grn-dark); }
.pmf-card-recu{ background:var(--pmf-plus-pale); border:1px solid #ded9f2; color:var(--pmf-plus); }
.pmf-card-ten{ background:var(--pmf-amber); border:1px solid #f3dfb8; color:var(--pmf-amber-ink); justify-content:center; min-height:28px; font-size:11.5px; text-align:center; }
.pmf-card-plus-l,.pmf-card-recu-l{ display:flex; align-items:center; gap:5px; min-width:0; }
.pmf-card-recu-l svg{ width:13px; height:13px; flex:0 0 auto; }
.pmf-card-plus-n,.pmf-card-recu-n{ margin-left:auto; font-size:13px; font-weight:900; white-space:nowrap; }
.pmf-card .pmf-plusbadge{ display:inline-flex; align-items:baseline; background:var(--pmf-badge); color:#fff; font-weight:800; letter-spacing:-.2px; padding:3px 9px 4px; border-radius:9px; line-height:1; font-size:11.5px; }
.pmf-card .pmf-plusbadge span{ display:inline; width:auto; margin:0 0 0 1px; font-size:.8em; text-transform:none; letter-spacing:inherit; color:inherit; font-weight:inherit; }

/* Botón: naranja de la marca; gris cuando no hay stock. */
.pmf-card .pmf-card-add{ margin-top:auto !important; flex:0 0 auto; display:flex !important; align-items:center; justify-content:center; width:100% !important; height:40px !important; min-height:0 !important; line-height:1 !important; border:0 !important; border-radius:999px !important; background:var(--pmf-org) !important; color:#fff !important; font:inherit !important; font-size:14px !important; font-weight:800 !important; padding:0 12px !important; text-decoration:none !important; text-transform:none !important; letter-spacing:0 !important; box-shadow:none !important; cursor:pointer; transition:background .15s; }
.pmf-card .pmf-card-add:hover{ background:var(--pmf-org-dark) !important; color:#fff !important; }
.pmf-card .pmf-card-add.is-off{ background:var(--pmf-panel) !important; color:var(--pmf-faint) !important; cursor:default; pointer-events:none; }
.pmf-card .pmf-card-add.is-busy,.pmf-card .pmf-card-add.loading{ pointer-events:none; position:relative; color:transparent !important; }
.pmf-card .pmf-card-add.is-busy::after,.pmf-card .pmf-card-add.loading::after{ content:""; position:absolute; top:50%; left:50%; width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%; border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff; animation:pmf-spin .6s linear infinite; }
.pmf-card .pmf-card-add.is-done,.pmf-card .pmf-card-add.added{ background:var(--pmf-grn) !important; color:#fff !important; }
.pmf-card .pmf-card-add.added::after{ content:none !important; }
/* WooCommerce agrega "Ver carrito" tras el botón: no cabe en la tarjeta. */
.pmf-card .added_to_cart{ display:none !important; }
@keyframes pmf-spin{ to{ transform:rotate(360deg); } }

/* Vistos recientemente: imagen y título nada más. */
.pmf-card--mini{ row-gap:10px; }
.pmf-card--mini .pmf-card-t{ min-height:0; }

/* Fuera de la ficha la tarjeta reemplaza el contenido de la tarjeta del tema. Esto anula
   lo que el tema pone sobre sus contenedores (bordes, hover de imagen, botón oculto). */
.product-wapper:has(> .products-thumb > .pmf-card){ border:0 !important; padding:0 !important; margin:0 0 20px !important; background:none !important; box-shadow:none !important; overflow:visible !important; container-type:inline-size; }
.product-wapper:has(> .products-thumb > .pmf-card) > .products-thumb{ position:static !important; display:block !important; width:100% !important; overflow:visible !important; padding:0 !important; margin:0 !important; border:0 !important; border-radius:0 !important; background:none !important; box-shadow:none !important; transform:none !important; }
.product-wapper:has(> .products-thumb > .pmf-card) > .products-content{ display:none !important; }
/* El CSS personalizado del sitio (custom-css-js/43382) pone un velo gris al 3% sobre .products-thumb con ::after; con la tarjeta nueva dentro cubría toda la tarjeta. */
.product-wapper:has(> .products-thumb > .pmf-card) > .products-thumb::before,.product-wapper:has(> .products-thumb > .pmf-card) > .products-thumb::after{ content:none !important; display:none !important; }
.product-wapper:has(> .products-thumb > .pmf-card) .pmf-card{ height:100%; }
/* Tarjeta estrecha (carrusel del home, 183 px): todo un punto más chico. */
@container (max-width:210px){
	.pmf-card{ padding:10px; row-gap:8px; }
	.pmf-card-t{ font-size:13px !important; }
	.pmf-card-price b{ font-size:18px; }
	.pmf-card-plus,.pmf-card-recu{ min-height:30px; font-size:12px; padding:3px 8px 3px 5px; }
	.pmf-card .pmf-plusbadge{ font-size:10.5px; padding:2px 7px 3px; }
	.pmf-card-ship{ font-size:8.5px; padding:2px 6px; }
	.pmf-card .pmf-card-add{ height:38px !important; font-size:13px !important; }
	.pmf-card-recu-l .pmf-card-recu-txt-l{ display:none; }
	.pmf-card-recu-l .pmf-card-recu-txt-s{ display:inline; }
	.pmf-card-ten .pmf-card-ten-l{ display:none; }
	.pmf-card-ten .pmf-card-ten-s{ display:inline; }
}
.pmf-card-recu-txt-s,.pmf-card-ten-s{ display:none; }

/* Móvil: dos por fila. El visitante ve un solo chip (Plus); el miembro ve Programado y su ahorro. */
@media (max-width:767px){
	.pmf-card{ padding:9px; row-gap:8px; border-radius:12px; }
	.pmf-card-t{ font-size:12.5px !important; }
	.pmf-card-t .pm-title-measure{ font-size:11.5px; }
	.pmf-card-price b{ font-size:17px; }
	.pmf-card-price del{ font-size:12px; }
	.pmf-card-plus,.pmf-card-recu{ min-height:30px; font-size:11.5px; padding:3px 8px 3px 5px; }
	.pmf-card .pmf-card-add{ height:38px !important; font-size:13px !important; }
	.pmf-card-stars,.pmf-card-stars i{ font-size:11px; }
	.pmf-card-ship{ font-size:8.5px; padding:2px 6px; }
	.pmf-card--tienda .pmf-card-recu:not(.pmf-card-recu--prog){ display:none; }
}

/* Flechas del carrusel (home, "También te puede interesar" del tema): el tema las centra a
   media altura, y con la tarjeta nueva caían sobre el título. Van a la altura de la foto. */
.content-product-list:has(.pmf-card) i.slick-arrow,.slick-slider:has(.pmf-card) i.slick-arrow{ top:23% !important; transform:translateY(-50%) !important; margin-top:0 !important; }