.fce-root{
  --fce-ink:#1a1a1a;
  --fce-muted:#6b6b6b;
  --fce-panel-bg:#faf7f0;
  --fce-panel-bg-alt:#ffffff;
  --fce-border:#e5ddc8;
  --fce-accent:#F9CC78;
  --fce-accent-dark:#B8842E;
  --fce-accent-light:#FDE8C0;
  --fce-mat-green:#1f3d33;
  --fce-mat-line:#2c5645;
  font-family: 'Space Grotesk', sans-serif;
  color:var(--fce-ink);
  display:block;
  margin-top:30px;
}
.fce-builder{
  display:grid;
  grid-template-columns: 1fr 1.25fr; /* ~44/56 split, closer to balanced than the old fixed 420px sidebar */
  gap:28px;
  align-items:start;
}
@media (max-width:880px){ .fce-builder{ grid-template-columns:1fr; } }

/* ---------- ART CARD ---------- */
/* Desktop: the slot must not introduce its own box, or it becomes the
   sticky card's containing block with ~zero height to stick within,
   which silently kills the sticky behavior. Mobile overrides this below,
   where a real box is actually needed (scroll-position placeholder). */
.fce-art-slot{ display:contents; }
.fce-art-card{
  border-radius:28px; display:flex; align-items:center; justify-content:center;
  background: repeating-linear-gradient(0deg, var(--fce-mat-line) 0 1px, transparent 1px 40px), repeating-linear-gradient(90deg, var(--fce-mat-line) 0 1px, transparent 1px 40px), var(--fce-mat-green);
  border:1px solid rgba(0,0,0,0.08); overflow:hidden;
  position:sticky; top:24px;
  aspect-ratio:3/4;  /* portrait on desktop */
  width:100%;
  max-height:calc(100vh - 64px); /* never taller than the viewport, aspect-ratio shrinks width to match */
  box-shadow:0 12px 30px rgba(0,0,0,0.12);
}
@media (max-width:880px){
  .fce-art-slot{ display:block; position:relative; }
  .fce-art-card{
    /* Default mobile state: a normal in-flow block, like an ordinary
       product image at the top of the page. It only becomes a floating
       mini-preview once JS detects it has scrolled out of view (see
       .fce-floating below) — this rule alone must NOT make it float
       permanently. */
    position:static;
    aspect-ratio:4/5; /* portrait on mobile too, per latest direction — not square */
    max-height:none;
  }
  .fce-art-card.fce-floating{
    position:fixed;
    top:78px; right:12px;
    width:200px; height:250px; /* 4:5 */
    aspect-ratio:4/5;
    border-radius:18px;
    z-index:60;
    box-shadow:0 8px 22px rgba(0,0,0,0.28);
  }
  .fce-art-card.fce-floating .fce-art-tag{ display:none; }
  .fce-art-card.fce-floating .fce-art-inner{ padding:8px; }
}
.fce-art-inner{ position:relative; width:100%; padding:36px 20px 30px; display:flex; flex-direction:column; align-items:center; }
.fce-art-tag{ font-family:'IBM Plex Mono', monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(243,239,230,.7); align-self:flex-start; margin:0 0 8px 8px; }
.fce-art-stack{ position:relative; width:100%; max-width:420px; aspect-ratio:1080/1080; transition:transform .2s ease; }
.fce-art-stack svg{ width:100%; height:100%; display:block; }
.fce-missing{ color:#eee; font-size:13px; text-align:center; padding:40px 10px; }

/* ---------- PANEL ---------- */
.fce-panel{ display:flex; flex-direction:column; gap:26px; }
.fce-field{ }
.fce-label{ display:flex; justify-content:space-between; align-items:baseline; font-size:13px; font-weight:600; margin-bottom:10px; color:var(--fce-ink); }
.fce-picked{ font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--fce-accent-dark); font-weight:400; }
.fce-chip-row, .fce-swatch-row{ display:flex; flex-wrap:wrap; gap:8px; }
.fce-chip{ background:var(--fce-panel-bg); border:1px solid var(--fce-border); color:var(--fce-ink); padding:9px 15px; border-radius:999px; font-size:13.5px; cursor:pointer; }
.fce-chip.active{ background:var(--fce-accent); border-color:var(--fce-accent); color:#1a1a1a; font-weight:600; }
.fce-seg{ display:inline-flex; background:var(--fce-panel-bg); border-radius:999px; padding:4px; border:1px solid var(--fce-border); }
.fce-seg button{ border:none; background:transparent; color:var(--fce-ink); padding:9px 20px; border-radius:999px; font-size:13.5px; cursor:pointer; }
.fce-seg button.active{ background:var(--fce-accent); color:#1a1a1a; font-weight:600; }
.fce-tabs{ display:flex; gap:8px; margin-bottom:14px; }
.fce-tab{ flex:1; background:var(--fce-panel-bg); border:1px solid var(--fce-border); color:var(--fce-ink); padding:12px 8px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; }
.fce-tab.active{ box-shadow:inset 0 0 0 2px var(--fce-accent-dark); background:#fff; }
.fce-subpanel{ background:var(--fce-panel-bg); border:1px solid var(--fce-border); border-radius:14px; padding:16px; display:flex; flex-direction:column; gap:12px; }

/* Preset color swatches (fixed choices) */
.fce-swatch{ width:38px; height:38px; border-radius:50%; cursor:pointer; border:2px solid transparent; box-shadow:0 0 0 1px rgba(0,0,0,0.15) inset; }
.fce-swatch.active{ border-color:var(--fce-accent-dark); box-shadow:0 0 0 1px rgba(0,0,0,0.15) inset, 0 0 0 3px var(--fce-accent-light); }

/* "Custom color" trigger swatches — permanent rainbow gradient so it reads
   as "tap to pick any color", not as a reflection of a current selection.
   The actual <input type=color> sits invisibly on top to catch the click. */
.fce-swatch.custom{
  position:relative; overflow:hidden;
  background: conic-gradient(from 180deg, #ff0000, #ffae00, #fff400, #4dff00, #00fff2, #0033ff, #b300ff, #ff0000);
  border:2px solid var(--fce-border);
}
.fce-swatch.custom input[type=color]{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; border:none; padding:0; cursor:pointer;
  -webkit-appearance:none; appearance:none;
}

.fce-mix-toggle{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--fce-muted); }
.fce-mix-toggle input{ accent-color:var(--fce-accent-dark); width:16px; height:16px; }
.fce-mix-controls{ display:none; flex-direction:column; gap:12px; margin-top:10px; padding-top:12px; border-top:1px dashed var(--fce-border); }
.fce-mix-controls.show{ display:flex; }
.fce-mix-row{ display:flex; align-items:center; gap:10px; font-size:12.5px; flex-wrap:wrap; }
.fce-mix-row label{ color:var(--fce-muted); }

/* Mix & match swatches — these DO need to reflect the actual chosen color,
   so they're forced to a visible, appropriately-sized tile via CSS reset +
   JS keeps their background-color in sync on every change (see
   syncColorSwatch in configurator.js) — some themes' global form-control
   CSS strips native color-input rendering entirely, so we don't rely on it. */
.fce-mix-row input[type=color]{
  -webkit-appearance:none; appearance:none;
  width:36px; height:36px; border-radius:8px;
  border:2px solid var(--fce-border); padding:0; cursor:pointer;
  background-color:#ccc;
}
.fce-mix-row input[type=color]::-webkit-color-swatch-wrapper{ padding:0; }
.fce-mix-row input[type=color]::-webkit-color-swatch{ border:none; border-radius:6px; }

.fce-note{ font-size:11px; color:var(--fce-muted); }
.fce-upload{ border:1.5px dashed var(--fce-border); border-radius:14px; padding:16px; text-align:center; color:var(--fce-muted); font-size:12.5px; cursor:pointer; background:var(--fce-panel-bg); }
.fce-upload.has-file{ border-color:var(--fce-accent-dark); color:var(--fce-ink); }
.fce-upload input{ display:none; }
.fce-accessory-row{ display:flex; flex-direction:column; gap:10px; }
.fce-accessory-item{ display:flex; align-items:center; justify-content:space-between; background:var(--fce-panel-bg); border:1px solid var(--fce-border); border-radius:8px; padding:12px 14px; font-size:13px; }
.fce-accessory-item select{ background:#fff; color:var(--fce-ink); border:1px solid var(--fce-border); border-radius:6px; padding:5px 8px; }
.fce-mod{ font-family:'IBM Plex Mono', monospace; color:var(--fce-accent-dark); font-size:12px; }
.fce-qty{ display:inline-flex; align-items:center; border:1px solid var(--fce-border); border-radius:999px; background:var(--fce-panel-bg); }
.fce-qty button{ background:none; border:none; color:var(--fce-ink); width:38px; height:38px; font-size:18px; cursor:pointer; }
.fce-qty span{ min-width:38px; text-align:center; font-family:'IBM Plex Mono', monospace; }
.fce-qty input#fce-qty-val{
  width:56px; text-align:center; border:none; background:none; color:var(--fce-ink);
  font-family:'IBM Plex Mono', monospace; font-size:14px; -moz-appearance:textfield;
}
.fce-qty input#fce-qty-val::-webkit-outer-spin-button,
.fce-qty input#fce-qty-val::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.fce-price-box{ background:var(--fce-panel-bg-alt); border:1px solid var(--fce-border); border-radius:14px; padding:18px 20px; display:flex; flex-direction:column; gap:6px; }
.fce-price-line{ display:flex; justify-content:space-between; font-size:12.5px; color:var(--fce-muted); font-family:'IBM Plex Mono', monospace; }
.fce-price-line.fce-total{ color:var(--fce-ink); font-size:20px; font-family:'Space Grotesk',sans-serif; font-weight:700; padding-top:10px; margin-top:6px; border-top:1px solid var(--fce-border); }
.fce-price-line.fce-total span:last-child{ color:var(--fce-accent-dark); }
.fce-notes{ width:100%; background:var(--fce-panel-bg); border:1px solid var(--fce-border); border-radius:14px; color:var(--fce-ink); padding:12px 14px; font-family:inherit; font-size:13px; resize:vertical; }
.fce-cta-row{ display:flex; gap:12px; flex-wrap:wrap; }
.fce-cta{ flex:1; min-width:180px; text-align:center; padding:15px 18px; border-radius:999px; border:none; font-size:14.5px; font-weight:700; cursor:pointer; }
.fce-cta-email{ background:var(--fce-accent); color:#1a1400; }
.fce-cta-whatsapp{ background:#2f5f4c; color:#fff; }
.fce-modal-overlay{ position:fixed; inset:0; background:rgba(20,15,5,.55); display:none; align-items:center; justify-content:center; padding:20px; z-index:9999; }
.fce-modal-overlay.show{ display:flex; }
.fce-modal{ background:#fff; border:1px solid var(--fce-border); border-radius:20px; max-width:440px; width:100%; padding:28px; max-height:88vh; overflow-y:auto; color:var(--fce-ink); }
.fce-modal label{ font-size:12px; color:var(--fce-muted); display:block; margin:14px 0 6px; }
.fce-modal input{ width:100%; background:var(--fce-panel-bg); border:1px solid var(--fce-border); border-radius:8px; color:var(--fce-ink); padding:11px 12px; }
.fce-modal-close{ float:right; background:none; border:none; color:var(--fce-muted); font-size:20px; cursor:pointer; }
.fce-modal-send{ margin-top:22px; width:100%; padding:14px; border-radius:999px; border:none; background:var(--fce-accent); color:#1a1400; font-weight:700; cursor:pointer; }
.fce-modal-send:disabled{ opacity:0.6; cursor:default; }