:root{
  /* Tokens alinhados ao Frontnovo (Zazul?) ? uso gradual no shell */
  --zazule-radius: 1rem;
  --zazule-bg: oklch(1 0 0);
  --zazule-fg: #333333;
  --zazule-heading: #174A4F;
  --zazule-primary: oklch(0.74 0.13 198);
  --zazule-muted-fg: #666666;
  --zazule-border: oklch(0.91 0.005 80);
  --zazule-sand: oklch(0.97 0.012 80);
  --zazule-sand-deep: oklch(0.92 0.022 80);
  --zazule-shadow-card: 0 1px 0 rgba(255,255,255,0.6) inset, 0 18px 38px -22px rgba(20, 30, 60, 0.25);
  --zazule-font-sans: "Inter", "Myriad Pro", Arial, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --zazule-success: #15803d;
  --zazule-success-hover: #166534;
  --zazule-success-fg: #ffffff;

  /* largura TOTAL do quadrinho */
  --artboard-w-framed: clamp(550px, 56vw, 600px); /* desktop 550?600 */

  --frame-pad-desktop:22px;
  --frame-pad-mobile:16px;

  --artboard-shadow:0 14px 28px rgba(0,0,0,.18),0 8px 10px rgba(0,0,0,.08);
  --artboard-radius:16px;

  --frame-thickness:18px;
  --frame-stroke:#e0e0e0;
  --base-height:36px;
  --wood:#b5651d;

  --format-scale: 1;  /* PP/P um pouco menores */
  --vh-scale: 1;      /* encolhe MV/GV para caber na altura */
  --artboard-aspect: 1/1;
}

/* ── [atomti_editor] shortcode inline embed ──────────────────────────────── */
.atomti-editor-shortcode-wrap {
  width: 100%;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}
.atomti-editor-shortcode-shell {
  width: 100%;
}
.atomti-editor-shortcode-wrap .zazule-editor-shell {
  min-height: 100%;
  width: 100%;
  background: var(--zazule-sand, #faf8f3);
}

/* ===== RESPONSIVIDADE GLOBAL ===== */
/* Ajustes espec?ficos para diferentes tamanhos de tela */
@media (max-width:380px){
  :root{
    --frame-pad-desktop: 16px;
    --frame-pad-mobile: 12px;
  }
}
@media (min-width:381px) and (max-width:640px){
  :root{
    --frame-pad-desktop: 18px;
    --frame-pad-mobile: 14px;
  }
}
@media (min-width:641px) and (max-width:1024px){
  :root{
    --frame-pad-desktop: 20px;
    --frame-pad-mobile: 16px;
  }
}
/* Mobile: entre 280px e 350px - suporta at? iPhone SE */
@media (max-width:640px){
  :root{ 
    --artboard-w-framed: clamp(280px, 90vw, 350px); 
    --safe-padding: clamp(8px, 2vw, 16px);
  }
}

/* Tablet */
@media (min-width:641px) and (max-width:1024px){
  :root{ 
    --artboard-w-framed: clamp(350px, 60vw, 500px); 
  }
}

*{box-sizing:border-box}
body.atomti-cp-editor-active,
body.atomti-editor-standalone{
  margin:0;
  background: linear-gradient(180deg, var(--zazule-sand) 0%, var(--zazule-sand-deep) 100%);
  color:var(--zazule-fg);
  font-family:var(--zazule-font-sans);
  overflow-x: hidden; /* Prevenir scroll horizontal */
  min-width: 280px; /* Largura m?nima suportada */
}

/* ===== HEADER FIXO COM CARRINHO (legacy .topheader — kept for fallback only) ===== */
.topheader{
  display: none; /* uses atomti-cp-app-header instead */
}

/* Logo responsivo */
.topheader img.bricks-site-logo {
  max-width: clamp(100px, 35vw, 300px) !important;
  height: auto !important;
  object-fit: contain;
}

.topheader h1{
  margin:0; 
  text-align:center; 
  font-weight:900;
  font-size: clamp(18px, 3.5vw, 30px);
  letter-spacing:.2px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.topheader .cart-area{
  position:absolute; 
  right: clamp(6px, 2vw, 12px);
  top:50%; 
  transform:translateY(-50%);
  display:flex; 
  align-items:center; 
  gap: clamp(4px, 1vw, 8px);
  z-index: 85; /* Garantir que aparece acima da logo */
}

.cart-btn{
  display:flex; 
  align-items:center; 
  gap: clamp(6px, 1.5vw, 10px);
  border:1px solid #e6e6e6; 
  background:#fff;
  padding: clamp(6px, 1.5vw, 10px) clamp(8px, 2vw, 14px);
  border-radius: clamp(8px, 2vw, 12px);
  cursor:pointer;
  box-shadow:0 2px 6px rgba(0,0,0,.06);
  white-space: nowrap;
  font-size: clamp(12px, 2.5vw, 16px);
}

.cart-btn i{ 
  font-size: clamp(16px, 3.5vw, 22px);
}

.cart-amount{ 
  font-weight:800; 
  font-size: clamp(12px, 2.5vw, 16px);
}

#cartDropdown{
  display:none; 
  position:absolute; 
  right: clamp(6px, 2vw, 12px);
  top:100%; 
  margin-top: clamp(6px, 1.5vw, 10px);
  background:#fff; 
  border:1px solid #ddd; 
  border-radius: clamp(8px, 2vw, 12px);
  width:min(95vw, 360px);
  max-width: calc(100vw - 20px);
  box-shadow:0 10px 30px rgba(0,0,0,.15);
  padding: clamp(10px, 2vw, 12px);
  z-index:90;
  font-size: clamp(12px, 2.5vw, 14px);
}

#cartDropdown .line{
  display:flex;
  justify-content:space-between;
  margin: clamp(4px, 1vw, 6px) 0;
  flex-wrap: wrap;
  gap: 4px;
}

#cartDropdown .total{
  display:flex;
  justify-content:space-between;
  margin-top: clamp(4px, 1vw, 6px);
  font-weight:800;
  font-size: clamp(13px, 2.8vw, 15px);
}

#cartDropdown hr{
  border:none;
  border-top:1px solid #eee;
  margin: clamp(6px, 1.5vw, 8px) 0;
}

/* MOBILE: ajustes espec?ficos */
@media (max-width:640px){
  .topheader{ 
    padding: 10px 8px;
  }
  .topheader img.bricks-site-logo {
    max-width: min(120px, 30vw) !important;
  }
}

/* EXTRA SMALL: iPhone SE, Galaxy Fold */
@media (max-width:375px){
  .topheader {
    padding: 8px 6px;
    min-height: 45px;
  }
  .cart-btn {
    padding: 5px 8px;
  }
  .cart-amount {
    display: none; /* Esconder valor em telas muito pequenas */
  }
}

/* Old separate mockup CSS removed ? rendering is now inside the carousel (ztc-* classes) */

