/**
 * Puzzels — Memory Cards customizer styles.
 * Builds on the shared customizer design tokens (--pc-*).
 */

/* The hidden attribute must always win — several toggled elements (steps,
   nav, overlay, progress) set their own display. */
.puzzels-memory [hidden] { display: none !important; }

/* ── Stepper ─────────────────────────────────────────────── */
.puzzels-memory .pm-stepper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem;
  margin: 0.6rem 0 0;
  padding: 0;
  list-style: none;
}
.puzzels-memory .pm-stepper li {
  padding: 0.32rem 0.85rem;
  border-radius: var(--pc-pill);
  background: var(--pc-accent-wash);
  color: var(--pc-text-warm-muted);
  font-size: 0.78rem;
  font-weight: 700;
}
.puzzels-memory .pm-stepper li.is-active { background: var(--pc-accent-grad); color: #fff; }
.puzzels-memory .pm-stepper li.is-done   { background: var(--pc-success-bg); color: var(--pc-success); }

.puzzels-memory .pm-step__title { margin: 0 0 0.35rem; font-size: 1.05rem; font-weight: 800; color: var(--pc-text-warm-strong); text-align: center; }
.puzzels-memory .pm-step__hint  { margin: 0 0 0.9rem; text-align: center; color: var(--pc-text-muted); font-size: 0.88rem; }

/* ── Design screen: right sidebar + slot grid ────────────── */
.puzzels-memory .pm-designer {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  gap: 1.4rem;
  align-items: start;
  text-align: start;
}
.puzzels-memory .pm-designer.is-drop { outline: 2px dashed var(--pc-accent); outline-offset: 6px; border-radius: var(--pc-radius-md); }

.puzzels-memory .pm-side {
  position: sticky;
  top: 16px;
  border: 1px solid var(--pc-border);
  border-radius: var(--pc-radius-md);
  background: #fff;
  padding: 0.35rem 1rem;
}
.puzzels-memory .pm-side__section { padding: 0.85rem 0; }
.puzzels-memory .pm-side__section + .pm-side__section,
.puzzels-memory .pm-side__cta { border-top: 1px solid var(--pc-border); }
.puzzels-memory .pm-side__title { display: block; margin: 0 0 0.5rem; font-size: 0.85rem; font-weight: 800; color: var(--pc-text-warm-strong); }
.puzzels-memory .pm-side__hint { margin: 0.45rem 0 0; font-size: 0.78rem; color: var(--pc-text-muted); }

.puzzels-memory .pm-set-select {
  width: 100%;
  min-height: 44px;
  padding: 0.45rem 0.7rem;
  border: 1.5px solid var(--pc-border);
  border-radius: var(--pc-radius);
  background: #fff;
  font-family: var(--pc-font);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--pc-text-warm-strong);
}
.puzzels-memory .pm-set-select:focus { border-color: var(--pc-accent); box-shadow: var(--pc-ring); outline: none; }
.puzzels-memory .pm-set-meta { margin: 0.45rem 0 0; font-size: 0.82rem; font-weight: 700; color: var(--pc-accent-hover); }

.puzzels-memory .pm-upload-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 48px;
  border: 2px solid var(--pc-accent);
  border-radius: var(--pc-radius);
  background: var(--pc-accent-wash);
  color: var(--pc-accent-hover);
  font-family: var(--pc-font);
  font-size: 0.92rem;
  font-weight: 800;
  cursor: pointer;
  transition: background var(--pc-transition);
}
.puzzels-memory .pm-upload-btn:hover { background: var(--pc-accent-soft); }
.puzzels-memory .pm-upload-btn svg { width: 20px; height: 20px; }

.puzzels-memory .pm-side__cta { padding: 0.85rem 0; }
.puzzels-memory .pm-side__cta .puzzels-cta-btn { width: 100%; }
.puzzels-memory #pm-continue:disabled { opacity: 0.55; cursor: not-allowed; }

.puzzels-memory .pm-main { min-width: 0; }
.puzzels-memory .pm-main__hint { margin: 0.8rem 0 0; }

.puzzels-memory .pm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.5rem 1.1rem;
  border: 0;
  border-radius: var(--pc-pill);
  background: var(--pc-accent-active);
  color: #fff;
  font-family: var(--pc-font);
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
}
.puzzels-memory .pm-btn--camera { display: none; width: 100%; margin-top: 0.5rem; }
@media (pointer: coarse) { .puzzels-memory .pm-btn--camera { display: inline-flex; } }

