/* ══════════════════════════════════════════════════════════════════════
   THEME PAGE — EDITORIAL BURGUNDY OPENING BAND
   Shared by the wedding theme pages (royal, royal2, royal3, beach, and
   others). Loaded AFTER each page's inline <style>, so rules of
   equal specificity here win.

   Scope: the opening band only — back link, badge, title, description,
   rating and the preview frame. Everything below the frame (packages,
   pricing, add-ons, process, the payment flow) is deliberately untouched.
   ══════════════════════════════════════════════════════════════════════ */

/* ── The band ─────────────────────────────────────────────────────────
   The brand cognac (--primary, #8B5E3C) — the same colour as the primary
   package button, so the opening band and the main CTA agree. Flat on
   both sections so they meet without a gradient seam; the depth comes
   from a single soft highlight over the hero. */
.wrd-hero,
.wrd-demo-section{ background:var(--primary); }

.wrd-hero{
  padding:calc(var(--nav-h) + 30px) 0 44px;
  overflow:hidden;
}
.wrd-hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(115% 78% at 50% -6%,rgba(255,240,220,.16),transparent 62%);
}
.wrd-inner{ position:relative; z-index:1; max-width:780px; }

/* Nav sits on the burgundy until it picks up its scrolled background */
.navbar:not(.scrolled) .nav-link,
.navbar:not(.scrolled) .nav-link-services{ color:rgba(255,255,255,.88); }

/* ── Back ─────────────────────────────────────────────────────────────
   Centred at the top of the band rather than tucked into the left edge. */
