/* Overlay fullscreen editor */
.twc-overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;z-index:99999}
.twc-overlay.is-open{display:block}
.twc-editor{position:absolute;inset:0;background:#fff;border-radius:0;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.twc-editor-topbar{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid #eee;background:#fff}
.twc-topbar-left{display:flex;gap:10px;align-items:baseline}
.twc-sub{color:#6b7280;font-size:12px}
.twc-editor-body{display:grid;grid-template-columns:340px 1fr;min-height:0;flex:1}
.twc-side{border-right:1px solid #eee;display:flex;flex-direction:column;min-height:0}
.twc-side-head{padding:14px 16px;border-bottom:1px solid #f2f2f2;display:flex;justify-content:space-between;align-items:baseline}
.twc-items{padding:10px 10px 14px;overflow:auto;min-height:0}
.twc-item{border:1px solid #eee;border-radius:14px;padding:10px;margin:10px 0;cursor:pointer;display:flex;gap:10px;align-items:center}
.twc-item:hover{border-color:#d6d6d6}
.twc-item.is-active{border-color:#111}
.twc-item .twc-mini{flex:1;min-width:0}
.twc-item .twc-mini strong{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.twc-item .twc-mini .twc-sub{display:block;margin-top:2px}
.twc-item .twc-mini-badge{display:inline-flex;align-items:center;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:700}
.twc-item .twc-mini-badge.ok{background:#e9fbe9;color:#0a7a2e}
.twc-item .twc-mini-badge.idle{background:#f3f4f6;color:#374151}
.twc-mini-thumb{width:44px;height:44px;border-radius:10px;border:1px solid #eee;object-fit:cover;background:#fafafa}

/* Main */
.twc-main{min-height:0;overflow:hidden;background:#fafafa}
.twc-main-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px;padding:16px;min-height:0;height:100%}
.twc-canvas-card{background:#fff;border:1px solid #eee;border-radius:18px;padding:12px;min-height:0}
.twc-canvas-wrap{display:flex;justify-content:center;align-items:center;background:#fafafa;border:1px dashed #dadada;border-radius:14px;padding:12px;min-height:0;width:100%;aspect-ratio:1/1;max-height:calc(100vh - 220px)}
.twc-controls{overflow:auto;min-height:0;max-height:100%}
.twc-canvas-card{min-height:0}
.twc-controls{background:#fff;border:1px solid #eee;border-radius:18px;padding:14px}
.twc-row{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px}
.twc-label{font-weight:700;font-size:13px}
.twc-price{font-weight:700;color:#111}
.twc-input{width:100%;padding:12px 12px;border-radius:12px;border:1px solid #e5e7eb;background:#f3f4f6;outline:none}
.twc-input:focus{border-color:#111;background:#fff}
.twc-field{margin-bottom:10px}
.twc-split{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}
.twc-split.twc-add{margin:8px 0;grid-template-columns:repeat(3,minmax(0,1fr))}

@media (max-width: 900px){
  .twc-split.twc-add{grid-template-columns:1fr}
}
.twc-input:disabled{opacity:.65;cursor:not-allowed}
.twc-radio{display:flex;gap:10px;align-items:center;margin:6px 0;font-size:14px}
.twc-fonts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:8px}
.twc-font{border:1px solid #eee;border-radius:12px;padding:10px;cursor:pointer}
.twc-font:hover{border-color:#d6d6d6}
.twc-font.is-active{border-color:#111}

/* Dropdown/select */
.twc-select{width:100%;padding:12px 12px;border:1px solid #e6e6e6;border-radius:12px;background:#fff;font-weight:700}
.twc-select:focus{outline:none;border-color:#111;box-shadow:0 0 0 3px rgba(17,17,17,.1)}

/* Canvas bottom toolbar */
.twc-canvas-card{display:flex;flex-direction:column;gap:10px}
.twc-canvas-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid #eee;border-radius:14px;background:#fff}
.twc-canvas-toolbar__right{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}

/* Secondary toggle row */
.twc-toggle--sub{margin-top:10px}
.twc-toggle--sub .twc-toggle__btn{padding:8px 10px;font-size:13px}
.twc-colors{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.twc-color{width:22px;height:22px;border-radius:999px;border:2px solid #e5e7eb;cursor:pointer;position:relative}
.twc-color.is-active{border-color:#111}
.twc-color--picker{display:inline-flex;align-items:center;justify-content:center;background:#fff;border-style:dashed}
.twc-color--picker input{position:absolute;inset:0;opacity:0;cursor:pointer}
.twc-color--picker__plus{font-weight:900;font-size:14px;line-height:1;color:#111}
.twc-actions{display:grid;gap:10px;margin-top:14px}
.twc-btn{border:1px solid transparent;border-radius:14px;padding:12px 14px;font-weight:800;cursor:pointer}
.twc-btn{transition:transform .08s ease, box-shadow .08s ease, filter .08s ease}
.twc-btn:hover{filter:brightness(.99);box-shadow:0 8px 18px rgba(0,0,0,.08);transform:translateY(-1px)}
.twc-btn:active{transform:translateY(0);box-shadow:none}
.twc-btn-dark{background:linear-gradient(180deg,#111,#000);color:#fff}
.twc-btn-primary{background:linear-gradient(180deg,#16a34a,#0f7a36);color:#fff;border:1px solid rgba(0,0,0,.08)}
.twc-btn-ghost{background:#fff;border:1px solid #e5e7eb;color:#111}
.twc-btn-danger{background:#fff;border:1px solid #fecaca;color:#b91c1c}
.twc-btn-danger:hover{box-shadow:0 8px 18px rgba(185,28,28,.08);filter:brightness(.99);transform:translateY(-1px)}
.twc-note{margin-top:10px}

.twc-pricechip{display:inline-flex;align-items:center;justify-content:center;
  margin-left:8px;padding:2px 8px;border-radius:999px;
  font-size:11px;font-weight:900;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.25)}
.twc-btn-ghost .twc-pricechip{background:#f3f4f6;border:1px solid #e5e7eb}

.twc-side-toggle{margin-top:8px}
.twc-toggle{display:flex;gap:8px;margin-top:8px}
.twc-toggle__btn{flex:1;border:1px solid #e5e7eb;background:#fff;color:#111;
  padding:10px 12px;border-radius:14px;font-weight:900;cursor:pointer;
  transition:transform .08s ease, box-shadow .08s ease, filter .08s ease}
.twc-toggle__btn:hover{box-shadow:0 8px 18px rgba(0,0,0,.08);transform:translateY(-1px)}
.twc-toggle__btn.is-active{background:#111;color:#fff;border-color:#111}

.twc-price-summary{margin:8px 0 6px;padding:10px 10px;border-radius:16px;
  background:linear-gradient(180deg,#f8fafc,#fff);border:1px solid rgba(0,0,0,.08)}
.twc-price-summary__row{display:flex;justify-content:space-between;align-items:baseline;margin:2px 0}

/* Inline controls in cart item (classic cart) */
.twc-inline{margin-top:8px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.twc-badge{display:inline-flex;align-items:center;border-radius:999px;padding:4px 10px;font-size:12px;font-weight:800}
.twc-badge.ok{background:#e9fbe9;color:#0a7a2e}
.twc-badge.idle{background:#f3f4f6;color:#374151}
.twc-open-editor{border:1px solid #111;background:#111;color:#fff;border-radius:12px;padding:10px 12px;font-weight:800;cursor:pointer}
.twc-open-editor:hover{background:#000}
.twc-thumb{width:56px;height:56px;border-radius:14px;border:1px solid #eee;object-fit:cover}

/* Responsive */
@media (max-width: 1100px){
  .twc-editor-body{grid-template-columns:1fr}
  .twc-main-grid{grid-template-columns:1fr}
  .twc-side{max-height:240px}
  .twc-editor{inset:0;border-radius:0}
}

@media (max-width: 768px){
  .twc-editor-topbar{padding:12px 12px;gap:10px;flex-wrap:wrap}
  .twc-topbar-left{flex-wrap:wrap}
  .twc-active-title{font-size:15px}
  .twc-main-grid{padding:12px;gap:12px}
  .twc-canvas-wrap{padding:10px}
  .twc-controls{padding:12px}
  .twc-canvas-toolbar{flex-wrap:wrap}
  .twc-canvas-toolbar__right{justify-content:flex-start}
  .twc-btn{padding:11px 12px}
  .twc-side{max-height:220px}
}

@media (max-width: 520px){
  .twc-editor{inset:0}
  .twc-main-grid{padding:10px;gap:10px}
  .twc-split{grid-template-columns:1fr}
  .twc-item{padding:10px}
  .twc-mini-thumb{width:40px;height:40px}
  .twc-open-editor{width:100%;text-align:center}
}


/* Blocks cart top CTA */
.twc-cart-cta{display:inline-flex;align-items:center;gap:10px}

/* Floating action button fallback (Blocks cart async render) */
.twc-fab{
  position:fixed; right:18px; bottom:18px; z-index:100000;
  background:#111; color:#fff; border:1px solid #111;
  padding:14px 16px; border-radius:999px; font-weight:900;
  box-shadow:0 12px 30px rgba(0,0,0,.25);
  cursor:pointer;
}
.twc-fab:hover{background:#000}

.twc-surcharge{margin-top:8px;font-weight:700;color:#111;opacity:.85}

.twc-hr{border:0;border-top:1px solid rgba(0,0,0,.08);margin:18px 0}
.twc-toast{position:fixed;left:50%;top:18px;transform:translateX(-50%);z-index:100001;
  padding:10px 14px;border-radius:12px;font-weight:800;display:none;
  box-shadow:0 10px 30px rgba(0,0,0,.18);}
.twc-toast.ok{background:#16a34a;color:#fff}
.twc-toast.bad{background:#111;color:#fff}

/* Modal */
.twc-modal{position:fixed;inset:0;z-index:100002;display:none}
.twc-modal.is-open{display:block}
.twc-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.55)}
.twc-modal__panel{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(520px, calc(100vw - 32px));
  background:#fff;border-radius:18px;border:1px solid rgba(0,0,0,.08);
  box-shadow:0 26px 70px rgba(0,0,0,.35);
  overflow:hidden}
.twc-modal__head{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid rgba(0,0,0,.08)}
.twc-modal__body{padding:14px 16px}
.twc-modal__foot{padding:14px 16px;border-top:1px solid rgba(0,0,0,.08);display:flex;justify-content:flex-end;gap:10px}

.twc-choice{display:grid;gap:6px}



/* Price chip smaller & calmer */
.twc-pricechip{
  font-size:10px;
  font-weight:700;
  padding:1px 6px;
  opacity:.8;
}

/* Danger button for delete */
#twc-delete.twc-btn{
  border-color: #dc2626;
  background: #dc2626;
  color: #fff;
}
#twc-delete.twc-btn:hover{
  filter: brightness(0.95);
}

/* Topbar product title */
.twc-topbar-kicker{font-size:12px;opacity:.75;font-weight:700;letter-spacing:.02em}
.twc-active-title{font-size:16px;font-weight:800;line-height:1.2}

/* Price summary more compact */
.twc-price-summary{padding:10px 10px}
.twc-price-summary .twc-sub{font-size:11px}
.twc-price{font-size:12px}

/* Format buttons */
.twc-format{display:flex;gap:8px;align-items:center}
.twc-fbtn{
  width:38px;height:34px;border-radius:10px;
  border:1px solid #e5e7eb;background:#fff;color:#111;
  cursor:pointer;
}
.twc-fbtn:hover{background:#f9fafb}
.twc-fbtn.is-active{border-color:#111;box-shadow:0 1px 0 rgba(0,0,0,.06)}