/* Storefront shared base: design tokens + buttons + typography. Loaded on every
   storefront surface (product, cart, checkout, confirmation). Edit tokens here to
   retune the whole flow. */
:root {
  /* Brand tuned from the live ClearPG header (2026-08-10): monochrome, refined —
     charcoal #28282a ink on white, light type. No loud accent; the primary action
     uses the brand charcoal, which reads Stripe-clean against the white surfaces. */
  --pc-color-bg: #ffffff;
  --pc-color-surface: #ffffff;
  --pc-color-text: #28282a; /* header nav link color */
  --pc-color-muted: #6b6b70; /* desaturated charcoal for secondary text */
  --pc-color-accent: #28282a; /* brand charcoal — primary buttons */
  --pc-color-accent-ink: #ffffff;
  --pc-color-border: #e4e2e6; /* warm-neutral hairline */
  --pc-color-error: #b3261e;
  --pc-radius: 6px;
  --pc-shadow:
    0 1px 3px rgba(40, 40, 42, 0.08), 0 1px 2px rgba(40, 40, 42, 0.06);
  --pc-space-1: 4px;
  --pc-space-2: 8px;
  --pc-space-3: 16px;
  --pc-space-4: 24px;
  --pc-space-5: 32px;
  --pc-space-6: 48px;
  /* Poppins is the site's heading/menu face; inherit body so the theme's base wins. */
  --pc-font-body: inherit;
  --pc-font-heading: "Poppins", var(--pc-font-body);
  --pc-maxw: 560px;
}

.pc-storefront {
  color: var(--pc-color-text);
  font-family: var(--pc-font-body);
}

.pc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--pc-space-3) var(--pc-space-4);
  border-radius: var(--pc-radius);
  border: 1px solid transparent;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color 0.15s ease,
    opacity 0.15s ease;
}
.pc-btn:disabled {
  opacity: 0.55;
  cursor: default;
}
.pc-btn--primary {
  background: var(--pc-color-accent);
  color: var(--pc-color-accent-ink);
}
.pc-btn--primary:hover {
  background: var(--pc-color-accent);
  color: var(--pc-color-accent-ink);
  opacity: 0.92;
}
.pc-btn--secondary {
  background: transparent;
  color: var(--pc-color-text);
  border-color: var(--pc-color-border);
}
.pc-btn--secondary:hover {
  background: #f7fafc;
  color: var(--pc-color-text);
}

/* Shared button loading state: dim + spin ONE ring before the label while a request
   is in flight (add-to-cart, checkout verify/pay, sign-in send). Two mutually-
   exclusive selectors so it renders once whether the opt-in element is a Breakdance
   Button (div > button > span.button-atom__text) or a plain <button>. */
.pc-btn--loading {
  pointer-events: none;
  opacity: 0.75;
}
.pc-btn--loading button {
  cursor: default;
}
.pc-btn--loading .button-atom__text::before,
.pc-btn--loading:not(:has(.button-atom__text))::before {
  content: "";
  display: inline-block;
  vertical-align: -2px;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: pc-spin 0.6s linear infinite;
}
@keyframes pc-spin {
  to {
    transform: rotate(360deg);
  }
}

.pc-field {
  display: flex;
  flex-direction: column;
  gap: var(--pc-space-1);
  margin-bottom: var(--pc-space-3);
}
.pc-field label {
  font-size: 13px;
  color: var(--pc-color-muted);
}
.pc-field input {
  padding: var(--pc-space-3);
  border: 1px solid var(--pc-color-border);
  border-radius: var(--pc-radius);
  font-size: 15px;
  color: var(--pc-color-text);
  background: var(--pc-color-surface);
}
.pc-field input:focus {
  outline: 2px solid var(--pc-color-accent);
  outline-offset: 1px;
}

.pc-error {
  color: var(--pc-color-error);
  font-size: 14px;
  margin-top: var(--pc-space-2);
}

/* --- Cloak / reveal-when-ready --------------------------------------------
   Regions marked data-cpg-cloak are hidden until their surface script calls
   cpgCloak.ready(). Gated on html.cpg-js (added pre-paint by the wp_head inline
   script) so it only applies when JS is present. visibility (not display)
   reserves layout space — no jump on reveal — and does not fight the Breakdance
   element class CSS that owns `display`. */
html.cpg-js [data-cpg-cloak] {
  visibility: hidden;
}

/* Skeleton mode: the container stays visible and shows a shimmer; its children
   are hidden until reveal. width:100% because an EMPTY Breakdance container
   collapses to 0 width (it's sized by its content), which would give the
   absolutely-positioned ::after shimmer (inset:0) a zero-width box and paint
   nothing. This only applies while cloaked-and-waiting; once a settle class is
   added the rule stops matching and the container returns to its normal width. */
html.cpg-js [data-cpg-cloak="skeleton"] {
  visibility: visible;
  position: relative;
  width: 100%;
  min-height: 200px;
}

/* Plain-cloak loading shimmer: the checkout form column resolves its step via
   JS (and, for a returning customer, a /checkout/quote fetch), so instead of a
   blank gap it shows a full-container shimmer while waiting, then reveals the
   real step on .cpg-ready. Scoped to #cpg-checkout-form specifically (NOT all
   plain-cloak regions — e.g. the one-line #cpg-signin strip must not get a big
   shimmer) and to the not-yet-settled state so it stops once revealed. Container
   stays visible with its children hidden so the ::after shimmer shows over
   reserved space. */
