@media only screen and (max-width: 767px) {
  /* Imported template rules give .p_hfcontainer a stronger display override.
     Keep the tablet/desktop header trees fully absent on phones so their
     absolute-positioned hamburger cannot escape into page content. */
  body.dmMobileBody #dm .dp-tablet-only,
  body.dmMobileBody #dm .dp-desktop-only,
  body.dmMobileBody #dm .dp-only-desktop { display: none !important; }

  /* The imported tablet header has malformed legacy closing markup, which
     causes only its button to escape its hidden wrapper. The mobile header
     targets mobile-hamburger-drawer; hide just that escaped tablet control. */
  body.dmMobileBody #site_content > .layout-drawer-hamburger[aria-controls="hamburger-drawer"] { display: none !important; }
}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  body.dmTabletBody .dp-mobile-only,
  body.dmTabletBody .dp-desktop-only,
  body.dmTabletBody .dp-only-mobile { display: none !important; }
}
@media only screen and (min-width: 1025px) {
  body.dmDesktopBody .dp-mobile-only,
  body.dmDesktopBody .dp-tablet-only,
  body.dmDesktopBody .dp-only-mobile { display: none !important; }
}

/* Welcome popup shown-state geometry. The popup content and its chrome rules
   (white card, 10px radius, pancakes background + white .5 overlay, element
   sizing) ship with components/html/popup-welcome.html — ported from the live
   Duda rules-engine popup page. These rules only replicate what Duda's
   popup.js set at runtime: fixed 596px width, centered, light-gray mask. */
.dmPopupMask.dp-welcome-mask { display: block; width: 100%; height: 100%; background: rgba(195, 195, 195, .5); }
#dmPopup.dp-welcome { display: block; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 596px; max-width: calc(100vw - 24px); height: auto; max-height: calc(100vh - 32px); overflow-x: auto; overflow-y: hidden; background: #fff; }
#dmPopup.dp-welcome .data { overflow-y: auto; height: 100%; max-height: calc(100vh - 72px); }

/* ---- Target-state UX overrides (Stephen, 2026-07-29): approved deviations
   from the strict live replica; each fixes a layout flaw the original site
   shipped. Companion markup transforms live in PageShell
   applyTargetStateOverrides()/cleanHeader(). ---- */

/* Header: the hand-added promo-video block never renders its videos (home
   shows its own copies in content) but its <br>s left a ~96px empty teal
   band under the nav on every page. */
#dm #hcontainer .dmHeaderResp > div[style*="max-width:100%"] { display: none !important; }

/* Home: the Meet Pablo & Priscilla section is a lone 7-of-12 column pinned
   to the left edge, leaving ~600px of dead white space — center it. (body
   prefix outranks the imported *#dm *.dmBody u_ rules; dp-base loads first.) */
body #dm .dmBody div.u_1788870816 { float: none !important; margin-left: auto !important; margin-right: auto !important; }

/* Home: the BUY THE BOOK row shipped an empty left column and left-anchored
   text — collapse to a full-width centered CTA (link added in PageShell). */
body[data-page-alias="home"] #dm div[id="1621751697"] { display: none !important; }
body[data-page-alias="home"] #dm div[id="1396061235"] { width: 100% !important; float: none !important; }
body[data-page-alias="home"] #dm div[id="1396061235"] h3,
body[data-page-alias="home"] #dm div[id="1396061235"] p { text-align: center !important; }
body[data-page-alias="home"] #dm div[id="1450634193"],
body[data-page-alias="home"] #dm div[id="1037544874"] { max-width: 620px; margin-left: auto !important; margin-right: auto !important; }
body[data-page-alias="home"] #dm div[id="1029218349"] { float: none !important; width: 241px !important; position: relative !important; left: calc(50% - 120.5px) !important; }