/* Sidebar photo tray */
.puzzels-memory .pm-uploads {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
  gap: 0.4rem;
  margin-top: 0.5rem;
}
.puzzels-memory .pm-upload {
  position: relative;
  aspect-ratio: 1;
  border-radius: var(--pc-radius);
  overflow: hidden;
  border: 2px solid transparent;
  opacity: 0.45;
}
.puzzels-memory .pm-upload.is-used { opacity: 1; border-color: var(--pc-accent); }
.puzzels-memory .pm-upload.is-busy { opacity: 0.8; }
.puzzels-memory .pm-upload.is-dupe { border-color: #f59e0b; }

/* Duplicate-photo warning (shown when the same file was uploaded twice). */
.puzzels-memory .pm-dupe-note {
  margin: 0.45rem 0 0;
  padding: 0.5rem 0.7rem;
  border: 1px solid #f59e0b;
  border-radius: var(--pc-radius);
  background: #fef3c7;
  color: #92400e;
  font-size: 0.78rem;
  font-weight: 700;
}
.puzzels-memory .pm-upload img { width: 100%; height: 100%; object-fit: cover; display: block; }
.puzzels-memory .pm-upload__remove {
  position: absolute;
  top: 4px;
  inset-inline-end: 4px;
  width: 24px;
  height: 24px;
  border: 0;
  border-radius: 50%;
  background: rgba(17, 24, 39, 0.65);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.puzzels-memory .pm-upload__bar {
  position: absolute;
  inset-inline: 8px;
  bottom: 8px;
  height: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  overflow: hidden;
}
.puzzels-memory .pm-upload__bar i { display: block; height: 100%; background: var(--pc-accent); transition: width 0.2s; }

/* ── Card grid (one slot per pair) ───────────────────────── */
.puzzels-memory .pm-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 0.6rem;
}
.puzzels-memory .pm-card {
  position: relative;
  aspect-ratio: calc(1 / var(--pm-card-ratio, 1));
  border: 2px solid var(--pc-border);
  border-radius: var(--pc-radius);
  overflow: hidden;
  background: #fff;
  padding: 0;
  cursor: pointer;
  transition: border-color var(--pc-transition), transform var(--pc-bounce), box-shadow var(--pc-transition);
}
.puzzels-memory .pm-card:hover { transform: translateY(-2px); border-color: var(--pc-accent); box-shadow: var(--pc-lift-sm); }
.puzzels-memory .pm-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.puzzels-memory .pm-card__img--thumb { object-fit: fill; }
.puzzels-memory .pm-card__overlay { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; pointer-events: none; }

/* Duplicate-photo badge on the card slot. */
.puzzels-memory .pm-card__dupe {
  position: absolute;
  top: 4px;
  inset-inline-start: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #f59e0b;
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  line-height: 1.4;
  pointer-events: none;
}

/* Empty slot — clicking opens the file picker */
.puzzels-memory .pm-card--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  border-style: dashed;
  border-color: var(--pc-border-warm);
  background: var(--pc-accent-wash);
  color: var(--pc-text-muted);
}
.puzzels-memory .pm-card--empty svg { width: 34%; max-width: 42px; height: auto; }
.puzzels-memory .pm-card--empty:hover { color: var(--pc-accent); background: var(--pc-accent-soft); }

/* ── Card editor: overlay dialog / mobile bottom sheet ───── */
body.pm-editor-open { overflow: hidden; }
.puzzels-memory .pm-editor-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.puzzels-memory .pm-editor-overlay__backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.55); }
.puzzels-memory .pm-editor {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  width: min(520px, 100%);
  max-height: 92vh;
  overflow-y: auto;
  background: #fff;
  border-radius: var(--pc-radius-lg);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.35);
  padding: 0 1.1rem; /* head/actions own the vertical padding (they're sticky) */
}
/* Visual order: header, canvas, zoom (it controls the canvas), tools, done. */
.puzzels-memory .pm-editor__grip    { order: 1; }
.puzzels-memory .pm-editor__head    { order: 2; }
.puzzels-memory .pm-editor__stage   { order: 3; }
.puzzels-memory .pm-zoom            { order: 4; }
.puzzels-memory .pm-editor__tools   { order: 5; }
.puzzels-memory .pm-editor__actions { order: 6; }

