/* PageMelo live demos (pagemelo.com/demo/<design>, October 2026): the two
   floating buttons -- "Styles" (color presets + font pairings) and "Get
   <design>" (its Gumroad page) -- and the Styles card. Added to the demo
   pages only by scripts/build-demos.mjs; buyers' downloads never have it.
   Everything is prefixed pmd- and sized in px, so the design underneath
   can't restyle it (and it can't restyle the design). */
.pmd-dock, .pmd-card, .pmd-dock *, .pmd-card * {
  box-sizing: border-box;
  font-family: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.3;
}
.pmd-dock {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 990;                /* above the page, BELOW every design's own windows
                                  (Midnight's case-study window is 1000, Bootstrap's 1055,
                                  Opal's photo viewer 2000) -- measured, October 2026 */
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: 999px;
  background: rgba(255, 253, 249, 0.94);
  border: 1px solid rgba(59, 46, 37, 0.10);
  box-shadow: 0 12px 30px -10px rgba(59, 46, 37, 0.40), 0 2px 6px rgba(59, 46, 37, 0.10);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  max-width: calc(100vw - 24px);
  transition: bottom .2s ease;   /* glides above a design's button when one appears */
}
.pmd-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  margin: 0;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .15s ease, transform .15s ease;
}
.pmd-btn:focus-visible { outline: 3px solid #C15E33; outline-offset: 2px; }
.pmd-btn svg { width: 18px; height: 18px; flex: none; }
.pmd-styles { background: #FBF3E7; color: #3B2E25; }
.pmd-styles:hover, .pmd-styles[aria-expanded="true"] { background: #F5C79E; }
.pmd-buy { background: #F0904D; color: #3B2E25; }
.pmd-buy:hover { background: #F5A56C; transform: translateY(-1px); }
.pmd-buy:visited, .pmd-buy:hover, .pmd-buy:active { color: #3B2E25; text-decoration: none; }
.pmd-price { font-weight: 600; opacity: .85; }
.pmd-was { font-weight: 600; opacity: .8; }
.pmd-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 399px) { .pmd-was { display: none; } }
@media (max-width: 359px) {
  .pmd-btn { padding: 0 14px; font-size: 14px; }
}

/* Desktop / Tablet / Phone (owner, 19 October 2026): computers only. */
.pmd-views {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  background: #FBF3E7;
}
.pmd-view {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  margin: 0;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #7A6A5D;
  font-size: 13.5px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}
.pmd-view svg { width: 17px; height: 17px; flex: none; }
.pmd-view:hover { color: #3B2E25; }
.pmd-view[aria-pressed="true"] { background: #3B2E25; color: #FFFDF9; }
.pmd-view:focus-visible { outline: 3px solid #C15E33; outline-offset: 1px; }
@media (max-width: 1023px) { .pmd-views { display: none; } }

/* The tablet / phone stage: over the whole page (above the designs' navbars,
   menus and photo viewers, up to 2000), with the dock (raised to 2600 while
   it's shown) and the Styles card (3000) above it. */
.pmd-stage {
  position: fixed;
  inset: 0;
  z-index: 2500;
  display: flex;
  justify-content: flex-start;   /* overlay.js sets the device's left margin */
  align-items: flex-start;
  background: #EFE7DC;
  overflow: hidden;
}
.pmd-stage[hidden] { display: none; }
.pmd-device {
  position: relative;
  flex: none;
  transition: margin-left .2s ease;
  overflow: hidden;
  border-radius: 14px;
  background: #FFFFFF;
  box-shadow: 0 24px 48px -16px rgba(59, 46, 37, 0.40), 0 0 0 1px rgba(59, 46, 37, 0.12);
}
.pmd-frame {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  transform-origin: top left;
  background: #FFFFFF;
}
html.pmd-viewing, html.pmd-viewing body { overflow: hidden !important; }
html.pmd-viewing .pmd-dock { z-index: 2600; }
/* The Styles card moves to the right-hand side while a frame is shown, so
   the tablet / phone stays visible as colors and fonts are picked. */
html.pmd-viewing .pmd-card { left: auto; right: 24px; transform: none; }

/* The Styles card, above the dock */
.pmd-card {
  position: fixed;
  left: 50%;
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 3000;               /* while open, above EVERYTHING the design shows (the Pearls'
                                  navbar 1030 -- owner, October 2026; Noir's phone menu
                                  button 1110; photo viewers 2000). It only exists while the
                                  visitor has it open, and a tap outside closes it before
                                  any of the design's windows can open. The dock (990) stays
                                  under the designs' windows. */
  width: min(380px, calc(100vw - 24px));
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  padding: 18px 18px 14px;
  border-radius: 22px;
  background: #FFFDF9;
  color: #3B2E25;
  border: 1px solid rgba(59, 46, 37, 0.10);
  box-shadow: 0 24px 48px -12px rgba(59, 46, 37, 0.45);
  text-align: left;
}
.pmd-card[hidden] { display: none; }
.pmd-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.pmd-card-title {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: 21px;
  font-weight: 700;
  color: #3B2E25;
}
.pmd-close {
  flex: none;
  width: 44px; height: 44px; margin: -10px -10px 0 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: transparent; color: #3B2E25; cursor: pointer;
}
.pmd-close:hover { background: #FBF3E7; }
.pmd-close:focus-visible { outline: 3px solid #C15E33; outline-offset: 0; }
.pmd-close svg { width: 18px; height: 18px; }
.pmd-note { margin: 4px 0 0; font-size: 13.5px; color: #7A6A5D; }
.pmd-label {
  margin: 16px 0 8px;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: #C15E33;
}
.pmd-swatches { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pmd-swatch {
  width: 44px; height: 44px; padding: 5px; margin: 0;
  border: 2px solid transparent; border-radius: 50%; background: transparent; cursor: pointer;
}
.pmd-swatch span { display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
.pmd-swatch[aria-pressed="true"] { border-color: #3B2E25; }
.pmd-swatch:focus-visible { outline: 3px solid #C15E33; outline-offset: 1px; }
.pmd-current { margin: 6px 0 0; font-size: 13.5px; color: #3B2E25; font-weight: 600; overflow-wrap: anywhere; }
.pmd-fonts { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.pmd-font {
  width: 100%; min-height: 44px; margin: 0; padding: 8px 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border: 1.5px solid rgba(59, 46, 37, 0.14); border-radius: 14px; background: #FFFFFF;
  color: #3B2E25; font-size: 16px; text-align: left; cursor: pointer;
}
.pmd-font:hover { border-color: #F0904D; }
.pmd-font[aria-pressed="true"] { border-color: #3B2E25; background: #FBF3E7; }
.pmd-font:focus-visible { outline: 3px solid #C15E33; outline-offset: 1px; }
.pmd-font-name { overflow-wrap: anywhere; }
.pmd-font-tick { flex: none; width: 18px; height: 18px; visibility: hidden; }
.pmd-font[aria-pressed="true"] .pmd-font-tick { visibility: visible; }
.pmd-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 14px; }
.pmd-reset {
  min-height: 44px; padding: 0 4px; margin: 0; border: 0; background: transparent; color: #3B2E25;
  font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.pmd-reset:focus-visible { outline: 3px solid #C15E33; outline-offset: 1px; }
.pmd-brand { font-size: 12.5px; color: #7A6A5D; }
.pmd-brand b { color: #3B2E25; }
.pmd-brand b span { color: #F0904D; }
@media (prefers-reduced-motion: reduce) {
  .pmd-dock, .pmd-device { transition: none; }
  .pmd-btn { transition: none; }
  .pmd-buy:hover { transform: none; }
}