:root {
  --zq-bg: #F8F9FC;
  --zq-surface: #FFFFFF;
  --zq-primary: #6C4DFF;
  --zq-secondary: #3B82F6;
  --zq-cta: #FF5C5C;
  --zq-success: #16A34A;
  --zq-text: #182033;
  --zq-muted: #64748B;
  --zq-border: #E6E9F2;
}

* {
  box-sizing: border-box;
}

html {
  overflow-x: hidden;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--zq-bg);
  color: var(--zq-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
}

img,
video {
  max-width: 100%;
  height: auto;
}

h1, h2, h3, p, blockquote, li, a {
  overflow-wrap: break-word;
  word-break: break-word;
}

a {
  color: var(--zq-primary);
  text-decoration: none;
}

.zq-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.1rem 1.75rem;
  background: var(--zq-surface);
  border-bottom: 1px solid var(--zq-border);
  box-shadow: 0 2px 16px rgba(108, 76, 245, 0.08);
  position: sticky;
  top: 0;
  z-index: 30;
}

.zq-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--zq-primary), var(--zq-secondary), #FF6FA0);
}

.zq-logo {
  display: flex;
  align-items: center;
}

.zq-logo img {
  display: block;
  height: 36px;
  width: auto;
}

.zq-header-brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

.zq-home-link {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  color: var(--zq-text);
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.zq-home-link svg {
  color: var(--zq-primary);
  flex-shrink: 0;
}

.zq-home-link:hover,
.zq-home-link-active {
  background: rgba(108, 76, 245, 0.08);
  color: var(--zq-primary);
}

@media (max-width: 640px) {
  .zq-header-brand {
    gap: 0.4rem;
  }
  .zq-home-link {
    padding: 0.5rem;
  }
  .zq-home-link-text {
    display: none;
  }
}

.zq-nav {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.zq-nav-links {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  overflow-x: auto;
  scrollbar-width: none;
  max-width: 460px;
}

.zq-nav-links::-webkit-scrollbar {
  display: none;
}

/* Mobile-only nav: "Products" stays visible, every other category
   collapses behind a hamburger so Cart never gets pushed off-screen on a
   narrow header. Hidden on desktop, where the full .zq-nav-links list
   (built above) already shows everything inline. */
.zq-nav-products-mobile,
.zq-nav-hamburger {
  display: none;
}

.zq-nav-drawer {
  display: none;
}

@media (max-width: 640px) {
  .zq-nav-links {
    display: none;
  }

  .zq-nav-products-mobile {
    display: inline-flex;
    align-items: center;
    color: var(--zq-text);
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    padding: 0.5rem 0.6rem;
    border-radius: 999px;
  }

  .zq-nav-products-mobile.zq-nav-active {
    background: linear-gradient(135deg, var(--zq-primary), var(--zq-secondary));
    color: #fff;
  }

  .zq-nav-hamburger {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--zq-border);
    border-radius: 10px;
    background: var(--zq-surface);
    cursor: pointer;
    flex-shrink: 0;
  }

  .zq-nav-hamburger span {
    display: block;
    width: 16px;
    height: 2px;
    border-radius: 2px;
    background: var(--zq-text);
  }

  .zq-nav-hamburger[aria-expanded="true"] {
    border-color: var(--zq-primary);
    background: rgba(108, 76, 245, 0.08);
  }

  .zq-nav-drawer {
    position: absolute;
    top: calc(100% + 8px);
    right: 1rem;
    z-index: 35;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 170px;
    padding: 0.5rem;
    background: var(--zq-surface);
    border: 1px solid var(--zq-border);
    border-radius: 14px;
    box-shadow: 0 12px 30px rgba(24, 32, 51, 0.14);
  }

  .zq-nav-drawer[hidden] {
    display: none;
  }

  .zq-nav-drawer a {
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    color: var(--zq-text);
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
  }

  .zq-nav-drawer a:hover,
  .zq-nav-drawer a.zq-nav-active {
    background: rgba(108, 76, 245, 0.08);
    color: var(--zq-primary);
  }

  /* Cart collapses to just the icon + count badge so it never competes
     with Products/the hamburger for space on a narrow header. */
  .zq-nav-cart-label {
    display: none;
  }

  .zq-nav-cart {
    position: relative;
    width: 38px;
    height: 38px;
    padding: 0 !important;
    gap: 0;
  }

  .zq-nav-cart .zq-cart-badge {
    position: absolute;
    top: -4px;
    right: -4px;
  }

  .zq-nav {
    gap: 0.5rem;
  }
}

.zq-nav a {
  color: var(--zq-text);
  font-weight: 600;
  font-size: 0.9rem;
  white-space: nowrap;
  padding: 0.5rem 0.85rem;
  border-radius: 999px;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.zq-nav-links a:hover {
  background: rgba(108, 76, 245, 0.08);
  color: var(--zq-primary);
}

.zq-nav-links a.zq-nav-active {
  background: linear-gradient(135deg, var(--zq-primary), var(--zq-secondary));
  color: #fff;
  box-shadow: 0 2px 8px rgba(108, 76, 245, 0.3);
}

.zq-hero {
  max-width: 720px;
  margin: 3rem auto;
  padding: 0 1.5rem;
  text-align: center;
}

.zq-hero h1 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.zq-hero p {
  color: var(--zq-muted);
  margin-bottom: 1.5rem;
}

.zq-home-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  width: 92%;
  max-width: 1500px;
  margin: 2rem auto 0;
  padding: 1.75rem 2rem;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 2rem;
  background: linear-gradient(120deg, #F4F1FF 0%, #F8F9FF 45%, #E6EFFF 100%);
  border-radius: 18px;
}

@media (min-width: 768px) {
  .zq-home-hero {
    grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.8fr);
    padding: 2rem 2.5rem;
  }
}

@media (min-width: 1100px) {
  .zq-home-hero {
    grid-template-columns: minmax(0, 1.3fr) minmax(420px, 0.8fr);
    padding: 2.25rem 3rem;
  }
}

.zq-home-hero::before,
.zq-home-hero::after {
  content: '';
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
}

.zq-home-hero::before {
  width: 420px;
  height: 420px;
  top: -180px;
  right: -120px;
  background: radial-gradient(circle, rgba(108, 76, 255, 0.16) 0%, transparent 70%);
}

.zq-home-hero::after {
  width: 320px;
  height: 320px;
  bottom: -160px;
  left: 8%;
  background: radial-gradient(circle, rgba(52, 120, 246, 0.12) 0%, transparent 70%);
}

.zq-home-hero-content {
  position: relative;
  z-index: 1;
}

.zq-home-hero-eyebrow {
  color: var(--zq-primary);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
}

.zq-home-hero-content h1 {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.15;
  color: #0F1B3D;
  margin: 0 0 0.85rem;
  white-space: normal;
}

@media (min-width: 768px) {
  .zq-home-hero-content h1 {
    font-size: clamp(1.75rem, 2.6vw + 0.9rem, 2.4rem);
  }
}

.zq-home-hero-highlight {
  background: linear-gradient(90deg, #654BFF, #3478F6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.zq-home-hero-desc {
  color: #64748B;
  font-size: 1.05rem;
  max-width: 700px;
  margin: 0 0 0.75rem;
}

@media (min-width: 768px) {
  .zq-home-hero-desc {
    font-size: 1.15rem;
  }
}

.zq-home-hero-note {
  color: #654BFF;
  font-weight: 600;
  font-size: 0.9rem;
  margin: 0;
}

.zq-home-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  height: 50px;
  padding: 0 1.6rem;
  border-radius: 999px;
  background: linear-gradient(135deg, #2563EB, var(--zq-primary));
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.3);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.zq-home-hero-cta:hover,
.zq-home-hero-cta:focus-visible {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(79, 70, 229, 0.4);
}

.zq-home-hero-cta:focus-visible {
  outline: 3px solid rgba(108, 76, 255, 0.4);
  outline-offset: 3px;
}

/* --- Home: hero bottom row — Browse Products button with the four trust
   points beside it (stacked under the button on smaller screens) --- */

.zq-home-hero-bottom {
  grid-column: 1 / -1;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
}

.zq-home-hero-trust {
  list-style: none;
  margin: 0;
  padding: 0.6rem 0.75rem;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem 0.5rem;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.07);
}

.zq-home-hero-trust li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 0;
  font-size: 0.7rem;
  line-height: 1.3;
  color: var(--zq-muted);
}

.zq-home-hero-trust strong {
  display: block;
  font-size: 0.8rem;
  color: var(--zq-text);
}

.zq-home-hero-trust a {
  color: var(--zq-primary);
  font-weight: 600;
}

.zq-home-hero-trust-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

/* A different soft tint per item. */
.zq-home-hero-trust li:nth-child(1) .zq-home-hero-trust-icon { background: #FEF3C7; }
.zq-home-hero-trust li:nth-child(2) .zq-home-hero-trust-icon { background: #DBEAFE; }
.zq-home-hero-trust li:nth-child(3) .zq-home-hero-trust-icon { background: #EDE9FE; }
.zq-home-hero-trust li:nth-child(4) .zq-home-hero-trust-icon { background: #D1FAE5; }

/* Wide screens: button and trust points share one row. */
@media (min-width: 1100px) {
  .zq-home-hero-bottom {
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
  }

  .zq-home-hero-cta {
    flex-shrink: 0;
  }

  .zq-home-hero-trust {
    flex: 1;
    width: auto;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
    padding: 0.55rem 0.25rem;
  }

  .zq-home-hero-trust li {
    padding: 0 0.85rem;
  }

  .zq-home-hero-trust li + li {
    border-left: 1px solid rgba(108, 76, 255, 0.15);
  }
}

/* --- Footer: compact "How it works" row (home page) --- */

.zq-footer-how {
  max-width: 720px;
  margin: 0 auto 1.75rem;
  padding: 0 0 1.5rem;
  border-bottom: 1px solid var(--zq-border);
}

.zq-footer-how h2 {
  margin: 0 0 0.75rem;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--zq-primary);
}

.zq-footer-how ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.5rem 0.4rem;
}

.zq-footer-how li {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.35rem 0.85rem 0.35rem 0.4rem;
  border-radius: 999px;
  background: var(--zq-surface);
  border: 1px solid var(--zq-border);
  font-size: 0.8rem;
  color: var(--zq-muted);
  white-space: nowrap;
}

.zq-footer-how strong {
  color: var(--zq-text);
  font-weight: 700;
}

.zq-footer-how-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  background: linear-gradient(160deg, #F4F1FF, #ECFDF5);
}

/* Arrow between steps on wider screens (sits in the gap, outside the
   pill); phones stack the pills instead. */
@media (min-width: 640px) {
  .zq-footer-how ol {
    gap: 0.5rem 1.6rem;
  }

  .zq-footer-how li {
    position: relative;
  }

  .zq-footer-how li + li::before {
    content: "\2192";
    position: absolute;
    left: -1.15rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.85rem;
    color: rgba(108, 76, 255, 0.55);
  }
}

@media (max-width: 639px) {
  .zq-footer-how ol {
    flex-direction: column;
  }
}

/* --- Home: What Customers Say — centred, one review per product,
   auto-sliding when there are more cards than fit (review-slider.js) --- */

.zq-home-reviews-section {
  text-align: center;
}

.zq-home-reviews-section h2 {
  justify-content: center;
  margin-bottom: 0.35rem;
}

.zq-home-reviews-sub {
  margin: 0 0 1.4rem;
  font-size: 0.92rem;
  color: var(--zq-muted);
}

.zq-home-reviews {
  --zq-review-gap: 1rem;
  display: flex;
  justify-content: center;
  gap: var(--zq-review-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 0.25rem 0.25rem 0.75rem;
}

.zq-home-reviews::-webkit-scrollbar {
  display: none;
}

/* Centring an overflowing flex row would hide its first cards. */
.zq-home-reviews-section.is-sliding .zq-home-reviews {
  justify-content: flex-start;
}

.zq-home-reviews:focus-visible {
  outline: 2px solid var(--zq-primary);
  outline-offset: 4px;
  border-radius: 16px;
}

.zq-home-review {
  flex: 0 0 85%;
  max-width: 420px;
  scroll-snap-align: start;
  margin: 0;
  padding: 1.5rem 1.4rem 1.3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  background: var(--zq-surface);
  border: 1px solid var(--zq-border);
  border-radius: 18px;
  box-shadow: 0 6px 20px rgba(15, 23, 42, 0.05);
}

@media (min-width: 640px) {
  .zq-home-review {
    flex-basis: calc((100% - var(--zq-review-gap)) / 2);
  }
}

@media (min-width: 1000px) {
  .zq-home-review {
    flex-basis: calc((100% - 2 * var(--zq-review-gap)) / 3);
  }
}

.zq-home-review-stars {
  color: #F59E0B;
  font-size: 1.05rem;
  letter-spacing: 3px;
}

.zq-home-review-stars-off {
  color: #D1D5DB;
}

.zq-home-review blockquote {
  margin: 0.8rem 0 1.1rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--zq-text);
  font-style: italic;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.zq-home-review figcaption {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.82rem;
  color: var(--zq-muted);
}

.zq-home-review figcaption img,
.zq-home-review-initial {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--zq-surface);
  box-shadow: 0 0 0 2px rgba(108, 76, 255, 0.25);
}

.zq-home-review-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: var(--zq-primary);
  background: rgba(108, 76, 255, 0.1);
}

.zq-home-review figcaption strong {
  display: block;
  color: var(--zq-text);
  font-size: 0.92rem;
}

.zq-home-review figcaption a {
  color: var(--zq-primary);
  font-weight: 600;
}

.zq-home-reviews-nav {
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.zq-home-reviews-nav[hidden] {
  display: none;
}

.zq-home-reviews-arrow {
  width: 38px;
  height: 38px;
  border: 1px solid var(--zq-border);
  border-radius: 50%;
  background: var(--zq-surface);
  color: var(--zq-text);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.18s ease, color 0.18s ease;
}

.zq-home-reviews-arrow:hover,
.zq-home-reviews-arrow:focus-visible {
  border-color: var(--zq-primary);
  color: var(--zq-primary);
}

.zq-home-reviews-dots {
  display: flex;
}

/* 24px hit area, 8px visible dot. */
.zq-home-reviews-dot {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}

.zq-home-reviews-dot::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--zq-border);
  transition: background 0.2s ease, transform 0.2s ease;
}

.zq-home-reviews-dot.is-active::after {
  background: var(--zq-primary);
  transform: scale(1.3);
}

/* --- Hero visual: real illustration asset (see /assets/images/hero-visual.*),
   sized responsively so the page stays lightweight and layout-shift free. --- */

.zq-home-hero-visual {
  display: none;
}

@media (min-width: 768px) {
  .zq-home-hero-visual {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .zq-home-hero-visual img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 14px;
  }
}

.zq-cta {
  display: inline-block;
  background: var(--zq-cta);
  color: #fff;
  padding: 0.75rem 1.75rem;
  border-radius: 999px;
  font-weight: 600;
}

/* Footer — on a product landing page --zq-footer-accent is set inline to
   that product's own theme color (see templates/layouts/public.php); on
   every other page it falls back to the site's own brand color, never a
   fixed hex value. */
.zq-footer {
  text-align: center;
  padding: 3rem 1.5rem 2.5rem;
  background: var(--zq-bg);
  border-top: 1px solid var(--zq-border);
  margin-top: 3rem;
}

.zq-footer-copyright {
  margin: 0 0 1.1rem;
  color: var(--zq-muted);
  font-size: 0.85rem;
}

.zq-footer-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  row-gap: 0.5rem;
  margin: 0 0 1.1rem;
}

.zq-footer-links a {
  color: var(--zq-muted);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  padding: 0.15rem 0.7rem;
  transition: color 0.15s ease;
}

.zq-footer-links a:hover,
.zq-footer-links a:focus-visible {
  color: var(--zq-footer-accent, var(--zq-primary));
}

.zq-footer-links a:not(:last-child) {
  position: relative;
}

.zq-footer-links a:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -0.05rem;
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--zq-border);
  transform: translateY(-50%);
}

/* "Follow us" social icons (only rendered when set in Admin > Settings). */
.zq-footer-social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
}

.zq-footer-social-title {
  color: var(--zq-muted);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.zq-footer-social-list {
  display: flex;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.zq-footer-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.zq-footer-social-link svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
  flex-shrink: 0;
}

.zq-footer-social-facebook {
  background: #1877F2;
  box-shadow: 0 2px 6px rgba(24, 119, 242, 0.25);
}

.zq-footer-social-instagram {
  background: linear-gradient(45deg, #F58529, #DD2A7B 45%, #8134AF 75%, #515BD4);
  box-shadow: 0 2px 6px rgba(221, 42, 123, 0.25);
}

.zq-footer-social-link:hover,
.zq-footer-social-link:focus-visible {
  color: #fff;
  transform: translateY(-2px);
  filter: brightness(1.08);
}

.zq-footer-social-link:focus-visible {
  outline: 2px solid var(--zq-footer-accent, var(--zq-primary));
  outline-offset: 3px;
}

.zq-footer-support {
  margin: 0;
  color: var(--zq-muted);
  font-size: 0.85rem;
}

.zq-footer-email {
  color: var(--zq-footer-accent, var(--zq-primary));
  font-weight: 600;
  text-decoration: none;
}

.zq-footer-email:hover,
.zq-footer-email:focus-visible {
  text-decoration: underline;
}

@media (max-width: 480px) {
  .zq-footer {
    padding: 2.5rem 1.25rem 2rem;
  }

  .zq-footer-links a {
    padding: 0.15rem 0.5rem;
  }
}

.zq-devstatus {
  max-width: 720px;
  margin: 0 auto 2rem;
  padding: 0 1.5rem;
  text-align: center;
  color: var(--zq-muted);
}

.zq-product {
  max-width: 900px;
  margin: 0 auto;
  padding: 1.5rem;
}

.zq-product-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 768px) {
  .zq-product-hero {
    grid-template-columns: 400px 1fr;
  }
}

.zq-product-hero img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: var(--zq-surface);
}

.zq-gallery {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}

.zq-gallery img {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 8px;
}

.zq-subtitle {
  color: var(--zq-muted);
  margin-top: 0.25rem;
}

.zq-price-block {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1rem 0;
}

.zq-price-regular {
  text-decoration: line-through;
  color: var(--zq-muted);
}

.zq-price-selling {
  font-size: 1.75rem;
  font-weight: 700;
}

.zq-discount {
  background: #ECFDF5;
  color: var(--zq-success);
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
}

.zq-trust-points {
  margin-top: 1rem;
  padding-left: 1.1rem;
  color: var(--zq-muted);
  font-size: 0.9rem;
}

.zq-section {
  margin: 2.5rem 0;
}

.zq-section h2 {
  margin-bottom: 0.75rem;
}

.zq-final-cta {
  text-align: center;
  background: var(--zq-surface);
  border-radius: 16px;
  padding: 2rem;
}

.zq-hint {
  color: var(--zq-muted);
  font-size: 0.85rem;
}

.zq-sticky-cta {
  display: none;
}

.zq-whatsapp-float {
  position: fixed;
  right: 20px;
  bottom: 24px;
  z-index: 45;
  height: 56px;
  min-width: 56px;
  padding: 0 14px;
  border-radius: 999px;
  background: #25D366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(37, 211, 102, 0.45);
  transition: transform 0.15s ease, background 0.15s ease;
}

.zq-whatsapp-float svg {
  width: 28px;
  height: 28px;
  fill: currentColor;
  flex-shrink: 0;
}

/* Text label slides in on hover (desktop); phones show only the icon. */
.zq-whatsapp-float-label {
  display: none;
  white-space: nowrap;
}

@media (hover: hover) {
  .zq-whatsapp-float:hover .zq-whatsapp-float-label,
  .zq-whatsapp-float:focus-visible .zq-whatsapp-float-label {
    display: inline;
  }
}

.zq-whatsapp-float:hover,
.zq-whatsapp-float:focus-visible {
  background: #1EBE5A;
  color: #fff;
  transform: translateY(-2px);
}

.zq-whatsapp-float:focus-visible {
  outline: 3px solid rgba(37, 211, 102, 0.45);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .zq-whatsapp-float {
    right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
  }

  /* Product pages: clear the (taller, redesigned) mobile sticky Buy bar. */
  .zq-whatsapp-float--raised {
    bottom: calc(190px + env(safe-area-inset-bottom));
  }
}

/* --- Back-to-top arrow: same right edge as the WhatsApp button (centred
   over it), stacked 12px above it when WhatsApp is shown. --- */
.zq-back-to-top {
  position: fixed;
  right: 26px;
  bottom: 24px;
  z-index: 44;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2563EB, var(--zq-primary));
  color: #fff;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(79, 70, 229, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease, box-shadow 0.2s ease;
}

.zq-back-to-top svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.zq-back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.zq-back-to-top:hover,
.zq-back-to-top:focus-visible {
  box-shadow: 0 10px 26px rgba(79, 70, 229, 0.5);
  transform: translateY(-2px);
}

.zq-back-to-top:focus-visible {
  outline: 3px solid rgba(108, 76, 255, 0.4);
  outline-offset: 3px;
}

.zq-back-to-top--stacked {
  bottom: 92px;
}

@media (max-width: 640px) {
  .zq-back-to-top {
    right: 22px;
    bottom: calc(16px + env(safe-area-inset-bottom));
  }

  .zq-back-to-top--stacked {
    bottom: calc(84px + env(safe-area-inset-bottom));
  }

  .zq-back-to-top--raised {
    bottom: calc(190px + env(safe-area-inset-bottom));
  }

  .zq-back-to-top--raised.zq-back-to-top--stacked {
    bottom: calc(258px + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  .zq-back-to-top {
    transition: none;
  }
}

@media (max-width: 640px) {
  .zq-sticky-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    background: transparent;
    border-top: none;
    padding: 0.65rem 1rem;
    padding-bottom: calc(0.65rem + env(safe-area-inset-bottom));
    box-shadow: none;
    pointer-events: none;
  }

  .zq-sticky-cta .zq-cta {
    pointer-events: auto;
  }

  .zq-sticky-cta[hidden] {
    display: none;
  }

  .zq-sticky-cta-card {
    width: 100%;
    max-width: 420px;
    background: #fff;
    border-radius: 20px;
    padding: 0.85rem 0.9rem 0.75rem;
    box-shadow: 0 -6px 28px -8px rgba(15, 23, 42, 0.22), 0 0 0 1px rgba(15, 23, 42, 0.05);
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
  }

  .zq-sticky-cta .zq-cta {
    width: 100%;
    max-width: none;
    padding: 0.75rem 1.25rem;
    font-size: 0.95rem;
  }

  .zq-sticky-cta-price-row {
    width: 100%;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
  }

  .zq-sticky-cta-price {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--zq-ink, #0f172a);
  }

  .zq-sticky-cta-price-regular {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--zq-muted, #94a3b8);
    text-decoration: line-through;
    margin-right: 0.2rem;
  }

  .zq-sticky-cta-save-badge {
    background: #dcfce7;
    color: #15803d;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    white-space: nowrap;
  }

  .zq-sticky-cta-onetime {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--zq-muted, #94a3b8);
    white-space: nowrap;
  }

  .zq-sticky-cta-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: 0.01em;
    box-shadow:
      0 10px 24px -6px color-mix(in srgb, var(--zq-lp-primary, var(--zq-cta)) 65%, transparent),
      0 0 0 1px rgba(255, 255, 255, 0.18) inset;
    animation: zq-sticky-cta-pop 2.4s ease-in-out infinite;
    overflow: hidden;
  }

  .zq-sticky-cta-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.35) 45%, transparent 60%);
    background-size: 220% 100%;
    background-position: 120% 0;
    animation: zq-sticky-cta-shine 3.2s ease-in-out infinite;
    pointer-events: none;
  }

  .zq-sticky-cta-ico {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    fill: currentColor;
  }

  .zq-sticky-cta-arrow {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-left: 0.1rem;
  }

  .zq-sticky-cta-btn:active {
    transform: scale(0.97);
  }

  .zq-sticky-cta-note {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--zq-muted, #64748b);
  }

  .zq-sticky-cta-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
  }

  @keyframes zq-sticky-cta-pop {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-2px) scale(1.025); }
  }

  @keyframes zq-sticky-cta-shine {
    0% { background-position: 130% 0; }
    55%, 100% { background-position: -30% 0; }
  }

  @media (prefers-reduced-motion: reduce) {
    .zq-sticky-cta-btn,
    .zq-sticky-cta-btn::after {
      animation: none;
    }
  }
}

.zq-search {
  flex: 1;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--zq-bg);
  border: 1.5px solid var(--zq-border);
  border-radius: 999px;
  padding: 0 1.1rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.zq-search:focus-within {
  border-color: var(--zq-primary);
  box-shadow: 0 0 0 4px rgba(108, 76, 245, 0.14);
  background: var(--zq-surface);
}

.zq-search-icon {
  color: var(--zq-primary);
  font-size: 0.9rem;
  flex-shrink: 0;
}

.zq-search input {
  width: 100%;
  padding: 0.65rem 0;
  border: none;
  background: none;
  outline: none;
  font-size: 0.9rem;
}

.zq-nav-divider {
  width: 1px;
  height: 24px;
  background: var(--zq-border);
  margin: 0 0.5rem;
}

.zq-nav-cart {
  display: inline-flex !important;
  align-items: center;
  gap: 0.4rem;
  color: #fff !important;
  background: linear-gradient(135deg, var(--zq-primary), var(--zq-secondary));
  border-radius: 999px;
  padding: 0.55rem 1.1rem !important;
  box-shadow: 0 2px 10px rgba(108, 76, 245, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.zq-nav-cart:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(108, 76, 245, 0.4);
}

.zq-cart-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.3rem;
  height: 1.3rem;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  background: var(--zq-cta);
  border: 1.5px solid rgba(255, 255, 255, 0.8);
  border-radius: 999px;
  padding: 0 0.3rem;
}

.zq-home-section, .zq-list-page {
  max-width: 1500px;
  width: 92%;
  margin: 2.5rem auto;
  padding: 0;
}

.zq-home-section h2 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 1.75rem;
  font-weight: 700;
  color: #0F1B3D;
  margin: 0 0 1.25rem;
}

@media (min-width: 768px) {
  .zq-home-section h2 {
    font-size: 2rem;
  }
}

.zq-view-all-link {
  flex-shrink: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--zq-primary);
  white-space: nowrap;
}

.zq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.35rem;
}

@media (min-width: 600px) {
  .zq-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .zq-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .zq-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.zq-card {
  background: var(--zq-surface);
  border-radius: 16px;
  border: 1px solid var(--zq-border);
  overflow: hidden;
  box-shadow: 0 6px 22px rgba(15, 23, 42, 0.06);
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.zq-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.1);
}

.zq-card-coming-soon {
  align-items: center;
  justify-content: center;
  text-align: center;
  border-style: dashed;
  box-shadow: none;
}

.zq-card-coming-soon .zq-card-body {
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
}

.zq-card-coming-soon h3 {
  font-size: 1rem;
  color: var(--zq-text);
}

.zq-coming-soon-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(108, 76, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 0.5rem;
}

.zq-card-image-link {
  position: relative;
  display: block;
  padding: 1.25rem 1.25rem 0;
  background: var(--zq-surface);
}

.zq-card img {
  width: 100%;
  height: auto;
  background: var(--zq-bg);
  display: block;
  border-radius: 10px;
}

.zq-card-image-placeholder {
  width: 100%;
  aspect-ratio: 3 / 4;
  background: var(--zq-bg);
  border-radius: 10px;
}

/* --- Product card thumbnail cycling (more than one Main Image): same
   grid-stacking technique as the landing-page hero slider, so the card's
   height is driven by the image's own natural aspect ratio instead of a
   fixed crop. JS toggles .is-active on an interval (site.js/cart.js). --- */

.zq-card-image-cycle {
  display: grid;
}

.zq-card-image-slide {
  grid-area: 1 / 1;
  align-self: start;
  width: 100%;
  height: auto;
  background: var(--zq-bg);
  border-radius: 10px;
  opacity: 0;
  transition: opacity 0.9s ease;
}

.zq-card-image-slide.is-active {
  opacity: 1;
  position: relative;
  z-index: 1;
}

.zq-card-image-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  text-align: center;
  background: linear-gradient(160deg, #F4F1FF, #EAF2FF);
  padding: 1rem;
}

.zq-card-image-placeholder-icon {
  font-size: 1.75rem;
  margin-bottom: 0.25rem;
}

.zq-card-image-placeholder-title {
  font-weight: 700;
  color: var(--zq-text);
  font-size: 0.9rem;
}

.zq-card-image-placeholder-sub {
  color: var(--zq-muted);
  font-size: 0.78rem;
}

.zq-badge {
  position: absolute;
  top: 0.6rem;
  left: 0.6rem;
  z-index: 2;
  background: var(--zq-primary);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.3rem 0.6rem;
  border-radius: 999px;
}

.zq-card-body {
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  text-align: center;
}

