/* Priceless Productions -- example pages embedded in WordPress (PP-94, 2026-09-20).
   Everything is scoped under .ppx so the Astra theme's own styles are left alone. */
/* The WordPress theme is dark (black page, white text), so the tokens are the dark set of our brand.
   --ink is the strongest text, --body the reading text, --card a lifted surface, --line a hairline. */
.ppx { --cyan:#00C9FF; --cyan-dark:#33D6FF; --ink:#ffffff; --body:#c9ced6; --muted:#8f97a3; --line:rgba(255,255,255,.14); --page:#0b0c0e; --card:#15171b;
       --display:"Barlow Condensed","Arial Narrow",Arial,sans-serif; --text:"DM Sans",Arial,Helvetica,sans-serif;
       font-family:var(--text); color:var(--body); line-height:1.65; font-size:16px; }
.ppx *, .ppx *::before, .ppx *::after { box-sizing:border-box; }
.ppx img { max-width:100%; display:block; height:auto; }
.ppx .eyebrow { margin:0 0 10px; font-size:12px; font-weight:700; letter-spacing:3px; text-transform:uppercase; color:var(--cyan-dark); }
.ppx h2, .ppx h3 { font-family:var(--display); color:var(--ink); margin:0; line-height:1.05; letter-spacing:.2px; }
.ppx h2 { font-size:clamp(30px,4.5vw,44px); font-weight:700; }
.ppx h3 { font-size:22px; font-weight:600; }
.ppx p { margin:0; }
.ppx h1.page-title { font-family:var(--display); color:var(--ink); font-weight:700; font-size:clamp(40px,7vw,72px); line-height:1; letter-spacing:.3px; margin:4px 0 16px; }
.ppx .intro { font-size:18px; line-height:1.7; max-width:62ch; margin:0 0 8px; }
.ppx .lead { max-width:62ch; margin:10px 0 0; font-size:17px; }
.ppx .accent { height:4px; width:72px; background:var(--cyan); margin:18px 0 0; border-radius:2px; }
.ppx .jump { display:flex; flex-wrap:wrap; gap:8px; margin:22px 0 0; }
.ppx .jump a { font-size:13px; font-weight:700; letter-spacing:1px; text-transform:uppercase; text-decoration:none; color:var(--ink);
               background:var(--card); border:1.5px solid var(--line); padding:9px 14px; border-radius:999px; }
.ppx .jump a:hover { background:#1c1f25; }
.ppx .jump a:hover { border-color:var(--cyan); color:var(--cyan-dark); }
.ppx section.block { padding:44px 0 8px; border-top:1px solid var(--line); margin-top:36px; scroll-margin-top:110px; }
.ppx section.block:first-of-type { border-top:0; margin-top:24px; padding-top:20px; }
.ppx .block-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:8px 20px; margin-bottom:18px; }
.ppx .block-head p { color:var(--muted); font-size:15px; max-width:60ch; }
.ppx .hint { font-size:13px; color:var(--muted); margin-top:10px; }

