@import url('./root.css');

html {
  scroll-behavior: smooth;
}

.gv-hidden {
  display: none !important;
}
/* Block Formatting */

.pj-section {
  --__background_mode: fill;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0px;
  overflow: hidden;
  padding: 0px;
  position: relative;
  width: 100%;
  min-height: 90px;
}

.pj-stack {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 30px;
  overflow: hidden;
  padding: 0px;
  position: relative;
  min-width: 100px;
  min-height: 40px;
  max-width: 1200px;
}

.pj-grid {
  display: grid;
  height: min-content;
  grid-auto-rows: minmax(0, 1fr);
  grid-template-columns: repeat(2, 1fr);
  justify-content: center;
  align-items: start;
  gap: 0px;
  overflow: hidden;
  padding: 0px;
  position: relative;
  min-width: 100px;
  min-height: 40px;
  max-width: 1200px;
}

.pj-heading {
  margin: 0px;
  padding: 0px;
  font-size: 36px;
  font-family: Poppins, sans-serif;
  font-weight: 700;
  line-height: 1.2;
  cursor: default;
}

/* Per-tag heading defaults. Wrapped in :where() so the tag adds zero
 * specificity — the rules behave like a plain `.pj-heading` selector
 * (0,1,0). This lets utility classes like `.pj-f-18` / `.pj-fw-600`
 * override the defaults via source order, since they sit later in this
 * stylesheet. Without :where() the tag selector forced 0,1,1 and no
 * single-class utility could beat it. */
:where(h1).pj-heading { font-size: 36px; font-weight: 700; line-height: 1.2; }
:where(h2).pj-heading { font-size: 30px; font-weight: 700; line-height: 1.25; }
:where(h3).pj-heading { font-size: 24px; font-weight: 600; line-height: 1.3; }
:where(h4).pj-heading { font-size: 20px; font-weight: 600; line-height: 1.35; }
:where(h5).pj-heading { font-size: 18px; font-weight: 500; line-height: 1.4; }
:where(h6).pj-heading { font-size: 16px; font-weight: 500; line-height: 1.4; }

.pj-text {
  margin: 0px;
  padding: 0px;
  font-size: 18px;
  font-family: Plus Jakarta Sans, Arial, sans-serif;
  font-weight: 400;
  cursor: default;
}

.pj-img {
  display: block;
  width: 100%;
  max-width: 300px;
  height: auto;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  object-fit: cover;
}

.pj-button {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  font-family: Plus Jakarta Sans, Arial, sans-serif;
  font-weight: 400;
  padding: 8px 12px 8px 12px;
  border: none;
  border-radius: 8px 8px 8px 8px;
  background-color: #EEEEEE;
  color: #021E30;
  text-align: center;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
}

.pj-logo {
  display: block;
  width: 100%;
  max-width: 200px;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  border-radius: 12px;
}

.pj-icon {
  font-size: 22px;
  font-weight: 900;
  text-align: center;
  align-content: center;
}

/* Video wrapper — width matches the layout, fixed 16:9 aspect so the
 * iframe / <video> / placeholder thumbnail all swap into the same
 * footprint. min-height keeps the block clickable inside narrow
 * columns where `aspect-ratio` would otherwise produce ~0 height
 * (the parent might have width auto). The dark fill is the resting
 * background visible at the edges of vendor thumbnails that don't
 * cover the whole frame. */
.pj-video {
  position: relative;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 16 / 9;
  min-height: 80px;
  overflow: hidden;
  background-color: #1a1a1a;
}
.pj-video > iframe,
.pj-video > video,
.pj-video > img {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}
.pj-video > img { object-fit: cover; user-select: none; }
.pj-video__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.pj-video__play > svg {
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}

/* Map wrapper — same shape pattern as Video. The wrapper carries
 * `data-pjid` for canvas selection; the iframe inside fills the
 * wrapper. Editor-only override (in `pj-css-builder-overrides` from
 * iframeBoot) sets `pointer-events: none` on the iframe so canvas
 * clicks select the wrapper instead of opening Google Maps in a new
 * tab. Published pages keep the iframe interactive. */
.pj-map {
  position: relative;
  width: 100%;
  max-width: 600px;
  aspect-ratio: 16 / 9;
  min-height: 180px;
  display: block;
}
.pj-map > iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.pj-map__tint {
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.35;
}

/* Placeholder fill — used by img / logo / video when no real source
 * is set. Gives the slot visible dimensions so the user can click it
 * to open the picker even though the underlying 1×1 PNG would
 * collapse to invisible otherwise. */
.pj-img--placeholder {
  min-width: 120px;
  min-height: 80px;
  object-fit: fill;
}

/* Catalog image placeholders — when a product has no photo the runtime
 * sets `src=""` (or removes it) and adds `pj-img--placeholder`. The
 * generic placeholder above is too small for product imagery; these
 * overrides give each catalog image class proper card-shaped dimensions
 * with a subtle gray fill so the slot reads as "image goes here" rather
 * than a broken image. */
.pj-catalog-card-img {
  width: 100%;
  /* No max-width override — let `.pj-img`'s 300px cap apply so a single
   * product on an auto-fit grid track doesn't stretch beyond a sensible
   * card size. Users can resize via the inspector's Size sector. */
  aspect-ratio: 4 / 3;
  background: #e5e7eb;
}
.pj-catalog-detail-img {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1 / 1;
  background: #e5e7eb;
}
.pj-catalog-featured-img {
  width: 100%;
  max-width: 520px;
  aspect-ratio: 4 / 3;
  background: #e5e7eb;
}
.pj-catalog-card-img.pj-img--placeholder,
.pj-catalog-detail-img.pj-img--placeholder,
.pj-catalog-featured-img.pj-img--placeholder {
  min-width: 0;
  min-height: 0;
  object-fit: cover;
}

/* Carousel container — horizontal scroll with snap, mirrors what the
 * legacy Swiper-driven carousel did but with zero JS. */
