/* =========================================================================
 * Digicopy Print Engine Pro — Frontend v27
 * Design system Digicopy: navy/azul/dourado, MuseoModerno + Jost + IBM Plex
 * Mono, marcas de corte, cantos retos. Sem identidade visual concorrente.
 * ========================================================================= */

.dcppe-engine{
  --ink:#1E1A4D; --navy:#2B1573; --blue:#3D36B7;
  --brand:#4F3BE0; --brand-dark:#3D2BC4; --brand-soft:#EEEBFC;
  --gold:#B8912A; --gold-bright:#C9A227;
  --paper:#FFFFFF; --paper-dim:#F6F5FB;
  --line:#E7E4F2; --ink-500:#6E6A85; --ink-900:#26224A;
  --wa:#12A150;
  --r-sm:8px; --r:12px; --r-lg:18px;
  --sh-sm:0 1px 3px rgba(31,20,90,.06);
  --sh:0 6px 20px rgba(31,20,90,.08);
  font-family:'Jost',sans-serif; font-weight:300;
  color:var(--ink-900); width:100%;
}
.dcppe-engine *{box-sizing:border-box}
.dcppe-engine h3,.dcppe-engine h4{font-family:'MuseoModerno',sans-serif;letter-spacing:-.01em}

.dcppe-engine-section{clear:both;width:100%;display:block;margin:0}

.dcppe-waiting{
  border:1px dashed var(--line); background:var(--paper-dim);
  color:var(--ink-500); padding:22px 24px; font-size:13px;
}
.dcppe-engine.is-idle{display:none}
.dcppe-wait-var{
  border:1px dashed var(--gold); background:var(--paper-dim);
  padding:20px 24px; font-size:13.5px; color:var(--ink-500); line-height:1.7;
}

/* =========================================================
 * LAYOUT PRINCIPAL — configurador + resumo sticky
 * ========================================================= */
.dcppe-x{
  display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:0;
  border:1px solid var(--line); background:var(--paper);
  position:relative;
}
.dcppe-x::before,.dcppe-x::after{
  content:''; position:absolute; width:14px; height:14px; pointer-events:none; z-index:2;
}
.dcppe-x::before{top:-1px;left:-1px;border-top:1px solid var(--gold);border-left:1px solid var(--gold)}
.dcppe-x::after{bottom:-1px;right:-1px;border-bottom:1px solid var(--gold);border-right:1px solid var(--gold)}

.dcppe-x-main{min-width:0}
.dcppe-x-side{border-left:1px solid var(--line);background:var(--paper-dim);min-width:0}

/* ---------- cabeçalho ---------- */
.dcppe-x-head{padding:30px 34px 24px;border-bottom:1px solid var(--line)}
.dcppe-kicker{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold); display:block; margin-bottom:12px;
}
.dcppe-x-head h3{margin:0 0 10px;font-size:26px;line-height:1.15;font-weight:600;color:var(--ink)}
.dcppe-x-head p{margin:0;font-size:14px;line-height:1.7;color:var(--ink-500);max-width:56ch}

/* ---------- chips de configuração ---------- */
.dcppe-config{
  padding:18px 34px; border-bottom:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:8px; align-items:center; background:var(--paper);
}
.dcppe-config strong{
  font-family:'IBM Plex Mono',monospace; font-size:10px; text-transform:uppercase;
  letter-spacing:.1em; color:var(--ink-500); font-weight:400; margin-right:6px;
}
.dcppe-config span{
  border:1px solid var(--line); background:var(--paper-dim);
  padding:7px 12px; font-size:12px; color:var(--ink-900);
  display:inline-flex; align-items:center; gap:7px;
}
.dcppe-dot{
  display:inline-block;width:11px;height:11px;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.18); flex:0 0 auto;
}

/* =========================================================
 * GRUPOS DE OPÇÕES (add-ons, cores, tamanhos)
 * ========================================================= */
.dcppe-optgroups{padding:26px 34px;border-bottom:1px solid var(--line);background:var(--paper)}
.dcppe-optgroup + .dcppe-optgroup{margin-top:26px}
.dcppe-optgroup-label{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase;
  letter-spacing:.1em; color:var(--ink); font-weight:500; display:block; margin-bottom:14px;
}
.dcppe-optgroup-label small{
  font-family:'Jost',sans-serif; text-transform:none; letter-spacing:0;
  color:var(--ink-500); font-weight:300; margin-left:8px; font-size:12px;
}
.dcppe-opts{display:flex;flex-wrap:wrap;gap:10px}