html.cpg-js #cpg-checkout-form[data-cpg-cloak]:not(.cpg-ready):not(.cpg-cloak-failed):not(.cpg-cloak-timeout) {
  visibility: visible;
  position: relative;
  min-height: 200px;
}
html.cpg-js #cpg-checkout-form[data-cpg-cloak]:not(.cpg-ready):not(.cpg-cloak-failed):not(.cpg-cloak-timeout) > * {
  visibility: hidden;
}
html.cpg-js #cpg-checkout-form[data-cpg-cloak]:not(.cpg-ready):not(.cpg-cloak-failed):not(.cpg-cloak-timeout)::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--pc-radius);
  background: linear-gradient(90deg, #f0eef2 25%, #e4e2e6 37%, #f0eef2 63%);
  background-size: 400% 100%;
  animation: cpg-shimmer 1.4s ease-in-out infinite;
}
/* Reveal: any settle class un-cloaks. cpg-ready fades in; failed/timeout reveal
   plainly (the region shows its own state/error). These rules are scoped with the
   same `html.cpg-js` prefix as the cloak rules above so they match (and, being
   later in source order, win) the specificity of the skeleton child-hide rule
   `html.cpg-js [data-cpg-cloak="skeleton"] > *` — otherwise the children stay
   hidden even after the reveal class is added. */
html.cpg-js [data-cpg-cloak].cpg-ready,
html.cpg-js [data-cpg-cloak].cpg-cloak-failed,
html.cpg-js [data-cpg-cloak].cpg-cloak-timeout {
  visibility: visible;
}
html.cpg-js [data-cpg-cloak].cpg-ready > *,
html.cpg-js [data-cpg-cloak].cpg-cloak-failed > *,
html.cpg-js [data-cpg-cloak].cpg-cloak-timeout > * {
  visibility: visible;
}
html.cpg-js [data-cpg-cloak].cpg-ready::after,
html.cpg-js [data-cpg-cloak].cpg-cloak-failed::after,
html.cpg-js [data-cpg-cloak].cpg-cloak-timeout::after {
  display: none;
}
html.cpg-js [data-cpg-cloak].cpg-ready {
  animation: cpg-fade-in 0.18s ease-out;
}

@keyframes cpg-shimmer {
  0% {
    background-position: 100% 0;
  }
  100% {
    background-position: 0 0;
  }
}
@keyframes cpg-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* --- Shaped skeletons ------------------------------------------------------
   .pc-skel blocks are the shimmer placeholders rendered by the [cpg_skeleton]
   server shortcode into a region while it loads. They reuse the same shimmer as
   the cloak block. */

/* The shortcode output is nested inside a Breakdance shortcode wrapper
   (.bde-shortcode) AND our .pc-skel-wrap. Both are made layout-transparent with
   display:contents so the skeleton's real layout classes (.pc-cartline,
   .pc-confirmation__card, …) behave as DIRECT children of the region container
   and inherit the exact spacing/alignment the real content gets — otherwise the
   two wrapper divs break grid/gap/margin relationships and the skeleton renders
   unspaced. Scoped to wrappers that actually contain a skeleton. */
.bde-shortcode:has(> .pc-skel-wrap),
.pc-skel-wrap { display: contents; }

.pc-skel {
  position: relative;
  border-radius: var(--pc-radius);
  background: linear-gradient(90deg, #f0eef2 25%, #e4e2e6 37%, #f0eef2 63%);
  background-size: 400% 100%;
  animation: cpg-shimmer 1.4s ease-in-out infinite;
}
.pc-skel--text { height: 0.7em; margin: 4px 0; }
.pc-skel--bar { height: 1em; }
.pc-skel--block { height: 160px; }
/* Fill the thumb wrapper (64px in cart, 48px in summary/confirmation) rather than
   a fixed size, so one class matches every context. */
.pc-skel--thumb { width: 100%; height: 100%; }
.pc-skel--circle { width: 56px; height: 56px; border-radius: 50%; }
.pc-skel--pill { height: 28px; width: 120px; border-radius: 999px; margin: 8px auto; }
.pc-skel--btn { height: 48px; width: 100%; margin-top: var(--pc-space-3); }
.pc-skel--w-20 { width: 20%; }
.pc-skel--w-30 { width: 30%; }
.pc-skel--w-40 { width: 40%; }
.pc-skel--w-60 { width: 60%; }
.pc-skel--w-70 { width: 70%; }

/* Neutralize the real content's "frame" styles that the skeleton inherits from the
   layout classes it reuses, so the skeleton shows only flat shimmer shapes:
   - the confirmation badge is a dark charcoal circle for the real checkmark — for
     the skeleton it should be a plain light shimmer circle (no dark bg, no border);
   - the thumbnail wrappers have a background + border frame — drop them so only the
     shimmer thumb shows (no border around radius shapes). */
.pc-skel-wrap .pc-confirmation__badge,
.pc-skel-wrap .pc-confirmation__thumb,
.pc-skel-wrap .pc-cartline__thumb,
.pc-skel-wrap .pc-sumline__thumb {
  background: none;
  border: 0;
}

/* Center the header contents under the badge (real header is text-align:center);
   width-limited skeleton bars are blocks, so center them with auto margins. */
.pc-confirmation__header .pc-skel--text,
.pc-confirmation__header .pc-skel--pill { margin-left: auto; margin-right: auto; }

/* Add a gap between the thumbnail and its column of rows in the card line
   (the real content has grid gap; ensure the skeleton line keeps it). */
.pc-skel-wrap .pc-confirmation__line,
.pc-skel-wrap .pc-cartline,
.pc-skel-wrap .pc-sumline { gap: var(--pc-space-3); }