.pj-catalog-carousel {
  flex-wrap: nowrap !important;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.pj-catalog-carousel-card {
  flex: 0 0 280px;
  scroll-snap-align: start;
}

/* Standardized Formatting */

.pj-pad-x-20 { padding-left: 20px; padding-right: 20px; }

.pj-pad-y-20 { padding-top: 20px; padding-bottom: 20px; }
.pj-pad-y-40 { padding-top: 40px; padding-bottom: 40px; }
.pj-pad-y-80 { padding-top: 80px; padding-bottom: 80px; }

.pj-min-h-500 { min-height: 500px; }

.pj-w-150 { width: 150px; }
.pj-w-200 { width: 200px; }

.pj-w-100p { width: 100%; }

.pj-h-50 { height: 50px; }
.pj-h-100 { height: 100px; }
.pj-h-150 { height: 150px; }
.pj-h-350 { height: 350px; }
.pj-h-100p { height: 100%; }

.pj-max-w-none { max-width: none; }
.pj-max-w-800 { max-width: 800px; }
.pj-max-w-1200 { max-width: 1200px; }

.pj-gp-10 { gap: 10px; }
.pj-gp-20 { gap: 20px; }
.pj-gp-30 { gap: 30px; }
.pj-gp-40 { gap: 40px; }

.pj-stack-x { flex-direction: row; }
.pj-stack-y { flex-direction: column; }

.pj-align-start { align-items: start; }
.pj-align-center { align-items: center; }
.pj-align-end { align-items: end; }

.pj-wrap { flex-wrap: wrap; }

.pj-justify-start { justify-content: flex-start; }
.pj-justify-center { justify-content: center; }
.pj-justify-end { justify-content: flex-end; }

/* Scroll Anchor */
.pj-scroll-anchor {
  display: block;
  height: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Grid Formatting */

.pj-grid-2-a-300 {
  grid-auto-rows: minmax(0, 1fr);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

/* Image Formatting */

/* Commented out to test if needed
.pj-stack img {
  max-width: 100%;
  height: auto;
  object-fit: cover;
  min-width: 0;
}
*/
.pj-img-contain { min-height: auto; object-fit: contain; }

/* Color Formatting */

.pj-primary { background-color: var(--color-ocean-blue); color: var(--color-white); }
.pj-secondary { background-color: var(--color-light-grey); color: var(--color-ocean-blue); }

.pj-white { color: var(--color-white); }
.pj-dark-gray { color: var(--color-dark-grey); }
.pj-midnight-blue { color: var(--color-midnight-blue); }

.pj-bg-spec-grey { background-color: var(--color-spec-grey); }

/* Text Formatting */

.pj-f-12 { font-size: 12px; }
.pj-f-18 { font-size: 18px; }
.pj-f-22 { font-size: 22px; }
.pj-f-30 { font-size: 30px; }
.pj-f-36 { font-size: 36px; }
.pj-f-50 { font-size: 50px; }

.pj-fw-400 { font-weight: 400; }
.pj-fw-600 { font-weight: 600; }

.pj-text-center { text-align: center; }












/* ============================================================
   PAYMENT FORM — Modern Checkout
   ============================================================ */


/* ----------------------------- */
/* DESIGN TOKENS (scoped)        */
/* ----------------------------- */

#gv-pf-form {
  --pf-surface: var(--color-white, #ffffff);
  --pf-surface-muted: var(--color-off-white, #f9f9f9);
  --pf-text-primary: #1a1a1a;
  --pf-text-secondary: #6b7280;
  --pf-text-muted: #9ca3af;
  --pf-border: #e5e7eb;
  --pf-border-focus: var(--primary-color, #0097B2);
  --pf-radius: var(--border-radius, 8px);
  --pf-radius-sm: 5px;
  --pf-input-height: 44px;
  --pf-btn-height: 48px;
  --pf-spacing-xs: 4px;
  --pf-spacing-sm: 8px;
  --pf-spacing-md: 16px;
  --pf-spacing-lg: 24px;
  --pf-spacing-xl: 32px;
  --pf-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --pf-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
  --pf-transition: 0.15s ease;
  --pf-font: var(--secondary-font, 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
  --pf-fs-xs: 12px;
  --pf-fs-sm: 13px;
  --pf-fs-base: 15px;
  --pf-fs-lg: 17px;
  --pf-fs-xl: 20px;
  --pf-fs-2xl: 24px;
}


/* ----------------------------- */
/* FORM CONTAINER                */
/* ----------------------------- */

#gv-pf-form {
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  font-family: var(--pf-font);
  font-size: var(--pf-fs-base);
  color: var(--pf-text-primary);
  background: var(--pf-surface);
  padding: var(--pf-spacing-xl);
  border-radius: var(--pf-radius);
  box-shadow: var(--pf-shadow-md);
  line-height: 1.5;
}
.gv-payment-form-section {
    background: var(--pf-surface);
}
.gv-pf-container {
  width: 100%;
}


/* ----------------------------- */
/* RESETS                        */
/* ----------------------------- */

#gv-pf-form fieldset {
  border: none;
  padding: 0;
  margin: 0 0 var(--pf-spacing-lg) 0;
}

#gv-pf-form legend {
  font-size: var(--pf-fs-lg);
  font-weight: 600;
  color: var(--pf-text-primary);
  margin: 0 0 var(--pf-spacing-md) 0;
  padding: 0;
  line-height: 1.3;
  width: 100%;
}

#gv-pf-form h1, #gv-pf-form h2, #gv-pf-form h3,
#gv-pf-form h4, #gv-pf-form h5, #gv-pf-form h6 {
  color: var(--pf-text-primary);
  margin: 0 0 var(--pf-spacing-sm) 0;
  font-weight: 600;
}

#gv-pf-form p {
  font-size: var(--pf-fs-base);
  margin: 0 0 var(--pf-spacing-sm) 0;
}

#gv-pf-form label {
  font-size: var(--pf-fs-sm);
  margin: 0 0 var(--pf-spacing-xs) 0;
}

.row {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--pf-spacing-md);
  width: 100%;
}


/* ----------------------------- */
/* SECTION CARDS                 */
/* ----------------------------- */

.dp-pf-choose-product-container,
.dp-pf-choose-service-container,
.dp-pf-tip-section-container,
.dp-pf-contact-info-container,
.gv-pf-payment-container {
  background: var(--pf-surface);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius);
  padding: var(--pf-spacing-lg);
  margin-bottom: var(--pf-spacing-lg);
}

.dp-pf-optin-container {
  background: var(--pf-surface);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius);
  padding: var(--pf-spacing-md) var(--pf-spacing-lg);
  margin-bottom: var(--pf-spacing-lg);
  display: flex;
  justify-content: flex-start;
  align-items: center;
}


/* ----------------------------- */
/* TABS (Interval Tabs)          */
/* ----------------------------- */

.gv-pf-tabs-container {
  display: flex;
  gap: 0;
  margin-bottom: var(--pf-spacing-lg);
  border-bottom: 1px solid var(--pf-border);
}