.dcppe-opt{
  position:relative; display:inline-flex; flex-direction:column; align-items:center;
  gap:8px; border:1px solid var(--line); background:var(--paper);
  padding:12px 14px; cursor:pointer; transition:.15s; min-width:96px; max-width:100%;
}
.dcppe-opt:hover{border-color:var(--gold)}
.dcppe-opt.is-on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.dcppe-opt input{position:absolute;opacity:0;pointer-events:none}
.dcppe-opt-name{font-size:12.5px;font-weight:400;color:var(--ink-900);line-height:1.3;text-align:center}
.dcppe-opt-name small{display:block;font-size:11px;color:var(--ink-500);margin-top:3px}
.dcppe-opt em{
  font-style:normal; font-family:'IBM Plex Mono',monospace; font-size:11px;
  color:var(--gold); white-space:nowrap;
}
.dcppe-opt-img{width:64px;height:64px;object-fit:cover;border:1px solid var(--line);display:block}

/* swatch de cor — círculo estilo e-commerce */
.dcppe-opt-circle{
  width:38px;height:38px;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.14); display:block;
}
.dcppe-opt.is-on .dcppe-opt-circle{
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.14),0 0 0 3px var(--paper),0 0 0 4px var(--ink);
}

.dcppe-opt-check{
  position:absolute; top:8px; right:8px; width:18px; height:18px;
  border:1px solid var(--line); background:var(--paper); border-radius:50%;
  display:flex; align-items:center; justify-content:center; transition:.15s;
}
.dcppe-opt.is-on .dcppe-opt-check{background:var(--gold);border-color:var(--gold)}
.dcppe-opt.is-on .dcppe-opt-check::after{
  content:''; width:5px; height:9px; border:solid #fff; border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg) translate(-1px,-1px);
}
.dcppe-opt-conflict{opacity:.35;cursor:not-allowed}

/* =========================================================
 * TABELA DE QUANTIDADE — cards clicáveis
 * ========================================================= */
.dcppe-x-qtylabel{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase;
  letter-spacing:.1em; color:var(--ink); font-weight:500;
  padding:26px 34px 0; background:var(--paper);
}
.dcppe-tiers{
  padding:16px 34px 30px; display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; background:var(--paper);
}
.dcppe-tier{
  appearance:none; position:relative; background:var(--paper);
  border:1px solid var(--line); padding:18px 16px; cursor:pointer;
  text-align:left; transition:.15s; font-family:inherit;
}
.dcppe-tier:hover{border-color:var(--gold);background:var(--paper-dim)}
.dcppe-tier.is-selected{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.dcppe-tier.is-selected::after{
  content:'✓'; position:absolute; right:12px; top:12px;
  width:20px; height:20px; background:var(--gold); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:11px;
}
.dcppe-tier-b{
  display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:9.5px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--gold);
  border:1px solid var(--line); padding:3px 7px; margin-bottom:10px;
  max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.dcppe-tier-q{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-500);margin-bottom:6px}
.dcppe-tier-u{
  font-family:'MuseoModerno',sans-serif; font-size:24px; line-height:1;
  font-weight:600; color:var(--ink); margin-bottom:6px;
}
.dcppe-tier-u small{
  font-family:'IBM Plex Mono',monospace; font-size:10px;
  color:var(--ink-500); font-weight:400; margin-left:2px;
}
.dcppe-tier-total{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink-500)}
.dcppe-tier-calc{font-size:11px;color:var(--ink-500);margin-top:6px}

/* =========================================================
 * RESUMO STICKY (coluna direita)
 * ========================================================= */
.dcppe-x-summary{position:sticky;top:24px;padding:30px 26px}
.dcppe-x-kicker{
  font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--gold); display:block; margin-bottom:16px;
}
.dcppe-x-qtyline{
  font-size:14px; color:var(--ink-500); padding-bottom:16px;
  border-bottom:1px solid var(--line); margin-bottom:16px;
}
.dcppe-x-qtyline b{
  font-family:'MuseoModerno',sans-serif; font-size:20px;
  color:var(--ink); font-weight:600; margin-right:4px;
}
.dcppe-x-recap{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:18px}
.dcppe-x-recap span{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--ink-500);
  border:1px solid var(--line); background:var(--paper); padding:4px 8px;
}
.dcppe-x-price{display:flex;align-items:baseline;gap:4px;margin-bottom:6px}
.dcppe-x-unit{
  font-family:'MuseoModerno',sans-serif; font-size:38px; line-height:1;
  font-weight:700; color:var(--ink);
}
.dcppe-x-price em{font-style:normal;font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-500)}
.dcppe-x-total{font-size:13px;color:var(--ink-500);margin-bottom:10px}
.dcppe-x-total b{color:var(--ink-900);font-weight:500}
.dcppe-x-econ{
  font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-500);
  border-top:1px dashed var(--line); padding-top:12px; margin-bottom:14px;
}
.dcppe-x-econ b{color:var(--gold)}
.dcppe-x-days,.dcppe-x-min{
  font-family:'IBM Plex Mono',monospace; font-size:11px;
  padding:9px 12px; margin-bottom:12px; border:1px dashed var(--line);
  background:var(--paper); color:var(--ink-500);
}
.dcppe-x-min{border-color:#C08A84;color:#8A3A32}
.dcppe-x-custom{margin-bottom:16px}
.dcppe-x-custom b{
  display:block; font-family:'MuseoModerno',sans-serif; font-size:17px;
  color:var(--ink); font-weight:600; margin-bottom:6px;
}
.dcppe-x-cm{display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--gold);margin-bottom:8px}
.dcppe-x-custom p{font-size:13px;line-height:1.65;color:var(--ink-500);margin:0}

