/*
 * Commerce Studio X – Growth 2.3.0
 * Theme-neutral frontend structure. The active theme owns all visual styling.
 */

:where(.qxg-popup, .qxg-campaign, .qxg-testimonials, .qxg-trust-stats),
:where(.qxg-popup, .qxg-campaign, .qxg-testimonials, .qxg-trust-stats) * {
  box-sizing: border-box;
}

:where(.qxg-popup, .qxg-campaign, .qxg-testimonials, .qxg-trust-stats) {
  color: inherit;
  font: inherit;
}

:where(.qxg-popup, .qxg-campaign, .qxg-testimonials) img {
  max-inline-size: 100%;
  block-size: auto;
}

/* Popups. */
.qxg-popup {
  position: fixed;
  inset: 0;
  z-index: var(--qxg-z, 99990);
  display: grid;
  place-items: center;
  padding: 1rem;
}

.qxg-popup[hidden] { display: none; }
.qxg-popup--bottom { align-items: end; }
.qxg-popup--top { align-items: start; }
.qxg-popup--bottom-right { align-items: end; justify-items: start; }
.qxg-popup--bottom-left { align-items: end; justify-items: end; }

.qxg-popup__backdrop {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: rgb(0 0 0 / .55);
}

.qxg-popup__dialog {
  position: relative;
  inline-size: min(42rem, 100%);
  max-inline-size: 100%;
  max-block-size: calc(100dvh - 2rem);
  overflow: auto;
  background: var(--global-palette9, Canvas);
  color: var(--global-palette4, CanvasText);
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  border-radius: var(--global-kb-radius-md, .5rem);
  box-shadow: 0 1.5rem 4rem rgb(0 0 0 / .24);
}

.qxg-popup__close {
  position: absolute;
  inset-block-start: .75rem;
  inset-inline-end: .75rem;
  z-index: 3;
  display: grid;
  place-items: center;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  margin: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
  border-radius: 50%;
  background: var(--global-palette9, Canvas);
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.qxg-popup__image { display: block; inline-size: 100%; max-block-size: 45dvh; object-fit: cover; }
.qxg-popup__content { padding: clamp(1rem, 4vw, 2rem); }
.qxg-popup__content h2 { margin-block-start: 0; color: inherit; font-family: inherit; font-size: revert; }
.qxg-button { max-inline-size: 100%; white-space: normal; }

/* Campaigns. Content placement remains functional; palette comes from theme. */
.qxg-campaign {
  position: relative;
  z-index: 10;
  inline-size: 100%;
  max-inline-size: 100%;
  color: inherit;
  background: var(--global-palette7, transparent);
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}

.qxg-campaign__inner {
  inline-size: min(calc(100% - 2rem), var(--global-content-width, 82rem));
  max-inline-size: 100%;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding-block: .75rem;
  text-align: center;
}

.qxg-campaign__content { min-inline-size: 0; }
.qxg-campaign__content > strong { display: block; margin-block-end: .5em; color: inherit; font: inherit; font-weight: bolder; }
.qxg-campaign__content :where(p, span) { color: inherit; }
.qxg-campaign__actions { display: flex; align-items: center; justify-content: inherit; flex-wrap: wrap; gap: .75em; margin-block-start: 1em; }
.qxg-campaign__actions > * { max-inline-size: 100%; white-space: normal; }
.qxg-coupon { border-style: dashed; }

.qxg-campaign--floating {
  position: fixed;
  inset-inline-end: 1rem;
  inset-block-end: max(5rem, calc(1rem + env(safe-area-inset-bottom)));
  inline-size: min(24rem, calc(100vw - 2rem));
  max-inline-size: calc(100vw - 2rem);
  box-shadow: 0 1rem 3rem rgb(0 0 0 / .18);
}

.qxg-campaign--floating .qxg-campaign__inner { inline-size: 100%; padding: 1rem; text-align: start; }
.qxg-campaign--inline { margin-block: 1.5rem; }

.qxg-campaign--shop {
  margin-block: 1.25rem;
  overflow: hidden;
}

.qxg-campaign--shop .qxg-campaign__inner {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) minmax(0, 2fr);
  inline-size: 100%;
  padding: 0;
  text-align: start;
}

.qxg-campaign__media { min-inline-size: 0; overflow: hidden; }
.qxg-campaign__image { display: block; inline-size: 100%; block-size: 100%; max-block-size: 24rem; object-fit: cover; }
.qxg-campaign--shop .qxg-campaign__content { padding: clamp(1rem, 4vw, 2rem); }
.qxg-campaign--layout-center .qxg-campaign__inner { display: block; padding: 1.5rem; text-align: center; }
.qxg-campaign--layout-center .qxg-campaign__media { max-block-size: 20rem; }
.qxg-campaign--layout-minimal .qxg-campaign__inner { display: flex; padding: 1rem; }
.qxg-campaign--layout-minimal .qxg-campaign__media { display: none; }
.qxg-campaign--layout-minimal .qxg-campaign__content { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; inline-size: 100%; padding: 0; }