.zq-card-body h3 {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.35;
  margin: 0 0 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.zq-card-body h3 a {
  color: var(--zq-text);
}

.zq-card-desc {
  font-size: 0.875rem;
  color: var(--zq-muted);
  line-height: 1.55;
  margin: 0 0 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.zq-card .zq-price-block {
  margin: 0 0 1rem;
  row-gap: 0.35rem;
  justify-content: center;
}

.zq-card .zq-price-selling {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--zq-text);
}

/* View Product (primary, filled) + Quick View (secondary, outlined) share one
   row; they wrap onto two lines only when the card is too narrow for both. */
.zq-card-actions {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.zq-card-view,
.zq-qv-link {
  flex: 1 1 110px;
  min-width: 0;
  height: 44px;
  padding: 0 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border-radius: 999px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

/* Deeper blue (#2563EB) than --zq-secondary so white text stays readable. */
.zq-card-view {
  border: 1.5px solid transparent;
  background: linear-gradient(135deg, #2563EB, var(--zq-primary));
  color: #fff;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
}

.zq-card-view:hover,
.zq-card-view:focus-visible {
  background: linear-gradient(135deg, #1D4ED8, #5B3DF0);
  color: #fff;
  box-shadow: 0 6px 18px rgba(79, 70, 229, 0.4);
  transform: translateY(-1px);
}

/* --- Quick View: eye button on the card image + popup (quick-view.js) --- */

.zq-qv-trigger {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  z-index: 3;
  height: 38px;
  min-width: 38px;
  padding: 0 0.65rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  background: linear-gradient(135deg, var(--zq-primary), var(--zq-secondary));
  color: #fff;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(108, 76, 255, 0.4);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.zq-qv-trigger svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex-shrink: 0;
}

/* Label only appears on hover-capable screens when the card is hovered. */
.zq-qv-trigger-label {
  display: none;
}

@media (hover: hover) {
  .zq-card:hover .zq-qv-trigger-label,
  .zq-qv-trigger:focus-visible .zq-qv-trigger-label {
    display: inline;
  }
}

.zq-qv-trigger:hover,
.zq-qv-trigger:focus-visible {
  transform: scale(1.06);
  filter: brightness(1.08);
  box-shadow: 0 8px 22px rgba(108, 76, 255, 0.55);
}

.zq-qv-trigger:focus-visible {
  outline: 2px solid var(--zq-primary);
  outline-offset: 2px;
}

/* Mint background, teal border; text uses a darker teal for contrast. */
.zq-qv-link {
  border: 1.5px solid #14B8A6;
  background: #ECFDF5;
  color: #0F766E;
}

.zq-qv-link:hover,
.zq-qv-link:focus-visible {
  border-color: #0D9488;
  background: #CCFBF1;
  color: #115E59;
  transform: translateY(-1px);
}

.zq-card-view:focus-visible {
  outline: 2px solid var(--zq-primary);
  outline-offset: 2px;
}

.zq-qv-link:focus-visible {
  outline: 2px solid #14B8A6;
  outline-offset: 2px;
}

.zq-qv-open {
  overflow: hidden;
}

.zq-qv {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 0;
  border-radius: 20px;
  background: var(--zq-surface);
  color: var(--zq-text);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
  overflow: hidden;
}

/* Content scrolls; the action buttons stay pinned at the bottom. */
.zq-qv[open] {
  display: flex;
  flex-direction: column;
}

.zq-qv::backdrop {
  background: rgba(15, 23, 42, 0.55);
}

.zq-qv[open] {
  animation: zq-qv-in 0.18s ease-out;
}

@keyframes zq-qv-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

.zq-qv-close {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--zq-bg);
  color: var(--zq-text);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}

.zq-qv-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.zq-qv-content {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1.5rem 1.5rem 1rem;
}

.zq-qv-rating {
  margin: 0 0 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.85rem;
  color: var(--zq-muted);
}

.zq-qv-rating strong {
  color: var(--zq-text);
}

/* Five stars, filled in proportion to --zq-qv-rating (0–5). */
.zq-qv-stars {
  --zq-qv-fill: calc(var(--zq-qv-rating) / 5 * 100%);
  font-size: 0.95rem;
  letter-spacing: 1px;
  line-height: 1;
  background: linear-gradient(90deg, #F59E0B var(--zq-qv-fill), #D1D5DB var(--zq-qv-fill));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.zq-qv-save {
  margin: 0.3rem 0 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--zq-success);
}

.zq-qv-facts {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.35rem;
}

/* Always one row: tags shrink to share the width (in proportion to their
   text) and long ones end in "…"; the full text is in the title tooltip. */
.zq-qv-facts li {
  flex: 0 1 auto;
  min-width: 0;
  padding: 0.28rem 0.55rem;
  border-radius: 999px;
  background: var(--zq-bg);
  border: 1px solid var(--zq-border);
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--zq-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.zq-qv-trust {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 1rem;
  font-size: 0.8rem;
  color: var(--zq-muted);
}

.zq-qv-head {
  display: flex;
  gap: 1rem;
  align-items: center;
  padding-right: 2.25rem;
}

.zq-qv-thumb {
  width: 96px;
  height: auto;
  max-height: 128px;
  object-fit: contain;
  border-radius: 12px;
  flex-shrink: 0;
  background: var(--zq-bg);
}

.zq-qv-title {
  font-size: 1.15rem;
  line-height: 1.3;
  margin: 0 0 0.4rem;
}

.zq-qv .zq-price-block {
  margin: 0;
}

.zq-qv .zq-price-selling {
  font-size: 1.35rem;
  font-weight: 800;
}

.zq-qv-desc {
  margin: 1rem 0 0;
  color: var(--zq-muted);
  line-height: 1.55;
  font-size: 0.9rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.zq-qv-slider {
  margin-top: 1.1rem;
}

.zq-qv-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: 14px;
  background: linear-gradient(160deg, #F4F1FF, #EEF4FF);
}

.zq-qv-track::-webkit-scrollbar {
  display: none;
}

.zq-qv-track:focus-visible {
  outline: 2px solid var(--zq-primary);
  outline-offset: 2px;
}

.zq-qv-slide {
  flex: 0 0 100%;
  min-height: 140px;
  padding: 1.1rem 1.25rem;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.zq-qv-slide-title {
  margin: 0 0 0.45rem;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--zq-text);
  text-align: left;
}

.zq-qv-slide-text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--zq-text);
}

.zq-qv-nav {
  margin-top: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.zq-qv-arrow {
  width: 34px;
  height: 34px;
  border: 1px solid var(--zq-border);
  border-radius: 50%;
  background: var(--zq-surface);
  color: var(--zq-text);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.zq-qv-arrow:hover:not(:disabled) {
  border-color: var(--zq-primary);
  color: var(--zq-primary);
}

.zq-qv-arrow:disabled {
  opacity: 0.35;
  cursor: default;
}

.zq-qv-dots {
  display: flex;
  gap: 0.15rem;
}

/* 24px hit area, 8px visible dot. */
.zq-qv-dot {
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}

.zq-qv-dot::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--zq-border);
  transition: background 0.2s ease, transform 0.2s ease;
}

.zq-qv-dot.is-active::after {
  background: var(--zq-primary);
  transform: scale(1.25);
}

.zq-qv-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}

.zq-qv-points li {
  display: flex;
  gap: 0.5rem;
  line-height: 1.45;
  font-size: 0.93rem;
}

.zq-qv-points li span {
  color: var(--zq-success);
  font-weight: 800;
}

.zq-qv-guarantee {
  margin: 1rem 0 0;
  padding: 0.65rem 0.8rem;
  border-radius: 10px;
  background: rgba(22, 163, 74, 0.08);
  font-size: 0.88rem;
  line-height: 1.45;
}

.zq-qv-actions {
  flex-shrink: 0;
  padding: 0.9rem 1.5rem 1.25rem;
  border-top: 1px solid var(--zq-border);
  background: var(--zq-surface);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.zq-qv-buy,
.zq-qv-secondary {
  flex: 1 1 140px;
  height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: none;
}

.zq-qv-buy {
  flex-basis: 100%;
  background: linear-gradient(135deg, #2563EB, var(--zq-primary));
  color: #fff;
  border: 0;
  box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
}

.zq-qv-buy:hover,
.zq-qv-buy:focus-visible {
  background: linear-gradient(135deg, #1D4ED8, #5B3DF0);
  color: #fff;
}

.zq-qv-secondary {
  background: var(--zq-surface);
  color: var(--zq-text);
  border: 1px solid var(--zq-border);
}

.zq-qv-secondary.is-in-cart {
  border-color: var(--zq-success);
  background: rgba(22, 163, 74, 0.08);
  color: var(--zq-success);
}

.zq-qv-secondary:hover,
.zq-qv-secondary:focus-visible {
  border-color: var(--zq-primary);
  color: var(--zq-primary);
}

/* Phones: slide up as a bottom sheet instead of a centred popup. */
@media (max-width: 640px) {
  .zq-qv {
    width: 100vw;
    max-width: 100vw;
    max-height: 85vh;
    margin: auto 0 0;
    border-radius: 20px 20px 0 0;
  }

  .zq-qv[open] {
    animation-name: zq-qv-sheet-in;
  }

  @keyframes zq-qv-sheet-in {
    from { transform: translateY(100%); }
    to { transform: none; }
  }

  .zq-qv-content {
    padding: 1.25rem 1rem 0.75rem;
  }

  .zq-qv-actions {
    padding: 0.75rem 1rem calc(1rem + env(safe-area-inset-bottom));
  }

  .zq-qv-thumb {
    width: 72px;
  }
}

.zq-filters {
  display: flex;
  gap: 0.5rem;
  margin: 1rem 0;
  flex-wrap: wrap;
}

.zq-filters input, .zq-filters select {
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--zq-border);
  border-radius: 8px;
}

.zq-pagination {
  display: flex;
  gap: 0.4rem;
  margin-top: 1.5rem;
}

.zq-pagination a {
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  border: 1px solid var(--zq-border);
  color: var(--zq-text);
}

.zq-pagination a.zq-page-active {
  background: var(--zq-primary);
  color: #fff;
  border-color: var(--zq-primary);
}

.zq-category-links {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.zq-category-pill {
  background: var(--zq-surface);
  border: 1px solid var(--zq-border);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  font-weight: 500;
  color: var(--zq-text);
}

.zq-why-list, .zq-steps {
  margin-top: 1rem;
  padding-left: 1.2rem;
}

.zq-secondary-btn {
  display: inline-block;
  margin-left: 0.75rem;
  background: none;
  border: 1px solid var(--zq-primary);
  color: var(--zq-primary);
  padding: 0.7rem 1.5rem;
  border-radius: 999px;
  font-weight: 600;
  cursor: pointer;
}

.zq-cart-app {
  max-width: 640px;
  margin: 2rem auto;
  padding: 0 1.5rem;
}

.zq-cart-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--zq-border);
}

.zq-cart-row img {
  border-radius: 8px;
  object-fit: cover;
}

.zq-cart-row-info {
  flex: 1;
}

.zq-cart-total {
  margin: 1.25rem 0;
  font-size: 1.1rem;
}

.zq-checkout {
  max-width: 1280px;
  margin: 2rem auto;
  padding: 0 1.5rem;
}

.zq-checkout h1 {
  margin: 0;
  font-size: 1.6rem;
}

/* --- Top bar: lock icon + title/subtitle on the left, trust badges right --- */
.zq-checkout-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}

.zq-checkout-topbar-left {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

.zq-checkout-topbar-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(108, 77, 255, 0.12);
  color: var(--zq-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.zq-checkout-topbar-icon svg {
  width: 24px;
  height: 24px;
}

.zq-checkout-topbar-sub {
  margin: 0.15rem 0 0;
  color: var(--zq-muted);
  font-size: 0.9rem;
}

.zq-checkout-topbar-trust {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--zq-muted);
  font-size: 0.85rem;
}

.zq-checkout-topbar-trust span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
}

.zq-checkout-topbar-trust svg {
  width: 16px;
  height: 16px;
  color: var(--zq-primary);
}

.zq-checkout-topbar-trust-divider {
  width: 1px;
  height: 16px;
  background: var(--zq-border);
}

@media (max-width: 860px) {
  .zq-checkout-topbar-trust {
    display: none;
  }
}

.zq-checkout-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  align-items: start;
}

@media (min-width: 900px) {
  .zq-checkout-layout {
    grid-template-columns: 1.22fr 1fr;
    gap: 2rem;
  }

  .zq-checkout-sidebar {
    position: sticky;
    top: 1.5rem;
  }
}

.zq-form-card {
  background: var(--zq-surface);
  border-radius: 16px;
  padding: 1.75rem;
  box-shadow: 0 2px 14px rgba(24, 32, 51, 0.06);
  margin-top: 1.25rem;
}

.zq-checkout-main .zq-form-card {
  margin-top: 0;
}

.zq-form {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.zq-form label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--zq-text);
  margin-top: 0.85rem;
}

.zq-form label:first-of-type {
  margin-top: 0;
}

.zq-form input[type="text"],
.zq-form input[type="email"],
.zq-form input[type="tel"],
.zq-form input[type="search"],
.zq-form textarea,
.zq-form select {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--zq-border);
  border-radius: 10px;
  font-size: 0.95rem;
  font-family: inherit;
  background: var(--zq-bg);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.zq-form input:focus,
.zq-form textarea:focus,
.zq-form select:focus {
  outline: none;
  border-color: var(--zq-primary);
  box-shadow: 0 0 0 3px rgba(108, 77, 255, 0.15);
  background: var(--zq-surface);
}

.zq-form textarea {
  resize: vertical;
  min-height: 120px;
}

.zq-required-star {
  color: #DC2626;
}

/* --- Contact Information / Order Summary card headers (icon + title) --- */
.zq-checkout-card-header {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: 1.5rem;
}

.zq-checkout-card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(108, 77, 255, 0.1);
  color: var(--zq-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.zq-checkout-card-icon svg {
  width: 22px;
  height: 22px;
}

.zq-checkout-card-header h2 {
  margin: 0 0 0.2rem;
  font-size: 1.15rem;
}

/* --- Icon inside each text input --- */
.zq-input-icon-wrap {
  position: relative;
}

.zq-input-icon-wrap .zq-input-icon {
  position: absolute;
  left: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--zq-muted);
  display: flex;
  pointer-events: none;
}

.zq-input-icon-wrap .zq-input-icon svg {
  width: 18px;
  height: 18px;
}

.zq-input-icon-wrap input {
  padding-left: 2.6rem !important;
}

.zq-form label[for="consent"],
.zq-form label:has(input[type="checkbox"]) {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--zq-muted);
}

.zq-form label:has(input[type="checkbox"]) input {
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.zq-form button.zq-cta {
  width: 100%;
  border: none;
  font-size: 1rem;
  margin-top: 1.5rem;
  cursor: pointer;
}

.zq-form .zq-alert-error:empty {
  display: none;
}

.zq-checkout-summary {
  background: var(--zq-surface);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 2px 14px rgba(24, 32, 51, 0.06);
  margin-bottom: 1.25rem;
}

.zq-checkout-loading {
  color: var(--zq-muted);
  font-size: 0.9rem;
}

.zq-hint-icon {
  display: inline-flex;
  vertical-align: -3px;
  margin-right: 0.3rem;
  color: var(--zq-muted);
}

.zq-hint-icon svg {
  width: 15px;
  height: 15px;
}

.zq-alert-error {
  color: #DC2626;
  font-size: 0.9rem;
}

.zq-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--zq-border);
  border-top-color: var(--zq-primary);
  border-radius: 50%;
  margin: 0 auto;
  animation: zq-spin 0.8s linear infinite;
}

@keyframes zq-spin {
  to { transform: rotate(360deg); }
}

/* --- Order confirmation page (standalone, no site header/nav) --- */

.zq-oc-body {
  margin: 0;
  background: var(--zq-bg);
}

.zq-oc-page {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding: 3rem 1.5rem 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.zq-oc-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('/assets/images/email-watermark-tile.png');
  background-repeat: repeat;
  opacity: 0.45;
  z-index: 0;
  pointer-events: none;
}

.zq-oc-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(2px);
  opacity: 0.55;
  z-index: 0;
  pointer-events: none;
}

.zq-oc-blob-left {
  width: 420px;
  height: 420px;
  left: -180px;
  top: -60px;
  background: radial-gradient(circle at 30% 30%, rgba(108,77,255,0.16), rgba(108,77,255,0) 70%);
}

.zq-oc-blob-right {
  width: 460px;
  height: 460px;
  right: -200px;
  bottom: -120px;
  background: radial-gradient(circle at 70% 70%, rgba(59,130,246,0.14), rgba(59,130,246,0) 70%);
}

.zq-oc-dots {
  position: absolute;
  left: 6%;
  top: 32%;
  width: 110px;
  height: 110px;
  background-image: radial-gradient(circle, var(--zq-border) 1.6px, transparent 1.8px);
  background-size: 18px 18px;
  opacity: 0.9;
  z-index: 0;
  pointer-events: none;
}

.zq-oc-flourish {
  position: absolute;
  right: 1.5rem;
  top: 1.25rem;
  font-family: 'Segoe Script', 'Brush Script MT', cursive;
  color: var(--zq-secondary);
  opacity: 0.55;
  font-size: 0.85rem;
  line-height: 1.25;
  text-align: right;
  transform: rotate(-4deg);
  z-index: 0;
  pointer-events: none;
}

@media (max-width: 520px) {
  .zq-oc-flourish { display: none; }
}

.zq-oc-topbar {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-bottom: 2rem;
}

.zq-oc-logo-link {
  display: inline-block;
}

.zq-oc-tagline {
  margin: 0.4rem 0 0;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--zq-muted);
}

.zq-oc-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 620px;
  background: var(--zq-surface);
  border-radius: 20px;
  box-shadow: 0 20px 50px rgba(24,32,51,0.08);
  padding: 3rem 2.5rem;
  text-align: center;
}

.zq-oc-icon {
  position: relative;
  width: 100px;
  height: 100px;
  margin: 0 auto 1.75rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.zq-oc-icon-success {
  background: radial-gradient(circle, rgba(22,163,74,0.16) 0%, rgba(22,163,74,0.05) 60%, rgba(22,163,74,0) 100%);
}

.zq-oc-icon-success .zq-oc-icon-glow {
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  background: var(--zq-success);
  z-index: 0;
  box-shadow: 0 0 24px 4px rgba(22,163,74,0.45);
}

.zq-oc-icon-success svg {
  position: relative;
  z-index: 1;
}

.zq-oc-icon-pending {
  background: rgba(108,77,255,0.08);
}

.zq-oc-delayed-actions {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

.zq-oc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1.4rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
}

.zq-oc-btn-primary {
  background: var(--zq-primary);
  color: #fff;
}

.zq-oc-btn-primary:disabled {
  opacity: 0.6;
  cursor: default;
}

.zq-oc-btn-ghost {
  background: transparent;
  border-color: var(--zq-border);
  color: var(--zq-text);
}

.zq-oc-icon-failed {
  background: #DC2626;
}

.zq-oc-heading {
  margin: 0 0 1.5rem;
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--zq-text);
  line-height: 1.25;
}

.zq-oc-orderid {
  display: inline-flex;
  flex-wrap: wrap;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.6rem;
  background: rgba(108,77,255,0.07);
  color: var(--zq-text);
  border-radius: 999px;
  padding: 0.75rem 1.25rem;
  margin: 0 0 1.75rem;
  font-size: 0.95rem;
}

.zq-oc-orderid-value {
  overflow-wrap: anywhere;
}

.zq-oc-orderid-icon {
  color: var(--zq-primary);
  flex-shrink: 0;
}

.zq-oc-orderid-label {
  color: var(--zq-muted);
}

.zq-oc-orderid-value {
  color: var(--zq-text);
  letter-spacing: 0.02em;
}

.zq-oc-copy-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--zq-primary);
  cursor: pointer;
  flex-shrink: 0;
}

.zq-oc-copy-btn:hover {
  background: rgba(108,77,255,0.12);
}

.zq-oc-copy-btn-done {
  color: var(--zq-success);
}

.zq-oc-email-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  max-width: 460px;
  margin: 0 auto;
  color: var(--zq-text);
  font-size: 1rem;
  line-height: 1.6;
}

.zq-oc-email-icon {
  position: relative;
  flex-shrink: 0;
}

.zq-oc-email-badge {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--zq-success);
  border: 2px solid var(--zq-surface);
  display: flex;
  align-items: center;
  justify-content: center;
}

.zq-oc-divider {
  border: none;
  border-top: 1px solid var(--zq-border);
  margin: 2rem 0 1.5rem;
}

.zq-oc-hint {
  color: var(--zq-muted);
  font-size: 0.82rem;
  line-height: 1.6;
  margin: 0;
}

@media (min-width: 560px) {
  .zq-oc-hint {
    white-space: nowrap;
  }
}

.zq-oc-hint-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--zq-border);
  color: var(--zq-muted);
  font-size: 0.75rem;
  font-weight: 700;
  vertical-align: -5px;
  margin-right: 0.4rem;
}

.zq-oc-hint a {
  color: var(--zq-primary);
  font-weight: 700;
  text-decoration: underline;
}

.zq-oc-subtext {
  color: var(--zq-muted);
  font-size: 0.98rem;
  margin: 0;
}

.zq-oc-trust-row {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 620px;
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--zq-border);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.zq-oc-trust-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
}

.zq-oc-trust-item strong {
  display: block;
  color: var(--zq-text);
}

.zq-oc-trust-item span {
  color: var(--zq-muted);
  font-size: 0.8rem;
}

@media (max-width: 640px) {
  .zq-oc-card {
    padding: 2.25rem 1.5rem;
  }
  .zq-oc-heading {
    font-size: 1.5rem;
  }
  .zq-oc-trust-row {
    justify-content: flex-start;
  }
}

.zq-policy-page,
.zq-contact-page {
  max-width: 1180px;
  margin: 2rem auto 3rem;
  padding: 0 1.5rem;
}

.zq-policy-hero,
.zq-contact-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 2.4rem;
  border: 1px solid #E6EAF2;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(244, 241, 255, 0.86)),
    radial-gradient(circle at 88% 18%, rgba(59, 130, 246, 0.16), transparent 28%),
    radial-gradient(circle at 12% 82%, rgba(108, 77, 255, 0.14), transparent 30%);
  box-shadow: 0 18px 48px rgba(24, 32, 51, 0.08);
  overflow: hidden;
}

.zq-policy-hero {
  padding: 1.5rem 2.4rem;
}

.zq-contact-hero {
  padding: 1.5rem 2.4rem;
}

.zq-policy-eyebrow {
  display: inline-flex;
  align-items: center;
  margin-bottom: 0.65rem;
  color: var(--zq-primary);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.zq-policy-hero h1,
.zq-contact-hero h1 {
  margin: 0;
  color: var(--zq-text);
  font-size: clamp(2rem, 4vw, 3.35rem);
  line-height: 1.04;
  font-weight: 900;
}

.zq-policy-hero h1,
.zq-contact-hero h1 {
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
}

.zq-policy-hero p,
.zq-contact-hero p {
  max-width: 720px;
  margin: 0.85rem 0 0;
  color: #44516A;
  font-size: 1.05rem;
  line-height: 1.7;
}

.zq-policy-hero p,
.zq-contact-hero p {
  margin: 0.5rem 0 0;
  font-size: 0.98rem;
  line-height: 1.55;
}

.zq-policy-hero-side {
  flex: 0 0 300px;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 1rem;
  align-items: center;
}

.zq-policy-hero-badge,
.zq-contact-hero-icon {
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
  border-radius: 28px;
  background: linear-gradient(135deg, #6C4DFF, #3B82F6);
  box-shadow: 0 20px 34px rgba(88, 70, 220, 0.26);
  color: #fff;
  font-size: 2.35rem;
}

.zq-policy-content-card,
.zq-contact-info-card,
.zq-contact-form-card,
.zq-contact-intro {
  background: var(--zq-surface);
  border: 1px solid #E6EAF2;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(24, 32, 51, 0.06);
}

.zq-policy-hero-highlights {
  display: grid;
  gap: 0.45rem;
}

.zq-policy-highlight {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 0.75rem;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(226, 232, 240, 0.86);
  color: var(--zq-text);
  box-shadow: 0 8px 20px rgba(24, 32, 51, 0.05);
}

.zq-policy-highlight + .zq-policy-highlight {
  border-top-color: rgba(226, 232, 240, 0.86);
}

.zq-policy-highlight span {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  flex: 0 0 28px;
  border-radius: 50%;
  background: #ECFDF3;
  color: #047857;
  font-size: 0.85rem;
  font-weight: 800;
}

.zq-policy-content-card {
  width: 100%;
  margin: 1.5rem 0 0;
  padding: clamp(1.35rem, 3vw, 2.4rem);
}

.zq-policy-content-card .zq-legal-body {
  max-width: 860px;
  margin: 0 auto;
}

.zq-legal-body {
  color: #334155;
  line-height: 1.8;
  font-size: 1rem;
}

.zq-legal-body h2,
.zq-legal-body h3 {
  color: var(--zq-text);
  line-height: 1.25;
}

.zq-legal-body h2 {
  margin: 1.6rem 0 0.65rem;
  font-size: 1.35rem;
}

.zq-legal-body h3 {
  margin: 1.25rem 0 0.45rem;
  font-size: 1.08rem;
}

.zq-legal-body p,
.zq-legal-body ul,
.zq-legal-body ol {
  margin-top: 0;
}

.zq-legal-body a {
  color: var(--zq-primary);
  font-weight: 700;
}

.zq-contact-intro {
  margin-top: 1.25rem;
  padding: 1.25rem 1.4rem;
}

.zq-contact-layout {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 1.5rem;
  align-items: start;
  margin-top: 1.5rem;
}

.zq-contact-info-panel {
  display: grid;
  gap: 1rem;
}

.zq-contact-info-card {
  padding: 1.25rem;
}

.zq-contact-info-card span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  margin-bottom: 0.85rem;
  border-radius: 14px;
  background: #F4F1FF;
  color: var(--zq-primary);
  font-size: 1.2rem;
}

.zq-contact-info-card strong {
  display: block;
  color: var(--zq-text);
  font-size: 1rem;
}

.zq-contact-info-card p {
  margin: 0.35rem 0 0;
  color: var(--zq-muted);
  line-height: 1.6;
  font-size: 0.92rem;
}

.zq-contact-form-card {
  margin-top: 0;
  padding: clamp(1.35rem, 3vw, 2rem);
}

.zq-contact-form-heading {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: 1rem;
}

.zq-contact-form-heading span {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #EFF6FF;
  color: #1D4ED8;
  font-size: 1.25rem;
}

.zq-contact-form-heading h2 {
  margin: 0;
  color: var(--zq-text);
  font-size: 1.35rem;
}

.zq-contact-form-heading p {
  margin: 0.2rem 0 0;
  color: var(--zq-muted);
  font-size: 0.92rem;
}

@media (max-width: 860px) {
  .zq-policy-hero,
  .zq-contact-hero {
    align-items: flex-start;
    flex-direction: column;
    padding: 1.6rem;
  }

  .zq-contact-layout {
    grid-template-columns: 1fr;
  }

  .zq-policy-hero-side {
    width: 100%;
    grid-template-columns: 82px minmax(0, 1fr);
    flex-basis: auto;
  }

  .zq-policy-hero-badge {
    width: 82px;
    height: 82px;
    font-size: 1.85rem;
  }
}

/* --- Cart page --- */

.zq-cart-top-row {
  max-width: 1200px;
  margin: 2rem auto 1.25rem;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 1.5rem;
  align-items: center;
}

.zq-cart-layout {
  max-width: 1200px;
  margin: 0 auto 2rem;
  padding: 0 1.5rem;
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: 1.5rem;
  align-items: start;
}

.zq-cart-main {
  min-width: 0;
}

.zq-cart-page-heading h1 {
  font-size: 2rem;
  font-weight: 800;
  color: var(--zq-text);
  margin: 0 0 0.35rem;
}

.zq-cart-page-heading p {
  color: var(--zq-muted);
  font-size: 1rem;
  font-style: italic;
  margin: 0;
}

.zq-cart-hero-deco {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background: linear-gradient(160deg, rgba(108, 76, 255, 0.1), rgba(59, 130, 246, 0.05));
  border-radius: 18px;
  padding: 0.85rem 1.1rem;
  height: 100%;
  box-sizing: border-box;
}

.zq-cart-hero-script {
  font-style: italic;
  color: var(--zq-secondary);
  font-size: 0.85rem;
  line-height: 1.3;
  text-align: left;
  margin: 0;
  white-space: nowrap;
}

.zq-cart-hero-illustration {
  display: block;
  width: 90px;
  height: auto;
  flex-shrink: 0;
}

.zq-cart-card {
  background: var(--zq-surface);
  border: 1px solid var(--zq-border);
  border-radius: 18px;
  padding: 1.75rem;
  box-shadow: 0 2px 14px rgba(24, 32, 51, 0.05);
}

.zq-cart-card h2 {
  margin: 0 0 1.25rem;
  font-size: 1.2rem;
}

.zq-cart-row {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--zq-border);
  transition: box-shadow 0.15s ease;
}

.zq-cart-row:last-of-type {
  border-bottom: none;
}

.zq-cart-row img,
.zq-cart-row-placeholder {
  width: 100px;
  height: 100px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
  background: var(--zq-bg);
}

.zq-cart-row-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  background: linear-gradient(160deg, rgba(108, 76, 255, 0.12), rgba(59, 130, 246, 0.08));
}

.zq-cart-row-info {
  flex: 1;
  min-width: 0;
}

.zq-cart-row-title {
  font-weight: 700;
  color: var(--zq-text);
  margin-bottom: 0.3rem;
}

.zq-cart-row-desc {
  color: var(--zq-muted);
  font-size: 0.85rem;
  margin-bottom: 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.zq-remove-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--zq-surface);
  border: 1px solid var(--zq-border);
  color: var(--zq-text);
  padding: 0.55rem 1rem;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.zq-remove-btn:hover {
  background: #FEF2F2;
  border-color: #FECACA;
  color: #DC2626;
}

.zq-cart-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--zq-border);
  flex-wrap: wrap;
}

.zq-continue-shopping {
  color: var(--zq-secondary);
  font-weight: 600;
  font-size: 0.9rem;
}

.zq-clear-cart-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--zq-surface);
  border: 1px solid var(--zq-border);
  color: var(--zq-text);
  padding: 0.55rem 1rem;
  border-radius: 10px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.zq-clear-cart-btn:hover {
  background: #FEF2F2;
  border-color: #FECACA;
  color: #DC2626;
}

.zq-cart-empty {
  text-align: center;
  padding: 2rem 0;
  color: var(--zq-muted);
}

