/* Whole, softly rounded paint sits inside every window. Shared SVGs are
 * defined on the public body; backgrounds never intercept clicks. */
body.hb-playful-site :is(
  .hbx-dialog, .hb-account-dialog, .family-dialog, .family-success-panel,
  .invoice-modal, .puppy-choice-modal, .mobile-menu-panel, .cookie-card, .cookie-settings
) {
  background-color: #fffaf2;
  background-image:
    var(--hb-decor-bone), var(--hb-decor-paw), var(--hb-decor-ball), var(--hb-decor-dog),
    var(--hb-window-lilac), var(--hb-window-sage), var(--hb-window-sun);
  background-repeat: no-repeat;
  background-size: 56px 56px, 38px 38px, 30px 30px, 52px 52px,
    min(56%, 245px) min(72%, 204px), min(52%, 215px) min(68%, 179px), min(36%, 160px) min(56%, 133px);
  background-position:
    right 14px top 30%, left 12px top 54%, right 17% bottom 16px, left 12px bottom 14px,
    right 8px top 12px, left 10px bottom 10px, right 12px bottom 12px;
  background-attachment: scroll;
}
body.hb-playful-site .hbx-dialog {
  background-color: #fffdf8;
  background-size: 70px 70px, 48px 48px, 38px 38px, 64px 64px,
    min(43%, 330px) min(72%, 275px), min(40%, 280px) min(68%, 233px), min(29%, 215px) min(56%, 179px);
}
/* Compact forms retain quiet space around headings, fields and close controls. */
body.hb-playful-site :is(.hb-account-dialog, .puppy-choice-modal, .cookie-card) {
  background-size: 42px 42px, 30px 30px, 25px 25px, 40px 40px,
    min(55%, 180px) min(72%, 150px), min(48%, 150px) min(68%, 125px), min(34%, 115px) min(56%, 96px);
  background-position:
    right 10px top 36%, left 10px top 56%, right 22% bottom 12px, left 10px bottom 12px,
    right 8px top 10px, left 8px bottom 8px, right 10px bottom 10px;
}
body.hb-playful-site :is(
  .checkout-step-content, .panel, .ph-card, .ph-hero, .hb-cart-summary, .hb-cart-empty,
  .sum, .rf-paper, .rf-help, .courier-info, .legal-disclosure[open], .family-standalone .family-form
) {
  background-color: #fffdf7;
  background-image:
    var(--hb-decor-bone), var(--hb-decor-dog), var(--hb-decor-paw), var(--hb-decor-ball),
    var(--hb-window-lilac), var(--hb-window-sage), var(--hb-window-sun);
  background-repeat: no-repeat;
  background-size: 48px 48px, 44px 44px, 32px 32px, 26px 26px,
    min(44%, 180px) min(70%, 150px), min(43%, 155px) min(68%, 129px), min(30%, 120px) min(56%, 100px);
  background-position:
    right 12px top 14px, left 12px bottom 14px, right 10px bottom 23%, left 10px top 44%,
    right 8px top 8px, left 8px bottom 8px, right 10px bottom 10px;
  background-attachment: scroll;
}
/* The scrolling area carries the chat's paint once, behind opaque message
 * bubbles and fields. It does not restart on the outer panel. */
body.hb-playful-site .hb-chat-panel {background-color: var(--chat-cream, #fffaf0);background-image: none}
body.hb-playful-site :is(.hb-chat-scroll, .hb-chat-contact-scroll, .hb-chat-action-scroll) {
  background-color: var(--chat-cream, #fffaf0);
  background-image:
    var(--hb-decor-bone), var(--hb-decor-paw), var(--hb-decor-ball), var(--hb-decor-dog),
    var(--hb-window-lilac), var(--hb-window-sage), var(--hb-window-sun);
  background-repeat: no-repeat;
  background-size: 40px 40px, 30px 30px, 26px 26px, 42px 42px,
    min(50%, 170px) min(72%, 142px), min(47%, 150px) min(68%, 125px), min(34%, 115px) min(56%, 96px);
  background-position:
    right 10px top 39%, left 8px top 62%, right 21% bottom 12px, left 10px bottom 12px,
    right 8px top 8px, left 8px bottom 8px, right 10px bottom 10px;
  background-attachment: scroll;
}
body.hb-playful-site :is(.courier-office-popup, .ph-office-results) {
  background-color: #fffdf7;
  background-image: var(--hb-decor-ball), var(--hb-window-sun);
  background-repeat: no-repeat;
  background-size: 25px 25px, min(42%, 110px) min(70%, 92px);
  background-position: right 10px bottom 10px, right 8px bottom 8px;
}
body.hb-playful-site .page-loader-card {
  background-image: var(--hb-decor-bone), var(--hb-decor-ball);
  background-repeat: no-repeat;
  background-size: 36px 36px, 25px 25px;
  background-position: left 8px top 8px, right 8px bottom 8px;
}
@media(max-width:600px) {
  body.hb-playful-site :is(
    .hbx-dialog, .hb-account-dialog, .family-dialog, .family-success-panel,
    .invoice-modal, .puppy-choice-modal, .mobile-menu-panel, .cookie-card, .cookie-settings
  ) {
    background-size: 38px 38px, 28px 28px, 24px 24px, 38px 38px,
      min(54%, 165px) min(72%, 138px), min(48%, 145px) min(68%, 121px), min(34%, 110px) min(56%, 92px);
    background-position:
      right 10px top 36%, left 8px top 56%, right 22% bottom 12px, left 8px bottom 12px,
      right 8px top 8px, left 8px bottom 8px, right 8px bottom 10px;
  }
  body.hb-playful-site :is(
    .checkout-step-content, .panel, .ph-card, .ph-hero, .hb-cart-summary, .hb-cart-empty,
    .sum, .rf-paper, .rf-help, .courier-info, .legal-disclosure[open], .family-standalone .family-form
  ) {
    background-size: 36px 36px, 36px 36px, 27px 27px, 23px 23px,
      min(45%, 150px) min(70%, 125px), min(42%, 130px) min(68%, 108px), min(30%, 100px) min(56%, 83px);
    background-position:
      right 10px top 12px, left 8px bottom 10px, right 8px bottom 24%, left 8px top 43%,
      right 8px top 8px, left 8px bottom 8px, right 8px bottom 10px;
  }
}
@media(forced-colors:active), print {
  body.hb-playful-site :is(
    .hbx-dialog, .hb-account-dialog, .family-dialog, .family-success-panel,
    .invoice-modal, .puppy-choice-modal, .mobile-menu-panel, .cookie-card, .cookie-settings,
    .checkout-step-content, .panel, .ph-card, .ph-hero, .hb-cart-summary, .hb-cart-empty,
    .sum, .rf-paper, .rf-help, .courier-info, .legal-disclosure[open], .family-standalone .family-form,
    .hb-chat-panel, .hb-chat-scroll, .hb-chat-contact-scroll, .hb-chat-action-scroll,
    .courier-office-popup, .ph-office-results, .page-loader-card
  ) {background-image: none!important}
}