/* =========================================================
   Puzzels Customizer — App-like UI (v6)
   3-step flow: upload → adjust design → add to cart

   Specificity strategy: every rule is scoped under
   `.puzzels-customizer` so we beat plain `.button` /
   `.single_add_to_cart_button` selectors without needing
   `!important`. The wooden `.puzzle-board` is the visual
   centerpiece — chrome around it is intentionally flatter.
   ========================================================= */

/* ── CSS Custom Properties ──────────────────────────────── */
.puzzels-customizer {
  --pc-accent:        #E07820;
  --pc-accent-hover:  #C96815;
  --pc-accent-light:  #FFF4E8;
  --pc-accent-grad:   linear-gradient(135deg, #E07820 0%, #F5A040 100%);
  --pc-accent-grad-soft: linear-gradient(145deg, #FFF5E9 0%, #FFE8CE 100%);
  --pc-glow:          0 4px 20px rgba(224, 120, 32, 0.30);
  --pc-glow-lg:       0 8px 32px rgba(224, 120, 32, 0.40);
  --pc-text:          #111827;
  --pc-text-muted:    #6b7280;
  --pc-border:        #ead7c2;
  --pc-bg:            #f7efe5;
  --pc-surface:       #ffffff;
  --pc-radius:        12px;
  --pc-radius-md:     16px;
  --pc-radius-lg:     20px;
  --pc-radius-xl:     28px;
  --pc-pill:          999px;
  --pc-shadow-sm:     0 1px 4px rgba(0,0,0,0.06);
  --pc-shadow:        0 2px 12px rgba(0,0,0,0.08);
  --pc-shadow-lg:     0 8px 32px rgba(0,0,0,0.12);
  --pc-font:          -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --pc-transition:    0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --pc-bounce:        0.34s cubic-bezier(0.22, 1, 0.36, 1);
  /* Fixed "stage" height for the design board so the panel doesn't resize with
     the artwork aspect (the puzzle is contained inside it). */
  --pc-stage-h:       clamp(360px, 56vh, 600px);
  /* Minimum height every step reserves so the customizer doesn't resize as the
     user moves photo → box → confirm. Tracks --pc-stage-h (incl. its mobile
     override) so the whole flow shares one consistent frame height. */
  --pc-step-min-h:    var(--pc-stage-h);

  /* ── Unified role tokens (collapse the hand-written near-duplicates) ──
     Cream surfaces, in increasing warmth: wash (idle near-white) →
     light (hover) → soft (active/pressed). */
  --pc-accent-active: #d56e1b;          /* active/hover accent border + ring hue */
  --pc-accent-wash:   #fffaf2;          /* idle near-white tint */
  --pc-accent-soft:   #fff2e3;          /* active/pressed wash */
  /* Warm-brown text scale (collapses ~15 near-identical browns). */
  --pc-text-warm-strong: #5f3212;       /* titles / strongest */
  --pc-text-warm:        #8b460f;       /* default warm label / active text */
  --pc-text-warm-muted:  #8d5830;       /* secondary warm / idle control text */
  /* Status trios — text / background / border. */
  --pc-success:        #196f3a;
  --pc-success-bg:     #e4f8ec;
  --pc-success-border: #b8ebcc;
  --pc-danger:         #a92c2c;
  --pc-danger-bg:      #fff4f4;
  --pc-danger-border:  #f4bcbc;
  --pc-warn:           #9c6208;
  --pc-warn-bg:        #fff5d8;
  --pc-warn-border:    #f2dd9f;
  /* Prominent warm border (dashed drop zone). */
  --pc-border-warm:    #e4b482;
  /* Radius steps below the existing 12px base. */
  --pc-radius-sm:      4px;
  --pc-radius-xs:      3px;
  /* Shadow roles (collapse one-off blur/alpha variants). */
  --pc-shadow-panel:   0 12px 32px rgba(71, 44, 20, 0.12);   /* root + panel */
  --pc-lift-sm:        0 4px 10px rgba(165, 84, 20, 0.10);   /* small accent lift */
  --pc-ring:           0 0 0 3px rgba(213, 110, 27, 0.22);   /* focus / active ring */
  --pc-shadow-overlay: 0 8px 28px rgba(0, 0, 0, 0.28);       /* floating card overlay */
  --pc-shadow-bar:     0 -2px 16px rgba(0, 0, 0, 0.10);      /* sticky action bar */

  /* Confirmation-screen action buttons all share the checkout button's
     (.puzzels-cta-btn--cart) treatment — 135° gradient, hue-matched glow, white
     text, pill. They mirror the brand orange, each nudged a little (deep → base →
     golden) so they stay distinguishable yet read as one harmonious set. */
  --pc-btn-amber:       linear-gradient(135deg, #E88F22 0%, #F8B240 100%);   /* golden orange */
  --pc-btn-amber-glow:  0 4px 20px rgba(232, 143, 34, 0.30);
  --pc-btn-orange:      linear-gradient(135deg, #E4801F 0%, #F6A63E 100%);   /* warm orange */
  --pc-btn-orange-glow: 0 4px 20px rgba(228, 128, 31, 0.30);
  --pc-btn-ember:       linear-gradient(135deg, #D9691A 0%, #F09338 100%);   /* deep burnt orange */
  --pc-btn-ember-glow:  0 4px 20px rgba(217, 105, 26, 0.30);

  font-family: var(--pc-font);
  color: var(--pc-text);
  max-width: 1200px;
  margin: 2rem auto;
  background: linear-gradient(180deg, #f9f2e9 0%, #f3e8db 100%);
  border-radius: var(--pc-radius-xl);
  border: 1px solid rgba(224, 120, 32, 0.18);
  box-shadow: var(--pc-shadow-panel);
  overflow: hidden;
}

/* =========================================================
   PANEL — content card
   ========================================================= */

.puzzels-customizer .puzzels-panel {
  background: #fff;
  border-radius: var(--pc-radius-xl) var(--pc-radius-xl) 0 0;
  animation: pc-fadein 0.25s var(--pc-transition);
}

@keyframes pc-fadein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

.puzzels-customizer .puzzels-panel__head {
  padding: 1.35rem 1.5rem 1rem;
  background: var(--pc-accent-grad-soft);
  border-bottom: 1px solid rgba(224, 120, 32, 0.2);
}

.puzzels-customizer .puzzels-panel__title {
  margin: 0 0 0.25rem;
  font-size: 1.24rem;
  font-weight: 700;
  color: var(--pc-text-warm-strong);
}

.puzzels-customizer .puzzels-panel__subtitle {
  margin: 0;
  font-size: 0.87rem;
  color: var(--pc-text-warm-muted);
}

.puzzels-customizer .puzzels-meta-strip {
  margin-top: 0.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
}

.puzzels-customizer .puzzels-meta-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.28rem 0.7rem;
  border-radius: var(--pc-pill);
  border: 1px solid rgba(224, 120, 32, 0.28);
  background: rgba(255, 255, 255, 0.86);
  color: var(--pc-text-warm-muted);
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.puzzels-customizer .puzzels-meta-pill--hint {
  background: var(--pc-accent-soft);
  color: var(--pc-text-warm);
}

.puzzels-customizer .puzzels-panel__body {
  padding: 1.3rem 1.5rem;
  /* Shared step frame height — keeps the card the same size across steps. */
  min-height: var(--pc-step-min-h);
}

.puzzels-customizer .puzzels-flow-stepper {
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.puzzels-customizer .puzzels-flow-step {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.8rem 0.9rem;
  border: 1px solid rgba(224, 120, 32, 0.16);
  border-radius: var(--pc-radius-md);
  background: var(--pc-accent-wash);
  color: var(--pc-text-muted);
  transition: border-color var(--pc-transition), background var(--pc-transition), transform var(--pc-transition);
}

.puzzels-customizer .puzzels-flow-step.is-active {
  border-color: rgba(224, 120, 32, 0.34);
  background: var(--pc-accent-soft);
  color: var(--pc-text-warm);
  transform: translateY(-1px);
}

.puzzels-customizer .puzzels-flow-step.is-complete {
  border-color: rgba(25, 111, 58, 0.18);
  background: var(--pc-success-bg);
  color: var(--pc-success);
}

.puzzels-customizer .puzzels-flow-step__count {
  width: 1.9rem;
  height: 1.9rem;
  border-radius: var(--pc-pill);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 800;
  background: #fff;
  border: 1px solid currentColor;
  flex-shrink: 0;
}

.puzzels-customizer .puzzels-flow-step__label {
  font-size: 0.88rem;
  font-weight: 700;
  line-height: 1.3;
}

.puzzels-customizer .puzzels-onboarding {
  display: grid;
  gap: 0.85rem;
  margin-bottom: 1rem;
  padding: 1rem 1.1rem;
  border-radius: var(--pc-radius-md);
  border: 1px solid rgba(224, 120, 32, 0.18);
  background: var(--pc-accent-wash);
}

.puzzels-customizer .puzzels-onboarding strong {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.95rem;
  color: var(--pc-text-warm);
}

.puzzels-customizer .puzzels-onboarding p {
  margin: 0;
  font-size: 0.87rem;
  line-height: 1.5;
  color: var(--pc-text-warm-muted);
}

.puzzels-customizer .puzzels-onboarding__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.45rem;
}

.puzzels-customizer .puzzels-onboarding__list li {
  position: relative;
  padding-inline-start: 1rem;
  font-size: 0.84rem;
  line-height: 1.45;
  color: var(--pc-text-muted);
}

.puzzels-customizer .puzzels-onboarding__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.48rem;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: var(--pc-pill);
  background: var(--pc-accent);
}

.puzzels-customizer .puzzels-onboarding__dismiss {
  justify-self: start;
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--pc-accent);
  cursor: pointer;
}

/* =========================================================
   ACTION BAR (sticky on mobile)
   ========================================================= */

.puzzels-customizer .pc-action-bar {
  background: var(--pc-accent-wash);
  border-top: 1px solid rgba(224, 120, 32, 0.18);
  border-radius: 0 0 var(--pc-radius-xl) var(--pc-radius-xl);
  padding: 1rem 1.5rem 1.25rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  justify-content: space-between;
  transition: background var(--pc-transition), border-color var(--pc-transition);
}

.puzzels-customizer .pc-action-summary {
  display: grid;
  gap: 0.8rem;
  flex: 1 1 auto;
  min-width: 0;
}

.puzzels-customizer .pc-action-checklist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.55rem 0.8rem;
}

.puzzels-customizer .pc-action-check {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  color: var(--pc-text-muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

.puzzels-customizer .pc-action-check__icon {
  width: 1rem;
  height: 1rem;
  border-radius: var(--pc-pill);
  flex-shrink: 0;
  border: 1.5px solid currentColor;
  position: relative;
}

.puzzels-customizer .pc-action-check__icon::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  background: currentColor;
  transform: scale(0);
  transition: transform var(--pc-transition);
}

.puzzels-customizer .pc-action-check.is-done {
  color: var(--pc-success);
}

.puzzels-customizer .pc-action-check.is-done .pc-action-check__icon::after,
.puzzels-customizer .pc-action-check.is-active .pc-action-check__icon::after,
.puzzels-customizer .pc-action-check.is-warn .pc-action-check__icon::after {
  transform: scale(1);
}

.puzzels-customizer .pc-action-check.is-active {
  color: var(--pc-text-warm);
}

.puzzels-customizer .pc-action-check.is-warn {
  color: var(--pc-danger);
}

.puzzels-customizer .pc-action-feedback {
  display: grid;
  gap: 0.55rem;
  padding: 0.85rem 1rem;
  border-radius: var(--pc-radius-md);
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(224, 120, 32, 0.14);
}

.puzzels-customizer .pc-action-feedback.is-warn {
  background: var(--pc-danger-bg);
  border-color: var(--pc-danger-border);
}

.puzzels-customizer .pc-action-feedback.is-busy {
  background: var(--pc-accent-wash);
  border-color: rgba(224, 120, 32, 0.26);
}

.puzzels-customizer .pc-action-feedback__message {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--pc-text-warm-muted);
}

.puzzels-customizer .pc-action-progress {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1rem;
}

/* The progress list ships with the `hidden` attribute and is only
   revealed by JS during checkout submission. The `display: flex`
   above outranks the UA `[hidden]` rule, so restore it explicitly. */
.puzzels-customizer .pc-action-progress[hidden] {
  display: none;
}

.puzzels-customizer .pc-action-progress__step {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--pc-text-muted);
  font-size: 0.8rem;
  font-weight: 600;
}

.puzzels-customizer .pc-action-progress__dot {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: var(--pc-pill);
  border: 1.5px solid currentColor;
  position: relative;
  flex-shrink: 0;
}

.puzzels-customizer .pc-action-progress__dot::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  background: currentColor;
  transform: scale(0);
  transition: transform var(--pc-transition);
}

.puzzels-customizer .pc-action-progress__step.is-active {
  color: var(--pc-text-warm);
}

.puzzels-customizer .pc-action-progress__step.is-done {
  color: var(--pc-success);
}

.puzzels-customizer .pc-action-progress__step.is-active .pc-action-progress__dot::after,
.puzzels-customizer .pc-action-progress__step.is-done .pc-action-progress__dot::after {
  transform: scale(1);
}

/* =========================================================
   BUTTONS — scoped to beat plain `.button` without !important
   ========================================================= */

/* One shared pill button. `.pz-btn` is the shape (single source of truth);
   `--primary` (gradient + glow) leads each screen, `--secondary` (flat deeper
   orange + soft lift) supports it. The app's existing button classes are aliased
   onto it so every standalone text button matches. Icon-circles, colour swatches,
   the segmented size/orientation toggles and the font dropdown are separate
   primitives (styled in their own sections). */
.puzzels-customizer .pz-btn,
.puzzels-customizer .puzzels-cta-btn,
.puzzels-customizer .puzzels-caption-done-btn,
.puzzels-customizer .puzzels-confirm__new,
.puzzels-customizer .puzzels-confirm__cart,
.puzzels-customizer .puzzels-confirm__edit,
.puzzels-customizer .puzzels-browse-btn,
.puzzels-customizer .puzzels-change-img-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: none;
  border-radius: var(--pc-pill);
  padding: 0.55rem 1.35rem;
  min-height: 44px;
  /* Explicit font so buttons carrying the theme's `.button` class (edit/cart/new)
     match the checkout button instead of inheriting the theme's font. */
  font-family: var(--pc-font);
  font-weight: 700;
  font-size: 0.9rem;
  line-height: 1.3;
  cursor: pointer;
  transition: background var(--pc-transition), box-shadow var(--pc-transition), transform var(--pc-bounce), opacity var(--pc-transition), color var(--pc-transition);
}