.gv-pf-tab-button {
  padding: var(--pf-spacing-sm) var(--pf-spacing-md);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  font-size: var(--pf-fs-sm);
  font-weight: 500;
  color: var(--pf-text-secondary);
  transition: color var(--pf-transition), border-color var(--pf-transition);
  margin-bottom: -1px;
  white-space: nowrap;
}

.gv-pf-tab-button:hover {
  color: var(--pf-text-primary);
}

.gv-pf-tab-button.active {
  border-color: var(--pf-border-focus);
  color: var(--pf-border-focus);
  font-weight: 600;
}


/* ----------------------------- */
/* PRODUCT LAYOUT (2-col)        */
/* ----------------------------- */

.gv-payment-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--pf-spacing-lg);
  align-items: start;
}

@media (max-width: 600px) {
  .gv-payment-layout {
    grid-template-columns: 1fr;
  }
}

.gv-left-column,
.gv-right-column {
  min-width: 0;
}

.gv-info h3 {
  font-size: var(--pf-fs-xl);
  font-weight: 600;
  margin: 0 0 var(--pf-spacing-xs) 0;
}

.gv-info p {
  font-size: var(--pf-fs-sm);
  color: var(--pf-text-secondary);
  margin: 0 0 var(--pf-spacing-md) 0;
}

.gv-main-image-container {
  width: 100%;
  border-radius: var(--pf-radius);
  overflow: hidden;
}

.gv-image {
  width: 100%;
  display: block;
  border-radius: var(--pf-radius);
}

.gv-gallery-thumbnails {
  display: flex;
  gap: 8px;
  margin-top: var(--pf-spacing-sm);
}

.gv-gallery-item img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: var(--pf-radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: border-color var(--pf-transition);
}

.gv-gallery-item img:hover {
  border-color: var(--pf-border);
}

.gv-thumbnail.active-thumb {
  border-color: var(--pf-border-focus) !important;
}


/* ----------------------------- */
/* PRICING & CART BUTTONS        */
/* ----------------------------- */

.gv-product-pricing p {
  font-size: var(--pf-fs-2xl);
  font-weight: 700;
  margin: 0 0 var(--pf-spacing-md) 0;
  color: var(--pf-text-primary);
}

.gv-cart-add,
.gv-add-to-cart-button {
  width: 100%;
  padding: 12px 20px;
  min-height: var(--pf-btn-height);
  font-size: var(--pf-fs-base);
  font-weight: 600;
  font-family: var(--pf-font);
  background: var(--primary-color, #0097B2);
  color: var(--color-white, #fff);
  border: none;
  border-radius: var(--pf-radius-sm);
  cursor: pointer;
  transition: background-color var(--pf-transition), transform var(--pf-transition);
  margin: var(--pf-spacing-sm) 0;
}

.gv-cart-add:hover,
.gv-add-to-cart-button:hover {
  background: var(--secondary-color, #005261);
}

.gv-cart-add:active,
.gv-add-to-cart-button:active {
  transform: scale(0.98);
}

.gv-product-variation-select {
  margin-bottom: var(--pf-spacing-md);
}

.gv-product-variation-select label {
  font-size: var(--pf-fs-sm);
  font-weight: 500;
  color: var(--pf-text-secondary);
  display: block;
  margin-bottom: var(--pf-spacing-xs);
}

.gv-product-variation-select select {
  width: 100%;
  height: var(--pf-input-height);
  padding: 0 12px;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-sm);
  font-size: var(--pf-fs-base);
  font-family: var(--pf-font);
  color: var(--pf-text-primary);
  background: var(--pf-surface);
  transition: border-color var(--pf-transition);
  outline: none;
}

.gv-product-variation-select select:focus {
  border-color: var(--pf-border-focus);
}


/* ----------------------------- */
/* GRID VARIATIONS               */
/* ----------------------------- */

.gv-grid-variations {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--pf-spacing-md);
}

.gv-grid-variations .variation {
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius);
  padding: var(--pf-spacing-md);
  text-align: center;
  background: var(--pf-surface);
  display: flex;
  flex-direction: column;
  gap: var(--pf-spacing-xs);
}

.gv-grid-variations .variation .gv-image {
  width: 100%;
  height: 120px;
  object-fit: cover;
  border-radius: var(--pf-radius-sm);
}

.gv-grid-variations .variation .gv-variation-label {
  font-size: var(--pf-fs-sm);
  font-weight: 500;
  color: var(--pf-text-primary);
  margin: 0;
}

.gv-grid-variations .variation .gv-cart-add {
  margin-top: auto;
}

/* Quantity Stepper */
.gv-qty-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-sm);
  overflow: hidden;
}

.gv-qty-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: var(--pf-surface-muted);
  color: var(--pf-text-primary);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gv-qty-btn:hover {
  background: var(--pf-border);
}

.gv-grid-variations .gv-quantity-input {
  width: 40px;
  height: 32px;
  text-align: center;
  border: none;
  border-left: 1px solid var(--pf-border);
  border-right: 1px solid var(--pf-border);
  font-size: var(--pf-fs-sm);
  font-weight: 600;
  color: var(--pf-text-primary);
  background: var(--pf-surface);
  -moz-appearance: textfield;
}

.gv-grid-variations .gv-quantity-input::-webkit-inner-spin-button,
.gv-grid-variations .gv-quantity-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ----------------------------- */
/* MINI CART SUMMARY             */
/* ----------------------------- */

.gv-mini-cart-summary {
  background: var(--pf-surface-muted);
  padding: var(--pf-spacing-md);
  border-radius: var(--pf-radius);
  margin-bottom: var(--pf-spacing-md);
  border: 1px solid var(--pf-border);
}

.gv-mini-cart-item {
  padding: var(--pf-spacing-sm) 0;
  border-bottom: 1px solid var(--pf-border);
  font-size: var(--pf-fs-sm);
  color: var(--pf-text-primary);
  line-height: 1.6;
}

.gv-mini-cart-item:last-child {
  border-bottom: none;
}

.gv-mini-cart-item .gv-cart-remove {
  background: none;
  border: none;
  color: var(--color-danger, #FF5757);
  font-size: var(--pf-fs-xs);
  cursor: pointer;
  padding: 2px 0;
  text-decoration: underline;
  font-family: var(--pf-font);
}

.gv-mini-cart-item .gv-cart-remove:hover {
  color: #d32f2f;
}

.gv-cart-qty {
  height: 28px;
  padding: 0 4px;
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-sm);
  font-size: var(--pf-fs-xs);
  font-family: var(--pf-font);
}