/* Site CTA pill, styled after the original cyan Duda buttons. */
.dp-cta-pill { display: inline-block; background: rgb(24, 213, 215); color: #fff !important; font-family: "Roboto Slab", "Roboto Slab Fallback", serif; font-size: 18px; line-height: 1; padding: 14px 36px; border-radius: 50px; text-decoration: none !important; margin: 10px 0; }
.dp-cta-pill:hover { background: rgb(20, 190, 192); }

/* choose-your-purchase: the page opened with a stray "Thank you! Your form
   has been submitted." heading (dead Duda form-redirect flow). */
body[data-page-alias="choose-your-purchase"] #dm .u_1962379124 { display: none !important; }

/* about-page: six empty spacer rows left ~800px of blank page. */
body[data-page-alias="about-page"] #dm .dmRespRow:has(> .dmRespColsWrapper > .empty-column:only-child) { display: none !important; }

/* store: dead Duda e-commerce chrome (search box + cart icon) — the store
   backend dies with Duda; the row can never work. */
body[data-page-alias="store"] #dm .u_1140831030 { display: none !important; }

/* Flipbook: Designrr's embedded reader was authored at a fixed 600 × 800px,
   which exceeds narrow viewports. Keep the exact third-party reader and its
   3:4 presentation on phones while allowing its containing column to size it. */
@media only screen and (max-width: 767px) {
  #dm .u_dmStyle_template_flipbook [id="1144902809"] {
    /* Pull only the reader out to the phone edges; the surrounding copy keeps
       its established responsive gutters. */
    position: relative;
    left: 50%;
    width: 100vw !important;
    max-width: 100vw !important;
    height: auto !important;
    transform: translateX(-50%);
  }

  #dm .u_dmStyle_template_flipbook [id="1144902809"] > iframe {
    display: block;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 4;
  }

  /* Mobile drawer: provide a clear, thumb-friendly way to dismiss the menu
     without relying on the small header hamburger or an outside-tap gesture. */
  body.dmMobileBody #mobile-hamburger-drawer .dp-mobile-menu-close {
    position: absolute !important;
    z-index: 2;
    top: 18px;
    right: 18px;
    display: grid !important;
    width: 44px;
    height: 44px;
    place-items: center;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    background: rgba(0, 0, 0, .12);
    color: #fff;
    cursor: pointer;
    font: 400 34px/1 Arial, sans-serif;
  }

  body.dmMobileBody #mobile-hamburger-drawer .dp-mobile-menu-close:focus-visible {
    outline: 3px solid #ffe85c;
    outline-offset: 3px;
  }
}

/* Home desktop header: keep the custom characters and wordmark in the upper-left
   while sharing the original compact navigation row. Mobile/tablet keep their
   imported compact logo and navigation unchanged. */
.dp-home-desktop-brand { display: none; }
@media only screen and (min-width: 1260px) {
  #site_content:has(.dp-home-desktop-brand) #hcontainer { min-height: 176px; }
  #site_content:has(.dp-home-desktop-brand) #hcontainer [id="1419089597"] { visibility: hidden; }
  #site_content:has(.dp-home-desktop-brand) #hcontainer [id="1798338620"] {
    padding-top: 31px;
    transform: translateX(88px);
  }

  #site_content:has(.dp-home-desktop-brand) .dp-home-desktop-brand {
    position: absolute;
    z-index: 3;
    top: 18px;
    left: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(480px, calc(100vw - 32px));
    min-height: 128px;
    color: #aa72ab;
    text-decoration: none;
  }

  #site_content:has(.dp-home-desktop-brand) .dp-home-desktop-brand-characters {
    display: flex;
    flex: 0 0 auto;
    align-items: flex-end;
    height: 128px;
  }
  #site_content:has(.dp-home-desktop-brand) .dp-home-desktop-brand-characters img {
    display: block;
    width: auto;
    height: 122px;
    object-fit: contain;
    object-position: center bottom;
  }
  #site_content:has(.dp-home-desktop-brand) .dp-home-desktop-brand-wordmark {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    height: auto;
  }
  #site_content:has(.dp-home-desktop-brand) .dp-home-desktop-brand:focus-visible { outline: 3px solid #18d5d7; outline-offset: 5px; }
}