/* Before / after slider */
.ppx .ba { position:relative; aspect-ratio:3/2; border-radius:12px; overflow:hidden; background:#1a1c20; box-shadow:0 14px 40px rgba(0,0,0,.45); user-select:none; -webkit-user-select:none; touch-action:pan-y; }
.ppx .ba img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ppx .ba .ba-before { clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0); }
.ppx .ba .ba-handle { position:absolute; top:0; bottom:0; left:var(--pos,50%); width:2px; background:#fff; transform:translateX(-1px); box-shadow:0 0 0 1px rgba(0,0,0,.25); pointer-events:none; }
.ppx .ba .ba-handle::after { content:"\2039\0020\203A"; position:absolute; top:50%; left:50%; width:46px; height:46px; margin:-23px 0 0 -23px; border-radius:50%; background:var(--cyan); color:#fff;
       font:700 22px/46px var(--display); text-align:center; letter-spacing:2px; box-shadow:0 6px 18px rgba(0,0,0,.3); }
.ppx .ba .ba-range { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:ew-resize; }
.ppx .ba .ba-tag { position:absolute; bottom:14px; background:rgba(0,0,0,.72); color:#fff; font-size:12px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; padding:6px 10px; border-radius:4px; pointer-events:none; }
.ppx .ba .ba-tag.before { left:14px; } .ppx .ba .ba-tag.after { right:14px; }

/* Galleries */
.ppx .grid { display:grid; gap:14px; grid-template-columns:1fr; }
.ppx .grid.two { grid-template-columns:1fr; }
.ppx .grid.three { grid-template-columns:1fr; }
@media (min-width:640px) { .ppx .grid.two, .ppx .grid.three { grid-template-columns:1fr 1fr; } }
@media (min-width:960px) { .ppx .grid.three { grid-template-columns:1fr 1fr 1fr; } }
.ppx .shot { position:relative; display:block; border-radius:10px; overflow:hidden; background:#1a1c20; aspect-ratio:3/2; cursor:zoom-in; box-shadow:0 10px 28px rgba(0,0,0,.4); }
.ppx .shot img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.ppx .shot:hover img { transform:scale(1.03); }
.ppx .shot.plan { aspect-ratio:4/3; background:#ffffff; border:1px solid var(--line); }
.ppx .shot.plan img { object-fit:contain; padding:10px; }
.ppx .shot .cap { position:absolute; left:12px; bottom:12px; background:rgba(0,0,0,.72); color:#fff; font-size:12px; letter-spacing:1px; text-transform:uppercase; padding:6px 10px; border-radius:4px; }

/* CTA band */
.ppx .cta { margin:56px 0 20px; padding:34px 28px; background:var(--card); border:1px solid var(--line); border-radius:14px; color:#fff; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px 28px; }
.ppx .cta h3 { color:#fff; font-size:clamp(24px,3.5vw,34px); font-weight:700; }
.ppx .cta p { color:var(--body); margin-top:6px; max-width:52ch; }
.ppx .btn { display:inline-block; font-weight:700; font-size:14px; letter-spacing:1.5px; text-transform:uppercase; text-decoration:none; padding:16px 30px; border-radius:6px; background:var(--cyan); color:#fff !important; box-shadow:0 6px 18px rgba(0,201,255,.28); white-space:nowrap; }
.ppx .btn:hover { background:var(--cyan-dark); color:#fff; }

/* Lightbox */
.ppx-lb { position:fixed; inset:0; z-index:99999; background:rgba(0,0,0,.94); display:none; align-items:center; justify-content:center; }
.ppx-lb.open { display:flex; }
.ppx-lb img { max-width:94vw; max-height:88vh; object-fit:contain; box-shadow:0 20px 60px rgba(0,0,0,.6); border-radius:6px; }
.ppx-lb button { position:absolute; background:rgba(255,255,255,.1); color:#fff; border:0; width:48px; height:48px; border-radius:50%; font-size:28px; line-height:48px; cursor:pointer; }
.ppx-lb button:hover { background:rgba(255,255,255,.22); }
.ppx-lb .lb-close { top:16px; right:16px; } .ppx-lb .lb-prev { left:14px; top:50%; margin-top:-24px; } .ppx-lb .lb-next { right:14px; top:50%; margin-top:-24px; }
.ppx-lb .lb-back { position:absolute; left:50%; transform:translateX(-50%); bottom:52px; width:auto; height:auto; padding:12px 22px; border-radius:999px; background:#00C9FF; color:#000; font:700 13px/1 "Montserrat",Arial,sans-serif; letter-spacing:1.5px; text-transform:uppercase; border:0; cursor:pointer; }
.ppx-lb .lb-close { width:48px; height:48px; font-size:34px; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.35); }
.ppx-lb .lb-cap { position:absolute; bottom:18px; left:0; right:0; text-align:center; color:#bbb; font:500 13px/1.4 "DM Sans",Arial,sans-serif; letter-spacing:1px; text-transform:uppercase; }
@media (max-width:640px) { .ppx-lb .lb-prev, .ppx-lb .lb-next { display:none; } }
/* Back to packages pill (2026-10-29): shown on example pages opened from the sales packages page */
.ppx-backbar { position:fixed; left:50%; transform:translateX(-50%); bottom:calc(18px + env(safe-area-inset-bottom, 0px)); z-index:9999; padding:13px 22px; border-radius:999px; background:#00C9FF; color:#000 !important; font:700 13px/1 "Montserrat",Arial,sans-serif; letter-spacing:1.5px; text-transform:uppercase; text-decoration:none !important; box-shadow:0 8px 28px rgba(0,0,0,.45); white-space:nowrap; }
.ppx-backbar:hover { background:#33d4ff; }
.ppx-lb.open ~ .ppx-backbar, body:has(.ppx-lb.open) .ppx-backbar { display:none; }

/* Inside the HDPH cart popup (an iframe) the page is a preview, not a landing page: hide the site's own
   header/footer/admin bar so only the content shows, and swap the Book button for a 'close and add it' line. */
html.ppx-framed .elementor-location-header, html.ppx-framed .elementor-location-footer, html.ppx-framed #masthead, html.ppx-framed #colophon,
html.ppx-framed header.entry-header, html.ppx-framed .ast-above-header-wrap, html.ppx-framed #wpadminbar, html.ppx-framed .ast-scroll-top-icon, html.ppx-framed #ast-scroll-top { display:none !important; }
html.ppx-framed { margin-top:0 !important; }
html.ppx-framed #content, html.ppx-framed .site-content { padding-top:10px !important; }
.ppx .cta .cta-book, .ppx .cta .cta-framed, .ppx .cta .cta-tab { display:none; }
.ppx .cta.mode-book .cta-book, .ppx .cta.mode-framed .cta-framed, .ppx .cta.mode-tab .cta-tab { display:block; }
.ppx .cta.mode-framed, .ppx .cta.mode-tab { border-color:rgba(0,201,255,.45); }
.ppx .cta .cta-framed h3 b, .ppx .cta .cta-tab h3 b { color:var(--cyan); }
.ppx .cta .steps { display:flex; flex-wrap:wrap; gap:10px 18px; margin:14px 0 0; padding:0; list-style:none; counter-reset:s; }
.ppx .cta .steps li { counter-increment:s; color:var(--body); font-size:15px; display:flex; gap:10px; align-items:baseline; }
.ppx .cta .steps li::before { content:counter(s); flex:0 0 26px; height:26px; border-radius:50%; background:var(--cyan); color:#000; font:700 14px/26px var(--display); text-align:center; }

/* Package pages (PP-95): property-site layout */
.ppx.pkg .hero-block { border-top:0; margin-top:24px; padding-top:8px; }
.ppx .shot.hero { aspect-ratio:16/9; cursor:zoom-in; }
.ppx .shot.hero .cap { font-size:13px; letter-spacing:.5px; text-transform:none; padding:8px 12px; }
.ppx .checks { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr; gap:10px 24px; }
@media (min-width:760px) { .ppx .checks { grid-template-columns:1fr 1fr; } }
.ppx .checks li { position:relative; padding-left:34px; color:var(--ink); font-size:16px; line-height:1.5; }
.ppx .checks li::before { content:""; position:absolute; left:0; top:4px; width:22px; height:22px; border-radius:50%; background:var(--cyan); }
.ppx .checks li::after { content:""; position:absolute; left:8px; top:8px; width:5px; height:10px; border:solid #000; border-width:0 2.5px 2.5px 0; transform:rotate(45deg); }
.ppx .video-wrap { position:relative; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:#1a1c20; box-shadow:0 14px 40px rgba(0,0,0,.45); }
.ppx .video-wrap iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.ppx .tour-card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:22px 24px; }
.ppx .tour-card h3 { margin-bottom:6px; }
.ppx .tour-card p { color:var(--body); font-size:15px; }
.ppx .btn-link { display:inline-block; margin-top:8px; font-weight:700; font-size:13px; letter-spacing:1.5px; text-transform:uppercase; text-decoration:none; color:#000 !important; background:var(--cyan); padding:12px 20px; border-radius:6px; }
.ppx .btn-link:hover { background:var(--cyan-dark); }

.ppx .grid .shot.more { display:none; }
.ppx .grid.expanded .shot.more { display:block; }
.ppx .more-row { margin:16px 0 0; }
.ppx .show-more { font:700 13px/1 var(--text); letter-spacing:1.5px; text-transform:uppercase; color:var(--ink); background:var(--card); border:1.5px solid var(--line); padding:12px 20px; border-radius:999px; cursor:pointer; }
.ppx .show-more:hover { border-color:var(--cyan); color:var(--cyan-dark); }

.ppx .cta .cta-secondary { margin-top:14px; font-size:14px; color:var(--muted); }
.ppx .cta .cta-secondary a { color:var(--cyan-dark); text-decoration:underline; }