/* Primary — the main action on a screen. */
.puzzels-customizer .pz-btn--primary,
.puzzels-customizer .puzzels-cta-btn,
.puzzels-customizer .puzzels-caption-done-btn {
  background: var(--pc-accent-grad);
  color: #fff;
  box-shadow: var(--pc-glow);
}
.puzzels-customizer .pz-btn--primary:hover:not(:disabled),
.puzzels-customizer .puzzels-cta-btn:hover:not(:disabled),
.puzzels-customizer .puzzels-caption-done-btn:hover:not(:disabled) {
  opacity: 0.92;
  box-shadow: var(--pc-glow-lg);
  transform: translateY(-1px);
}

/* Secondary — supporting actions. */
.puzzels-customizer .pz-btn--secondary,
.puzzels-customizer .puzzels-confirm__new,
.puzzels-customizer .puzzels-confirm__cart,
.puzzels-customizer .puzzels-confirm__edit,
.puzzels-customizer .puzzels-browse-btn,
.puzzels-customizer .puzzels-change-img-btn {
  background: var(--pc-accent-active);
  color: #fff;
  box-shadow: var(--pc-lift-sm);
}
.puzzels-customizer .pz-btn--secondary:hover:not(:disabled),
.puzzels-customizer .puzzels-confirm__new:hover:not(:disabled),
.puzzels-customizer .puzzels-confirm__cart:hover:not(:disabled),
.puzzels-customizer .puzzels-confirm__edit:hover:not(:disabled),
.puzzels-customizer .puzzels-browse-btn:hover:not(:disabled),
.puzzels-customizer .puzzels-change-img-btn:hover:not(:disabled) {
  background: var(--pc-accent-hover);
  box-shadow: var(--pc-glow);
  transform: translateY(-1px);
}

/* Shared disabled state. */
.puzzels-customizer .pz-btn:disabled,
.puzzels-customizer .puzzels-cta-btn:disabled,
.puzzels-customizer .puzzels-caption-done-btn:disabled,
.puzzels-customizer .puzzels-confirm__new:disabled,
.puzzels-customizer .puzzels-confirm__cart:disabled,
.puzzels-customizer .puzzels-confirm__edit:disabled,
.puzzels-customizer .puzzels-browse-btn:disabled,
.puzzels-customizer .puzzels-change-img-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.puzzels-customizer .puzzels-cta-btn--cart { min-width: 144px; }

/* ── Order confirmation panel ───────────────────────────── */
.puzzels-customizer .puzzels-confirm { display: none; }

.puzzels-customizer .puzzels-confirm:not([hidden]) {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.85rem;
  padding: 2rem 1.5rem 2.2rem;
  /* Same frame height as the photo/box steps; warm radial washes lift the
     white card into a celebratory stage. overflow keeps the confetti inside. */
  min-height: var(--pc-step-min-h);
  background:
    radial-gradient(circle at 16% 10%, rgba(245, 160, 64, 0.14), transparent 36%),
    radial-gradient(circle at 86% 16%, rgba(224, 120, 32, 0.10), transparent 32%),
    #fff;
  overflow: hidden;
  animation: pc-fadein 0.25s var(--pc-transition);
}

