@media (max-width: 767px) {
  body .product-card .product-image { aspect-ratio: 1; border-radius: 16px 16px 0 0; }
  body .product-card .product-copy {
    position: static;
    display: block;
    margin: 0;
    padding: 12px;
    border-radius: 0;
    background: transparent;
    color: var(--green);
    opacity: 1;
    transform: none;
  }
  body .product-card .product-copy > span { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
  body .product-card .product-copy b { font-size: 14px; line-height: 1.4; }
  body .product-card .product-copy strong { max-width: 100%; font-size: 14px; line-height: 1.5; white-space: normal; }
  body .product-card .product-copy strong del { margin-inline-end: 4px; }
  body .product-card .product-copy small { display: block; margin-top: 8px; color: inherit; opacity: .75; font-size: 10px; line-height: 1.5; overflow-wrap: anywhere; }
  body .product-card .product-card-actions { position: static; display: block; border-top: 0; padding: 0 12px 12px; background: transparent; }
  body .product-card .product-card-actions .product-card-cart { width: 100%; min-width: 0; height: auto; min-height: 44px; padding: 10px 6px; border-radius: 999px; gap: 6px; }
  body .product-card .product-card-actions .product-card-cart > i { display: none; }
  body .product-card .product-card-actions .product-card-cart > span,
  body .product-card .product-card-secondary-actions button > span { position: static; display: block; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; clip-path: none; white-space: normal; font-size: 12px; font-weight: 650; line-height: 1.4; }
  body .product-card .product-card-actions > [data-favorite],
  body .product-card .product-card-actions .product-card-more { position: absolute; z-index: 7; top: 6px; right: 6px; display: flex; width: 44px; height: 44px; min-width: 44px; border: 0; border-radius: 50%; background: rgb(255 255 255 / .96); color: var(--green); box-shadow: 0 2px 8px rgb(0 0 0 / .08); }
  body .product-card .product-card-actions > [data-favorite].active { background: var(--orange); color: #fff; }
  body .product-card .product-card-actions [data-favorite] ~ .product-card-more { top: 54px; }
  body .product-card .product-card-secondary-actions { display: none; position: absolute; z-index: 8; right: 6px; top: 102px; width: calc(100% - 12px); padding: 4px; border: 1px solid rgb(26 61 26 / .12); border-radius: 12px; background: #fff; box-shadow: 0 5px 16px rgb(0 0 0 / .15); }
  body .product-card .product-card-more[aria-expanded="true"] + .product-card-secondary-actions { display: flex; flex-direction: column; gap: 2px; }
  body .product-card .product-card-secondary-actions button { width: 100%; min-width: 0; min-height: 44px; height: auto; flex: none; justify-content: flex-start; gap: 8px; padding: 8px; border: 0; border-radius: 8px; }
  body .product-card .product-card-secondary-actions button > i { flex: none; }
  body .product-card .product-badge { top: 8px; left: 8px; max-width: calc(100% - 16px); padding: 5px 8px; font-size: 9px; }
}
/* Builder utility classes: apply to editable groups, never to generated page IDs.
 * Mobile alternatives are normal blocks/containers, not hard-coded demo HTML. */
@media (min-width: 768px) { .bp-mobile-only { display: none !important; } }
@media (max-width: 767px) {
  .bp-desktop-only { display: none !important; }
  body .page-hero { padding: 32px 16px; }
  body .page-hero h1 { font-size: 32px !important; line-height: 1.15; }
  body .product-info h1, body .article-hero h1, body .auth-form h1 { font-size: 30px !important; line-height: 1.16; letter-spacing: -.02em; }
  body .auth-page { min-height: 0; width: calc(100% - 24px); margin: 20px auto; border-radius: 22px; }
  body .auth-form { padding: 24px 20px; }
  body .auth-form > p:not(.eyebrow,.auth-switch) { font-size: 14px; line-height: 1.6; }
  body .auth-form form.login { margin-top: 16px; padding: 0; border: 0; }
  body .auth-image { display: none; }
  body .section-heading h2, body .bp-element__heading h2,
  body .standard h2, body .bp-banner__title { font-size: 28px !important; line-height: 1.18; }
  body .bp-element__heading h2, body .bp-banner__title { letter-spacing: -.02em; word-spacing: .04em; }
  body .story-card h3, body .bp-blog-card h3 { font-size: 21px; line-height: 1.3; }
  body .bp-demo-slide-title, body .is-cat .bp-demo-slide-title { font-size: 36px !important; line-height: 1.04 !important; }
  body .bp-demo-slide-content { padding: 36px 20px 70px; }
  body .bp-demo-slide-copy { font-size: 15px; margin: 20px 0 !important; }
  .boppipaw-slider:has(.bp-demo-slide-content) .boppipaw-slider__track { min-height: 460px; }
  .boppipaw-slider .boppipaw-slider__arrow { top: auto; bottom: 14px; transform: none; width: 44px; height: 44px; }
  .boppipaw-slider .boppipaw-slider__dots { bottom: 31px; }
  body .bp-banner { min-height: 0; }
  body .bp-banner__copy { padding: 32px 20px 52vw; }
  body .hero-copy h1 { font-size: 34px; line-height: 1.05; }
  body .hero-copy > p { font-size: 14px; line-height: 1.6; }
  /* Original's desktop collage remains intact; phone layout prioritises copy
   * and pets. The featured product remains available in the product section. */
  body .hero .hero-mini { display: none; }
  body .hero .hero-pets { margin-top: 24px; }
  body .hero .hero-mobile-stats { margin-top: 22px; }
  body .category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  body .category-card { display: flex; flex-direction: column; min-width: 0; aspect-ratio: auto; background: var(--mint); color: var(--green); }
  body .category-card img { height: auto; aspect-ratio: 1; object-fit: contain; }
  body .companion-section .row > .col-12:has(.category-card) { width: 50%; }
  body .category-card > span, body .category-card > i { display: none; }
  body .category-card > h3 { position: static; max-width: none; min-height: 62px; margin: 0; padding: 12px 10px; background: var(--white, #fff); color: var(--green); font-size: 18px; line-height: 1.2; }
  body .journal-home .row > :nth-child(n+4) { display: none; }
  body .journal-home .section-heading { align-items: flex-start; gap: 16px; }
  body .journal-home .section-heading .text-link { display: inline-flex; }
  body .section { padding-block: 40px; }
  /* Avoid the flex intrinsic-size / inline-size-container feedback loop:
   * Elementor measured cards before their container query changed the copy
   * from overlay to normal flow, leaving a stale, oversized flex basis.
   * Phone cards use deterministic viewport rules; desktop keeps card queries. */
  body .product-card { container-type: normal; }
}