/* Public storefront — premium minimalist layout, fully driven by frontend theme variables. */
.qc-site {
  --st-bg: var(--qc-bg, var(--ft-bg));
  --st-surface: var(--qc-surface, var(--ft-card-bg));
  --st-soft: color-mix(in srgb, var(--qc-primary, var(--ft-primary)) 7%, var(--st-bg));
  --st-warm: color-mix(in srgb, var(--qc-cyan, var(--ft-accent)) 6%, var(--st-bg));
  --st-text: var(--qc-text, var(--ft-text));
  --st-muted: var(--qc-text-secondary, var(--ft-text-secondary));
  --st-border: color-mix(in srgb, var(--qc-border, var(--ft-border)) 65%, transparent);
  background: var(--st-bg) !important;
  color: var(--st-text) !important;
  overflow-x: clip;
}

.qc-site > [role="status"] {
  background: var(--qc-primary, var(--ft-primary)) !important;
  color: var(--ft-btn-text, #fff) !important;
}

.qc-site > header {
  background: color-mix(in srgb, var(--st-bg) 88%, transparent) !important;
  border-bottom: 1px solid var(--st-border) !important;
  backdrop-filter: blur(18px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.15) !important;
}

.qc-site > header > div:first-child { min-height: 4.5rem; }
.qc-site .qc-nav-link { border-radius: 999px !important; padding-inline: .9rem !important; }
.qc-site .qc-nav-link[data-active="true"] {
  background: color-mix(in srgb, var(--qc-primary, var(--ft-primary)) 10%, transparent);
  box-shadow: inset 0 -2px 0 var(--qc-primary, var(--ft-primary)) !important;
}

.qc-site .ft-btn {
  border-radius: 999px !important;
  padding-inline: 1.35rem;
  box-shadow: 0 12px 30px color-mix(in srgb, var(--qc-primary, var(--ft-primary)) 18%, transparent) !important;
}
.qc-site .ft-btn:hover { transform: translateY(-2px) scale(1.015); }

.qc-site .qc-energy-lines {
  background:
    radial-gradient(circle at 72% 15%, color-mix(in srgb, var(--qc-primary, var(--ft-primary)) 12%, transparent), transparent 33%),
    radial-gradient(circle at 16% 70%, color-mix(in srgb, var(--qc-cyan, var(--ft-accent)) 8%, transparent), transparent 30%),
    var(--st-bg) !important;
}

/* Hero / catalog introduction */
.qc-site main section:first-child,
.qc-site > div.relative.z-10 > div > section:first-child,
.qc-site > div.relative.z-10 section:first-child {
  padding-top: clamp(5rem, 10vw, 9rem);
  padding-bottom: clamp(4rem, 8vw, 7rem);
}
.qc-site section:first-child h1 {
  max-width: 15ch;
  font-size: clamp(3rem, 7vw, 6.6rem) !important;
  line-height: .96 !important;
  letter-spacing: -.055em !important;
  text-wrap: balance;
}
.qc-site section:first-child p { max-width: 44rem; font-size: clamp(1rem, 1.5vw, 1.2rem); }
.qc-site section:first-child input {
  min-height: 3.35rem;
  border-radius: 999px !important;
  background: color-mix(in srgb, var(--st-surface) 90%, transparent) !important;
  box-shadow: 0 14px 36px color-mix(in srgb, var(--st-text) 7%, transparent);
}

/* Tonal collection bands like the supplied reference, without fixed colors. */
.qc-site section:has(.grid.sm\:grid-cols-2) { position: relative; }
.qc-site section:has(.grid.sm\:grid-cols-2)::before {
  content: "";
  position: absolute;
  inset: -2rem 50%;
  width: 100vw;
  transform: translateX(-50%);
  background: var(--st-soft);
  z-index: -1;
}

.qc-site .ft-card,
.qc-site [class*="rounded-2xl"][class*="border"] {
  border-color: var(--st-border) !important;
  background: color-mix(in srgb, var(--st-surface) 96%, transparent) !important;
  border-radius: clamp(1.25rem, 2vw, 2rem) !important;
  box-shadow: 0 24px 60px color-mix(in srgb, var(--st-text) 7%, transparent) !important;
}

.qc-site .group:has(img) {
  border-radius: clamp(1.4rem, 2.4vw, 2.25rem) !important;
  transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease;
}
.qc-site .group:has(img):hover { transform: translateY(-8px); }
.qc-site .group:has(img) img {
  transition: transform .55s cubic-bezier(.22,1,.36,1), filter .45s ease;
  filter: drop-shadow(0 22px 24px color-mix(in srgb, var(--st-text) 13%, transparent));
}
.qc-site .group:has(img):hover img { transform: translateY(-8px) scale(1.035); }

.qc-site select,
.qc-site input,
.qc-site textarea {
  border-color: var(--st-border) !important;
  background-color: var(--st-surface) !important;
  color: var(--st-text) !important;
}
.qc-site select { border-radius: .9rem !important; }

.qc-site footer {
  background: color-mix(in srgb, var(--st-surface) 82%, var(--st-bg)) !important;
  border-color: var(--st-border) !important;
}

@media (max-width: 767px) {
  .qc-site section:first-child h1 { font-size: clamp(2.7rem, 13vw, 4.2rem) !important; }
  .qc-site > header > div:first-child { min-height: 4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .qc-site .group:has(img), .qc-site .group:has(img) img, .qc-site .ft-btn { transition: none !important; transform: none !important; }
}