/* Premium Profile — Option 5. Its default values match Figma while the
   active card/tenant palette remains the source of truth. */
[data-template="premium-profile"] {
  --premium-brand: var(--qardora-brand, #4a0e5c);
  --premium-footer: var(--qardora-action, var(--premium-brand));
  --premium-icon: var(--qardora-icon, var(--premium-brand));
  --premium-page: var(--qardora-page, #f4f1f6);
  --premium-surface: var(--qardora-surface, #fff);
  --premium-ink: var(--qardora-ink, #1e1222);
  --premium-muted: var(--qardora-muted, #5a4e65);
  --premium-border: var(--qardora-border, #eadfef);
  position: relative;
  display: flex;
  width: min(100%, 390px);
  min-height: 812px;
  margin: 0 auto;
  flex-direction: column;
  overflow: clip;
  background: var(--premium-surface);
  color: var(--premium-ink);
  box-shadow: 0 16px 32px rgb(44 23 53 / 10%);
  --premium-font: var(--qardora-card-font, Manrope, Inter, Arial, sans-serif);
  font-family: var(--premium-font);
}
[data-template="premium-profile"][data-premium-font="inter"] { --premium-font: Inter, Arial, sans-serif; }
[data-template="premium-profile"][data-premium-font="system"] { --premium-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
[data-template="premium-profile"][data-premium-font="serif"] { --premium-font: Georgia, "Times New Roman", serif; }
[data-template="premium-profile"][data-premium-font="custom"] { --premium-font: "Qardora Premium Custom", Manrope, Inter, Arial, sans-serif; }

body.public-card-classic:has([data-template="premium-profile"]) {
  min-width: 0;
  min-height: 100svh;
  overflow-x: hidden;
  background: var(--premium-page);
}

/* The supplied desktop frame has no utility controls.  On mobile, Premium
   uses the same optional directory and locale controls as the other cards. */
[data-template="premium-profile"] > .public-card-home,
[data-template="premium-profile"] > .public-card-language { display: none !important; }
[data-template="premium-profile"] > .template-powered-by { display: grid !important; min-height: 40px; place-items: center; border-top: 1px solid var(--premium-border); background: var(--premium-surface); color: var(--premium-muted); font: 800 .62rem/1 Inter, Arial, sans-serif; letter-spacing: .05em; text-align: center; }
[data-template="premium-profile"] > .template-powered-by .template-powered-link { color: inherit; text-decoration: none; }

.premium-profile-hero {
  position: relative;
  height: 314px;
  min-height: 314px;
  overflow: hidden;
  /* The white SVG wave overlay continues into the content surface below. */
  background: var(--premium-surface);
  border-radius: 0;
}
.premium-profile-hero::before,.premium-profile-hero::after { display: none; }
.premium-profile-wave-clip { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
.premium-profile-wave-divider {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  color: var(--premium-brand);
  pointer-events: none;
}
.premium-profile-wave-divider .premium-profile-wave-stroke { fill: none; stroke: currentColor; stroke-width: 5; vector-effect: non-scaling-stroke; stroke-linecap: butt; stroke-linejoin: round; }
.premium-profile-image-frame { position: absolute; inset: 0; display: block; overflow: hidden; clip-path: url('#premium-profile-mobile-wave'); }
.premium-profile-hero > img {
  position: absolute;
  inset: 0;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  /* This is a hero, so the actual upload fills its own bounded panel. The
     image is clipped by the hero and the wave mask; it never enlarges the
     card or creates empty/blurred bands around itself. */
  object-fit: cover;
  object-position: var(--premium-mobile-image-x, 50%) var(--premium-mobile-image-y, 50%);
  transform: scale(var(--premium-mobile-image-zoom, 1));
  transform-origin: var(--premium-mobile-image-x, 50%) var(--premium-mobile-image-y, 50%);
  clip-path: none;
}
.premium-profile-image-frame > picture { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.premium-profile-image-frame > picture > img { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: cover; object-position: var(--premium-mobile-image-x, 50%) var(--premium-mobile-image-y, 50%); transform: scale(var(--premium-mobile-image-zoom, 1)); transform-origin: var(--premium-mobile-image-x, 50%) var(--premium-mobile-image-y, 50%); }
/* Preview mode must follow the selected device, rather than the iframe's
   physical width. The desktop artwork is always a rectangular image. */
body[data-preview-device="desktop"] .premium-profile-hero > img,
body[data-preview-device="desktop"] .premium-profile-image-frame { clip-path: none !important; }
body[data-preview-device="desktop"] .premium-profile-hero > img,
body[data-preview-device="desktop"] .premium-profile-image-frame > picture > img { object-fit: cover !important; object-position: var(--premium-desktop-image-x, 50%) var(--premium-desktop-image-y, 50%); transform: scale(var(--premium-desktop-image-zoom, 1)); transform-origin: var(--premium-desktop-image-x, 50%) var(--premium-desktop-image-y, 50%); clip-path: none !important; }
body[data-preview-device="desktop"] .premium-profile-wave-divider { display: none !important; }
/* Wide artwork is usually a company logo. Keep it complete rather than
   enlarging it until the left/right edges are cropped. */
.premium-profile-initial { display: grid; width: 100%; height: 100%; place-items: center; color: var(--premium-brand); font-family: var(--premium-font); font-size: 8rem; font-weight: 800; }

.premium-profile-body {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 24px;
  padding: 12px 24px 24px;
  background: var(--premium-surface);
}
.premium-profile-identity-qr { display: grid; min-height: 84px; grid-template-columns: minmax(0, 1fr) 84px; gap: 16px; align-items: center; }
.premium-profile-identity { display: grid; min-width: 0; gap: 4px; }
.premium-profile-identity h1,.premium-profile-identity p,.premium-profile-identity small { margin: 0; overflow-wrap: anywhere; }
.premium-profile-identity h1 { color: var(--premium-brand); font-family: var(--premium-font); font-size: 24px; font-weight: 800; letter-spacing: -.025em; line-height: 33px; }
.premium-profile-identity p { color: var(--premium-ink); font-family: var(--premium-font); font-size: 16px; font-weight: 600; line-height: 22px; }
.premium-profile-identity small { color: var(--premium-muted); font-size: 13px; font-weight: 500; line-height: 16px; }
.premium-profile-qr { position: relative; display: grid; width: 84px; height: 84px; place-items: center; padding: 5px; border: 0; border-radius: 8px; background: var(--premium-surface); isolation: isolate; }
.premium-profile-qr::before { position: absolute; z-index: 0; inset: 0; border: 1.5px solid var(--premium-brand); border-radius: inherit; content: ''; pointer-events: none; }
.premium-profile-qr img { position: relative; z-index: 1; display: block; width: 74px; height: 74px; image-rendering: pixelated; object-fit: contain; }
.premium-profile-qr:focus-visible,.premium-profile-vcf:focus-visible,.premium-profile-share:focus-visible,.premium-profile-social a:focus-visible,.premium-profile-contacts a:focus-visible { outline: 2px solid var(--premium-icon); outline-offset: 3px; }
.premium-profile-body > hr { width: 100%; height: 1px; margin: 0; border: 0; background: var(--premium-border); }
.premium-profile-contacts { display: grid; gap: 14px; align-content: start; }
.premium-profile-contacts > a,.premium-profile-contacts > .premium-profile-custom-contact { display: grid; min-width: 0; min-height: 32px; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: center; border: 0; border-radius: 0; background: transparent; color: var(--premium-ink); font-size: 13px; font-weight: 500; line-height: 16px; text-decoration: none; overflow-wrap: anywhere; }
.premium-profile-contacts > a:hover { color: var(--premium-brand); }
.premium-profile-contact-icon { display: grid; width: 32px; height: 32px; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--premium-brand) 8%, var(--premium-surface)); color: var(--premium-icon); }
.premium-profile-contact-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; }
.premium-profile-contacts > .premium-profile-custom-contact { width: 100%; margin: 0; padding: 0; }
.premium-profile-custom-contact > svg { width: 16px; height: 16px; }
.premium-profile-custom-contact > span:not(.premium-profile-contact-icon) { display: block; min-width: 0; font: inherit; overflow-wrap: anywhere; }
.premium-profile-custom-contact span > span { font: inherit; overflow-wrap: anywhere; }

.premium-profile-social { display: flex; width: 100%; min-height: 74px; align-self: stretch; align-items: center; justify-content: center; gap: 16px; margin: 0; padding: 10px 24px 18px; background: var(--premium-surface); }
.premium-profile-social:empty { display: none; }
.premium-profile-social a { display: grid; width: 54px; height: 54px; place-items: center; border: 1.5px solid color-mix(in srgb, var(--premium-icon) 35%, transparent); border-radius: 50%; color: var(--premium-icon); text-decoration: none; transition: background .16s ease, color .16s ease, transform .16s ease; }
.premium-profile-social a:hover { background: var(--premium-brand); color: #fff; transform: translateY(-2px); }
.premium-profile-social svg { width: 24px; height: 24px; fill: currentColor; }
.premium-profile-actions { display: grid; min-height: 68px; margin-top: auto; grid-template-columns: 1fr 1fr; background: var(--premium-footer); color: #fff; }
.premium-profile-actions > a,.premium-profile-actions > button { display: flex; min-height: 68px; align-items: center; justify-content: center; gap: 10px; border: 0; border-left: 1px solid rgb(255 255 255 / 24%); background: transparent; color: inherit; cursor: pointer; font-family: var(--premium-font); font-size: 13px; font-weight: 700; line-height: 1; text-decoration: none; transition: background .16s ease; }
.premium-profile-actions > a { border-left: 0; }
.premium-profile-actions > a:hover,.premium-profile-actions > button:hover { background: rgb(255 255 255 / 12%); }
.premium-profile-actions svg { width: 22px; height: 22px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.9; }

@keyframes premium-wave-stroke-focus {
  from { opacity: 0; filter: blur(5px); }
  to { opacity: 1; filter: blur(0); }
}
@keyframes premium-qr-frame-focus {
  from { opacity: 0; filter: blur(4px); transform: scale(.94); }
  68% { opacity: 1; filter: blur(.7px); transform: scale(1.01); }
  to { opacity: 1; filter: blur(0); transform: scale(1); }
}

/* The QR modules remain sharp for scanning; only its frame and the brand wave
   use this short mobile entrance. The editor's Mobile preview shares it. */
@media (max-width: 759px) {
  .premium-profile-wave-stroke { animation: premium-wave-stroke-focus 480ms cubic-bezier(.2,.8,.2,1) both 120ms; will-change: filter, opacity; }
  .premium-profile-qr::before { animation: premium-qr-frame-focus 620ms cubic-bezier(.2,.8,.2,1) both 260ms; will-change: filter, opacity, transform; }
}
body[data-preview-device="mobile"] .premium-profile-wave-stroke { animation: premium-wave-stroke-focus 480ms cubic-bezier(.2,.8,.2,1) both 120ms; will-change: filter, opacity; }
body[data-preview-device="mobile"] .premium-profile-qr::before { animation: premium-qr-frame-focus 620ms cubic-bezier(.2,.8,.2,1) both 260ms; will-change: filter, opacity, transform; }
[data-template="premium-profile"][data-premium-blur="off"] .premium-profile-wave-stroke,
[data-template="premium-profile"][data-premium-blur="off"] .premium-profile-qr::before { animation: none !important; will-change: auto; }
@media (prefers-reduced-motion: reduce) {
  .premium-profile-wave-stroke,.premium-profile-qr::before { animation: none !important; }
}

@media (min-width: 760px) {
  /* Premium utilities are mobile-only.  This explicitly wins over the shared
     preview-control rules that otherwise place them over the QR code. */
  body.public-card-classic:not([data-preview-device="mobile"]) [data-template="premium-profile"] > .public-card-home,
  body.public-card-classic:not([data-preview-device="mobile"]) [data-template="premium-profile"] > .public-card-language,
  body[data-preview-device="desktop"] [data-template="premium-profile"] > .public-card-home,
  body[data-preview-device="desktop"] [data-template="premium-profile"] > .public-card-language { display: none !important; }
  body.public-card-classic:has([data-template="premium-profile"]) { display: grid; box-sizing: border-box; padding: 32px; place-items: center; background: var(--premium-page) !important; }
  body.public-card-classic:not([data-preview-device]) [data-template="premium-profile"],
  body[data-preview-device="desktop"] [data-template="premium-profile"] {
    display: grid;
    width: min(900px, calc(100vw - 64px), calc((100svh - 64px) * 1.8));
    height: auto;
    min-height: 500px;
    aspect-ratio: auto;
    margin: 0;
    grid-template-columns: 340fr 560fr;
    grid-template-rows: minmax(392px, auto) 68px 40px;
    border-radius: 20px;
  }
  .premium-profile-hero { height: auto; min-width: 0; min-height: 0; grid-column: 1; grid-row: 1 / 3; border-radius: 0; contain: paint; }
  .premium-profile-hero::after { display: none; }
  /* The desktop image fills the entire left panel. Its dedicated desktop
     framing controls determine the crop, so a portrait cannot leave blank
     space below the visible artwork. */
  .premium-profile-hero > img { width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: cover !important; object-position: var(--premium-desktop-image-x, 50%) var(--premium-desktop-image-y, 50%); transform: scale(var(--premium-desktop-image-zoom, 1)); transform-origin: var(--premium-desktop-image-x, 50%) var(--premium-desktop-image-y, 50%); clip-path: none; }
  .premium-profile-image-frame { clip-path: none; }
  .premium-profile-image-frame > picture > img { object-fit: cover !important; object-position: var(--premium-desktop-image-x, 50%) var(--premium-desktop-image-y, 50%); transform: scale(var(--premium-desktop-image-zoom, 1)); transform-origin: var(--premium-desktop-image-x, 50%) var(--premium-desktop-image-y, 50%); clip-path: none; }
  .premium-profile-wave-divider { display: none; }
  .premium-profile-body { min-height: 0; grid-column: 2; grid-row: 1; gap: 18px; padding: clamp(25px, 4.45vw, 40px); overflow: visible; }
  .premium-profile-identity-qr { grid-template-columns: minmax(0, 1fr) 84px; }
  .premium-profile-identity { gap: 2px; }
  .premium-profile-identity h1 { font-size: clamp(24px, 2.45vw, 32px); line-height: 1.05; }
  .premium-profile-identity p { display: none; }
  /* Figma desktop hierarchy for a card with a portrait: company, name, role. */
  .premium-profile-vcard:not(.premium-profile-vcard--without-image) .premium-profile-identity p { display: block; order: -1; color: var(--premium-brand); font-size: 14px; font-weight: 800; letter-spacing: .01em; line-height: 1.2; }
  .premium-profile-identity small { margin-top: 2px; font-size: 15px; font-weight: 600; line-height: 1.2; }
  .premium-profile-contacts { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: minmax(32px, auto); column-gap: clamp(20px, 4.4vw, 40px); row-gap: 12px; overflow: visible; }
  .premium-profile-contacts > [data-contact-key="address"] { grid-column: 1 / -1; }
  .premium-profile-social { min-height: 70px; padding: 10px clamp(25px, 4.45vw, 40px) 18px; }
  .premium-profile-actions { grid-column: 2; grid-row: 2; min-height: 68px; }
  [data-template="premium-profile"] > .template-powered-by { grid-column: 1 / -1; grid-row: 3; }

  /* The editor can request the Figma mobile frame inside a wide preview. */
  body[data-preview-device="mobile"] [data-template="premium-profile"] { display: flex; width: min(100%, 390px); min-height: 0; height: auto; aspect-ratio: auto; grid-template-columns: none; grid-template-rows: none; border-radius: 0; }
  body[data-preview-device="mobile"] .premium-profile-hero { height: 314px; min-height: 314px; border-radius: 0; }
  body[data-preview-device="mobile"] .premium-profile-hero > img {
    object-fit: cover !important;
    object-position: var(--premium-mobile-image-x, 50%) var(--premium-mobile-image-y, 50%);
    transform: scale(var(--premium-mobile-image-zoom, 1));
    transform-origin: var(--premium-mobile-image-x, 50%) var(--premium-mobile-image-y, 50%);
    clip-path: url('#premium-profile-mobile-wave');
  }
  body[data-preview-device="mobile"] .premium-profile-image-frame { clip-path: url('#premium-profile-mobile-wave'); }
  body[data-preview-device="mobile"] .premium-profile-image-frame > picture > img { object-fit: cover !important; object-position: var(--premium-mobile-image-x, 50%) var(--premium-mobile-image-y, 50%); transform: scale(var(--premium-mobile-image-zoom, 1)); transform-origin: var(--premium-mobile-image-x, 50%) var(--premium-mobile-image-y, 50%); }
  body[data-preview-device="mobile"] .premium-profile-wave-divider { display: block; }
  body[data-preview-device="mobile"] .premium-profile-body { min-height: 0; padding: 12px 24px 24px; }
  body[data-preview-device="mobile"] .premium-profile-identity { gap: 4px; }
  body[data-preview-device="mobile"] .premium-profile-identity p { display: block; margin: 0; color: var(--premium-ink); font-family: var(--premium-font); font-size: 16px; font-weight: 600; letter-spacing: normal; line-height: 22px; text-transform: none; }
  body[data-preview-device="mobile"] .premium-profile-identity small { margin-top: 0; font-size: 13px; font-weight: 500; line-height: 16px; }
  body[data-preview-device="mobile"] .premium-profile-contacts { display: grid; grid-auto-flow: row; grid-template-columns: none; grid-template-rows: none; gap: 14px; overflow: visible; }
  body[data-preview-device="mobile"] .premium-profile-social { min-height: 70px; padding: 10px 24px 18px; }
  body[data-preview-device="mobile"] .premium-profile-actions { min-height: 68px; }
}

@media (max-width: 759px) {
  body[data-preview-device="desktop"] [data-template="premium-profile"] > .public-card-home,
  body[data-preview-device="desktop"] [data-template="premium-profile"] > .public-card-language { display: none !important; }
  [data-template="premium-profile"] { width: 100%; max-width: none; min-height: var(--qardora-card-viewport-height, 100svh); height: auto; }
  body[data-preview-device] [data-template="premium-profile"] { width: min(100%, 390px); min-height: min(var(--qardora-card-viewport-height, 100svh), 812px); border: 0; border-radius: 0; }
  .premium-profile-hero { height: clamp(208px, 36svh, 314px); min-height: clamp(208px, 36svh, 314px); }
  body.public-card-classic:not([data-preview-device="desktop"]) [data-template="premium-profile"] > .public-card-home,
  body.public-card-classic:not([data-preview-device="desktop"]) [data-template="premium-profile"] > .public-card-language {
    display: grid !important;
    background: transparent !important;
    color: var(--qardora-icon, var(--qardora-brand, var(--premium-brand))) !important;
  }
  body.public-card-classic:not([data-preview-device="desktop"]) [data-template="premium-profile"] > .public-card-home {
    border-color: color-mix(in srgb, var(--qardora-icon, var(--qardora-brand, var(--premium-brand))) 62%, transparent) !important;
  }
  body.public-card-classic:not([data-preview-device="desktop"]) [data-template="premium-profile"] > .public-card-language > span {
    background: transparent !important;
  }
  /* Language is the leading utility control; Back to Home follows it. */
  body.public-card-classic:not([data-preview-device="desktop"]) [data-template="premium-profile"] > .public-card-language { right: 64px !important; left: auto !important; }
  body.public-card-classic:not([data-preview-device="desktop"]) [data-template="premium-profile"] > .public-card-home { right: 14px !important; left: auto !important; }
  .premium-profile-social { padding-right: 20px; padding-left: 20px; }
}

/* The mobile device preview can be wider than the mobile breakpoint. */
body[data-preview-device="mobile"] [data-template="premium-profile"] > .public-card-home,
body[data-preview-device="mobile"] [data-template="premium-profile"] > .public-card-language {
  display: grid !important;
  background: transparent !important;
  color: var(--qardora-icon, var(--qardora-brand, var(--premium-brand))) !important;
}
body[data-preview-device="mobile"] [data-template="premium-profile"] > .public-card-home {
  border-color: color-mix(in srgb, var(--qardora-icon, var(--qardora-brand, var(--premium-brand))) 62%, transparent) !important;
}
body[data-preview-device="mobile"] [data-template="premium-profile"] > .public-card-language > span { background: transparent !important; }

/* The desktop editor's mobile device preview uses a wide browser viewport.
   Keep its responsive card height and hero scale aligned with a real phone. */
body[data-preview-device="mobile"] [data-template="premium-profile"] { min-height: min(var(--qardora-card-viewport-height, 100svh), 812px); }
body[data-preview-device="mobile"] .premium-profile-hero { height: clamp(208px, 36svh, 314px); min-height: clamp(208px, 36svh, 314px); }
body[data-preview-device="mobile"] [data-template="premium-profile"] > .public-card-language { right: 64px !important; left: auto !important; }
body[data-preview-device="mobile"] [data-template="premium-profile"] > .public-card-home { right: 14px !important; left: auto !important; }

/* A real mobile browser can have only 680–760 CSS pixels once its address
   bar is open. Make the whole card—including actions and attribution—fit that
   measured viewport through intentional density, never by clipping content. */
@media (max-width: 759px) and (max-height: 760px) {
  [data-template="premium-profile"] { min-height: var(--qardora-card-viewport-height, 100svh); height: var(--qardora-card-viewport-height, 100svh); }
  .premium-profile-hero { height: clamp(180px, 28svh, 220px); min-height: clamp(180px, 28svh, 220px); }
  .premium-profile-body { gap: 10px; padding: 8px 20px 10px; }
  .premium-profile-identity-qr { min-height: 72px; grid-template-columns: minmax(0, 1fr) 72px; gap: 12px; }
  .premium-profile-identity { gap: 2px; }
  .premium-profile-identity h1 { font-size: 22px; line-height: 28px; }
  .premium-profile-identity p { font-size: 15px; line-height: 19px; }
  .premium-profile-identity small { font-size: 12px; line-height: 14px; }
  .premium-profile-qr { width: 72px; height: 72px; padding: 4px; }
  .premium-profile-qr img { width: 64px; height: 64px; }
  .premium-profile-contacts { gap: 8px; }
  .premium-profile-contacts > a,.premium-profile-contacts > .premium-profile-custom-contact { min-height: 28px; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; font-size: 13px; line-height: 15px; }
  .premium-profile-contact-icon { width: 28px; height: 28px; }
  .premium-profile-contact-icon svg { width: 14px; height: 14px; }
  .premium-profile-social { min-height: 56px; padding: 6px 20px 10px; }
  .premium-profile-social a { width: 46px; height: 46px; }
  .premium-profile-social svg { width: 21px; height: 21px; }
  .premium-profile-actions,.premium-profile-actions > a,.premium-profile-actions > button { min-height: 60px; }
  [data-template="premium-profile"] > .template-powered-by { min-height: 28px; font-size: .58rem; }
}

@media (max-height: 760px) {
  body[data-preview-device="mobile"] [data-template="premium-profile"] { min-height: var(--qardora-card-viewport-height, 100svh); height: var(--qardora-card-viewport-height, 100svh); }
  body[data-preview-device="mobile"] .premium-profile-hero { height: clamp(180px, 28svh, 220px); min-height: clamp(180px, 28svh, 220px); }
  body[data-preview-device="mobile"] .premium-profile-body { gap: 10px; padding: 8px 20px 10px; }
  body[data-preview-device="mobile"] .premium-profile-identity-qr { min-height: 72px; grid-template-columns: minmax(0, 1fr) 72px; gap: 12px; }
  body[data-preview-device="mobile"] .premium-profile-identity { gap: 2px; }
  body[data-preview-device="mobile"] .premium-profile-identity h1 { font-size: 22px; line-height: 28px; }
  body[data-preview-device="mobile"] .premium-profile-identity p { font-size: 15px; line-height: 19px; }
  body[data-preview-device="mobile"] .premium-profile-identity small { font-size: 12px; line-height: 14px; }
  body[data-preview-device="mobile"] .premium-profile-qr { width: 72px; height: 72px; padding: 4px; }
  body[data-preview-device="mobile"] .premium-profile-qr img { width: 64px; height: 64px; }
  body[data-preview-device="mobile"] .premium-profile-contacts { gap: 8px; }
  body[data-preview-device="mobile"] .premium-profile-contacts > a,body[data-preview-device="mobile"] .premium-profile-contacts > .premium-profile-custom-contact { min-height: 28px; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; font-size: 13px; line-height: 15px; }
  body[data-preview-device="mobile"] .premium-profile-contact-icon { width: 28px; height: 28px; }
  body[data-preview-device="mobile"] .premium-profile-contact-icon svg { width: 14px; height: 14px; }
  body[data-preview-device="mobile"] .premium-profile-social { min-height: 56px; padding: 6px 20px 10px; }
  body[data-preview-device="mobile"] .premium-profile-social a { width: 46px; height: 46px; }
  body[data-preview-device="mobile"] .premium-profile-social svg { width: 21px; height: 21px; }
  body[data-preview-device="mobile"] .premium-profile-actions,body[data-preview-device="mobile"] .premium-profile-actions > a,body[data-preview-device="mobile"] .premium-profile-actions > button { min-height: 60px; }
  body[data-preview-device="mobile"] [data-template="premium-profile"] > .template-powered-by { min-height: 28px; font-size: .58rem; }
}

/* Reserve compact density for genuinely short browser viewports. A 700–760px
   visual viewport is common on modern phones and needs the normal, spacious
   composition—not condensed type and controls. */
@media (max-width: 759px) and (max-height: 640px) {
  [data-template="premium-profile"] { min-height: var(--qardora-card-viewport-height, 100svh); height: var(--qardora-card-viewport-height, 100svh); }
  .premium-profile-hero { height: clamp(166px, 28svh, 218px); min-height: clamp(166px, 28svh, 218px); }
  .premium-profile-body { gap: 12px; padding: 8px 20px 12px; }
  .premium-profile-identity-qr { min-height: 66px; grid-template-columns: minmax(0, 1fr) 66px; gap: 12px; }
  .premium-profile-identity { gap: 2px; }
  .premium-profile-identity h1 { font-size: 22px; line-height: 28px; }
  .premium-profile-identity p { font-size: 15px; line-height: 19px; }
  .premium-profile-identity small { font-size: 12px; line-height: 14px; }
  .premium-profile-qr { width: 66px; height: 66px; padding: 4px; }
  .premium-profile-qr img { width: 58px; height: 58px; }
  .premium-profile-contacts { gap: 10px; }
  .premium-profile-contacts > a,.premium-profile-contacts > .premium-profile-custom-contact { min-height: 28px; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; font-size: 13px; line-height: 15px; }
  .premium-profile-contact-icon { width: 28px; height: 28px; }
  .premium-profile-contact-icon svg { width: 14px; height: 14px; }
  .premium-profile-social { min-height: 58px; padding: 6px 20px 10px; }
  .premium-profile-social a { width: 46px; height: 46px; }
  .premium-profile-social svg { width: 21px; height: 21px; }
  .premium-profile-actions,.premium-profile-actions > a,.premium-profile-actions > button { min-height: 58px; }
  [data-template="premium-profile"] > .template-powered-by { min-height: 24px; font-size: .58rem; }
}

/* The editor's mobile preview is rendered inside a wide browser, so mirror
   the compact phone geometry when its simulated viewport is short. */
@media (max-height: 640px) {
  body[data-preview-device="mobile"] [data-template="premium-profile"] { min-height: var(--qardora-card-viewport-height, 100svh); height: var(--qardora-card-viewport-height, 100svh); }
  body[data-preview-device="mobile"] .premium-profile-hero { height: clamp(166px, 28svh, 218px); min-height: clamp(166px, 28svh, 218px); }
  body[data-preview-device="mobile"] .premium-profile-body { gap: 12px; padding: 8px 20px 12px; }
  body[data-preview-device="mobile"] .premium-profile-identity-qr { min-height: 66px; grid-template-columns: minmax(0, 1fr) 66px; gap: 12px; }
  body[data-preview-device="mobile"] .premium-profile-identity { gap: 2px; }
  body[data-preview-device="mobile"] .premium-profile-identity h1 { font-size: 22px; line-height: 28px; }
  body[data-preview-device="mobile"] .premium-profile-identity p { font-size: 15px; line-height: 19px; }
  body[data-preview-device="mobile"] .premium-profile-identity small { font-size: 12px; line-height: 14px; }
  body[data-preview-device="mobile"] .premium-profile-qr { width: 66px; height: 66px; padding: 4px; }
  body[data-preview-device="mobile"] .premium-profile-qr img { width: 58px; height: 58px; }
  body[data-preview-device="mobile"] .premium-profile-contacts { gap: 10px; }
  body[data-preview-device="mobile"] .premium-profile-contacts > a,body[data-preview-device="mobile"] .premium-profile-contacts > .premium-profile-custom-contact { min-height: 28px; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; font-size: 13px; line-height: 15px; }
  body[data-preview-device="mobile"] .premium-profile-contact-icon { width: 28px; height: 28px; }
  body[data-preview-device="mobile"] .premium-profile-contact-icon svg { width: 14px; height: 14px; }
  body[data-preview-device="mobile"] .premium-profile-social { min-height: 58px; padding: 6px 20px 10px; }
  body[data-preview-device="mobile"] .premium-profile-social a { width: 46px; height: 46px; }
  body[data-preview-device="mobile"] .premium-profile-social svg { width: 21px; height: 21px; }
  body[data-preview-device="mobile"] .premium-profile-actions,body[data-preview-device="mobile"] .premium-profile-actions > a,body[data-preview-device="mobile"] .premium-profile-actions > button { min-height: 58px; }
  body[data-preview-device="mobile"] [data-template="premium-profile"] > .template-powered-by { min-height: 24px; font-size: .58rem; }
}

/* Browser chrome can leave only about 520px of visible height on smaller
   phones. Keep the complete standard five/six-field card in that space
   instead of making the footer or social link reachable only by scrolling. */
@media (max-width: 759px) and (max-height: 620px) {
  .premium-profile-hero { height: clamp(120px, 24svh, 148px); min-height: clamp(120px, 24svh, 148px); }
  .premium-profile-wave-divider { height: 100%; }
  .premium-profile-body { gap: 8px; padding: 4px 16px 8px; }
  .premium-profile-identity-qr { min-height: 54px; grid-template-columns: minmax(0, 1fr) 54px; gap: 10px; }
  .premium-profile-identity h1 { font-size: 19px; line-height: 23px; }
  .premium-profile-identity p { font-size: 13px; line-height: 16px; }
  .premium-profile-identity small { font-size: 11px; line-height: 12px; }
  .premium-profile-qr { width: 54px; height: 54px; padding: 3px; }
  .premium-profile-qr img { width: 48px; height: 48px; }
  .premium-profile-contacts { gap: 7px; }
  .premium-profile-contacts > a,.premium-profile-contacts > .premium-profile-custom-contact { min-height: 26px; grid-template-columns: 26px minmax(0, 1fr); gap: 9px; font-size: 12.5px; line-height: 14px; }
  .premium-profile-contact-icon { width: 26px; height: 26px; }
  .premium-profile-contact-icon svg { width: 13px; height: 13px; }
  .premium-profile-social { min-height: 42px; padding: 3px 16px 5px; }
  .premium-profile-social a { width: 38px; height: 38px; }
  .premium-profile-social svg { width: 18px; height: 18px; }
  .premium-profile-actions,.premium-profile-actions > a,.premium-profile-actions > button { min-height: 50px; font-size: .76rem; }
  .premium-profile-actions svg { width: 19px; height: 19px; }
  [data-template="premium-profile"] > .template-powered-by { min-height: 20px; font-size: .53rem; }
}

@media (max-height: 620px) {
  body[data-preview-device="mobile"] .premium-profile-hero { height: clamp(120px, 24svh, 148px); min-height: clamp(120px, 24svh, 148px); }
  body[data-preview-device="mobile"] .premium-profile-wave-divider { height: 100%; }
  body[data-preview-device="mobile"] .premium-profile-body { gap: 8px; padding: 4px 16px 8px; }
  body[data-preview-device="mobile"] .premium-profile-identity-qr { min-height: 54px; grid-template-columns: minmax(0, 1fr) 54px; gap: 10px; }
  body[data-preview-device="mobile"] .premium-profile-identity h1 { font-size: 19px; line-height: 23px; }
  body[data-preview-device="mobile"] .premium-profile-identity p { font-size: 13px; line-height: 16px; }
  body[data-preview-device="mobile"] .premium-profile-identity small { font-size: 11px; line-height: 12px; }
  body[data-preview-device="mobile"] .premium-profile-qr { width: 54px; height: 54px; padding: 3px; }
  body[data-preview-device="mobile"] .premium-profile-qr img { width: 48px; height: 48px; }
  body[data-preview-device="mobile"] .premium-profile-contacts { gap: 7px; }
  body[data-preview-device="mobile"] .premium-profile-contacts > a,body[data-preview-device="mobile"] .premium-profile-contacts > .premium-profile-custom-contact { min-height: 26px; grid-template-columns: 26px minmax(0, 1fr); gap: 9px; font-size: 12.5px; line-height: 14px; }
  body[data-preview-device="mobile"] .premium-profile-contact-icon { width: 26px; height: 26px; }
  body[data-preview-device="mobile"] .premium-profile-contact-icon svg { width: 13px; height: 13px; }
  body[data-preview-device="mobile"] .premium-profile-social { min-height: 42px; padding: 3px 16px 5px; }
  body[data-preview-device="mobile"] .premium-profile-social a { width: 38px; height: 38px; }
  body[data-preview-device="mobile"] .premium-profile-social svg { width: 18px; height: 18px; }
  body[data-preview-device="mobile"] .premium-profile-actions,body[data-preview-device="mobile"] .premium-profile-actions > a,body[data-preview-device="mobile"] .premium-profile-actions > button { min-height: 50px; font-size: .76rem; }
  body[data-preview-device="mobile"] .premium-profile-actions svg { width: 19px; height: 19px; }
  body[data-preview-device="mobile"] [data-template="premium-profile"] > .template-powered-by { min-height: 20px; font-size: .53rem; }
}

/* Premium owns its controls so they render inside the card. The mobile frame
   keeps them at top-right; desktop moves them over the image panel so they
   cannot cover the QR code in the details panel. */
body.public-card-classic [data-template="premium-profile"] > .public-card-home,
body.public-card-classic [data-template="premium-profile"] > .public-card-language {
  display: grid !important;
  background: transparent !important;
  color: var(--qardora-icon, var(--qardora-brand, var(--premium-brand))) !important;
}
body.public-card-classic [data-template="premium-profile"] > .public-card-home {
  border-color: color-mix(in srgb, var(--qardora-icon, var(--qardora-brand, var(--premium-brand))) 62%, transparent) !important;
}
body.public-card-classic [data-template="premium-profile"] > .public-card-language > span { background: transparent !important; }
@media (min-width: 760px) {
  /* This must match the earlier desktop-hide selector's specificity.  Premium
     keeps its utility controls in the portrait panel, not over the QR panel. */
  body.public-card-classic:not([data-preview-device="mobile"]) [data-template="premium-profile"] > .public-card-home,
  body.public-card-classic:not([data-preview-device="mobile"]) [data-template="premium-profile"] > .public-card-language,
  body[data-preview-device="desktop"] [data-template="premium-profile"] > .public-card-home,
  body[data-preview-device="desktop"] [data-template="premium-profile"] > .public-card-language { display: grid !important; }
  body.public-card-classic:not([data-preview-device="mobile"]) [data-template="premium-profile"] > .public-card-language,
  body[data-preview-device="desktop"] [data-template="premium-profile"] > .public-card-language { top: 18px !important; right: auto !important; left: 18px !important; }
  body.public-card-classic:not([data-preview-device="mobile"]) [data-template="premium-profile"] > .public-card-home,
  body[data-preview-device="desktop"] [data-template="premium-profile"] > .public-card-home { top: 18px !important; right: auto !important; left: 68px !important; }
}

/* i18n sets `dir=rtl` immediately when Arabic is selected. Mirror the entire
   control group, while preserving reading order: language first, then Home. */
html[dir="rtl"] body.public-card-classic [data-template="premium-profile"] > .public-card-language { right: auto !important; left: 64px !important; }
html[dir="rtl"] body.public-card-classic [data-template="premium-profile"] > .public-card-home { right: auto !important; left: 14px !important; }
@media (min-width: 760px) {
  html[dir="rtl"] body.public-card-classic:not([data-preview-device="mobile"]) [data-template="premium-profile"] > .public-card-language,
  html[dir="rtl"] body[data-preview-device="desktop"] [data-template="premium-profile"] > .public-card-language { right: 18px !important; left: auto !important; }
  html[dir="rtl"] body.public-card-classic:not([data-preview-device="mobile"]) [data-template="premium-profile"] > .public-card-home,
  html[dir="rtl"] body[data-preview-device="desktop"] [data-template="premium-profile"] > .public-card-home { right: 68px !important; left: auto !important; }
}