.zq-cart-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.zq-order-summary-card,
.zq-why-shop-card {
  background: var(--zq-surface);
  border: 1px solid var(--zq-border);
  border-radius: 18px;
  padding: 1.5rem;
  box-shadow: 0 2px 14px rgba(24, 32, 51, 0.05);
}

.zq-order-summary-card h2,
.zq-why-shop-card h2 {
  margin: 0 0 1.1rem;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.zq-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  font-size: 0.92rem;
  color: var(--zq-muted);
}

.zq-summary-discount strong {
  color: var(--zq-success);
}

.zq-summary-total {
  border-top: 1px solid var(--zq-border);
  margin-top: 0.4rem;
  padding-top: 0.85rem;
  font-size: 1.05rem;
  color: var(--zq-text);
  font-weight: 600;
}

.zq-summary-total strong {
  font-size: 1.35rem;
}

.zq-checkout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  margin-top: 1.25rem;
  background: linear-gradient(135deg, var(--zq-cta), #ff7a70);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.95rem;
  border-radius: 13px;
  box-shadow: 0 6px 18px rgba(255, 92, 92, 0.3);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.zq-checkout-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(255, 92, 92, 0.35);
}

.zq-secure-note {
  text-align: center;
  color: var(--zq-muted);
  font-size: 0.78rem;
  margin: 0.85rem 0 0;
}

.zq-why-shop-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

.zq-why-shop-item {
  text-align: center;
  padding: 0 0.4rem;
  border-left: 1px solid var(--zq-border);
}

.zq-why-shop-item:first-child {
  border-left: none;
}

.zq-why-shop-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.5rem;
  font-size: 1.1rem;
}

.zq-why-shop-blue { background: #EFF6FF; }
.zq-why-shop-green { background: #ECFDF3; }
.zq-why-shop-purple { background: #F3EEFF; }

.zq-why-shop-item span {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--zq-text);
  line-height: 1.3;
  display: block;
}

.zq-cart-trust {
  text-align: center;
  max-width: 1200px;
  margin: 0.5rem auto 3rem;
  padding: 0 1.5rem;
  color: var(--zq-text);
  font-weight: 500;
}

.zq-cart-trust a {
  font-weight: 700;
}

.zq-cart-trust-sub {
  display: block;
  color: var(--zq-muted);
  font-weight: 400;
  font-size: 0.85rem;
  margin-top: 0.2rem;
}

/* Reusable lightweight modal for public pages (Clear Cart confirmation) */
.zq-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(16, 24, 40, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: 1rem;
}

.zq-modal-overlay[hidden] {
  display: none;
}

.zq-modal {
  background: var(--zq-surface);
  border-radius: 16px;
  padding: 1.75rem;
  max-width: 400px;
  width: 100%;
  box-shadow: 0 20px 50px rgba(16, 24, 40, 0.25);
}

.zq-modal h3 {
  margin: 0 0 0.6rem;
}

.zq-modal p {
  margin: 0;
  color: var(--zq-muted);
  font-size: 0.9rem;
  line-height: 1.5;
}

.zq-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.zq-btn-outline-light {
  background: var(--zq-surface);
  border: 1px solid var(--zq-border);
  color: var(--zq-text);
  padding: 0.6rem 1.1rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
}

.zq-btn-solid-red-light {
  background: #DC2626;
  border: none;
  color: #fff;
  padding: 0.6rem 1.1rem;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.88rem;
  cursor: pointer;
}

@media (max-width: 900px) {
  .zq-cart-layout,
  .zq-cart-top-row {
    grid-template-columns: 1fr;
  }
  .zq-cart-hero-deco {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .zq-cart-page-heading h1 {
    font-size: 1.75rem;
  }
  .zq-cart-row {
    flex-wrap: wrap;
  }
  .zq-remove-btn {
    margin-left: auto;
  }
  .zq-search {
    display: none;
  }
}

/* --- Dynamic landing-page design engine (Phase 1) ---
   Colors come from the product's persisted palette/override via CSS
   custom properties set inline on .zq-lp (see templates/public/product.php),
   so different products can look different while sharing one stylesheet. */

.zq-lp {
  --zq-lp-primary: var(--zq-primary);
  --zq-lp-secondary: var(--zq-secondary);
  --zq-lp-light: #EEF2FF;
  --zq-lp-dark: #111827;

  /* Template design tokens — the default ("modern") values below. Each
     [data-lp-template="…"] block further down overrides a subset of these
     to give that template a distinct look while every component keeps
     reading from the same tokens, so no markup or component CSS needs to
     change per template. */
  --zq-lp-hero-bg: linear-gradient(160deg, var(--zq-lp-light), var(--zq-surface));
  --zq-lp-hero-text: var(--zq-lp-dark);
  --zq-lp-hero-desc-color: var(--zq-muted);
  --zq-lp-radius-xl: 28px;
  --zq-lp-radius-lg: 20px;
  --zq-lp-radius-md: 14px;
  --zq-lp-card-border: 1px solid var(--zq-border);
  --zq-lp-card-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
  --zq-lp-blob-opacity: 0.16;
  --zq-lp-heading-weight: 800;
}

.zq-product.zq-lp {
  position: relative;
  isolation: isolate;
  max-width: 1180px;
}

/* Very light "Zorquik" text watermark tiled behind every product landing
   page — an inline SVG data URI so it needs no extra asset/request, sits
   behind all section content (z-index -1), and never intercepts clicks. */
.zq-product.zq-lp::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='160'%3E%3Ctext x='0' y='90' font-family='Arial, sans-serif' font-size='34' font-weight='700' fill='%23182033' transform='rotate(-20 130 80)'%3EZorquik%3C/text%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 260px 160px;
  opacity: 0.03;
  pointer-events: none;
  z-index: -1;
}

/* A custom Background Color should show exactly as picked, so the
   watermark is dropped when one is set. */
.zq-product.zq-lp[data-lp-custom-bg]::before {
  content: none;
}

.zq-lp-hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
  background: linear-gradient(90deg, color-mix(in srgb, var(--zq-lp-primary) 10%, transparent) 0, transparent 145px), var(--zq-lp-hero-bg);
  border-radius: var(--zq-lp-radius-xl);
  border: 1px solid color-mix(in srgb, var(--zq-lp-primary) 22%, var(--zq-border));
  border-left: 4px solid var(--zq-lp-primary);
  box-shadow: var(--zq-lp-card-shadow), inset 4px 0 0 color-mix(in srgb, var(--zq-lp-primary) 14%, transparent);
  padding: 2rem 1.75rem;
  margin-bottom: 0;
}

@media (min-width: 768px) {
  .zq-lp-hero {
    padding: 3rem;
    min-height: 520px;
  }

  .zq-lp-hero-split {
    grid-template-columns: 45% 1fr;
    gap: 3rem;
  }

  .zq-lp-hero-showcase {
    grid-template-columns: 40% 1fr;
  }

  .zq-lp-hero-centered {
    text-align: center;
  }

  .zq-lp-hero-centered .zq-lp-hero-media {
    order: 2;
    max-width: 640px;
    margin: 0 auto;
  }

  .zq-lp-hero-centered .zq-lp-hero-content {
    order: 1;
  }

  .zq-lp-hero-centered .zq-price-block,
  .zq-lp-hero-centered .zq-lp-cta-row,
  .zq-lp-hero-centered .zq-lp-hero-mini-trust {
    justify-content: center;
  }
}

.zq-lp-hero-media {
  position: relative;
  z-index: 1;
}

/* Very light "Zorquik" wordmark tiled behind the hero card's content only
   (not the rest of the page) — a subtle brand touch. */
.zq-lp-hero-watermark {
  position: absolute;
  inset: -30%;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 2.5rem 2rem;
  justify-items: center;
  transform: rotate(-20deg);
  pointer-events: none;
  overflow: hidden;
  /* Fade the watermark out directly behind the readable title/price/CTA
     column so it never competes with real content — it stays visible only
     in the surrounding card margins. */
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 38% 45%, transparent 0%, transparent 55%, black 85%);
  mask-image: radial-gradient(ellipse 60% 55% at 38% 45%, transparent 0%, transparent 55%, black 85%);
}

.zq-lp-hero-watermark span {
  font-size: 1.15rem;
  font-weight: 800;
  white-space: nowrap;
  color: var(--zq-lp-primary);
  opacity: 0.02;
}

.zq-lp-image-frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border: 1px solid color-mix(in srgb, var(--zq-lp-primary) 22%, var(--zq-border));
  border-left: 4px solid var(--zq-lp-primary);
  border-radius: var(--zq-lp-radius-md);
  background: linear-gradient(90deg, color-mix(in srgb, var(--zq-lp-primary) 10%, transparent) 0, transparent 80px), color-mix(in srgb, var(--zq-lp-primary) 4%, var(--zq-surface));
  box-shadow: inset 4px 0 0 color-mix(in srgb, var(--zq-lp-primary) 14%, transparent);
}

.zq-lp-image-frame::before {
  content: '';
  position: absolute;
  inset: -10%;
  background: radial-gradient(circle at 50% 35%, var(--zq-lp-primary) 0%, transparent 62%);
  opacity: var(--zq-lp-blob-opacity);
  border-radius: 50%;
  z-index: 0;
}

.zq-lp-image-frame img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  height: auto;
  border-radius: var(--zq-lp-radius-lg);
  background: var(--zq-surface);
  box-shadow: 0 30px 60px -12px rgba(15, 23, 42, 0.25);
}

.zq-lp-hero-slides {
  position: relative;
  z-index: 1;
  width: 100%;
  /* All slides share this one grid cell (grid-area: 1/1 below), so the
     track's height is driven by each image's own natural aspect ratio at
     100% width — same as the single-image path — instead of a fixed box
     that would crop taller/shorter images via object-fit. */
  display: grid;
}

.zq-lp-hero-slide {
  grid-area: 1 / 1;
  align-self: start;
  width: 100%;
  height: auto;
  border-radius: var(--zq-lp-radius-lg);
  background: var(--zq-surface);
  box-shadow: 0 30px 60px -12px rgba(15, 23, 42, 0.25);
  opacity: 0;
  transition: opacity 0.9s ease;
  cursor: pointer;
}

.zq-lp-hero-slide.is-active {
  opacity: 1;
  position: relative;
  z-index: 1;
}

.zq-lp-hero-dots {
  position: absolute;
  z-index: 2;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.4rem;
  padding: 0.4rem 0.6rem;
  background: rgba(15, 23, 42, 0.35);
  border-radius: 999px;
}

.zq-lp-hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.zq-lp-hero-dot.is-active {
  background: #fff;
  transform: scale(1.2);
}

.zq-lp-float-badge {
  position: absolute;
  z-index: 2;
  background: var(--zq-surface);
  color: var(--zq-text);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.15);
  white-space: nowrap;
}

.zq-lp-float-badge-1 {
  top: 8%;
  left: -4%;
}

.zq-lp-float-badge-2 {
  bottom: 10%;
  right: -4%;
}

@media (max-width: 767px) {
  .zq-lp-float-badge {
    display: none;
  }
}

.zq-lp-badge-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.zq-lp-eyebrow {
  display: inline-block;
  /* Dark scrim layered under the theme color, not just the raw theme color:
     a product's custom accent can be pale (e.g. light yellow-green), which
     would make white text unreadable on it. The scrim guarantees contrast
     no matter what color a product picks. */
  background: linear-gradient(rgba(0, 0, 0, 0.18), rgba(0, 0, 0, 0.18)), var(--zq-lp-primary);
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
}

.zq-lp-tagline-pill {
  display: inline-block;
  /* Fixed neutral chip instead of the theme's light/primary colors: those
     are also product-customizable and can end up nearly the same pale
     shade, making the pill invisible. A neutral chip is always legible. */
  background: rgba(17, 24, 39, 0.08);
  color: #111827;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
}

.zq-lp-hero-content {
  position: relative;
  z-index: 1;
}

.zq-lp-hero-content h1 {
  font-size: clamp(1.85rem, 1.5rem + 2.5vw, 2.5rem);
  font-weight: var(--zq-lp-heading-weight);
  line-height: 1.15;
  color: var(--zq-lp-hero-text);
  margin: 0 0 0.4rem;
}

.zq-lp-hero-desc {
  color: var(--zq-lp-hero-text);
  font-weight: 700;
  margin: 0.65rem 0 0;
  font-size: 1.05rem;
  line-height: 1.6;
}

.zq-lp .zq-lp-hero-content .zq-subtitle {
  color: var(--zq-lp-hero-text);
  font-size: 1.2rem;
  font-weight: 700;
  opacity: 1;
}

.zq-lp-save {
  color: var(--zq-success);
  font-weight: 600;
  font-size: 0.9rem;
  margin: -0.5rem 0 0.75rem;
}

/* Main buttons on top; Save + Quick View centred beneath them. The row
   shrinks to the main buttons' width so "centred" means under those two. */
.zq-lp-cta-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  width: fit-content;
  max-width: 100%;
  margin-top: 0.5rem;
}

.zq-lp-cta-main,
.zq-lp-cta-extras {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.zq-lp-hero-compact .zq-lp-cta-row {
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px) {
  .zq-lp-hero-centered .zq-lp-cta-row {
    margin-left: auto;
    margin-right: auto;
  }
}

.zq-lp-hero-mini-trust {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  margin: 1.25rem 0 0;
  padding: 0;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--zq-text);
}

.zq-lp-hero-mini-trust li {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.zq-lp-mini-trust-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--zq-lp-primary);
  color: #fff;
  font-size: 0.65rem;
  flex-shrink: 0;
}

.zq-lp .zq-price-selling {
  color: var(--zq-lp-primary);
  font-size: 2rem;
}

.zq-lp .zq-discount {
  background: var(--zq-lp-light);
  color: var(--zq-lp-primary);
}

.zq-lp .buy-button {
  background: linear-gradient(135deg, var(--zq-lp-primary), var(--zq-lp-secondary));
  border: none;
  padding: 0.9rem 2rem;
  font-size: 1rem;
  border-radius: 12px;
  box-shadow: 0 12px 28px -6px color-mix(in srgb, var(--zq-lp-primary) 60%, transparent);
}

.zq-lp .zq-secondary-btn {
  padding: 0.9rem 2rem;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  margin-left: 0;
  border: 2px solid var(--zq-lp-primary);
  color: var(--zq-lp-primary);
  background: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.zq-lp .zq-secondary-btn:hover {
  background: var(--zq-lp-primary);
  color: #fff;
}

.zq-lp-trust-strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin: 2rem 0;
  background: var(--zq-lp-c-bg, var(--zq-surface));
  border: var(--zq-lp-card-border);
  border-left: 4px solid var(--zq-lp-primary);
  border-radius: var(--zq-lp-radius-lg);
  padding: 1.5rem;
  box-shadow: var(--zq-lp-card-shadow);
}

@media (min-width: 640px) {
  .zq-lp-trust-strip {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .zq-lp-trust-strip {
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
  }
}

.zq-lp-trust-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  text-align: left;
}

@media (min-width: 1000px) {
  .zq-lp-trust-card:not(:first-child) {
    padding-left: 1.5rem;
    border-left: 1px solid var(--zq-border);
  }
}

.zq-lp-trust-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--zq-lp-light);
  color: var(--zq-lp-primary);
  font-size: 1.2rem;
  box-shadow: 0 8px 16px -4px color-mix(in srgb, var(--zq-lp-primary) 40%, transparent);
  flex-shrink: 0;
}

.zq-lp-trust-card:nth-child(2) .zq-lp-trust-icon {
  background: color-mix(in srgb, var(--zq-lp-secondary) 18%, transparent);
  color: var(--zq-lp-secondary);
  box-shadow: 0 8px 16px -4px color-mix(in srgb, var(--zq-lp-secondary) 40%, transparent);
}

.zq-lp-trust-card h3 {
  margin: 0 0 0.15rem;
  font-size: 0.92rem;
  font-weight: normal;
}

.zq-lp-trust-card p {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--zq-muted);
}

.zq-lp-left-outline {
  position: relative;
  background: var(--zq-lp-panel-bg, color-mix(in srgb, var(--zq-lp-primary) 8%, var(--zq-surface)));
  border-left: 4px solid var(--zq-lp-primary);
  border-radius: var(--zq-lp-radius-lg);
  padding: 0.75rem 2rem 2rem;
}

.zq-lp-left-outline .zq-lp-heading-strip {
  margin-top: 0;
}

/* Each sentence of a Problem Statement rendered as its own scannable line,
   instead of one dense paragraph — quick to read at a glance. */
.zq-lp-readable-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.zq-lp-readable-list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.55;
  color: var(--zq-text);
}

.zq-lp-readable-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--zq-lp-primary);
}

/* Full Description split into short paragraphs (one per sentence-group the
   admin already separated with a blank line) with generous spacing, so a
   long description reads as digestible chunks rather than a wall of text. */
.zq-lp-readable-prose p {
  position: relative;
  margin: 0 0 0.9rem;
  padding: 1rem 1.15rem 1rem 3rem;
  background: var(--zq-surface);
  border: 1px solid color-mix(in srgb, var(--zq-lp-primary) 18%, var(--zq-border));
  border-radius: var(--zq-lp-radius-md);
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.04);
  font-size: 1.04rem;
  font-weight: 600;
  line-height: 1.75;
  color: var(--zq-text);
}

.zq-lp-readable-prose p::before {
  content: '\2713';
  position: absolute;
  left: 1rem;
  top: 1.08rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--zq-lp-primary), var(--zq-lp-secondary));
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--zq-lp-primary) 28%, transparent);
}

.zq-lp-readable-prose p:last-child {
  margin-bottom: 0;
}

.zq-lp-benefit-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .zq-lp-benefit-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .zq-lp-benefit-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.zq-lp-benefit-card {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: var(--zq-lp-c-bg, var(--zq-surface));
  border: var(--zq-lp-c-bw, 1.5px) var(--zq-lp-c-bs, solid) var(--zq-lp-c-bc, var(--zq-border));
  border-radius: var(--zq-lp-radius-md);
  padding: 1.25rem 1.25rem 1.1rem;
  box-shadow: var(--zq-lp-card-shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.zq-lp-benefit-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.12);
}

.zq-lp-benefit-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: var(--zq-lp-card-accent, var(--zq-lp-primary));
}

.zq-lp-benefit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--zq-lp-card-accent, var(--zq-lp-primary));
  box-shadow: 0 10px 20px -4px color-mix(in srgb, var(--zq-lp-card-accent, var(--zq-lp-primary)) 80%, transparent);
  color: #fff;
  font-weight: 700;
  flex-shrink: 0;
}

.zq-lp-benefit-card p {
  margin: 0;
  color: var(--zq-text);
  font-weight: 600;
  line-height: 1.55;
}

/* Cycle each card through the theme's own primary / secondary / blended
   tones so the grid feels colorful and dynamic without introducing any
   colors outside the product's chosen palette. */
.zq-lp-benefit-card:nth-child(3n+1) {
  --zq-lp-card-accent: var(--zq-lp-primary);
  background: color-mix(in srgb, var(--zq-lp-primary) 6%, var(--zq-surface));
  border-color: color-mix(in srgb, var(--zq-lp-primary) 30%, var(--zq-border));
}

.zq-lp-benefit-card:nth-child(3n+2) {
  /* Same hue family as the first card (Primary Color), just a touch
     lighter — reads as a consistent set rather than a second, unrelated
     color, and still fully theme-driven (recolors with Primary Color). */
  --zq-lp-card-accent: color-mix(in srgb, var(--zq-lp-primary) 75%, #fff);
  background: color-mix(in srgb, var(--zq-lp-primary) 5%, var(--zq-surface));
  border-color: color-mix(in srgb, var(--zq-lp-primary) 25%, var(--zq-border));
}

.zq-lp-benefit-card:nth-child(3n+3) {
  --zq-lp-card-accent: color-mix(in srgb, var(--zq-lp-primary) 50%, var(--zq-lp-secondary));
  background: color-mix(in srgb, var(--zq-lp-primary) 3%, color-mix(in srgb, var(--zq-lp-secondary) 3%, var(--zq-surface)));
  border-color: color-mix(in srgb, var(--zq-lp-card-accent) 30%, var(--zq-border));
}

.zq-lp-final-cta {
  position: relative;
  overflow: hidden;
  text-align: center;
  background: var(--zq-lp-cta-bg, linear-gradient(135deg, var(--zq-lp-primary), var(--zq-lp-secondary)));
  color: #fff;
  border-radius: var(--zq-lp-radius-xl);
  padding: 3rem 1.5rem;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.35);
}

.zq-lp-final-cta::before,
.zq-lp-final-cta::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
}

.zq-lp-final-cta::before {
  width: 260px;
  height: 260px;
  top: -120px;
  right: -80px;
}

.zq-lp-final-cta::after {
  width: 180px;
  height: 180px;
  bottom: -90px;
  left: -60px;
}

.zq-lp-final-cta > * {
  position: relative;
  z-index: 1;
}

.zq-lp-final-cta h2 {
  margin: 0 0 0.35rem;
  font-size: 1.75rem;
}

.zq-lp-final-cta p {
  color: rgba(255, 255, 255, 0.85);
}

.zq-lp-final-cta .zq-price-block {
  justify-content: center;
  margin: 1.25rem 0;
}

.zq-lp-final-cta .zq-price-regular {
  color: rgba(255, 255, 255, 0.7);
}

.zq-lp-final-cta .zq-price-selling {
  color: #fff;
  font-size: 2rem;
}

.zq-lp-final-cta .zq-discount {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.zq-lp-final-cta .buy-button {
  background: #fff;
  color: var(--zq-lp-primary);
  font-weight: 700;
  padding: 0.85rem 2.25rem;
  border-radius: 999px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s ease;
  display: inline-block;
}

.zq-lp-final-cta .buy-button:hover {
  transform: translateY(-2px);
}

.zq-lp-final-cta .zq-hint {
  color: rgba(255, 255, 255, 0.75);
  margin-top: 0.75rem;
}

.zq-lp-final-cta .zq-hint a {
  color: #fff;
}

/* --- Phase 2: Included / Audience / How It Works / Specs / Reviews / FAQ --- */

.zq-lp-included-cards,
.zq-lp-audience-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 640px) {
  .zq-lp-included-cards,
  .zq-lp-audience-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .zq-lp-included-cards,
  .zq-lp-audience-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

.zq-lp-included-card,
.zq-lp-audience-card {
  position: relative;
  overflow: hidden;
  background: var(--zq-lp-c-bg, var(--zq-surface));
  border: var(--zq-lp-c-bw, 1.5px) var(--zq-lp-c-bs, solid) var(--zq-lp-c-bc, var(--zq-border));
  border-radius: var(--zq-lp-radius-md);
  padding: 1.25rem 1.25rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.zq-lp-included-card::before,
.zq-lp-audience-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: var(--zq-lp-card-accent, var(--zq-lp-primary));
}

.zq-lp-included-card:hover,
.zq-lp-audience-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.1);
}

.zq-lp-included-icon,
.zq-lp-audience-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--zq-lp-card-accent, var(--zq-lp-primary));
  box-shadow: 0 10px 20px -4px color-mix(in srgb, var(--zq-lp-card-accent, var(--zq-lp-primary)) 80%, transparent);
  font-size: 1.05rem;
  line-height: 1;
  flex-shrink: 0;
}

.zq-lp-included-card p,
.zq-lp-audience-card p {
  margin: 0;
  color: var(--zq-text);
  font-weight: 600;
}

.zq-lp-included-card:nth-child(3n+1),
.zq-lp-audience-card:nth-child(3n+1) {
  --zq-lp-card-accent: var(--zq-lp-primary);
  background: color-mix(in srgb, var(--zq-lp-primary) 6%, var(--zq-surface));
  border-color: color-mix(in srgb, var(--zq-lp-primary) 30%, var(--zq-border));
}

.zq-lp-included-card:nth-child(3n+2),
.zq-lp-audience-card:nth-child(3n+2) {
  --zq-lp-card-accent: color-mix(in srgb, var(--zq-lp-primary) 75%, #fff);
  background: color-mix(in srgb, var(--zq-lp-primary) 5%, var(--zq-surface));
  border-color: color-mix(in srgb, var(--zq-lp-primary) 25%, var(--zq-border));
}

.zq-lp-included-card:nth-child(3n+3),
.zq-lp-audience-card:nth-child(3n+3) {
  --zq-lp-card-accent: color-mix(in srgb, var(--zq-lp-primary) 50%, var(--zq-lp-secondary));
  background: color-mix(in srgb, var(--zq-lp-primary) 3%, color-mix(in srgb, var(--zq-lp-secondary) 3%, var(--zq-surface)));
  border-color: color-mix(in srgb, var(--zq-lp-card-accent) 30%, var(--zq-border));
}

.zq-lp-timeline {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.9rem;
}

@media (min-width: 900px) {
  .zq-lp-timeline {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .zq-lp-timeline-step {
    min-height: 150px;
  }
}

.zq-lp-timeline-step {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.15rem;
  background: var(--zq-lp-c-bg, var(--zq-surface));
  border: 1px solid color-mix(in srgb, var(--zq-lp-primary) 20%, var(--zq-border));
  border-radius: var(--zq-lp-radius-md);
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.05);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.zq-lp-timeline-step::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(135deg, var(--zq-lp-primary), var(--zq-lp-secondary));
}

.zq-lp-timeline-step:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--zq-lp-primary) 44%, var(--zq-border));
  box-shadow: 0 18px 34px rgba(15, 23, 42, 0.1);
}

.zq-lp-timeline-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--zq-lp-primary), var(--zq-lp-secondary));
  box-shadow: 0 10px 20px color-mix(in srgb, var(--zq-lp-primary) 24%, transparent);
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  flex-shrink: 0;
}

.zq-lp-timeline-step p {
  margin: 0;
  color: var(--zq-text);
  font-weight: 600;
  line-height: 1.55;
}

.zq-lp-specs-grid {
  display: grid;
  grid-template-columns: 1fr;
  border: var(--zq-lp-card-border);
  border-radius: var(--zq-lp-radius-md);
  overflow: hidden;
}

@media (min-width: 640px) {
  .zq-lp-specs-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.zq-lp-spec-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--zq-border);
  background: var(--zq-surface);
}

/* A fixed, deliberately dark grey rather than var(--zq-muted) — that token
   is redefined per-theme for various contexts (mostly for text sitting on a
   theme's own dark hero) and doesn't reliably pair with this row's actual
   background across every theme, which was leaving the label barely
   readable on some. Specs rows are white/near-white on every theme except
   Dark and Midnight Neon (overridden back to light text below), so a fixed
   dark color here is the readable, theme-proof choice. */
.zq-lp-spec-label {
  color: #374151;
  font-weight: 700;
}

.zq-lp-spec-value {
  color: var(--zq-text);
  font-weight: 800;
}

[data-lp-template="dark"] .zq-lp-spec-label,
[data-lp-template="midnight"] .zq-lp-spec-label {
  color: var(--zq-muted);
}

.zq-lp-specs-cta {
  text-align: center;
  margin-top: 1.5rem;
}

.zq-lp-review-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

@media (min-width: 700px) {
  .zq-lp-review-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

.zq-lp-review-card {
  background: var(--zq-lp-c-bg, var(--zq-surface));
  border: var(--zq-lp-c-bw, 1.5px) var(--zq-lp-c-bs, solid) var(--zq-lp-c-bc, var(--zq-border));
  border-radius: var(--zq-lp-radius-md);
  padding: 1.25rem;
  box-shadow: var(--zq-lp-card-shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.zq-lp-review-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.1);
}

.zq-lp-review-stars {
  color: #F59E0B;
  letter-spacing: 0.1em;
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.zq-lp-review-card p {
  margin: 0 0 0.75rem;
  font-weight: 600;
  color: var(--zq-text);
}

.zq-lp-review-author {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.zq-lp-review-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.zq-lp-review-avatar-fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--zq-lp-light);
  color: var(--zq-lp-primary);
  font-size: 1.1rem;
}

.zq-lp-review-card cite {
  display: flex;
  flex-direction: column;
  font-style: normal;
  font-weight: 700;
}

.zq-lp-review-card cite span {
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--zq-muted);
}

.zq-lp-faq {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.zq-lp-faq-item {
  position: relative;
  background: var(--zq-lp-c-bg, var(--zq-surface));
  border: var(--zq-lp-c-bw, 1.5px) var(--zq-lp-c-bs, solid) var(--zq-lp-c-bc, var(--zq-border));
  border-radius: var(--zq-lp-radius-md);
  padding: 1.15rem 1.4rem;
  box-shadow: var(--zq-lp-card-shadow);
  overflow: hidden;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

/* Left accent bar — a quiet "selected" indicator, not a full color change,
   so it stays legible across every theme's own card background. */
.zq-lp-faq-item::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--zq-lp-primary);
  opacity: 0;
  transition: opacity 0.18s ease;
}

.zq-lp-faq-item:hover {
  border-color: color-mix(in srgb, var(--zq-lp-primary) 55%, var(--zq-lp-c-bc, var(--zq-border)));
  box-shadow: 0 10px 26px -8px color-mix(in srgb, var(--zq-lp-primary) 30%, rgba(15, 23, 42, 0.15));
  transform: translateY(-1px);
}

.zq-lp-faq-item[open] {
  border-color: color-mix(in srgb, var(--zq-lp-primary) 55%, var(--zq-lp-c-bc, var(--zq-border)));
  box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--zq-lp-primary) 35%, rgba(15, 23, 42, 0.18));
}

.zq-lp-faq-item[open]::before {
  opacity: 1;
}

.zq-lp-faq-item summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--zq-text);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  transition: color 0.15s ease;
}

.zq-lp-faq-item:hover summary,
.zq-lp-faq-item[open] summary {
  color: var(--zq-lp-primary);
}

.zq-lp-faq-item summary::-webkit-details-marker {
  display: none;
}

