/* WC Personalizer — Frontend v3 (CSS variable-driven) */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
.wcp-personalizer{margin:20px 0;font-family:inherit;color:#1a1a1a}
.wcp-preview-wrap{position:relative;width:100%;background:#e9e2d6;border-radius:8px;overflow:hidden;line-height:0;margin-bottom:20px}
.wcp-preview-wrap canvas{display:block;width:100%!important;height:auto!important}
.wcp-field-group{margin-bottom:28px}
.wcp-group-label,.wcp-section-label{font-weight:700;font-size:.93rem;margin-bottom:8px}
.wcp-hint-global{font-style:italic;color:#666;font-size:.83rem;margin-bottom:12px}
.wcp-req-star{color:#c00;margin-left:2px}
.wcp-zone{margin-bottom:16px}
.wcp-zone-hint{color:#666;font-size:.83rem;margin:0 0 10px}

/* ── Text inputs ─────────────────────────────────────────── */
.wcp-text-input{
  width:100%;padding:12px 14px;
  border:1.5px solid var(--wcp-border,#ccc);
  border-radius:8px;font-size:.97rem;font-family:inherit;
  color:#1a1a1a;transition:border-color .15s;box-sizing:border-box;
}
.wcp-text-input:focus{
  border-color:var(--wcp-focus,#1a1a1a);outline:none;
  box-shadow:0 0 0 2px var(--wcp-focus-ring,rgba(0,0,0,.07));
}
.wcp-text-input.wcp-input-error{border-color:#c00}
.wcp-input-wrap{position:relative;margin-bottom:4px}
.wcp-input-wrap .wcp-req-star{position:absolute;left:-14px;top:14px}
.wcp-char-count{display:block;font-size:.76rem;color:#aaa;text-align:right;margin-top:3px;transition:color .15s}
.wcp-char-warn{color:#d97706;font-weight:600}
.wcp-char-over{color:#c00;font-weight:700}
.wcp-multi-inputs{display:flex;gap:6px}
.wcp-multi-inputs .wcp-text-input{text-align:center;font-weight:700;font-size:1.1rem;max-width:76px;padding:10px 6px}

/* ── Switchable zones ─────────────────────────────────────── */
.wcp-modes{display:flex;gap:22px;margin-bottom:12px;flex-wrap:wrap}
.wcp-mode-btn{display:flex;align-items:center;gap:7px;cursor:pointer;font-size:.92rem}
.wcp-mode-btn input[type="radio"]{
  width:20px;height:20px;
  accent-color:var(--wcp-check,#1a1a1a);
  cursor:pointer;
}
.wcp-mode-hint{color:#666;font-size:.82rem;margin:0 0 10px}
.wcp-variant-fields{display:none}
.wcp-variant-fields.wcp-active{display:block}

/* ── Names grid ──────────────────────────────────────────── */
.wcp-names-grid{display:flex;flex-direction:column;gap:8px}
.wcp-name-wrap{display:flex;flex-direction:column;gap:3px}
.wcp-name-label{font-size:.75rem;font-weight:600;color:#555}
.wcp-name-wrap .wcp-text-input{padding:9px 10px}

/* ── Drag-drop photo ─────────────────────────────────────── */
.wcp-drop-zone{border:2px dashed #b08b57;border-radius:12px;background:#f7f2ea;cursor:pointer;min-height:130px;display:flex;align-items:center;justify-content:center;transition:border-color .15s,background .15s}
.wcp-drop-zone:hover,.wcp-drop-zone.wcp-drag-over{border-color:#A0785A;background:#f0e6d6}
.wcp-drop-zone.wcp-error{border-color:#c00}
.wcp-drop-inner{display:flex;flex-direction:column;align-items:center;gap:6px;padding:24px 20px;text-align:center}
.wcp-upload-icon{width:48px;height:48px}
.wcp-drop-label{font-size:1rem;font-weight:600;color:#7a5a3a}
.wcp-drop-hint{font-size:.8rem;color:#888}
.wcp-photo-input{display:none}
.wcp-drop-thumb{max-width:100%;max-height:120px;border-radius:6px;display:block}
.wcp-upload-status{font-size:.8rem;margin-top:6px;min-height:18px}
.wcp-status-ok{color:#2e7d32;font-weight:600}
.wcp-status-error{color:#c00}
.wcp-status-info{color:#666}

/* ── Custom selects ──────────────────────────────────────── */
.wcp-custom-select{
  position:relative;
  border:1.5px solid var(--wcp-border,#ccc);
  border-radius:8px;background:#fff;
  cursor:pointer;user-select:none;max-width:460px;
}
.wcp-custom-select.wcp-open{
  border-color:var(--wcp-focus,#1a1a1a);
}
.wcp-select-trigger{display:flex;align-items:center;gap:10px;padding:10px 14px;min-height:48px}
.wcp-sel-text{flex:1;font-size:.93rem;color:#333}
.wcp-arrow{font-size:1.05rem;color:#888;transition:transform .15s}
.wcp-custom-select.wcp-open .wcp-arrow{transform:rotate(180deg)}
.wcp-sel-swatch{display:none;width:30px;height:30px;border-radius:3px;border:1px solid rgba(0,0,0,.12);flex-shrink:0;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.09) 0,rgba(255,255,255,.09) 1px,transparent 1px,transparent 4px)}
.wcp-select-list{display:none;position:absolute;top:calc(100% + 2px);left:0;right:0;z-index:9999;background:#fff;border:1.5px solid var(--wcp-border,#ccc);border-radius:8px;max-height:300px;overflow-y:auto;box-shadow:0 5px 18px rgba(0,0,0,.12);margin:0;padding:4px 0;list-style:none}
.wcp-custom-select.wcp-open .wcp-select-list{display:block}
.wcp-opt{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:.9rem;cursor:pointer;transition:background .1s}
.wcp-opt:hover,.wcp-opt[aria-selected="true"]{background:#f5f5f5}
.wcp-opt-placeholder{color:#888;font-style:italic}
.wcp-opt-swatch{display:inline-block;width:34px;height:34px;border-radius:3px;border:1px solid rgba(0,0,0,.1);flex-shrink:0;background-image:repeating-linear-gradient(0deg,rgba(0,0,0,.05) 0,rgba(0,0,0,.05) 1px,transparent 1px,transparent 4px),repeating-linear-gradient(90deg,rgba(0,0,0,.04) 0,rgba(0,0,0,.04) 1px,transparent 1px,transparent 4px)}
.wcp-font-select .wcp-select-trigger{padding:8px 14px}
.wcp-font-sample{font-size:1.2rem;min-width:60px;display:none;color:#1a1a1a}
.wcp-font-opt{justify-content:space-between}
.wcp-font-demo{font-size:1.3rem;color:#1a1a1a;flex:1}
.wcp-font-name{font-size:.78rem;color:#888;min-width:90px;text-align:right}

/* ── Variant swatches ────────────────────────────────────── */
.wcp-variant-swatches{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.wcp-variant-swatch{cursor:pointer;text-align:center}
.wcp-variant-swatch input[type="radio"]{display:none}
.wcp-variant-img-wrap{display:block;width:72px;height:72px;border-radius:8px;overflow:hidden;border:2.5px solid transparent;transition:border-color .15s}
.wcp-variant-img-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.wcp-variant-no-img{display:block;width:72px;height:72px;background:#e8e8e8;border-radius:8px;border:2.5px solid transparent}
.wcp-variant-name{display:block;font-size:.75rem;color:#555;margin-top:4px}
.wcp-variant-swatch.wcp-swatch-active .wcp-variant-img-wrap,
.wcp-variant-swatch.wcp-swatch-active .wcp-variant-no-img{border-color:var(--wcp-focus,#1a1a1a)}

/* ── Errors ──────────────────────────────────────────────── */
.wcp-errors{display:none;padding:12px 16px;background:#fff0f0;border:1.5px solid #c00;border-radius:8px;color:#c00;font-size:.88rem;margin:0 0 14px}
.wcp-errors.wcp-errors-visible{display:block}
.wcp-errors ul{margin:0;padding:0 0 0 18px}
.wcp-errors li{margin-bottom:4px}

/* ── Note ────────────────────────────────────────────────── */
.wcp-note{font-size:.8rem;color:#555;line-height:1.55;padding:12px 0;border-top:1px solid #f0f0f0;margin-top:4px}

/* ── Confirm checkbox ────────────────────────────────────── */
.wcp-confirm-label{display:flex;align-items:flex-start;gap:10px;font-size:.9rem;cursor:pointer;line-height:1.4;padding:12px 0 16px;border-top:1px solid #f0f0f0;margin-top:4px}
.wcp-confirm-label input[type="checkbox"]{
  width:20px;height:20px;
  accent-color:var(--wcp-check,#1a1a1a);
  flex-shrink:0;cursor:pointer;
}

/* ── Responsive ──────────────────────────────────────────── */
@media(max-width:480px){
  .wcp-multi-inputs .wcp-text-input{max-width:54px}
  .wcp-variant-img-wrap,.wcp-variant-no-img{width:60px;height:60px}
  .wcp-modes{gap:16px}
}

/* ── Gift message ─────────────────────────────────────────── */
.wcp-gift-message-group {
  margin: 4px 0 16px;
  padding: 14px 16px;
  background: #fffdf7;
  border: 1.5px solid #e8d98a;
  border-radius: 8px;
}
.wcp-gift-label {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: .88rem;
  color: #5c4a00;
  margin-bottom: 8px;
}
.wcp-gift-icon { flex-shrink: 0; color: #b89a00; }
.wcp-gift-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1.5px solid #e0cc70;
  border-radius: 8px;
  font-size: .9rem;
  font-family: inherit;
  color: #1a1a1a;
  resize: vertical;
  min-height: 80px;
  transition: border-color .15s;
  box-sizing: border-box;
  background: #fff;
}
.wcp-gift-textarea:focus {
  border-color: var(--wcp-focus,#1a1a1a);
  outline: none;
  box-shadow: 0 0 0 2px var(--wcp-focus-ring,rgba(0,0,0,.07));
}

/* ── Cart preview thumbnail ───────────────────────────────── */
.wcp-cart-preview {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 8px 10px;
  background: #f9f9f9;
  border: 1px solid #ebebeb;
  border-radius: 6px;
  max-width: 280px;
}
.wcp-cart-preview-img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #ddd;
  flex-shrink: 0;
}
.wcp-cart-preview-label {
  font-size: .75rem;
  color: #888;
  font-style: italic;
}

/* ── Flatsome theme compatibility ────────────────────────── */
/* Flatsome overrides WC button styles aggressively.
   These rules restore our plugin buttons on Flatsome sites. */

.wcp-personalizer .wcp-gate-trigger,
.wcp-personalizer .wcp-preview-trigger-btn,
.wcp-personalizer .wcp-modal-atc-btn {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 8px !important;
  box-shadow: none !important;
  line-height: 1 !important;
  text-shadow: none !important;
}

/* Prevent Flatsome's .button styles bleeding onto our inputs */
.wcp-personalizer input[type="text"],
.wcp-personalizer input[type="number"],
.wcp-personalizer textarea,
.wcp-personalizer select {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 8px !important;
  box-shadow: none !important;
}

/* Ensure canvas renders above Flatsome's product image effects */
.wcp-preview-wrap { isolation: isolate; }

/* Fix Flatsome's lazy-load interfering with canvas image source */
.wcp-preview-wrap canvas { visibility: visible !important; opacity: 1 !important; }

/* ============================================================
   WC Personalizer — Popup Modal Layout (v4)
   ============================================================ */

/* ── Personalize trigger button ─────────────────────────── */
.wcp-open-modal-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  margin: 10px 0;
  background: var(--wcp-btn-bg, #A0785A) !important;
  color: var(--wcp-btn-text, #FAF5EC) !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: pointer !important;
  transition: opacity .18s;
  font-family: inherit;
  justify-content: center;
  box-shadow: none !important;
  text-shadow: none !important;
  line-height: 1 !important;
}
.wcp-open-modal-btn:hover { opacity: .88 !important; }

/* ── Dialog box ─────────────────────────────────────────── */
.wcp-pd-dialog {
  background: #fff;
  border-radius: 10px;
  width: 96%;
  max-width: 1180px;
  max-height: 92vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 24px 80px rgba(0,0,0,.4);
}

/* ── Header ─────────────────────────────────────────────── */
.wcp-pd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 2;
  border-radius: 10px 10px 0 0;
}
.wcp-pd-title {
  font-family: inherit;
  font-size: 1.2rem;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0;
}
.wcp-pd-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: #f4f4f4;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #555;
  transition: background .15s;
  line-height: 1;
}
.wcp-pd-close:hover { background: #e0e0e0; }

/* ── Two-column body ────────────────────────────────────── */
.wcp-pd-body {
  display: grid;
  grid-template-columns: 50% 50%;
  min-height: 480px;
}
.wcp-pd-left {
  background: #FAF5EC;
  border-radius: 0 0 0 10px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  border-right: 1px solid #eee;
}
.wcp-pd-preview-note {
  font-size: .78rem;
  color: #999;
  text-align: center;
  margin: 0;
  font-style: italic;
}
.wcp-pd-right {
  padding: 24px;
  overflow-y: auto;
  max-height: calc(92vh - 70px);
}

/* ── Add to Cart button ─────────────────────────────────── */
.wcp-pd-atc-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  max-width: 280px;
  margin: 8px auto 0;
  padding: 15px 24px;
  background: var(--wcp-btn-bg, #A0785A) !important;
  color: var(--wcp-btn-text, #FAF5EC) !important;
  border: none !important;
  border-radius: 8px !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: pointer !important;
  transition: opacity .18s;
  text-align: center;
  font-family: inherit;
  box-shadow: none !important;
  text-shadow: none !important;
  line-height: 1 !important;
}
.wcp-pd-atc-btn:hover { opacity: .88 !important; }
.wcp-atc-icon { flex-shrink: 0; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .wcp-pd-body { grid-template-columns: 1fr; }
  .wcp-pd-left { border-right: none; border-bottom: 1px solid #eee; border-radius: 0; }
  .wcp-pd-right { max-height: none; }
  .wcp-pd-dialog { max-height: none; border-radius: 0; }
  .wcp-pd-footer { padding-left: 24px; }  /* full width on mobile */
}

/* ── Modal sticky footer ────────────────────────────────── */
.wcp-pd-footer {
  display: flex;
  flex-direction: column;
  padding: 16px 24px 16px calc(50% + 24px); /* left-half = canvas, content starts at right column */
  border-top: 1px solid #eee;
  background: #fff;
  border-radius: 0 0 10px 10px;
}
.wcp-confirm-footer {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: .88rem;
  margin-bottom: 12px;
  cursor: pointer;
}
.wcp-confirm-footer input[type="checkbox"] {
  width: 18px; height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  accent-color: var(--wcp-btn-bg, #A0785A);
  cursor: pointer;
}

/* ============================================================
   WC Personalizer — v4 additions
   ============================================================ */

/* ── Task 3: hide native Add to Cart on personalized products ──────────────
   The plugin renders its own "Personalize This Item" button + popup, whose
   footer "Add to Cart" submits a fresh form. The theme's native single
   add-to-cart button and quantity selector are therefore redundant.
   NB: we hide children only, never `form.cart` itself — the popup's submit
   copies the nonce / variation_id / quantity inputs out of that form. */
body.wcp-personalized form.cart .quantity,
body.wcp-personalized form.cart .single_add_to_cart_button,
body.wcp-personalized form.cart button[name="add-to-cart"] {
  display: none !important;
}
/* If you want to KEEP a quantity selector for personalized items, delete the
   `.quantity` line above. */

/* ── Task 2: popup polish ──────────────────────────────────────────────────
   Entrance animation for the dialog (the v4 popup had none) + a soft loading
   shimmer on the preview panel so the left column isn't flat grey while the
   product image loads into the canvas. */
@keyframes wcp-pd-in {
  from { opacity: 0; transform: scale(.97) translateY(10px); }
  to   { opacity: 1; transform: scale(1)   translateY(0);    }
}
.wcp-pd-dialog {
  animation: wcp-pd-in .22s cubic-bezier(.4, 0, .2, 1);
}

@keyframes wcp-pd-shimmer {
  0%   { background-position: -180% 0; }
  100% { background-position:  180% 0; }
}
.wcp-preview-wrap {
  background: #e9e2d6 linear-gradient(
    100deg,
    rgba(255,255,255,0) 30%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,0) 70%
  ) -180% 0 / 200% 100% no-repeat;
  animation: wcp-pd-shimmer 1.4s ease-in-out infinite;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}
/* Once Fabric has injected its canvas, stop the shimmer so it doesn't bleed
   through transparent areas of the artwork. */
.wcp-preview-wrap:has(canvas) {
  animation: none;
  background: #e9e2d6;
}

/* ── Validation polish (v4) — friendlier pink box + amber confirm ──────────
   PMall-style: red field borders (already present) + a friendly error box
   that lists the specific missing fields, and an amber pulse on the confirm
   checkbox when that's the piece the customer forgot. */
.wcp-errors {
  background: #fdecec;
  border: 1.5px solid #e0b4b4;
  border-left: 4px solid #c0392b;
  color: #a5281b;
}
.wcp-errors-head {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
  color: #c0392b;
}
.wcp-confirm-highlight {
  background: #fff8e1;
  border: 1.5px solid #e7c200;
  border-radius: 6px;
  padding: 10px 12px;
  margin: -2px 0 12px;
  animation: wcp-confirm-pulse 1s ease;
}
@keyframes wcp-confirm-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(231,194,0,.55); }
  100% { box-shadow: 0 0 0 9px rgba(231,194,0,0); }
}

/* ── "Added to Cart" confirmation panel ────────────────────────────────────
   Matches Personalization Mall's post-add layout: full-width banner above
   the product with the snapshot thumbnail, personalization summary, and
   Continue Shopping / View Cart / Checkout CTAs. */
.wcp-added-wrap {
  margin: 0 0 32px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,.07);
}
.wcp-added-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 22px;
  background: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  color: #1a7a3c;
  border-bottom: 1px solid #e8f4ec;
}
.wcp-added-header svg { color: #1a7a3c; flex-shrink: 0; }

.wcp-added-body {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 20px 22px;
  background: #f7f5f0;
}
.wcp-added-thumb img {
  width: 110px;
  height: 110px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,.08);
  display: block;
}
.wcp-added-details { min-width: 0; }
.wcp-added-name {
  font-size: .95rem;
  font-weight: 600;
  color: var(--wcp-btn-bg, #A0785A);
  margin: 0 0 6px;
}
.wcp-added-line {
  font-size: .85rem;
  color: #555;
  margin: 0 0 3px;
  line-height: 1.4;
}
.wcp-added-line strong { color: #1a1a1a; }

.wcp-added-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 180px;
}
.wcp-added-btn {
  display: block;
  padding: 11px 20px;
  text-align: center;
  font-size: .82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  border-radius: 8px;
  cursor: pointer;
  text-decoration: none !important;
  transition: background .15s, color .15s;
  font-family: inherit;
  white-space: nowrap;
}
.wcp-added-btn--outline {
  background: #fff;
  color: #1a1a1a !important;
  border: 1.5px solid #d0d0d0;
}
.wcp-added-btn--outline:hover { border-color: #aaa; background: #fafafa; }
.wcp-added-btn--filled {
  background: var(--wcp-btn-bg, #A0785A) !important;
  color: var(--wcp-btn-text, #FAF5EC) !important;
  border: none;
}
.wcp-added-btn--filled:hover { background: var(--wcp-btn-hover, #8B6040) !important; }

@media (max-width: 640px) {
  .wcp-added-body {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .wcp-added-thumb img { width: 80px; height: 80px; }
  .wcp-added-actions { flex-direction: row; flex-wrap: wrap; min-width: 0; }
  .wcp-added-btn { flex: 1 1 140px; }
}

/* ── Brand polish (v5) — subtitle, header layout ───────────────────────────*/
.wcp-pd-header-text { flex: 1; min-width: 0; }
.wcp-pd-subtitle {
  font-size: .93rem;
  color: #8a7060;
  margin: 2px 0 0;
  font-style: italic;
  line-height: 1.3;
}

/* ── IW brand identity (v7) ─────────────────────────────────────────────────
   Two light-touch brand moments: a monogram in the modal header and a faith
   signature beneath the preview. Neither dominates — they whisper IW. */

/* Monogram — small caps serif echoing the logo's bronze letterforms */
.wcp-iw-monogram {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: .65rem;
  font-weight: 400;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: #A0785A;
  margin: 0 0 5px;
  opacity: .9;
  line-height: 1;
}

/* Preview signature — luxury-brand small print beneath the canvas */
.wcp-iw-signature {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: .67rem;
  color: #9a8070;
  text-align: center;
  font-style: italic;
  margin: 0;
  line-height: 1.6;
  opacity: .75;
  letter-spacing: .01em;
}

/* ── Font preview upgrade (v8) ──────────────────────────────────────────────
   Larger font demos so customers can see style differences clearly,
   plus a context bar telling them what text they're previewing. */
.wcp-font-demo { font-size: 1.55rem; }           /* was 1.3rem */
.wcp-font-opt  { padding: 10px 14px; gap: 12px; } /* more breathing room */
.wcp-font-ctx {
  padding: 8px 14px 7px;
  font-size: .73rem;
  color: #9a8070;
  font-style: italic;
  border-bottom: 1px solid #f0ebe4;
  list-style: none;
  cursor: default;
  pointer-events: none;
  background: #fdf9f5;
}
.wcp-font-ctx--live {
  color: #A0785A;
  font-style: normal;
  font-weight: 600;
}
/* Trigger preview — show customer's text in selected font more prominently */
.wcp-font-sample { font-size: 1.35rem; }         /* was 1.2rem */

/* ── Tap-to-zoom (v8) ───────────────────────────────────────────────────────
   Magnifier button appears on hover (always on touch). Tap opens a
   full-screen overlay so customers can inspect their design before adding. */
.wcp-zoom-btn {
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 34px;
  height: 34px;
  background: rgba(0,0,0,.42);
  color: #fff;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: zoom-in;
  z-index: 10;
  opacity: 0;
  transition: opacity .2s, background .15s;
}
#wcp-preview-wrap:hover .wcp-zoom-btn { opacity: 1; }
.wcp-zoom-btn:hover { background: rgba(0,0,0,.62); }
@media (hover: none) { .wcp-zoom-btn { opacity: 1; } } /* always visible on touch */

.wcp-zoom-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999999;
  background: rgba(0,0,0,.92);
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 14px;
  cursor: zoom-out;
  padding: 20px;
}
.wcp-zoom-overlay.wcp-zoom-open { display: flex; }
.wcp-zoom-img {
  max-width: 88vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 12px 60px rgba(0,0,0,.7);
  cursor: default;
}
.wcp-zoom-close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 38px;
  height: 38px;
  background: rgba(255,255,255,.15);
  border: none;
  color: #fff;
  border-radius: 50%;
  font-size: 1.3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
}
.wcp-zoom-close:hover { background: rgba(255,255,255,.28); }
.wcp-zoom-caption {
  color: rgba(255,255,255,.45);
  font-size: .75rem;
  margin: 0;
  letter-spacing: .04em;
  font-style: italic;
}

/* ── Save My Design (v10) ───────────────────────────────────────────────────
   Save toast — brief confirmation in the modal header. Restore banner —
   warm notification at the top of the form with a "Start fresh" escape. */
.wcp-save-toast {
  font-size: .72rem;
  font-weight: 600;
  color: #A0785A;
  background: #fdf6ee;
  border: 1px solid #e8d0b8;
  border-radius: 20px;
  padding: 4px 11px;
  white-space: nowrap;
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
  margin-left: auto;
}
.wcp-save-toast--on { opacity: 1; }

.wcp-restore-banner {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 14px;
  background: #fdf6ee;
  border: 1px solid #e8d0b8;
  border-radius: 8px;
  margin-bottom: 22px;
  font-size: .82rem;
  color: #7a5a3a;
  line-height: 1.3;
}
.wcp-restore-banner svg { flex-shrink: 0; color: #A0785A; }
.wcp-restore-clear {
  margin-left: auto;
  background: none;
  border: none;
  color: #A0785A;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
}
.wcp-restore-clear:hover { color: #8B6040; }

/* ══════════════════════════════════════════════════════════════════════════
   WC Personalizer — Mockup Redesign (v9)
   Editorial header · Swatch grid · Edge-to-edge image · IW footer bar
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Header: editorial product title ───────────────────────────────────── */
.wcp-pd-header {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 56px 16px 24px; /* right pad leaves room for close btn */
  position: relative;
  background: #FAF5EC;
  border-radius: 10px 10px 0 0;
}
.wcp-pd-product-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 300;
  font-size: 1.55rem;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: #3d2b1f;
  text-align: center;
  margin: 0;
  line-height: 1.2;
  /* fallback if font hasn't loaded yet */
  font-family: 'Cormorant Garamond', 'Palatino Linotype', Palatino, Georgia, serif;
}
.wcp-pd-close {
  position: absolute !important;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}
.wcp-pd-header-rule {
  border: none;
  border-top: 1px solid #e0cfc0;
  margin: 0;
}

/* ── Section divider ornament ─────────────────────────────────────────── */
.wcp-section-divider {
  display: flex;
  justify-content: center;
  margin: 10px 0 6px;
  line-height: 0;
}

/* ── Left panel: edge-to-edge image ───────────────────────────────────── */
.wcp-pd-left {
  padding: 0 !important;
  gap: 0 !important;
  overflow: hidden;
  border-right: none !important;
  border-radius: 0 0 0 10px;
}
.wcp-preview-wrap {
  width: 100% !important;
}
/* canvas fills the panel edge-to-edge */
#wcp-preview-wrap .canvas-container {
  border-radius: 0 0 0 10px;
  overflow: hidden;
}

/* ── Color picker — compact dropdown with swatches (PMall style) ────────
   The trigger shows the chosen colour (swatch + name); tapping opens a
   scrollable list of swatch+name rows. Replaces the old always-open grid,
   which wrapped badly and ate vertical space on phones. The existing JS
   open/close + selection handlers drive it.                              */
#wcp-color-select.wcp-custom-select {
  position: relative;
  border: 1.5px solid #d8ccbe !important;
  border-radius: 8px !important;
  background: #fff !important;
  max-width: 340px;
}
#wcp-color-select .wcp-select-trigger {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 11px 14px !important;
  cursor: pointer;
  min-height: 46px;
}
#wcp-color-select .wcp-sel-swatch {
  width: 26px; height: 26px;
  border-radius: 5px;
  border: 1px solid rgba(0,0,0,.15);
  flex-shrink: 0;
  display: none;
}
#wcp-color-select .wcp-sel-text { flex: 1; font-size: .95rem; color: #3c2f24; }
#wcp-color-select .wcp-arrow { color: #A0785A; font-size: 1rem; transition: transform .15s; }
#wcp-color-select.wcp-open .wcp-arrow { transform: rotate(180deg); }

#wcp-color-select .wcp-select-list {
  display: none;
  position: absolute;
  top: calc(100% + 4px); left: 0; right: 0;
  z-index: 999;
  background: #fff;
  border: 1.5px solid #d8ccbe;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.14);
  max-height: 280px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0; padding: 4px 0;
  list-style: none;
}
#wcp-color-select.wcp-open .wcp-select-list { display: block; }
#wcp-color-select .wcp-opt-placeholder { display: none !important; }
#wcp-color-select .wcp-opt {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  padding: 9px 14px !important;
  background: none !important;
  border: none !important;
  width: 100% !important;
  transition: background .1s;
}
#wcp-color-select .wcp-opt:hover { background: #faf5ec !important; }
#wcp-color-select .wcp-opt-swatch {
  width: 30px; height: 30px;
  border-radius: 6px;
  border: 2px solid transparent;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
  flex-shrink: 0;
  display: block;
}
#wcp-color-select .wcp-opt.wcp-opt-selected .wcp-opt-swatch {
  border-color: #A0785A;
  box-shadow: 0 0 0 2px #A0785A;
}
#wcp-color-select .wcp-opt.wcp-opt-selected { background: #faf5ec !important; }
#wcp-color-select .wcp-opt > span:not(.wcp-opt-swatch) {
  font-size: .92rem;
  color: #3c2f24;
  text-align: left;
  line-height: 1.2;
}

/* ── Footer bar: full-width IW brand + ATC button ─────────────────────── */
.wcp-pd-footer {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 14px 20px !important;
  border-top: 1px solid #e8d8c8;
  background: #FAF5EC;
  border-radius: 0 0 10px 10px;
}
/* IW brand group */
.wcp-iw-footer-brand {
  display: flex;
  align-items: center;
  gap: 14px;
}
.wcp-iw-badge {
  width: 44px; height: 44px;
  border: 1.5px solid #A0785A;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: .85rem; font-weight: 600;
  color: #A0785A; letter-spacing: .08em;
  flex-shrink: 0;
}
.wcp-footer-rule {
  width: 1px; height: 30px;
  background: #c8b8a8;
  flex-shrink: 0;
}
.wcp-footer-tagline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: .9rem; font-weight: 400; font-style: italic;
  letter-spacing: .18em; color: #5c4a3d;
  text-transform: uppercase;
  white-space: nowrap;
}
/* ATC button: auto-width, right side of footer */
.wcp-pd-atc-btn {
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 13px 28px !important;
  min-width: 180px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  flex-shrink: 0;
  background: #3d2b1f !important; /* dark espresso matching mockup */
}
.wcp-pd-atc-btn:hover { opacity: .85 !important; }

/* ── Confirm checkbox (now in right column) ───────────────────────────── */
.wcp-confirm-footer {
  margin-top: 16px;
}

/* ── Suppress old header-text, monogram, subtitle (safety net) ─────────── */
.wcp-pd-header-text,
.wcp-iw-monogram,
.wcp-pd-subtitle { display: none !important; }

/* ══════════════════════════════════════════════════════════════════════════
   WC Personalizer — Full-Page Confirmation (v10)
   Matches the IW mockup: hero · card · trust badges · cross-sell grids
   ══════════════════════════════════════════════════════════════════════════ */

.wcp-conf-page {
  background: #FAF5EC;
  min-height: 60vh;
  padding: 0 0 60px;
  font-family: 'Lato', sans-serif;
}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.wcp-conf-hero {
  text-align: center;
  padding: 44px 24px 32px;
  background: #FAF5EC;
}
.wcp-conf-check-circle {
  color: #A0785A;
  margin: 0 auto 16px;
  display: block;
  width: 60px;
}
.wcp-conf-title-upper {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: 1.3rem;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: #3d2b1f;
  margin: 0 0 4px;
}
.wcp-conf-title-lower {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: 2.0rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #A0785A;
  margin: 0 0 12px;
}
.wcp-conf-hero-sub {
  font-size: .95rem;
  color: #5c4a3d;
  margin: 10px 0 0;
}

/* ── Main card ────────────────────────────────────────────────────────── */
.wcp-conf-wrap {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}
.wcp-conf-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(26,15,7,.08);
  display: grid;
  grid-template-columns: 420px 1fr;
  overflow: hidden;
}

/* Photo panel */
.wcp-conf-photo {
  position: relative;
  background: #f4ede4;
  min-height: 380px;
}
.wcp-conf-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.wcp-conf-design-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: rgba(250,245,236,.92);
  border: 1.5px solid #A0785A;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  color: #A0785A;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: .52rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

/* Info panel */
.wcp-conf-info {
  padding: 32px 32px 28px;
  display: flex;
  flex-direction: column;
}
.wcp-conf-added-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  color: #A0785A;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.wcp-conf-product-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: 1.9rem;
  color: #1a0f07;
  margin: 0 0 10px;
  line-height: 1.15;
}
.wcp-conf-summary-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: #A0785A;
  text-transform: uppercase;
  margin: 14px 0 10px;
}
.wcp-conf-fields {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.wcp-conf-field-row {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .86rem;
}
.wcp-conf-field-icon {
  flex-shrink: 0;
  color: #8A7060;
  width: 18px;
  display: flex;
  align-items: center;
}
.wcp-conf-field-label {
  color: #5c4a3d;
  flex-shrink: 0;
}
.wcp-conf-field-value {
  color: #1a0f07;
  font-weight: 600;
}

/* Design saved note */
.wcp-conf-saved-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: #f0f7f0;
  border: 1px solid #c8e0c8;
  border-radius: 7px;
  padding: 10px 12px;
  margin: 4px 0 16px;
  font-size: .78rem;
}
.wcp-conf-saved-note strong {
  display: block;
  color: #2e6e32;
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.wcp-conf-saved-note p { color: #5c4a3d; margin: 0; }

/* Action buttons */
.wcp-conf-actions {
  margin-top: auto;
  padding-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.wcp-conf-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 20px;
  border-radius: 8px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none !important;
  cursor: pointer;
  transition: all .18s;
  border: 1.5px solid transparent;
}
.wcp-conf-btn-checkout {
  background: linear-gradient(135deg, #A0785A, #B8915A);
  color: #FAF5EC !important;
}
.wcp-conf-btn-checkout:hover { filter: brightness(1.08); transform: translateY(-1px); }
.wcp-conf-btn-cart {
  background: #fff;
  color: #3d2b1f !important;
  border-color: #c8b8a8;
}
.wcp-conf-btn-cart:hover { border-color: #A0785A; }
.wcp-conf-btn-continue {
  background: #fff;
  color: #5c4a3d !important;
  border-color: #e0d0c0;
}
.wcp-conf-btn-continue:hover { border-color: #c8b8a8; }

/* ── Trust badges ─────────────────────────────────────────────────────── */
.wcp-conf-trust {
  max-width: 1000px;
  margin: 20px auto 0;
  padding: 20px 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  border-top: 1px solid #e8d8c8;
}
.wcp-conf-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 6px;
  color: #3d2b1f;
  padding: 12px 8px;
}
.wcp-conf-badge svg { color: #A0785A; }
.wcp-conf-badge strong {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: .78rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.wcp-conf-badge span { font-size: .75rem; color: #8A7060; line-height: 1.4; }

/* ── Cross-sell sections ──────────────────────────────────────────────── */
.wcp-conf-section {
  max-width: 1000px;
  margin: 40px auto 0;
  padding: 0 20px;
}
.wcp-conf-section-hd {
  text-align: center;
  margin-bottom: 24px;
}
.wcp-conf-section-hd h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  font-size: 1.25rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: #3d2b1f;
  margin: 0 0 8px;
}
.wcp-conf-section-hd p {
  font-size: .88rem;
  color: #8A7060;
  font-style: italic;
  margin: 8px 0 0;
}
.wcp-conf-product-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.wcp-conf-product-card {
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(26,15,7,.07);
  display: flex;
  flex-direction: column;
  transition: transform .18s, box-shadow .18s;
}
.wcp-conf-product-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(26,15,7,.12);
}
.wcp-conf-product-img-wrap {
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
}
.wcp-conf-product-img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .3s;
}
.wcp-conf-product-card:hover .wcp-conf-product-img-wrap img { transform: scale(1.04); }
.wcp-conf-product-info {
  padding: 12px 14px 8px;
  flex: 1;
}
.wcp-conf-product-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1rem;
  color: #3d2b1f;
  text-decoration: none;
  display: block;
  line-height: 1.3;
  margin-bottom: 4px;
}
.wcp-conf-product-price {
  color: #A0785A;
  font-weight: 700;
  font-size: .9rem;
  margin: 0;
}
.wcp-conf-product-atc {
  display: block;
  margin: 8px 14px 14px;
  padding: 9px;
  text-align: center;
  border: 1.5px solid #D4C4B0;
  border-radius: 6px;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #5c4a3d !important;
  text-decoration: none !important;
  transition: border-color .15s, background .15s;
}
.wcp-conf-product-atc:hover {
  border-color: #A0785A;
  background: #fdf6ee;
  color: #A0785A !important;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .wcp-conf-card { grid-template-columns: 1fr; }
  .wcp-conf-photo { min-height: 260px; }
  .wcp-conf-info  { padding: 24px 20px; }
  .wcp-conf-product-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .wcp-conf-trust { grid-template-columns: repeat(2, 1fr); }
  .wcp-conf-title-lower { font-size: 1.5rem; letter-spacing: .2em; }
}
@media (max-width: 480px) {
  .wcp-conf-product-grid { grid-template-columns: repeat(2, 1fr); }
  .wcp-conf-trust { grid-template-columns: repeat(2, 1fr); }
}

/* ══════════════════════════════════════════════════════════════════════════
   WC Personalizer — Confirmation page compact overrides (v11)
   Fixes oversized hero and card so the full confirmation is visible
   above the fold, matching PMall's proportions.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Hero: compact ────────────────────────────────────────────────────── */
.wcp-conf-hero {
  padding: 28px 24px 18px !important;
}
.wcp-conf-check-circle {
  width: 40px !important;
  margin-bottom: 10px !important;
}
.wcp-conf-title-upper {
  font-size: .78rem !important;
  letter-spacing: .28em !important;
  margin: 0 0 2px !important;
}
.wcp-conf-title-lower {
  font-size: 1.35rem !important;
  letter-spacing: .22em !important;
  margin: 0 0 8px !important;
}
.wcp-conf-hero-sub {
  font-size: .85rem !important;
  margin-top: 6px !important;
}
.wcp-conf-hero .wcp-section-divider {
  margin: 6px auto !important;
}

/* ── Card: 3-column compact layout ───────────────────────────────────── */
.wcp-conf-card {
  grid-template-columns: 150px 1fr 200px !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 0 !important;
}

/* Photo: small square thumbnail */
.wcp-conf-photo {
  width: 150px !important;
  height: 150px !important;
  min-height: unset !important;
  flex-shrink: 0;
  border-radius: 10px 0 0 10px !important;
}
.wcp-conf-photo img {
  height: 150px !important;
  border-radius: 10px 0 0 10px !important;
}
.wcp-conf-design-badge {
  width: 44px !important;
  height: 44px !important;
  font-size: .42rem !important;
  top: 8px !important;
  left: 8px !important;
}
.wcp-conf-design-badge svg { width: 14px !important; height: 14px !important; }

/* Info: compact padding, hide section divider inside card */
.wcp-conf-info {
  padding: 16px 18px !important;
  flex: 1;
}
.wcp-conf-info .wcp-section-divider { display: none !important; }
.wcp-conf-added-label { margin-bottom: 4px !important; }
.wcp-conf-product-name {
  font-size: 1.25rem !important;
  margin-bottom: 6px !important;
}
.wcp-conf-summary-label { margin-top: 8px !important; margin-bottom: 6px !important; }
.wcp-conf-fields { gap: 4px !important; margin-bottom: 8px !important; }
.wcp-conf-field-row { font-size: .82rem !important; }
.wcp-conf-saved-note {
  padding: 7px 10px !important;
  margin: 4px 0 0 !important;
  font-size: .75rem !important;
}

/* Actions: 3rd column, stacked buttons */
.wcp-conf-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  padding: 16px !important;
  border-left: 1px solid #f0e8dc !important;
  min-width: 0;
  margin-top: 0 !important;
}
.wcp-conf-btn {
  font-size: .78rem !important;
  padding: 10px 14px !important;
  letter-spacing: .08em !important;
  white-space: nowrap;
}

/* ── Trust badges: more compact ──────────────────────────────────────── */
.wcp-conf-trust {
  margin-top: 12px !important;
  padding: 12px 20px !important;
}
.wcp-conf-badge {
  padding: 8px 4px !important;
  gap: 4px !important;
}
.wcp-conf-badge svg { width: 22px !important; height: 22px !important; }
.wcp-conf-badge strong { font-size: .72rem !important; }
.wcp-conf-badge span { font-size: .7rem !important; }

/* ── Responsive: stack on mobile ─────────────────────────────────────── */
@media (max-width: 700px) {
  .wcp-conf-card {
    grid-template-columns: 1fr !important;
  }
  .wcp-conf-photo {
    width: 100% !important; height: 200px !important;
    border-radius: 10px 10px 0 0 !important;
  }
  .wcp-conf-photo img { height: 200px !important; border-radius: 10px 10px 0 0 !important; }
  .wcp-conf-actions {
    border-left: none !important;
    border-top: 1px solid #f0e8dc !important;
    padding: 14px 16px !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .wcp-conf-btn { flex: 1 1 140px !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Confirmation hero — checkmark beside text, clean white background (v12)
   ══════════════════════════════════════════════════════════════════════════ */

/* White/clean background for the entire page and hero */
.wcp-conf-page    { background: #ffffff !important; }
.wcp-conf-hero    { background: #ffffff !important; padding: 22px 24px 14px !important; }

/* Checkmark + titles side by side */
.wcp-conf-hero-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 10px;
}
.wcp-conf-check-circle {
  margin: 0 !important;
  flex-shrink: 0;
  display: block !important;
  width: auto !important;
}
.wcp-conf-hero-text { text-align: left; }
.wcp-conf-title-upper { margin: 0 0 2px !important; text-align: left !important; }
.wcp-conf-title-lower { margin: 0 !important; text-align: left !important; }

/* Ornament + tagline remain centered below */
.wcp-conf-hero .wcp-section-divider { margin: 8px auto 0 !important; }
.wcp-conf-hero-sub { margin-top: 6px !important; text-align: center; }

/* Card and section backgrounds stay white/light */
.wcp-conf-card  { background: #ffffff !important; border: 1px solid #ede8e0 !important; }
.wcp-conf-trust { background: #fafaf8; border-top: 1px solid #ede8e0 !important; }
.wcp-conf-section { background: transparent; }

/* ── Hero font size tweaks (v13) ────────────────────────────────────────
   Match "YOUR PERSONALIZED PIECE" size to "HAS BEEN ADDED!" and
   increase the tagline by 2pt.                                          */
.wcp-conf-title-upper { font-size: 1.35rem !important; }
.wcp-conf-hero-sub    { font-size: .975rem !important; }

/* ── Hero text refinements (v14) ────────────────────────────────────────
   Center titles · semi-bold weight · tighter line gap · bronze lower ·
   tighter overall vertical spacing                                      */
.wcp-conf-hero          { padding: 16px 24px 10px !important; }
.wcp-conf-hero-inner    { margin-bottom: 6px !important; }

.wcp-conf-hero-text     { text-align: center; }
.wcp-conf-title-upper   {
  text-align: center !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  margin: 0 0 1px !important;
}
.wcp-conf-title-lower   {
  text-align: center !important;
  font-weight: 600 !important;
  color: #A0785A !important;
  line-height: 1.1 !important;
  margin: 0 !important;
}
.wcp-conf-hero .wcp-section-divider { margin: 5px auto 0 !important; }
.wcp-conf-hero-sub      { margin-top: 4px !important; }

/* ── Trust badges — icon left, text right (v15) ─────────────────────────
   Icon sits to the left of the label + description block.
   Description can wrap to 2 lines — total 3 lines per badge.           */
.wcp-conf-badge {
  flex-direction: row !important;
  align-items: flex-start !important;
  text-align: left !important;
  gap: 11px !important;
  padding: 10px 4px !important;
}
.wcp-conf-badge svg {
  flex-shrink: 0;
  margin-top: 1px;       /* optical alignment with first text line */
}
.wcp-conf-badge-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.wcp-conf-badge strong {
  display: block;
  font-size: .76rem !important;
}
.wcp-conf-badge span {
  font-size: .73rem !important;
  line-height: 1.45;
}

/* ── Trust badge icon refinements (v16) ─────────────────────────────────
   30px icons (15% up from 26px) · vertically centered with text block  */
.wcp-conf-badge         { align-items: center !important; }
.wcp-conf-badge svg     { width: 30px !important; height: 30px !important; margin-top: 0 !important; }

/* ── Badge spacing, color, font (v17) ───────────────────────────────────
   Equal visual spacing across all 3 lines · description matches label
   color · Montserrat body font on the confirmation page                */

/* Equal line spacing — remove gap, use line-height to space evenly */
.wcp-conf-badge-text    { gap: 0 !important; }
.wcp-conf-badge strong  { line-height: 1.55 !important; font-family: 'Montserrat', sans-serif !important; font-size: .72rem !important; }
.wcp-conf-badge span    { line-height: 1.55 !important; color: #3d2b1f !important;
                          font-family: 'Montserrat', sans-serif !important; font-size: .72rem !important; }

/* Montserrat as body font for the whole confirmation page
   (Cormorant Garamond remains on headings via their own rules)          */
.wcp-conf-page          { font-family: 'Montserrat', sans-serif !important; }
.wcp-conf-added-label,
.wcp-conf-summary-label { font-family: 'Montserrat', sans-serif !important; }
.wcp-conf-field-row,
.wcp-conf-saved-note,
.wcp-conf-hero-sub      { font-family: 'Montserrat', sans-serif !important; }
.wcp-conf-btn           { font-family: 'Montserrat', sans-serif !important; }

/* ── Badge refinements (v18) ────────────────────────────────────────────
   Cream background · heavier description text · per-icon sizing ·
   fix teal color leak on span elements                                  */

/* Cream background */
.wcp-conf-trust { background: #FAF5EC !important; }

/* Heavier description text (incremental: 400 → 500) */
.wcp-conf-trust .wcp-conf-badge .wcp-conf-badge-text span {
  font-weight: 500 !important;
  color: #3d2b1f !important;   /* fix teal leak with higher specificity */
}
.wcp-conf-trust .wcp-conf-badge .wcp-conf-badge-text strong {
  color: #3d2b1f !important;
}

/* Truck icon +40%: 30 × 1.4 = 42px */
.wcp-badge-truck svg { width: 42px !important; height: 42px !important; }

/* Heart icon +10%: 30 × 1.1 = 33px */
.wcp-badge-faith svg { width: 33px !important; height: 33px !important; }

/* ── Trust section: correct background + full-width breakout (v19) ──────
   Background #FCFAE2 · spans 100vw regardless of theme container width  */
.wcp-conf-trust {
  background: #FCFAE2 !important;
  max-width: 100vw !important;
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  padding: 20px 8vw !important;
  margin-top: 16px !important;
}

/* ── Confirmation card: full-width breakout (v20) ───────────────────── */
.wcp-conf-wrap {
  max-width: 100vw !important;
  width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  padding: 0 20px !important;
  margin-top: 0 !important;
}

/* ── Sticky canvas panel + generous height for portrait images (v21) ────
   The left panel sticks at the top while the dialog scrolls, so the
   product preview stays visible as the customer fills in form fields.   */
.wcp-pd-left {
  position: sticky !important;
  top: 0 !important;
  align-self: start !important;   /* required for sticky inside CSS grid */
  max-height: none !important;
  overflow: visible !important;
}

/* ── Photo upload controls (v22) ────────────────────────────────────────
   Change Image + Remove buttons that appear after a photo is uploaded   */
.wcp-drop-thumb {
  width: 100%; height: 100%;
  object-fit: contain;
  border-radius: 6px;
  display: block;
}
.wcp-photo-controls {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 8px;
}
.wcp-photo-ctrl-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: .76rem;
  font-weight: 600;
  cursor: pointer;
  border: 1.5px solid;
  font-family: inherit;
  transition: background .15s, color .15s;
}
.wcp-photo-change {
  background: #fff;
  color: #A0785A;
  border-color: #A0785A;
}
.wcp-photo-change:hover { background: #fdf6ee; }
.wcp-photo-remove {
  background: #fff;
  color: #c0392b;
  border-color: #e0b4b4;
}
.wcp-photo-remove:hover { background: #fdf0ee; border-color: #c0392b; }

/* ── Interactive photo editor controls (v23) ────────────────────────────*/
.wcp-photo-hint {
  font-size: .75rem;
  color: #8a7060;
  text-align: center;
  margin: 6px 0 8px;
  font-style: italic;
}
.wcp-photo-editor-row {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  justify-content: center;
  margin-bottom: 6px;
}
.wcp-photo-tool {
  background: #fff !important;
  color: #3d2b1f !important;
  border-color: #d0c0b0 !important;
  font-size: .7rem !important;
  padding: 5px 9px !important;
}
.wcp-photo-tool:hover {
  border-color: #A0785A !important;
  color: #A0785A !important;
}

/* ── Photo quality disclaimer + requirements modal (v24) ────────────────*/
.wcp-photo-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  margin-top: 10px;
  padding: 10px 12px;
  background: #fdf6ee;
  border: 1px solid #e8d0b8;
  border-radius: 7px;
  font-size: .78rem;
  color: #5c4a3d;
  line-height: 1.45;
}
.wcp-photo-disclaimer svg { flex-shrink: 0; color: #A0785A; margin-top: 1px; }
.wcp-quality-link {
  background: none; border: none; padding: 0;
  color: #A0785A; font-size: .78rem; font-weight: 700;
  text-decoration: underline; cursor: pointer;
  font-family: inherit; display: inline;
  margin-left: 4px;
}
.wcp-quality-link:hover { color: #8B6040; }

/* Quality modal overlay */
.wcp-quality-modal {
  display: none;
  position: fixed; inset: 0; z-index: 9999999;
  background: rgba(0,0,0,.55);
  align-items: center; justify-content: center;
  padding: 20px;
}
.wcp-quality-modal.wcp-quality-open { display: flex; }
.wcp-quality-modal-inner {
  background: #fff;
  border-radius: 12px;
  padding: 28px 30px;
  max-width: 480px; width: 100%;
  position: relative;
  box-shadow: 0 16px 60px rgba(0,0,0,.35);
}
.wcp-quality-close {
  position: absolute; top: 14px; right: 16px;
  background: none; border: none; font-size: 1.4rem;
  cursor: pointer; color: #888; line-height: 1;
}
.wcp-quality-close:hover { color: #333; }
.wcp-quality-title {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.2rem; font-weight: 600;
  color: #3d2b1f; margin: 0 0 18px;
}
.wcp-quality-title svg { color: #A0785A; flex-shrink: 0; }
.wcp-quality-list {
  list-style: none; margin: 0 0 16px; padding: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.wcp-quality-list li {
  font-size: .84rem; color: #3d2b1f; line-height: 1.5;
  padding-left: 16px; position: relative;
}
.wcp-quality-list li::before {
  content: '✓'; position: absolute; left: 0;
  color: #A0785A; font-weight: 700; font-size: .8rem;
}
.wcp-quality-list strong { color: #1a0f07; }
.wcp-quality-note {
  font-size: .78rem; color: #8a7060;
  font-style: italic; margin: 0 0 20px;
  padding-top: 12px;
  border-top: 1px solid #f0e8dc;
  line-height: 1.5;
}
.wcp-quality-done {
  display: block; width: 100%;
  padding: 12px;
  background: var(--wcp-btn-bg, #A0785A);
  color: var(--wcp-btn-text, #FAF5EC);
  border: none; border-radius: 7px;
  font-family: 'Montserrat', sans-serif;
  font-size: .85rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  cursor: pointer; transition: opacity .15s;
}
.wcp-quality-done:hover { opacity: .88; }

/* ── Quality modal readability improvements (v25) ───────────────────────
   Darker text colors and slightly larger sizes throughout               */
.wcp-quality-list li   { font-size: .88rem !important; color: #1a1a1a !important; }
.wcp-quality-list strong { color: #000 !important; }
.wcp-quality-note      { font-size: .84rem !important; color: #1a1a1a !important; }
.wcp-photo-disclaimer  { font-size: .81rem !important; color: #3d2b1f !important; }

/* ── Photo production files in orders dashboard (v26) ───────────────────*/
.wcp-photo-file-group { margin-top: 6px; display: flex; flex-direction: column; gap: 3px; }
.wcp-photo-file-label { font-size: .75rem; color: #3d2b1f; display: block; margin-bottom: 2px; }
.wcp-photo-original   { background: #f0f7ff !important; border-color: #b0cce8 !important; color: #1a5a9a !important; }
.wcp-photo-crop       { background: #f0fff4 !important; border-color: #7ecb9b !important; color: #1a6e3e !important; }

/* ── Names list — cross-out checkbox + Add Another Name (v27) ───────────*/
.wcp-name-wrap   { margin-bottom: 8px; }
.wcp-name-row    { display: flex; align-items: center; gap: 8px; }
.wcp-name-row .wcp-text-input { flex: 1; }

.wcp-cross-label {
  display: inline-flex; align-items: center; gap: 4px;
  cursor: pointer; user-select: none; white-space: nowrap;
  font-size: .75rem; color: #8a7060;
  padding: 4px 8px;
  border: 1px solid #d0c0b0;
  border-radius: 5px;
  transition: background .12s, border-color .12s;
}
.wcp-cross-label:hover         { background: #fdf6ee; border-color: #A0785A; }
.wcp-cross-label input         { margin: 0; accent-color: #A0785A; }
.wcp-cross-icon                { font-style: italic; color: #A0785A; font-size: .8rem; font-weight: 700; }
.wcp-cross-text                { font-size: .72rem; }

/* When checked — highlight the label */
.wcp-cross-label:has(input:checked) {
  background: #fdf6ee;
  border-color: #A0785A;
  color: #A0785A;
}

.wcp-add-name-btn {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px;
  padding: 6px 14px;
  background: #fff;
  border: 1.5px dashed #A0785A;
  border-radius: 6px;
  color: #A0785A;
  font-family: inherit;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s;
}
.wcp-add-name-btn:hover { background: #fdf6ee; }

/* ── Confirmation page production notice (v28) ──────────────────────────*/
.wcp-conf-production-notice {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 14px;
  padding: 12px 14px;
  background: #fdf6ee;
  border: 1px solid #e8d0b8;
  border-radius: 7px;
  font-size: .8rem;
  color: #5c4a3d;
  line-height: 1.55;
}
.wcp-conf-production-notice svg {
  flex-shrink: 0;
  color: #A0785A;
  margin-top: 1px;
}
.wcp-conf-production-notice p {
  margin: 0;
}

/* ── Popup production reproduction notice (v28) ─────────────────────────*/
.wcp-production-notice {
  margin-top: 10px;
  padding: 10px 13px;
  background: #fdf6ee;
  border: 1px solid #e8d0b8;
  border-left: 3px solid #A0785A;
  border-radius: 5px;
  font-size: .78rem;
  color: #5c4a3d;
  line-height: 1.5;
}
.wcp-production-notice strong {
  color: #A0785A;
  margin-right: 4px;
}

/* ── Photo nudge buttons (v29) ──────────────────────────────────────────*/
.wcp-nudge-row {
  display: flex;
  align-items: center;
  gap: 5px;
  justify-content: center;
  margin: 6px 0;
  flex-wrap: wrap;
}
.wcp-nudge-label {
  font-size: .72rem;
  color: #8a7060;
  font-weight: 600;
  margin-right: 2px;
}
.wcp-nudge-btn {
  background: #fff !important;
  color: #5c4a3d !important;
  border-color: #c8b8a8 !important;
  font-size: .7rem !important;
  padding: 4px 8px !important;
  min-width: 52px;
}
.wcp-nudge-btn:hover {
  border-color: #A0785A !important;
  color: #A0785A !important;
  background: #fdf6ee !important;
}

/* ── Print area note in popup (v30) ─────────────────────────────────────*/
.wcp-print-area-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: 6px 0 10px;
  padding: 8px 11px;
  background: #f0f6fc;
  border: 1px solid #c5d9ed;
  border-radius: 5px;
  font-size: .78rem;
  color: #1a5a9a;
  line-height: 1.45;
}
.wcp-print-area-note svg { flex-shrink:0; color:#1a5a9a; margin-top:1px; }

/* ── Return policy notices (v31) ────────────────────────────────────────*/
/* Popup — above the confirm checkbox */
.wcp-return-policy-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 12px 0 10px;
  padding: 11px 13px;
  background: #fff8f0;
  border: 1px solid #e8c8a0;
  border-left: 3px solid #A0785A;
  border-radius: 5px;
  font-size: .78rem;
  color: #5c3a1a;
  line-height: 1.55;
}
.wcp-return-policy-notice svg { color: #A0785A; flex-shrink:0; margin-top:1px; }

/* Confirmation page — below the reproduction notice */
.wcp-conf-return-notice {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-top: 10px;
  padding: 10px 13px;
  background: #fff8f0;
  border: 1px solid #e8c8a0;
  border-radius: 7px;
  font-size: .79rem;
  color: #5c3a1a;
  line-height: 1.5;
}
.wcp-conf-return-notice svg { color: #A0785A; flex-shrink:0; margin-top:2px; }
.wcp-conf-return-notice p   { margin: 0; }

/* ── Size selector in popup (v32) ───────────────────────────────────────*/
.wcp-size-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.wcp-size-label {
  font-size: .82rem;
  font-weight: 600;
  color: #3D2B1F;
  white-space: nowrap;
}
.wcp-size-select {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid #c8b8a8;
  border-radius: 5px;
  font-size: .85rem;
  color: #3D2B1F;
  background: #fff;
  cursor: pointer;
  max-width: 220px;
}
.wcp-size-select:focus {
  outline: none;
  border-color: #A0785A;
  box-shadow: 0 0 0 2px rgba(160,120,90,.15);
}

/* ── Size select arrow fix (v33) ─────────────────────────────────────────*/
.wcp-size-select {
  appearance: auto;
  -webkit-appearance: auto;
  -moz-appearance: auto;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23A0785A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 32px;
}

/* ── Size select wrapper arrow (v34) ────────────────────────────────────*/
.wcp-size-select-wrap {
  position: relative;
  display: inline-block;
  flex: 1;
  max-width: 220px;
}
.wcp-size-select-wrap .wcp-size-select {
  width: 100%;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  padding-right: 36px;
  background-image: none !important;
}
.wcp-size-arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  display: flex;
  align-items: center;
}



/* ═══════════════════════════════════════════════════════════════════════
   MOBILE — v40  
   Canvas compact + sticky at top. Everything else natural scroll.
   Add to Cart sits naturally at bottom of form — NOT fixed.
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── Fixed Personalize bar on product page ── */
  .wcp-mobile-bar {
    display: block !important;
    position: fixed !important;
    bottom: 0 !important; left: 0 !important; right: 0 !important;
    z-index: 9990 !important;
    padding: 10px 16px !important;
    background: #fff !important;
    border-top: 1px solid #e8d8c8 !important;
    box-shadow: 0 -4px 20px rgba(0,0,0,.12) !important;
  }
  .wcp-mobile-bar .wcp-open-modal-btn {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    padding: 15px 24px !important;
    font-size: 1.05rem !important;
    border-radius: 8px !important;
  }
  body.single-product { padding-bottom: 80px; }

  /* ── Popup: flex column — canvas fixed, middle scrolls ── */
  #wcp-personalizer-modal {
    align-items: flex-start !important;
    padding: 0 !important;
  }
  .wcp-pd-dialog {
    width: 100% !important;
    max-width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important; /* dialog itself does NOT scroll */
  }

  /* ── Header: tiny strip, shrinks to nothing ── */
  .wcp-pd-header {
    flex-shrink: 0 !important;
    padding: 4px 12px !important;
    background: #fff !important;
    border-bottom: none !important;
    min-height: 0 !important;
  }
  .wcp-pd-header-rule { display: none !important; }
  #wcp-personalizer-modal .wcp-pd-product-title,
  .wcp-pd-dialog .wcp-pd-product-title {
    font-size: 11px !important;
    font-weight: 400 !important;
    color: #bbb !important;
    line-height: 1.2 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    flex: 1 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    font-family: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .wcp-pd-close {
    width: 34px !important; height: 34px !important;
    font-size: 1rem !important; flex-shrink: 0 !important;
  }

  /* ── Canvas: fixed — never moves ── */
  .wcp-pd-left {
    flex-shrink: 0 !important;
    width: 100% !important;
    padding: 6px 0 4px !important;
    border-right: none !important;
    border-bottom: 2px solid #e8d8c8 !important;
    border-radius: 0 !important;
    background: #FAF5EC !important;
    max-height: none !important;
    position: static !important;
  }
  #wcp-preview-wrap { width: 100% !important; padding: 0 !important; }
  #wcp-canvas-wrap {
    width: 100% !important;
    max-height: 35vw !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #wcp-canvas-wrap canvas {
    width: 100% !important;
    height: auto !important;
    max-height: 35vw !important;
    display: block !important;
  }
  .wcp-pd-preview-note { display: none !important; }

  /* ── Body: flex:1 scrollable — canvas stays above ── */
  .wcp-pd-body {
    display: block !important;
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    min-height: 0 !important;
  }

  /* ── Right column: natural flow inside scroll ── */
  .wcp-pd-right {
    padding: 14px 16px !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* ── Footer: natural flow at bottom — NOT fixed ── */
  .wcp-pd-footer {
    position: static !important;
    padding: 14px 16px 24px !important;
    background: #fff !important;
    border-top: 1px solid #eee !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .wcp-iw-footer-brand { display: none !important; }
  .wcp-pd-atc-btn {
    width: 100% !important;
    max-width: 100% !important;
    padding: 18px !important;
    font-size: 1.05rem !important;
    justify-content: center !important;
    margin: 0 !important;
  }

  /* ── Swatches: centered, larger ── */
  .wcp-variant-swatches {
    justify-content: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
  }
  .wcp-variant-swatch {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 5px !important;
  }
  .wcp-variant-img-wrap img {
    width: 66px !important;
    height: 66px !important;
    border-radius: 6px !important;
    object-fit: cover !important;
  }
  .wcp-variant-no-img { width: 66px !important; height: 66px !important; }
  .wcp-variant-name { font-size: .75rem !important; text-align: center !important; }

  /* ── Size block: centered ── */
  .wcp-field-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .wcp-group-label {
    font-size: .9rem !important;
    text-align: center !important;
    width: 100% !important;
    display: block !important;
  }
  .wcp-size-row {
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    gap: 6px !important;
  }
  .wcp-size-label { font-size: 1rem !important; font-weight: 700 !important; }
  .wcp-size-select,
  .wcp-size-select-wrap {
    width: 100% !important;
    max-width: 280px !important;
    font-size: 1rem !important;
  }

  /* ── Inputs: bigger touch targets ── */
  .wcp-name-input,
  .wcp-text-input {
    font-size: 1rem !important;
    padding: 10px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  .wcp-confirm-label { font-size: .82rem !important; }
  .wcp-return-policy-notice { font-size: .74rem !important; }
}

@media (max-width: 380px) {
  .wcp-pd-title { font-size: .55rem !important; }
  #wcp-canvas-wrap { max-height: 40vw !important; }
  #wcp-canvas-wrap canvas { max-height: 40vw !important; }
  .wcp-variant-img-wrap img { width: 54px !important; height: 54px !important; }
}

/* ── Mobile structural classes added by JS ──────────────────────────── */
@media (max-width: 768px) {
  /* Dialog becomes a flex column — no scroll on dialog itself */
  .wcp-mobile-layout {
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Header — tiny strip, flex-shrink:0 */
  .wcp-mobile-layout .wcp-pd-header {
    flex-shrink: 0 !important;
    position: static !important;
    padding: 5px 12px !important;
    border-bottom: none !important;
    border-radius: 0 !important;
  }
  .wcp-mobile-layout .wcp-pd-header-rule { display: none !important; }
  .wcp-mobile-layout .wcp-section-divider { display: none !important; }
  .wcp-mobile-layout .wcp-pd-product-title {
    font-size: .78rem !important;
    font-weight: 600 !important;
    color: #3D2B1F !important;
    text-align: center !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    font-family: inherit !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    flex: 1 !important;
  }

  /* Canvas — flex-shrink:0, always visible */
  .wcp-mobile-canvas {
    flex-shrink: 0 !important;
    width: 100% !important;
    background: #FAF5EC !important;
    border-bottom: 2px solid #e8d8c8 !important;
    padding: 6px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .wcp-mobile-canvas #wcp-preview-wrap {
    width: 100% !important;
    padding: 0 !important;
    max-height: 34vh !important;
    overflow: hidden !important;
  }
  /* The real canvas wrapper is #wcp-preview-wrap (there is no
     #wcp-canvas-wrap). Cap the canvas by viewport HEIGHT so a tall portrait
     product shot doesn't fill the whole screen on open, leaving the colour
     swatches and controls below the fold. */
  .wcp-mobile-canvas #wcp-preview-wrap canvas,
  .wcp-mobile-canvas #wcp-canvas-wrap canvas {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 34vh !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* ── Typing: collapse preview panel + hide title for more room ────────
     The JS scales #wcp-preview-wrap to 42% (transform, origin top-center).
     Here we cap the panel that holds it so the shrunken shirt doesn't leave
     a tall empty beige block below it, and we hide the product title to
     give the form/keyboard extra breathing room. Targets both the plain
     panel and the JS-restructured .wcp-mobile-canvas wrapper. */
  .wcp-pd-dialog.wcp-kb-active .wcp-pd-left,
  .wcp-pd-dialog.wcp-kb-active .wcp-mobile-canvas {
    max-height: 128px !important;
    min-height: 0 !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    overflow: hidden !important;
    transition: max-height .18s ease !important;
  }
  .wcp-pd-dialog.wcp-kb-active .wcp-pd-product-title {
    display: none !important;
  }
  .wcp-pd-dialog.wcp-kb-active .wcp-pd-header {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    min-height: 0 !important;
  }

  /* Scroll wrapper — flex:1, scrolls */
  .wcp-mobile-scroll {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    min-height: 0 !important;
  }
  .wcp-mobile-scroll .wcp-pd-right {
    padding: 14px 16px !important;
    max-height: none !important;
    overflow: visible !important;
  }
  /* Footer is now a direct flex child of the dialog (moved out of the scroll
     area in v4.10.0), pinned at the bottom so Add to Cart is always visible. */
  .wcp-mobile-layout > .wcp-pd-footer {
    position: static !important;   /* flex child; the dialog column pins it */
    flex-shrink: 0 !important;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    background: #fff !important;
    border-top: 1px solid #eee !important;
    box-shadow: 0 -4px 16px rgba(0,0,0,.06) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    z-index: 5 !important;
  }
  /* While the on-screen keyboard is open the customer is typing, not checking
     out — collapse the pinned footer so it doesn't fight the keyboard or eat
     vertical space. It returns the moment the keyboard closes. */
  .wcp-pd-dialog.wcp-kb-active > .wcp-pd-footer {
    display: none !important;
  }
  .wcp-mobile-scroll .wcp-pd-footer {
    position: static !important;
    padding: 14px 16px 32px !important;
    background: #fff !important;
    border-top: 1px solid #eee !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 8px !important;
  }
  .wcp-mobile-scroll .wcp-pd-atc-btn {
    width: 100% !important;
    max-width: 100% !important;
    padding: 16px !important;
    font-size: 1rem !important;
    justify-content: center !important;
    margin: 0 !important;
  }
  .wcp-mobile-scroll .wcp-iw-footer-brand { display: none !important; }

  /* Inputs bigger */
  .wcp-mobile-scroll .wcp-name-input,
  .wcp-mobile-scroll .wcp-text-input {
    font-size: 1rem !important;
    padding: 10px 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Swatches centered and larger */
  .wcp-mobile-scroll .wcp-variant-swatches {
    justify-content: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
  }
  .wcp-mobile-scroll .wcp-variant-swatch {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 5px !important;
  }
  .wcp-mobile-scroll .wcp-variant-img-wrap img {
    width: 66px !important;
    height: 66px !important;
    border-radius: 6px !important;
    object-fit: cover !important;
  }
  .wcp-mobile-scroll .wcp-variant-no-img { width: 66px !important; height: 66px !important; }
  .wcp-mobile-scroll .wcp-variant-name { font-size: .75rem !important; text-align: center !important; }

  /* Size centered */
  .wcp-mobile-scroll .wcp-field-group {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }
  .wcp-mobile-scroll .wcp-group-label {
    font-size: .9rem !important;
    text-align: center !important;
    width: 100% !important;
    display: block !important;
  }
  .wcp-mobile-scroll .wcp-size-row {
    flex-direction: column !important;
    align-items: center !important;
    width: 100% !important;
    gap: 6px !important;
  }
  .wcp-mobile-scroll .wcp-size-label { font-size: 1rem !important; font-weight: 700 !important; }
  .wcp-mobile-scroll .wcp-size-select,
  .wcp-mobile-scroll .wcp-size-select-wrap {
    width: 100% !important;
    max-width: 280px !important;
    font-size: 1rem !important;
  }
}

/* ── Footer price (v41) ─────────────────────────────────────────────── */
.wcp-footer-price {
  display: none; /* hidden on desktop — price is already on product page */
}
@media (max-width: 768px) {
  .wcp-footer-price {
    display: block !important;
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: #3D2B1F !important;
    text-align: center !important;
    margin-bottom: 6px !important;
  }
  .wcp-footer-price .woocommerce-Price-amount {
    font-size: 1.1rem !important;
    color: #3D2B1F !important;
  }

  /* ── Title centered on mobile ── */
  .wcp-mobile-layout .wcp-pd-header {
    justify-content: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
  }
  .wcp-mobile-layout .wcp-pd-product-title {
    text-align: center !important;
    flex: 1 !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #3D2B1F !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    margin: 0 !important;
  }

  /* Thumbnails — bigger */
  .wcp-mobile-scroll .wcp-variant-img-wrap img {
    width: 80px !important;
    height: 80px !important;
  }
  .wcp-mobile-scroll .wcp-variant-no-img {
    width: 80px !important;
    height: 80px !important;
  }
  .wcp-mobile-scroll .wcp-variant-swatch {
    min-width: 80px !important;
  }
}

/* ============================================================
   v4.4.6 — Remove the cream panel block around the mobile canvas
   The canvas panel background (#FAF5EC) showed as a cream band below
   the shirt photo in the normal state, and expanded into a large empty
   block when the canvas shrank while typing. The shirt photo carries
   its own backdrop, so the panel background is redundant. Making the
   panel transparent with no extra spacing removes the cream in EVERY
   state. Appended at end of file to win the cascade.
   ============================================================ */
@media (max-width: 768px) {
  .wcp-pd-left,
  .wcp-mobile-canvas {
    background: transparent !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  #wcp-preview-wrap {
    margin-bottom: 0 !important;
    background: transparent !important;
  }
  /* Keep a subtle separator under the preview without the cream fill */
  .wcp-mobile-canvas {
    border-bottom: 1px solid #ece3d6 !important;
  }
}

/* ============================================================
   v4.5.1 — Product title in the mobile popup header
   The rule inside the 768px block set this to 11px / #bbb (light grey),
   which read as small and faint. That rule uses an ID selector, so it
   outranks the .wcp-mobile-layout rules; this block matches its
   specificity and sits later in the file, so it wins cleanly.
   NOTE: deliberately does NOT set `display` — the .wcp-kb-active rule
   hides the title while typing via display:none, and setting display
   here (e.g. for line-clamping) would override that and make the title
   reappear over the keyboard.
   ============================================================ */
@media (max-width: 768px) {
  #wcp-personalizer-modal .wcp-pd-product-title,
  .wcp-pd-dialog .wcp-pd-product-title {
    font-size: 20px !important;      /* was 22px — dialled back 2px (v4.5.4) */
    font-weight: 700 !important;
    color: #000 !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-align: center !important;
    /* allow the longer title to wrap instead of being cut with an ellipsis */
    white-space: normal !important;
    /* Even the lines out so a long title doesn't leave a single orphaned
       word on line 2. Browsers that don't support this just wrap normally. */
    text-wrap: balance !important;
    text-overflow: clip !important;
    overflow: visible !important;
    padding: 0 6px !important;
  }
  /* a little more breathing room now that the title is larger */
  #wcp-personalizer-modal .wcp-pd-header,
  .wcp-pd-dialog .wcp-pd-header {
    padding: 8px 12px !important;
  }
  /* re-assert the hide-while-typing rule at higher specificity */
  #wcp-personalizer-modal .wcp-kb-active .wcp-pd-product-title,
  .wcp-pd-dialog.wcp-kb-active .wcp-pd-product-title {
    display: none !important;
  }
}

/* ============================================================
   v4.5.2 — Size selector cleanup
   Three fixes:
   1. The bronze border sat lower than the shaded select because the
      theme adds a bottom margin (and sometimes a fixed height) to
      <select>. Forcing margin:0 / height:auto makes the bordered
      wrapper hug the select exactly.
   2. display:block removes the inline-block baseline gap that added a
      few more stray pixels under the select.
   3. Padding-right leaves room for the stacked up/down arrows.
   ============================================================ */
#wcp-size-select.wcp-size-select {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  background: transparent !important;
  background-image: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  padding: 7px 34px 7px 10px !important;
  line-height: 1.35 !important;
  color: #3D2B1F !important;
  vertical-align: middle !important;
}
/* Slightly more room for the arrows at the larger mobile font size */
@media (max-width: 768px) {
  #wcp-size-select.wcp-size-select {
    padding: 9px 36px 9px 12px !important;
  }
}

/* ============================================================
   v4.5.6 — Visible colour selector control
   The swatches always contained a real radio input, but it was
   display:none, so nothing invited the customer to choose a colour
   (unlike the size dropdown). This exposes it as a rounded square
   sitting between the swatch image and the colour name. Clicking
   anywhere on the swatch still selects it — the input is inside the
   <label> — so behaviour is unchanged; this is purely a visual cue.
   ============================================================ */
.wcp-variant-swatch input[type="radio"].wcp-variant-radio {
  display: block !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  flex: none !important;
  margin: 2px auto !important;
  padding: 0 !important;
  border: 2px solid #c8b8a8 !important;
  border-radius: 6px !important;          /* rounded square, not a circle */
  background: #fff !important;
  box-shadow: none !important;
  cursor: pointer !important;
  position: relative !important;
  vertical-align: middle !important;
  transition: border-color .15s ease, background-color .15s ease !important;
}
.wcp-variant-swatch input[type="radio"].wcp-variant-radio:hover {
  border-color: #A0785A !important;
}
.wcp-variant-swatch input[type="radio"].wcp-variant-radio:checked {
  border-color: #A0785A !important;
  background: #A0785A !important;
}
/* white check mark when selected */
.wcp-variant-swatch input[type="radio"].wcp-variant-radio:checked::after {
  content: "" !important;
  position: absolute !important;
  left: 4px !important;
  top: 1px !important;
  width: 4px !important;
  height: 8px !important;
  border: solid #fff !important;
  border-width: 0 2px 2px 0 !important;
  border-radius: 1px !important;
  transform: rotate(45deg) !important;
}
.wcp-variant-swatch input[type="radio"].wcp-variant-radio:focus-visible {
  outline: 2px solid #A0785A !important;
  outline-offset: 2px !important;
}

/* ============================================================
   v4.5.7 — Hint spacing + magnifier icon visibility
   ============================================================ */
@media (max-width: 768px) {
  /* "(Up to 12 names)" — centre it and pull it up under the heading */
  .wcp-group-label,
  .wcp-mobile-scroll .wcp-group-label {
    margin-bottom: 3px !important;
  }
  .wcp-zone-hint,
  .wcp-mobile-scroll .wcp-zone-hint {
    text-align: center !important;
    width: 100% !important;
    margin: 0 auto 8px !important;
  }
  /* tighten the gap between the "Title" selector row and its
     "i.e., Dad, Daddy, ..." hint */
  .wcp-modes,
  .wcp-mobile-scroll .wcp-modes {
    margin-bottom: 4px !important;
  }
  .wcp-mode-hint,
  .wcp-mobile-scroll .wcp-mode-hint {
    margin: 0 0 8px !important;
  }
}

/* Magnifier button: the icon strokes use currentColor, and the theme was
   overriding the button's colour so the glass rendered dark-on-dark and
   looked like an empty circle. Force white strokes and a stronger scrim.
   Also guarantee it sits above the Fabric canvas and stays tappable. */
.wcp-zoom-btn {
  color: #fff !important;
  background: rgba(0,0,0,.55) !important;
  z-index: 20 !important;
  pointer-events: auto !important;
  width: 38px !important;
  height: 38px !important;
}
.wcp-zoom-btn svg { color: #fff !important; overflow: visible !important; }
.wcp-zoom-btn svg circle,
.wcp-zoom-btn svg path {
  stroke: #fff !important;
  fill: none !important;
}
.wcp-zoom-btn:hover { background: rgba(0,0,0,.7) !important; }

/* ============================================================
   v4.5.8 — Real magnification in the zoom overlay
   Previously the image was capped at max-width:88vw / max-height:80vh,
   so on a phone (where the preview is already full-width) the "zoom"
   view was actually NARROWER than the preview behind it — no
   magnification at all. Now the image is sized as a percentage of a
   scrollable stage, so 2x really is twice the width, and the customer
   can drag/scroll around to inspect their personalisation.
   ============================================================ */
.wcp-zoom-overlay.wcp-zoom-open {
  display: flex !important;
  padding: 0 !important;
  gap: 0 !important;
}
.wcp-zoom-stage {
  position: absolute !important;
  inset: 0 !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  cursor: grab !important;
  display: flex !important;
}
.wcp-zoom-overlay .wcp-zoom-img {
  display: block !important;
  width: 200%!important;          /* overridden inline by the zoom controls */
  height: auto !important;
  max-width: none !important;     /* the old caps are what blocked zooming */
  max-height: none !important;
  /* margin:auto centres the image on both axes when it is smaller than the
     stage, and — unlike justify-content — still lets you scroll all the way
     to the top/left when it is larger. */
  margin: auto !important;
  flex: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  cursor: grab !important;
}
/* Zoom controls removed in v4.6.1 — magnification is a fixed 2x. */
.wcp-zoom-overlay .wcp-zoom-close { z-index: 4 !important; }
.wcp-zoom-overlay .wcp-zoom-caption {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 6px !important;
  text-align: center !important;
  margin: 0 !important;
  font-size: .72rem !important;
  z-index: 3 !important;
  pointer-events: none !important;
}

/* ============================================================
   v4.7.1 — Confirmation image on phones
   The mobile rule pinned .wcp-conf-photo to a 200px-tall box while the
   base rule uses object-fit:cover, so a tall product mockup was cropped
   to a horizontal slice through the middle (head and hem cut off). The
   customer's whole point here is to check their design, so show the
   entire snapshot at its natural proportions instead.
   ============================================================ */
@media (max-width: 700px) {
  .wcp-conf-photo {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 12px !important;
    background: #f4ede4 !important;
    border-radius: 10px 10px 0 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  .wcp-conf-photo img {
    width: 100% !important;
    height: auto !important;
    max-height: 62vh !important;   /* keep the buttons reachable */
    object-fit: contain !important;
    border-radius: 8px !important;
    display: block !important;
    margin: 0 auto !important;
  }
}

/* v4.11.2 — Thread color selection feedback
   The selected swatch now shows a bronze ring (.wcp-opt-selected, styled
   above) AND the chosen colour name appears in the section header, so the
   customer gets immediate confirmation without having to type text first. */
.wcp-color-chosen {
  font-size: .8rem;
  font-weight: 600;
  color: #A0785A;
  margin-left: 8px;
}
.wcp-color-chosen::before {
  content: "✓ ";
}

/* v4.13.0 — Button-style font picker (Block / Script) */
.wcp-font-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.wcp-font-btn {
  flex: 1 1 auto;
  min-width: 110px;
  padding: 12px 16px;
  border: 1.5px solid #d8ccbe;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: border-color .12s, background .12s, transform .08s;
  text-align: center;
}
.wcp-font-btn:hover { border-color: #A0785A; transform: scale(1.02); }
.wcp-font-btn-active {
  border-color: #A0785A !important;
  background: #faf5ec !important;
  box-shadow: 0 0 0 2px rgba(160,120,90,.25);
}
.wcp-font-btn-demo,
.wcp-font-btn-label {
  font-family: inherit;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: #3c2f24;
  line-height: 1.2;
}

/* v4.16.0 — Name + Initials zone (Workflow B) */
.wcp-ni-initials-row {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 4px;
}
.wcp-ni-init-input {
  text-transform: uppercase;
}
.wcp-optional-tag {
  font-size: .78rem;
  color: #9a8a78;
  font-weight: 500;
  margin-left: 4px;
}
.wcp-ni-color-group { margin-top: 10px; }
.wcp-ni-color-select { max-width: 340px; }