.puzzels-memory .pm-editor__grip { display: none; }
/* The primary action stays visible even when the dialog scrolls. */
.puzzels-memory .pm-editor__actions {
  position: sticky;
  bottom: 0;
  z-index: 3;
  background: #fff;
  width: calc(100% + 2.2rem);
  margin-inline: -1.1rem;
  padding: 0.6rem 1.1rem 0.9rem;
  border-top: 1px solid var(--pc-border);
}
.puzzels-memory .pm-editor__actions .puzzels-cta-btn { width: 100%; }
.puzzels-memory .pm-editor__stage {
  padding: 0.9rem;
  background: #f3f4f6;
  border-radius: var(--pc-radius-md);
  max-width: 100%;
}
.puzzels-memory .pm-editor__stage canvas { max-width: 100%; touch-action: none; }

.puzzels-memory .pm-editor__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 3;
  background: #fff;
  width: calc(100% + 2.2rem);
  margin-inline: -1.1rem;
  padding: 0.9rem 1.1rem 0.45rem;
}
.puzzels-memory .pm-editor__title { margin: 0; font-size: 0.95rem; font-weight: 800; color: var(--pc-text-warm-strong); }
.puzzels-memory .pm-editor__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: var(--pc-accent-wash);
  color: var(--pc-text-warm);
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
}
.puzzels-memory .pm-editor__close:hover { background: var(--pc-accent-soft); color: var(--pc-accent); }

/* One contained toolbar: grouped ghost buttons separated by hairlines. */
.puzzels-memory .pm-editor__tools {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 0.25rem;
  padding: 5px 7px;
  background: #fff;
  border: 1px solid var(--pc-border);
  border-radius: 14px;
  box-shadow: var(--pc-lift-sm);
}
/* Full-width helper line above the tools (flex row on desktop, grid on mobile). */
.puzzels-memory .pm-editor__drag-hint {
  flex: 1 1 100%;
  grid-column: 1 / -1;
  margin: 0 0 2px;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--pc-text-muted);
}
/* History + transform tools read as clean icon buttons on desktop; their
   labels stay for screen readers and come back as mobile tile captions. */
.puzzels-memory .pm-editor__tools .pm-tool-group:nth-of-type(1) .pm-tool,
.puzzels-memory .pm-editor__tools .pm-tool-group:nth-of-type(2) .pm-tool {
  min-width: 40px;
  padding: 0.35rem;
}
.puzzels-memory .pm-editor__tools .pm-tool-group:nth-of-type(1) .pm-tool__label,
.puzzels-memory .pm-editor__tools .pm-tool-group:nth-of-type(2) .pm-tool__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.puzzels-memory .pm-tool-group { display: flex; gap: 2px; }
.puzzels-memory .pm-tool-group + .pm-tool-group {
  border-inline-start: 1px solid var(--pc-border);
  margin-inline-start: 0.35rem;
  padding-inline-start: 0.55rem;
}
.puzzels-memory .pm-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-height: 40px;
  padding: 0.35rem 0.65rem;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--pc-text-warm-strong);
  font-family: var(--pc-font);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--pc-transition), color var(--pc-transition);
}
.puzzels-memory .pm-tool svg { width: 17px; height: 17px; flex: none; }
.puzzels-memory .pm-tool:hover:not(:disabled),
.puzzels-memory .pm-tool:active:not(:disabled) { background: var(--pc-accent-wash); color: var(--pc-accent); }
.puzzels-memory .pm-tool:focus-visible { outline: 2px solid var(--pc-accent); outline-offset: 1px; }
.puzzels-memory .pm-tool:disabled { opacity: 0.4; cursor: not-allowed; }
.puzzels-memory .pm-zoom { display: flex; align-items: center; gap: 0.6rem; width: min(420px, 100%); font-weight: 700; color: var(--pc-text-warm); font-size: 0.82rem; }
.puzzels-memory .pm-zoom input { flex: 1; }

/* ── Backs (compact sidebar swatches) ────────────────────── */
.puzzels-memory .pm-backs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(62px, 1fr));
  gap: 0.4rem;
}
.puzzels-memory .pm-back {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.25rem;
  border: 2px solid var(--pc-border);
  border-radius: var(--pc-radius);
  background: #fff;
  cursor: pointer;
  align-items: center;
  transition: border-color var(--pc-transition), box-shadow var(--pc-transition);
}
.puzzels-memory .pm-back.is-active { border-color: var(--pc-accent); box-shadow: var(--pc-ring); }
.puzzels-memory .pm-back img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--pc-radius-sm); }
.puzzels-memory .pm-back span {
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--pc-text-warm);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.puzzels-memory .pm-back--custom { border-style: dashed; min-height: 62px; justify-content: center; }