/* Plus/minus drawn with two centered bars rather than a "+" glyph, whose
   font metrics sit it off-center inside the circle. */
.zq-lp-faq-item summary::after {
  content: '';
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background:
    linear-gradient(var(--zq-lp-primary), var(--zq-lp-primary)) center / 11px 2px no-repeat,
    linear-gradient(var(--zq-lp-primary), var(--zq-lp-primary)) center / 2px 11px no-repeat,
    color-mix(in srgb, var(--zq-lp-primary) 10%, var(--zq-lp-light));
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--zq-lp-primary) 16%, transparent);
  flex-shrink: 0;
  transition: transform 0.2s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.zq-lp-faq-item:hover summary::after {
  transform: scale(1.06);
}

.zq-lp-faq-item[open] summary::after {
  background:
    linear-gradient(#fff, #fff) center / 11px 2px no-repeat,
    linear-gradient(135deg, var(--zq-lp-primary), var(--zq-lp-secondary));
  box-shadow: 0 6px 16px -4px color-mix(in srgb, var(--zq-lp-primary) 55%, transparent);
  transform: rotate(180deg);
}

.zq-lp-faq-item p {
  margin: 1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--zq-lp-primary) 12%, var(--zq-border));
  color: var(--zq-muted);
  font-size: 0.98rem;
  line-height: 1.7;
  animation: zq-lp-faq-reveal 0.25s ease;
}

@keyframes zq-lp-faq-reveal {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .zq-lp-faq-item,
  .zq-lp-faq-item summary::after {
    transition: none;
  }

  .zq-lp-faq-item p {
    animation: none;
  }
}

/* --- Landing page templates: each [data-lp-template] gives the shared
   component system above a distinct character (radius scale, shadow depth,
   hero treatment) purely through the design tokens declared on .zq-lp, plus
   a handful of small bespoke rules. "modern" is the default and needs no
   override block. --- */

/* Minimal — flat, quiet, generous whitespace. No gradients, no glow. */
[data-lp-template="minimal"] {
  --zq-lp-hero-bg: var(--zq-surface);
  --zq-lp-blob-opacity: 0;
  --zq-lp-radius-xl: 12px;
  --zq-lp-radius-lg: 10px;
  --zq-lp-radius-md: 8px;
  --zq-lp-card-shadow: none;
  --zq-lp-heading-weight: 700;
}

[data-lp-template="minimal"] .zq-lp-hero {
  border: 1px solid var(--zq-border);
}

[data-lp-template="minimal"] .zq-lp .buy-button {
  box-shadow: none;
}

[data-lp-template="minimal"] .zq-lp-final-cta {
  background: var(--zq-lp-dark);
  box-shadow: none;
}

/* Bold — vivid, chunky, high-contrast. Hero is a full color block.
   Primary/Secondary Color are admin-chosen and can be light (e.g. yellow),
   so white text on the raw gradient isn't reliably readable. A light wash
   over the gradient keeps it soft/pastel instead, with solid black bold
   text on top — that stays crisp no matter which colors are picked,
   without needing to compute color lightness. */
[data-lp-template="bold"] {
  --zq-lp-hero-bg: linear-gradient(rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.72)), linear-gradient(135deg, var(--zq-lp-primary), var(--zq-lp-secondary));
  --zq-lp-hero-text: #111827;
  --zq-lp-hero-desc-color: #1f2937;
  --zq-lp-blob-opacity: 0.3;
  --zq-lp-radius-xl: 32px;
  --zq-lp-radius-lg: 26px;
  --zq-lp-radius-md: 18px;
  --zq-lp-heading-weight: 900;
}

[data-lp-template="bold"] .zq-lp-hero-content h1,
[data-lp-template="bold"] .zq-lp-hero-content p {
  font-weight: 700;
  color: #111827;
}

[data-lp-template="bold"] .zq-lp-tagline-pill {
  font-weight: 700;
}

[data-lp-template="bold"] .zq-lp-save {
  color: #15803d;
  font-weight: 700;
}

[data-lp-template="bold"].zq-lp .zq-price-selling {
  color: #111827;
}

[data-lp-template="bold"].zq-lp .zq-price-regular {
  color: rgba(17, 24, 39, 0.55);
}

[data-lp-template="bold"].zq-lp .zq-discount {
  background: rgba(17, 24, 39, 0.1);
  color: #111827;
  font-weight: 700;
}

[data-lp-template="bold"] .zq-lp-hero-mini-trust {
  color: #111827;
  font-weight: 700;
}

[data-lp-template="bold"] .zq-lp-mini-trust-check {
  background: var(--zq-lp-primary);
  color: #fff;
}

/* "Add to Cart" otherwise stays the site's default indigo outline button
   (unrelated to the landing page's own theme colors) — on Bold's now-light
   hero wash it already reads fine, so no override is needed here. */

/* Premium — dark, elegant, refined. */
[data-lp-template="premium"] {
  --zq-lp-hero-bg: linear-gradient(160deg, var(--zq-lp-dark), #05050a);
  --zq-lp-hero-text: #F8F5FF;
  --zq-lp-hero-desc-color: rgba(248, 245, 255, 0.72);
  --zq-lp-blob-opacity: 0.28;
  --zq-lp-heading-weight: 700;
}

[data-lp-template="premium"] .zq-lp-hero-content h1 {
  letter-spacing: -0.01em;
}

[data-lp-template="premium"] .zq-lp-eyebrow {
  background: linear-gradient(135deg, var(--zq-lp-primary), var(--zq-lp-secondary));
}

[data-lp-template="premium"] .zq-lp-tagline-pill {
  background: rgba(255, 255, 255, 0.1);
  color: #F8F5FF;
}

[data-lp-template="premium"].zq-lp .zq-price-selling {
  color: #fff;
}

[data-lp-template="premium"].zq-lp .zq-price-regular {
  color: rgba(255, 255, 255, 0.55);
}

[data-lp-template="premium"] .zq-lp-save {
  color: #B9F6CA;
}

[data-lp-template="premium"] .zq-lp-hero-mini-trust {
  color: rgba(255, 255, 255, 0.85);
}

[data-lp-template="premium"] .zq-lp-image-frame::before {
  background: radial-gradient(circle at 50% 35%, var(--zq-lp-secondary) 0%, transparent 62%);
}

/* Education — warm, playful, encouraging. Rounder everything. */
[data-lp-template="education"] {
  --zq-lp-radius-xl: 30px;
  --zq-lp-radius-lg: 24px;
  --zq-lp-radius-md: 16px;
  --zq-lp-blob-opacity: 0.22;
}

[data-lp-template="education"] .zq-lp-benefit-card,
[data-lp-template="education"] .zq-lp-included-card,
[data-lp-template="education"] .zq-lp-audience-card {
  border-style: dashed;
  border-width: 1.5px;
}

/* Software / Digital Product — techy, crisp, subtle grid texture. */
[data-lp-template="software"],
[data-lp-template="digital_product"] {
  --zq-lp-radius-xl: 16px;
  --zq-lp-radius-lg: 12px;
  --zq-lp-radius-md: 10px;
  --zq-lp-blob-opacity: 0.1;
}

[data-lp-template="software"] .zq-lp-hero,
[data-lp-template="digital_product"] .zq-lp-hero {
  background-image: var(--zq-lp-hero-bg), radial-gradient(var(--zq-border) 1px, transparent 1px);
  background-size: cover, 18px 18px;
}

[data-lp-template="software"] .zq-lp-spec-label,
[data-lp-template="software"] .zq-lp-spec-value,
[data-lp-template="digital_product"] .zq-lp-spec-label,
[data-lp-template="digital_product"] .zq-lp-spec-value {
  font-family: 'Courier New', Courier, monospace;
}

/* Professional — structured, crisp corporate; distinct from modern's
   softer gradient hero by using a bordered flat panel instead. */
[data-lp-template="professional"] {
  --zq-lp-hero-bg: var(--zq-surface);
  --zq-lp-radius-xl: 20px;
  --zq-lp-radius-lg: 16px;
  --zq-lp-radius-md: 12px;
  --zq-lp-blob-opacity: 0.12;
}

[data-lp-template="professional"] .zq-lp-hero {
  border: 1px solid var(--zq-border);
}

[data-lp-template="minimal"] .zq-lp-hero,
[data-lp-template="professional"] .zq-lp-hero {
  border-left: 4px solid var(--zq-lp-primary);
}

/* Dark Mode — the SaaS/tech look widely used by Linear, Vercel, GitHub,
   etc. Redefining the shared surface/text/border/muted tokens (not just
   the landing-page-only tokens) re-themes every existing component —
   cards, list text, spec rows, FAQ — without touching each one, since
   they already read colors from these variables rather than hardcoding
   them. */
[data-lp-template="dark"] {
  --zq-surface: #12151F;
  --zq-text: #F1F3F8;
  --zq-muted: #9AA3B8;
  --zq-border: rgba(255, 255, 255, 0.1);
  --zq-lp-hero-bg: linear-gradient(160deg, #0B0F1A, #05070C);
  --zq-lp-hero-text: #F5F7FF;
  --zq-lp-hero-desc-color: rgba(245, 247, 255, 0.72);
  --zq-lp-card-shadow: 0 10px 26px rgba(0, 0, 0, 0.45);
  --zq-lp-blob-opacity: 0.3;
  color: var(--zq-text);
}

[data-lp-template="dark"] .zq-lp-hero {
  border: 1px solid rgba(255, 255, 255, 0.12);
}

/* Neo-Brutalist — thick black borders, hard offset shadows, flat colors,
   zero radius. A currently very popular trend among creator/indie tools. */
[data-lp-template="brutalist"] {
  --zq-lp-radius-xl: 0px;
  --zq-lp-radius-lg: 0px;
  --zq-lp-radius-md: 0px;
  --zq-lp-card-shadow: 6px 6px 0 #000;
  --zq-lp-blob-opacity: 0;
  --zq-lp-heading-weight: 900;
}

[data-lp-template="brutalist"] .zq-lp-hero {
  background: var(--zq-lp-light);
  border: 3px solid #000;
  box-shadow: 8px 8px 0 #000;
}

[data-lp-template="brutalist"] .zq-lp-left-outline,
[data-lp-template="brutalist"] .zq-lp-benefit-card,
[data-lp-template="brutalist"] .zq-lp-included-card,
[data-lp-template="brutalist"] .zq-lp-audience-card,
[data-lp-template="brutalist"] .zq-lp-timeline-step,
[data-lp-template="brutalist"] .zq-lp-review-card,
[data-lp-template="brutalist"] .zq-lp-faq-item {
  border: 2px solid #000;
}

[data-lp-template="brutalist"] .zq-lp .buy-button {
  border: 3px solid #000;
  color: #000;
  text-shadow: none;
}

/* Playful — bright, bouncy, very rounded; the Duolingo-ish course/app
   look. A flat colored offset shadow instead of a blur reads as a
   "sticker", which suits the friendlier tone. */
[data-lp-template="playful"] {
  --zq-lp-radius-xl: 36px;
  --zq-lp-radius-lg: 28px;
  --zq-lp-radius-md: 20px;
  --zq-lp-card-shadow: 0 6px 0 color-mix(in srgb, var(--zq-lp-primary) 30%, transparent);
  --zq-lp-blob-opacity: 0.3;
  --zq-lp-heading-weight: 800;
}

[data-lp-template="playful"] .zq-section h2.zq-lp-heading-strip {
  border-radius: 999px;
}

[data-lp-template="playful"] .zq-lp-left-outline {
  border: 2px solid color-mix(in srgb, var(--zq-lp-primary) 30%, var(--zq-border));
}

[data-lp-template="playful"] .zq-lp .buy-button {
  border-radius: 999px;
}

/* Editorial — magazine-style: serif headline, hairline rules, no cards,
   generous whitespace. Uses the system serif stack, not a web font, so
   it needs no extra network request. */
[data-lp-template="editorial"] {
  --zq-lp-radius-xl: 4px;
  --zq-lp-radius-lg: 4px;
  --zq-lp-radius-md: 2px;
  --zq-lp-card-shadow: none;
  --zq-lp-blob-opacity: 0;
  --zq-lp-hero-bg: var(--zq-surface);
}

[data-lp-template="editorial"] .zq-lp-hero-content h1 {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
}

[data-lp-template="editorial"] .zq-lp-hero {
  border: none;
  border-top: 3px solid var(--zq-lp-dark);
  border-radius: 0;
}

[data-lp-template="editorial"] .zq-lp .buy-button {
  border-radius: 2px;
}

/* Glass — frosted, translucent panels over a soft gradient wash; the
   glassmorphism look common to Web3/creator sites. Degrades gracefully
   to a plain translucent panel where backdrop-filter isn't supported. */
[data-lp-template="glass"] {
  --zq-lp-radius-xl: 24px;
  --zq-lp-radius-lg: 18px;
  --zq-lp-radius-md: 14px;
  --zq-lp-card-shadow: 0 8px 32px rgba(31, 38, 135, 0.15);
  --zq-lp-blob-opacity: 0.35;
}

[data-lp-template="glass"] .zq-lp-hero {
  background: linear-gradient(135deg, color-mix(in srgb, var(--zq-lp-primary) 18%, var(--zq-lp-light)), color-mix(in srgb, var(--zq-lp-secondary) 14%, var(--zq-surface)));
}

[data-lp-template="glass"] .zq-lp-left-outline {
  background: color-mix(in srgb, var(--zq-surface) 55%, transparent);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

[data-lp-template="glass"] .zq-section h2.zq-lp-heading-strip {
  background: color-mix(in srgb, var(--zq-lp-primary) 55%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Section heading strip — a full-width colored banner behind key section
   titles (Benefits, Included, Audience, About, How It Works, Specs, FAQ).
   Background comes from the product's own theme color (--zq-lp-primary,
   which is either the auto-picked palette or the admin's manual override),
   so it's "user defined" per product rather than a fixed color. */
.zq-section h2.zq-lp-heading-strip {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--zq-lp-primary), var(--zq-lp-secondary));
  color: #fff;
  text-align: center;
  margin: 0 0 1.5rem;
  padding: 0.5rem 1.5rem;
  border-radius: var(--zq-lp-radius-md);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: 0.015em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
  box-shadow: 0 16px 32px -10px color-mix(in srgb, var(--zq-lp-primary) 55%, transparent);
}

.zq-section h2.zq-lp-heading-strip::before,
.zq-section h2.zq-lp-heading-strip::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  pointer-events: none;
}

.zq-section h2.zq-lp-heading-strip::before {
  width: 110px;
  height: 110px;
  top: -60px;
  right: -30px;
}

.zq-section h2.zq-lp-heading-strip::after {
  width: 70px;
  height: 70px;
  bottom: -42px;
  left: 8%;
  z-index: 0;
}

/* --- Per-template section styling: every content section below the hero
   (Challenge, Benefits, Included, Samples, Audience, About, How It Works,
   Specs, Reviews, FAQ) shares the same two building blocks — the heading
   strip and the .zq-lp-left-outline card — so re-skinning those two
   selectors per template carries the template's identity through the
   whole page, not just the hero. Each override below replaces the
   "modern" gradient-pill/tinted-card defaults with that template's own
   heading and card treatment. */

/* Professional — a flat, solid-color banner (no gradient, no blobs) reads
   as corporate rather than playful, but it's still a proper filled strip. */
[data-lp-template="professional"] .zq-section h2.zq-lp-heading-strip {
  background: var(--zq-lp-primary);
  text-align: left;
  box-shadow: none;
}

[data-lp-template="professional"] .zq-section h2.zq-lp-heading-strip::before,
[data-lp-template="professional"] .zq-section h2.zq-lp-heading-strip::after {
  display: none;
}

[data-lp-template="professional"] .zq-lp-left-outline {
  background: var(--zq-surface);
  border: 1px solid var(--zq-border);
  border-left: none;
}

/* Minimal — quieter than the other templates, but still a visible strip:
   a light tint fill with colored text instead of a heavy gradient block. */
[data-lp-template="minimal"] .zq-section h2.zq-lp-heading-strip {
  background: color-mix(in srgb, var(--zq-lp-primary) 10%, var(--zq-surface));
  color: var(--zq-lp-primary);
  text-align: left;
  box-shadow: none;
  text-shadow: none;
  font-weight: 700;
  letter-spacing: 0;
}

[data-lp-template="minimal"] .zq-section h2.zq-lp-heading-strip::before,
[data-lp-template="minimal"] .zq-section h2.zq-lp-heading-strip::after {
  display: none;
}

[data-lp-template="minimal"] .zq-lp-left-outline {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0.75rem 0 0;
}

/* Bold — solid color block, no gradient, no soft blobs, thicker accent. */
[data-lp-template="bold"] .zq-section h2.zq-lp-heading-strip {
  background: var(--zq-lp-primary);
  box-shadow: none;
}

[data-lp-template="bold"] .zq-section h2.zq-lp-heading-strip::before,
[data-lp-template="bold"] .zq-section h2.zq-lp-heading-strip::after {
  display: none;
}

[data-lp-template="bold"] .zq-lp-left-outline {
  background: color-mix(in srgb, var(--zq-lp-primary) 12%, var(--zq-surface));
  border-left-width: 6px;
}

/* Education — soft, friendly, rounded; matches the dashed item cards
   already used for Benefits/Included/Audience under this template. */
[data-lp-template="education"] .zq-section h2.zq-lp-heading-strip {
  background: color-mix(in srgb, var(--zq-lp-primary) 14%, var(--zq-surface));
  color: var(--zq-lp-primary);
  text-shadow: none;
  box-shadow: none;
}

[data-lp-template="education"] .zq-section h2.zq-lp-heading-strip::before,
[data-lp-template="education"] .zq-section h2.zq-lp-heading-strip::after {
  display: none;
}

[data-lp-template="education"] .zq-lp-left-outline {
  border-left: none;
  border: 1.5px dashed color-mix(in srgb, var(--zq-lp-primary) 45%, var(--zq-border));
}

/* Premium — elegant, centered, still a filled strip but a slimmer one
   with tighter padding and no blob decoration, so it reads as refined
   rather than the "modern" template's bigger, busier banner. */
[data-lp-template="premium"] .zq-section h2.zq-lp-heading-strip {
  background: linear-gradient(135deg, var(--zq-lp-primary), var(--zq-lp-secondary));
  text-align: center;
  padding: 0.4rem 1.5rem;
  letter-spacing: 0.01em;
}

[data-lp-template="premium"] .zq-section h2.zq-lp-heading-strip::before,
[data-lp-template="premium"] .zq-section h2.zq-lp-heading-strip::after {
  display: none;
}

[data-lp-template="premium"] .zq-lp-left-outline {
  background: var(--zq-surface);
  border: 1px solid var(--zq-border);
  border-left: none;
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.06);
}

/* Software / Digital Product — techy, crisp: a solid flat banner with
   sharper corners instead of "modern"'s soft gradient + blobs. */
[data-lp-template="software"] .zq-section h2.zq-lp-heading-strip,
[data-lp-template="digital_product"] .zq-section h2.zq-lp-heading-strip {
  background: var(--zq-lp-primary);
  text-align: left;
  border-radius: 4px;
  box-shadow: none;
  text-shadow: none;
}

[data-lp-template="software"] .zq-section h2.zq-lp-heading-strip::before,
[data-lp-template="software"] .zq-section h2.zq-lp-heading-strip::after,
[data-lp-template="digital_product"] .zq-section h2.zq-lp-heading-strip::before,
[data-lp-template="digital_product"] .zq-section h2.zq-lp-heading-strip::after {
  display: none;
}

[data-lp-template="software"] .zq-lp-left-outline,
[data-lp-template="digital_product"] .zq-lp-left-outline {
  background: var(--zq-surface);
  border: 1px solid var(--zq-border);
  border-left: none;
}

/* Neo-Brutalist — flat color fill, square corners, thick black border,
   hard offset shadow instead of the soft gradient + blobs. */
[data-lp-template="brutalist"] .zq-section h2.zq-lp-heading-strip {
  background: var(--zq-lp-primary);
  color: #000;
  text-shadow: none;
  border: 3px solid #000;
  border-radius: 0;
  box-shadow: 5px 5px 0 #000;
}

[data-lp-template="brutalist"] .zq-section h2.zq-lp-heading-strip::before,
[data-lp-template="brutalist"] .zq-section h2.zq-lp-heading-strip::after {
  display: none;
}

/* Editorial — no filled banner at all, just serif text between hairline
   rules, the way a magazine section divider reads. */
[data-lp-template="editorial"] .zq-section h2.zq-lp-heading-strip {
  background: none;
  color: var(--zq-lp-dark);
  text-align: left;
  padding: 0.5rem 0;
  border-radius: 0;
  border-top: 1px solid var(--zq-border);
  border-bottom: 1px solid var(--zq-border);
  box-shadow: none;
  text-shadow: none;
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
  font-weight: 700;
  letter-spacing: 0;
}

[data-lp-template="editorial"] .zq-section h2.zq-lp-heading-strip::before,
[data-lp-template="editorial"] .zq-section h2.zq-lp-heading-strip::after {
  display: none;
}

[data-lp-template="editorial"] .zq-lp-left-outline {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0.75rem 0 0;
}

.zq-lp-lightbox-trigger {
  cursor: zoom-in;
}

.zq-lightbox {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(15, 23, 42, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.zq-lightbox[hidden] {
  display: none;
}

.zq-lightbox img,
.zq-lightbox video {
  max-width: 100%;
  max-height: 100%;
  border-radius: 12px;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
}

.zq-lightbox-close {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  font-size: 1.75rem;
  line-height: 1;
  cursor: pointer;
}

.zq-lightbox-close:hover {
  background: rgba(255, 255, 255, 0.28);
}

.zq-lp-sample-intro {
  color: #000;
  font-weight: 700;
  margin: -0.5rem 0 1rem;
}

.zq-lp-sample-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

@media (min-width: 640px) {
  .zq-lp-sample-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 1000px) {
  .zq-lp-sample-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.zq-lp-sample-thumb {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--zq-lp-radius-md);
  border: 1.5px solid var(--zq-border);
  box-shadow: var(--zq-lp-card-shadow);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.zq-lp-sample-thumb:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.12);
}

/* Sample video clip: the wrapper carries the same card look as an image
   thumb (border/radius/shadow, above); the video itself fills it and the
   mute toggle floats in the corner. */
.zq-lp-sample-video-wrap {
  position: relative;
  overflow: hidden;
  /* Both the scrolling track (flex) and the static layout (grid) stretch
     items to fill the row's height by default, which silently overrides
     the aspect-ratio inherited from .zq-lp-sample-thumb — the video then
     renders at its own shorter natural height inside a taller stretched
     box, leaving blank space below it. Opting out of that stretch is what
     makes the aspect-ratio (and the video filling it) actually apply. */
  align-self: start;
}

.zq-lp-sample-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.zq-lp-sample-mute-btn {
  position: absolute;
  right: 0.5rem;
  bottom: 0.5rem;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 50%;
  background: rgba(15, 23, 42, 0.55);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}

.zq-lp-sample-mute-btn:hover {
  background: rgba(15, 23, 42, 0.75);
  transform: scale(1.08);
}

.zq-lp-sample-mute-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* --- Sample Pages auto-scroll (more than 4 items): a looping marquee
   instead of a static grid, so a large set of previews stays compact and
   attention-grabbing rather than sprawling down the page. --- */

.zq-lp-sample-scroll-wrap {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.zq-lp-sample-track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: zq-sample-scroll 32s linear infinite;
}

.zq-lp-sample-track:hover,
.zq-lp-sample-track.is-paused {
  animation-play-state: paused;
}

.zq-lp-sample-track .zq-lp-sample-thumb {
  flex: 0 0 auto;
  width: 200px;
}

@keyframes zq-sample-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .zq-lp-sample-track {
    animation: none;
    overflow-x: auto;
  }
}

/* --- Reviews auto-scroll (more than 4 reviews): same looping-marquee
   treatment as Sample Pages, so a long review list stays compact. --- */

.zq-lp-review-scroll-wrap {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}

.zq-lp-review-track {
  display: flex;
  gap: 1rem;
  width: max-content;
  animation: zq-sample-scroll 38s linear infinite;
}

.zq-lp-review-track:hover,
.zq-lp-review-track.is-paused {
  animation-play-state: paused;
}

.zq-lp-review-track .zq-lp-review-card {
  flex: 0 0 auto;
  width: 320px;
}

@media (prefers-reduced-motion: reduce) {
  .zq-lp-review-track {
    animation: none;
    overflow-x: auto;
  }
}

/* --- Checkout: order summary, order bump, cross-sell --- */

.zq-order-summary-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}

.zq-checkout-summary-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.05rem;
  margin: 0;
}

.zq-order-summary-icon {
  color: var(--zq-primary);
  display: inline-flex;
}

.zq-order-summary-icon svg {
  width: 18px;
  height: 18px;
}

.zq-order-summary-count {
  color: var(--zq-muted);
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
}

.zq-order-items {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.zq-order-item {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}

.zq-order-item-thumb {
  width: 56px;
  height: 56px;
  border-radius: 10px;
  background: var(--zq-bg);
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--zq-muted);
}

.zq-order-item-thumb-lg {
  width: 90px;
  height: 90px;
  border-radius: 14px;
}

.zq-order-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.zq-order-item-thumb-placeholder svg {
  width: 22px;
  height: 22px;
}

.zq-order-item-info {
  flex: 1;
  min-width: 0;
}

.zq-order-item-title {
  margin: 0 0 0.2rem;
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--zq-text);
  line-height: 1.35;
}

.zq-order-item-sub {
  margin: 0 0 0.35rem;
  font-size: 0.82rem;
  color: var(--zq-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.zq-order-item-badge {
  margin: 0;
  font-size: 0.75rem;
  color: var(--zq-primary);
  font-weight: 600;
}

.zq-order-item-price {
  font-weight: 700;
  color: var(--zq-text);
  white-space: nowrap;
  flex-shrink: 0;
}

.zq-checkout-divider {
  height: 1px;
  background: var(--zq-border);
  margin: 1.1rem 0;
}

.zq-checkout-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.35rem 0;
  font-size: 0.92rem;
}

.zq-checkout-subtotal span {
  color: var(--zq-muted);
}

.zq-checkout-row-bump span:first-child {
  color: var(--zq-primary);
  font-weight: 600;
}

.zq-checkout-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 1.05rem;
  font-weight: 700;
}

.zq-checkout-total strong {
  font-size: 1.5rem;
  color: var(--zq-primary);
}

.zq-checkout-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  height: 56px;
  text-align: center;
  border: none;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  padding: 0 1.5rem;
  margin-top: 1.25rem;
  border-radius: 12px;
  cursor: pointer;
  background: linear-gradient(135deg, var(--zq-primary), var(--zq-secondary));
  box-shadow: 0 4px 14px rgba(108, 77, 255, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.zq-checkout-submit svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.zq-checkout-submit:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(108, 77, 255, 0.45);
}

.zq-checkout-submit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}

.zq-checkout-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.9rem;
  color: var(--zq-muted);
  font-size: 0.78rem;
  margin-top: 1rem;
}

.zq-checkout-trust span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.zq-checkout-trust svg {
  width: 14px;
  height: 14px;
  color: var(--zq-primary);
}

@media (max-width: 480px) {
  .zq-checkout-trust {
    gap: 0.6rem 1rem;
  }
}

/* Order Bump: a single highlighted card, checkbox unchecked by default,
   visually distinct from a normal product but not aggressive. */
.zq-order-bump-wrap {
  margin-bottom: 1.25rem;
}

.zq-bump-card {
  position: relative;
  background: linear-gradient(160deg, rgba(108, 77, 255, 0.06), var(--zq-surface));
  border: 1.5px dashed var(--zq-primary);
  border-radius: 16px;
  padding: 1.25rem;
}

.zq-bump-badge {
  display: inline-block;
  background: var(--zq-primary);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  margin-bottom: 0.85rem;
}

.zq-bump-body {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.zq-bump-image {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 10px;
  flex-shrink: 0;
}

.zq-bump-info {
  flex: 1;
  min-width: 0;
}

.zq-bump-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  margin: 0;
}

.zq-bump-label input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-width: 20px;
  cursor: pointer;
  accent-color: var(--zq-primary);
}

.zq-bump-title {
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--zq-text);
}

.zq-bump-desc {
  margin: 0.4rem 0 0.6rem;
  font-size: 0.85rem;
  color: var(--zq-muted);
  line-height: 1.5;
}

.zq-bump-price-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.zq-bump-regular {
  text-decoration: line-through;
  color: var(--zq-muted);
  font-size: 0.85rem;
}

.zq-bump-price {
  font-weight: 800;
  font-size: 1.1rem;
  color: var(--zq-primary);
}

.zq-bump-savings {
  color: var(--zq-success);
  font-weight: 600;
  font-size: 0.8rem;
}

/* Cross-Sell: compact related-product cards, 2-3 max. */
.zq-crosssell-wrap {
  margin-bottom: 1.25rem;
}

.zq-crosssell-heading {
  font-size: 1rem;
  margin: 0 0 0.85rem;
}

.zq-crosssell-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.85rem;
}

@media (max-width: 640px) {
  .zq-crosssell-grid {
    grid-auto-flow: column;
    grid-auto-columns: minmax(150px, 1fr);
    overflow-x: auto;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
  }
}

.zq-crosssell-card {
  background: var(--zq-surface);
  border: 1px solid var(--zq-border);
  border-radius: 14px;
  padding: 0.85rem;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05);
}

.zq-crosssell-image,
.zq-crosssell-image-placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 10px;
  background: var(--zq-bg);
  margin-bottom: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
}

.zq-crosssell-body h4 {
  margin: 0 0 0.25rem;
  font-size: 0.88rem;
  line-height: 1.3;
}

.zq-crosssell-body p {
  margin: 0 0 0.6rem;
  font-weight: 700;
  color: var(--zq-primary);
  font-size: 0.9rem;
}