.gv-bonus-item {
  color: var(--color-success, #00BF63);
  font-style: italic;
}

/* Totals */
.gv-pf-totals-group {
  padding: var(--pf-spacing-sm) 0;
}

.subtotal-container,
.total-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--pf-fs-sm);
  padding: var(--pf-spacing-xs) 0;
  margin: 0;
}

.subtotal-container p,
.total-container p {
  margin: 0;
  font-size: var(--pf-fs-sm);
}

.gv-pf-totals-group .total-container:last-child {
  padding-top: var(--pf-spacing-sm);
  border-top: 1px solid var(--pf-border);
  margin-top: var(--pf-spacing-xs);
}

.gv-pf-totals-group .total-container:last-child span:last-child {
  font-weight: 700;
  font-size: var(--pf-fs-xl);
  color: var(--pf-text-primary);
}


/* ----------------------------- */
/* INPUT FIELDS                  */
/* ----------------------------- */

.gv-fieldrow {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--pf-spacing-md);
}

.gv-fieldrow label {
  font-size: var(--pf-fs-sm);
  font-weight: 500;
  color: var(--pf-text-secondary);
  margin-bottom: var(--pf-spacing-xs);
  line-height: 1.4;
}

.gv-fieldrow input[type="text"],
.gv-fieldrow input[type="email"],
.gv-fieldrow input[type="number"],
.gv-fieldrow input[type="tel"],
.gv-fieldrow select {
  width: 100%;
  height: var(--pf-input-height);
  padding: 0 12px;
  border-radius: var(--pf-radius-sm);
  border: 1px solid var(--pf-border);
  background: var(--pf-surface);
  font-size: var(--pf-fs-base);
  font-family: var(--pf-font);
  color: var(--pf-text-primary);
  transition: border-color var(--pf-transition), box-shadow var(--pf-transition);
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
}

.gv-fieldrow input:focus,
.gv-fieldrow select:focus {
  border-color: var(--pf-border-focus);
  box-shadow: 0 0 0 3px rgba(0, 151, 178, 0.1);
}

.gv-fieldrow input::placeholder {
  color: var(--pf-text-muted);
  font-size: var(--pf-fs-sm);
}

.gv-fieldrow input.gv-input-error,
.gv-fieldrow select.gv-input-error {
  border-color: var(--color-danger, #FF5757);
  box-shadow: 0 0 0 3px rgba(255, 87, 87, 0.1);
}

.gv-fancy-label label {
  font-size: var(--pf-fs-sm);
  font-weight: 500;
  color: var(--pf-text-secondary);
  transition: color var(--pf-transition);
}

.gv-fancy-label-activate label {
  color: var(--pf-border-focus);
}


/* ----------------------------- */
/* BUTTONS                       */
/* ----------------------------- */

.gv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  min-height: var(--pf-btn-height);
  border-radius: var(--pf-radius-sm);
  cursor: pointer;
  font-family: var(--pf-font);
  font-weight: 600;
  font-size: var(--pf-fs-base);
  transition: background-color var(--pf-transition), transform var(--pf-transition), box-shadow var(--pf-transition);
  border: none;
  line-height: 1;
  gap: 8px;
}

.gv-btn:active {
  transform: scale(0.98);
}

.gv-pf-action-container img,
.gv-pf-action-container svg {
  max-width: 20px !important;
}

.gv-btn-primary {
  background: var(--primary-color, #0097B2);
  color: var(--color-white, #fff);
  border: none;
}

.gv-btn-primary:hover {
  background: var(--secondary-color, #005261);
  box-shadow: var(--pf-shadow-sm);
}

.gv-btn-highlight {
  background: var(--primary-color, #0097B2);
  color: var(--color-white, #fff);
  border: none;
}

.gv-btn-highlight:hover {
  background: var(--secondary-color, #005261);
  box-shadow: var(--pf-shadow-sm);
}

.gv-width-max {
  width: 100%;
}

.gv-btn-sm {
  padding: 10px 16px;
  font-size: var(--pf-fs-sm);
  min-height: 40px;
}

/* Step action areas */
.dp-pf-form-step-1 .gv-pf-action-container {
  margin-top: var(--pf-spacing-md);
}

.dp-pf-form-step-2 .gv-pf-action-container {
  margin-top: var(--pf-spacing-lg);
}

.dp-pf-form-step-2 .gv-pf-action-container .gv-btn-primary {
  width: 100%;
}

#gv-pf-pay-button {
  font-size: var(--pf-fs-lg);
  letter-spacing: 0.02em;
}

#gv-pf-pay-button-processing {
  width: 100%;
  opacity: 0.85;
  cursor: not-allowed;
}


/* ----------------------------- */
/* STEP 2 — SUMMARY & BACK      */
/* ----------------------------- */

.dp-pf-form-step-2 legend {
  font-size: var(--pf-fs-lg);
  font-weight: 600;
  margin-bottom: var(--pf-spacing-md);
}

.gv-back-btn {
  display: flex;
  align-items: center;
  gap: var(--pf-spacing-sm);
  cursor: pointer;
  transition: opacity var(--pf-transition);
}

.gv-back-btn:hover {
  opacity: 0.7;
}

.gv-back-btn-arrow {
  width: 20px;
  display: flex;
  align-items: center;
}

.gv-back-btn-text {
  font-size: var(--pf-fs-lg);
  font-weight: 600;
}

.gv-pf-payment-summary {
  background: var(--pf-surface-muted);
  padding: var(--pf-spacing-md) var(--pf-spacing-lg);
  border-radius: var(--pf-radius);
  border: 1px solid var(--pf-border);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--pf-spacing-xs);
  margin-bottom: 0;
}

.gv-h2-title {
  font-size: var(--pf-fs-2xl);
  font-weight: 700;
  margin: 0;
  color: var(--pf-text-primary);
}

.gv-pf-processing-fee-container {
  font-size: var(--pf-fs-xs);
  color: var(--pf-text-muted);
}


/* ----------------------------- */
/* OPT-IN                        */
/* ----------------------------- */

.gv-pf-optin {
  display: flex;
  align-items: center;
  gap: var(--pf-spacing-sm);
}

.gv-pf-optin input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--primary-color, #0097B2);
  cursor: pointer;
}

.gv-pf-optin label {
  font-size: var(--pf-fs-sm);
  color: var(--pf-text-secondary);
  cursor: pointer;
  margin: 0;
}


/* ----------------------------- */
/* PAYMENT / STRIPE              */
/* ----------------------------- */

#gv-pf-card-element {
  padding: 12px;
  border-radius: var(--pf-radius-sm);
  border: 1px solid var(--pf-border);
  background: var(--pf-surface);
  transition: border-color var(--pf-transition), box-shadow var(--pf-transition);
  min-height: var(--pf-input-height);
  align-items: center;
}

#gv-pf-card-element:focus-within {
  border-color: var(--pf-border-focus);
  box-shadow: 0 0 0 3px rgba(0, 151, 178, 0.1);
}