/* ── Box step ────────────────────────────────────────────── */
/* ── Shared visual option picker (box styles + card layouts) ──────────
   One pattern for both single-select thumbnail pickers on the box step: a
   titled radiogroup of .pz-opt cards. Desktop / few options = centered wrap;
   many options on mobile = an adaptive .pz-picker--scroll swipe strip. */
.puzzels-memory .pz-picker-field { margin: 0.5rem 0 0.8rem; }
.puzzels-memory .pz-picker-field__label {
  display: block; margin-bottom: 0.4rem;
  font-size: 0.8rem; font-weight: 700; color: var(--pc-text-warm-strong);
  text-align: center;
}
.puzzels-memory .pz-picker {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem;
}
.puzzels-memory .pz-opt {
  position: relative; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 92px; min-height: 44px; padding: 6px;
  border: 2px solid var(--pc-border); border-radius: var(--pc-radius);
  background: var(--pc-surface); color: var(--pc-text-warm-strong);
  cursor: pointer; appearance: none; -webkit-appearance: none;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.puzzels-memory .pz-opt:hover { border-color: var(--pc-border-warm); background: var(--pc-accent-light); }
.puzzels-memory .pz-opt:focus-visible { outline: 2px solid var(--pc-accent); outline-offset: 2px; }
.puzzels-memory .pz-opt.is-active {
  border-color: var(--pc-accent); background: var(--pc-accent-soft); box-shadow: var(--pc-ring);
}
/* Selected ✓ badge — a strong, glanceable signal on both breakpoints. Sits
   inside the card corner (inline-end, RTL-aware) so it never overflows the
   swipe strip's scroll box. */
.puzzels-memory .pz-opt.is-active::after {
  content: ""; position: absolute; top: 4px; inset-inline-end: 4px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--pc-accent) center / 10px 10px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.2 2.2 4.8-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.puzzels-memory .pz-opt__thumb { width: 100%; display: block; border-radius: var(--pc-radius-sm); }
.puzzels-memory .pz-opt__name {
  font-size: 0.72rem; font-weight: 600; line-height: 1.15;
  color: var(--pc-text-muted); text-align: center;
}
/* Box-style thumb = a template preview image (contain in a fixed box). */
.puzzels-memory .pm-box-style .pz-opt__thumb { height: 56px; object-fit: contain; }

/* Adaptive mobile: JS flags a picker .pz-picker--scroll when it has many
   options; collapse it to one swipe row with a peek of the next card + a
   direction-agnostic (RTL-safe) edge fade signalling more content. */
@media (max-width: 600px) {
  .puzzels-memory .pz-picker--scroll {
    flex-wrap: nowrap; justify-content: flex-start;
    overflow-x: auto; scroll-snap-type: x mandatory;
    padding: 4px 0 8px; -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  }
  .puzzels-memory .pz-picker--scroll .pz-opt {
    flex: 0 0 clamp(84px, 26%, 120px); scroll-snap-align: start;
  }
}
@media (prefers-reduced-motion: reduce) {
  .puzzels-memory .pz-opt { transition: none; }
  .puzzels-memory .pz-picker--scroll { scroll-snap-type: none; }
}
/* Box stage — clean, transparent preview. Zero padding (the editor sizes the
   canvas from this element's clientWidth, so padding creates a phantom gap
   under the canvas); the stage hugs the canvas so there is no blank space. */
.puzzels-memory .pm-box-board {
  display: flex;
  align-items: center;
  justify-content: center;
  width: min(640px, 100%);
  margin: 0 auto;
  padding: 0;
  background: transparent;
}
.puzzels-memory .pm-box-board canvas { max-width: 100%; }
/* 3D view: the 2D board stays mounted off-screen as the design source
   (a display:none container would zero the canvas sizing). */
.puzzels-memory .pm-box-board--offstage {
  position: absolute;
  inset-inline-start: -9999px;
  width: 680px;
  visibility: hidden;
}
/* Hosts the shared live 3D fold (canvas). Centered stage on the same light grey
   backdrop as the puzzle's 3D stage; the fold carries its own drop-shadow. */
.puzzels-memory .pm-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-memory .pm-box-3d[hidden] { display: none; }
.puzzels-memory .pm-box-message {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-width: 480px;
  margin: 0.8rem auto 0;
  font-weight: 700;
  color: var(--pc-text-warm);
  font-size: 0.85rem;
}
.puzzels-memory .pm-box-message input {
  min-height: 44px;
  padding: 0.5rem 0.9rem;
  border: 1.5px solid var(--pc-border);
  border-radius: var(--pc-radius);
  font-family: var(--pc-font);
}
/* Styling controls (size/font/color) — same width rhythm as the message field. */
.puzzels-memory .pm-box-style-controls {
  width: min(480px, 100%);
  margin: 0.8rem auto 0;
}

/* ── Box message: mobile editing UX ──────────────────────────
   Keep the live box preview on screen (and sized to clear the keyboard) while the
   customer types, so the 3D box updates in view in real time. Desktop keeps the
   plain inline field — the preview and input already sit together there. */
@media (max-width: 860px) {
  /* The visible preview sticks to the top so it never scrolls behind the keyboard.
     (In 3D the 2D board is parked off-stage; in 2D the 3D box is [hidden].) */
  .puzzels-memory .pm-box-board:not(.pm-box-board--offstage),
  .puzzels-memory .pm-box-3d:not([hidden]) {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
    box-shadow: 0 8px 14px -10px rgba(15, 23, 42, 0.3);
  }
  .puzzels-memory .pm-box-board { width: 100%; }
  /* (The layout picker's mobile swipe strip is handled by the shared
     .pz-picker--scroll rule; nothing picker-specific needed here.) */
  /* Ensure focusing the field scrolls it clear of the pinned preview. */
  .puzzels-memory .pm-box-message { scroll-margin-top: 165px; }
  /* While typing: shrink the pinned preview and mute the picker so the input +
     keyboard fit with the box still visible above. */
  .puzzels-memory.pm-editing-message .pm-box-3d { min-height: 148px; padding: 0.55rem; }
  .puzzels-memory.pm-editing-message .pm-box-board canvas { max-height: 36vh; }
  .puzzels-memory.pm-editing-message .pm-box-layout-field { opacity: 0.45; }
}

/* ── Summary + success + nav ─────────────────────────────── */
.puzzels-memory .pm-summary { display: grid; gap: 1rem; justify-items: center; }
.puzzels-memory .pm-summary__showcase { margin-bottom: 1.1rem; }
/* The cards mockup holds the proof sheet — wider than the puzzle's single image. */
.puzzels-memory .puzzels-confirm__media--puzzle { width: min(64vw, 390px); }
/* Three actions here (checkout full row + cart/new) — two balanced columns. */
.puzzels-memory .puzzels-confirm__actions { grid-template-columns: repeat(2, 1fr); }

.puzzels-memory .pm-progress { display: grid; gap: 0.35rem; justify-items: center; margin: 0.7rem auto; width: min(360px, 100%); }
.puzzels-memory .pm-progress .puzzle-upload-state__bar { width: 100%; }

/* Purchase bar: quantity stepper beside the add-to-cart CTA. */
.puzzels-memory .pm-buy {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0.9rem auto 0;
}
.puzzels-memory .pm-qty {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--pc-border);
  border-radius: var(--pc-pill);
  background: #fff;
  overflow: hidden;
}
.puzzels-memory .pm-qty__btn {
  width: 42px;
  min-height: 48px;
  border: 0;
  background: transparent;
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--pc-text-warm-strong);
  cursor: pointer;
}
.puzzels-memory .pm-qty__btn:hover { background: var(--pc-accent-wash); color: var(--pc-accent); }
.puzzels-memory .pm-qty input {
  width: 46px;
  border: 0;
  text-align: center;
  font-family: var(--pc-font);
  font-weight: 800;
  font-size: 1rem;
  -moz-appearance: textfield;
}
.puzzels-memory .pm-qty input::-webkit-outer-spin-button,
.puzzels-memory .pm-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.puzzels-memory #pm-add-to-cart { min-width: 200px; }

