/* Agregados de la plantilla v2 sobre el CSS de /ar (styles.css, theme-refine.css y product-detail.css van sin cambios).
   Solo tres piezas que /ar no tiene: el ejemplo concreto del sales-panel, la portada cuando no hay foto
   y el aviso de recordatorio en el paso del correo. Usan los mismos colores y tipografías de /ar. */
.sales-example { margin: 18px 0 0; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: 14px; text-align: left; }
.sales-example p { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--ink); }
.sales-example p + p { margin-top: 8px; }
.sales-example .sales-example-title { font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sales-example span { font-weight: 800; }
.sales-example .sales-example-bad { color: var(--muted); }
.sales-example .sales-example-bad span { color: #b4474f; }
.sales-example .sales-example-good span { color: #1d7a55; }
.sales-example .sales-example-note { font-size: .85rem; color: var(--muted); }

.product-visual-cover { aspect-ratio: 4 / 3; display: grid; place-items: center; }
.product-visual-cover .need-cover { width: 34%; height: auto; aspect-ratio: 3 / 4; padding: 6% 5%; }
.product-visual-cover .need-cover strong { font-size: clamp(1.05rem, 3.2vw, 1.7rem); margin-top: 22%; }
.need-art .need-cover strong, .product-visual-cover .need-cover strong { display: block; }

.hero-scene-books { background: radial-gradient(circle at 30% 20%, var(--mint-pale), transparent 45%), linear-gradient(145deg, var(--lav), var(--cream)); border-radius: 29px; }

.mp-email-consent { margin-top: 10px; font-size: .8rem; }
.product-visual-cover .need-cover small { font-size: .5rem; }
.product-visual-cover .need-cover span { font-size: .6rem; white-space: nowrap; }