.gv-pf-payment-methods {
  display: flex;
  gap: var(--pf-spacing-lg);
  margin-bottom: var(--pf-spacing-md);
}

.gv-pf-payment-methods label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: var(--pf-fs-sm);
  font-weight: 500;
  color: var(--pf-text-primary);
}

.gv-pf-payment-methods input[type="radio"] {
  width: auto;
  accent-color: var(--primary-color, #0097B2);
}

.gv-pf-payment-info label {
  font-size: var(--pf-fs-sm);
  font-weight: 500;
  color: var(--pf-text-secondary);
  margin-bottom: var(--pf-spacing-xs);
  display: block;
}


/* ----------------------------- */
/* GRID COLUMN SPANS             */
/* ----------------------------- */

.gv-pf-first-name,
.gv-pf-last-name {
  grid-column: span 6;
}

.gv-pf-city {
  grid-column: span 5;
}

.gv-pf-state {
  grid-column: span 4;
}

.gv-pf-postal-code {
  grid-column: span 3;
}


/* ----------------------------- */
/* COMPONENT STYLES              */
/* ----------------------------- */

.gv-boxify {
  background: var(--pf-surface-muted);
  padding: var(--pf-spacing-md);
  border-radius: var(--pf-radius);
  border: 1px solid var(--pf-border);
  margin-bottom: var(--pf-spacing-md);
}

.gv-preview-image {
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  border-radius: var(--pf-radius);
  margin-bottom: var(--pf-spacing-md);
}

.gv-price-block {
  font-size: var(--pf-fs-2xl);
  font-weight: 700;
  margin: var(--pf-spacing-sm) 0;
  color: var(--pf-text-primary);
}

.gv-sale-price {
  text-decoration: line-through;
  opacity: 0.5;
  margin-left: 8px;
  font-size: var(--pf-fs-lg);
  font-weight: 400;
}

.gv-note {
  font-size: var(--pf-fs-xs);
  color: var(--pf-text-muted);
  margin: var(--pf-spacing-xs) 0;
  font-style: italic;
}

.gv-pf-calendar-container {
  margin-bottom: var(--pf-spacing-md);
}


/* ----------------------------- */
/* SERVICE OFFER & SLOT PICKER   */
/* ----------------------------- */

.gv-pf-offer {
  background: var(--pf-surface);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius);
  padding: var(--pf-spacing-lg);
}

.gv-pf-offer-details {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pf-spacing-xs) var(--pf-spacing-lg);
}

.gv-pf-offer-details p {
  margin: 0;
  font-size: var(--pf-fs-sm);
  color: var(--pf-text-secondary);
}

.gv-pf-offer-details p strong {
  color: var(--pf-text-primary);
  font-weight: 600;
}

.gv-pf-price-block {
  display: flex;
  align-items: baseline;
  gap: var(--pf-spacing-sm);
  margin: var(--pf-spacing-md) 0;
}

.gv-pf-price-block .price {
  font-size: var(--pf-fs-2xl);
  font-weight: 700;
  color: var(--pf-text-primary);
}

.gv-pf-price-block .sale-price {
  font-size: var(--pf-fs-lg);
  font-weight: 400;
  color: var(--pf-text-muted);
  text-decoration: line-through;
}

.gv-pf-slots-section {
  border-top: 1px solid var(--pf-border);
  padding-top: var(--pf-spacing-md);
  margin-top: var(--pf-spacing-sm);
}

.gv-pf-slots-heading {
  font-size: var(--pf-fs-sm);
  font-weight: 600;
  color: var(--pf-text-primary);
  margin: 0 0 var(--pf-spacing-sm) 0;
}

/* Day selector */
.gv-pf-day-selector {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pf-spacing-xs);
  margin-bottom: var(--pf-spacing-sm);
}

.gv-pf-day-btn {
  padding: 5px 10px;
  font-size: var(--pf-fs-sm);
  font-weight: 600;
  font-family: var(--pf-font);
  color: var(--pf-text-secondary);
  background: var(--pf-surface-muted);
  border: 1px solid var(--pf-border);
  border-radius: var(--pf-radius-sm);
  cursor: pointer;
  transition: background var(--pf-transition), color var(--pf-transition), border-color var(--pf-transition);
}

