/* V19 W2 -- responsive illustration boxes driven by the ONE viewport adapter (pb-viewport.js).
   mobile < 768 / tablet 768-1199 / desktop >= 1200 (spec). Sizes are --pb-box-* from ViewportBoxes (server table).
   The character is never filtered / inverted / recoloured in any theme, never clipped, and on a stacked
   (narrow) row it comes AFTER the text, the product image and the primary action. */
.pb-mascot-slot { overflow: visible; max-inline-size: 100%; }
.pb-mascot-slot, .pb-mascot-slot .pb-mascot { filter: none !important; mix-blend-mode: normal; }
@media (min-width: 768px) and (max-width: 1199px) {
    .pb-mascot-slot { width: var(--pb-box-tablet, var(--pb-box-desktop)); height: var(--pb-box-tablet, var(--pb-box-desktop)); margin-inline-start: 16px; }
}
@media (max-width: 767px) {
    .pb-mascot-slot { width: var(--pb-box-mobile); height: var(--pb-box-mobile); margin-inline-start: 12px; }
}
/* vertical stacking: the text keeps the full row width; the gesture goes last */
.pb-mascot-row--stack { flex-direction: column; align-items: flex-start; flex-wrap: nowrap; }
.pb-mascot-row--stack > .pb-mascot-slot { order: 99; margin-inline-start: 0; margin-block-start: 12px; }
/* hidden by the fit rule (text < 180px even when stacked, or a sketch would go below 112px) */
.pb-mascot-slot[data-pb-fit-hidden] { display: none !important; }
/* no page-level horizontal scroll caused by an illustration row */
.pb-mascot-row--stack, .pb-mascot-slot { min-inline-size: 0; }