/* ── Confetti burst (one-shot on reveal; decorative only) ── */
.puzzels-customizer .puzzels-confirm__burst { position: absolute; inset: 0; pointer-events: none; }
.puzzels-customizer .puzzels-confirm__burst i {
  position: absolute;
  top: 12%;
  left: 50%;
  width: 9px;
  height: 14px;
  border-radius: 2px;
  opacity: 0;
  animation: pc-confetti 1.6s cubic-bezier(0.2, 0.55, 0.4, 1) both;
}
.puzzels-customizer .puzzels-confirm__burst i:nth-child(1)  { --cx: -150px; --cy: 160px; --cr: -220deg; background: #E07820; animation-delay: 0.16s; }
.puzzels-customizer .puzzels-confirm__burst i:nth-child(2)  { --cx: -105px; --cy: 210px; --cr: 260deg;  background: #F5A040; animation-delay: 0.24s; }
.puzzels-customizer .puzzels-confirm__burst i:nth-child(3)  { --cx: -66px;  --cy: 150px; --cr: -300deg; background: #196f3a; animation-delay: 0.20s; width: 7px; height: 11px; }
.puzzels-customizer .puzzels-confirm__burst i:nth-child(4)  { --cx: -30px;  --cy: 230px; --cr: 200deg;  background: #E88F22; animation-delay: 0.30s; }
.puzzels-customizer .puzzels-confirm__burst i:nth-child(5)  { --cx: 24px;   --cy: 170px; --cr: -240deg; background: #D9691A; animation-delay: 0.18s; width: 8px; height: 8px; border-radius: 50%; }
.puzzels-customizer .puzzels-confirm__burst i:nth-child(6)  { --cx: 70px;   --cy: 220px; --cr: 320deg;  background: #F8B240; animation-delay: 0.26s; }
.puzzels-customizer .puzzels-confirm__burst i:nth-child(7)  { --cx: 118px;  --cy: 160px; --cr: -200deg; background: #E07820; animation-delay: 0.22s; width: 7px; height: 12px; }
.puzzels-customizer .puzzels-confirm__burst i:nth-child(8)  { --cx: 160px;  --cy: 205px; --cr: 250deg;  background: #196f3a; animation-delay: 0.34s; }
.puzzels-customizer .puzzels-confirm__burst i:nth-child(9)  { --cx: -185px; --cy: 120px; --cr: 210deg;  background: #F6A63E; animation-delay: 0.28s; width: 8px; height: 8px; border-radius: 50%; }
.puzzels-customizer .puzzels-confirm__burst i:nth-child(10) { --cx: 195px;  --cy: 130px; --cr: -260deg; background: #F09338; animation-delay: 0.32s; }
.puzzels-customizer .puzzels-confirm__burst i:nth-child(11) { --cx: -52px;  --cy: 110px; --cr: 190deg;  background: #F5A040; animation-delay: 0.38s; width: 6px; height: 10px; }
.puzzels-customizer .puzzels-confirm__burst i:nth-child(12) { --cx: 92px;   --cy: 115px; --cr: -180deg; background: #E4801F; animation-delay: 0.40s; width: 6px; height: 10px; }
@keyframes pc-confetti {
  0%   { opacity: 0; transform: translate(-50%, -10px) rotate(0deg); }
  10%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--cx)), var(--cy)) rotate(var(--cr)); }
}

/* ── Success badge: gradient coin + drawn check + radiating ring ── */
.puzzels-customizer .puzzels-confirm__badge {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: var(--pc-accent-grad);
  box-shadow: var(--pc-glow-lg);
  color: #fff;
  animation: pc-badge-pop 0.5s var(--pc-bounce) both;
}
.puzzels-customizer .puzzels-confirm__badge::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(224, 120, 32, 0.5);
  animation: pc-badge-ring 1.1s ease-out 0.4s both;
}
.puzzels-customizer .puzzels-confirm__badge svg { width: 42px; height: 42px; }
.puzzels-customizer .puzzels-confirm__check {
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
  animation: pc-check-draw 0.45s ease-out 0.35s forwards;
}
@keyframes pc-badge-pop  { from { transform: scale(0.3); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes pc-badge-ring { from { transform: scale(1); opacity: 0.8; } to { transform: scale(1.9); opacity: 0; } }
@keyframes pc-check-draw { to { stroke-dashoffset: 0; } }

.puzzels-customizer .puzzels-confirm__title {
  margin: 0;
  font-size: clamp(1.3rem, 3.4vw, 1.6rem);
  font-weight: 900;
  background: var(--pc-accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.puzzels-customizer .puzzels-confirm__subtitle {
  margin: -0.4rem 0 0;
  color: var(--pc-text-muted, #6b7280);
  font-size: 0.95rem;
  font-weight: 600;
}

/* ── Product showcase: overlapping tilted mockup cards ── */
.puzzels-customizer .puzzels-confirm__showcase {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-top: 0.3rem;
}
.puzzels-customizer .puzzels-confirm__media {
  margin: 0;
  padding: 8px 8px 4px;
  background: #fff;
  border-radius: var(--pc-radius-md);
  box-shadow: var(--pc-shadow-overlay);
  transition: transform var(--pc-bounce), box-shadow var(--pc-transition);
}
.puzzels-customizer .puzzels-confirm__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(var(--pc-radius-md) - 6px);
}
.puzzels-customizer .puzzels-confirm__media figcaption {
  padding: 7px 4px 3px;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--pc-text-warm);
}
.puzzels-customizer .puzzels-confirm__media--puzzle {
  width: min(48vw, 300px);
  transform: rotate(-3deg);
  z-index: 1;
  animation: pc-card-in-a 0.55s var(--pc-bounce) 0.2s backwards;
}
.puzzels-customizer .puzzels-confirm__media--box {
  width: min(34vw, 200px);
  margin-inline-start: -32px;
  margin-top: 30px;
  transform: rotate(4deg);
  animation: pc-card-in-b 0.55s var(--pc-bounce) 0.34s backwards;
}
/* Real 3D fold snapshot (transparent PNG): drop the photo frame and let the
   box float with its own shadow instead. */
.puzzels-customizer .puzzels-confirm__media--box.is-3d {
  padding: 0;
  background: transparent;
  box-shadow: none;
  width: min(40vw, 230px);
  margin-top: 22px;
}
.puzzels-customizer .puzzels-confirm__media--box.is-3d img {
  border-radius: 0;
  filter: drop-shadow(0 16px 20px rgba(0, 0, 0, 0.28));
}
.puzzels-customizer .puzzels-confirm__media--box.is-3d:hover { box-shadow: none; }
.puzzels-customizer .puzzels-confirm__media:hover {
  transform: rotate(0deg) translateY(-4px);
  box-shadow: var(--pc-glow-lg);
  z-index: 2;
}
.puzzels-customizer .puzzels-confirm__showcase.is-single .puzzels-confirm__media--puzzle { transform: rotate(-1.5deg); }
.puzzels-customizer .puzzels-confirm__showcase.is-single .puzzels-confirm__media--puzzle:hover { transform: rotate(0deg) translateY(-4px); }
@keyframes pc-card-in-a { from { opacity: 0; transform: rotate(-9deg) translateY(24px) scale(0.92); } to { opacity: 1; transform: rotate(-3deg) translateY(0) scale(1); } }
@keyframes pc-card-in-b { from { opacity: 0; transform: rotate(11deg) translateY(24px) scale(0.92); } to { opacity: 1; transform: rotate(4deg) translateY(0) scale(1); } }

/* ── Actions: one consistent premium button system (icon + label) ──
   All four share the same height, radius, weight and depth treatment
   (gradient + colored glow + inner top sheen). Hierarchy comes from color:
   checkout = brand primary spanning the full row; view-cart = emerald and
   create-another = violet secondaries; back-to-edit = quiet ghost.
   (box-back shares .puzzels-confirm__new but lives outside .puzzels-confirm,
   so it keeps the flat secondary style from the `.pz-btn` group above.) */
.puzzels-customizer .puzzels-confirm__actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  width: min(100%, 460px);
  margin-top: 0.9rem;
}
/* Actions can be <button> or <a> (the memory flow links straight to cart/checkout). */
.puzzels-customizer .puzzels-confirm .puzzels-confirm__actions > button,
.puzzels-customizer .puzzels-confirm .puzzels-confirm__actions > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  min-width: 0;
  min-height: 50px;
  padding: 0.55rem 0.9rem;
  border: 0;
  border-radius: 14px;
  font-family: var(--pc-font);
  font-size: 0.9rem;
  font-weight: 800;
  line-height: 1.25;
  text-decoration: none;
  transition: transform var(--pc-bounce), box-shadow var(--pc-transition), filter var(--pc-transition), background var(--pc-transition);
}
.puzzels-customizer .puzzels-confirm__actions button svg,
.puzzels-customizer .puzzels-confirm__actions a svg {
  width: 18px;
  height: 18px;
  flex: none;
  transition: transform var(--pc-transition);
}
.puzzels-customizer .puzzels-confirm__actions button:hover:not(:disabled) svg,
.puzzels-customizer .puzzels-confirm__actions a:hover svg { transform: scale(1.15) rotate(-6deg); }
.puzzels-customizer .puzzels-confirm__actions button:focus-visible,
.puzzels-customizer .puzzels-confirm__actions a:focus-visible { outline: none; box-shadow: var(--pc-ring); }
.puzzels-customizer .puzzels-confirm__actions button:active:not(:disabled),
.puzzels-customizer .puzzels-confirm__actions a:active { transform: translateY(0) scale(0.985); }

/* Primary — checkout: brand gradient, full row, slightly taller. */
.puzzels-customizer .puzzels-confirm .puzzels-confirm__actions > .puzzels-cta-btn {
  grid-column: 1 / -1;
  min-height: 56px;
  font-size: 1.05rem;
  color: #fff;
  background: var(--pc-accent-grad);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), var(--pc-glow);
}
.puzzels-customizer .puzzels-confirm .puzzels-confirm__actions > .puzzels-cta-btn:hover:not(:disabled) {
  background: var(--pc-accent-grad);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), var(--pc-glow-lg);
  transform: translateY(-2px);
  filter: saturate(1.08);
  opacity: 1;
}

/* Secondaries — emerald (view cart) + violet (create another): same depth recipe. */
.puzzels-customizer .puzzels-confirm .puzzels-confirm__cart {
  color: #fff;
  background: linear-gradient(135deg, #0B7A5C 0%, #17A87B 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 4px 18px rgba(14, 138, 103, 0.32);
}
.puzzels-customizer .puzzels-confirm .puzzels-confirm__cart:hover:not(:disabled) {
  background: linear-gradient(135deg, #0B7A5C 0%, #17A87B 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 8px 26px rgba(14, 138, 103, 0.42);
  transform: translateY(-2px);
  filter: saturate(1.08);
  opacity: 1;
}
.puzzels-customizer .puzzels-confirm .puzzels-confirm__new {
  color: #fff;
  background: linear-gradient(135deg, #6D28D9 0%, #9333EA 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 4px 18px rgba(124, 58, 237, 0.32);
}
.puzzels-customizer .puzzels-confirm .puzzels-confirm__new:hover:not(:disabled) {
  background: linear-gradient(135deg, #6D28D9 0%, #9333EA 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.26), 0 8px 26px rgba(124, 58, 237, 0.42);
  transform: translateY(-2px);
  filter: saturate(1.08);
  opacity: 1;
}

/* Tertiary ghost — back to edit: quiet, warm outline. */
.puzzels-customizer .puzzels-confirm .puzzels-confirm__edit {
  color: var(--pc-text-warm-strong);
  background: #fff;
  box-shadow: inset 0 0 0 1.5px var(--pc-border-warm), var(--pc-shadow-sm);
}
.puzzels-customizer .puzzels-confirm .puzzels-confirm__edit:hover:not(:disabled) {
  background: var(--pc-accent-wash);
  box-shadow: inset 0 0 0 1.5px var(--pc-accent-active), var(--pc-lift-sm);
  transform: translateY(-2px);
  opacity: 1;
}

/* Reduced motion: no confetti/pop/ring — content appears with the panel fade only. */
@media (prefers-reduced-motion: reduce) {
  .puzzels-customizer .puzzels-confirm__burst { display: none; }
  .puzzels-customizer .puzzels-confirm__badge,
  .puzzels-customizer .puzzels-confirm__badge::after,
  .puzzels-customizer .puzzels-confirm__media--puzzle,
  .puzzels-customizer .puzzels-confirm__media--box { animation: none; }
  .puzzels-customizer .puzzels-confirm__check { animation: none; stroke-dashoffset: 0; }
}

/* ── Box step ───────────────────────────────────────────── */
.puzzels-customizer .puzzels-box-step { display: none; }
/* Same white card surface as the photo step's `.puzzels-panel` so the two
   steps read as one design system (the panel is hidden while this shows, so
   the root's own radius + overflow round this card — no clip here, which would
   otherwise cut off the open font dropdown). */
.puzzels-customizer .puzzels-box-step:not([hidden]) {
  display: block;
  background: #fff;
  animation: pc-fadein 0.25s var(--pc-transition);
}

.puzzels-customizer .puzzels-box-step__body { padding: 1.3rem 1.5rem; min-height: var(--pc-step-min-h); }

.puzzels-customizer .puzzels-box-styles { display: none; }
.puzzels-customizer .puzzels-box-styles:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
  margin: 0 0 1rem;
}

.puzzels-customizer .puzzels-box-style {
  border: 2px solid var(--pc-border, #ead7c2);
  border-radius: var(--pc-radius-md);
  background: #fff;
  padding: 5px;
  cursor: pointer;
  width: 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.puzzels-customizer .puzzels-box-style.is-active {
  border-color: var(--pc-accent, #E07820);
  box-shadow: var(--pc-glow, 0 4px 20px rgba(224, 120, 32, 0.3));
}

.puzzels-customizer .puzzels-box-style img { width: 100%; height: 64px; object-fit: contain; display: block; }
.puzzels-customizer .puzzels-box-style span { font-size: 0.72rem; color: var(--pc-text-muted, #6b7280); text-align: center; }

.puzzels-customizer .puzzels-box-board {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
  border-radius: var(--pc-radius-md);
  padding: 0.9rem;
  /* Height follows the preview (the canvas is capped in _fitCanvas) so the board
     hugs the box artwork instead of a fixed stage that overflowed portrait boxes
     and letterboxed landscape ones. A floor keeps very short boxes from looking
     cramped. */
  height: auto;
  min-height: 280px;
  box-sizing: border-box;
}
.puzzels-customizer .puzzels-box-board canvas { max-width: 100%; }
.puzzels-customizer .puzzels-box-board[hidden] { display: none; }

/* ── Box view toggle (2D edit ⇄ 3D preview) — hidden: the box step stays on one view ── */
.puzzels-customizer .puzzels-box-viewtoggle {
  display: none;
  justify-content: center;
  gap: 4px;
  width: max-content;
  margin: 0 auto 0.8rem;
  padding: 4px;
  background: var(--pc-accent-soft);
  border-radius: var(--pc-pill);
}
.puzzels-customizer .pbx-view-btn {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0.42rem 1.05rem;
  border-radius: var(--pc-pill);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--pc-text-warm);
  cursor: pointer;
  transition: background var(--pc-transition), color var(--pc-transition);
}
.puzzels-customizer .pbx-view-btn.is-active {
  background: #fff;
  color: var(--pc-accent);
  box-shadow: var(--pc-lift-sm);
}

/* ── 3D box: the flat dieline folded onto a box computed from W×D×H ── */
.puzzels-customizer .puzzels-box-3d {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  padding: 1.6rem 1rem;
  background: #f3f4f6;
  border-radius: var(--pc-radius-md);
  box-sizing: border-box;
}
.puzzels-customizer .puzzels-box-3d[hidden] { display: none; }
/* The fold is drawn on a <canvas> (cross-browser); the drop-shadow follows the
   box silhouette since the canvas is transparent outside the faces. */
.puzzels-customizer .box3d-canvas {
  display: block;
  max-width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.22));
}

.puzzels-customizer .puzzels-box-controls { max-width: 560px; margin: 1rem auto 0; display: grid; gap: 0.7rem; }

/* Box message + label: same field look as the caption editor's controls
   (label = `.caption-row__label`, input = `.caption-textarea`). */
.puzzels-customizer .puzzels-box-ctl { display: flex; flex-direction: column; gap: 0.4rem; }

.puzzels-customizer .puzzels-box-ctl > span {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--pc-text-warm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
}

.puzzels-customizer .puzzels-box-ctl input[type="text"] {
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 0.72rem 0.82rem;
  border: 1.5px solid rgba(224, 120, 32, 0.24);
  border-radius: var(--pc-pill);
  font-size: 16px;
  font-family: var(--pc-font);
  color: var(--pc-text);
  background: #fff;
  transition: border-color var(--pc-transition), box-shadow var(--pc-transition), background var(--pc-transition);
}

.puzzels-customizer .puzzels-box-ctl input[type="text"]:focus {
  outline: none;
  border-color: var(--pc-accent-hover);
  box-shadow: var(--pc-ring);
  background: var(--pc-accent-wash);
}

/* Style-controls row (font / size / color) reuses the caption components,
   so it only needs spacing from the board above it. */
.puzzels-customizer #puzzels-box-style-controls { margin-top: 0.2rem; }

/* Message + actions live in their own block (pinned to the bottom on mobile so the
   canvas never covers the message field). */
.puzzels-customizer .puzzels-box-foot { max-width: 560px; margin: 0.5rem auto 0; display: grid; gap: 0.7rem; }

/* Receipt-style order details; the last row (the price) is emphasised positionally.
   Shared by the puzzle confirmation screen and the Memory Cards summary step. */
.puzzels-customizer .pc-summary-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.55rem 1.2rem;
  margin: 0 auto;
  width: min(420px, 100%);
  padding: 0.95rem 1.15rem;
  background: #fff;
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius-md);
  box-shadow: var(--pc-lift-sm);
}
.puzzels-customizer .pc-summary-list dt { font-weight: 700; color: var(--pc-text-warm-strong); }
.puzzels-customizer .pc-summary-list dd { margin: 0; color: var(--pc-text); text-align: end; }
/* Optional rows are toggled with [hidden] — themes style bare dt/dd, so be explicit. */
.puzzels-customizer .pc-summary-list [hidden] { display: none; }
.puzzels-customizer .pc-summary-list dt:last-of-type,
.puzzels-customizer .pc-summary-list dd:last-of-type {
  padding-top: 0.5rem;
  border-top: 1px dashed var(--pc-border);
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--pc-accent-hover);
}

.puzzels-customizer .puzzels-box-error {
  margin: 0.75rem auto 0;
  max-width: 520px;
  text-align: center;
  color: var(--pc-danger);
  font-size: 0.85rem;
  font-weight: 600;
}
.puzzels-customizer .puzzels-box-error[hidden] { display: none; }

.puzzels-customizer .puzzels-box-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
  padding: 1rem 1.5rem 1.25rem;
  border-top: 1px solid rgba(224, 120, 32, 0.18);
  margin-top: 1rem;
}

/* =========================================================
   DROP ZONE
   ========================================================= */

.puzzels-customizer .puzzels-drop-zone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 3.5rem 2rem;
  border: 2.5px dashed var(--pc-border-warm);
  border-radius: var(--pc-radius-md);
  background: var(--pc-accent-wash);
  cursor: pointer;
  transition: border-color var(--pc-transition), background var(--pc-transition), transform var(--pc-transition), box-shadow var(--pc-transition);
  text-align: center;
}

.puzzels-customizer .puzzels-drop-zone:hover,
.puzzels-customizer .puzzels-drop-zone.drag-over {
  border-color: var(--pc-accent-active);
  background: var(--pc-accent-soft);
  transform: translateY(-1px);
  box-shadow: var(--pc-lift-sm);
}

.puzzels-customizer .puzzels-drop-zone__icon {
  width: 68px;
  height: 68px;
  color: var(--pc-accent);
  transition: transform var(--pc-bounce), color var(--pc-transition);
}

.puzzels-customizer .puzzels-drop-zone:hover .puzzels-drop-zone__icon,
.puzzels-customizer .puzzels-drop-zone.drag-over .puzzels-drop-zone__icon {
  transform: translateY(-2px) scale(1.04);
  color: var(--pc-accent-active);
}

.puzzels-customizer .puzzels-drop-zone__icon svg { width: 100%; height: 100%; }

.puzzels-customizer .puzzels-drop-zone__text {
  margin: 0;
  font-weight: 600;
  font-size: 1rem;
  color: var(--pc-text);
}

.puzzels-customizer .puzzels-drop-zone__or {
  margin: 0;
  font-size: 0.875rem;
  color: var(--pc-text-muted);
}

/* `.puzzels-browse-btn` ("Choose File") is the secondary variant of `.pz-btn`. */

.puzzels-customizer .puzzels-upload-hint {
  text-align: center;
  font-size: 0.8rem;
  color: var(--pc-text-warm-muted);
  margin: 0.85rem 0 0;
  line-height: 1.6;
}

/* ── Upload progress bar ────────────────────────────────── */
.puzzels-customizer .puzzels-progress {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

.puzzels-customizer .puzzels-progress__bar {
  flex: 1;
  height: 6px;
  background: var(--pc-border);
  border-radius: var(--pc-radius-xs);
  overflow: hidden;
}

.puzzels-customizer .puzzels-progress__fill {
  height: 100%;
  width: 0;
  background: var(--pc-accent-grad);
  border-radius: var(--pc-radius-xs);
  transition: width 0.25s var(--pc-transition);
}

.puzzels-customizer .puzzels-progress__text {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--pc-accent);
  white-space: nowrap;
  min-width: 36px;
}

/* ── Notices ────────────────────────────────────────────── */
.puzzels-customizer .puzzels-notice {
  padding: 0.82rem 1rem;
  border-radius: var(--pc-pill);
  font-size: 0.875rem;
  margin-top: 0.75rem;
}

.puzzels-customizer .puzzels-notice--error {
  background: var(--pc-danger-bg);
  border: 1px solid var(--pc-danger-border);
  color: var(--pc-danger);
}

/* =========================================================
   EDITOR LAYOUT (full-width canvas + controls bar below)
   ========================================================= */

.puzzels-customizer .puzzle-editor-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

/* ── Orientation toggle ─────────────────────────────────── */
.puzzels-customizer .orientation-toggle {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.puzzels-customizer .orient-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border: 1.5px solid rgba(224, 120, 32, 0.24);
  border-radius: var(--pc-pill);
  background: #fff;
  color: var(--pc-text-warm-muted);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--pc-transition), color var(--pc-transition), background var(--pc-transition), transform var(--pc-transition), box-shadow var(--pc-transition);
  min-height: 40px;
}

.puzzels-customizer .orient-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.puzzels-customizer .orient-btn.active,
.puzzels-customizer .orient-btn:hover {
  border-color: var(--pc-accent-active);
  color: var(--pc-text-warm);
  background: var(--pc-accent-soft);
  transform: translateY(-1px);
  box-shadow: var(--pc-lift-sm);
}

/* ── Wooden puzzle board (centerpiece — kept rich) ──────── */
.puzzels-customizer .puzzle-board {
  position: relative;
  background-color: var(--puzzels-board-bg, #8B6010);
  background-image:
    repeating-linear-gradient(90deg, transparent, transparent 4px, rgba(0,0,0,0.04) 4px, rgba(0,0,0,0.04) 8px),
    linear-gradient(155deg, rgba(255,255,255,0.24) 0%, rgba(255,255,255,0.06) 28%, rgba(0,0,0,0.12) 68%, rgba(0,0,0,0.22) 100%);
  padding: 14px;
  border-radius: var(--pc-radius-lg);
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.35),
    inset 0 2px 6px rgba(255, 255, 255, 0.22),
    inset 0 -2px 6px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--pc-stage-h);
  box-sizing: border-box;
  border: 1px solid rgba(96, 56, 14, 0.35);
}

.puzzels-customizer .puzzle-board canvas {
  display: block;
  border-radius: var(--pc-radius-sm);
  /* Contain within the fixed stage so the board never resizes to the artwork. */
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
}

/* ── Add-photo "+" overlay (board-first design widget) ──── */
.puzzels-customizer .puzzle-board__add {
  position: absolute;
  inset: 0;
  margin: auto;
  width: max-content;
  height: max-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.1rem 1.5rem;
  background: rgba(255, 255, 255, 0.92);
  border: 0;
  border-radius: var(--pc-radius-md);
  box-shadow: var(--pc-shadow-overlay);
  cursor: pointer;
  z-index: 3;
  transition: transform var(--pc-transition), box-shadow var(--pc-transition), background var(--pc-transition);
}

.puzzels-customizer .puzzle-board__add:hover {
  transform: translateY(-1px) scale(1.02);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.34);
  background: #fff;
}

.puzzels-customizer .puzzle-board__add-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--pc-accent-grad, #E07820);
  color: #fff;
  box-shadow: var(--pc-glow, 0 4px 20px rgba(224, 120, 32, 0.30));
}

.puzzels-customizer .puzzle-board__add-icon svg { width: 28px; height: 28px; }

.puzzels-customizer .puzzle-board__add-label {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--pc-text, #111827);
}

.puzzels-customizer .puzzle-board.is-drop {
  outline: 3px dashed rgba(255, 255, 255, 0.7);
  outline-offset: -10px;
}

/* ── Top toolbar (rotate / add text / zoom / replace) ───── */
.puzzels-customizer .puzzels-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.5rem;
  margin-bottom: 0.85rem;
  background: var(--pc-surface, #fff);
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius-md);
  box-shadow: var(--pc-lift-sm);
}

.puzzels-customizer .puzzels-toolbar__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 40px;
  padding: 0.45rem 0.8rem;
  border: 0;
  border-radius: var(--pc-pill, 999px);
  background: transparent;
  color: var(--pc-text, #111827);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--pc-transition, 0.18s ease), color var(--pc-transition, 0.18s ease);
}

.puzzels-customizer .puzzels-toolbar__btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.puzzels-customizer .puzzels-toolbar__btn:hover {
  background: var(--pc-accent-light, #FFF4E8);
  color: var(--pc-accent, #E07820);
}

.puzzels-customizer .puzzels-toolbar__btn.has-caption {
  color: var(--pc-accent, #E07820);
}

.puzzels-customizer .puzzels-toolbar__btn--danger:hover {
  background: var(--pc-danger-bg);
  color: var(--pc-danger);
}

.puzzels-customizer .puzzels-toolbar__btn--icon {
  padding: 0.45rem;
}

.puzzels-customizer .puzzels-toolbar__btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.puzzels-customizer .puzzels-toolbar__btn:disabled:hover {
  background: transparent;
  color: var(--pc-text, #111827);
}

.puzzels-customizer .puzzels-toolbar__sep {
  width: 1px;
  align-self: stretch;
  margin: 0.2rem 0.15rem;
  background: var(--pc-border);
}

/* ── Canvas loading shimmer ─────────────────────────────── */
.puzzels-customizer .puzzle-canvas-loading {
  /* Fills the fixed board stage so there's no height jump on load. */
  width: 100%;
  height: 100%;
  border-radius: var(--pc-radius-sm);
  overflow: hidden;
  position: relative;
  background: #2a1a06;
}

.puzzels-customizer .puzzle-canvas-loading__shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0) 100%
  );
  background-size: 200% 100%;
  animation: pc-shimmer 1.4s infinite;
}

@keyframes pc-shimmer {
  from { background-position: -200% 0; }
  to   { background-position:  200% 0; }
}

/* ── Upload state: puzzle pieces assembling over the board + real progress ── */
.puzzels-customizer .puzzle-upload-state {
  position: absolute;
  inset: 14px; /* match the board padding so the wood frame stays visible */
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  border-radius: var(--pc-radius-sm);
  background: rgba(255, 250, 242, 0.94);
  backdrop-filter: blur(3px);
  opacity: 1;
  transition: opacity 0.35s var(--pc-transition);
}
.puzzels-customizer .puzzle-upload-state[hidden] { display: none; }
.puzzels-customizer .puzzle-upload-state.is-done { opacity: 0; pointer-events: none; }

/* Four pieces fly in from the corners, snap into a 2×2 block, pulse, repeat. */
.puzzels-customizer .puzzle-upload-state__pieces {
  display: grid;
  grid-template-columns: repeat(2, 44px);
  gap: 3px;
}
.puzzels-customizer .puzzle-upload-state__piece {
  width: 44px;
  height: 44px;
  animation: pc-piece-snap 2.4s var(--pc-bounce) infinite;
}
.puzzels-customizer .puzzle-upload-state__piece:nth-child(1) { color: #E07820; --px: -46px; --py: -40px; --pr: -70deg; }
.puzzels-customizer .puzzle-upload-state__piece:nth-child(2) { color: #F5A040; --px: 46px;  --py: -40px; --pr: 60deg;  transform: rotate(90deg);  animation-delay: 0.12s; }
.puzzels-customizer .puzzle-upload-state__piece:nth-child(3) { color: #E88F22; --px: -46px; --py: 40px;  --pr: 55deg;  transform: rotate(270deg); animation-delay: 0.24s; }
.puzzels-customizer .puzzle-upload-state__piece:nth-child(4) { color: #D9691A; --px: 46px;  --py: 40px;  --pr: -60deg; transform: rotate(180deg); animation-delay: 0.36s; }
@keyframes pc-piece-snap {
  0%        { opacity: 0; translate: var(--px) var(--py); rotate: var(--pr); scale: 0.6; }
  32%       { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1; }
  46%       { scale: 1.06; }
  56%, 78%  { opacity: 1; translate: 0 0; rotate: 0deg; scale: 1; }
  96%, 100% { opacity: 0; translate: 0 0; rotate: 0deg; scale: 0.94; }
}

.puzzels-customizer .puzzle-upload-state__label {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--pc-text-warm-strong);
}

.puzzels-customizer .puzzle-upload-state__bar {
  width: min(72%, 300px);
  height: 10px;
  border-radius: var(--pc-pill);
  background: rgba(139, 70, 15, 0.14);
  overflow: hidden;
}
.puzzels-customizer .puzzle-upload-state__fill {
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--pc-accent-grad);
  box-shadow: 0 0 10px rgba(224, 120, 32, 0.45);
  transition: width 0.25s ease-out;
}
.puzzels-customizer .puzzle-upload-state__pct {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--pc-text-warm);
  font-variant-numeric: tabular-nums;
  margin-top: -0.4rem;
}

@media (prefers-reduced-motion: reduce) {
  .puzzels-customizer .puzzle-upload-state__piece { animation: none; opacity: 1; translate: 0 0; scale: 1; }
  .puzzels-customizer .puzzle-upload-state__piece:nth-child(1) { rotate: 0deg; }
  .puzzels-customizer .puzzle-upload-state { transition: none; backdrop-filter: none; }
}

/* ── Canvas footer: zoom ────────────────────────────────── */
.puzzels-customizer .pc-canvas-footer {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}

.puzzels-customizer .zoom-controls {
  display: flex;
  gap: 0.4rem;
}

.puzzels-customizer .zoom-btn {
  width: 40px;
  height: 40px;
  min-width: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(224, 120, 32, 0.26);
  background: #fff;
  color: var(--pc-text-warm-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color var(--pc-transition), color var(--pc-transition), background var(--pc-transition), transform var(--pc-transition), box-shadow var(--pc-transition);
  padding: 0;
  box-shadow: var(--pc-shadow-sm);
  flex-shrink: 0;
}

.puzzels-customizer .zoom-btn:hover {
  border-color: var(--pc-accent-active);
  color: var(--pc-text-warm);
  background: var(--pc-accent-soft);
  transform: translateY(-1px);
  box-shadow: var(--pc-lift-sm);
}

.puzzels-customizer .zoom-btn svg { display: block; pointer-events: none; }

/* ── Drag hint ──────────────────────────────────────────── */
.puzzels-customizer .drag-hint {
  text-align: center;
  font-size: 0.75rem;
  color: var(--pc-text-warm-muted);
  margin-top: 0.4rem;
}

/* =========================================================
   SIDEBAR
   ========================================================= */

.puzzels-customizer .puzzle-sidebar {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 0.9rem;
}

.puzzels-customizer .puzzels-caption-launch-btn {
  justify-content: center;
}

/* =========================================================
   CAPTION EDITOR
   Mobile (<860px): a NON-modal bottom sheet (no backdrop) so the
   puzzle stays visible above it and stays interactive - the text
   can be dragged on the canvas while editing, and every control
   renders live.
   Desktop (≥860px): inline popover beneath the sidebar — see
   the @media (min-width: 860px) block below.
   ========================================================= */

.puzzels-customizer .puzzels-caption-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  pointer-events: none; /* only the sheet catches taps — the board above stays live */
}

.puzzels-customizer .puzzels-caption-modal[hidden] {
  display: none;
}

.puzzels-customizer .puzzels-caption-modal__dialog {
  position: relative;
  pointer-events: auto;
  width: min(560px, 100vw);
  max-height: min(70vh, 480px);
  overflow-y: auto;
  border-radius: var(--pc-radius-lg) var(--pc-radius-lg) 0 0;
  border: 1px solid rgba(224, 120, 32, 0.22);
  border-bottom: 0;
  background: #fff;
  box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.22);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(105%);
  transition: transform 0.28s var(--pc-transition);
  will-change: transform;
}

.puzzels-customizer .puzzels-caption-modal.is-open .puzzels-caption-modal__dialog {
  transform: translateY(0);
}

/* Sheet grip — the visual "this slides" cue (hidden on desktop). */
.puzzels-customizer .puzzels-caption-modal__grip {
  width: 44px;
  height: 4px;
  margin: 8px auto 0;
  border-radius: 999px;
  background: rgba(139, 70, 15, 0.25);
}

@media (prefers-reduced-motion: reduce) {
  .puzzels-customizer .puzzels-caption-modal__dialog { transition: none; }
}

.puzzels-customizer .puzzels-caption-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(224, 120, 32, 0.16);
  background: var(--pc-accent-grad-soft);
}

.puzzels-customizer .puzzels-caption-modal__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--pc-text-warm-strong);
}