.wrd-back{
  align-self:center;
  order:-2;
  min-height:44px;          /* comfortable tap target — the text alone is 17px */
  padding:0 12px;
  margin-bottom:22px;
  font-size:.66rem;
  font-weight:500;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(246,237,226,.74);
}
.wrd-back:hover{ color:#F6EDE2; }

/* ── Badge ────────────────────────────────────────────────────────────
   A single line of quiet outlined pills, above the name. The decorative
   ✦ rule is dropped — the badge carries the same job with less noise. */
.wrd-ornament{ display:none; }

.wrd-badges{ order:-1; gap:8px; margin-bottom:24px; }
.wrd-badge,
.wrd-badge-dot,
.wrd-badge-soft{
  font-size:.56rem;
  font-weight:500;
  letter-spacing:.18em;
  padding:7px 17px;
  background:transparent;
  color:rgba(246,237,226,.8);
  border:1px solid rgba(246,237,226,.3);
  box-shadow:none;
}
.wrd-badge-dot .wbd{ display:none; }
/* One pill only — "Luxury Wedding Experience" is decorative and repeated
   further down the page; the status badge carries the line on its own. */
.wrd-badge-soft{ display:none; }
.wrd-badge:hover{ transform:none; border-color:rgba(246,237,226,.55); color:#F6EDE2; }

/* ── Name ─────────────────────────────────────────────────────────── */
.wrd-title{
  font-size:clamp(2.7rem,5.8vw,4.7rem);
  font-weight:400;
  line-height:1.05;
  letter-spacing:-.005em;
  color:#F6EDE2;
  margin-bottom:20px;
}
/* Second-line accent on a two-line theme title. It used to be
   --primary, which now IS the band colour — the word disappeared.
   Champagne rather than --accent, which only reaches 2.8:1 on cognac;
   this clears the 3:1 large-text threshold. */
.wrd-title em{ font-style:italic; color:#EED9AE; }

/* ── Description — italic serif, narrow measure ───────────────────── */
.wrd-desc{
  font-family:var(--font-head);
  font-style:italic;
  font-weight:400;
  font-size:clamp(1rem,1.5vw,1.18rem);
  line-height:1.6;
  color:rgba(246,237,226,.78);
  max-width:530px;
}

/* ── Hero note ────────────────────────────────────────────────────────
   The page's own differentiator, taken from its feature list, rather
   than a review score. */
.wrd-hero-note{
  display:inline-flex;align-items:center;gap:9px;
  margin-top:24px;
  font-family:var(--font-body);
  font-size:.78rem;font-weight:400;
  line-height:1.45;
  color:rgba(246,237,226,.7);
}
.wrd-hero-note b{ font-weight:600; color:#F6EDE2; }
.wrd-hero-note svg{ width:14px;height:14px;flex:none;color:var(--accent); }

/* ── Preview frame ────────────────────────────────────────────────────
   Narrow and tall, like a device standing on the page, instead of the
   old full-width stage. The matte border is dropped so the beige panel
   reads as one clean slab against the burgundy. */
.wrd-demo-section{ padding:0 24px 104px; }
.wrd-frame-wrap{ max-width:560px; }

.wrd-frame-matte{
  padding:0;
  border:none;
  border-radius:34px;
  background:transparent;
  box-shadow:0 46px 104px rgba(0,0,0,.42),0 16px 40px rgba(0,0,0,.24);
}
.wrd-frame-matte:hover{
  box-shadow:0 58px 126px rgba(0,0,0,.48),0 20px 48px rgba(0,0,0,.28);
}
.wrd-frame{
  border-radius:34px;
  min-height:640px;
  background:linear-gradient(158deg,#EDE6D8 0%,#E4DBC9 55%,#DBD1BD 100%);
}
/* Flatter panel — one soft centre glow, corner glows dropped */
.wrd-frame-glow-c{ opacity:.4; }
.wrd-frame-glow-tr,
.wrd-frame-glow-bl{ display:none; }

/* ── Composition ──────────────────────────────────────────────────────
   Both screens stand UPRIGHT and side by side, the second one lifted —
   no tilt, no crossover. The float is vertical only so the pair still
   breathes without breaking the straight-on presentation. */
.wrd-composition{ padding:70px 30px 104px; }

.wrd-comp-fg{
  width:224px;
  margin-right:-10px;
  border-radius:26px;
  box-shadow:0 30px 64px rgba(0,0,0,.3),0 10px 26px rgba(0,0,0,.16);
  animation:wrdStandFg 7s ease-in-out infinite;
}
.wrd-comp-fg img{ border-radius:26px; }

.wrd-comp-bg{
  width:208px;
  border-radius:22px;
  box-shadow:0 22px 50px rgba(0,0,0,.22),0 8px 20px rgba(0,0,0,.12);
  transform:translateY(-85px);
  animation:wrdStandBg 7s ease-in-out 1.9s infinite;
}
.wrd-comp-bg img{ border-radius:22px; }

@keyframes wrdStandFg{
  0%,100%{ transform:translateY(0); }
  50%    { transform:translateY(-10px); }
}
@keyframes wrdStandBg{
  0%,100%{ transform:translateY(-85px); }
  50%    { transform:translateY(-97px); }
}

/* ── Load button ──────────────────────────────────────────────────────
   A single round control at the foot of the panel. The label is kept in
   the DOM for screen readers and as a tooltip. */
.wrd-demo-overlay{ bottom:22px; gap:10px; }
.wrd-demo-hint{
  font-family:var(--font-body);
  font-size:.6rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  color:rgba(139,94,60,.85);
  transition:color .35s var(--ease);
}
.wrd-demo-overlay:hover .wrd-demo-hint{ color:var(--primary); }
.wrd-load-btn{
  width:54px;height:54px;padding:0;
  border-radius:50%;
  justify-content:center;gap:0;
  background:#fff;
  color:var(--primary);
  box-shadow:0 12px 28px rgba(0,0,0,.18),0 4px 10px rgba(0,0,0,.08);
}
.wrd-load-btn::after{ display:none; }          /* shimmer off */
.wrd-load-btn:hover{
  background:#fff;
  letter-spacing:0;
  transform:translateY(-3px) scale(1.06);
  box-shadow:0 18px 38px rgba(0,0,0,.24),0 6px 14px rgba(0,0,0,.1);
}
.wrd-btn-hand{ width:22px;height:22px;flex:none; }
.wrd-load-label{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ── "Other Designs" cards ────────────────────────────────────────────
   The cross-sell row further down the page uses the same presentation as
   the preview frame above it: upright screens, side by side, the second
   one lifted. Previously the back screen was rotated 6°. */
.wrd-oc-stage{
  height:330px;
  align-items:flex-end;
  padding-bottom:24px;
  background:linear-gradient(158deg,#EDE6D8 0%,#E4DBC9 55%,#DBD1BD 100%);
}
.wrd-oc-fg{
  width:132px;
  margin-right:-6px;
  border-radius:17px;
  transform:none;
  box-shadow:0 20px 42px rgba(0,0,0,.26),0 7px 16px rgba(0,0,0,.13);
}
.wrd-oc-fg img{ border-radius:17px; }
.wrd-oc-bg{
  width:122px;
  border-radius:15px;
  transform:translateY(-46px);
  box-shadow:0 15px 32px rgba(0,0,0,.18),0 5px 12px rgba(0,0,0,.09);
}
.wrd-oc-bg img{ border-radius:15px; }
.wrd-other-card:hover .wrd-oc-fg{ transform:translateY(-7px); }
.wrd-other-card:hover .wrd-oc-bg{ transform:translateY(-53px); }

@media (max-width:760px){
  .wrd-hero{ padding:calc(var(--nav-h) + 22px) 0 34px; }
  .wrd-back{ margin-bottom:13px; }
  .wrd-badges{ margin-bottom:18px; }
  .wrd-title{ font-size:clamp(2.2rem,9vw,3.2rem); margin-bottom:16px; }
  .wrd-desc{ font-size:1rem; }
  .wrd-hero-note{ margin-top:18px; font-size:.72rem; align-items:flex-start; }
  .wrd-hero-note svg{ margin-top:3px; }
  .wrd-demo-section{ padding:0 18px 72px; }
  .wrd-frame{ min-height:450px; border-radius:28px; }
  .wrd-frame-matte{ border-radius:28px; }
  .wrd-composition{ padding:56px 18px 78px; }
  .wrd-comp-fg{ width:148px; margin-right:-8px; border-radius:19px; }
  .wrd-comp-fg img{ border-radius:19px; }
  .wrd-comp-bg{ width:138px; border-radius:16px; transform:translateY(-60px); }
  .wrd-comp-bg img{ border-radius:16px; }
  @keyframes wrdStandBg{
    0%,100%{ transform:translateY(-60px); }
    50%    { transform:translateY(-70px); }
  }
  .wrd-demo-overlay{ bottom:12px; gap:8px; }
  .wrd-load-btn{ width:46px;height:46px;padding:0; }
  .wrd-btn-hand{ width:19px;height:19px; }
  .wrd-demo-hint{ font-size:.54rem; letter-spacing:.18em; }
  .wrd-oc-stage{ height:290px; padding-bottom:20px; }
  .wrd-oc-fg{ width:116px; }
  .wrd-oc-bg{ width:107px; transform:translateY(-40px); }
  .wrd-other-card:hover .wrd-oc-bg{ transform:translateY(-46px); }
}

/* Small phones: the fixed mockup widths would leave only ~3px either side
   of the frame at 320px, so scale them with the viewport below 420px. */
@media (max-width:420px){
  .wrd-composition{ padding:48px 14px 88px; }
  .wrd-comp-fg{ width:41vw; max-width:148px; margin-right:-2vw; }
  .wrd-comp-bg{ width:38vw; max-width:138px; }
  .wrd-oc-fg{ width:33vw; max-width:116px; }
  .wrd-oc-bg{ width:30vw; max-width:107px; }
}

/* ══════════════════════════════════════════════════════════════════════
   INTERACTIVE-DEMO CAPTION + EXPAND-TO-LIGHTBOX
   The caption sits under the preview frame; Expand moves the live phone
   (#wrdFrame's matte) in front of a blurred backdrop, with a corner ×.
   Shared by all six theme pages via js/theme-demo.js.
   ══════════════════════════════════════════════════════════════════════ */
.wrd-demo-caption{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin:18px 2px 0;
}
.wrd-demo-cap-txt{
  font-family:var(--font-body); font-size:.78rem; letter-spacing:.03em;
  color:rgba(246,237,226,.72);
}
.wrd-demo-expand{
  display:inline-flex; align-items:center; gap:9px; flex:none;
  font-family:var(--font-body); font-size:.64rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:#F6EDE2;
  background:transparent; border:1px solid rgba(246,237,226,.34);
  border-radius:50px; padding:10px 20px; cursor:pointer;
  transition:border-color .3s var(--ease), background .3s var(--ease), transform .3s var(--ease);
}
.wrd-demo-expand:hover{ border-color:rgba(246,237,226,.72); background:rgba(246,237,226,.09); transform:translateY(-1px); }
.wrd-demo-expand svg{ width:15px; height:15px; }

/* ── Lightbox ────────────────────────────────────────────────────────── */
body.wrd-modal-open{ overflow:hidden; }
.wrd-modal{
  position:fixed; inset:0; z-index:2000;
  display:flex; align-items:center; justify-content:center; padding:24px;
}
.wrd-modal[hidden]{ display:none; }
.wrd-modal-backdrop{
  position:absolute; inset:0; z-index:1;
  background:rgba(74,12,22,.5);
  -webkit-backdrop-filter:blur(11px); backdrop-filter:blur(11px);
  opacity:0; transition:opacity .4s var(--ease);
}
.wrd-modal.open .wrd-modal-backdrop{ opacity:1; }
.wrd-modal-stage{
  position:relative; z-index:2;
  display:flex; align-items:center; justify-content:center;
  transform:scale(.94); opacity:0;
  transition:transform .45s var(--ease), opacity .45s var(--ease);
}
.wrd-modal.open .wrd-modal-stage{ transform:none; opacity:1; }
.wrd-modal-stage .wrd-frame-matte{ margin:0; }
.wrd-modal-stage .wrd-frame{ width:min(90vw,440px); min-height:min(86vh,880px); }
.wrd-modal-close{
  position:fixed; top:20px; right:20px; z-index:3;
  width:46px; height:46px; border-radius:50%; border:none; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  color:#F6EDE2; background:rgba(246,237,226,.14);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:background .3s var(--ease), transform .35s var(--ease);
}
.wrd-modal-close:hover{ background:rgba(246,237,226,.28); transform:rotate(90deg); }
.wrd-modal-close svg{ width:20px; height:20px; }
@media (max-width:600px){
  .wrd-demo-caption{ gap:12px; }
  .wrd-demo-cap-txt{ font-size:.72rem; }
  .wrd-demo-expand{ padding:9px 16px; letter-spacing:.14em; }
  .wrd-modal{ padding:14px; }
  .wrd-modal-close{ top:14px; right:14px; width:42px; height:42px; }
}

/* ══════════════════════════════════════════════════════════════════════
   THREE-TIER PLAN SELECTOR (reference-style rows)
   Presentational only. Each row carries data-tier; the single CTA calls
   the page's EXISTING startFlow(tier) — no pricing or checkout logic here.
   Prices keep .wrd-pkg-price / .wrd-pkg-was so the currency switcher works.
   ══════════════════════════════════════════════════════════════════════ */
.wpk-select{ max-width:620px; margin:44px auto 0; }
.wpk-lead{
  font-family:var(--font-head); font-style:italic; font-size:1.02rem;
  color:var(--text-m); text-align:center; margin:0 0 26px;
}
.wpk-row{
  position:relative; width:100%; display:flex; align-items:center; gap:16px; text-align:left;
  cursor:pointer; background:var(--white); border:1.5px solid rgba(201,169,110,.24);
  border-radius:18px; padding:20px 22px; margin-bottom:14px;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.wpk-row:hover{ border-color:rgba(201,169,110,.5); transform:translateY(-2px); box-shadow:0 14px 34px rgba(139,94,60,.1); }
.wpk-row.selected{ border-color:var(--primary); box-shadow:0 0 0 1px var(--primary),0 16px 40px rgba(139,94,60,.14); }
.wpk-row.selected::before{ content:''; position:absolute; left:0; top:14px; bottom:14px; width:4px; border-radius:0 4px 4px 0; background:var(--primary); }
.wpk-radio{ flex:none; width:22px; height:22px; border-radius:50%; border:2px solid rgba(139,94,60,.35); position:relative; transition:border-color .3s var(--ease); }
.wpk-row.selected .wpk-radio{ border-color:var(--primary); }
.wpk-row.selected .wpk-radio::after{ content:''; position:absolute; inset:4px; border-radius:50%; background:var(--primary); }
.wpk-info{ flex:1; min-width:0; }
.wpk-name{ display:block; font-family:var(--font-head); font-size:1.15rem; font-weight:500; color:var(--text); }
.wpk-desc{ display:block; font-family:var(--font-body); font-size:.8rem; font-weight:300; line-height:1.5; color:var(--text-m); margin-top:3px; }
.wpk-price{ flex:none; text-align:right; white-space:nowrap; display:flex; flex-direction:column; align-items:flex-end; gap:2px; }
.wpk-price .wrd-pkg-was{ font-family:var(--font-body); font-size:.72rem; color:var(--text-l); text-decoration:line-through; opacity:.65; }
.wpk-price .wrd-pkg-price{ font-family:var(--font-head); font-size:1.75rem; font-weight:600; color:var(--text); margin:0; line-height:1; letter-spacing:-.01em; }
.wpk-price .wrd-pkg-price sup{ font-size:.7em; top:-.04em; font-weight:600; margin-right:1px; }
.wpk-tag{ display:inline-block; margin-left:8px; font-family:var(--font-body); font-size:.5rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#fff; background:var(--accent); padding:3px 8px; border-radius:20px; vertical-align:middle; }
.wpk-cta{
  margin-top:22px; width:100%; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:var(--font-body); font-size:.76rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:#fff; background:var(--primary); border:none; border-radius:14px; padding:18px 28px; cursor:pointer; text-decoration:none;
  box-shadow:0 14px 36px rgba(139,94,60,.24); transition:background .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease);
}
.wpk-cta:hover{ background:#74492a; transform:translateY(-2px); box-shadow:0 20px 48px rgba(139,94,60,.3); }
.wpk-cta svg{ width:15px; height:15px; transition:transform .3s var(--ease); }
.wpk-cta:hover svg{ transform:translateX(4px); }
.wpk-note{ text-align:center; font-family:var(--font-body); font-size:.74rem; color:var(--text-l); margin:14px 0 0; }
@media (max-width:560px){
  .wpk-row{ padding:16px; gap:12px; }
  .wpk-name{ font-size:1.05rem; }
  .wpk-desc{ font-size:.75rem; }
  .wpk-price .wrd-pkg-price{ font-size:1.2rem; }
}

/* Per-tier detail list under the selector — content swaps with the choice */
.wpk-feats{
  list-style:none; margin:22px 2px 0; padding:22px 2px 0;
  border-top:1px solid rgba(201,169,110,.28);
  display:flex; flex-direction:column; gap:13px;
  transition:opacity .18s var(--ease);
}
.wpk-feats.swapping{ opacity:0; }
.wpk-feat{
  display:flex; gap:12px; align-items:flex-start;
  font-family:var(--font-body); font-size:.85rem; font-weight:300; line-height:1.5; color:var(--text-m);
}
.wpk-feat::before{ content:''; flex:none; width:14px; height:1px; background:var(--accent); margin-top:11px; }
.wpk-cta-label{ display:inline-block; }

/* ══════════════════════════════════════════════════════════════════════
   CONTENT ACCORDION — collapses the What's-included / How-it-works /
   extras / after-payment cards into minimal expandable rows.
   Built at runtime by js/theme-accordion.js (adds .wac / .wac-item).
   ══════════════════════════════════════════════════════════════════════ */
.wac{ max-width:620px; margin:10px auto 0; }
.wac-item.wrd-card{
  background:none; border-radius:0; box-shadow:none;
  border:none; border-top:1px solid rgba(201,169,110,.32);
}
.wac-item.wrd-card:hover{ transform:none; box-shadow:none; }
.wac-item:last-child{ border-bottom:1px solid rgba(201,169,110,.32); }
.wac-head{
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:none; border:none; cursor:pointer; text-align:left; padding:24px 4px;
}
.wac-label{ font-family:var(--font-head); font-size:1.3rem; font-weight:500; color:var(--text); letter-spacing:-.005em; }
.wac-ico{ position:relative; flex:none; width:20px; height:20px; }
.wac-ico::before,.wac-ico::after{
  content:''; position:absolute; background:var(--primary);
  transition:transform .35s var(--ease), opacity .35s var(--ease);
}
.wac-ico::before{ top:9px; left:1px; right:1px; height:1.6px; }   /* horizontal bar */
.wac-ico::after{ left:9px; top:1px; bottom:1px; width:1.6px; }    /* vertical bar → hidden when open */
.wac-item.open .wac-ico::after{ transform:scaleY(0); opacity:0; }
/* Collapse via grid-rows (smooth, content-height-agnostic) */
.wac-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .4s var(--ease); }
.wac-item.open .wac-panel{ grid-template-rows:1fr; }
.wac .wrd-card-body{ overflow:hidden; min-height:0; padding:0 4px; }
.wac-item.open .wrd-card-body{ padding:2px 4px 30px; }
.wac .wrd-stag{ display:none; }                 /* header replaces the eyebrow */
.wac .wrd-stitle{ font-size:clamp(1.35rem,2.6vw,1.75rem); margin-top:0; }
@media (max-width:560px){
  .wac-head{ padding:20px 2px; }
  .wac-label{ font-size:1.12rem; }
}

/* ── Tiled studio watermark over the LIVE demo (light, protective) ──
   Overrides the single-logo watermark from each theme page's inline styles.
   Shows only once the demo iframe is active; vertical "Visualaura Studio"
   repeated as a faint tile. */
.wrd-watermark{ opacity:0; transition:opacity .45s ease; }
.wrd-frame.demo-active .wrd-watermark{ opacity:1; }
.wrd-watermark::before{
  background-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='300'%20height='200'%3E%3Cg%20fill='%232c2622'%20font-family='Georgia,serif'%20font-size='15'%20letter-spacing='3'%20text-anchor='middle'%3E%3Ctext%20x='75'%20y='58'%20transform='rotate(-28%2075%2058)'%3EVisualaura%20Studio%3C/text%3E%3Ctext%20x='225'%20y='150'%20transform='rotate(-28%20225%20150)'%3EVisualaura%20Studio%3C/text%3E%3C/g%3E%3C/svg%3E");
  background-repeat:repeat;
  background-position:0 0;
  background-size:300px 200px;
  opacity:.22;
  filter:none;
  animation:none;
}