/* ===== Content grid + below-panel (mirrors React max-w-3xl grid) ===== */
.zazule-content-grid{
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
/* Below-panel: static positioning, flows naturally in the document */
.zazule-below-panel{
  width: 100%;
  max-width: 500px;
  margin: 0px auto 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 12px max(16px, env(safe-area-inset-bottom));
  background: var(--zazule-sand, #faf8f3);
  border-radius: 10px;
}
/* Tools card: mirrors React rounded-2xl bg-card soft-shadow */
.zazule-tools-card{
  border-radius: 1rem;
  border: none;
  background: #fff;
  box-shadow: 0 2px 12px rgba(15,23,42,.06);
  padding: 8px 8px 10px;
}
/* Save-another button: primary action — full green pill */
.zazule-save-another-btn{
  display: inline-flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #8a9a3c;
  color: #000;
  border: none;
  font-family: var(--zazule-font-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity .15s ease, background .15s ease;
}
.zazule-save-another-btn:hover{ background: #7a8a34; opacity: .95; }
/* Keep old .menu-wrap selector non-sticky (fallback if still used) */
.menu-wrap.zazule-react-editor-tools{
  position: static !important;
  bottom: auto !important;
  background: transparent;
  border-top: none;
  padding: 0;
  z-index: auto;
}
/* Old inner/card selectors kept as aliases */
.zazule-react-editor-tools-inner{
  width: 100%;
  max-width: 28rem;
  margin: 0 auto;
}
.zazule-react-tools-card{
  border-radius: 1rem;
  border: 1px solid var(--zazule-border);
  background: var(--zazule-bg);
  box-shadow: var(--zazule-shadow-card);
  padding: 8px 8px 10px;
}
.zazule-react-bottom-bar{
  margin: 0;
}
.zazule-react-bottom-bar-track{
  display: flex;
  align-items: stretch;
  gap: 6px;
  padding: 4px 6px 6px;
}
.zrb-btn{
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 3px;
  border: none;
  border-radius: 1rem;
  background: transparent;
  color: rgba(51,51,51,.78);
  font-family: var(--zazule-font-sans);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.15;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.zrb-btn:hover{
  background: var(--zazule-sand);
  color: var(--zazule-fg);
}
.zrb-btn:active{
  transform: scale(0.98);
}
.zrb-btn:focus-visible{
  outline: 2px solid var(--zazule-primary);
  outline-offset: 2px;
}
/* Locked state — shown for magnet tiles and kits (no accessory choice needed) */
.zrb-btn.is-locked{
  opacity: .38;
  cursor: not-allowed;
  pointer-events: none;
}
.zrb-btn.is-locked .zrb-icon-wrap{
  position: relative;
  display: inline-flex;
}
.zrb-btn.is-locked .zrb-icon-wrap::after{
  content: '\f023';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  font-size: .52rem;
  line-height: 1;
  position: absolute;
  top: -4px;
  right: -6px;
  color: #64748b;
  background: #f1f5f9;
  border-radius: 50%;
  padding: 1px;
}
.zrb-icon{
  font-size: 1.05rem;
  line-height: 1;
  color: var(--zazule-heading);
  opacity: 0.9;
}
.zrb-label{
  display: block;
  max-width: 100%;
  overflow: visible;
  text-overflow: clip;
  white-space: nowrap;
}
/* .zazule-react-extras / .zrb-mini removed ? Texto/Imagem/PB not used in React layout */
.zazule-react-cart-btn{
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 2px;
  padding: 10px 16px;
  border-radius: 999px;
  background: transparent;
  color: oklch(0.74 0.13 198);
  border: 1.5px solid oklch(0.74 0.13 198);
  font-family: var(--zazule-font-sans);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.zazule-react-cart-btn:hover{
  background: oklch(0.74 0.13 198 / 0.08);
  opacity: 1;
}
@media (max-width:380px){
  .zrb-btn{ padding: 6px 2px; font-size: 9.5px; }
  .zrb-icon{ font-size: 1rem; }
}

/* ===== SIZE SHEET (React-style bottom sheet) ===== */
#sizeMenu{
  position:fixed; inset:0; z-index:70;
  background:rgba(0,0,0,.35);
  display:none;
  align-items:flex-end;
  justify-content:center;
}
#sizeMenu.is-open{
  display:flex;
  animation: zazuleFadeIn .25s ease-out;
}
#sizeMenu.is-closing{
  animation: zazuleFadeOut .2s ease-in;
}
.zazule-size-sheet{
  background:#fff;
  border-radius:24px 24px 0 0;
  width:100%; max-width:680px;
  max-height:85vh;
  display:flex; flex-direction:column;
  box-shadow:0 -4px 32px rgba(0,0,0,.18);
  animation:zazuleSlideUp .3s cubic-bezier(.32,1,.22,1);
}
.zazule-size-sheet.is-closing{
  animation:zazuleSlideDown .25s cubic-bezier(.68,0,.78,0);
}
@keyframes zazuleSlideUp{
  from{ transform:translateY(100%); opacity:.6; }
  to{   transform:translateY(0);    opacity:1;  }
}
@keyframes zazuleSlideDown{
  from{ transform:translateY(0);    opacity:1;  }
  to{   transform:translateY(100%); opacity:.6; }
}
.zazule-size-handle{
  width:40px; height:6px; border-radius:3px;
  background:#e2e8f0; margin:10px auto 0;
}
.zazule-size-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 20px 10px;
}
.zazule-size-title{
  margin:0; font: 700 18px Poppins, system-ui, sans-serif; color:#0f172a;
}
.zazule-size-done-btn{
  background:#0d9488; color:#fff;
  border:none; border-radius:999px;
  padding:7px 18px; font-size:14px; font-weight:600;
  cursor:pointer; transition:background .15s;
}
.zazule-size-done-btn:hover{ background:#0f766e; }
.zazule-size-body{
  flex:1; overflow-y:auto;
  padding:0 20px 32px;
}
.zazule-size-sub{
  margin:0 0 12px; font-size:12px; color:#64748b;
}
/* ── Size group label ──────────────────────────────────────────────────── */
.zazule-size-group-label{
  margin:0 0 8px; font-size:12px; font-weight:600;
  color:#475569; letter-spacing:.03em; text-transform:none;
}
.zazule-size-group-label--mt{ margin-top:20px; }

/* ── Horizontal scroll rail ─────────────────────────────────────────────
   Each group (Quadrados / Retangulares) scrolls independently, left→right.
   Cards snap to position so partial cards are always flush.
   A subtle fade mask on the right hints that more cards are available.     */
.zazule-size-grid{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 4px 4px 12px;
  /* right-edge fade hint */
  -webkit-mask-image: linear-gradient(to right, #000 80%, transparent 100%);
  mask-image: linear-gradient(to right, #000 80%, transparent 100%);
  scrollbar-width: none;
}
.zazule-size-grid::-webkit-scrollbar{ display: none; }
/* Click-drag horizontal scroll (desktop); cursor hints */
.zazule-size-grid,
#ready-arts-cats,
#ready-arts-grid:not(.zazule-ready-arts--if),
.zazule-internal-frame-grid,
#menuScroll,
.menu{
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
}
.zazule-size-grid.zazule-hscroll-is-dragging,
#ready-arts-cats.zazule-hscroll-is-dragging,
#ready-arts-grid:not(.zazule-ready-arts--if).zazule-hscroll-is-dragging,
.zazule-internal-frame-grid.zazule-hscroll-is-dragging,
#menuScroll.zazule-hscroll-is-dragging,
.menu.zazule-hscroll-is-dragging{
  cursor: grabbing;
}
/* Remove mask when scrolled to end (JS adds class) */
.zazule-size-grid.is-end{
  -webkit-mask-image: none;
  mask-image: none;
}

.zazule-size-grid--squares,
.zazule-size-grid--rects{
  grid-template-columns: unset;
}

/* ── Each card ──────────────────────────────────────────────────────────── */
.zazule-size-card{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  width: 80px;
  border: 1.5px solid #e2e8f0;
  border-radius: 12px;
  background: #fff;
  padding: 8px 6px 6px;
  text-align: center;
  cursor: pointer;
  scroll-snap-align: start;
  transition: background .15s, border-color .15s, box-shadow .15s;
}
.zazule-size-card:hover{ background:#f0fdfa; }
.zazule-size-card.is-selected{
  border-color:#0d9488; background:#f0fdfa;
  box-shadow:0 0 0 1px #0d9488;
}
.zazule-size-icon-wrap{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:52px;
}
.zazule-size-icon-block{
  background:rgba(13,148,136,.8);
  border-radius:3px;
  box-shadow:0 1px 4px rgba(0,0,0,.18);
  min-width:8px; min-height:8px;
}
.zazule-size-card-label{
  font-size:10px; font-weight:700;
  color:#0d9488; white-space:nowrap; line-height:1.2;
}
.zazule-size-card-price{
  font-size:10px; color:#64748b; line-height:1.2;
}
.zazule-size-check{
  position:absolute; top:4px; right:4px;
  width:14px; height:14px; border-radius:50%;
  background:#0d9488; display:none;
  align-items:center; justify-content:center;
}
.zazule-size-card.is-selected .zazule-size-check{ display:flex; }
.zazule-size-check svg{ width:8px; height:8px; }
.zazule-size-loading{ padding:20px; text-align:center; color:#94a3b8; font-size:13px; }
/* "Nova pe?a" row */
.zazule-size-new-piece-row{
  display:flex; align-items:center; gap:6px;
  font-size:12px; color:#475569; cursor:pointer;
  margin-bottom:14px;
}
.zazule-size-new-piece-row input[type=checkbox]{ accent-color:#0d9488; cursor:pointer; }

/* #textPanel CSS removed -- text editing not part of React editor */

/* anima??o de entrada */
@keyframes panel-pop{
  from{ transform: translateY(6px) scale(.98); opacity: 0; }
  to{ transform: translateY(0) scale(1); opacity: 1; }
}

/* ===== Zazule ? layout coluna ?nica + pain?is ===== */
.zazule-editor-shell{
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: var(--zazule-sand, #faf8f3);
}
.zazule-editor-column{
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 20px 24px;
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.zazule-lead{
  text-align: center;
  padding: 8px 8px 4px;
}
.zazule-lead-title{
  margin: 0 0 4px;
  font: 800 1.8rem Poppins, system-ui, sans-serif;
  color: #1e293b;
}
.zazule-lead-sub{
  margin: 0;
  font: 500 0.875rem/1.35 Inter, system-ui, sans-serif;
  color: #64748b;
}
.zazule-scene{
  flex: 0 0 auto;
}

/* Cena estilo Frontnovo: título, badge de qualidade, mockup com FABs */
.zazule-scene--react{
  margin-top: 25px;
  padding: 0px 0 0px;
  border-radius: 0;
  /* background: #fff; */
  width: 100%;
  text-align: center;
}
.zazule-editor-scene-head{
  text-align: center;
  max-width: 50rem;
  margin: 0 auto 20px;
  padding: 0 8px;
}
.zazule-editor-scene-title{
  margin: 0 0 8px;
  font: 700 2.2rem Poppins, system-ui, sans-serif;
  color: var(--zazule-heading, #174a4f);
  letter-spacing: -0.02em;
}
@media (min-width: 640px) {
  .zazule-editor-scene-title {
    font-size: 3.5rem;
  }
}
.zazule-editor-scene-sub{
  margin: 0 auto;
  max-width: 30rem;
  font: 400 1.125rem/1.55 Inter, system-ui, sans-serif;
  color: #64748b;
}
.zazule-quality-pill{
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  font: 600 13px/1.3 Inter, system-ui, sans-serif;
  border: 1px solid transparent;
}
.zazule-quality-pill.is-hidden{
  display: none;
}
.zazule-quality-pill--good{
  background: rgba(34, 197, 94, 0.1);
  color: #15803d;
  border-color: rgba(34, 197, 94, 0.3);
}
.zazule-quality-pill--warn{
  background: rgba(245, 158, 11, 0.12);
  color: #92400e;
  border-color: rgba(245, 158, 11, 0.35);
}
.zazule-quality-pill--low{
  background: rgba(254, 226, 226, 0.95);
  color: #b91c1c;
  border-color: rgba(248, 113, 113, 0.55);
}
.zazule-quality-pill--excellent{
  background: rgba(138, 154, 60, 0.12);
  color: #5a6c00;
  border-color: rgba(138, 154, 60, 0.4);
}

/* .zazule-editor-frame-actions removed ? crop is accessed via FAB (bottom-right) */

.zazule-tile-stage{
  position: relative;
  padding-top: 8px;
}
.zazule-tile-fabs{
  pointer-events: none;
  position: absolute;
  inset: 0;
  z-index: 25;
}
/* FABs ? React FloatingIconButton glass style */
.zazule-tile-fabs .zazule-fab{ pointer-events: auto; }
.zazule-fab{
  position: absolute;
  width: 36px; height: 36px;
  border-radius: 50%; border: none;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 0.875rem;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  transition: background .12s ease, color .12s ease, transform .12s ease;
}
.zazule-fab:hover{ transform: scale(1.06); }
/* Danger (red ring + text, solid red on hover) */
.zazule-fab--danger{
  color: #e11d48;
  box-shadow: 0 2px 10px rgba(15,23,42,.18), 0 0 0 1px rgba(225,29,72,.3);
}
.zazule-fab--danger:hover{ background: #e11d48; color: #fff; }
/* Default / teal (ring-border + teal text, solid teal on hover) */
.zazule-fab--default{
  color: #0d9488;
  box-shadow: 0 2px 10px rgba(15,23,42,.18), 0 0 0 1px #e2e8f0;
}
.zazule-fab--default:hover{ background: #0d9488; color: #fff; }
/* Legacy alias */
.zazule-fab--primary{ color: #0d9488; box-shadow: 0 2px 10px rgba(15,23,42,.18), 0 0 0 1px #e2e8f0; }
.zazule-fab--primary:hover{ background: #0d9488; color: #fff; }
/* Positions */
.zazule-fab--tr{ top: 10px; right: 10px; }
.zazule-fab--bl{ bottom: 10px; left: 10px; }
.zazule-fab--br{ bottom: 10px; right: 10px; }

/* ===== CART SHEET — mesmo chassis que .zazule-size-sheet (Kits / Artes / Tamanho) ===== */
.zazule-size-sheet.zazule-cart-sheet{
  max-height: 90vh;
  min-height: 0;
}
.zazule-cart-body{
  flex: 1; overflow-y: auto;
  padding: 0 20px 16px !important;
}
.zazule-cart-items{ display: grid; gap: 12px; margin-bottom: 20px; }
.zazule-cart-item{
  display: flex; align-items: center; gap: 12px;
  border: 1.5px solid #e2e8f0; border-radius: 16px;
  background: #fff; padding: 12px;
}
.zazule-cart-item-thumb{
  width: 72px; height: 72px; flex-shrink: 0;
  border-radius: 10px; background: #f5ead2;
  display: grid; place-items: center; overflow: hidden;
}
.zazule-cart-item-thumb-img{
  width: 100%; height: 100%; object-fit: cover;
}
/* Printed internal frame preview in cart */
.zazule-cart-if{
  width: 100%;
  height: 100%;
  position: relative;
  background: var(--zif-frame, #ccc);
  border-radius: inherit;
  overflow: hidden;
}
.zazule-cart-if__photo{
  position: absolute;
  inset: 12%;
  border-radius: 4px;
  overflow: hidden;
}
.zazule-cart-if__photo .zazule-cart-item-thumb-img{
  border-radius: 2px;
}
.zazule-cart-item-no-photo{
  font-size: 10px; color: #94a3b8; font-weight: 500;
}
.zazule-cart-item-info{ flex: 1; }
.zazule-cart-item-name{
  font-size: 13px; font-weight: 600; color: #0d9488; margin-bottom: 2px;
}
.zazule-cart-item-meta{ font-size: 11px; color: #64748b; line-height: 1.4; }
.zazule-cart-item-price{
  font-size: 13px; font-weight: 600; color: #0d9488; margin-top: 3px;
}
.zazule-cart-item-low-quality{
  font-size: 11px; font-weight: 500; color: #e11d48; margin-top: 3px;
}
.zazule-cart-item-remove{
  flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; border: none;
  background: transparent; color: #e11d48; cursor: pointer;
  display: grid; place-items: center;
  transition: background .12s;
}
.zazule-cart-item-remove:hover{ background: rgba(225,29,72,.08); }
.zazule-cart-empty{
  padding: 40px 0; text-align: center; font-size: 13px; color: #94a3b8;
}
/* Frete */
.zazule-cart-frete{
  border-radius: 16px; background: #fdf8ed;
  padding: 12px 14px; margin-bottom: 12px;
}
.zazule-cart-frete-label{
  display: block; font-size: 11px; font-weight: 500; color: #64748b; margin-bottom: 8px;
}
.zazule-cart-frete-row{ display: flex; gap: 8px; }
.zazule-cart-cep-input{
  flex: 1; border: 1.5px solid #e2e8f0; border-radius: 999px;
  padding: 8px 16px; font-size: 13px; outline: none;
  background: #fff; transition: border-color .15s;
}
.zazule-cart-cep-input:focus{ border-color: #0d9488; }
.zazule-cart-cep-btn{
  border: none; border-radius: 999px;
  background: #0d9488; color: #fff;
  padding: 8px 16px; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background .15s; white-space: nowrap;
}
.zazule-cart-cep-btn:hover{ background: #0f766e; }
.zazule-cart-frete-result{
  font-size: 12px; color: #475569; margin-top: 8px;
}
/* Quality warning */
.zazule-cart-quality-warn{
  border-radius: 12px; background: rgba(245,208,90,.35);
  padding: 8px 12px; font-size: 12px; color: #78350f;
  margin-bottom: 12px;
}
/* WC cart section divider */
.zazule-cart-section-label{
  font-size: 10px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: #94a3b8;
  padding: 8px 0 4px;
}
.zazule-cart-item--wc .zazule-cart-item-thumb{ background: #f1f5f9; }
/* ===== CART SUCCESS MODAL ===== */
/* ===== Upsell bottom-sheet (replaces old cart-success modal) ===== */
.zazule-upsell-overlay{
  position: fixed;
  inset: 0;
  z-index: 200000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.zazule-upsell-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(15,23,42,.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: zazuleFadeIn .2s ease;
}
@keyframes zazuleFadeIn{ from{ opacity:0; } to{ opacity:1; } }
.zazule-upsell-sheet{
  position: relative;
  width: 100%;
  max-width: 560px;
  background: #fff;
  border-radius: 24px 24px 0 0;
  padding: 32px 26px max(36px,env(safe-area-inset-bottom));
  max-height: 88vh;
  overflow-y: auto;
  animation: zazuleSlideUp .3s cubic-bezier(.32,1,.22,1);
}
@keyframes zazuleSlideUp{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }
.zazule-upsell-close{
  position: absolute;
  top: 16px; right: 18px;
  width: 38px; height: 38px;
  border: none; border-radius: 50%;
  background: #f1f5f9; color: #475569;
  font-size: 24px; line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.zazule-upsell-title{
  margin: 0 0 8px;
  font: 800 1.65rem Inter, system-ui, sans-serif;
  color: var(--zazule-heading, #174a4f);
}
.zazule-upsell-sub{
  margin: 0 0 22px;
  font: 400 1.15rem/1.5 Inter, system-ui, sans-serif;
  color: #64748b;
}
.zazule-upsell-list{
  display: flex; flex-direction: column; gap: 14px;
  margin-bottom: 24px;
}
.zazule-upsell-loading{
  text-align: center; padding: 20px; color: #94a3b8;
}
.zazule-upsell-row{
  display: flex; align-items: center; gap: 16px;
  padding: 16px 18px;
  background: #f8f5ef;
  border-radius: 14px;
}
.zazule-upsell-row-thumb{
  width: 72px; height: 72px; flex-shrink: 0;
  border-radius: 10px; overflow: hidden;
  background: #ede8df;
  display: flex; align-items: center; justify-content: center;
}
.zazule-upsell-row-thumb img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.zazule-upsell-row-info{ flex: 1; min-width: 0; }
.zazule-upsell-row-name{
  margin: 0 0 4px;
  font: 600 1.25rem Inter, system-ui, sans-serif;
  color: #1e293b;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.zazule-upsell-row-price{
  font: 500 1.05rem Inter, system-ui, sans-serif;
  color: var(--zazule-heading, #174a4f);
}
.zazule-upsell-add-btn{
  flex-shrink: 0;
  padding: 10px 20px;
  border: none; border-radius: 999px;
  background: #f1f5f9; color: #334155;
  font: 600 1.05rem Inter, system-ui, sans-serif;
  cursor: pointer;
  transition: background .15s;
}
.zazule-upsell-add-btn:hover{ background: #e2e8f0; }
.zazule-upsell-add-btn.is-added{
  background: #dcfce7; color: #15803d;
  pointer-events: none;
}
.zazule-upsell-cart-btn{
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 18px 24px;
  border: none; border-radius: 14px;
  background: var(--zazule-olive, #8a9a3c);
  color: #fff;
  font: 700 1.3rem Inter, system-ui, sans-serif;
  cursor: pointer;
  transition: opacity .15s;
  margin-bottom: 14px;
}
.zazule-upsell-cart-btn:hover{ opacity: .9; }
.zazule-upsell-skip{
  display: block; width: 100%;
  padding: 10px;
  border: none; background: transparent;
  font: 400 1.05rem Inter, system-ui, sans-serif;
  color: #94a3b8;
  cursor: pointer;
  text-align: center;
  text-decoration: underline;
}
.zazule-upsell-skip:hover{ color: #64748b; }
.zazule-cart-success-btn--secondary:hover{ background: #e2e8f0; }

/* Footer (sticky at bottom of sheet) */
.zazule-cart-footer{
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 20px max(14px, env(safe-area-inset-bottom));
  border-top: 1.5px solid #e2e8f0;
  background: #fff;
}
.zazule-cart-footer-info{
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.zazule-cart-count-line{ font-size: 11px; color: #64748b; }
.zazule-cart-subtotal{
  font-size: 17px; font-weight: 700; color: #0d9488;
}
.zazule-cart-est-row{
  flex-basis: 100%;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  line-height: 1.35;
  text-align: right;
}
.zazule-cart-checkout-btn{
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 12px 16px; border-radius: 999px; border: none;
  background: #4a7c59; color: #fff;
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: opacity .15s;
}
.zazule-cart-checkout-btn:hover{ opacity: .9; }
.zazule-cart-checkout-btn:disabled{ opacity: .55; cursor: not-allowed; }
.zazule-cart-add-another-btn{
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 11px 16px;
  border-radius: 999px; border: 1.5px solid oklch(0.74 0.13 198);
  background: transparent; color: oklch(0.74 0.13 198);
  font: 600 1rem var(--zazule-font-sans, sans-serif);
  cursor: pointer; transition: background .15s, color .15s;
}
.zazule-cart-add-another-btn:hover{
  background: oklch(0.74 0.13 198 / 0.08);
}
.zazule-cart-checkout-link{
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; padding: 15px 16px;
  border-radius: 999px; border: none;
  background: #8a9a3c; color: #fff;
  font: 700 1.1rem var(--zazule-font-sans, sans-serif);
  text-decoration: none;
  cursor: pointer; transition: background .15s;
}
.zazule-cart-checkout-link:hover{ background: #7a8a34; color: #fff; }
.zazule-cart-checkout-link:disabled{ opacity: .65; cursor: not-allowed; }
.zazule-cart-close-btn{
  width: 32px; height: 32px; border-radius: 50%; border: none;
  background: #f1f5f9; color: #475569;
  display: grid; place-items: center; cursor: pointer;
  flex-shrink: 0;
  padding: 0;
}
.zazule-cart-close-btn:hover{ background: #e2e8f0; }

/* Modal de recorte (Cropper.js) ? z-index alto para ficar acima do WP/admin/tema */
.zazule-crop-overlay{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100050;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(15, 23, 42, 0.55);
}
.zazule-crop-overlay.is-open{
  display: flex;
}
.zazule-crop-backdrop{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: auto;
}
.zazule-crop-dialog{
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: min(720px, 96vw);
  max-height: min(92vh, 880px);
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.3);
  pointer-events: auto;
}
.zazule-crop-close-x{
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 5;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background .15s;
}
.zazule-crop-close-x:hover{
  background: rgba(255, 255, 255, 0.32);
}
.zazule-crop-head{
  background: #1e293b;
  color: #fff;
  padding: 14px 40px 14px 16px;
  text-align: center;
}
.zazule-crop-headline{
  margin: 0;
  font: 500 0.875rem/1.35 Inter, system-ui, sans-serif;
}
.zazule-crop-stage{
  flex: 1 1 auto;
  width: 100%;
  height: min(420px, calc(100vh - 200px));
  min-height: 220px;
  max-height: min(58vh, 560px);
  background: #000;
  display: block;
  position: relative;
  overflow: hidden;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}
.zazule-crop-image{
  display: block;
  width: 100%;
  max-width: 100%;
  max-height: 100%;
  opacity: 0;
}
.zazule-crop-footer{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-top: 1px solid var(--zazule-border);
  background: #fff;
}
.zazule-crop-zoom{
  flex: 1;
  min-width: 120px;
  accent-color: oklch(0.74 0.13 198);
}
.zazule-crop-btn{
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  font: 600 0.875rem Inter, system-ui, sans-serif;
  cursor: pointer;
}
.zazule-crop-btn--primary{
  background: oklch(0.74 0.13 198);
  color: #fff;
}
.zazule-crop-btn--secondary{
  background: #e2e8f0;
  color: #334155;
}
.zazule-crop-btn--ghost{
  background: transparent;
  color: oklch(0.55 0.13 198);
}

.zazule-card{
  background: #fff;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.08);
  box-shadow: 0 8px 28px rgba(20,20,30,.08);
}

/* (stale #sizeMenu center-override removed ? bottom-sheet version above is canonical) */

.zazule-panel-overlay{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 85;
  background: rgba(15,23,42,.45);
  align-items: flex-end;
  justify-content: center;
  padding: 12px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
}
.zazule-panel-overlay.is-open{
  display: flex;
  animation: zazuleFadeIn .25s ease-out;
}
.zazule-panel-overlay.is-closing{
  animation: zazuleFadeOut .2s ease-in;
}
@keyframes zazuleFadeIn{
  from{ opacity: 0; }
  to{ opacity: 1; }
}
@keyframes zazuleFadeOut{
  from{ opacity: 1; }
  to{ opacity: 0; }
}
.zazule-panel-overlay.is-open{ display: flex; }
.zazule-panel-overlay.is-open .zazule-panel-sheet,
.zazule-panel-overlay.is-open .zazule-size-sheet{
  animation: zazuleSlideUp .3s cubic-bezier(.32,1,.22,1);
}
.zazule-panel-overlay.is-closing .zazule-panel-sheet,
.zazule-panel-overlay.is-closing .zazule-size-sheet{
  animation: zazuleSlideDown .25s cubic-bezier(.68,0,.78,0);
}
.zazule-panel-sheet{
  width: 100%;
  max-width: 480px;
  max-height: 82vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 24px 24px 0 0;
  box-shadow: 0 -8px 40px rgba(0,0,0,.2);
}
.zazule-panel-head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #e2e8f0;
  font: 800 15px Poppins, system-ui, sans-serif;
  color: #0f172a;
}
.zazule-panel-close{
  border: 0;
  background: #f1f5f9;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
}
.zazule-panel-body{
  padding: 12px 14px 18px;
  overflow-y: auto;
}
.zazule-hint{
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 10px 12px;
  border-radius: 12px;
  background: #f1f5f9;
  font: 500 11px/1.45 Inter, system-ui, sans-serif;
  color: #334155;
  margin-bottom: 10px;
}
.zazule-hint[hidden]{ display: none !important; }

/* ===== ACCESSORY / ARTS / KITS — same bottom sheet geometry as #sizeMenu ===== */
.zazule-panel-overlay.zazule-panel-overlay--bottom-sheet{
  background: rgba(0, 0, 0, .35);
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}
.zazule-size-sheet.zazule-size-sheet--accessories,
.zazule-size-sheet.zazule-size-sheet--arts,
.zazule-size-sheet.zazule-size-sheet--kits{
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
  max-height: 85vh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -4px 32px rgba(0, 0, 0, .18);
}
#zazule-panel-accessories .zazule-size-sheet--accessories .zazule-size-body{
  padding-bottom: max(32px, calc(20px + env(safe-area-inset-bottom, 0px)));
}
.zazule-acc-info-banner{
  display: flex; gap: 8px; align-items: flex-start;
  padding: 10px 12px; border-radius: 14px;
  background: #f1f5f9;
  font-size: 11px; line-height: 1.5; color: #334155;
  margin-bottom: 12px;
}
.zazule-acc-info-banner[hidden]{ display: none !important; }
.zazule-acc-info-icon{
  width: 16px; height: 16px; flex-shrink: 0;
  margin-top: 1px; color: #0d9488;
}
/* list of rows */
.zazule-acc-list{ display: grid; gap: 12px; }
.zazule-acc-row{
  display: flex; gap: 16px; align-items: center;
  width: 100%; text-align: left;
  padding: 12px; border-radius: 16px;
  border: 1.5px solid #e2e8f0; background: #fff;
  cursor: pointer; transition: background .15s, border-color .15s;
}
.zazule-acc-row:hover:not(:disabled){ background: #f0fdfa; }
.zazule-acc-row.is-on{
  border-color: #0d9488; background: #f0fdfa;
}
.zazule-acc-row:disabled{
  opacity: .4; cursor: not-allowed;
  filter: grayscale(.5);
  pointer-events: none;
}
.zazule-acc-row:disabled .zazule-acc-price{
  color: #94a3b8;
  text-decoration: line-through;
}
.zazule-acc-thumb{
  width: 72px; height: 72px; flex-shrink: 0;
  border-radius: 12px; background: #fdf8ed;
  display: grid; place-items: center; overflow: hidden;
}
.zazule-acc-thumb img,
.zazule-acc-thumb svg{
  width: 100%; height: 100%; object-fit: contain; padding: 8px;
}
.zazule-acc-info{ flex: 1; }
.zazule-acc-name{
  font-size: 13px; font-weight: 600; color: #0d9488; margin-bottom: 2px;
}
.zazule-acc-desc{
  font-size: 11px; color: #64748b; line-height: 1.4;
}
.zazule-acc-price{
  font-size: 11px; font-weight: 600; color: #0d9488; margin-top: 4px;
}
.zazule-acc-check{
  width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%;
  background: #0d9488; display: none;
  place-items: center;
}
.zazule-acc-check svg{ width: 10px; height: 10px; }
.zazule-acc-row.is-on .zazule-acc-check{ display: grid; }
/* keep old .zazule-acc-opt alias so JS still works if referenced */
.zazule-acc-opt{ display: none; }

#ready-arts-filter{
  width: 100%;
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  font: 600 13px Inter, system-ui, sans-serif;
}

/* Arts body (inside .zazule-size-body) */
.zazule-size-body.zazule-panel-body--arts{
  padding: 0 20px max(24px, calc(20px + env(safe-area-inset-bottom, 0px)));
  overflow-y: auto;
  min-height: 0;
  flex: 1 1 auto;
}
.zazule-size-sub.zazule-arts-sub{
  margin: 0 0 12px;
  padding: 0;
  color: #64748b;
}
/* Category pill row — horizontal scroll, no wrap */
#ready-arts-cats{
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin-bottom: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  padding-bottom: 4px;
  -webkit-mask-image: linear-gradient(to right, #000 85%, transparent 100%);
  mask-image: linear-gradient(to right, #000 85%, transparent 100%);
}
#ready-arts-cats::-webkit-scrollbar{ display: none; }
#ready-arts-cats.is-end{
  -webkit-mask-image: none;
  mask-image: none;
}
.zazule-art-cat{
  appearance: none;
  flex: 0 0 auto;
  border: 1.5px solid #e2e8f0;
  border-radius: 999px;
  background: #fff;
  color: #475569;
  font: 600 12px/1 Inter, system-ui, sans-serif;
  padding: 6px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.zazule-art-cat:hover{
  border-color: #0d9488;
  color: #0d9488;
}
.zazule-art-cat.is-active{
  background: #0d9488;
  border-color: #0d9488;
  color: #fff;
}

/* Arts grid — horizontal scroll, 3 cards visible at a time */
#ready-arts-grid{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 4px 16px;
  -webkit-mask-image: linear-gradient(to right, #000 80%, transparent 100%);
  mask-image: linear-gradient(to right, #000 80%, transparent 100%);
}
#ready-arts-grid::-webkit-scrollbar{ display: none; }
#ready-arts-grid.is-end{
  -webkit-mask-image: none;
  mask-image: none;
}
#ready-arts-grid.zazule-ready-arts--if{
  flex-direction: column;
  flex-wrap: nowrap;
  overflow-x: hidden;
  overflow-y: auto;
  align-items: stretch;
  max-height: min(52vh, 420px);
  scroll-snap-type: none;
  -webkit-mask-image: none;
  mask-image: none;
}

/* Each art card — 3 visible per view */
.ready-art-cell{
  flex: 0 0 auto;
  width: calc(33.333% - 7px);
  min-width: 90px;
  max-width: 160px;
  border: 0;
  padding: 0 0 6px;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  background: #f8fafc;
  display: flex;
  flex-direction: column;
  transition: opacity .15s, transform .12s;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  scroll-snap-align: start;
}
.ready-art-cell:hover{ opacity: .88; transform: scale(1.03); box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.ready-art-cell:active{ transform: scale(0.97); }
.ready-art-cell:disabled{ opacity: .5; cursor: wait; }
.ready-art-cell img{
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  border-radius: 14px 14px 0 0;
}
.ready-art-cell-label{
  display: block;
  font: 600 11px/1.3 Inter, system-ui, sans-serif;
  color: #475569;
  text-align: center;
  padding: 4px 6px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ready-art-empty{
  grid-column: 1 / -1;
  text-align: center;
  padding: 24px 8px;
  color: #64748b;
  font: 500 13px Inter, sans-serif;
}

/* Mobile: ~2,5 cartões / pills visíveis — metade do seguinte fica à vista (indica scroll lateral) */
@media (max-width: 640px) {
  #ready-arts-cats{
    scroll-padding-inline: max(12px, env(safe-area-inset-left, 0px)) max(12px, env(safe-area-inset-right, 0px));
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%);
  }
  #ready-arts-cats .zazule-art-cat{
    flex: 0 0 max(4.25rem, calc((100% - 20px) / 2.45));
    width: max(4.25rem, calc((100% - 20px) / 2.45));
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
  }
  #ready-arts-grid:not(.zazule-ready-arts--if){
    scroll-padding-inline: max(12px, env(safe-area-inset-left, 0px)) max(12px, env(safe-area-inset-right, 0px));
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 4%, #000 96%, transparent 100%);
  }
  #ready-arts-grid:not(.zazule-ready-arts--if) .ready-art-cell{
    flex: 0 0 max(92px, calc((100% - 20px) / 2.5));
    width: max(92px, calc((100% - 20px) / 2.5));
    min-width: 0;
    max-width: none;
    scroll-snap-align: start;
  }
  .zazule-internal-frame-grid{
    scroll-padding-inline: max(12px, env(safe-area-inset-left, 0px)) max(12px, env(safe-area-inset-right, 0px));
  }
  .zazule-internal-frame-grid .ready-art-cell{
    flex: 0 0 max(92px, calc((100% - 20px) / 2.5));
    width: max(92px, calc((100% - 20px) / 2.5));
    min-width: 0;
    scroll-snap-align: start;
  }
}

/* ── Effect cards ────────────────────────────────────────────────────────── */
.zazule-effect-preview{
  width: 100%;
  aspect-ratio: 1;
  border-radius: 14px 14px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: rgba(255,255,255,.85);
}
.zazule-effect-cell.is-selected{
  outline: 2.5px solid oklch(0.74 0.13 198);
  outline-offset: 2px;
}

/* Moldura interna (Artes prontas) */
.zazule-internal-frame-notice{
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  margin-bottom: 14px;
  border-radius: 12px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  font: 500 12px/1.45 Inter, system-ui, sans-serif;
  color: #475569;
  flex: 0 0 100%;
  width: 100%;
  box-sizing: border-box;
}
.zazule-internal-frame-notice__icon{
  flex-shrink: 0;
  color: #0d9488;
  font-size: 1.1rem;
  margin-top: 1px;
}
.zazule-internal-frame-grid{
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 6px;
  width: 100%;
}
.zazule-internal-frame-grid .ready-art-cell{
  flex: 0 0 calc(33.333% - 7px);
  min-width: 100px;
  scroll-snap-align: start;
}
.zazule-if-cell-preview{
  display: block;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 14px 14px 0 0;
  box-sizing: border-box;
}
/* Uma faixa de cor (--zif-band) + área neutra no centro */
.zazule-if-cell-preview--banded{
  padding: 12%;
  background: var(--zif-band, #ccc);
}
.zazule-if-cell-preview--banded .zazule-if-cell-preview__photo{
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  background: linear-gradient(135deg, #f5f5f0 0%, #e8e8e0 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.zazule-if-cell-preview--none{
  padding: 12%;
  background: #f1f5f9;
}
.zazule-if-cell-preview__photo--empty{
  display: block;
  width: 100%;
  height: 100%;
  min-height: 40px;
  border-radius: 8px;
  background: #fafaf8;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.zazule-if-cell.is-selected{
  outline: 2.5px solid oklch(0.74 0.13 198);
  outline-offset: 2px;
}

#zazule-kits-overlay.zazule-panel-overlay{
  z-index: 86;
}
.zazule-size-body.zazule-panel-body--kits{
  padding: 0 20px max(24px, calc(20px + env(safe-area-inset-bottom, 0px)));
  overflow-y: auto;
  min-height: 0;
  flex: 1 1 auto;
}
.zazule-kit-visual-caption{
  margin: 10px 0 0;
  font: 500 12px Inter, system-ui, sans-serif;
  color: #64748b;
}
.zazule-size-sub.zazule-kits-sub{
  margin: 0 0 14px;
  padding: 0;
  color: #64748b;
}

/* ===== Kit mode cards ===== */
.zazule-kit-mode-cards{
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.zazule-kit-mode-card{
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1.5px solid #e2e8f0;
  background: #f8fafc;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.zazule-kit-mode-card:hover{
  border-color: #0d9488;
  background: #f0fdf9;
}
.zazule-kit-mode-card.is-active{
  border-color: #0d9488;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(13,148,136,.18);
}
.zazule-kit-mode-icon{
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: #e6f7f5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #0d9488;
}
.zazule-kit-mode-card.is-active .zazule-kit-mode-icon{
  background: #0d9488;
  color: #fff;
}
.zazule-kit-mode-card > span:last-child{
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.zazule-kit-mode-card strong{
  display: block;
  font: 700 12px Inter, sans-serif;
  color: #0f172a;
}
.zazule-kit-mode-card span span{
  font: 500 11px/1.35 Inter, sans-serif;
  color: #64748b;
}

/* Warning banner (single-photo mode) */
.zazule-kit-split-warning{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
  font: 500 11px/1.45 Inter, sans-serif;
  margin-bottom: 14px;
}
.zazule-kit-split-warning svg{ flex-shrink: 0; color: #d97706; margin-top: 1px; }

/* ===== Kit list rows ===== */
.zazule-kit-list{ display: flex; flex-direction: column; gap: 10px; }
.zazule-kit-row{
  display: flex;
  gap: 12px;
  align-items: flex-start;
  width: 100%;
  padding: 14px 14px;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  background: #fff;
  cursor: default;
  text-align: left;
  transition: border-color .15s;
}
.zazule-kit-main{
  flex: 1;
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  column-gap: 14px;
  row-gap: 10px;
}
.zazule-kit-row-actions{
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  flex-shrink: 0;
  margin-left: auto;
}
.zazule-kit-meta{
  flex: 1 1 200px;
  min-width: min(100%, 160px);
}
.zazule-kit-meta strong{
  display: block;
  font: 800 14px Inter, sans-serif;
  color: #0f172a;
  margin-bottom: 2px;
}
.zazule-kit-meta span{
  font: 500 11px/1.35 Inter, sans-serif;
  color: #64748b;
  display: block;
}
.zazule-kit-meta em{
  font-style: normal;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 5px;
  font: 600 11px Inter, sans-serif;
  color: #0d9488;
  background: #f0fdf9;
  border-radius: 999px;
  padding: 2px 8px;
  border: 1px solid #d1faf4;
}
.zazule-kit-price{
  font: 800 14px Inter, sans-serif;
  color: #5a6e00;
  white-space: nowrap;
  flex-shrink: 0;
}

/* "Escolher" button per row */
.zazule-kit-choose-btn{
  flex-shrink: 0;
  appearance: none;
  border: none;
  border-radius: 999px;
  padding: 9px 18px;
  font: 700 13px Inter, sans-serif;
  cursor: pointer;
  background: #4a5e00;
  color: #fff;
  transition: background .12s, transform .1s;
  white-space: nowrap;
}
.zazule-kit-choose-btn:hover{ background: #3b4c00; }
.zazule-kit-choose-btn:active{ transform: scale(.97); }

/* Legacy kept for JS compat */
.zazule-kit-preview-wrap{ display: none; }
.zazule-kit-actions{ display: none; }
.zazule-kit-confirm-btn{ display: none; }
.zazule-kit-row.is-selected{ border-color: #0d9488; }

/* Kit row thumbnail: bounded width so large murals don’t overflow the sheet */
.zazule-kit-row > .zazule-kit-svg{
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 104px;
  max-width: 28vw;
  min-width: 56px;
}
.zazule-kit-row > .zazule-kit-svg .zazule-kit-svg__canvas{
  display: block;
  width: 100%;
  height: auto;
  max-height: 76px;
}

.zazule-combo-visual{
  display: inline-flex;
  padding: 10px;
  border-radius: 6px;
  background: linear-gradient(180deg,#e9cda1 0%,#d6b07a 55%,#b88a55 100%);
  box-shadow: 0 12px 28px rgba(20,20,30,.2), inset 0 0 0 1px rgba(255,255,255,.18);
}
.zazule-combo-grid{
  display: grid;
  gap: 2px;
  background: linear-gradient(180deg,#e9cda1 0%,#d6b07a 55%,#b88a55 100%); /* inactive cells blend with this */
  box-shadow: inset 0 0 0 1px rgba(60,40,20,.55);
}
.zazule-combo-grid.duo{ grid-template-columns: 1fr 1fr; width: 152px; height: 76px; }
.zazule-combo-grid.trio{ grid-template-columns: repeat(3,1fr); width: 180px; height: 60px; }
.zazule-combo-grid.mural{ grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; width: 104px; height: 104px; }
.zazule-combo-cell{
  min-height: 36px;
  background: #fdf8ed;
  box-shadow: inset -1px 0 0 rgba(60,40,20,.45), inset 0 -1px 0 rgba(60,40,20,.45);
}

/* ===== TILE CAROUSEL (mirrors React TileCarousel.tsx) ===== */
.ztc-viewport{
  overflow: hidden;
  /* Extra bottom space so combo wood-frame drop-shadow isn’t clipped */
  padding: 0 0 max(20px, env(safe-area-inset-bottom, 0px));
  margin: 12px 0 14px;
  width: 100%;
  position: relative;
  cursor: grab;
  /* Invisible until JS sets the correct transform — prevents layout flash */
  opacity: 0;
  transition: opacity .2s ease;
}
/* On mobile: add horizontal padding so inactive tiles peek at the sides,
   hinting the user that there are more tiles to swipe. overflow:hidden clips
   at the border-box edge, so content within the padding zone is still visible. */
@media (max-width: 640px) {
  .ztc-viewport {
    padding: 0 44px max(20px, env(safe-area-inset-bottom, 0px));
  }
}
.ztc-viewport.is-ready{
  opacity: 1;
}
.ztc-track{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: nowrap;
  gap: 20px;
  padding: 0px 0;
  min-height: 180px;
  width: max-content;
  min-width: 100%;
  will-change: transform;
  transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .18s ease;
}
/* Fading state during re-render (size switch) */
.ztc-track.is-switching{
  opacity: 0;
  transition: opacity .15s ease;
}
.ztc-track::-webkit-scrollbar{ display: none; }

/* Each slide */
.ztc-slide{
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: transform .3s ease, opacity .3s ease;
  opacity: 0.55;
  transform: scale(0.85);
}
.ztc-slide.is-active{
  transform: scale(1);
  opacity: 1;
  cursor: default;
}

/* Inner ceramic tile inside moldura/base — avoids .ztc-slide .ztc-mockup fixed 180/320px on the wrapper */
.ztc-mockup-tile{
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 4px 20px rgba(15,23,42,.12), 0 1px 3px rgba(15,23,42,.08);
  transition: width .3s ease;
}

/* Mockup container */
.ztc-mockup{
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 4px 20px rgba(15,23,42,.12), 0 1px 3px rgba(15,23,42,.08);
  transition: width .3s ease;
}
.ztc-slide .ztc-mockup{
  width: 280px;
  height: auto;     /* height derived from aspect-ratio set inline by JS */
  aspect-ratio: 1 / 1; /* default square; overridden inline for non-square tiles */
  max-height: 420px;
}
.ztc-slide.is-active .ztc-mockup{
  width: 280px;
  height: auto;
  max-height: 420px;
}
@media(max-width:360px){
  .ztc-slide .ztc-mockup{ width: 160px; max-height: 240px; }
  .ztc-slide.is-active .ztc-mockup{ width: 160px; max-height: 240px; }
  .ztc-track{ gap: 12px; padding: 10px 0 14px; }
}

/* Frame wrapper: outer shell only (tile inside holds .ztc-mockup) */
.ztc-slide .ztc-mockup--frame{
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 280px;
  height: 280px;
  padding: 12px;
  border-radius: 4px;
  background: linear-gradient(180deg,#e9cda1 0%,#d6b07a 55%,#b88a55 100%);
  box-shadow: 0 12px 24px -12px rgba(20,20,30,.45), inset 0 0 0 1px rgba(255,255,255,.18);
  overflow: hidden;
}
.ztc-slide.is-active .ztc-mockup--frame{
  width: 280px;
  height: 280px;
  padding: 12px;
  box-shadow: 0 18px 36px -14px rgba(20,20,30,.5), inset 0 0 0 1px rgba(255,255,255,.2);
}
@media(max-width:360px){
  .ztc-slide .ztc-mockup--frame{ width: 160px; height: 160px; padding: 7px; }
  .ztc-slide.is-active .ztc-mockup--frame{ width: 160px; height: 160px; padding: 7px; }
}

/* Tile inside frame: fill the padded area fully.
   width/height 100% resolves against the flex container's content box (after padding),
   so the wood border is preserved and the photo fills the remaining space. */
.ztc-slide .ztc-mockup--frame > .ztc-mockup-tile{
  width: 100%;
  height: 100%;
  flex: 1 1 auto;
  align-self: stretch;
  min-width: 0;
  min-height: 0;
  box-shadow: 0 0 0 1px rgba(60,40,20,.55), inset 0 1px 2px rgba(0,0,0,.25);
  border-radius: 2px;
}

/* Stand wrapper: no overflow clip — wooden base sits below tile */
.ztc-slide .ztc-mockup--stand{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 180px;
  overflow: visible;
  background: transparent;
  box-shadow: none;
  border-radius: 0;
}
.ztc-slide.is-active .ztc-mockup--stand{
  width: 320px;
}
.ztc-slide .ztc-mockup--stand > .ztc-mockup-tile{
  width: 100%;
  height: auto;
  flex-shrink: 0;
}
@media(max-width:360px){
  .ztc-slide .ztc-mockup--stand{ width: 100px; }
  .ztc-slide.is-active .ztc-mockup--stand{ width: 220px; }
}

.ztc-stand{
  width: 110%;
  height: 14px;
  border-radius: 3px;
  margin-top: -4px;
  background: linear-gradient(180deg,#f0d9ad 0%,#dcb579 35%,#c79657 70%,#a0743a 100%);
  box-shadow: 0 8px 16px -8px rgba(20,20,30,.5), inset 0 1px 0 rgba(255,255,255,.5);
}

/* Photo inside mockup ? block fill, no absolute so parent height resolves correctly */
.ztc-photo{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
}
/* Empty placeholder */
.ztc-empty{
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #f5ead2;
}
.ztc-empty-btn{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 18px;
  border-radius: 16px;
  background: rgba(255,255,255,.95);
  color: #0d9488;
  border: none;
  box-shadow: 0 4px 16px rgba(0,0,0,.1), 0 0 0 1px #e2e8f0;
  cursor: pointer;
  font: 600 11px Inter, system-ui, sans-serif;
}
.ztc-empty-btn i{ font-size: 18px; }
/* Ceramic gloss */
.ztc-gloss{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(115deg,
    rgba(255,255,255,.35) 0%,
    rgba(255,255,255,0) 30%,
    rgba(255,255,255,0) 70%,
    rgba(255,255,255,.18) 100%);
}

/* Delete button (X) on each slide ? glass FAB style */
.ztc-del{
  position: absolute;
  top: 8px; right: 8px;
  z-index: 10;
  width: 36px; height: 36px;
  border-radius: 50%; border: none;
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  color: #e11d48;
  box-shadow: 0 2px 10px rgba(15,23,42,.18), 0 0 0 1px rgba(225,29,72,.3);
  display: grid; place-items: center;
  cursor: pointer; font-size: 14px;
  transition: background .12s, color .12s;
}
.ztc-del:hover{ background: #e11d48; color: #fff; }

/* FABs (crop + trash) ? only on active slide */
.ztc-fabs{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}
.ztc-fabs .zazule-fab{ pointer-events: auto; }

/* Combo frame & grid (all sizing via inline JS for correct proportions) */
.ztc-combo-frame{
  position: relative;
  display: inline-block;
  flex-shrink: 0;
}
.ztc-combo-inner{
  position: relative;
}
.ztc-combo-cell{
  min-width: 0;
  min-height: 0;
}
/* Legacy combo grid classes (kept for compatibility) */
.ztc-combo-grid{ display: grid; width: 100%; height: 100%; gap: 0; background: #fdf8ed; }
.ztc-combo-grid--duo{ grid-template-columns: 1fr 1fr; }
.ztc-combo-grid--trio{ grid-template-columns: repeat(3, 1fr); }
.ztc-combo-grid--mural{ grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.zazule-size-new-piece-row{
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
  font: 600 12px/1.3 Inter, sans-serif;
  color: #334155;
  cursor: pointer;
}
.zazule-size-new-piece-row input{ accent-color: oklch(0.74 0.13 198); }
.zazule-kit-actions{
  margin-top: 14px;
  display: flex;
  justify-content: center;
}
.zazule-kit-confirm-btn{
  appearance: none;
  border: none;
  border-radius: 999px;
  padding: 12px 22px;
  font: 700 0.875rem Inter, sans-serif;
  cursor: pointer;
  background: oklch(0.74 0.13 198);
  color: #fff;
  box-shadow: 0 8px 20px rgba(31, 189, 198, 0.35);
}
.zazule-kit-confirm-btn:hover{ filter: brightness(0.96); }
.zazule-kit-row.is-selected{
  border-color: oklch(0.74 0.13 198);
  box-shadow: 0 0 0 2px rgba(31, 189, 198, 0.35);
}

#mockup-info{
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: #334155 !important;
  text-align: left !important;
  max-width: 100%;
}

@media (max-width: 640px){
  .zazule-lead-title{ font-size: 1.15rem; }
}

.screen-reader-text{
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ── Mobile layout: tiny-phone safety (≤360px) ─────────────────────────── */
/* Below-panel already 100% width. On very tiny phones just keep buttons compact. */
@media(max-width:360px){
  .zrb-btn   { padding: 8px 3px; font-size: 10.5px; }
  .zazule-editor-column{ padding: 0 12px 24px; }
}

/* ── Toast Notification ────────────────────────────────────────────────── */
.zazule-toast {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  background: var(--zazule-success, #15803d);
  color: var(--zazule-success-fg, #ffffff);
  padding: 14px 24px;
  border-radius: 8px;
  font: 600 0.9375rem var(--zazule-font-sans, sans-serif);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.15);
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 90vw;
}
.zazule-toast.is-visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.zazule-toast i {
  font-size: 1rem;
}

/* ── Accessory Button Loading State ────────────────────────────────────── */
.zrb-btn.is-loading {
  position: relative;
  pointer-events: none;
}
.zrb-btn.is-loading .zrb-icon-wrap {
  opacity: 0;
}
.zrb-btn.is-loading::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  margin: -8px 0 0 -8px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: zazule-spin 0.6s linear infinite;
}
@keyframes zazule-spin {
  to { transform: rotate(360deg); }
}