.puzzels-customizer .puzzels-caption-modal__close {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  min-width: 38px;
  padding: 0;
  margin: 0;
  border: 1px solid rgba(224, 120, 32, 0.22);
  border-radius: 50%;
  background: #fff;
  color: var(--pc-text-warm);
  cursor: pointer;
  line-height: 1;
  box-shadow: none;
}

.puzzels-customizer .puzzels-caption-modal__close:hover {
  background: var(--pc-accent-soft);
  border-color: var(--pc-accent-active);
}

.puzzels-customizer .puzzels-caption-modal__close svg {
  display: block;
  color: inherit;
  pointer-events: none;
}

.puzzels-customizer .caption-body {
  padding: 0.9rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  background: #fff;
  overflow: auto;
}

.puzzels-customizer .caption-controls-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.62rem;
}

.puzzels-customizer .caption-textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 82px;
  padding: 0.72rem 0.82rem;
  border: 1.5px solid rgba(224, 120, 32, 0.24);
  border-radius: var(--pc-pill);
  font-size: 0.9rem;
  font-family: var(--pc-font);
  resize: vertical;
  transition: border-color var(--pc-transition), box-shadow var(--pc-transition), background var(--pc-transition);
  color: var(--pc-text);
  background: #fff;
}

.puzzels-customizer .caption-textarea:focus {
  outline: none;
  border-color: var(--pc-accent-hover);
  box-shadow: var(--pc-ring);
  background: var(--pc-accent-wash);
}