.zq-crosssell-price-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.2rem 0.4rem;
}

.zq-crosssell-regular {
  text-decoration: line-through;
  color: var(--zq-muted);
  font-weight: 500;
  font-size: 0.78rem;
}

.zq-crosssell-off {
  color: var(--zq-success);
  font-weight: 600;
  font-size: 0.72rem;
}

.zq-crosssell-btn {
  width: 100%;
  min-height: 44px;
  border: 1.5px solid var(--zq-primary);
  background: var(--zq-surface);
  color: var(--zq-primary);
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.zq-crosssell-btn:hover {
  background: rgba(108, 77, 255, 0.08);
}

.zq-crosssell-btn-added {
  background: var(--zq-success);
  border-color: var(--zq-success);
  color: #fff;
}

/* --- Landing: custom Card Color (Design → Card Color) ---
   One color for every card surface — hero, trust row, content sections
   and the items inside them — on any template. The final "Ready to get
   started?" banner keeps its gradient. data-lp-card-tone (light/dark) is
   worked out server-side from the color's luminance so text stays
   readable either way. Selectors start with .zq-lp[data-lp-card-tone]
   so they outrank each template's own [data-lp-template] rules. */
.zq-lp[data-lp-card-tone] {
  --zq-lp-hero-bg: var(--zq-lp-card-bg);
  --zq-lp-card-inner: color-mix(in srgb, var(--zq-lp-card-bg) 45%, #fff);
}

.zq-lp[data-lp-card-tone="light"] {
  --zq-lp-hero-text: #111827;
  --zq-lp-hero-desc-color: #475569;
}

.zq-lp[data-lp-card-tone="dark"] {
  --zq-lp-card-inner: color-mix(in srgb, var(--zq-lp-card-bg) 86%, #fff);
  --zq-lp-hero-text: #F8FAFC;
  --zq-lp-hero-desc-color: #CBD5E1;
}

/* Text tokens, scoped to card surfaces (restores dark text on the "dark"
   template when a light card color is chosen, and vice versa). */
.zq-lp[data-lp-card-tone="light"] :is(.zq-lp-hero, .zq-lp-trust-strip, .zq-lp-left-outline) {
  --zq-text: #182033;
  --zq-muted: #64748B;
  --zq-border: #E6E9F2;
}

.zq-lp[data-lp-card-tone="dark"] :is(.zq-lp-hero, .zq-lp-trust-strip, .zq-lp-left-outline) {
  --zq-text: #F1F5F9;
  --zq-muted: #CBD5E1;
  --zq-border: rgba(255, 255, 255, 0.16);
  color: var(--zq-text);
}

/* Outer surfaces: the exact chosen color. */
.zq-lp[data-lp-card-tone] .zq-lp-trust-strip,
.zq-lp[data-lp-card-tone] .zq-lp-left-outline {
  background: var(--zq-lp-card-bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Templates that paint the hero directly instead of via --zq-lp-hero-bg. */
.zq-lp[data-lp-card-tone][data-lp-template="brutalist"] .zq-lp-hero,
.zq-lp[data-lp-card-tone][data-lp-template="glass"] .zq-lp-hero {
  background: var(--zq-lp-card-bg);
}

/* Inner items: a lighter step of the same color so they still read as
   separate cards on top of their section. */
.zq-lp[data-lp-card-tone] .zq-lp-readable-prose p,
.zq-lp[data-lp-card-tone] .zq-lp-benefit-card,
.zq-lp[data-lp-card-tone] .zq-lp-included-card,
.zq-lp[data-lp-card-tone] .zq-lp-audience-card,
.zq-lp[data-lp-card-tone] .zq-lp-timeline-step,
.zq-lp[data-lp-card-tone] .zq-lp-spec-row,
.zq-lp[data-lp-card-tone] .zq-lp-review-card,
.zq-lp[data-lp-card-tone] .zq-lp-faq-item {
  background: var(--zq-lp-card-inner);
}

/* Hero bits that some templates hard-code for their own background. */
.zq-lp[data-lp-card-tone] .zq-lp-hero .zq-lp-hero-desc,
.zq-lp[data-lp-card-tone] .zq-lp-hero .zq-subtitle {
  color: var(--zq-lp-hero-text);
}

.zq-lp[data-lp-card-tone] .zq-lp-hero .zq-lp-hero-mini-trust {
  color: var(--zq-text);
}

.zq-lp[data-lp-card-tone] .zq-lp-hero .zq-price-regular {
  color: var(--zq-muted);
}

.zq-lp[data-lp-card-tone="light"] .zq-lp-hero .zq-price-selling {
  color: var(--zq-lp-primary);
}

.zq-lp[data-lp-card-tone="light"] .zq-lp-hero .zq-lp-tagline-pill {
  background: rgba(17, 24, 39, 0.08);
  color: #111827;
}

.zq-lp[data-lp-card-tone="dark"] .zq-lp-hero .zq-price-selling {
  color: #fff;
}

.zq-lp[data-lp-card-tone="dark"] .zq-lp-hero .zq-lp-tagline-pill {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.zq-lp[data-lp-card-tone="dark"] .zq-lp-hero .zq-secondary-btn {
  border-color: #fff;
  color: #fff;
}

/* Floating image badges sit on their own white pill, so keep dark text. */
.zq-lp[data-lp-card-tone] .zq-lp-hero .zq-lp-float-badge {
  color: #182033;
}

/* ==========================================================================
   Landing-page standards layer — applies to every landing template so
   typography, spacing, CTA size, reading width and accessibility stay
   consistent regardless of theme. Themes only change colour/graphics.
   ========================================================================== */
.zq-product.zq-lp {
  overflow-x: clip;
}

.zq-lp img,
.zq-lp video {
  max-width: 100%;
  height: auto;
}

.zq-product.zq-lp .zq-lp-hero-content h1 {
  font-size: clamp(2rem, 1.2rem + 3vw, 3.25rem);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.zq-product.zq-lp .zq-lp-hero-desc,
.zq-product.zq-lp .zq-subtitle {
  max-width: 40rem;
  line-height: 1.6;
}

.zq-product.zq-lp .zq-section {
  margin: clamp(2.5rem, 6vw, 4.5rem) 0;
}

.zq-product.zq-lp .zq-section h2.zq-lp-heading-strip {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  line-height: 1.25;
  overflow-wrap: anywhere;
}

.zq-product.zq-lp .zq-lp-final-cta h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem);
  line-height: 1.25;
}

.zq-lp p,
.zq-lp li {
  line-height: 1.6;
}

/* Trust-strip titles were <h3> before the section h2s; they are now plain
   paragraphs so the heading outline stays h1 > h2. */
.zq-lp-trust-title {
  margin: 0 0 0.15rem;
  font-size: 1rem;
  font-weight: 700;
}

/* Small text floor: nothing readable below 14px. */
.zq-lp-eyebrow,
.zq-lp-hero-mini-trust,
.zq-lp-trust-card p,
.zq-lp-review-card cite span {
  font-size: 0.875rem;
}

.zq-lp-mini-trust-check {
  font-size: 0.75rem;
}

/* One consistent, tappable primary CTA (44–48px minimum). */
.zq-lp .zq-cta,
.zq-lp .zq-secondary-btn,
.zq-sticky-cta .zq-cta {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.zq-lp-faq-item summary {
  min-height: 48px;
}

.zq-lp a:focus-visible,
.zq-lp button:focus-visible,
.zq-lp summary:focus-visible,
.zq-sticky-cta a:focus-visible,
.zq-lightbox button:focus-visible {
  outline: 3px solid var(--zq-lp-primary, #4f46e5);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .zq-product.zq-lp {
    padding: 1rem;
  }

  .zq-lp .zq-lp-cta-row {
    width: 100%;
    align-items: stretch;
  }

  .zq-lp .zq-lp-cta-main {
    flex-direction: column;
  }

  .zq-product.zq-lp .zq-lp-left-outline {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

/* Bonus "worth" tag and the guarantee callout (optional landing sections). */
.zq-lp-bonus-value {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--zq-lp-primary);
}

.zq-lp-guarantee {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: color-mix(in srgb, var(--zq-lp-primary) 8%, var(--zq-surface));
  border: 1px solid color-mix(in srgb, var(--zq-lp-primary) 25%, var(--zq-border));
  border-radius: var(--zq-lp-radius-lg);
}

.zq-lp-guarantee-icon {
  flex-shrink: 0;
  font-size: 2.25rem;
  line-height: 1;
}

.zq-lp-guarantee h2 {
  margin: 0 0 0.25rem;
  font-size: 1.25rem;
  line-height: 1.25;
}

.zq-lp-guarantee p {
  margin: 0;
  max-width: 46rem;
}

/* Legal/disclaimer notice — deliberately quiet: a faint theme-tinted card,
   smaller type than the rest of the page and a soft, small icon, since it's
   supporting information rather than something meant to compete for
   attention with the sales content above it. It otherwise matches every
   other card on the page (same shadow, same full section width, same
   Card Outline behavior) rather than reading as a one-off element, and its
   tint is a sliver of the theme's own Primary Color, so it automatically
   restyles with the theme without becoming a loud, brand-colored callout. */
/* --- Landing: breadcrumb, hero rating link, "You May Also Like" --- */

.zq-lp-breadcrumb {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0.9rem 1rem 0;
}

.zq-lp-breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.4rem;
  font-size: 0.8rem;
  color: var(--zq-muted);
}

.zq-lp-breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 0;
}

.zq-lp-breadcrumb li + li::before {
  content: "\203A";
  color: #94A3B8;
}

.zq-lp-breadcrumb a {
  color: var(--zq-muted);
  text-decoration: none;
}

.zq-lp-breadcrumb a:hover,
.zq-lp-breadcrumb a:focus-visible {
  color: var(--zq-lp-primary);
  text-decoration: underline;
}

/* Current page: one line, truncated, so long titles don't wrap the trail. */
.zq-lp-breadcrumb li[aria-current] {
  color: var(--zq-text);
  font-weight: 600;
  max-width: 60vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
}

.zq-lp-hero-rating {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0 0 0.6rem;
  font-size: 0.9rem;
  color: var(--zq-muted);
  text-decoration: none;
}

.zq-lp-hero-rating strong {
  color: var(--zq-lp-hero-text, var(--zq-text));
}

.zq-lp-hero-rating:hover span:last-child,
.zq-lp-hero-rating:focus-visible span:last-child {
  text-decoration: underline;
}

/* Five stars filled in proportion to --zq-rating (0–5). */
.zq-lp-hero-stars {
  --zq-fill: calc(var(--zq-rating) / 5 * 100%);
  font-size: 1.05rem;
  letter-spacing: 2px;
  line-height: 1;
  background: linear-gradient(90deg, #F59E0B var(--zq-fill), #D1D5DB var(--zq-fill));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

#zq-reviews {
  scroll-margin-top: 1.5rem;
}

.zq-lp-related {
  position: relative;
  margin-top: 1rem;
}

/* One scrolling row: ~1.2 cards on phones (the next one peeks in to show
   it scrolls), 2.2 on tablets, 4 on desktop. */
.zq-lp-related-track {
  --zq-related-gap: 1rem;
  display: flex;
  gap: var(--zq-related-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 0.25rem;
  scrollbar-width: none;
  padding: 0.25rem 0.25rem 1rem;
}

.zq-lp-related-track::-webkit-scrollbar {
  display: none;
}

.zq-lp-related-track:focus-visible {
  outline: 2px solid var(--zq-lp-primary);
  outline-offset: 2px;
  border-radius: 16px;
}

.zq-lp-related-track > .zq-card {
  flex: 0 0 80%;
  scroll-snap-align: start;
  height: auto;
}

@media (min-width: 600px) {
  .zq-lp-related-track > .zq-card {
    flex-basis: calc((100% - var(--zq-related-gap)) / 2.2);
  }
}

@media (min-width: 1000px) {
  .zq-lp-related-track > .zq-card {
    flex-basis: calc((100% - 3 * var(--zq-related-gap)) / 4);
  }
}

/* Card hover lift would be clipped by the scroll container. */
.zq-lp-related-track > .zq-card:hover {
  transform: none;
}

.zq-lp-related-arrow {
  position: absolute;
  top: 40%;
  z-index: 4;
  width: 42px;
  height: 42px;
  border: 1px solid var(--zq-border);
  border-radius: 50%;
  background: var(--zq-surface);
  color: var(--zq-text);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.15);
  transform: translateY(-50%);
}

.zq-lp-related-arrow[hidden] {
  display: none;
}

.zq-lp-related-arrow:hover,
.zq-lp-related-arrow:focus-visible {
  border-color: var(--zq-lp-primary);
  color: var(--zq-lp-primary);
}

.zq-lp-related-prev {
  left: -10px;
}

.zq-lp-related-next {
  right: -10px;
}

/* Phones: swipe instead of arrows. */
@media (max-width: 640px) {
  .zq-lp-related-arrow {
    display: none;
  }
}

.zq-lp-disclaimer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2rem;
  padding: 1.4rem 1.6rem;
  text-align: center;
  background: var(--zq-lp-c-bg, color-mix(in srgb, var(--zq-lp-primary) 4%, var(--zq-surface)));
  border: var(--zq-lp-c-bw, 1px) var(--zq-lp-c-bs, solid) var(--zq-lp-c-bc, color-mix(in srgb, var(--zq-lp-primary) 14%, var(--zq-border)));
  border-radius: var(--zq-lp-radius-lg);
  box-shadow: var(--zq-lp-card-shadow);
}

.zq-lp-disclaimer-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.zq-lp-disclaimer-icon {
  flex-shrink: 0;
  font-size: 1.05rem;
  line-height: 1;
  opacity: 0.7;
}

.zq-product.zq-lp .zq-lp-disclaimer h2 {
  margin: 0;
  color: var(--zq-text);
  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

.zq-lp-disclaimer p {
  margin: 0;
  max-width: 46rem;
  color: var(--zq-muted);
  font-size: 0.82rem;
  line-height: 1.6;
}

@media (max-width: 640px) {
  .zq-lp-disclaimer {
    padding: 1.15rem 1.25rem;
  }
}

/* Centered hero: the width-capped subtitle/description block must itself be
   centered, otherwise its text is centered inside a left-hugging box. */
.zq-lp-hero-centered .zq-lp-hero-desc,
.zq-lp-hero-centered .zq-subtitle {
  margin-left: auto;
  margin-right: auto;
}

/* Cross-sell cards: titles wrap to different heights, so stretch each card
   and pin its "+ Add" button to the bottom so all buttons line up. */
.zq-crosssell-grid {
  align-items: stretch;
}

.zq-crosssell-card {
  display: flex;
  flex-direction: column;
}

.zq-crosssell-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.zq-crosssell-body .zq-crosssell-btn {
  margin-top: auto;
}

/* ==========================================================================
   Checkout — Contact Information card polish (visual only; markup, field
   names and validation are unchanged).
   ========================================================================== */
.zq-checkout-main .zq-form-card {
  position: relative;
  overflow: hidden;
  padding: 2rem 2rem 1.75rem;
  border: 1px solid color-mix(in srgb, var(--zq-primary) 14%, var(--zq-border));
  border-radius: 20px;
  box-shadow: 0 18px 40px -18px rgba(76, 60, 180, 0.28), 0 2px 8px rgba(24, 32, 51, 0.05);
}

.zq-checkout-main .zq-form-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: linear-gradient(90deg, var(--zq-primary), var(--zq-secondary, #3B82F6));
}

.zq-checkout-main .zq-checkout-card-header {
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--zq-border);
}

.zq-checkout-main .zq-checkout-card-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--zq-primary), var(--zq-secondary, #3B82F6));
  color: #fff;
  box-shadow: 0 10px 20px -6px color-mix(in srgb, var(--zq-primary) 60%, transparent);
}

.zq-checkout-main .zq-checkout-card-icon svg {
  width: 26px;
  height: 26px;
}

.zq-checkout-main .zq-checkout-card-header h2 {
  margin: 0 0 0.15rem;
  font-size: 1.4rem;
  line-height: 1.25;
}

.zq-checkout-main .zq-checkout-card-header .zq-card-subtitle {
  margin: 0;
  color: var(--zq-muted);
  font-size: 0.95rem;
}

.zq-checkout-main .zq-form {
  gap: 0.4rem;
}

.zq-checkout-main .zq-form label:not(.zq-consent-label):not(:has(input[type="checkbox"])) {
  margin-top: 0.6rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--zq-text);
}

.zq-checkout-main .zq-input-icon-wrap input {
  min-height: 52px;
  padding-right: 1rem;
  border: 1.5px solid var(--zq-border);
  border-radius: 12px;
  background: #f8fafc;
  font-size: 1rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

.zq-checkout-main .zq-input-icon-wrap input:hover {
  border-color: color-mix(in srgb, var(--zq-primary) 45%, var(--zq-border));
}

.zq-checkout-main .zq-input-icon-wrap input:focus {
  outline: none;
  background: #fff;
  border-color: var(--zq-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--zq-primary) 16%, transparent);
}

.zq-checkout-main .zq-input-icon-wrap:focus-within .zq-input-icon {
  color: var(--zq-primary);
}

.zq-checkout-main .zq-form label:has(input[type="checkbox"]) {
  margin-top: 1rem;
  padding: 0.85rem 1rem;
  background: color-mix(in srgb, var(--zq-primary) 6%, #fff);
  border: 1px solid color-mix(in srgb, var(--zq-primary) 18%, var(--zq-border));
  border-radius: 12px;
  line-height: 1.5;
}

.zq-checkout-main .zq-form label:has(input[type="checkbox"]) input {
  width: 18px;
  height: 18px;
  accent-color: var(--zq-primary);
}

@media (max-width: 640px) {
  .zq-checkout-main .zq-form-card {
    padding: 1.5rem 1.15rem 1.25rem;
  }
}

/* Cross-sell thumbnails: show the whole cover (no cropping of the top) and
   never let the flex column squash the image. */
.zq-crosssell-image {
  flex-shrink: 0;
  height: auto;
  object-fit: contain;
  object-position: center;
}

/* --------------------------------------------------------------------------
   Optional per-product styling (Design step): card outline + image tone.
   Both are driven by custom properties set on .zq-lp and do nothing unless
   the admin enabled them, so existing pages are unchanged.
   -------------------------------------------------------------------------- */
.zq-lp-image-frame img,
.zq-lp .zq-gallery img,
.zq-lp-hero-slide {
  filter: var(--zq-lp-img-filter, none);
}

.zq-lp[data-lp-outline] :is(.zq-lp-accent-card, .zq-lp-benefit-card, .zq-lp-included-card, .zq-lp-audience-card,
  .zq-lp-review-card, .zq-lp-trust-card, .zq-lp-faq-item, .zq-lp-guarantee, .zq-lp-disclaimer, .zq-lp-image-frame, .zq-lp-spec-row) {
  border-style: var(--zq-lp-outline-s, solid);
  border-color: var(--zq-lp-outline-c, var(--zq-border));
  border-top-width: var(--zq-lp-outline-top, 1px);
  border-right-width: var(--zq-lp-outline-right, 1px);
  border-bottom-width: var(--zq-lp-outline-bottom, 1px);
  border-left-width: var(--zq-lp-outline-left, 1px);
}

/* The hero and section panels keep their own 4px accent stripe on the left,
   so the outline only adds its top/right/bottom edges there — never left,
   which would fight the accent stripe's color and width. */
.zq-lp[data-lp-outline] :is(.zq-lp-hero, .zq-lp-left-outline) {
  border-style: var(--zq-lp-outline-s, solid);
  border-color: var(--zq-lp-outline-c, var(--zq-border));
  border-top-width: var(--zq-lp-outline-top, 1px);
  border-right-width: var(--zq-lp-outline-right, 1px);
  border-bottom-width: var(--zq-lp-outline-bottom, 1px);
}

/* ==========================================================================
   Additional themes: Gradient, Luxury, Nature, Corporate.
   Same structure as the other themes — they only change colour, surface and
   heading style; typography, spacing and CTA size come from the shared
   standards layer above.
   ========================================================================== */

/* Gradient — vivid full-gradient hero with white text (SaaS / creator style). */
[data-lp-template="gradient"] {
  --zq-lp-hero-bg: linear-gradient(135deg, var(--zq-lp-primary), var(--zq-lp-secondary));
  --zq-lp-hero-text: #fff;
  --zq-lp-hero-desc-color: rgba(255, 255, 255, 0.92);
  --zq-lp-blob-opacity: 0.18;
  --zq-lp-heading-weight: 800;
}

[data-lp-template="gradient"] .zq-lp-hero {
  border-color: transparent;
  border-left-color: rgba(255, 255, 255, 0.55);
}

[data-lp-template="gradient"].zq-lp .zq-price-selling,
[data-lp-template="gradient"] .zq-lp-hero-mini-trust {
  color: #fff;
}

[data-lp-template="gradient"].zq-lp .zq-price-regular {
  color: rgba(255, 255, 255, 0.75);
}

[data-lp-template="gradient"] .zq-lp-save {
  color: #D1FAE5;
}

[data-lp-template="gradient"].zq-lp .zq-discount,
[data-lp-template="gradient"] .zq-lp-eyebrow {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

[data-lp-template="gradient"] .zq-lp-mini-trust-check {
  background: #fff;
  color: var(--zq-lp-primary);
}

/* The hero is the same gradient as the default buy button, so invert it. */
[data-lp-template="gradient"] .zq-lp-hero .buy-button {
  background: #fff;
  color: var(--zq-lp-primary);
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.4);
}

[data-lp-template="gradient"] .zq-lp-hero .zq-secondary-btn {
  background: transparent;
  color: #fff;
  border-color: #fff;
}

/* Luxury — warm cream surfaces, serif headings, thin gold rules. */
[data-lp-template="luxury"] {
  --zq-lp-hero-bg: linear-gradient(160deg, #FBF7EF, #F3EBDD);
  --zq-lp-hero-text: #2B2118;
  --zq-lp-hero-desc-color: #5B4B3A;
  --zq-lp-blob-opacity: 0;
  --zq-lp-radius-xl: 6px;
  --zq-lp-radius-lg: 4px;
  --zq-lp-radius-md: 3px;
  --zq-lp-card-shadow: 0 10px 30px rgba(120, 90, 40, 0.08);
  --zq-lp-heading-weight: 600;
}

[data-lp-template="luxury"] .zq-lp-hero {
  border: 1px solid #D9C7A3;
  border-left: 4px solid #B08D3C;
}

[data-lp-template="luxury"] .zq-lp-hero-content h1,
[data-lp-template="luxury"] .zq-section h2.zq-lp-heading-strip,
[data-lp-template="luxury"] .zq-lp-final-cta h2 {
  font-family: Georgia, 'Times New Roman', serif;
}

[data-lp-template="luxury"].zq-lp .zq-price-selling {
  color: #8A6A1F;
}

[data-lp-template="luxury"] .zq-section h2.zq-lp-heading-strip {
  background: none;
  color: #2B2118;
  text-align: center;
  border-radius: 0;
  border-bottom: 1px solid #C9A95C;
  box-shadow: none;
  text-shadow: none;
  font-weight: 600;
  letter-spacing: 0.02em;
}

[data-lp-template="luxury"] .zq-section h2.zq-lp-heading-strip::before,
[data-lp-template="luxury"] .zq-section h2.zq-lp-heading-strip::after {
  display: none;
}

[data-lp-template="luxury"] .zq-lp-left-outline {
  background: #FFFDF8;
  border: 1px solid #E5D7BB;
  border-left: 4px solid #B08D3C;
}

[data-lp-template="luxury"] .zq-lp .buy-button {
  background: #2B2118;
  color: #F5E6BF;
  box-shadow: none;
  border-radius: 4px;
}

[data-lp-template="luxury"] .zq-lp-final-cta {
  background: #2B2118;
  box-shadow: none;
}

/* Nature — fresh, airy greens with soft pill headings (wellness / lifestyle). */
[data-lp-template="nature"] {
  --zq-lp-hero-bg: linear-gradient(160deg, #F0FDF4, #ECFCCB);
  --zq-lp-hero-text: #14372A;
  --zq-lp-hero-desc-color: #3F5F50;
  --zq-lp-blob-opacity: 0.2;
  --zq-lp-radius-xl: 34px;
  --zq-lp-radius-lg: 26px;
  --zq-lp-radius-md: 20px;
  --zq-lp-card-shadow: 0 8px 22px rgba(22, 101, 52, 0.08);
  --zq-lp-heading-weight: 700;
}

[data-lp-template="nature"] .zq-section h2.zq-lp-heading-strip {
  background: color-mix(in srgb, var(--zq-lp-primary) 14%, #F0FDF4);
  color: #14532D;
  border-radius: 999px;
  box-shadow: none;
  text-shadow: none;
}

[data-lp-template="nature"] .zq-section h2.zq-lp-heading-strip::before,
[data-lp-template="nature"] .zq-section h2.zq-lp-heading-strip::after {
  display: none;
}

[data-lp-template="nature"] .zq-lp-left-outline {
  background: #FAFFF7;
  border: 1.5px solid color-mix(in srgb, var(--zq-lp-primary) 28%, var(--zq-border));
}

/* Corporate — clean white, hairline borders, square-ish, underlined headings. */
[data-lp-template="corporate"] {
  --zq-lp-hero-bg: #fff;
  --zq-lp-hero-text: #0F172A;
  --zq-lp-hero-desc-color: #475569;
  --zq-lp-blob-opacity: 0;
  --zq-lp-radius-xl: 10px;
  --zq-lp-radius-lg: 8px;
  --zq-lp-radius-md: 6px;
  --zq-lp-card-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
  --zq-lp-heading-weight: 700;
}

[data-lp-template="corporate"] .zq-lp-hero {
  border: 1px solid #E2E8F0;
  border-top: 4px solid var(--zq-lp-primary);
}

[data-lp-template="corporate"] .zq-section h2.zq-lp-heading-strip {
  background: none;
  color: #0F172A;
  text-align: left;
  padding-left: 0;
  border-radius: 0;
  border-bottom: 2px solid var(--zq-lp-primary);
  box-shadow: none;
  text-shadow: none;
}

[data-lp-template="corporate"] .zq-section h2.zq-lp-heading-strip::before,
[data-lp-template="corporate"] .zq-section h2.zq-lp-heading-strip::after {
  display: none;
}

[data-lp-template="corporate"] .zq-lp-left-outline {
  background: #fff;
  border: 1px solid #E2E8F0;
}

[data-lp-template="corporate"] .zq-lp .buy-button {
  background: var(--zq-lp-primary);
  box-shadow: none;
  border-radius: 8px;
}

/* ==========================================================================
   Theme "skin" for every card on the page. The shared card rules read
   --zq-lp-c-* (background / border) and --zq-lp-panel-bg / --zq-lp-cta-bg, so
   choosing a theme restyles the benefit, included, audience, review, FAQ,
   timeline and trust cards, the section panels and the closing banner —
   not just the hero. Themes with their own bespoke card rules (Education,
   Brutalist) keep them. The page background also follows the theme unless
   the admin picked a custom Background Color.
   ========================================================================== */
[data-lp-template="modern"] { --zq-lp-c-bc: color-mix(in srgb, var(--zq-lp-primary) 16%, var(--zq-border)); }

[data-lp-template="professional"] {
  --zq-lp-c-bg: #fff;
  --zq-lp-c-bc: #E2E8F0;
  --zq-lp-c-bw: 1px;
  --zq-lp-panel-bg: #fff;
  --zq-lp-card-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

[data-lp-template="minimal"] {
  --zq-lp-c-bw: 1px;
  --zq-lp-c-bc: var(--zq-border);
}

[data-lp-template="bold"] {
  --zq-lp-c-bg: color-mix(in srgb, var(--zq-lp-primary) 9%, #fff);
  --zq-lp-c-bc: var(--zq-lp-primary);
  --zq-lp-c-bw: 2px;
}

[data-lp-template="premium"] {
  --zq-lp-c-bg: color-mix(in srgb, var(--zq-lp-primary) 6%, #fff);
  --zq-lp-c-bc: color-mix(in srgb, var(--zq-lp-primary) 35%, var(--zq-border));
  --zq-lp-c-bw: 1px;
  --zq-lp-cta-bg: linear-gradient(160deg, var(--zq-lp-dark), #05050a);
}

[data-lp-template="education"] {
  --zq-lp-c-bg: #FFFBF5;
  --zq-lp-c-bc: color-mix(in srgb, var(--zq-lp-primary) 45%, var(--zq-border));
}

[data-lp-template="software"],
[data-lp-template="digital_product"] {
  --zq-lp-c-bc: color-mix(in srgb, var(--zq-lp-primary) 14%, var(--zq-border));
}

[data-lp-template="playful"] {
  --zq-lp-c-bg: #fff;
  --zq-lp-c-bc: color-mix(in srgb, var(--zq-lp-primary) 40%, #fff);
  --zq-lp-c-bw: 2px;
  --zq-lp-card-shadow: 0 6px 0 color-mix(in srgb, var(--zq-lp-primary) 22%, transparent);
}

[data-lp-template="editorial"] {
  --zq-lp-c-bg: #fff;
  --zq-lp-c-bc: #111827;
  --zq-lp-c-bw: 1px;
  --zq-lp-radius-md: 0;
  --zq-lp-card-shadow: none;
}

[data-lp-template="glass"] {
  --zq-lp-c-bg: rgba(255, 255, 255, 0.55);
  --zq-lp-c-bc: rgba(255, 255, 255, 0.75);
  --zq-lp-c-bw: 1px;
  --zq-lp-panel-bg: rgba(255, 255, 255, 0.4);
}

[data-lp-template="glass"] :is(.zq-lp-benefit-card, .zq-lp-included-card, .zq-lp-audience-card, .zq-lp-review-card, .zq-lp-faq-item, .zq-lp-timeline-step) {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

[data-lp-template="gradient"] {
  --zq-lp-c-bg: #fff;
  --zq-lp-c-bc: color-mix(in srgb, var(--zq-lp-primary) 30%, var(--zq-border));
  --zq-lp-panel-bg: color-mix(in srgb, var(--zq-lp-primary) 6%, #fff);
}

[data-lp-template="luxury"] {
  --zq-lp-c-bg: #FFFDF8;
  --zq-lp-c-bc: #E5D7BB;
  --zq-lp-c-bw: 1px;
  --zq-lp-cta-bg: #2B2118;
}

[data-lp-template="nature"] {
  --zq-lp-c-bg: #FAFFF7;
  --zq-lp-c-bc: color-mix(in srgb, var(--zq-lp-primary) 28%, var(--zq-border));
  --zq-lp-panel-bg: #F4FBF1;
}

[data-lp-template="corporate"] {
  --zq-lp-c-bg: #fff;
  --zq-lp-c-bc: #E2E8F0;
  --zq-lp-c-bw: 1px;
}

/* Page background per theme (skipped when a custom Background Color is set). */
body:has(.zq-lp[data-lp-template="professional"]:not([data-lp-custom-bg])) { background: #F8FAFC; }
body:has(.zq-lp[data-lp-template="minimal"]:not([data-lp-custom-bg])) { background: #fff; }
body:has(.zq-lp[data-lp-template="education"]:not([data-lp-custom-bg])) { background: #FFF7ED; }
body:has(.zq-lp[data-lp-template="playful"]:not([data-lp-custom-bg])) { background: #FDF4FF; }
body:has(.zq-lp[data-lp-template="editorial"]:not([data-lp-custom-bg])) { background: #FAFAF7; }
body:has(.zq-lp[data-lp-template="glass"]:not([data-lp-custom-bg])) { background: linear-gradient(135deg, #E0E7FF, #FCE7F3); }
body:has(.zq-lp[data-lp-template="gradient"]:not([data-lp-custom-bg])) { background: #F5F3FF; }
body:has(.zq-lp[data-lp-template="luxury"]:not([data-lp-custom-bg])) { background: #F6F0E4; }
body:has(.zq-lp[data-lp-template="nature"]:not([data-lp-custom-bg])) { background: #F4FBF1; }
body:has(.zq-lp[data-lp-template="corporate"]:not([data-lp-custom-bg])) { background: #F1F5F9; }

/* ==========================================================================
   Soft Pastel and Midnight Neon themes.
   ========================================================================== */

/* Soft Pastel — light, friendly blush/lavender wash, big radii, soft shadows
   (ebooks, planners, journals, lifestyle products). */
[data-lp-template="pastel"] {
  --zq-lp-hero-bg: linear-gradient(135deg, #FFF1F2, #F5F3FF 55%, #ECFEFF);
  --zq-lp-hero-text: #2D2A45;
  --zq-lp-hero-desc-color: #5B5878;
  --zq-lp-blob-opacity: 0.14;
  --zq-lp-radius-xl: 30px;
  --zq-lp-radius-lg: 24px;
  --zq-lp-radius-md: 18px;
  --zq-lp-card-shadow: 0 10px 24px color-mix(in srgb, var(--zq-lp-primary) 12%, transparent);
  --zq-lp-heading-weight: 700;
  --zq-lp-c-bg: #fff;
  --zq-lp-c-bc: color-mix(in srgb, var(--zq-lp-primary) 22%, #fff);
  --zq-lp-panel-bg: rgba(255, 255, 255, 0.72);
}

[data-lp-template="pastel"] .zq-lp-hero {
  border: 1.5px solid color-mix(in srgb, var(--zq-lp-primary) 22%, #fff);
}

[data-lp-template="pastel"] .zq-section h2.zq-lp-heading-strip {
  background: color-mix(in srgb, var(--zq-lp-primary) 16%, #fff);
  color: #2D2A45;
  border-radius: 999px;
  box-shadow: none;
  text-shadow: none;
}

[data-lp-template="pastel"] .zq-section h2.zq-lp-heading-strip::before,
[data-lp-template="pastel"] .zq-section h2.zq-lp-heading-strip::after {
  display: none;
}

[data-lp-template="pastel"] .zq-lp-left-outline {
  border: 1.5px solid color-mix(in srgb, var(--zq-lp-primary) 22%, #fff);
}

[data-lp-template="pastel"] .zq-lp-final-cta {
  box-shadow: 0 16px 34px -12px color-mix(in srgb, var(--zq-lp-primary) 45%, transparent);
}

body:has(.zq-lp[data-lp-template="pastel"]:not([data-lp-custom-bg])) { background: #FFF5F7; }

/* Midnight Neon — deep navy panel with glowing primary/secondary accents
   (software, AI, developer and tech products). The dark canvas is the
   landing article itself, so the site header/footer stay untouched. */
[data-lp-template="midnight"].zq-lp {
  --zq-surface: #10172A;
  --zq-text: #EAF0FF;
  --zq-muted: #9AA8C7;
  --zq-border: rgba(148, 163, 255, 0.18);
  --zq-lp-hero-bg: radial-gradient(120% 90% at 20% 0%, color-mix(in srgb, var(--zq-lp-primary) 35%, #0B1020), #0B1020 70%);
  --zq-lp-hero-text: #F5F8FF;
  --zq-lp-hero-desc-color: rgba(234, 240, 255, 0.78);
  --zq-lp-blob-opacity: 0.35;
  --zq-lp-card-shadow: 0 0 22px color-mix(in srgb, var(--zq-lp-primary) 16%, transparent);
  --zq-lp-c-bg: #10172A;
  --zq-lp-c-bc: color-mix(in srgb, var(--zq-lp-primary) 45%, transparent);
  --zq-lp-c-bw: 1px;
  --zq-lp-panel-bg: rgba(16, 23, 42, 0.85);
  --zq-lp-cta-bg: linear-gradient(135deg, color-mix(in srgb, var(--zq-lp-primary) 70%, #0B1020), color-mix(in srgb, var(--zq-lp-secondary) 70%, #0B1020));
  background: #0B1020;
  color: var(--zq-text);
  border-radius: 28px;
}

[data-lp-template="midnight"] .zq-lp-hero {
  border: 1px solid color-mix(in srgb, var(--zq-lp-primary) 45%, transparent);
  box-shadow: 0 0 40px color-mix(in srgb, var(--zq-lp-primary) 22%, transparent);
}

[data-lp-template="midnight"].zq-lp .zq-price-selling {
  color: color-mix(in srgb, var(--zq-lp-primary) 55%, #fff);
}

[data-lp-template="midnight"].zq-lp .zq-price-regular {
  color: rgba(234, 240, 255, 0.55);
}

[data-lp-template="midnight"] .zq-lp-save {
  color: #86EFAC;
}

[data-lp-template="midnight"] .zq-lp-hero-mini-trust {
  color: rgba(234, 240, 255, 0.85);
}

[data-lp-template="midnight"] .zq-lp .buy-button,
[data-lp-template="midnight"] .zq-lp-hero .buy-button {
  box-shadow: 0 0 26px color-mix(in srgb, var(--zq-lp-primary) 65%, transparent);
}

[data-lp-template="midnight"] .zq-lp-hero .zq-secondary-btn {
  background: transparent;
  color: #EAF0FF;
  border-color: color-mix(in srgb, var(--zq-lp-primary) 60%, #fff);
}

[data-lp-template="midnight"] .zq-section h2.zq-lp-heading-strip {
  box-shadow: 0 0 26px color-mix(in srgb, var(--zq-lp-primary) 40%, transparent);
}

[data-lp-template="midnight"] .zq-lp-left-outline {
  border-color: color-mix(in srgb, var(--zq-lp-primary) 45%, transparent);
}

[data-lp-template="midnight"] .zq-lp-final-cta {
  border: 1px solid color-mix(in srgb, var(--zq-lp-primary) 50%, transparent);
  box-shadow: 0 0 40px color-mix(in srgb, var(--zq-lp-primary) 30%, transparent);
}

/* ==========================================================================
   Closing "Ready to get started?" banner — token driven.
   Every colour below comes from --cta-* tokens. The defaults derive from the
   product's theme variables (--zq-lp-primary / --zq-lp-secondary), and each
   theme block further down only re-declares tokens — so switching the theme
   (or the Primary/Secondary colour) restyles the whole banner: background,
   glow, badge, price card, both buttons, trust pills, icons and focus ring.
   ========================================================================== */
.zq-lp-final-cta {
  --cta-bg-start: var(--zq-lp-primary);
  --cta-bg-end: var(--zq-lp-secondary);
  --cta-accent: #FCD34D;
  --cta-accent-2: #FB923C;
  --cta-text-primary: #fff;
  --cta-text-secondary: rgba(255, 255, 255, 0.9);
  --cta-pill-bg: rgba(255, 255, 255, 0.12);
  --cta-card-bg: rgba(255, 255, 255, 0.14);
  --cta-border: rgba(255, 255, 255, 0.3);
  --cta-glow: color-mix(in srgb, var(--zq-lp-primary) 55%, transparent);
  --cta-deco: rgba(255, 255, 255, 0.1);
  --cta-icon: var(--cta-accent);
  --cta-save: #5EEAD4;
  --cta-focus: #fff;
  --cta-ring: rgba(255, 255, 255, 0.22);
  --cta-primary-btn: #fff;
  --cta-primary-btn-text: color-mix(in srgb, var(--zq-lp-primary) 50%, #0B1020);
  --cta-secondary-btn: linear-gradient(135deg, #EA580C, #E11D48);
  --cta-secondary-btn-text: #fff;
  --cta-secondary-border: transparent;
  --cta-badge-bg: linear-gradient(135deg, #EA580C, #E11D48);
  --cta-badge-text: #fff;
  --cta-btn-radius: 999px;
  --cta-card-radius: 999px;
}

.zq-product.zq-lp .zq-lp-final-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
  color: var(--cta-text-primary);
  padding: clamp(2.75rem, 6vw, 4.75rem) clamp(1rem, 4vw, 2.5rem);
  border-radius: var(--zq-lp-radius-xl);
  border: 1px solid var(--cta-border);
  background:
    radial-gradient(80% 70% at 12% 0%, color-mix(in srgb, var(--cta-accent) 16%, transparent), transparent 62%),
    linear-gradient(135deg, var(--cta-bg-start), var(--cta-bg-end));
  box-shadow: 0 34px 70px -28px var(--cta-glow), inset 0 1px 0 rgba(255, 255, 255, 0.12);
}

/* Big soft circles (reuse the existing pseudo-elements). */
.zq-product.zq-lp .zq-lp-final-cta::before,
.zq-product.zq-lp .zq-lp-final-cta::after {
  background: var(--cta-deco);
  z-index: 0;
}

.zq-product.zq-lp .zq-lp-final-cta::before {
  width: 340px;
  height: 340px;
  top: -170px;
  right: -110px;
}

.zq-product.zq-lp .zq-lp-final-cta::after {
  width: 300px;
  height: 300px;
  bottom: -160px;
  left: -90px;
}

.zq-product.zq-lp .zq-lp-final-cta > .zq-lp-cta-deco {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.zq-lp-cta-deco-dots-a,
.zq-lp-cta-deco-dots-b {
  width: 130px;
  height: 96px;
  background-image: radial-gradient(color-mix(in srgb, var(--cta-text-primary) 35%, transparent) 1.6px, transparent 1.7px);
  background-size: 22px 22px;
}

.zq-lp-cta-deco-dots-a { top: 2.25rem; left: 2.5rem; }
.zq-lp-cta-deco-dots-b { bottom: 2.25rem; right: 2.5rem; }

.zq-lp-cta-deco-ring-a,
.zq-lp-cta-deco-ring-b {
  border-radius: 50%;
  border: 2px solid var(--cta-deco);
}

.zq-lp-cta-deco-ring-a { width: 84px; height: 84px; top: 2.5rem; right: 3.5rem; background: var(--cta-deco); }
.zq-lp-cta-deco-ring-b { width: 44px; height: 44px; bottom: 2.5rem; right: 24%; }

.zq-product.zq-lp .zq-lp-final-cta > :not(.zq-lp-cta-deco) {
  position: relative;
  z-index: 1;
}

/* Badge */
.zq-lp-cta-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 1.1rem;
  padding: 0.5rem 1.3rem;
  border-radius: var(--cta-btn-radius);
  background: var(--cta-badge-bg);
  color: var(--cta-badge-text);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  box-shadow: 0 10px 26px -10px var(--cta-glow);
}

.zq-lp-cta-ico {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  fill: currentColor;
}

/* Headline + subtitle */
.zq-product.zq-lp .zq-lp-final-cta h2 {
  margin: 0 0 0.6rem;
  color: var(--cta-text-primary);
  font-size: clamp(2rem, 1.3rem + 3vw, 3.4rem);
  font-weight: 800;
  line-height: 1.12;
}

.zq-lp-cta-accent {
  background: linear-gradient(90deg, var(--cta-accent), var(--cta-accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--cta-accent);
}

.zq-product.zq-lp .zq-lp-final-cta .zq-lp-cta-sub {
  max-width: 36rem;
  margin: 0 auto;
  color: var(--cta-text-secondary);
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.55;
}

/* Price card */
.zq-product.zq-lp .zq-lp-final-cta .zq-lp-cta-price {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin: 1.75rem auto 0.6rem;
  padding: 0.85rem 1.9rem;
  border-radius: var(--cta-card-radius);
  background: var(--cta-card-bg);
  border: 1px solid var(--cta-border);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 16px 38px -16px var(--cta-glow), inset 0 1px 0 rgba(255, 255, 255, 0.14);
}

.zq-product.zq-lp .zq-lp-final-cta .zq-price-selling {
  color: var(--cta-text-primary);
  font-size: clamp(2.4rem, 1.6rem + 3vw, 3.6rem);
  font-weight: 800;
  line-height: 1.05;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.25);
}

.zq-product.zq-lp .zq-lp-final-cta .zq-price-regular {
  color: var(--cta-text-secondary);
  opacity: 0.8;
  font-size: 1.2rem;
}

.zq-product.zq-lp .zq-lp-final-cta .zq-discount {
  padding: 0.4rem 1rem;
  border-radius: 999px;
  background: var(--cta-badge-bg);
  color: var(--cta-badge-text);
  font-size: 0.95rem;
  font-weight: 800;
}

.zq-lp-cta-save {
  margin: 0.25rem 0 0;
  color: var(--cta-save);
  font-size: 1.1rem;
  font-weight: 700;
}

.zq-lp-cta-save::before,
.zq-lp-cta-save::after {
  content: '\2726';
  margin: 0 0.6rem;
  color: var(--cta-accent);
  font-size: 0.85em;
}

/* Buttons */
.zq-lp-cta-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

.zq-lp-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  flex: 0 1 300px;
  min-width: 220px;
  min-height: 60px;
  padding: 0.9rem 2rem;
  border: 2px solid transparent;
  border-radius: var(--cta-btn-radius);
  font: inherit;
  font-size: 1.15rem;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}

.zq-lp-cta-btn:hover {
  transform: translateY(-2px);
}

.zq-lp-cta-btn:focus-visible {
  outline: 3px solid var(--cta-focus);
  outline-offset: 4px;
}

.zq-lp-cta-btn-primary {
  background: var(--cta-primary-btn);
  color: var(--cta-primary-btn-text);
  box-shadow: 0 16px 32px -10px rgba(0, 0, 0, 0.5), 0 0 0 5px var(--cta-ring);
}

.zq-lp-cta-btn-primary:hover {
  box-shadow: 0 20px 38px -10px rgba(0, 0, 0, 0.55), 0 0 0 7px var(--cta-ring);
}

.zq-lp-cta-btn-primary .zq-lp-cta-ico {
  fill: var(--cta-primary-btn-text);
}

.zq-lp-cta-btn-secondary {
  background: var(--cta-secondary-btn);
  color: var(--cta-secondary-btn-text);
  border-color: var(--cta-secondary-border);
  box-shadow: 0 16px 32px -12px var(--cta-glow);
}

.zq-lp-cta-btn-secondary:hover {
  filter: brightness(1.08);
}

.zq-lp-cta-arrow {
  transition: transform 0.15s ease;
}

.zq-lp-cta-btn:hover .zq-lp-cta-arrow {
  transform: translateX(4px);
}

/* Trust pills + policy */
.zq-lp-cta-trust {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin: 2rem 0 0;
  padding: 0;
}

.zq-lp-cta-trust li {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1.25rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.9);
  color: #1a1a1a;
  font-size: 0.95rem;
  font-weight: 700;
  box-shadow: 0 10px 22px -8px rgba(0, 0, 0, 0.45);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.zq-lp-cta-trust li:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 26px -8px rgba(0, 0, 0, 0.5);
}

.zq-lp-cta-ico-trust {
  fill: var(--zq-lp-primary, #E11D48);
  width: 1.05em;
  flex-shrink: 0;
}

.zq-lp-cta-policy {
  margin: 1.2rem 0 0;
  color: var(--cta-text-secondary);
  font-size: 0.9rem;
}

.zq-lp-cta-trust a {
  color: inherit;
  text-decoration: none;
}

.zq-lp-cta-policy a {
  color: var(--cta-text-primary);
  font-weight: 700;
  text-decoration: underline;
}

.zq-lp-cta-trust a:focus-visible,
.zq-lp-cta-policy a:focus-visible {
  outline: 3px solid var(--cta-focus);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (max-width: 480px) {
  .zq-lp-cta-trust {
    gap: 0.55rem;
  }

  .zq-lp-cta-trust li {
    flex: 1 1 auto;
    justify-content: center;
    padding: 0.6rem 1rem;
    font-size: 0.85rem;
  }
}

@media (max-width: 640px) {
  .zq-lp-cta-btn {
    flex-basis: 100%;
    min-width: 0;
  }

  .zq-product.zq-lp .zq-lp-final-cta .zq-lp-cta-price {
    --cta-card-radius: 28px;
    padding: 0.85rem 1.25rem;
  }

  .zq-lp-cta-deco-dots-a,
  .zq-lp-cta-deco-dots-b {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .zq-lp-cta-btn,
  .zq-lp-cta-arrow {
    transition: none;
  }

  .zq-lp-cta-btn:hover {
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Per-theme tokens. Only tokens change here — layout is shared.
   -------------------------------------------------------------------------- */
[data-lp-template="education"] .zq-lp-final-cta { --cta-accent: #FDE047; --cta-accent-2: #FDBA74; }
[data-lp-template="playful"] .zq-lp-final-cta { --cta-accent: #FDE047; --cta-accent-2: #F9A8D4; --cta-btn-radius: 999px; }

[data-lp-template="professional"] .zq-lp-final-cta,
[data-lp-template="corporate"] .zq-lp-final-cta {
  --cta-bg-start: #0F172A;
  --cta-bg-end: color-mix(in srgb, var(--zq-lp-primary) 40%, #0F172A);
  --cta-accent: color-mix(in srgb, var(--zq-lp-primary) 45%, #fff);
  --cta-accent-2: color-mix(in srgb, var(--zq-lp-secondary) 45%, #fff);
  --cta-secondary-btn: linear-gradient(135deg, var(--zq-lp-primary), var(--zq-lp-secondary));
  --cta-badge-bg: linear-gradient(135deg, var(--zq-lp-primary), var(--zq-lp-secondary));
  --cta-btn-radius: 10px;
  --cta-card-radius: 14px;
}

[data-lp-template="minimal"] .zq-lp-final-cta {
  --cta-bg-start: var(--zq-lp-dark);
  --cta-bg-end: color-mix(in srgb, var(--zq-lp-dark) 80%, #000);
  --cta-accent: color-mix(in srgb, var(--zq-lp-primary) 45%, #fff);
  --cta-accent-2: color-mix(in srgb, var(--zq-lp-secondary) 45%, #fff);
  --cta-secondary-btn: linear-gradient(135deg, var(--zq-lp-primary), var(--zq-lp-secondary));
  --cta-badge-bg: linear-gradient(135deg, var(--zq-lp-primary), var(--zq-lp-secondary));
  --cta-btn-radius: 10px;
  --cta-card-radius: 14px;
}

[data-lp-template="bold"] .zq-lp-final-cta {
  --cta-bg-start: #111827;
  --cta-bg-end: #1F2937;
  --cta-accent: var(--zq-lp-primary);
  --cta-accent-2: var(--zq-lp-secondary);
  --cta-secondary-btn: transparent;
  --cta-secondary-border: var(--zq-lp-primary);
  --cta-badge-bg: var(--zq-lp-primary);
  --cta-badge-text: #111827;
  --cta-primary-btn-text: #111827;
}

[data-lp-template="premium"] .zq-lp-final-cta {
  --cta-bg-start: var(--zq-lp-dark);
  --cta-bg-end: #05050A;
  --cta-accent: color-mix(in srgb, var(--zq-lp-primary) 50%, #fff);
  --cta-accent-2: color-mix(in srgb, var(--zq-lp-secondary) 50%, #fff);
  --cta-secondary-btn: linear-gradient(135deg, var(--zq-lp-primary), var(--zq-lp-secondary));
  --cta-badge-bg: linear-gradient(135deg, var(--zq-lp-primary), var(--zq-lp-secondary));
  --cta-glow: color-mix(in srgb, var(--zq-lp-secondary) 55%, transparent);
}

[data-lp-template="dark"] .zq-lp-final-cta,
[data-lp-template="midnight"] .zq-lp-final-cta {
  --cta-bg-start: color-mix(in srgb, var(--zq-lp-primary) 30%, #10172A);
  --cta-bg-end: #10172A;
  --cta-accent: color-mix(in srgb, var(--zq-lp-primary) 50%, #fff);
  --cta-accent-2: color-mix(in srgb, var(--zq-lp-secondary) 50%, #fff);
  --cta-border: color-mix(in srgb, var(--zq-lp-primary) 55%, transparent);
  --cta-card-bg: rgba(255, 255, 255, 0.06);
  --cta-secondary-btn: linear-gradient(135deg, var(--zq-lp-primary), var(--zq-lp-secondary));
  --cta-badge-bg: linear-gradient(135deg, var(--zq-lp-primary), var(--zq-lp-secondary));
  --cta-primary-btn-text: #0B1020;
  --cta-glow: color-mix(in srgb, var(--zq-lp-primary) 65%, transparent);
  --cta-deco: color-mix(in srgb, var(--zq-lp-primary) 16%, transparent);
}

[data-lp-template="editorial"] .zq-lp-final-cta {
  --cta-bg-start: #111827;
  --cta-bg-end: #0B1220;
  --cta-accent: #FDE68A;
  --cta-accent-2: #FCA5A5;
  --cta-btn-radius: 0;
  --cta-card-radius: 0;
}

[data-lp-template="editorial"] .zq-lp-final-cta h2 {
  font-family: Georgia, 'Times New Roman', serif;
  font-style: italic;
}

[data-lp-template="glass"] .zq-lp-final-cta {
  --cta-bg-start: color-mix(in srgb, var(--zq-lp-primary) 82%, transparent);
  --cta-bg-end: color-mix(in srgb, var(--zq-lp-secondary) 82%, transparent);
  --cta-card-bg: rgba(255, 255, 255, 0.22);
  --cta-border: rgba(255, 255, 255, 0.55);
}

[data-lp-template="luxury"] .zq-lp-final-cta {
  --cta-bg-start: #2B2118;
  --cta-bg-end: #4A3823;
  --cta-accent: #F5E6BF;
  --cta-accent-2: #D4AF5A;
  --cta-text-secondary: #EADFC8;
  --cta-border: rgba(212, 175, 90, 0.45);
  --cta-glow: rgba(212, 175, 90, 0.4);
  --cta-icon: #D4AF5A;
  --cta-save: #E7C873;
  --cta-primary-btn: linear-gradient(135deg, #F5E6BF, #D9B45C);
  --cta-primary-btn-text: #2B2118;
  --cta-secondary-btn: transparent;
  --cta-secondary-btn-text: #F5E6BF;
  --cta-secondary-border: #D4AF5A;
  --cta-badge-bg: linear-gradient(135deg, #F5E6BF, #D9B45C);
  --cta-badge-text: #2B2118;
  --cta-deco: rgba(212, 175, 90, 0.12);
  --cta-btn-radius: 4px;
  --cta-card-radius: 6px;
}

[data-lp-template="nature"] .zq-lp-final-cta {
  --cta-bg-start: #14532D;
  --cta-bg-end: color-mix(in srgb, var(--zq-lp-primary) 55%, #14532D);
  --cta-accent: #BEF264;
  --cta-accent-2: #4ADE80;
  --cta-primary-btn-text: #14532D;
  --cta-secondary-btn: linear-gradient(135deg, #15803D, #4D7C0F);
  --cta-badge-bg: linear-gradient(135deg, #15803D, #4D7C0F);
  --cta-glow: rgba(74, 222, 128, 0.4);
}

[data-lp-template="pastel"] .zq-lp-final-cta {
  --cta-bg-start: color-mix(in srgb, var(--zq-lp-primary) 88%, #312E81);
  --cta-bg-end: color-mix(in srgb, var(--zq-lp-secondary) 88%, #312E81);
  --cta-accent: #FDE68A;
  --cta-accent-2: #FBCFE8;
}

[data-lp-template="brutalist"] .zq-lp-final-cta {
  --cta-bg-start: var(--zq-lp-primary);
  --cta-bg-end: var(--zq-lp-primary);
  --cta-text-primary: #000;
  --cta-text-secondary: #111;
  --cta-pill-bg: rgba(0, 0, 0, 0.08);
  --cta-card-bg: rgba(255, 255, 255, 0.6);
  --cta-border: #000;
  --cta-glow: rgba(0, 0, 0, 0.5);
  --cta-deco: rgba(0, 0, 0, 0.08);
  --cta-accent: #000;
  --cta-accent-2: #000;
  --cta-icon: #000;
  --cta-save: #000;
  --cta-focus: #000;
  --cta-ring: rgba(0, 0, 0, 0.25);
  --cta-primary-btn: #000;
  --cta-primary-btn-text: #fff;
  --cta-secondary-btn: #fff;
  --cta-secondary-btn-text: #000;
  --cta-secondary-border: #000;
  --cta-badge-bg: #000;
  --cta-badge-text: #fff;
  --cta-btn-radius: 0;
  --cta-card-radius: 0;
}

[data-lp-template="brutalist"] .zq-product.zq-lp .zq-lp-final-cta,
.zq-product.zq-lp[data-lp-template="brutalist"] .zq-lp-final-cta {
  border-width: 3px;
  box-shadow: 6px 6px 0 #000;
}

.zq-product.zq-lp[data-lp-template="brutalist"] .zq-lp-cta-accent {
  -webkit-text-fill-color: #000;
  background: none;
}

/* ==========================================================================
   Six more themes: Sunset, Ocean, Monochrome, Rose, Aurora, Earth.
   Each sets: hero + heading strip + section panels, card tokens, page
   background and the closing-banner (--cta-*) tokens.
   ========================================================================== */

/* Sunset — warm orange-to-pink hero with white text (creators, courses). */
[data-lp-template="sunset"] {
  --zq-lp-hero-bg: linear-gradient(135deg, #F97316, #EC4899 62%, #8B5CF6);
  --zq-lp-hero-text: #fff;
  --zq-lp-hero-desc-color: rgba(255, 255, 255, 0.93);
  --zq-lp-blob-opacity: 0.2;
  --zq-lp-radius-xl: 28px;
  --zq-lp-radius-lg: 22px;
  --zq-lp-radius-md: 16px;
  --zq-lp-card-shadow: 0 10px 26px rgba(249, 115, 22, 0.14);
  --zq-lp-heading-weight: 800;
  --zq-lp-c-bg: #fff;
  --zq-lp-c-bc: #FED7AA;
  --zq-lp-panel-bg: #FFF7ED;
}
[data-lp-template="sunset"] .zq-lp-hero { border-color: transparent; border-left-color: rgba(255, 255, 255, 0.55); }
[data-lp-template="sunset"].zq-lp .zq-price-selling,
[data-lp-template="sunset"] .zq-lp-hero-mini-trust { color: #fff; }
[data-lp-template="sunset"].zq-lp .zq-price-regular { color: rgba(255, 255, 255, 0.78); }
[data-lp-template="sunset"] .zq-lp-save { color: #FEF3C7; }
[data-lp-template="sunset"].zq-lp .zq-discount,
[data-lp-template="sunset"] .zq-lp-eyebrow { background: rgba(255, 255, 255, 0.24); color: #fff; }
[data-lp-template="sunset"] .zq-lp-mini-trust-check { background: #fff; color: #EA580C; }
[data-lp-template="sunset"] .zq-lp-hero .buy-button { background: #fff; color: #C2410C; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.4); }
[data-lp-template="sunset"] .zq-lp-hero .zq-secondary-btn { background: transparent; color: #fff; border-color: #fff; }
[data-lp-template="sunset"] .zq-section h2.zq-lp-heading-strip { background: linear-gradient(90deg, #F97316, #EC4899); }
[data-lp-template="sunset"] .zq-lp-left-outline { border-left-color: #F97316; }
[data-lp-template="sunset"] .zq-lp-final-cta {
  --cta-bg-start: #EA580C;
  --cta-bg-end: #BE185D;
  --cta-accent: #FEF08A;
  --cta-accent-2: #FDBA74;
  --cta-secondary-btn: linear-gradient(135deg, #7C2D12, #831843);
  --cta-badge-bg: linear-gradient(135deg, #7C2D12, #831843);
  --cta-primary-btn-text: #C2410C;
  --cta-glow: rgba(234, 88, 12, 0.5);
}
body:has(.zq-lp[data-lp-template="sunset"]:not([data-lp-custom-bg])) { background: #FFF7ED; }

/* Ocean — fresh aqua/blue, clean and calm (health, finance, SaaS). */
[data-lp-template="ocean"] {
  --zq-lp-hero-bg: linear-gradient(160deg, #ECFEFF, #E0F2FE 60%, #F0F9FF);
  --zq-lp-hero-text: #0C4A6E;
  --zq-lp-hero-desc-color: #365B72;
  --zq-lp-blob-opacity: 0.16;
  --zq-lp-radius-xl: 22px;
  --zq-lp-radius-lg: 18px;
  --zq-lp-radius-md: 14px;
  --zq-lp-card-shadow: 0 10px 26px rgba(14, 116, 144, 0.12);
  --zq-lp-c-bg: #fff;
  --zq-lp-c-bc: #BAE6FD;
  --zq-lp-panel-bg: #F0F9FF;
}
[data-lp-template="ocean"] .zq-lp-hero { border: 1.5px solid #BAE6FD; border-left: 4px solid #0891B2; }
[data-lp-template="ocean"] .zq-section h2.zq-lp-heading-strip { background: linear-gradient(90deg, #0891B2, #2563EB); }
[data-lp-template="ocean"] .zq-lp-left-outline { border-left-color: #0891B2; }
[data-lp-template="ocean"] .zq-lp .buy-button { background: linear-gradient(135deg, #0891B2, #2563EB); }
[data-lp-template="ocean"] .zq-lp-final-cta {
  --cta-bg-start: #0C4A6E;
  --cta-bg-end: #0E7490;
  --cta-accent: #67E8F9;
  --cta-accent-2: #38BDF8;
  --cta-primary-btn-text: #0C4A6E;
  --cta-secondary-btn: linear-gradient(135deg, #0891B2, #2563EB);
  --cta-badge-bg: linear-gradient(135deg, #0891B2, #2563EB);
  --cta-glow: rgba(8, 145, 178, 0.5);
}
body:has(.zq-lp[data-lp-template="ocean"]:not([data-lp-custom-bg])) { background: #F0F9FF; }

/* Monochrome — strict black and white, square, editorial-Swiss (agencies, portfolios). */
[data-lp-template="mono"] {
  --zq-lp-hero-bg: #fff;
  --zq-lp-hero-text: #0A0A0A;
  --zq-lp-hero-desc-color: #404040;
  --zq-lp-blob-opacity: 0;
  --zq-lp-radius-xl: 2px;
  --zq-lp-radius-lg: 2px;
  --zq-lp-radius-md: 2px;
  --zq-lp-card-shadow: none;
  --zq-lp-heading-weight: 800;
  --zq-lp-c-bg: #fff;
  --zq-lp-c-bc: #0A0A0A;
  --zq-lp-c-bw: 1px;
  --zq-lp-panel-bg: #fff;
}
[data-lp-template="mono"] .zq-lp-hero { border: 1px solid #0A0A0A; }
[data-lp-template="mono"].zq-lp .zq-price-selling { color: #0A0A0A; }
[data-lp-template="mono"].zq-lp .zq-discount { background: #0A0A0A; color: #fff; }
[data-lp-template="mono"] .zq-lp-eyebrow { background: #0A0A0A; color: #fff; }
[data-lp-template="mono"] .zq-lp-mini-trust-check { background: #0A0A0A; }
[data-lp-template="mono"] .zq-lp .buy-button { background: #0A0A0A; box-shadow: none; border-radius: 0; }
[data-lp-template="mono"] .zq-lp .zq-secondary-btn { border-radius: 0; border-color: #0A0A0A; color: #0A0A0A; }
[data-lp-template="mono"] .zq-section h2.zq-lp-heading-strip {
  background: #0A0A0A;
  color: #fff;
  border-radius: 0;
  box-shadow: none;
  text-shadow: none;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
[data-lp-template="mono"] .zq-lp-left-outline { background: #fff; border: 1px solid #0A0A0A; border-left: 6px solid #0A0A0A; }
[data-lp-template="mono"] .zq-lp-final-cta {
  --cta-bg-start: #0A0A0A;
  --cta-bg-end: #171717;
  --cta-accent: #fff;
  --cta-accent-2: #A3A3A3;
  --cta-glow: rgba(255, 255, 255, 0.16);
  --cta-deco: rgba(255, 255, 255, 0.06);
  --cta-icon: #fff;
  --cta-primary-btn-text: #0A0A0A;
  --cta-secondary-btn: transparent;
  --cta-secondary-border: #fff;
  --cta-badge-bg: #fff;
  --cta-badge-text: #0A0A0A;
  --cta-btn-radius: 0;
  --cta-card-radius: 0;
}
body:has(.zq-lp[data-lp-template="mono"]:not([data-lp-custom-bg])) { background: #FAFAFA; }

/* Rose — blush pink and rose-gold, soft and elegant (beauty, weddings, lifestyle). */
[data-lp-template="rose"] {
  --zq-lp-hero-bg: linear-gradient(160deg, #FFF1F2, #FFE4E6 60%, #FDF2F8);
  --zq-lp-hero-text: #4C0519;
  --zq-lp-hero-desc-color: #6B3345;
  --zq-lp-blob-opacity: 0.18;
  --zq-lp-radius-xl: 26px;
  --zq-lp-radius-lg: 20px;
  --zq-lp-radius-md: 16px;
  --zq-lp-card-shadow: 0 10px 26px rgba(225, 29, 72, 0.1);
  --zq-lp-c-bg: #fff;
  --zq-lp-c-bc: #FECDD3;
  --zq-lp-panel-bg: #FFF5F6;
}
[data-lp-template="rose"] .zq-lp-hero { border: 1.5px solid #FECDD3; border-left: 4px solid #E11D48; }
[data-lp-template="rose"] .zq-section h2.zq-lp-heading-strip {
  background: #FFE4E6;
  color: #9F1239;
  border-radius: 999px;
  box-shadow: none;
  text-shadow: none;
}
[data-lp-template="rose"] .zq-lp-left-outline { border-left-color: #E11D48; }
[data-lp-template="rose"] .zq-lp .buy-button { background: linear-gradient(135deg, #E11D48, #BE185D); }
[data-lp-template="rose"] .zq-lp-final-cta {
  --cta-bg-start: #9F1239;
  --cta-bg-end: #E11D48;
  --cta-accent: #FDE68A;
  --cta-accent-2: #FDA4AF;
  --cta-primary-btn-text: #9F1239;
  --cta-secondary-btn: linear-gradient(135deg, #4C0519, #881337);
  --cta-badge-bg: linear-gradient(135deg, #FDE68A, #F9A8D4);
  --cta-badge-text: #4C0519;
  --cta-glow: rgba(225, 29, 72, 0.45);
}
body:has(.zq-lp[data-lp-template="rose"]:not([data-lp-custom-bg])) { background: #FFF5F6; }

/* Aurora — light mesh-gradient hero in your Primary/Secondary colours (modern SaaS). */
[data-lp-template="aurora"] {
  --zq-lp-hero-bg:
    radial-gradient(60% 80% at 15% 10%, color-mix(in srgb, var(--zq-lp-primary) 22%, #fff), transparent 60%),
    radial-gradient(50% 70% at 90% 0%, color-mix(in srgb, var(--zq-lp-secondary) 22%, #fff), transparent 60%),
    #fff;
  --zq-lp-hero-text: #0F172A;
  --zq-lp-hero-desc-color: #475569;
  --zq-lp-blob-opacity: 0.1;
  --zq-lp-radius-xl: 20px;
  --zq-lp-radius-lg: 16px;
  --zq-lp-radius-md: 12px;
  --zq-lp-card-shadow: 0 12px 30px -14px color-mix(in srgb, var(--zq-lp-primary) 30%, transparent);
  --zq-lp-c-bg: #fff;
  --zq-lp-c-bc: color-mix(in srgb, var(--zq-lp-primary) 14%, #E2E8F0);
  --zq-lp-c-bw: 1px;
  --zq-lp-panel-bg: color-mix(in srgb, var(--zq-lp-primary) 4%, #fff);
}
[data-lp-template="aurora"] .zq-section h2.zq-lp-heading-strip {
  background: color-mix(in srgb, var(--zq-lp-primary) 10%, #fff);
  color: color-mix(in srgb, var(--zq-lp-primary) 80%, #0F172A);
  text-align: left;
  border-radius: 12px;
  box-shadow: none;
  text-shadow: none;
  font-weight: 800;
}
[data-lp-template="aurora"] .zq-lp-final-cta {
  --cta-accent: #FDE68A;
  --cta-accent-2: #F0ABFC;
}
body:has(.zq-lp[data-lp-template="aurora"]:not([data-lp-custom-bg])) { background: #F8FAFF; }

/* Earth — warm terracotta and sand, organic serif headings (wellness, crafts, food). */
[data-lp-template="earth"] {
  --zq-lp-hero-bg: linear-gradient(160deg, #FAF3E8, #F3E5D0);
  --zq-lp-hero-text: #3B2A1E;
  --zq-lp-hero-desc-color: #6B5645;
  --zq-lp-blob-opacity: 0;
  --zq-lp-radius-xl: 14px;
  --zq-lp-radius-lg: 12px;
  --zq-lp-radius-md: 10px;
  --zq-lp-card-shadow: 0 8px 22px rgba(120, 72, 30, 0.1);
  --zq-lp-heading-weight: 700;
  --zq-lp-c-bg: #FFFBF5;
  --zq-lp-c-bc: #E8D5BC;
  --zq-lp-c-bw: 1px;
  --zq-lp-panel-bg: #FFFBF5;
}
[data-lp-template="earth"] .zq-lp-hero { border: 1px solid #E0C9A6; border-left: 4px solid #C2410C; }
[data-lp-template="earth"] .zq-lp-hero-content h1,
[data-lp-template="earth"] .zq-section h2.zq-lp-heading-strip,
[data-lp-template="earth"] .zq-lp-final-cta h2 { font-family: Georgia, 'Times New Roman', serif; }
[data-lp-template="earth"].zq-lp .zq-price-selling { color: #9A3412; }
[data-lp-template="earth"] .zq-lp .buy-button { background: #9A3412; box-shadow: none; border-radius: 10px; }
[data-lp-template="earth"] .zq-section h2.zq-lp-heading-strip {
  background: #EAD7BC;
  color: #5C3A1E;
  border-radius: 10px;
  box-shadow: none;
  text-shadow: none;
}
[data-lp-template="earth"] .zq-lp-left-outline { border: 1px solid #E8D5BC; border-left: 4px solid #C2410C; }
[data-lp-template="earth"] .zq-lp-final-cta {
  --cta-bg-start: #5C3A1E;
  --cta-bg-end: #7C4A26;
  --cta-accent: #FDE68A;
  --cta-accent-2: #FDBA74;
  --cta-primary-btn: #FFF7ED;
  --cta-primary-btn-text: #7C2D12;
  --cta-secondary-btn: linear-gradient(135deg, #C2410C, #9A3412);
  --cta-badge-bg: linear-gradient(135deg, #C2410C, #9A3412);
  --cta-glow: rgba(194, 65, 12, 0.4);
  --cta-btn-radius: 12px;
  --cta-card-radius: 16px;
}
body:has(.zq-lp[data-lp-template="earth"]:not([data-lp-custom-bg])) { background: #FAF3E8; }

[data-lp-template="sunset"] .zq-section h2.zq-lp-heading-strip::before,
[data-lp-template="sunset"] .zq-section h2.zq-lp-heading-strip::after {
  display: none;
}

[data-lp-template="ocean"] .zq-section h2.zq-lp-heading-strip::before,
[data-lp-template="ocean"] .zq-section h2.zq-lp-heading-strip::after {
  display: none;
}

[data-lp-template="mono"] .zq-section h2.zq-lp-heading-strip::before,
[data-lp-template="mono"] .zq-section h2.zq-lp-heading-strip::after {
  display: none;
}

[data-lp-template="rose"] .zq-section h2.zq-lp-heading-strip::before,
[data-lp-template="rose"] .zq-section h2.zq-lp-heading-strip::after {
  display: none;
}

[data-lp-template="aurora"] .zq-section h2.zq-lp-heading-strip::before,
[data-lp-template="aurora"] .zq-section h2.zq-lp-heading-strip::after {
  display: none;
}

[data-lp-template="earth"] .zq-section h2.zq-lp-heading-strip::before,
[data-lp-template="earth"] .zq-section h2.zq-lp-heading-strip::after {
  display: none;
}

/* ==========================================================================
   More hero layouts (Split image left/right, Banner, Compact) — layout only;
   colours still come from the theme. Applied on tablet+ except Banner and
   Compact, which also work stacked on phones.
   ========================================================================== */
@media (min-width: 768px) {
  .zq-lp-hero-split_left {
    grid-template-columns: 45% 1fr;
    gap: 3rem;
  }

  .zq-lp-hero-split_left .zq-lp-hero-media { order: 1; }
  .zq-lp-hero-split_left .zq-lp-hero-content { order: 2; }

  .zq-lp-hero-split_right {
    grid-template-columns: 1fr 45%;
    gap: 3rem;
  }

  .zq-lp-hero-split_right .zq-lp-hero-content { order: 1; }
  .zq-lp-hero-split_right .zq-lp-hero-media { order: 2; }
}

/* Compact — text only, centered, no hero image (image sections stay below). */
.zq-lp-hero-compact {
  min-height: 0;
  text-align: center;
  grid-template-columns: 1fr;
}

.zq-lp-hero-compact .zq-lp-hero-media {
  display: none;
}

.zq-lp-hero-compact .zq-lp-hero-desc,
.zq-lp-hero-compact .zq-subtitle {
  margin-left: auto;
  margin-right: auto;
}

.zq-lp-hero-compact .zq-price-block,
.zq-lp-hero-compact .zq-lp-cta-row,
.zq-lp-hero-compact .zq-lp-hero-mini-trust,
.zq-lp-hero-compact .zq-lp-badge-row {
  justify-content: center;
}

/* Banner — main image fills the hero behind a dark overlay; text is white. */
.zq-lp-hero-banner {
  min-height: 460px;
  grid-template-columns: 1fr;
  align-items: end;
  color: #fff;
}

.zq-lp-hero-banner .zq-lp-hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.zq-lp-hero-banner .zq-lp-image-frame {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

.zq-lp-hero-banner .zq-lp-image-frame::before,
.zq-lp-hero-banner .zq-gallery {
  display: none;
}

.zq-lp-hero-banner .zq-lp-image-frame img,
.zq-lp-hero-banner .zq-lp-hero-slides,
.zq-lp-hero-banner .zq-lp-hero-slide {
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: 0;
}

.zq-lp-hero-banner .zq-lp-hero-media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(8, 10, 20, 0.86), rgba(8, 10, 20, 0.5) 60%, rgba(8, 10, 20, 0.22));
  pointer-events: none;
}

.zq-lp-hero-banner .zq-lp-hero-content {
  position: relative;
  z-index: 2;
  max-width: 40rem;
}

.zq-product.zq-lp .zq-lp-hero-banner .zq-lp-hero-content h1,
.zq-product.zq-lp .zq-lp-hero-banner .zq-subtitle,
.zq-product.zq-lp .zq-lp-hero-banner .zq-lp-hero-desc,
.zq-product.zq-lp .zq-lp-hero-banner .zq-price-selling,
.zq-product.zq-lp .zq-lp-hero-banner .zq-lp-hero-mini-trust {
  color: #fff;
}

.zq-product.zq-lp .zq-lp-hero-banner .zq-price-regular {
  color: rgba(255, 255, 255, 0.72);
}

.zq-product.zq-lp .zq-lp-hero-banner .zq-lp-save {
  color: #86EFAC;
}

.zq-product.zq-lp .zq-lp-hero-banner .zq-discount {
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
}

.zq-product.zq-lp .zq-lp-hero-banner .zq-secondary-btn {
  background: transparent;
  color: #fff;
  border-color: #fff;
}

@media (max-width: 767px) {
  .zq-lp-hero-banner {
    min-height: 520px;
  }

  .zq-lp-hero-banner .zq-lp-hero-media::after {
    background: linear-gradient(180deg, rgba(8, 10, 20, 0.45), rgba(8, 10, 20, 0.88));
  }
}

/* ==========================================================================
   Six more themes: Mint, Lavender, Slate, Ruby, Forest, Retro.
   Each sets hero, heading strip and panels, card tokens, page background and
   the closing-banner (--cta-*) tokens.
   ========================================================================== */

/* Mint — fresh mint and teal, clean and modern (fintech, health, productivity). */
[data-lp-template="mint"] {
  --zq-lp-hero-bg: linear-gradient(160deg, #ECFDF5, #D1FAE5 70%, #F0FDFA);
  --zq-lp-hero-text: #064E3B;
  --zq-lp-hero-desc-color: #3F6B5B;
  --zq-lp-blob-opacity: 0.14;
  --zq-lp-radius-xl: 20px;
  --zq-lp-radius-lg: 16px;
  --zq-lp-radius-md: 12px;
  --zq-lp-card-shadow: 0 10px 26px rgba(5, 150, 105, 0.12);
  --zq-lp-c-bg: #fff;
  --zq-lp-c-bc: #A7F3D0;
  --zq-lp-panel-bg: #F0FDF9;
}
[data-lp-template="mint"] .zq-lp-hero { border: 1.5px solid #A7F3D0; border-left: 4px solid #059669; }
[data-lp-template="mint"] .zq-section h2.zq-lp-heading-strip { background: linear-gradient(90deg, #059669, #0D9488); }
[data-lp-template="mint"] .zq-lp-left-outline { border-left-color: #059669; }
[data-lp-template="mint"] .zq-lp .buy-button { background: linear-gradient(135deg, #059669, #0D9488); }
[data-lp-template="mint"] .zq-lp-final-cta {
  --cta-bg-start: #064E3B;
  --cta-bg-end: #0F766E;
  --cta-accent: #6EE7B7;
  --cta-accent-2: #5EEAD4;
  --cta-primary-btn-text: #064E3B;
  --cta-secondary-btn: linear-gradient(135deg, #059669, #0D9488);
  --cta-badge-bg: linear-gradient(135deg, #059669, #0D9488);
  --cta-glow: rgba(5, 150, 105, 0.5);
}
body:has(.zq-lp[data-lp-template="mint"]:not([data-lp-custom-bg])) { background: #F0FDF9; }

/* Lavender — soft violet, calm and friendly (coaching, wellness, journals). */
[data-lp-template="lavender"] {
  --zq-lp-hero-bg: linear-gradient(160deg, #F5F3FF, #EDE9FE 60%, #FAF5FF);
  --zq-lp-hero-text: #2E1065;
  --zq-lp-hero-desc-color: #5B4B8A;
  --zq-lp-blob-opacity: 0.16;
  --zq-lp-radius-xl: 26px;
  --zq-lp-radius-lg: 20px;
  --zq-lp-radius-md: 16px;
  --zq-lp-card-shadow: 0 10px 26px rgba(124, 58, 237, 0.12);
  --zq-lp-c-bg: #fff;
  --zq-lp-c-bc: #DDD6FE;
  --zq-lp-panel-bg: #FAF7FF;
}
[data-lp-template="lavender"] .zq-lp-hero { border: 1.5px solid #DDD6FE; border-left: 4px solid #7C3AED; }
[data-lp-template="lavender"] .zq-section h2.zq-lp-heading-strip {
  background: #EDE9FE;
  color: #5B21B6;
  border-radius: 999px;
  box-shadow: none;
  text-shadow: none;
}
[data-lp-template="lavender"] .zq-lp-left-outline { border-left-color: #7C3AED; }
[data-lp-template="lavender"] .zq-lp .buy-button { background: linear-gradient(135deg, #7C3AED, #A855F7); }
[data-lp-template="lavender"] .zq-lp-final-cta {
  --cta-bg-start: #4C1D95;
  --cta-bg-end: #7C3AED;
  --cta-accent: #E9D5FF;
  --cta-accent-2: #F0ABFC;
  --cta-primary-btn-text: #4C1D95;
  --cta-secondary-btn: linear-gradient(135deg, #A855F7, #DB2777);
  --cta-badge-bg: linear-gradient(135deg, #A855F7, #DB2777);
  --cta-glow: rgba(124, 58, 237, 0.5);
}
body:has(.zq-lp[data-lp-template="lavender"]:not([data-lp-custom-bg])) { background: #FAF7FF; }

/* Slate — cool neutral greys, sharp and technical (developer tools, B2B). */
[data-lp-template="slate"] {
  --zq-lp-hero-bg: linear-gradient(160deg, #F8FAFC, #EEF2F7);
  --zq-lp-hero-text: #0F172A;
  --zq-lp-hero-desc-color: #475569;
  --zq-lp-blob-opacity: 0;
  --zq-lp-radius-xl: 8px;
  --zq-lp-radius-lg: 8px;
  --zq-lp-radius-md: 6px;
  --zq-lp-card-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
  --zq-lp-heading-weight: 700;
  --zq-lp-c-bg: #fff;
  --zq-lp-c-bc: #CBD5E1;
  --zq-lp-c-bw: 1px;
  --zq-lp-panel-bg: #fff;
}
[data-lp-template="slate"] .zq-lp-hero { border: 1px solid #CBD5E1; border-left: 4px solid #334155; }
[data-lp-template="slate"].zq-lp .zq-price-selling { color: #1E293B; }
[data-lp-template="slate"].zq-lp .zq-discount { background: #E2E8F0; color: #0F172A; }
[data-lp-template="slate"] .zq-lp .buy-button { background: #1E293B; box-shadow: none; border-radius: 6px; }
[data-lp-template="slate"] .zq-section h2.zq-lp-heading-strip {
  background: #1E293B;
  color: #F1F5F9;
  border-radius: 6px;
  box-shadow: none;
  text-shadow: none;
  font-weight: 700;
}
[data-lp-template="slate"] .zq-lp-left-outline { background: #fff; border: 1px solid #CBD5E1; border-left: 4px solid #334155; }
[data-lp-template="slate"] .zq-lp-final-cta {
  --cta-bg-start: #0F172A;
  --cta-bg-end: #1E293B;
  --cta-accent: #94A3B8;
  --cta-accent-2: #CBD5E1;
  --cta-primary-btn-text: #0F172A;
  --cta-secondary-btn: transparent;
  --cta-secondary-btn-text: #F1F5F9;
  --cta-secondary-border: #94A3B8;
  --cta-badge-bg: #334155;
  --cta-glow: rgba(148, 163, 184, 0.28);
  --cta-btn-radius: 8px;
  --cta-card-radius: 12px;
}
body:has(.zq-lp[data-lp-template="slate"]:not([data-lp-custom-bg])) { background: #F1F5F9; }

/* Ruby — bold red-and-black, high urgency (sales, launches, deals). */
[data-lp-template="ruby"] {
  --zq-lp-hero-bg: linear-gradient(135deg, #111827, #7F1D1D 75%, #B91C1C);
  --zq-lp-hero-text: #fff;
  --zq-lp-hero-desc-color: rgba(255, 255, 255, 0.9);
  --zq-lp-blob-opacity: 0.22;
  --zq-lp-radius-xl: 14px;
  --zq-lp-radius-lg: 12px;
  --zq-lp-radius-md: 10px;
  --zq-lp-card-shadow: 0 10px 26px rgba(185, 28, 28, 0.14);
  --zq-lp-heading-weight: 800;
  --zq-lp-c-bg: #fff;
  --zq-lp-c-bc: #FECACA;
  --zq-lp-panel-bg: #FFF5F5;
}
[data-lp-template="ruby"] .zq-lp-hero { border-color: transparent; border-left-color: rgba(255, 255, 255, 0.4); }
[data-lp-template="ruby"].zq-lp .zq-price-selling,
[data-lp-template="ruby"] .zq-lp-hero-mini-trust { color: #fff; }
[data-lp-template="ruby"].zq-lp .zq-price-regular { color: rgba(255, 255, 255, 0.75); }
[data-lp-template="ruby"] .zq-lp-save { color: #FDE68A; }
[data-lp-template="ruby"].zq-lp .zq-discount,
[data-lp-template="ruby"] .zq-lp-eyebrow { background: #FACC15; color: #111827; }
[data-lp-template="ruby"] .zq-lp-mini-trust-check { background: #FACC15; color: #111827; }
[data-lp-template="ruby"] .zq-lp-hero .buy-button { background: #FACC15; color: #111827; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.5); }
[data-lp-template="ruby"] .zq-lp-hero .zq-secondary-btn { background: transparent; color: #fff; border-color: #fff; }
[data-lp-template="ruby"] .zq-section h2.zq-lp-heading-strip { background: linear-gradient(90deg, #B91C1C, #111827); }
[data-lp-template="ruby"] .zq-lp-left-outline { border-left-color: #DC2626; }
[data-lp-template="ruby"] .zq-lp .buy-button { background: linear-gradient(135deg, #DC2626, #991B1B); }
[data-lp-template="ruby"] .zq-lp-final-cta {
  --cta-bg-start: #111827;
  --cta-bg-end: #7F1D1D;
  --cta-accent: #FDE047;
  --cta-accent-2: #FCA5A5;
  --cta-primary-btn: #FACC15;
  --cta-primary-btn-text: #111827;
  --cta-secondary-btn: linear-gradient(135deg, #DC2626, #991B1B);
  --cta-badge-bg: linear-gradient(135deg, #DC2626, #991B1B);
  --cta-glow: rgba(220, 38, 38, 0.5);
}
body:has(.zq-lp[data-lp-template="ruby"]:not([data-lp-custom-bg])) { background: #FFF7F7; }

/* Forest — deep green with gold accents, established and premium (finance, nature, luxury goods). */
[data-lp-template="forest"] {
  --zq-lp-hero-bg: linear-gradient(135deg, #052E16, #14532D 70%, #166534);
  --zq-lp-hero-text: #F0FDF4;
  --zq-lp-hero-desc-color: rgba(240, 253, 244, 0.86);
  --zq-lp-blob-opacity: 0.2;
  --zq-lp-radius-xl: 16px;
  --zq-lp-radius-lg: 14px;
  --zq-lp-radius-md: 10px;
  --zq-lp-card-shadow: 0 10px 26px rgba(20, 83, 45, 0.14);
  --zq-lp-heading-weight: 800;
  --zq-lp-c-bg: #fff;
  --zq-lp-c-bc: #CFE3CC;
  --zq-lp-panel-bg: #F6FBF4;
}
[data-lp-template="forest"] .zq-lp-hero { border-color: transparent; border-left-color: #D4AF37; }
[data-lp-template="forest"].zq-lp .zq-price-selling { color: #FDE68A; }
[data-lp-template="forest"].zq-lp .zq-price-regular { color: rgba(240, 253, 244, 0.7); }
[data-lp-template="forest"] .zq-lp-hero-mini-trust { color: #F0FDF4; }
[data-lp-template="forest"] .zq-lp-save { color: #BBF7D0; }
[data-lp-template="forest"].zq-lp .zq-discount,
[data-lp-template="forest"] .zq-lp-eyebrow { background: #D4AF37; color: #052E16; }
[data-lp-template="forest"] .zq-lp-mini-trust-check { background: #D4AF37; color: #052E16; }
[data-lp-template="forest"] .zq-lp-hero .buy-button { background: linear-gradient(135deg, #D4AF37, #F5D06F); color: #052E16; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.5); }
[data-lp-template="forest"] .zq-lp-hero .zq-secondary-btn { background: transparent; color: #F0FDF4; border-color: #D4AF37; }
[data-lp-template="forest"] .zq-section h2.zq-lp-heading-strip { background: linear-gradient(90deg, #14532D, #166534); }
[data-lp-template="forest"] .zq-lp-left-outline { border-left-color: #D4AF37; }
[data-lp-template="forest"] .zq-lp .buy-button { background: linear-gradient(135deg, #15803D, #14532D); }
[data-lp-template="forest"] .zq-lp-final-cta {
  --cta-bg-start: #052E16;
  --cta-bg-end: #14532D;
  --cta-accent: #F5D06F;
  --cta-accent-2: #D4AF37;
  --cta-primary-btn: linear-gradient(135deg, #F5D06F, #D4AF37);
  --cta-primary-btn-text: #052E16;
  --cta-secondary-btn: transparent;
  --cta-secondary-btn-text: #F5D06F;
  --cta-secondary-border: #D4AF37;
  --cta-badge-bg: linear-gradient(135deg, #F5D06F, #D4AF37);
  --cta-badge-text: #052E16;
  --cta-icon: #D4AF37;
  --cta-save: #BBF7D0;
  --cta-glow: rgba(212, 175, 55, 0.35);
  --cta-deco: rgba(212, 175, 55, 0.1);
}
body:has(.zq-lp[data-lp-template="forest"]:not([data-lp-custom-bg])) { background: #F6FBF4; }

/* Retro — cream paper, thick dark outlines and hard offset shadows (playful brands, creators). */
[data-lp-template="retro"] {
  --zq-lp-hero-bg: #FFF4D6;
  --zq-lp-hero-text: #1F1A17;
  --zq-lp-hero-desc-color: #4A3F35;
  --zq-lp-blob-opacity: 0;
  --zq-lp-radius-xl: 16px;
  --zq-lp-radius-lg: 14px;
  --zq-lp-radius-md: 12px;
  --zq-lp-card-shadow: 4px 4px 0 #1F1A17;
  --zq-lp-heading-weight: 800;
  --zq-lp-c-bg: #FFFDF5;
  --zq-lp-c-bc: #1F1A17;
  --zq-lp-c-bw: 2px;
  --zq-lp-panel-bg: #FFF9E6;
}
[data-lp-template="retro"] .zq-lp-hero { border: 2px solid #1F1A17; box-shadow: 6px 6px 0 #1F1A17; }
[data-lp-template="retro"].zq-lp .zq-price-selling { color: #1F1A17; }
[data-lp-template="retro"].zq-lp .zq-discount { background: #2DD4BF; color: #1F1A17; border: 2px solid #1F1A17; }
[data-lp-template="retro"] .zq-lp-eyebrow { background: #FFB020; color: #1F1A17; border: 2px solid #1F1A17; }
[data-lp-template="retro"] .zq-lp-mini-trust-check { background: #1F1A17; }
[data-lp-template="retro"] .zq-lp .buy-button {
  background: #FF7A3D;
  color: #1F1A17;
  border: 2px solid #1F1A17;
  box-shadow: 4px 4px 0 #1F1A17;
}
[data-lp-template="retro"] .zq-lp .zq-secondary-btn { border: 2px solid #1F1A17; color: #1F1A17; background: #FFFDF5; box-shadow: 4px 4px 0 #1F1A17; }
[data-lp-template="retro"] .zq-section h2.zq-lp-heading-strip {
  background: #FF7A3D;
  color: #1F1A17;
  border: 2px solid #1F1A17;
  border-radius: 999px;
  box-shadow: 3px 3px 0 #1F1A17;
  text-shadow: none;
  font-weight: 800;
}
[data-lp-template="retro"] .zq-lp-left-outline { border: 2px solid #1F1A17; box-shadow: 4px 4px 0 #1F1A17; }
[data-lp-template="retro"] .zq-lp-final-cta {
  --cta-bg-start: #FFB020;
  --cta-bg-end: #FF7A3D;
  --cta-text-primary: #1F1A17;
  --cta-text-secondary: #3B2F26;
  --cta-pill-bg: rgba(255, 255, 255, 0.55);
  --cta-card-bg: #FFFDF5;
  --cta-border: #1F1A17;
  --cta-glow: rgba(31, 26, 23, 0.5);
  --cta-deco: rgba(31, 26, 23, 0.08);
  --cta-accent: #1F1A17;
  --cta-accent-2: #1F1A17;
  --cta-icon: #1F1A17;
  --cta-save: #1F1A17;
  --cta-focus: #1F1A17;
  --cta-ring: rgba(31, 26, 23, 0.2);
  --cta-primary-btn: #1F1A17;
  --cta-primary-btn-text: #FFF4D6;
  --cta-secondary-btn: #FFFDF5;
  --cta-secondary-btn-text: #1F1A17;
  --cta-secondary-border: #1F1A17;
  --cta-badge-bg: #1F1A17;
  --cta-badge-text: #FFF4D6;
}
.zq-product.zq-lp[data-lp-template="retro"] .zq-lp-final-cta { border-width: 2px; box-shadow: 6px 6px 0 #1F1A17; }
body:has(.zq-lp[data-lp-template="retro"]:not([data-lp-custom-bg])) { background: #FFF8E1; }

[data-lp-template="mint"] .zq-section h2.zq-lp-heading-strip::before,
[data-lp-template="mint"] .zq-section h2.zq-lp-heading-strip::after {
  display: none;
}

[data-lp-template="lavender"] .zq-section h2.zq-lp-heading-strip::before,
[data-lp-template="lavender"] .zq-section h2.zq-lp-heading-strip::after {
  display: none;
}

[data-lp-template="slate"] .zq-section h2.zq-lp-heading-strip::before,
[data-lp-template="slate"] .zq-section h2.zq-lp-heading-strip::after {
  display: none;
}

[data-lp-template="ruby"] .zq-section h2.zq-lp-heading-strip::before,
[data-lp-template="ruby"] .zq-section h2.zq-lp-heading-strip::after {
  display: none;
}

[data-lp-template="forest"] .zq-section h2.zq-lp-heading-strip::before,
[data-lp-template="forest"] .zq-section h2.zq-lp-heading-strip::after {
  display: none;
}

[data-lp-template="retro"] .zq-section h2.zq-lp-heading-strip::before,
[data-lp-template="retro"] .zq-section h2.zq-lp-heading-strip::after {
  display: none;
}

/* Landing page content column: 1240px (a little wider than the original
   1180px), with side padding that scales with the viewport. */
.zq-product.zq-lp {
  max-width: 1240px;
  padding-left: clamp(1rem, 2.5vw, 2rem);
  padding-right: clamp(1rem, 2.5vw, 2rem);
}

/* Trust strip (Secure Payment / Instant Digital Delivery / Easy Access /
   Support Available): force deep, near-black text so it stays readable on
   every theme's card background, instead of inheriting each theme's own
   (sometimes light) text color. */
.zq-product.zq-lp .zq-lp-trust-card .zq-lp-trust-title,
.zq-product.zq-lp .zq-lp-trust-card p {
  color: #111827;
}

/* ==========================================================================
   Six more themes: Coral, Steel, Amethyst, Amber, Ivory, Cyber.
   ========================================================================== */

/* Coral — warm coral/peach, friendly and energetic (apps, communities, courses). */
[data-lp-template="coral"] {
  --zq-lp-hero-bg: linear-gradient(160deg, #FFF1EE, #FFE1D6 65%, #FFF7ED);
  --zq-lp-hero-text: #7C2D12;
  --zq-lp-hero-desc-color: #8A4A34;
  --zq-lp-blob-opacity: 0.18;
  --zq-lp-radius-xl: 24px;
  --zq-lp-radius-lg: 18px;
  --zq-lp-radius-md: 14px;
  --zq-lp-card-shadow: 0 10px 26px rgba(234, 88, 12, 0.12);
  --zq-lp-heading-weight: 700;
  --zq-lp-c-bg: #fff;
  --zq-lp-c-bc: #FFD3BE;
  --zq-lp-panel-bg: #FFF6F2;
}
[data-lp-template="coral"] .zq-lp-hero { border: 1.5px solid #FFD3BE; border-left: 4px solid #FB7A4C; }
[data-lp-template="coral"] .zq-section h2.zq-lp-heading-strip { background: linear-gradient(90deg, #FB7A4C, #F43F5E); }
[data-lp-template="coral"] .zq-lp-left-outline { border-left-color: #FB7A4C; }
[data-lp-template="coral"] .zq-lp .buy-button { background: linear-gradient(135deg, #FB7A4C, #F43F5E); }
[data-lp-template="coral"] .zq-lp-final-cta {
  --cta-bg-start: #EA580C;
  --cta-bg-end: #E11D48;
  --cta-accent: #FFE8DA;
  --cta-accent-2: #FED7AA;
  --cta-primary-btn-text: #C2410C;
  --cta-secondary-btn: linear-gradient(135deg, #7C2D12, #881337);
  --cta-badge-bg: linear-gradient(135deg, #7C2D12, #881337);
  --cta-glow: rgba(234, 88, 12, 0.45);
}
body:has(.zq-lp[data-lp-template="coral"]:not([data-lp-custom-bg])) { background: #FFF6F2; }

/* Steel — cool blue-grey metallic, precise and dependable (tools, hardware, industrial). */
[data-lp-template="steel"] {
  --zq-lp-hero-bg: linear-gradient(160deg, #F1F5F9, #E2E8F0);
  --zq-lp-hero-text: #1E293B;
  --zq-lp-hero-desc-color: #475569;
  --zq-lp-blob-opacity: 0.08;
  --zq-lp-radius-xl: 12px;
  --zq-lp-radius-lg: 10px;
  --zq-lp-radius-md: 8px;
  --zq-lp-card-shadow: 0 6px 18px rgba(51, 65, 85, 0.1);
  --zq-lp-heading-weight: 700;
  --zq-lp-c-bg: #fff;
  --zq-lp-c-bc: #CBD5E1;
  --zq-lp-c-bw: 1px;
  --zq-lp-panel-bg: #F8FAFC;
}
[data-lp-template="steel"] .zq-lp-hero { border: 1px solid #CBD5E1; border-left: 4px solid #475569; }
[data-lp-template="steel"] .zq-section h2.zq-lp-heading-strip {
  background: linear-gradient(90deg, #475569, #64748B);
}
[data-lp-template="steel"] .zq-lp-left-outline { border-left-color: #475569; }
[data-lp-template="steel"] .zq-lp .buy-button { background: linear-gradient(135deg, #334155, #1E293B); border-radius: 8px; }
[data-lp-template="steel"] .zq-lp-final-cta {
  --cta-bg-start: #1E293B;
  --cta-bg-end: #334155;
  --cta-accent: #CBD5E1;
  --cta-accent-2: #94A3B8;
  --cta-primary-btn-text: #1E293B;
  --cta-secondary-btn: linear-gradient(135deg, #475569, #64748B);
  --cta-badge-bg: #475569;
  --cta-glow: rgba(71, 85, 105, 0.4);
  --cta-btn-radius: 8px;
  --cta-card-radius: 12px;
}
body:has(.zq-lp[data-lp-template="steel"]:not([data-lp-custom-bg])) { background: #F1F5F9; }

/* Amethyst — rich purple-to-indigo, premium SaaS/AI look (dark hero, glowing accents). */
[data-lp-template="amethyst"] {
  --zq-lp-hero-bg: linear-gradient(135deg, #2E1065, #4C1D95 55%, #6D28D9);
  --zq-lp-hero-text: #F5F3FF;
  --zq-lp-hero-desc-color: rgba(245, 243, 255, 0.86);
  --zq-lp-blob-opacity: 0.3;
  --zq-lp-radius-xl: 20px;
  --zq-lp-radius-lg: 16px;
  --zq-lp-radius-md: 12px;
  --zq-lp-card-shadow: 0 10px 28px rgba(109, 40, 217, 0.16);
  --zq-lp-heading-weight: 800;
  --zq-lp-c-bg: #fff;
  --zq-lp-c-bc: #DDD6FE;
  --zq-lp-panel-bg: #F7F5FF;
}
[data-lp-template="amethyst"] .zq-lp-hero { border-color: transparent; border-left-color: rgba(255, 255, 255, 0.5); }
[data-lp-template="amethyst"].zq-lp .zq-price-selling,
[data-lp-template="amethyst"] .zq-lp-hero-mini-trust { color: #fff; }
[data-lp-template="amethyst"].zq-lp .zq-price-regular { color: rgba(245, 243, 255, 0.75); }
[data-lp-template="amethyst"] .zq-lp-save { color: #DDD6FE; }
[data-lp-template="amethyst"].zq-lp .zq-discount,
[data-lp-template="amethyst"] .zq-lp-eyebrow { background: rgba(255, 255, 255, 0.22); color: #fff; }
[data-lp-template="amethyst"] .zq-lp-mini-trust-check { background: #fff; color: #6D28D9; }
[data-lp-template="amethyst"] .zq-lp-hero .buy-button { background: #fff; color: #5B21B6; box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.4); }
[data-lp-template="amethyst"] .zq-lp-hero .zq-secondary-btn { background: transparent; color: #fff; border-color: #fff; }
[data-lp-template="amethyst"] .zq-section h2.zq-lp-heading-strip { background: linear-gradient(90deg, #6D28D9, #9333EA); }
[data-lp-template="amethyst"] .zq-lp-left-outline { border-left-color: #7C3AED; }
[data-lp-template="amethyst"] .zq-lp-final-cta {
  --cta-bg-start: #2E1065;
  --cta-bg-end: #6D28D9;
  --cta-accent: #E9D5FF;
  --cta-accent-2: #C4B5FD;
  --cta-primary-btn-text: #4C1D95;
  --cta-secondary-btn: linear-gradient(135deg, #9333EA, #C026D3);
  --cta-badge-bg: linear-gradient(135deg, #9333EA, #C026D3);
  --cta-glow: rgba(109, 40, 217, 0.55);
}
body:has(.zq-lp[data-lp-template="amethyst"]:not([data-lp-custom-bg])) { background: #F7F5FF; }

/* Amber — warm golden-yellow, upbeat and optimistic (deals, education, creators). */
[data-lp-template="amber"] {
  --zq-lp-hero-bg: linear-gradient(160deg, #FFFBEB, #FEF3C7 65%, #FFF7ED);
  --zq-lp-hero-text: #78350F;
  --zq-lp-hero-desc-color: #8A5A1F;
  --zq-lp-blob-opacity: 0.16;
  --zq-lp-radius-xl: 22px;
  --zq-lp-radius-lg: 18px;
  --zq-lp-radius-md: 14px;
  --zq-lp-card-shadow: 0 10px 26px rgba(217, 119, 6, 0.12);
  --zq-lp-heading-weight: 700;
  --zq-lp-c-bg: #fff;
  --zq-lp-c-bc: #FDE68A;
  --zq-lp-panel-bg: #FFFCF2;
}
[data-lp-template="amber"] .zq-lp-hero { border: 1.5px solid #FDE68A; border-left: 4px solid #D97706; }
[data-lp-template="amber"] .zq-section h2.zq-lp-heading-strip {
  background: #FEF3C7;
  color: #92400E;
  border-radius: 999px;
  box-shadow: none;
  text-shadow: none;
}
[data-lp-template="amber"] .zq-lp-left-outline { border-left-color: #D97706; }
[data-lp-template="amber"] .zq-lp .buy-button { background: linear-gradient(135deg, #D97706, #F59E0B); }
[data-lp-template="amber"] .zq-lp-final-cta {
  --cta-bg-start: #92400E;
  --cta-bg-end: #D97706;
  --cta-accent: #FEF3C7;
  --cta-accent-2: #FDE68A;
  --cta-primary-btn-text: #92400E;
  --cta-secondary-btn: linear-gradient(135deg, #78350F, #B45309);
  --cta-badge-bg: linear-gradient(135deg, #78350F, #B45309);
  --cta-glow: rgba(217, 119, 6, 0.45);
}
body:has(.zq-lp[data-lp-template="amber"]:not([data-lp-custom-bg])) { background: #FFFCF2; }

/* Ivory — very light neutral cream, understated and airy (premium ebooks, journals). */
[data-lp-template="ivory"] {
  --zq-lp-hero-bg: #FFFEF9;
  --zq-lp-hero-text: #292524;
  --zq-lp-hero-desc-color: #57534E;
  --zq-lp-blob-opacity: 0;
  --zq-lp-radius-xl: 16px;
  --zq-lp-radius-lg: 12px;
  --zq-lp-radius-md: 10px;
  --zq-lp-card-shadow: 0 4px 16px rgba(41, 37, 36, 0.06);
  --zq-lp-heading-weight: 600;
  --zq-lp-c-bg: #fff;
  --zq-lp-c-bc: #E7E2D8;
  --zq-lp-c-bw: 1px;
  --zq-lp-panel-bg: #FFFEF9;
}
[data-lp-template="ivory"] .zq-lp-hero { border: 1px solid #E7E2D8; }
[data-lp-template="ivory"] .zq-section h2.zq-lp-heading-strip {
  background: none;
  color: #292524;
  text-align: left;
  padding-left: 0;
  border-bottom: 2px solid var(--zq-lp-primary);
  border-radius: 0;
  box-shadow: none;
  text-shadow: none;
}
[data-lp-template="ivory"] .zq-lp-left-outline { background: #fff; border: 1px solid #E7E2D8; }
[data-lp-template="ivory"] .zq-lp .buy-button { box-shadow: none; }
[data-lp-template="ivory"] .zq-lp-final-cta {
  --cta-bg-start: #292524;
  --cta-bg-end: #44403C;
  --cta-accent: color-mix(in srgb, var(--zq-lp-primary) 55%, #fff);
  --cta-accent-2: color-mix(in srgb, var(--zq-lp-secondary) 55%, #fff);
  --cta-secondary-btn: linear-gradient(135deg, var(--zq-lp-primary), var(--zq-lp-secondary));
  --cta-badge-bg: linear-gradient(135deg, var(--zq-lp-primary), var(--zq-lp-secondary));
  --cta-glow: rgba(41, 37, 36, 0.3);
  --cta-btn-radius: 10px;
  --cta-card-radius: 14px;
}
body:has(.zq-lp[data-lp-template="ivory"]:not([data-lp-custom-bg])) { background: #FDFCF8; }

/* Cyber — near-black with neon cyan/magenta wireframe accents (gaming, tech, dev tools). */
[data-lp-template="cyber"] {
  --zq-lp-hero-bg: linear-gradient(160deg, #05060A, #0B0F1A);
  --zq-lp-hero-text: #E6FFFB;
  --zq-lp-hero-desc-color: rgba(230, 255, 251, 0.75);
  --zq-lp-blob-opacity: 0.35;
  --zq-lp-radius-xl: 4px;
  --zq-lp-radius-lg: 4px;
  --zq-lp-radius-md: 2px;
  --zq-lp-card-shadow: 0 0 20px rgba(34, 211, 238, 0.14);
  --zq-lp-heading-weight: 800;
  --zq-lp-c-bg: #0B0F1A;
  --zq-lp-c-bc: #22D3EE;
  --zq-lp-c-bw: 1px;
  --zq-lp-panel-bg: #0B0F1A;
}
[data-lp-template="cyber"] .zq-lp-hero { border: 1px solid #22D3EE; box-shadow: 0 0 30px rgba(34, 211, 238, 0.25); }
[data-lp-template="cyber"].zq-lp .zq-price-selling { color: #22D3EE; text-shadow: 0 0 14px rgba(34, 211, 238, 0.7); }
[data-lp-template="cyber"].zq-lp .zq-price-regular { color: rgba(230, 255, 251, 0.55); }
[data-lp-template="cyber"] .zq-lp-hero-mini-trust { color: #E6FFFB; }
[data-lp-template="cyber"] .zq-lp-save { color: #34D399; }
[data-lp-template="cyber"].zq-lp .zq-discount,
[data-lp-template="cyber"] .zq-lp-eyebrow { background: #F472B6; color: #05060A; }
[data-lp-template="cyber"] .zq-lp-mini-trust-check { background: #22D3EE; color: #05060A; }
[data-lp-template="cyber"] .zq-lp-hero .buy-button { background: linear-gradient(135deg, #22D3EE, #F472B6); color: #05060A; box-shadow: 0 0 26px rgba(34, 211, 238, 0.5); }
[data-lp-template="cyber"] .zq-lp-hero .zq-secondary-btn { background: transparent; color: #22D3EE; border-color: #22D3EE; }
[data-lp-template="cyber"] .zq-section h2.zq-lp-heading-strip {
  background: #0B0F1A;
  color: #22D3EE;
  border: 1px solid #22D3EE;
  border-radius: 2px;
  box-shadow: 0 0 18px rgba(34, 211, 238, 0.3);
  text-shadow: none;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
[data-lp-template="cyber"] .zq-lp-left-outline { background: #0B0F1A; border-left-color: #22D3EE; border: 1px solid rgba(34, 211, 238, 0.35); }
[data-lp-template="cyber"] .zq-lp .buy-button { background: linear-gradient(135deg, #22D3EE, #F472B6); color: #05060A; }
[data-lp-template="cyber"] .zq-lp-final-cta {
  --cta-bg-start: #05060A;
  --cta-bg-end: #0B0F1A;
  --cta-accent: #22D3EE;
  --cta-accent-2: #F472B6;
  --cta-text-secondary: rgba(230, 255, 251, 0.8);
  --cta-border: rgba(34, 211, 238, 0.55);
  --cta-card-bg: rgba(34, 211, 238, 0.08);
  --cta-primary-btn-text: #05060A;
  --cta-secondary-btn: linear-gradient(135deg, #F472B6, #C026D3);
  --cta-badge-bg: linear-gradient(135deg, #22D3EE, #F472B6);
  --cta-badge-text: #05060A;
  --cta-glow: rgba(34, 211, 238, 0.5);
  --cta-deco: rgba(34, 211, 238, 0.14);
  --cta-btn-radius: 4px;
  --cta-card-radius: 4px;
}
body:has(.zq-lp[data-lp-template="cyber"]:not([data-lp-custom-bg])) { background: #05060A; }

[data-lp-template="coral"] .zq-section h2.zq-lp-heading-strip::before,
[data-lp-template="coral"] .zq-section h2.zq-lp-heading-strip::after {
  display: none;
}

[data-lp-template="steel"] .zq-section h2.zq-lp-heading-strip::before,
[data-lp-template="steel"] .zq-section h2.zq-lp-heading-strip::after {
  display: none;
}

[data-lp-template="amethyst"] .zq-section h2.zq-lp-heading-strip::before,
[data-lp-template="amethyst"] .zq-section h2.zq-lp-heading-strip::after {
  display: none;
}

[data-lp-template="amber"] .zq-section h2.zq-lp-heading-strip::before,
[data-lp-template="amber"] .zq-section h2.zq-lp-heading-strip::after {
  display: none;
}

[data-lp-template="ivory"] .zq-section h2.zq-lp-heading-strip::before,
[data-lp-template="ivory"] .zq-section h2.zq-lp-heading-strip::after {
  display: none;
}

[data-lp-template="cyber"] .zq-section h2.zq-lp-heading-strip::before,
[data-lp-template="cyber"] .zq-section h2.zq-lp-heading-strip::after {
  display: none;
}

/* ==========================================================================
   Header — product landing pages only: a small colored product-title badge
   in the middle (replacing the search bar, which doesn't apply here) and a
   "Buy Now" button just before Cart, both colored from the product's own
   theme (Primary/Secondary Color), so they match the page below the fold.
   ========================================================================== */
.zq-header-product-badge {
  flex: 1;
  min-width: 0;
  max-width: 720px;
  margin: 0 auto;
  padding: 0.6rem 1.5rem;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--zq-hpb-primary, var(--zq-primary)), var(--zq-hpb-secondary, var(--zq-secondary)));
  color: #fff;
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.3;
  text-align: center;
  box-shadow: 0 4px 14px -4px color-mix(in srgb, var(--zq-hpb-primary, var(--zq-primary)) 55%, transparent);
}

.zq-header-buy-btn {
  display: inline-flex !important;
  align-items: center;
  margin-right: 0.85rem;
  color: #fff !important;
  background: linear-gradient(135deg, var(--zq-hpb-primary, var(--zq-primary)), var(--zq-hpb-secondary, var(--zq-secondary)));
  border-radius: 999px;
  padding: 0.6rem 1.25rem !important;
  font-weight: 700;
  font-size: 0.98rem;
  white-space: nowrap;
  box-shadow: 0 2px 10px -2px color-mix(in srgb, var(--zq-hpb-primary, var(--zq-primary)) 45%, transparent);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.zq-header-buy-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px -2px color-mix(in srgb, var(--zq-hpb-primary, var(--zq-primary)) 55%, transparent);
}

@media (max-width: 860px) {
  .zq-header-product-badge {
    display: none;
  }
}

@media (max-width: 480px) {
  .zq-header {
    padding: 0.85rem 0.6rem;
    gap: 0.4rem;
  }

  .zq-logo img {
    height: 28px;
  }

  .zq-header-buy-btn {
    margin-right: 0.35rem;
    padding: 0.5rem 0.7rem !important;
    font-size: 0.8rem;
  }

  .zq-nav-cart {
    padding: 0.5rem 0.7rem !important;
    gap: 0.3rem;
    font-size: 0.85rem;
  }

  .zq-cart-badge {
    min-width: 1.1rem;
    height: 1.1rem;
    font-size: 0.65rem;
  }
}

/* Sample Pages: a small label separating the image row from the video row
   below it (only shown when both exist, so a product with just one media
   type stays exactly as before). */
.zq-lp-sample-video-label {
  margin: 1.25rem 0 0.6rem;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--zq-muted);
}

/* --- Wishlist ("Saved"): heart on cards, Save button on product pages,
   header link, Saved page (wishlist.js) --- */

/* Card heart: top-right of the image, stacked under the Quick View eye. */
.zq-wish-btn {
  position: absolute;
  top: calc(0.6rem + 46px);
  right: 0.6rem;
  z-index: 3;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--zq-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.95);
  color: #94A3B8;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
  transition: transform 0.15s ease, color 0.15s ease;
}

.zq-wish-btn svg,
.zq-lp-save-btn svg,
.zq-nav-wish svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.zq-wish-btn:hover,
.zq-wish-btn:focus-visible {
  color: #E11D48;
  transform: scale(1.08);
}

.zq-wish-btn.is-saved,
.zq-lp-save-btn.is-saved {
  color: #E11D48;
}

.zq-wish-btn.is-saved svg,
.zq-lp-save-btn.is-saved svg {
  fill: currentColor;
}

.zq-wish-btn.is-saved svg {
  animation: zq-wish-pop 0.3s ease;
}

@keyframes zq-wish-pop {
  50% { transform: scale(1.3); }
}

.zq-wish-btn:focus-visible,
.zq-lp-save-btn:focus-visible,
.zq-qv-wish:focus-visible,
.zq-nav-wish:focus-visible {
  outline: 2px solid #E11D48;
  outline-offset: 2px;
}

/* Product page: "♡ Save" next to Add to Cart. */
.zq-lp-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.7rem 1.1rem;
  border: 1px solid var(--zq-border);
  border-radius: 999px;
  background: var(--zq-surface);
  color: var(--zq-text);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.zq-lp-save-btn:hover {
  border-color: #E11D48;
  color: #E11D48;
}

.zq-lp-save-btn.is-saved {
  border-color: rgba(225, 29, 72, 0.4);
  background: #FFF1F2;
}

/* Header heart with count. */
.zq-nav-wish {
  position: relative;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0 !important;
  border-radius: 50%;
  color: var(--zq-text);
}

.zq-nav-wish:hover {
  background: rgba(225, 29, 72, 0.08);
  color: #E11D48;
}

.zq-nav-wish .zq-cart-badge {
  position: absolute;
  top: -2px;
  right: -4px;
}

.zq-nav-wish .zq-cart-badge[hidden] {
  display: none;
}

/* Saved page. */
.zq-wishlist-head {
  margin-bottom: 1.5rem;
}

.zq-wishlist-head h1 {
  margin: 0 0 0.35rem;
  font-size: 1.75rem;
}

.zq-wishlist-head p,
.zq-wishlist-loading {
  margin: 0;
  color: var(--zq-muted);
  font-size: 0.92rem;
}

.zq-wishlist-loading[hidden],
.zq-wishlist-empty[hidden] {
  display: none;
}

.zq-wishlist-empty {
  padding: 3rem 1rem;
  text-align: center;
  background: var(--zq-surface);
  border: 1px dashed var(--zq-border);
  border-radius: 18px;
}

.zq-wishlist-empty-icon {
  font-size: 2.5rem;
  color: #E11D48;
  line-height: 1;
}

.zq-wishlist-empty h2 {
  margin: 0.75rem 0 0.35rem;
}

.zq-wishlist-empty p {
  margin: 0 0 1.25rem;
  color: var(--zq-muted);
}

/* Quick View: compact heart at the end of the Add to Cart / Full details row. */
.zq-qv-wish {
  flex: 0 0 46px;
  height: 46px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--zq-border);
  border-radius: 50%;
  background: var(--zq-surface);
  color: #94A3B8;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

.zq-qv-wish svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.zq-qv-wish:hover {
  border-color: #E11D48;
  color: #E11D48;
}

.zq-qv-wish.is-saved {
  border-color: rgba(225, 29, 72, 0.4);
  background: #FFF1F2;
  color: #E11D48;
}

.zq-qv-wish.is-saved svg {
  fill: currentColor;
  animation: zq-wish-pop 0.3s ease;
}

/* Keep Add to Cart, Full details and the heart on one row on narrow phones. */
@media (max-width: 420px) {
  .zq-qv-actions .zq-qv-secondary {
    flex-basis: 100px;
    font-size: 0.85rem;
  }
}

/* --- Landing page Quick View: vivid gradient pill in the hero CTA row plus a
   floating pill on phones (shown once the hero buttons scroll off-screen). --- */
.zq-lp-qv-btn,
.zq-lp-qv-float {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(120deg, #FF7A18, #FF3D77 35%, #A43CFF 70%, #3B82F6);
  background-size: 220% 100%;
  color: #fff;
  font: inherit;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  isolation: isolate;
  box-shadow: 0 8px 22px rgba(255, 61, 119, 0.35), 0 2px 6px rgba(164, 60, 255, 0.25);
  animation: zq-lp-qv-shift 6s ease-in-out infinite;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.zq-lp-qv-btn {
  padding: 0.7rem 1.15rem;
}

.zq-lp-qv-btn svg,
.zq-lp-qv-float svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  flex-shrink: 0;
}

/* Soft pulsing halo so the button catches the eye without being noisy. */
.zq-lp-qv-btn::after,
.zq-lp-qv-float::after {
  content: "";
  position: absolute;
  inset: -4px;
  z-index: -1;
  border-radius: inherit;
  background: inherit;
  opacity: 0.35;
  filter: blur(8px);
  animation: zq-lp-qv-pulse 2.4s ease-in-out infinite;
}

.zq-lp-qv-btn:hover,
.zq-lp-qv-btn:focus-visible,
.zq-lp-qv-float:hover,
.zq-lp-qv-float:focus-visible {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(255, 61, 119, 0.45), 0 4px 10px rgba(164, 60, 255, 0.35);
}

.zq-lp-qv-btn:focus-visible,
.zq-lp-qv-float:focus-visible {
  outline: 3px solid rgba(164, 60, 255, 0.5);
  outline-offset: 3px;
}

@keyframes zq-lp-qv-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes zq-lp-qv-pulse {
  0%, 100% { opacity: 0.25; transform: scale(0.97); }
  50% { opacity: 0.55; transform: scale(1.04); }
}

.zq-lp-qv-float {
  display: none;
}

@media (max-width: 640px) {
  .zq-lp-qv-float {
    display: inline-flex;
    position: fixed;
    left: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 45;
    height: 50px;
    padding: 0 1.1rem 0 0.4rem;
    font-size: 0.95rem;
    border: 2px solid rgba(255, 255, 255, 0.85);
  }

  /* Clear the mobile sticky Buy bar, level with the WhatsApp button. */
  .zq-lp-qv-float--raised {
    bottom: calc(190px + env(safe-area-inset-bottom));
  }

  .zq-lp-qv-float[hidden] {
    display: none;
  }

  .zq-lp-qv-float-ico {
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
  }
}

@media (prefers-reduced-motion: reduce) {
  .zq-lp-qv-btn,
  .zq-lp-qv-float,
  .zq-lp-qv-btn::after,
  .zq-lp-qv-float::after {
    animation: none;
  }
}