.qxg-shop-banner-grid-item {
  grid-column: 1 / -1;
  inline-size: 100%;
  max-inline-size: 100%;
  margin: 0;
  list-style: none;
}

.qxg-shop-banner-repository[hidden] { display: none; }

/* Testimonials and trust blocks. */
.qxg-testimonials { inline-size: 100%; max-inline-size: 100%; padding-block: 2rem; direction: rtl; }
.qxg-testimonials__header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-block-end: 1.25rem; }
.qxg-testimonials__header h2 { margin: 0; color: inherit; font-family: inherit; font-size: revert; }
.qxg-testimonials__header-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .5em; }
.qxg-testimonials__all-link,
.qxg-carousel__button { max-inline-size: 100%; }
.qxg-carousel__button { display: inline-grid; place-items: center; min-inline-size: 2.5rem; min-block-size: 2.5rem; padding: .25em; }
.qxg-carousel__viewport { inline-size: 100%; max-inline-size: 100%; overflow: hidden; outline: 0; }
.qxg-carousel__viewport:focus-visible { outline: 2px solid currentColor; outline-offset: .35rem; }
.qxg-carousel__track { display: flex; align-items: stretch; gap: 1rem; transform: translate3d(0, 0, 0); transition: transform .4s ease; will-change: transform; }

.qxg-testimonials--slider .qxg-testimonial { flex: 0 0 calc((100% - 2rem) / 3); min-inline-size: 0; }
.qxg-testimonials--grid .qxg-testimonials__grid,
.qxg-testimonials--all .qxg-testimonials__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }

.qxg-testimonial {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  padding: 1rem;
  color: inherit;
  background: transparent;
  border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
  border-radius: var(--global-kb-radius-sm, .25rem);
}

.qxg-testimonial__head { display: flex; align-items: center; gap: .75em; min-inline-size: 0; }
.qxg-testimonial__head > div { flex: 1; min-inline-size: 0; }
.qxg-testimonial__head strong,
.qxg-testimonial__head small { display: block; color: inherit; }
.qxg-testimonial__head strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qxg-testimonial__avatar,
.qxg-testimonial__initial { flex: 0 0 3.25rem; inline-size: 3.25rem; block-size: 3.25rem; margin: 0; border-radius: 50%; object-fit: cover; }
.qxg-testimonial__initial { display: grid; place-items: center; border: 1px solid currentColor; }
.qxg-verified { display: inline-flex; align-items: center; margin-inline-start: auto; white-space: nowrap; }
.qxg-testimonial__text { flex: 1; margin-block: 1rem; padding: 0; border: 0; color: inherit; overflow-wrap: anywhere; }
.qxg-testimonial__text p { margin: 0; }
.qxg-testimonials--slider .qxg-testimonial__text { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.qxg-testimonial__ratings { display: grid; gap: .5em; margin-block-start: auto; padding-block-start: .75em; border-block-start: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.qxg-testimonial__ratings > div { display: flex; align-items: center; justify-content: space-between; gap: .75em; }
.qxg-rating-stars { color: inherit; white-space: nowrap; }
.qxg-testimonial__product,
.qxg-testimonial time { display: block; margin-block-start: .75em; color: inherit; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qxg-carousel__status { margin-block-start: .75em; text-align: center; }

.qxg-trust-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); gap: 1rem; }
.qxg-trust-stats article { padding: 1rem; border: 1px solid color-mix(in srgb, currentColor 16%, transparent); text-align: center; }
.qxg-trust-stats strong,
.qxg-trust-stats span { display: block; color: inherit; }
.qxg-empty { padding: 1rem; text-align: center; }
.qxg-landing-main { min-block-size: 100vh; }

@media (max-width: 62rem) {
  .qxg-testimonials--slider .qxg-testimonial { flex-basis: calc((100% - 1rem) / 2); }
  .qxg-testimonials--grid .qxg-testimonials__grid,
  .qxg-testimonials--all .qxg-testimonials__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 48rem) {
  .qxg-popup { padding: .5rem; }
  .qxg-popup--bottom .qxg-popup__dialog { margin-block-end: -.5rem; }
  .qxg-campaign--floating { inset-inline: .5rem; inline-size: auto; max-inline-size: none; }
  .qxg-campaign--shop .qxg-campaign__inner { grid-template-columns: minmax(0, 1fr); }
  .qxg-campaign__image { max-block-size: 16rem; }
  .qxg-testimonials--slider .qxg-testimonial { flex-basis: 100%; }
  .qxg-testimonials--grid .qxg-testimonials__grid,
  .qxg-testimonials--all .qxg-testimonials__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .qxg-popup *,
  .qxg-carousel__track { transition: none; animation: none; scroll-behavior: auto; }
}