.puzzels-customizer .caption-row {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  flex-direction: column;
  border: 1px solid rgba(224, 120, 32, 0.18);
  /* A card radius, not the pill (999px) — a capsule looks wrong on a multi-line
     control card and clashed with the nested md-radius custom-colour card. */
  border-radius: var(--pc-radius-md);
  background: #fff;
  padding: 0.7rem 0.72rem;
}

.puzzels-customizer .caption-row--full {
  grid-column: 1 / -1;
}

.puzzels-customizer .caption-row__label {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--pc-text-warm);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  width: auto;
  line-height: 1;
  flex-shrink: 0;
}

/* ── Text size — a range slider ("volume line", shared by caption + box) ── */
.puzzels-customizer .puzzels-caption-size-range,
.puzzels-customizer .puzzels-box-size-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 8px;
  margin: 11px 0;
  border-radius: 999px;
  background: var(--pc-accent-soft);
  border: 1px solid rgba(224, 120, 32, 0.24);
  cursor: pointer;
  outline: none;
}
.puzzels-customizer .puzzels-caption-size-range::-webkit-slider-thumb,
.puzzels-customizer .puzzels-box-size-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--pc-accent);
  border: 3px solid #fff;
  box-shadow: var(--pc-lift-sm);
  cursor: grab;
}
.puzzels-customizer .puzzels-caption-size-range::-webkit-slider-thumb:active,
.puzzels-customizer .puzzels-box-size-range::-webkit-slider-thumb:active { cursor: grabbing; }
.puzzels-customizer .puzzels-caption-size-range::-moz-range-thumb,
.puzzels-customizer .puzzels-box-size-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--pc-accent);
  box-shadow: var(--pc-lift-sm);
  cursor: grab;
}
.puzzels-customizer .puzzels-caption-size-range::-moz-range-track,
.puzzels-customizer .puzzels-box-size-range::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: var(--pc-accent-soft);
}
.puzzels-customizer .puzzels-caption-size-range:focus-visible,
.puzzels-customizer .puzzels-box-size-range:focus-visible { box-shadow: var(--pc-ring); }