.puzzels-memory .pm-nav {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 1.2rem;
}
.puzzels-memory .pm-nav #pm-next { margin-inline-start: auto; min-width: 140px; }

/* ── Mobile: single column, reordered, sticky CTA, bottom-sheet editor ── */
@media (max-width: 860px) {
  .puzzels-memory .pm-designer { display: flex; flex-direction: column; gap: 0.9rem; }
  /* The sidebar dissolves; its sections become siblings of the grid and reorder. */
  .puzzels-memory .pm-side { display: contents; }
  .puzzels-memory .pm-side__section { padding: 0; border-top: 0 !important; }
  .puzzels-memory .pm-side__section--set    { order: 1; }
  .puzzels-memory .pm-side__section--upload { order: 2; }
  .puzzels-memory .pm-side__section--tray   { order: 3; }
  .puzzels-memory .pm-main                  { order: 4; }
  .puzzels-memory .pm-side__section--backs  { order: 5; }
  .puzzels-memory .pm-side__cta             { order: 6; }

  /* No photo tray on mobile — the slot grid already shows every photo. */
  .puzzels-memory .pm-uploads { display: none; }

  .puzzels-memory .pm-cards { grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); }

  .puzzels-memory .pm-side__cta {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 0 -0.5rem;
    padding: 0.6rem 0.5rem calc(0.6rem + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid var(--pc-border);
    box-shadow: 0 -8px 20px rgba(15, 23, 42, 0.08);
  }

  /* Editor overlay → bottom sheet. */
  .puzzels-memory .pm-editor-overlay { align-items: flex-end; padding: 0; }
  .puzzels-memory .pm-editor {
    width: 100%;
    max-height: 94dvh;
    gap: 0.5rem;
    border-radius: 20px 20px 0 0;
    padding: 0 0.85rem;
    animation: pm-sheet-up 0.25s ease;
  }
  .puzzels-memory .pm-editor__grip {
    display: block;
    width: 44px;
    height: 5px;
    border-radius: 999px;
    background: var(--pc-border);
    margin: 8px auto 0;
    flex: none;
  }
  .puzzels-memory .pm-editor__head {
    width: calc(100% + 1.7rem);
    margin-inline: -0.85rem;
    padding: 0.35rem 0.85rem;
  }
  .puzzels-memory .pm-editor__actions {
    width: calc(100% + 1.7rem);
    margin-inline: -0.85rem;
    padding: 0.55rem 0.85rem calc(0.75rem + env(safe-area-inset-bottom));
  }
  .puzzels-memory .pm-editor__title { font-size: 0.9rem; }

  /* Canvas stage fills the sheet width; the editor sizes the canvas to it. */
  .puzzels-memory .pm-editor__stage {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 0.45rem;
  }

  /* Tools become a 4-column grid of labeled tiles (thumb-friendly); the
     desktop bar chrome and groups dissolve. */
  .puzzels-memory .pm-editor__tools {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.4rem;
    width: 100%;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .puzzels-memory .pm-tool-group { display: contents; }
  .puzzels-memory .pm-tool {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-height: 48px;
    padding: 0.35rem 0.15rem;
    border: 1px solid var(--pc-border);
    border-radius: var(--pc-radius);
    background: #fff;
    font-size: 0.62rem;
    line-height: 1.15;
  }
  /* The desktop icon-only treatment of the first two groups reverts to tiles. */
  .puzzels-memory .pm-editor__tools .pm-tool-group:nth-of-type(1) .pm-tool,
  .puzzels-memory .pm-editor__tools .pm-tool-group:nth-of-type(2) .pm-tool {
    min-width: 0;
    padding: 0.35rem 0.15rem;
  }
  .puzzels-memory .pm-editor__tools .pm-tool-group:nth-of-type(1) .pm-tool__label,
  .puzzels-memory .pm-editor__tools .pm-tool-group:nth-of-type(2) .pm-tool__label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
  .puzzels-memory .pm-tool svg { width: 20px; height: 20px; }
  /* Replace-image: a full-width row under the tool tiles. */
  .puzzels-memory #pm-replace {
    grid-column: 1 / -1;
    flex-direction: row;
    gap: 0.4rem;
    min-height: 46px;
    font-size: 0.72rem;
  }

  .puzzels-memory .pm-zoom { width: 100%; }

  .puzzels-memory .pm-nav #pm-next,
  .puzzels-memory .pm-nav #pm-prev { flex: 1; }
}

@keyframes pm-sheet-up {
  from { transform: translateY(24px); opacity: 0.6; }
  to   { transform: none; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .puzzels-memory .pm-editor { animation: none; }
}

/* ── Photo-Zone layout picker: section-specific bits only ─────────────
   Card shape, states, label, and responsive behaviour all come from the
   shared .pz-picker / .pz-opt pattern above; only the drawn-canvas thumb
   differs (a soft gradient shows behind the layout's transparent preview). */
.puzzels-memory .pm-layout-opt .pz-opt__thumb {
  height: auto; background: linear-gradient(160deg, #eef2f7, #e2e8f0);
}