.gv-pf-day-btn:hover {
  border-color: var(--primary-color, #0097B2);
  color: var(--primary-color, #0097B2);
}

.gv-pf-day-btn.selected {
  background: var(--primary-color, #0097B2);
  color: var(--color-white, #fff);
  border-color: var(--primary-color, #0097B2);
}

/* Time slot chips */
.gv-pf-slot-times {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pf-spacing-xs);
}

.gv-slot-select-btn {
  padding: 5px 10px;
  font-size: var(--pf-fs-sm);
  font-weight: 600;
  font-family: var(--pf-font);
  color: var(--primary-color, #0097B2);
  background: transparent;
  border: 1px solid var(--primary-color, #0097B2);
  border-radius: var(--pf-radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--pf-transition), color var(--pf-transition);
}

.gv-slot-select-btn:hover {
  background: var(--primary-color, #0097B2);
  color: var(--color-white, #fff);
}

.gv-slot-select-btn.selected {
  background: var(--primary-color, #0097B2);
  color: var(--color-white, #fff);
  border-color: var(--primary-color, #0097B2);
}

@media (max-width: 480px) {
  .gv-pf-offer {
    padding: var(--pf-spacing-md);
  }
}


/* ----------------------------- */
/* ERROR STATES                  */
/* ----------------------------- */

.gv-pf-error-container {
  margin-bottom: var(--pf-spacing-md);
}

.gv-pf-error-message {
  color: var(--color-danger, #FF5757);
  font-size: var(--pf-fs-sm);
  padding: var(--pf-spacing-sm) var(--pf-spacing-md);
  border-radius: var(--pf-radius-sm);
  background: rgba(255, 87, 87, 0.08);
  border: 1px solid rgba(255, 87, 87, 0.2);
  line-height: 1.4;
}

.gv-pf-error-message:empty {
  display: none;
}


/* ----------------------------- */
/* SPINNER                       */
/* ----------------------------- */

.spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: var(--color-white, #fff);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  margin-left: 8px;
}

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


/* ----------------------------- */
/* TRUST BADGE                   */
/* ----------------------------- */

.gv-pf-trust-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--pf-spacing-sm);
  padding: var(--pf-spacing-sm) 0;
  margin-top: var(--pf-spacing-md);
  font-size: var(--pf-fs-xs);
  color: var(--pf-text-muted);
}

.gv-pf-trust-badge svg {
  width: 14px;
  height: 14px;
}

.gv-pf-trust-badge img {
  height: 20px;
  opacity: 0.6;
}


/* ----------------------------- */
/* STRIPE CONNECT NOTICE         */
/* ----------------------------- */

.gv-pf-stripe-connect-notice {
  background: var(--pf-surface-muted, var(--color-off-white, #f9f9f9));
  border-radius: var(--pf-radius, var(--border-radius, 8px));
  border: 1px solid var(--pf-border, #e5e7eb);
  padding: var(--pf-spacing-lg, 24px);
}


/* ----------------------------- */
/* LAYOUT UTILITIES              */
/* ----------------------------- */

.gv-stack { display: flex; }
.gv-dir-x { flex-direction: row; }
.gv-dir-y { flex-direction: column; }
.gv-gap-10 { gap: 10px; }
.gv-gap-20 { gap: 20px; }
.gv-dist-start { justify-content: flex-start; }
.gv-dist-between { justify-content: space-between; }
.gv-dist-end { justify-content: flex-end; }
.gv-align-top { align-items: flex-start; }
.gv-align-center { align-items: center; }
.gv-align-bottom { align-items: flex-end; }
.gv-wrap-on { flex-wrap: wrap; }
.gv-margin-0 { margin: 0; }
.gv-pad-20 { padding: 20px; }
.gv-pady-10 { padding-top: 10px; padding-bottom: 10px; }
.gv-padb-10 { padding-bottom: 10px; }
.gv-text { font-size: var(--pf-fs-base); }
.gv-hidden { display: none !important; }


/* ----------------------------- */
/* RESPONSIVE                    */
/* ----------------------------- */

@media (max-width: 768px) {
  #gv-pf-form {
    padding: var(--pf-spacing-lg) var(--pf-spacing-md);
    box-shadow: none;
    border-radius: 0;
  }

  .gv-payment-layout {
    grid-template-columns: 1fr;
  }

  .gv-gallery-item img {
    width: 48px;
    height: 48px;
  }

  .row {
    grid-template-columns: 1fr;
  }

  .gv-pf-first-name,
  .gv-pf-last-name,
  .gv-pf-city,
  .gv-pf-state,
  .gv-pf-postal-code {
    grid-column: span 1;
  }

  .dp-pf-choose-product-container,
  .dp-pf-choose-service-container,
  .dp-pf-tip-section-container,
  .dp-pf-contact-info-container,
  .gv-pf-payment-container,
  .dp-pf-optin-container {
    padding: var(--pf-spacing-md);
  }

  .gv-pf-payment-summary {
    padding: var(--pf-spacing-md);
  }
}

@media (max-width: 480px) {
  #gv-pf-form {
    padding: var(--pf-spacing-md) var(--pf-spacing-sm);
  }

  .gv-btn {
    min-height: 44px;
    font-size: var(--pf-fs-sm);
  }

  .gv-pf-tabs-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}









/* -------------------------------- */
/* ROOT / PAGE RESET                */
/* -------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--primary-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, sans-serif);
  background: var(--background-color, #f7f7f9);
  color: var(--text-color, #111);
  line-height: 1.5;
}

/* -------------------------------- */
/* CONTAINER                         */
/* -------------------------------- */

.thankyou-container {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: clamp(20px, 4vw, 48px);
  background: var(--color-white, #fff);
}

/* -------------------------------- */
/* HEADINGS & TEXT                  */
/* -------------------------------- */

.thankyou-title {
  font-size: clamp(26px, 4vw, 36px);
  font-weight: 700;
  margin: 0 0 12px;
}

.thankyou-campaign {
  font-size: 14px;
  color: var(--text-muted, #666);
  margin-bottom: 20px;
}

.thankyou-desc {
  font-size: 16px;
  margin-bottom: 32px;
}

/* -------------------------------- */
/* PRODUCT TABLE                    */
/* -------------------------------- */

.thankyou-product-table {
  width: 100%;
  overflow-x: auto;
  margin-bottom: 24px;
}

.thankyou-product-table table {
  width: 100%;
  border-collapse: collapse;
  min-width: 640px;
}

.thankyou-product-table thead {
  background: var(--color-off-white, #f1f2f4);
}

.thankyou-product-table th,
.thankyou-product-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-color, #e0e0e0);
  font-size: 14px;
}

.thankyou-product-table th {
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
}

.thankyou-product-table td {
  vertical-align: middle;
}

.thankyou-product-table tbody tr:last-child td {
  border-bottom: none;
}

/* -------------------------------- */
/* ORDER INFO BLOCK                 */
/* -------------------------------- */

.thankyou-order-info {
  margin-top: 16px;
  padding: 16px;
  border-radius: 8px;
  background: var(--color-off-white, #f1f2f4);
  font-size: 14px;
}

.thankyou-order-info b {
  font-weight: 600;
}

/* -------------------------------- */
/* OPTIONAL SHARE / FOOTER SPACE    */
/* -------------------------------- */

.thankyou-footer {
  margin-top: 32px;
  font-size: 14px;
  color: var(--text-muted, #666);
}

/* -------------------------------- */
/* RESPONSIVE TUNING                */
/* -------------------------------- */

@media (max-width: 768px) {
  .thankyou-container {
    padding: 20px;
  }

  .thankyou-title {
    font-size: 24px;
  }

  .thankyou-desc {
    font-size: 15px;
  }

  .thankyou-product-table table {
    min-width: 100%;
  }

  .thankyou-product-table th,
  .thankyou-product-table td {
    padding: 10px;
    font-size: 13px;
  }
}

/* -------------------------------- */
/* DARK MODE (optional)       
/* -------------------------------- 

@media (prefers-color-scheme: dark) {
  body {
    background: #0f1115;
    color: #f5f5f5;
  }

  .thankyou-container {
    background: #151821;
  }

  .thankyou-product-table thead,
  .thankyou-order-info {
    background: #1c2030;
  }

  .thankyou-product-table th,
  .thankyou-product-table td {
    border-color: #2a2f45;
  }
}
*/

/* ─── Form Field Primitives ─── */
.pj-form-input {
  display: block;
  align-self: stretch;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: 13px;
  color: #021e30;
  background-color: #ffffff;
  border-style: solid;
  border-width: 1px 1px 1px 1px;
  border-color: #eeeeee;
  border-radius: 8px 8px 8px 8px;
  padding: 8px 12px 8px 12px;
  line-height: 24px;
  min-height: 40px;
  min-width: 167px;
  width: 100%;
  box-sizing: border-box;
  outline: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pj-form-input:focus {
  border-color: var(--primary-color, #3d5a35);
}
.pj-form-checkbox {
  width: 18px;
  height: 18px;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
}
textarea.pj-form-input {
  min-height: 100px;
  resize: vertical;
}
select.pj-form-input {
  cursor: pointer;
}

/* ─────────────────────────────────────────────────────────────────────
 * Scroll-reveal animation utilities (2026-05-13)
 *
 * Paired with `frontend/public/builder/animations/runtime.js`. The
 * runtime queries `[data-anim-trigger]`, reads the computed
 * `animation-name`, stashes it on `data-pj-anim-name`, then neutralizes
 * `animation-name: none` until the trigger fires (scroll-into-view by
 * default). Elements stay visually neutral pre-trigger, then play once.
 *
 * Utility classes for `pageRenderer#resolveAnimationHint`:
 *   .pj-anim-fade-up   — opacity + translateY(24px → 0)
 *   .pj-anim-fade-in   — opacity only
 *   .pj-anim-scale-in  — opacity + scale(0.94 → 1)
 *
 * Stagger pattern: apply `.pj-anim-stagger` to the parent container and
 * `.pj-anim-fade-up` (or sibling utilities) to its children — each child
 * gets an incremental 120ms delay up to ~6 items, then flattens to keep
 * total reveal time under ~1.4s.
 *
 * Reduced-motion floor: `prefers-reduced-motion: reduce` disables the
 * animation entirely. The runtime still neutralizes `animation-name`, so
 * the element sits in its natural visible state (opacity:1, transform:
 * none) — accessibility safety net.
 * ──────────────────────────────────────────────────────────────────── */

@keyframes pj-anim-fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pj-anim-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes pj-anim-scale-in {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

.pj-anim-fade-up,
.pj-anim-fade-in,
.pj-anim-scale-in {
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  animation-fill-mode: both;
}

.pj-anim-fade-up  { animation-name: pj-anim-fade-up; }
.pj-anim-fade-in  { animation-name: pj-anim-fade-in; }
.pj-anim-scale-in { animation-name: pj-anim-scale-in; }

/* Staggered children. 120ms step, capped at 6 children — past that the
 * delay flattens to keep total reveal time bounded. Uses :nth-child so
 * any direct child with a `.pj-anim-*` class participates without extra
 * markup. */
.pj-anim-stagger > *:nth-child(1) { animation-delay: 0s; }
.pj-anim-stagger > *:nth-child(2) { animation-delay: 0.12s; }
.pj-anim-stagger > *:nth-child(3) { animation-delay: 0.24s; }
.pj-anim-stagger > *:nth-child(4) { animation-delay: 0.36s; }
.pj-anim-stagger > *:nth-child(5) { animation-delay: 0.48s; }
.pj-anim-stagger > *:nth-child(6) { animation-delay: 0.6s; }
.pj-anim-stagger > *:nth-child(n+7) { animation-delay: 0.72s; }

@media (prefers-reduced-motion: reduce) {
  .pj-anim-fade-up,
  .pj-anim-fade-in,
  .pj-anim-scale-in {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ─────────────────────────────────────────────────────────────────────
 * I18N overrides for CSS-injected content
 *
 * Theme `.{tk}-pricing-featured::before` rules ship `content: 'Most Popular'`
 * because the JSON-walking themePreviewTranslate.js can't reach
 * pseudo-element content. The preview iframe gets `<html lang="pt-BR">`
 * (or `en`) from themePreviewController based on the `?lang=` query
 * param, so `:lang(pt)` flips the label without per-theme edits.
 * ───────────────────────────────────────────────────────────────────── */
:lang(pt) [class*="-pricing-featured"]::before,
:lang(pt) [class*="-pricing-card-featured"]::before {
  content: 'Mais Popular' !important;
}

/* ═══════════════════════════════════════════════════════════════════
 * Catalog single-product buy-now form (2026-05-15)
 *
 * Mirrors the inline CATALOG_PLACEHOLDER_CSS in publishService.js so
 * the builder canvas iframe (which loads library.css but NOT the
 * inline placeholder block) gets the polished form styling too.
 * Identical rules in both — duplicate declarations cascade-merge
 * harmlessly. Inline keeps the rules reachable on fresh-publish before
 * the CDN catches up; library.css keeps them reachable in the editor.
 * ═══════════════════════════════════════════════════════════════════ */
.pj-catalog-stripe-mount,
.pj-catalog-stripe-card{display:block;width:100%;box-sizing:border-box;min-height:40px;padding:9px 12px;border:1px solid #d1d5db;border-radius:7px;background:#fff;transition:border-color 120ms,box-shadow 120ms}
.pj-catalog-stripe-mount.StripeElement--focus,
.pj-catalog-stripe-card.StripeElement--focus{border-color:#0f172a;box-shadow:0 0 0 3px rgba(15,23,42,0.08)}
.pj-catalog-stripe-mount.StripeElement--invalid,
.pj-catalog-stripe-card.StripeElement--invalid{border-color:#ef4444}
.pj-catalog-buy-now{background:#fff;border:1px solid #f1f5f9;border-radius:14px;padding:22px 20px;max-width:560px;margin-left:auto;margin-right:auto;box-sizing:border-box;box-shadow:0 1px 3px rgba(15,23,42,0.04),0 4px 16px rgba(15,23,42,0.04);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;color:#0f172a}
.pj-catalog-buyer-form{font-size:14px}
.pj-catalog-form-section{margin:14px 0 8px;font-size:16px;font-weight:700;color:#0f172a;letter-spacing:-0.01em}
.pj-catalog-form-section:first-child{margin-top:0}
.pj-catalog-form-label{display:block;font-size:12px;color:#475569;font-weight:500;margin-bottom:4px}
.pj-catalog-buy-now input[type="text"],
.pj-catalog-buy-now input[type="email"],
.pj-catalog-buy-now input[type="tel"],
.pj-catalog-buy-now input[type="number"],
.pj-catalog-buy-now select,
.pj-catalog-buy-now textarea{font:14px/1.4 inherit;width:100%;box-sizing:border-box;padding:9px 12px;border:1px solid #d1d5db;border-radius:7px;background:#fff;color:#0f172a;transition:border-color 120ms,box-shadow 120ms;margin:0}
.pj-catalog-buy-now input:focus,
.pj-catalog-buy-now select:focus,
.pj-catalog-buy-now textarea:focus{outline:none;border-color:#0f172a;box-shadow:0 0 0 3px rgba(15,23,42,0.08)}
.pj-catalog-buy-now input::placeholder{color:#9ca3af}
/* Buy-now/Continue button: layout/typography only — background + color
 * left to the workspace theme's `.pj-button.pj-primary` so the brand
 * color wins (matches V1 behavior). */
.pj-catalog-buy-now button[data-catalog-buy-now],
.pj-catalog-buy-now button[data-catalog-continue]{display:block;width:100%;margin-top:14px;padding:13px 20px;font-size:15px;font-weight:600;border-radius:8px;cursor:pointer;letter-spacing:0.01em;transition:transform 80ms}
.pj-catalog-buy-now button[data-catalog-buy-now]:active:not([disabled]),
.pj-catalog-buy-now button[data-catalog-continue]:active:not([disabled]){transform:translateY(1px)}
.pj-catalog-buy-now button[data-catalog-buy-now][disabled],
.pj-catalog-buy-now button[data-catalog-continue][disabled]{opacity:0.6;cursor:not-allowed}
.pj-catalog-buy-now [hidden]{display:none !important}
/* Qty-row exception: opt out of the buy-now stack-override so the
 * stepper stays centered with vertically-aligned children. */
.pj-catalog-buy-now .pj-catalog-qty-row{align-items:center !important;align-self:center !important;justify-content:center !important;width:auto !important;max-width:max-content !important}
.pj-catalog-buy-now .pj-catalog-qty-row button,
.pj-catalog-buy-now .pj-catalog-qty-row .pj-button{width:36px;height:36px;border:1px solid #d1d5db;background:#f9fafb;border-radius:8px;cursor:pointer;font-size:16px;font-weight:600;color:#0f172a;padding:0;line-height:1;display:inline-flex;align-items:center;justify-content:center;transition:background 120ms}
.pj-catalog-buy-now .pj-catalog-qty-row button:hover,
.pj-catalog-buy-now .pj-catalog-qty-row .pj-button:hover{background:#f1f5f9}
.pj-catalog-buy-now .pj-catalog-qty-row .pj-qty{min-width:36px;text-align:center;font-weight:600;color:#0f172a;font-size:15px;line-height:36px}
.pj-catalog-buy-now [data-catalog-buy-now-message]{margin-top:14px;padding:12px 14px;border-radius:8px;font-size:13px;font-weight:500}
/* Override .pj-stack defaults inside the buy-now card so children
 * stretch to fill instead of staying natural-width centered. */
.pj-catalog-buy-now,
.pj-catalog-buy-now .pj-stack{align-items:stretch !important;justify-content:flex-start !important;max-width:none !important;min-width:0 !important}
.pj-catalog-buy-now{max-width:560px !important;margin-left:auto !important;margin-right:auto !important}
.pj-catalog-buy-now .pj-catalog-form-row{display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;gap:10px !important;align-items:stretch !important}
/* Scroll anchors (injected by publishService) live as direct children;
 * pin them to zero width so they don't grab a flex column. */
.pj-catalog-buy-now .pj-catalog-form-row > .pj-scroll-anchor{flex:0 0 0 !important;width:0 !important;min-width:0 !important;max-width:0 !important;padding:0 !important;margin:0 !important}
.pj-catalog-buy-now .pj-catalog-form-row > :not(.pj-scroll-anchor){flex:1 1 0 !important;min-width:0 !important;width:auto !important;max-width:none !important}
/* Back button — subtle tertiary, sits above the buyer form on step 2. */
.pj-catalog-buy-now button[data-catalog-back]{display:inline-flex;align-items:center;align-self:flex-start;width:auto;max-width:max-content;margin:0 0 14px;padding:6px 10px;background:transparent;border:none;color:#475569;font-size:13px;font-weight:500;cursor:pointer;border-radius:6px;transition:background 120ms,color 120ms}
.pj-catalog-buy-now button[data-catalog-back]:hover{background:#f1f5f9;color:#0f172a}
/* Promo code row: input grows, Apply button hugs the right. */
.pj-catalog-buy-now .pj-catalog-promo-row{display:flex !important;flex-direction:row !important;flex-wrap:nowrap !important;gap:8px !important;align-items:stretch !important}
.pj-catalog-buy-now .pj-catalog-promo-row > .pj-scroll-anchor{flex:0 0 0 !important;width:0 !important;min-width:0 !important;max-width:0 !important;padding:0 !important;margin:0 !important}
.pj-catalog-buy-now .pj-catalog-promo-row > .pj-form-input{flex:1 1 auto !important;min-width:0 !important}
.pj-catalog-buy-now .pj-catalog-promo-row > .pj-form-input input{text-transform:uppercase}
.pj-catalog-buy-now .pj-catalog-promo-row > button[data-catalog-promo-apply]{flex:0 0 auto !important;padding:9px 18px;border:none;background:#0f172a;color:#fff;border-radius:7px;font-size:14px;font-weight:600;cursor:pointer;transition:opacity 120ms}
.pj-catalog-buy-now .pj-catalog-promo-row > button[data-catalog-promo-apply]:hover:not([disabled]){opacity:0.9}
.pj-catalog-buy-now .pj-catalog-promo-row > button[data-catalog-promo-apply][disabled]{opacity:0.5;cursor:not-allowed}
.pj-catalog-buy-now [data-catalog-promo-status][hidden]{display:none !important}
/* Marketing opt-in row — same dimensions as a form field row. */
.pj-catalog-buy-now .pj-catalog-marketing-opt-in{align-items:center !important;justify-content:flex-start !important;gap:10px !important;padding:12px 14px;background:#fafafa;border:1px solid #e5e7eb;border-radius:8px;font-size:13px;color:#475569;cursor:pointer;margin-top:8px;user-select:none}
.pj-catalog-buy-now .pj-catalog-marketing-opt-in input[type="checkbox"]{width:18px;height:18px;cursor:pointer;flex-shrink:0;accent-color:#0f172a;margin:0}
.pj-catalog-buy-now .pj-catalog-marketing-opt-in:hover{color:#0f172a}