/* ── Font dropdown ──────────────────────────────────────── */
.puzzels-customizer .font-dropdown { position: relative; flex: 1; }

.puzzels-customizer .font-dropdown-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 44px;              /* match the size buttons so Size + Font cards align */
  padding: 0.56rem 0.8rem;
  border: 1.5px solid rgba(224, 120, 32, 0.24);
  border-radius: var(--pc-pill);
  background: #fff;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--pc-text-warm-strong);
  transition: border-color var(--pc-transition);
  min-height: 40px;
}

.puzzels-customizer .font-dropdown-preview {
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.puzzels-customizer .font-dropdown-btn svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--pc-text-warm-muted);
}

.puzzels-customizer .font-dropdown-btn:hover,
.puzzels-customizer .font-dropdown-btn[aria-expanded="true"] {
  border-color: var(--pc-accent-active);
}

.puzzels-customizer .font-dropdown-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 100;
  background: #fff;
  border: 1px solid rgba(224, 120, 32, 0.3);
  border-radius: var(--pc-radius-md);
  box-shadow: var(--pc-shadow);
  list-style: none;
  margin: 0;
  padding: 0.35rem 0;
  max-height: 220px;
  overflow-y: auto;
}

.puzzels-customizer .font-dropdown-list:not([hidden]) {
  animation: pc-dropdown-in 0.2s var(--pc-transition);
}