.dcppe-wa-button{
  display:flex; align-items:center; justify-content:center; gap:10px;
  background:var(--wa); color:#fff; text-decoration:none;
  padding:16px 22px; font-size:11.5px; font-weight:500;
  text-transform:uppercase; letter-spacing:.1em; transition:.18s;
  border:1px solid var(--wa); text-align:center; line-height:1.3;
}
.dcppe-wa-button:hover{background:#0F7A40;border-color:#0F7A40;color:#fff}
.dcppe-wa-button i{font-style:normal;font-family:'IBM Plex Mono',monospace}
.dcppe-x-note{
  display:block; font-family:'IBM Plex Mono',monospace; font-size:10.5px;
  color:var(--ink-500); line-height:1.6; margin-top:14px; text-align:center;
}

/* =========================================================
 * OBSERVAÇÕES, MODIFICADORES, IMAGEM
 * ========================================================= */
.dcppe-note{
  margin:0 34px 26px; background:var(--paper-dim); border:1px dashed var(--gold);
  padding:14px 16px; color:var(--ink-900); font-size:13px; line-height:1.65;
}
.dcppe-mods{
  margin:0 34px 22px; background:var(--paper-dim); border:1px solid var(--line);
  padding:12px 16px; color:var(--ink-500); font-size:12.5px; line-height:1.6;
}
.dcppe-mods strong{color:var(--ink)}
.dcppe-matrix-image{padding:22px 34px 0;background:var(--paper)}
.dcppe-matrix-image img{width:100%;max-height:320px;object-fit:cover;border:1px solid var(--line);display:block}
.dcppe-empty,.dcppe-card-empty{
  padding:30px 34px; color:var(--ink-500); background:var(--paper); line-height:1.7; font-size:13.5px;
}
.dcppe-empty strong{color:var(--ink)}

/* =========================================================
 * MOCKUP / PALCO DA ARTE
 * ========================================================= */
.dcppe-stage-host{padding:26px 34px 0;background:var(--paper)}
.dcppe-stage{position:relative;overflow:hidden;border:1px solid var(--line);background:var(--paper-dim);user-select:none}
.dcppe-stage-base,.dcppe-stage-htmlbase{display:block;width:100%}
.dcppe-stage-logo{position:absolute;cursor:move;transform-origin:center}
.dcppe-stage-handle{
  position:absolute; right:-7px; bottom:-7px; width:16px; height:16px;
  background:var(--gold); border:1px solid #fff; cursor:nwse-resize;
}
.dcppe-stage-area{position:absolute;border:1px dashed rgba(184,145,42,.75);pointer-events:none}
.dcppe-stage-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;padding:14px 0 0;font-size:12px;color:var(--ink-500)}
.dcppe-stage-upload{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  border:1px solid var(--ink); color:var(--ink); background:transparent;
  padding:10px 16px; font-size:10.5px; text-transform:uppercase; letter-spacing:.1em;
  font-family:'Jost',sans-serif; transition:.15s;
}
.dcppe-stage-upload:hover{background:var(--ink);color:var(--paper)}
.dcppe-stage-file{position:absolute;opacity:0;width:0;height:0}
.dcppe-stage-remove,.dcppe-stage-clear{
  border:0; background:none; cursor:pointer; font-family:'IBM Plex Mono',monospace;
  font-size:11px; color:var(--ink-500); text-decoration:underline; padding:0;
}
.dcppe-stage-remove:hover,.dcppe-stage-clear:hover{color:var(--gold)}
.dcppe-stage-size{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--gold)}
.dcppe-logo-foil{filter:sepia(1) saturate(2.4) hue-rotate(3deg) brightness(1.05)}
.dcppe-paint-shine{mix-blend-mode:screen}
.dcppe-paint-deep{mix-blend-mode:multiply}