.puzzels-customizer .font-group-label {
  position: sticky;
  top: -0.35rem;
  z-index: 1;
  padding: 0.45rem 0.9rem;
  background: var(--pc-accent-wash);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pc-text-warm);
}

.puzzels-customizer .font-option {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  padding: 0.55rem 0.9rem;
  cursor: pointer;
  font-size: 1.1rem;
  color: var(--pc-text);
  transition: background 0.15s;
}

.puzzels-customizer .font-option__name {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--pc-text-warm);
}

.puzzels-customizer .font-option__sample {
  display: block;
  line-height: 1.4;
}

.puzzels-customizer .font-option:hover,
.puzzels-customizer .font-option.active {
  background: var(--pc-accent-soft);
  color: var(--pc-text-warm);
}

/* No radio/circle indicator on the chosen font — the row highlight is the only
   selection cue. Force off any theme list bullet/marker + the click focus ring
   (!important so a theme's `li::before`/`list-style` can't reinstate a dot). */
.puzzels-customizer .font-dropdown-list,
.puzzels-customizer .font-dropdown-list > li,
.puzzels-customizer .font-option { list-style: none !important; }
.puzzels-customizer .font-option::marker,
.puzzels-customizer .font-group-label::marker { content: "" !important; }
.puzzels-customizer .font-option::before,
.puzzels-customizer .font-option::after { content: none !important; display: none !important; }
.puzzels-customizer .font-option:focus,
.puzzels-customizer .font-option:focus-visible { outline: none !important; box-shadow: none !important; }

/* ── Color picker (Canva-style) ────────────────────────────
   Always-visible inline block filling the box step's color row:
   saturation/brightness area + hue slider + quick colors + hex. */
.puzzels-customizer .pz-cp {
  width: 100%;
  padding: 12px;
  background: #fff;
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius-md);
  box-shadow: var(--pc-shadow-sm);
  display: grid;
  gap: 10px;
  box-sizing: border-box;
}

/* Quick-select colors. */
.puzzels-customizer .pz-cp__presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.puzzels-customizer .pz-cp__preset {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-radius: 50%;
  border: 2px solid var(--pc-border);
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  background-clip: padding-box;
  transition: transform var(--pc-bounce), box-shadow var(--pc-transition), border-color var(--pc-transition);
}
.puzzels-customizer .pz-cp__preset:hover,
.puzzels-customizer .pz-cp__preset.is-active {
  transform: translateY(-1px) scale(1.1);
  box-shadow: var(--pc-ring);
  border-color: var(--pc-accent-active);
}
.puzzels-customizer .pz-cp__preset:focus-visible {
  outline: 2px solid rgba(224, 120, 32, 0.7);
  outline-offset: 2px;
}

.puzzels-customizer .pz-cp__sv {
  position: relative;
  height: 140px;
  border-radius: var(--pc-radius);
  background-color: #f00; /* hue — set inline by the picker */
  background-image:
    linear-gradient(to top, #000, rgba(0, 0, 0, 0)),
    linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
  cursor: crosshair;
  touch-action: none;
}
.puzzels-customizer .pz-cp__sv-thumb,
.puzzels-customizer .pz-cp__hue-thumb {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2.5px solid #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.puzzels-customizer .pz-cp__hue {
  position: relative;
  height: 14px;
  border-radius: var(--pc-pill);
  background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
  cursor: pointer;
  touch-action: none;
}
.puzzels-customizer .pz-cp__hue-thumb { top: 50%; }

.puzzels-customizer .pz-cp__row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.puzzels-customizer .pz-cp__preview {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid var(--pc-border);
  flex-shrink: 0;
}
.puzzels-customizer .pz-cp__hex {
  flex: 1;
  min-width: 0;
  height: 34px;
  padding: 0 10px;
  border: 1.5px solid var(--pc-border);
  border-radius: var(--pc-radius);
  font-family: var(--pc-font);
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--pc-text);
  text-transform: uppercase;
}
.puzzels-customizer .pz-cp__hex:focus {
  outline: none;
  border-color: var(--pc-accent-active);
  box-shadow: var(--pc-ring);
}

.puzzels-customizer .puzzels-caption-modal__footer {
  display: flex;
  justify-content: flex-end;
  padding-top: 0.35rem;
}

/* "Done" is the primary variant of `.pz-btn`; only its min-width is bespoke. */
.puzzels-customizer .puzzels-caption-done-btn { min-width: 110px; }

@keyframes pc-dropdown-in {
  from {
    opacity: 0;
    transform: translateY(-3px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── Focus accessibility ────────────────────────────────── */
.puzzels-customizer .puzzels-caption-launch-btn:focus-visible,
.puzzels-customizer .caption-textarea:focus-visible,
.puzzels-customizer .font-dropdown-btn:focus-visible {
  outline: 2px solid rgba(224, 120, 32, 0.7);
  outline-offset: 2px;
}

/* ── Change photo / Add caption ──────────────────────────────
   Secondary variant of `.pz-btn` (shape/colour from the group above); only the
   sidebar layout extras live here. */
.puzzels-customizer .puzzels-change-img-btn {
  width: auto;
  flex-shrink: 0;
  align-self: flex-start;
  box-sizing: border-box;
}

.puzzels-customizer .puzzels-change-img-btn > span {
  display: inline-flex;
  align-items: center;
  line-height: 1.2;
}

.puzzels-customizer .puzzels-change-img-btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* ── Unavailable message ────────────────────────────────── */
.puzzels-unavailable {
  padding: 2rem;
  text-align: center;
  color: var(--pc-text-muted);
  font-style: italic;
}

/* ── Icon helpers ───────────────────────────────────────── */
.puzzels-customizer .puzzels-icon-sm {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

/* =========================================================
   RESPONSIVE — desktop (caption editor becomes inline)
   ========================================================= */

@media (min-width: 860px) {
  /* Caption editor: render in flow beneath the sidebar buttons,
     no overlay/backdrop. The dialog still fades in/out via the
     base `.is-open` opacity transition; JS close handler still
     resolves on the 260ms timer fallback when no transition runs. */
  .puzzels-customizer .puzzels-caption-modal {
    position: static;
    inset: auto;
    display: block;
    z-index: auto;
    padding: 0;
    margin-top: 0.85rem;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }

  .puzzels-customizer .puzzels-caption-modal[hidden] {
    display: none;
  }

  .puzzels-customizer .puzzels-caption-modal__grip {
    display: none;
  }

  .puzzels-customizer .puzzels-caption-modal__dialog {
    width: 100%;
    max-width: none;
    max-height: none;
    margin: 0;
    overflow: visible;
    border-radius: var(--pc-radius-lg);
    box-shadow: var(--pc-shadow);
    border: 1px solid rgba(224, 120, 32, 0.18);
    padding-bottom: 0;
    transform: none;
    transition: none;
  }

  /* On desktop the modal close button is redundant (no overlay
     to dismiss) — keep it for keyboard parity but de-emphasise. */
  .puzzels-customizer .puzzels-caption-modal__close {
    width: 32px;
    height: 32px;
    min-width: 32px;
  }
}

/* =========================================================
   RESPONSIVE — tablet
   ========================================================= */

@media (max-width: 860px) {
  .puzzels-customizer {
    margin: 1.25rem;
    border-radius: 24px;
  }

  .puzzels-customizer .puzzels-panel__head,
  .puzzels-customizer .puzzels-panel__body,
  .puzzels-customizer .pc-action-bar {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }

  /* ── Image toolbar (tablet + phone): a deliberate two-row grid ──
     Row 1 — canvas utilities: undo · redo · zoom-out · zoom-reset · zoom-in
     (five equal icon cells). Row 2 — design actions: rotate · caption ·
     change photo · clear (four labeled tiles, icon above label). Every tool
     has a fixed cell, so the layout is identical on every device — no random
     wrapping and nothing hidden behind a scroll. Separators retire: rows and
     even spacing carry the grouping. */
  .puzzels-customizer .puzzels-toolbar {
    display: grid;
    grid-template-columns: repeat(20, 1fr);
    gap: 0.4rem;
    padding: 0.5rem;
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
  }
  .puzzels-customizer .puzzels-toolbar__sep { display: none; }

  .puzzels-customizer .puzzels-toolbar__btn {
    justify-content: center;
    min-height: 44px;                 /* comfortable touch target */
    padding: 0.4rem 0.3rem;
    font-size: 0.78rem;
    white-space: nowrap;
    background: var(--pc-accent-wash);/* visible resting surface = clear tap affordance */
    border-radius: var(--pc-radius);
    touch-action: manipulation;       /* no double-tap zoom delay on the tools */
  }
  /* Row 1: five equal icon cells (span 4 of 20 each). */
  .puzzels-customizer #puzzels-undo       { grid-row: 1; grid-column: 1 / 5; }
  .puzzels-customizer #puzzels-redo       { grid-row: 1; grid-column: 5 / 9; }
  .puzzels-customizer #puzzels-zoom-out   { grid-row: 1; grid-column: 9 / 13; }
  .puzzels-customizer #puzzels-zoom-reset { grid-row: 1; grid-column: 13 / 17; }
  .puzzels-customizer #puzzels-zoom-in    { grid-row: 1; grid-column: 17 / 21; }
  /* Row 2: four labeled tiles (span 5 of 20 each) — icon stacked above the
     label so Hebrew labels fit comfortably even at 360px. */
  .puzzels-customizer #puzzels-rotate-image,
  .puzzels-customizer #puzzels-caption-toggle,
  .puzzels-customizer #puzzels-change-image-btn,
  .puzzels-customizer #puzzels-reset-all {
    grid-row: 2;
    flex-direction: column;
    gap: 0.25rem;
    min-height: 56px;
    padding: 0.45rem 0.2rem;
    font-size: 0.72rem;
    font-weight: 700;
  }
  .puzzels-customizer #puzzels-rotate-image     { grid-column: 1 / 6; }
  .puzzels-customizer #puzzels-caption-toggle   { grid-column: 6 / 11; }
  .puzzels-customizer #puzzels-change-image-btn { grid-column: 11 / 16; }
  .puzzels-customizer #puzzels-reset-all        { grid-column: 16 / 21; }
  .puzzels-customizer #puzzels-rotate-image svg,
  .puzzels-customizer #puzzels-caption-toggle svg,
  .puzzels-customizer #puzzels-change-image-btn svg,
  .puzzels-customizer #puzzels-reset-all svg { width: 20px; height: 20px; }

  /* Touch feedback — :hover doesn't exist on touch, so press states carry it. */
  .puzzels-customizer .puzzels-toolbar__btn:active:not(:disabled) {
    background: var(--pc-accent-soft);
    color: var(--pc-accent);
    transform: scale(0.96);
  }

  /* Destructive "clear all": permanently tinted — hover-only red is invisible on touch. */
  .puzzels-customizer .puzzels-toolbar .puzzels-toolbar__btn--danger {
    color: var(--pc-danger);
    background: var(--pc-danger-bg);
  }
  .puzzels-customizer .puzzels-toolbar .puzzels-toolbar__btn--danger:active:not(:disabled) {
    background: var(--pc-danger-bg);
    color: var(--pc-danger);
  }
}

/* =========================================================
   RESPONSIVE — mobile
   ========================================================= */

@media (max-width: 660px) {

  .puzzels-customizer .puzzels-flow-stepper {
    grid-template-columns: 1fr;
  }

  .puzzels-customizer .puzzels-onboarding {
    padding: 0.9rem 1rem;
  }

  /* Full-width, flush to screen */
  .puzzels-customizer {
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    border: none;
  }

  .puzzels-customizer .puzzels-panel {
    border-radius: 0;
  }

  /* Sticky action bar at bottom — kept compact so it doesn't
     cover the viewport: the full checklist is dropped in favour
     of the single live feedback message. */
  .puzzels-customizer .pc-action-bar {
    position: sticky;
    bottom: 0;
    z-index: 200;
    padding: 0.7rem 1.1rem calc(0.7rem + env(safe-area-inset-bottom));
    gap: 0.6rem;
    align-items: stretch;
    border-radius: 0;
    box-shadow: var(--pc-shadow-bar);
    background: rgba(255, 250, 243, 0.96);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    flex-direction: column;
  }

  .puzzels-customizer .pc-action-summary,
  .puzzels-customizer .puzzels-cta-btn--cart {
    width: 100%;
  }

  .puzzels-customizer .pc-action-summary {
    gap: 0;
  }

  /* The step-by-step checklist is redundant on a small sticky
     bar — the live message already says what to do next. */
  .puzzels-customizer .pc-action-checklist {
    display: none;
  }

  /* Strip the nested card chrome; the bar itself is the surface. */
  .puzzels-customizer .pc-action-feedback {
    padding: 0;
    background: none;
    border: none;
  }

  .puzzels-customizer .pc-action-feedback.is-warn,
  .puzzels-customizer .pc-action-feedback.is-busy {
    background: none;
  }

  .puzzels-customizer .pc-action-feedback__message {
    font-size: 0.8rem;
    line-height: 1.4;
  }

  .puzzels-customizer .pc-action-feedback.is-warn .pc-action-feedback__message {
    color: var(--pc-danger);
  }

  .puzzels-customizer .pc-action-progress {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.4rem 0.9rem;
    margin-top: 0.5rem;
  }

  .puzzels-customizer .puzzels-panel__head,
  .puzzels-customizer .puzzels-panel__body {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .puzzels-customizer .puzzels-panel__head {
    padding-top: 1rem;
    padding-bottom: 0.85rem;
  }
  .puzzels-customizer .puzzels-panel__title { font-size: 1.05rem; }

  .puzzels-customizer .puzzels-meta-strip {
    gap: 0.35rem;
  }

  .puzzels-customizer .puzzels-meta-pill {
    font-size: 0.72rem;
    padding: 0.25rem 0.62rem;
  }

  .puzzels-customizer .puzzels-cta-btn { padding: 0.6rem 1.25rem; }

  .puzzels-customizer .puzzels-drop-zone {
    padding: 2.9rem 1rem;
  }

  .puzzels-customizer .puzzels-drop-zone__icon {
    width: 58px;
    height: 58px;
  }

  /* Sidebar stacks vertically on mobile */
  .puzzels-customizer .puzzle-sidebar {
    flex-direction: column;
  }

  .puzzels-customizer .caption-body {
    gap: 0.72rem;
    padding: 0.78rem 0.85rem 0.88rem;
  }

  .puzzels-customizer .caption-controls-grid {
    grid-template-columns: 1fr;
    gap: 0.56rem;
  }

  .puzzels-customizer .caption-textarea {
    min-height: 72px;
    font-size: 16px;
  }

  .puzzels-customizer .caption-row {
    padding: 0.56rem 0.58rem;
  }

  .puzzels-customizer .caption-row__label {
    font-size: 0.68rem;
  }

  .puzzels-customizer .font-dropdown-btn {
    min-height: 44px;
    font-size: 0.9rem;
  }

  .puzzels-customizer .puzzels-change-img-btn {
    width: 100%;
  }

  /* Orientation toggle: equal-width pills */
  .puzzels-customizer .orientation-toggle {
    justify-content: center;
    gap: 0.4rem;
  }

  .puzzels-customizer .orient-btn { flex: 1; justify-content: center; }

  /* Canvas footer: centred */
  .puzzels-customizer .pc-canvas-footer {
    justify-content: center;
  }

  /* ── Box step: box scrolls full-size; message + actions pinned at the bottom ── */
  /* overflow:hidden on the root defeats position:sticky; squared corners on mobile
     make it safe to drop. (--pc-stage-h shortens the image-panel board, above.) */
  .puzzels-customizer { overflow: visible; --pc-stage-h: clamp(260px, 46vh, 440px); }

  /* Style thumbnails swipe horizontally instead of wrapping + pushing the box down. */
  .puzzels-customizer .puzzels-box-styles:not([hidden]) {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.25rem;
  }
  .puzzels-customizer .puzzels-box-style {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  /* Restore auto-grow so the box preview shows full-size and the page scrolls
     (the fixed desktop stage height would letterbox it). */
  .puzzels-customizer .puzzels-box-board {
    height: auto;
  }

  /* Message field + actions pinned to the bottom — separated from the scrolling
     body so the full-size box can never cover the message field. */
  .puzzels-customizer .puzzels-box-foot {
    position: sticky;
    bottom: 0;
    z-index: 200;
    max-width: none;
    margin: 1rem 0 0;
    gap: 0.5rem;
    padding: 0.7rem 1.1rem calc(0.7rem + env(safe-area-inset-bottom));
    border-top: 1px solid rgba(224, 120, 32, 0.18);
    background: rgba(255, 250, 243, 0.96);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: var(--pc-shadow-bar);
  }
  .puzzels-customizer .puzzels-box-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
    margin-top: 0.25rem;
    padding: 0;
    border-top: 0;
  }
  .puzzels-customizer .puzzels-box-actions > * { width: 100%; }

  /* ── Success screen: stack the actions as one clean full-width button list. ── */
  .puzzels-customizer .puzzels-confirm:not([hidden]) {
    padding: 1.5rem 1.15rem calc(1.75rem + env(safe-area-inset-bottom));
  }
  .puzzels-customizer .puzzels-confirm .puzzels-confirm__actions {
    grid-template-columns: 1fr;
    max-width: 360px;
    gap: 0.55rem;
    margin-top: 0.4rem;
  }
}

@media (max-width: 420px) {
  .puzzels-customizer .caption-body {
    padding-left: 0.72rem;
    padding-right: 0.72rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .puzzels-customizer *,
  .puzzels-customizer *::before,
  .puzzels-customizer *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
}