/* =========================================================
 * MODO SIMPLES / COMPACTO
 * ========================================================= */
.dcppe-simple{
  border:1px solid #dfe5f0; background:#fff; padding:22px 24px;
  overflow:hidden; box-shadow:0 10px 28px rgba(20,43,105,.07);
}
.dcppe-simple > .dcppe-optgroups{
  margin:0 -24px 20px; padding:20px 24px; background:#fff;
  border-top:1px solid #e8edf5; border-bottom:1px solid #e8edf5;
}
.dcppe-simple .dcppe-optgroup{background:#fff}
.dcppe-simple .dcppe-opts{gap:12px}
.dcppe-simple .dcppe-opt{
  background:#fff; border-color:#dbe3ef; min-height:66px;
  box-shadow:0 2px 8px rgba(20,43,105,.05);
}
.dcppe-simple .dcppe-opt:hover{
  background:#f8faff; border-color:var(--brand);
  box-shadow:0 5px 14px rgba(20,43,105,.09);
}
.dcppe-simple .dcppe-opt.is-on{
  background:#edf3ff; border-color:var(--brand);
  box-shadow:0 0 0 1px var(--brand),0 5px 14px rgba(21,57,183,.12);
}
.dcppe-simple .dcppe-opt.is-on .dcppe-opt-name{color:#132d83;font-weight:500}
.dcppe-simple .dcppe-opt-check{background:#fff;border-color:#d5deec}
.dcppe-simple .dcppe-opt.is-on .dcppe-opt-check{background:var(--brand);border-color:var(--brand)}
.dcppe-simple-head{
  font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase;
  letter-spacing:.1em; color:var(--ink-500); margin-bottom:12px;
}
.dcppe-simple-sum{font-size:14px;color:var(--ink-900);line-height:1.7}
.dcppe-compact-empty{padding:18px 0;color:var(--ink-500);font-size:13px}

/* =========================================================
 * LOOP / CATÁLOGO
 * ========================================================= */
.dcppe-from-price{display:inline-block;font-size:11px;color:var(--ink-500)}
.dcppe-from-price b{font-family:'MuseoModerno',sans-serif;font-weight:600;font-size:13px;color:var(--gold)}
.dcppe-price-note{font-size:12px;color:var(--ink-500)}
.dcppe-loop-button{background:transparent;color:var(--ink)}

.dcppe-quote-product .single_add_to_cart_button,
.dcppe-quote-product button[name="add-to-cart"]{display:none}
.dcppe-external-hidden{display:none}

.dcppe-debug{
  margin:0 34px 22px; padding:12px 14px; border:1px dashed var(--line);
  background:var(--paper-dim); color:var(--ink-500); font-size:12px;
}
.dcppe-debug summary{cursor:pointer;font-weight:500;color:var(--ink)}
.dcppe-debug ul{margin:8px 0 12px 18px}

/* =========================================================
 * RESPONSIVO
 * ========================================================= */
@media(max-width:1100px){
  .dcppe-x{grid-template-columns:1fr}
  .dcppe-x-side{border-left:0;border-top:1px solid var(--line)}
  .dcppe-x-summary{position:static}
}
@media(max-width:860px){
  .dcppe-tiers{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .dcppe-x-head,.dcppe-config,.dcppe-optgroups,.dcppe-stage-host{padding-left:18px;padding-right:18px}
  .dcppe-x-qtylabel{padding-left:18px;padding-right:18px}
  .dcppe-tiers{padding-left:18px;padding-right:18px}
  .dcppe-note,.dcppe-mods,.dcppe-debug{margin-left:18px;margin-right:18px}
  .dcppe-x-summary{padding:24px 18px}
  .dcppe-x-head h3{font-size:22px}
  .dcppe-x-unit{font-size:32px}
  .dcppe-opt{min-width:80px;padding:10px 12px}
  .dcppe-empty,.dcppe-card-empty{padding:22px 18px}
}
@media (prefers-reduced-motion: reduce){
  .dcppe-engine *{transition:none;animation:none}
}

/* =========================================================================
 * SKIN "LOJA GRANDE" v3.1 — configurador no estilo e-commerce moderno
 * ========================================================================= */
.dcppe-x{ border:none; border-radius:var(--r-lg); box-shadow:var(--sh); overflow:hidden; }
.dcppe-x::before, .dcppe-x::after{ display:none; }
.dcppe-x-side{ background:var(--paper-dim); }

.dcppe-kicker, .dcppe-x-kicker{ color:var(--brand); }
.dcppe-x-head h3{ color:var(--ink); }

/* chips de config */
.dcppe-config span{ border-radius:999px; border-color:var(--line); }

/* opções: cards arredondados com sombra ao selecionar */
.dcppe-opt{ border-radius:var(--r); box-shadow:var(--sh-sm); }
.dcppe-opt:hover{ border-color:var(--brand); }
.dcppe-opt.is-on{ border-color:var(--brand); box-shadow:0 0 0 2px var(--brand-soft), var(--sh-sm); }
.dcppe-opt.is-on .dcppe-opt-circle{ box-shadow:inset 0 0 0 1px rgba(0,0,0,.14),0 0 0 3px #fff,0 0 0 4px var(--brand); }
.dcppe-opt em{ color:var(--brand); }
.dcppe-opt-check{ border-radius:50%; }
.dcppe-opt.is-on .dcppe-opt-check{ background:var(--brand); border-color:var(--brand); }
.dcppe-opt-img{ border-radius:var(--r-sm); }

/* cards de quantidade: arredondados, seleção vibrante */
.dcppe-tier{ border-radius:var(--r); box-shadow:var(--sh-sm); }
.dcppe-tier:hover{ border-color:var(--brand); }
.dcppe-tier.is-selected{ border-color:var(--brand); box-shadow:0 0 0 2px var(--brand-soft), var(--sh-sm); }
.dcppe-tier.is-selected::after{ background:var(--brand); border-radius:0 var(--r) 0 var(--r); }
.dcppe-tier-b{ border-radius:999px; color:var(--brand); border-color:var(--line); }
.dcppe-tier-u{ color:var(--ink); }

/* resumo sticky: bloco destacado */
.dcppe-x-unit{ color:var(--brand); }
.dcppe-x-econ b{ color:var(--brand); }
.dcppe-x-recap span{ border-radius:999px; }

/* botão WhatsApp: pílula com sombra */
.dcppe-wa-button{ border-radius:999px; box-shadow:var(--sh-sm); text-transform:none; font-size:14px; font-weight:500; letter-spacing:.02em; }
.dcppe-wa-button:hover{ box-shadow:var(--sh); transform:translateY(-1px); }

/* avisos e caixas arredondados */
.dcppe-note, .dcppe-mods, .dcppe-wait-var, .dcppe-waiting,
.dcppe-x-days, .dcppe-x-min, .dcppe-simple, .dcppe-matrix-image img{ border-radius:var(--r); }
.dcppe-matrix-image img{ box-shadow:var(--sh-sm); }
.dcppe-stage{ border-radius:var(--r); }
.dcppe-stage-upload{ border-radius:999px; }

/* =========================================================================
 * DIGICOPY COMMERCE UI v27
 * Visual de e-commerce para o configurador. O tema Marketplace aplica a
 * versão compacta na lateral; estas regras mantêm o mesmo sistema visual em
 * temas de terceiros.
 * ========================================================================= */
.dcppe-commerce-panel{
  --dcppe-brand:#1539b7;
  --dcppe-accent:#c7952d;
  --dcppe-wa:#1539b7;
  font-family:Inter,Arial,sans-serif;
}
.dcppe-commerce-panel .dcppe-x{
  border:1px solid #e4e9f4;
  border-radius:16px;
  overflow:hidden;
  box-shadow:0 12px 34px rgba(20,43,105,.09);
}
.dcppe-commerce-panel .dcppe-x-head h3,
.dcppe-commerce-panel .dcppe-x-unit{
  font-family:Manrope,Inter,Arial,sans-serif;
}
.dcppe-commerce-panel .dcppe-opt,
.dcppe-commerce-panel .dcppe-tier{
  border-radius:10px;
  box-shadow:none;
  background-color:#fff;
}
.dcppe-commerce-panel .dcppe-opt.is-on,
.dcppe-commerce-panel .dcppe-tier.is-selected{
  border-color:var(--dcppe-brand);
  background-color:#edf3ff;
  box-shadow:0 0 0 1px var(--dcppe-brand);
}
.dcppe-commerce-panel .dcppe-simple,
.dcppe-commerce-panel .dcppe-simple > .dcppe-optgroups,
.dcppe-commerce-panel .dcppe-simple .dcppe-optgroup{
  background-color:#fff;
}
.dcppe-commerce-panel .dcppe-wa-button{
  background:var(--dcppe-brand);
  border-color:var(--dcppe-brand);
  border-radius:10px;
  text-transform:none;
  letter-spacing:0;
  font-weight:800;
}
.dcppe-commerce-panel .dcppe-wa-button:hover{
  background:#0d257e;
  border-color:#0d257e;
}