/* Configurador 3D de balões · Modelamix. Layout do configurador de referência, com a cor de
   destaque (--accent) e as fontes vindas da configuração de cada loja. */
/* 01. Design tokens and base styles. No external dependencies. */
:root {
  color-scheme: light;
  --page: #fcfcfd;
  --surface: #ffffff;
  --text: #242426;
  --muted: #838287;
  --line: #e7e6ea;
  --accent: #8c5ac8;
  --accent-soft: color-mix(in srgb, var(--accent) 6%, #fff);
  --pink: #ffb7ca;
  --sage: #b0c3a7;
  --radius: 20px;
  /* Fontes da página (o app.js troca pelas fontes da loja, se a configuração tiver). */
  --mx-font-body: var(--font-body-family, Questrial, Arial, sans-serif);
  --mx-font-heading: var(--font-heading-family, "DM Serif Display", Georgia, serif);
  --mx-heading-weight: var(--font-heading-weight, 400);
  font-family: var(--mx-font-body);
  /* Como no tema: a Questrial só tem o peso 400, então o negrito é sintetizado pelo navegador. */
  font-synthesis: weight style;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
*, *::before, *::after { box-sizing: border-box; }
/* O atributo hidden sempre esconde, mesmo em elementos com display definido pela classe. */
[hidden] { display: none !important; }
body { margin: 0; background: var(--page); color: var(--text); font-size: 14px; }
button, input { font: inherit; }
button { cursor: pointer; color: inherit; }
button, label { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
img { display: block; max-width: 100%; user-select: none; }
h1, h2, h3, p, figure, fieldset { margin: 0; }
/* Títulos na fonte de títulos do tema, no peso dele (DM Serif Display só tem o 400). */
h1, h2, h3 { font-family: var(--mx-font-heading); font-weight: var(--mx-heading-weight); }
fieldset { min-inline-size: 0; padding: 0; border: 0; }
.visually-hidden {
  position: absolute; inline-size: 1px; block-size: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.container { width: calc(100% - 64px); max-width: 1160px; margin-inline: auto; }
.icon { display: inline-block; width: 18px; height: 18px; flex: 0 0 auto; }
.skip-link {
  position: fixed; top: 8px; left: 8px; transform: translateY(-160%); z-index: 10;
  background: #fff; padding: 12px 18px; border-radius: 10px; color: var(--accent);
}
.skip-link:focus { transform: translateY(0); }

/* 02. Top navigation. */
.site-header { height: 63px; border-bottom: 1px solid #efedf1; background: #fff; }
.header-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: inherit; }
.brand-mark { width: 45px; height: 46px; object-fit: contain; }
.brand-copy { display: flex; flex-direction: column; gap: 2px; }
.brand-name { font: var(--mx-heading-weight) 24px/1.05 var(--mx-font-heading); letter-spacing: -.7px; }
.brand-subtitle { font-size: 14px; line-height: 18px; color: #7c7a7e; }
.header-actions { display: flex; align-items: center; gap: 8px; }
.toolbar-button {
  border: 1px solid var(--line); border-radius: 999px; min-height: 43px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 18px; background: #fff; font-size: 13px; font-weight: 500;
  transition: background .16s ease, border-color .16s ease;
}
.toolbar-button .icon { width: 17px; height: 17px; }
.toolbar-button:hover { background: color-mix(in srgb, var(--accent) 4%, #fff); border-color: color-mix(in srgb, var(--accent) 30%, #fff); }

/* 03. Main two-column composition. */
.studio-form {
  display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1fr); gap: 56px;
  align-items: start; margin-top: 23px; margin-bottom: 20px;
}
.preview-column, .configuration { min-width: 0; }
.preview-card {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  border-radius: 33px; overflow: hidden; isolation: isolate; background: #d3d5d5 50% 80% / 120% auto no-repeat;
}
/* Foto do produto: só aparece se o 3D falhar (.is-failed); no carregamento fica a tela abaixo. */
.hero-photo { display: none; width: 100%; height: 100%; object-fit: cover; }
.preview-card.is-failed .hero-photo { display: block; }
.preview-loader {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
  transition: opacity .45s ease, visibility 0s linear .45s;
}
.preview-loader.is-done, .preview-card.is-failed .preview-loader { opacity: 0; visibility: hidden; pointer-events: none; }
/* Dica de interação (renderer.js): mãozinha que balança sobre o buquê ao carregar. */
.interaction-hint {
  position: absolute; z-index: 1; left: 50%; top: 56%; width: 56px; height: 56px; margin: -28px 0 0 -28px;
  pointer-events: none; transform: translateX(var(--hint-x, 0px)); filter: drop-shadow(0 4px 10px #0000003d);
  animation: interaction-hint-in .35s ease both; transition: opacity .35s ease;
}
.interaction-hint svg { width: 100%; height: 100%; display: block; }
.interaction-hint.is-leaving { opacity: 0; }
@keyframes interaction-hint-in { from { opacity: 0; } }
.loader-mark {
  width: 72px; height: 72px; object-fit: contain; filter: drop-shadow(0 6px 14px #0000001f);
  animation: loader-pulse 1.6s ease-in-out infinite;
}
@keyframes loader-pulse { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.1); opacity: 1; } }
/* Aviso de exportação (Save image / Save PDF): logo pulsando + barra até o arquivo ficar pronto. */
.export-progress {
  width: min(340px, calc(100vw - 32px)); margin: auto; padding: 30px 26px 28px; border: 0; border-radius: 22px;
  background: #fff; color: var(--text); box-shadow: 0 24px 70px #1d1d2238; text-align: center;
}
.export-progress[open] { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.export-progress::backdrop { background: #16161a40; backdrop-filter: blur(3px); }
.export-progress h2 { margin: 0; font: var(--mx-heading-weight) 20px/1.25 var(--mx-font-heading); letter-spacing: -.3px; }
.export-progress p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted); }
.export-progress .loader-track { width: 100%; background: var(--line); }
.export-progress.is-done .loader-mark { animation: none; transform: scale(1.06); opacity: 1; }
.loader-track { width: min(180px, 45%); height: 4px; border-radius: 4px; background: #ffffffb3; overflow: hidden; }
.loader-fill {
  display: block; height: 100%; border-radius: inherit; background: var(--accent);
  transform: scaleX(var(--progress, 0)); transform-origin: left; transition: transform .3s ease;
}
.preview-badge {
  position: absolute; top: 1.5%; left: 2.2%; width: 33%; min-width: 201px; min-height: 34px; height: 4.5%;
  display: flex; justify-content: center; align-items: center; padding: 7px 14px;
  background: #f8f8f9; border-radius: 100px; color: #626166;
  font-size: 11.5px; line-height: 17px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .8px; white-space: nowrap;
}
.preview-caption { text-align: center; margin-top: 21px; font-size: 14px; line-height: 20px; color: #818085; }

/* 04. Arrangement style and size options. */
.style-bar {
  min-height: 56px; padding: 5px 17px 5px 20px; display: flex;
  align-items: center; gap: 20px; border: 1px solid var(--line);
  background: var(--surface); border-radius: 15px;
}
.style-label { font-size: 14px; color: var(--muted); white-space: nowrap; }
.style-info { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.style-thumb { width: 46px; height: 44px; border-radius: 6px; object-fit: cover; }
.style-name { font-size: 14px; font-weight: 600; white-space: nowrap; }
.change-style {
  border: 1.5px solid color-mix(in srgb, var(--accent) 22%, #fff); border-radius: 999px; background: #fff;
  color: color-mix(in srgb, var(--accent) 70%, #fff); white-space: nowrap; font-size: 13px; font-weight: 500;
  padding: 8px 20px; line-height: 16px; transition: background .16s ease;
}
.change-style:hover { background: var(--accent-soft); color: var(--accent); }
.size-fieldset { margin-top: 10px; }
.section-eyebrow {
  display: block; width: 100%; border-top: 1px solid #e8e6ea; padding-top: 3px;
  margin-bottom: 11px; font-size: 12px; line-height: 16px;
  font-weight: 700; letter-spacing: 1.3px; color: #a29da5;
}
.size-grid { display: grid; grid-template-columns: repeat(var(--size-columns, 3), minmax(0, 1fr)); gap: 16px; }
.size-card {
  position: relative; min-width: 0; display: flex; flex-direction: column;
  cursor: pointer; border: 1.5px solid #e5e4e8; border-radius: 11px;
  overflow: hidden; background: #fff; transition: border-color .16s ease, box-shadow .16s ease;
}
.size-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, #fff); }
.size-card:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 .5px var(--accent); }
.size-card:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--accent) 45%, #fff); outline-offset: 3px; }
.size-card:has(input:checked) .size-name, .size-card:has(input:checked) .size-price { color: var(--accent); }
.size-photo { width: 100%; height: 121px; object-fit: cover; object-position: center; background: #dddddc; }
.size-card-info { display: flex; flex-direction: column; padding: 9px 13px 10px; }
.size-name { font-size: 14px; font-weight: 500; line-height: 20px; }
.size-price { font-size: 14px; font-weight: 700; line-height: 19px; }
.timing { margin-top: 7px; display: flex; align-items: center; gap: 5px; color: #7d7b80; font-size: 10px; line-height: 15px; white-space: nowrap; }
.timing .icon { width: 15px; height: 15px; stroke-width: 1.8; }

/* 05. Part selection. Native radios stay keyboard accessible. */
.part-fieldset { margin-top: 8px; }
.part-tabs { display: grid; grid-template-columns: repeat(var(--tab-columns, 4), minmax(0, 1fr)); border-radius: 999px; background: #f6f5f7; padding: 2px; }
.part-tab {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px;
  min-width: 0; min-height: 40px; padding: 7px 10px; border-radius: 999px;
  font-size: 14px; color: #858287; cursor: pointer; transition: background .16s ease;
}
.part-tab:hover { background: #ffffff99; }
.part-tab:has(input:checked) { background: #fff; color: #242426; font-weight: 600; box-shadow: 0 3px 13px #16161a05; }
.part-tab:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: -2px; }
.color-dot { flex: 0 0 auto; width: 18px; height: 18px; display: inline-block; border-radius: 50%; background: var(--dot, var(--pink)); box-shadow: inset 1px 1px 4px #ffffff25; }
/* Abas e chips das partes: a esfera da cor escolhida (mesma imagem e recorte dos swatches). */
.color-dot.has-image { background: var(--dot-image) 50% 50% / 128% 128% no-repeat, var(--dot, var(--pink)); box-shadow: none; }

/* 06. Glossy and metallic color palette. */
.palette-panel { position: relative; margin-top: 8px; padding: 12px 28px 32px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); }
.palette-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.palette-heading { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-width: 0; }
.palette-title { font-size: 17px; line-height: 21px; letter-spacing: -.1px; }
/* Cor marcada na aba ativa: nome + código do catálogo (metálicos ainda sem código: só o nome). */
.selected-color { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--text); font-size: 13px; line-height: 18px; font-weight: 600; }
.selected-color-code { padding: 1px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); font-size: 11px; line-height: 17px; letter-spacing: .3px; font-variant-numeric: tabular-nums; }
.selected-color-code:empty { display: none; }
/* Dica ao passar o mouse (ou focar pelo teclado) numa cor; posicionada pelo app.js. */
.swatch-tip {
  position: absolute; z-index: 5; display: grid; justify-items: center; gap: 1px; padding: 6px 10px;
  transform: translate(-50%, calc(-100% - 9px)); border-radius: 10px; background: #242426; color: #fff;
  box-shadow: 0 6px 18px #16161a26; white-space: nowrap; pointer-events: none;
  font-size: 12px; line-height: 16px; font-weight: 600;
}
/* Elementos escondidos dentro da paleta (ex.: grupo de cores que a parte ativa não usa). */
.palette-panel [hidden] { display: none; }
.swatch-tip::after { content: ""; position: absolute; top: 100%; left: var(--arrow, 50%); translate: -50% 0; border: 5px solid transparent; border-top-color: #242426; }
.swatch-tip-code { color: #ffffffb3; font-size: 10px; line-height: 13px; font-weight: 500; letter-spacing: .3px; }
.swatch-tip-code:empty { display: none; }
.part-heading { display: none; }
.custom-color { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; line-height: 21px; }
.custom-dot { width: 17px; height: 17px; }
.finish-heading { margin-top: 11px; margin-bottom: 7px; font-size: 10px; letter-spacing: 1.15px; line-height: 14px; color: #959198; text-transform: uppercase; }
.swatch-grid { display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 6px 10px; align-items: center; justify-items: center; }
.swatch { position: relative; width: min(34px, 100%); aspect-ratio: 1; cursor: pointer; display: block; border-radius: 50%; }
.swatch-disc {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  background: radial-gradient(ellipse at 27% 19%, #ffffff20, transparent 67%), var(--swatch);
  box-shadow: inset 1px 1px 3px #ffffff15, inset -1px -2px 3px #00000006;
  transition: transform .14s ease, outline-color .14s ease;
}
.swatch:hover .swatch-disc { transform: scale(1.03); }
.swatch:has(input:checked) .swatch-disc { outline: 1.5px solid var(--accent); outline-offset: 1.5px; }
.swatch:has(input:focus-visible) .swatch-disc { outline: 2px solid color-mix(in srgb, var(--accent) 60%, #000); outline-offset: 1.5px; }
.metallic-heading { display: flex; align-items: baseline; gap: 9px; margin-top: 20px; margin-bottom: 12px; }
.metallic-heading .finish-heading { margin: 0; }
.upgrade-caption { color: var(--accent); font-size: 13px; font-weight: 600; line-height: 17px; }
.swatch--metallic { width: min(36px, 100%); aspect-ratio: 1; }
.swatch--metallic .swatch-disc {
  background: linear-gradient(111deg, #ffffff22 4%, #ffffff05 38%, #00000015 74%, #ffffff17 100%), var(--swatch);
  box-shadow: inset 1px 1px 4px #ffffff25, inset -2px -2px 4px #00000013;
}
/* Linha Crystal (translúcida): quadriculado sob a cor, para o Clear não parecer o White. */
.swatch--crystal .swatch-disc {
  background: radial-gradient(ellipse at 30% 24%, #ffffffb0 0 14%, transparent 34%),
    linear-gradient(color-mix(in srgb, var(--swatch) 72%, transparent), color-mix(in srgb, var(--swatch) 72%, transparent)),
    repeating-conic-gradient(#d9dbe0 0 25%, #ffffff 0 50%) 50% / 10px 10px;
  box-shadow: inset 0 0 0 1px #00000014, inset 1px 1px 3px #ffffff40;
}
/* Esfera renderizada no swatch studio (mesmo látex e luz do 3D; metálico sai metálico). A
   esfera ocupa 79% da imagem: 128% de escala faz ela preencher o disco, sem o fundo em volta.
   O disco em CSS continua por baixo até a imagem carregar. */
.swatch.has-image .swatch-disc { background: var(--swatch-image) 50% 50% / 128% 128% no-repeat, var(--swatch); box-shadow: none; }
.swatch-cost {
  display: none; position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  white-space: nowrap; color: #fff; background: var(--accent); border-radius: 20px;
  font-size: 10px; line-height: 15px; font-weight: 600; padding: 1px 6px; pointer-events: none;
}
.swatch:has(input:checked) .swatch-cost { display: block; }
/* Espaço para a etiqueta +$3.50 (abaixo da cor marcada) não ficar sob a linha seguinte. */
.swatch-grid.metallic-grid { row-gap: 30px; padding-bottom: 22px; }

/* 07. Order summary and purchase section. */
.purchase-panel { margin-top: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; overflow: hidden; }
.summary-top { display: grid; grid-template-columns: minmax(0, 1fr) 225px; gap: 16px; padding: 15px 16px 10px; }
.product-title { font-size: 18px; letter-spacing: -.2px; line-height: 23px; margin-bottom: 4px; }
.product-description { color: #7e7b81; font-size: 14px; line-height: 20px; }
.price-table { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 3px 12px; font-size: 13px; color: #838086; }
.price-table dt, .price-table dd { margin: 0; }
.price-table dd { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.price-table .base-amount, .price-table .upgrade-amount { font-size: 14px; }
.price-table .total-label, .price-table .total-amount { padding-top: 7px; margin-top: 3px; border-top: 1px solid #e7e5e9; color: #242426; font-weight: 700; }
.price-table .total-label { font-size: 14px; }
.price-table .total-amount { font-size: 20px; line-height: 25px; letter-spacing: -.5px; }
.price-table { margin: 0; }
.checkout-area { padding: 8px 14px 12px; border-top: 1px solid #faf9fc; border-radius: 18px 18px 0 0; }
.mix-summary { display: grid; grid-template-columns: repeat(var(--chip-columns, 4), minmax(0, 1fr)); gap: 7px; width: 334px; max-width: 100%; }
.mix-chip { min-height: 49px; padding: 6px 10px 5px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; border: 1px solid #eceaef; border-radius: 6px; box-shadow: 0 2px 7px #16161a02; }
.mix-chip .color-dot { width: 20px; height: 20px; }
.mix-chip-name { font-size: 7px; line-height: 9px; letter-spacing: .25px; text-transform: uppercase; color: #aaa5ad; font-weight: 600; }
.cart-button {
  width: 100%; min-height: 44px; border: 1px solid #2b2b29; border-radius: 999px; margin-top: 34px;
  display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 18px;
  background: linear-gradient(176deg, #2c2c2a 0%, #1c1c1b 100%); color: #fff;
  box-shadow: 0 2px 7px #1411141c, inset 0 1px 1px #ffffff12;
  font-size: 16px; line-height: 20px; font-weight: 600; letter-spacing: -.15px;
  transition: background .16s ease, box-shadow .16s ease;
}
.cart-button .icon { width: 20px; height: 20px; }
.cart-button:hover { background: #373331; box-shadow: 0 3px 10px #14111426; }

/* Seletor de arranjo (popover nativo). */
.style-picker {
  width: min(680px, calc(100vw - 32px)); max-height: calc(100svh - 48px); overflow: auto;
  margin: auto; padding: 24px; border: 0; border-radius: 22px; background: #fff; color: var(--text);
  box-shadow: 0 24px 70px #1d1d2238;
}
.style-picker::backdrop { background: #16161a33; backdrop-filter: blur(3px); }
.style-picker-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.style-picker h2 { font: var(--mx-heading-weight) 24px/1.2 var(--mx-font-heading); letter-spacing: -.4px; }
.style-picker-close { width: 36px; height: 36px; border: 1px solid var(--line); border-radius: 50%; background: #fff; font-size: 20px; line-height: 1; }
.style-picker-note { margin-top: 6px; font-size: 13px; color: var(--muted); }
.style-options { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.style-option {
  width: 100%; display: flex; flex-direction: column; gap: 8px; padding: 0 0 10px; overflow: hidden;
  border: 1.5px solid #e5e4e8; border-radius: 14px; background: #fff; text-align: left; font: inherit; color: inherit;
}
.style-option img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: #eceaee; }
.style-option-name { padding-inline: 10px; font-size: 14px; font-weight: 600; }
.style-option-status { padding-inline: 10px; font-size: 11px; color: var(--muted); }
.style-option[aria-current="true"] { border-color: var(--accent); box-shadow: 0 0 0 .5px var(--accent); }
.style-option[aria-current="true"] .style-option-status { color: var(--accent); font-weight: 600; }
.style-option:not(:disabled):hover { border-color: color-mix(in srgb, var(--accent) 45%, #fff); }
.style-option:disabled { cursor: not-allowed; }
.style-option:disabled img { filter: grayscale(.35); opacity: .7; }
@media (max-width: 580px) {
  .style-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .style-picker { padding: 18px; }
}

/* Native popover honestly marks actions that require future integration. */
.prototype-note {
  width: min(430px, calc(100% - 40px)); padding: 30px; border: 1px solid var(--line);
  border-radius: 24px; background: #fff; color: var(--text); box-shadow: 0 20px 100px #16161a24;
}
.prototype-note::backdrop { background: #16161a24; backdrop-filter: blur(3px); }
.prototype-note h2 { font: var(--mx-heading-weight) 27px/1.2 var(--mx-font-heading); margin-bottom: 12px; letter-spacing: -.5px; }
.prototype-note p { font-size: 14px; line-height: 1.7; color: var(--muted); }
.prototype-note .note-close { margin-top: 22px; border: 0; border-radius: 99px; background: #242426; color: #fff; padding: 10px 22px; }
.prototype-tag { display: inline-block; padding: 5px 9px; border-radius: 99px; font-size: 10px; letter-spacing: 1px; color: var(--accent); background: var(--accent-soft); margin-bottom: 15px; text-transform: uppercase; }

/* 09. Laptop, tablet and mobile layouts. */
@media (max-width: 1190px) {
  .container { width: calc(100% - 48px); }
  .studio-form { gap: 26px; }
  .style-bar { gap: 12px; padding-inline: 14px; }
  .style-label { font-size: 12px; }
  .style-info { gap: 8px; }
  .style-thumb { width: 36px; height: 38px; }
  .style-name { font-size: 12px; }
  .change-style { padding-inline: 12px; font-size: 11px; }
  .size-grid { gap: 10px; }
  .size-photo { height: 108px; }
  .size-card-info { padding-inline: 10px; }
  .timing { font-size: 9px; gap: 4px; }
  .timing .icon { width: 13px; height: 13px; }
  .palette-panel { padding-inline: 21px; }
  .swatch-grid { gap: 7px 9px; }
  .summary-top { grid-template-columns: minmax(0, 1fr) 185px; gap: 10px; }
  .product-title { font-size: 16px; }
  .product-description { font-size: 12px; }
  .price-table { font-size: 12px; gap: 4px 8px; }
}
@media (min-width: 981px) and (max-width: 1100px) {
  .easy-prefix { display: none; }
  .style-label { max-width: 73px; white-space: normal; line-height: 16px; }
  .part-tab { gap: 6px; font-size: 12px; padding-inline: 6px; }
  .palette-panel { padding-inline: 16px; }
  .upgrade-caption { font-size: 11px; }
  .preview-caption { font-size: 12px; }
  .summary-top { grid-template-columns: minmax(0, 1fr) 175px; }
}
@media (max-width: 980px) {
  .studio-form { grid-template-columns: minmax(0, 1fr); max-width: 680px; gap: 28px; margin-top: 24px; margin-bottom: 28px; }
  .preview-card { border-radius: 29px; }
  .preview-caption { margin-top: 15px; }
  .style-bar { gap: 20px; padding-inline: 20px; }
  .style-label, .style-name { font-size: 14px; }
  .style-thumb { width: 46px; height: 44px; }
  .style-info { gap: 12px; }
  .change-style { padding-inline: 20px; font-size: 13px; }
  .size-grid { gap: 14px; }
  .size-photo { height: auto; aspect-ratio: 1.17; }
  .size-card-info { padding: 10px 13px; }
  .timing { font-size: 10px; gap: 5px; }
  .timing .icon { width: 15px; height: 15px; }
  .palette-panel { padding-inline: 26px; }
  .swatch-grid { row-gap: 8px; }
  .summary-top { grid-template-columns: minmax(0, 1fr) 225px; gap: 16px; }
  .product-title { font-size: 17px; }
  .product-description { font-size: 14px; }
  .price-table { font-size: 13px; }
}
@media (max-width: 580px) {
  .container { width: calc(100% - 28px); }
  .site-header { height: 65px; }
  .header-inner { gap: 10px; }
  .brand { gap: 6px; }
  .brand-mark { width: 36px; height: 38px; }
  .brand-name { font-size: 21px; }
  .brand-subtitle { font-size: 11px; line-height: 15px; }
  .header-actions { gap: 5px; }
  .toolbar-button { min-height: 35px; min-width: 35px; padding: 0 9px; gap: 0; }
  .toolbar-button .button-label { display: none; }
  .toolbar-button .icon { width: 16px; height: 16px; }
  .studio-form { margin-top: 17px; gap: 22px; }
  .preview-card { border-radius: 24px; }
  .preview-badge { min-width: 173px; min-height: 28px; padding: 5px 10px; font-size: 10px; letter-spacing: .65px; }
  .preview-caption { margin-top: 12px; font-size: 11px; line-height: 17px; }
  .style-bar { padding: 6px 10px; gap: 10px; border-radius: 13px; }
  .style-label { display: none; }
  .style-info { gap: 9px; }
  .style-thumb { width: 40px; height: 39px; }
  .style-name { font-size: 13px; }
  .change-style { font-size: 11px; padding: 7px 13px; }
  .section-eyebrow { font-size: 10px; letter-spacing: 1.2px; margin-bottom: 9px; }
  .size-grid { gap: 7px; }
  .size-card { border-radius: 9px; }
  .size-photo { aspect-ratio: .96; }
  .size-card-info { padding: 7px 7px 8px; }
  .size-name { font-size: 12px; line-height: 17px; }
  .size-price { font-size: 12px; line-height: 17px; }
  .timing { font-size: 9px; line-height: 13px; gap: 3px; margin-top: 5px; }
  .timing .icon { width: 12px; height: 12px; }
  .easy-prefix { display: none; }
  .part-fieldset { margin-top: 9px; }
  .part-tab { min-height: 37px; font-size: 11px; gap: 6px; padding: 6px 4px; }
  .part-tab .color-dot { width: 14px; height: 14px; }
  .palette-panel { padding: 13px 14px 30px; margin-top: 9px; border-radius: 17px; }
  .palette-title { font-size: 15px; }
  .palette-heading { column-gap: 8px; }
  .selected-color { font-size: 12px; gap: 6px; }
  .selected-color-code { font-size: 10px; padding-inline: 6px; }
  .custom-color { font-size: 12px; gap: 6px; }
  .custom-dot { width: 14px; height: 14px; }
  .finish-heading { font-size: 9px; }
  .swatch-grid { gap: 8px 7px; }
  .metallic-heading { gap: 6px; margin-top: 18px; margin-bottom: 11px; flex-wrap: wrap; }
  .upgrade-caption { font-size: 10px; line-height: 15px; }
  .swatch-cost { font-size: 8px; line-height: 12px; padding: 1px 4px; }
  .summary-top { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 14px; }
  .product-title { font-size: 16px; line-height: 21px; }
  .product-description { font-size: 12px; line-height: 17px; }
  .price-table { font-size: 12px; gap: 5px 12px; }
  .price-table .total-amount { font-size: 19px; }
  .checkout-area { padding: 9px 13px 13px; }
  .mix-summary { width: 100%; }
  .mix-chip { min-height: 47px; }
  .cart-button { font-size: 14px; min-height: 45px; margin-top: 22px; }
}
@media (max-width: 360px) {
  .swatch-grid { column-gap: 6px; }
  .part-tab { font-size: 10px; gap: 4px; }
  .part-tab .color-dot { width: 12px; height: 12px; }
  .brand-name { font-size: 19px; }
  .header-actions { gap: 4px; }
  .toolbar-button { min-width: 32px; padding-inline: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
  .loader-mark { animation: none; }
}
/* Resumo: "Save design · PDF" em destaque secundário no tom do tema (lavanda + roxo, como o
   tamanho escolhido e o "Change style"), sem competir com o Add to cart escuro; "Order details"
   na mesma linha abre a lista das cores logo abaixo. */
.summary-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; }
.save-design {
  display: inline-flex; align-items: center; gap: 7px; min-height: 34px; padding: 5px 6px 5px 12px;
  border: 1.5px solid color-mix(in srgb, var(--accent) 28%, #fff); border-radius: 999px; background: var(--accent-soft); color: var(--accent);
  font-size: 13px; font-weight: 600; line-height: 16px; letter-spacing: -.1px; white-space: nowrap; cursor: pointer;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 8%, transparent); transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.save-design .icon { width: 17px; height: 17px; flex: 0 0 auto; }
.save-design-format { padding: 2px 8px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 10px; line-height: 14px; letter-spacing: .6px; }
.save-design:hover { background: color-mix(in srgb, var(--accent) 12%, #fff); border-color: var(--accent); box-shadow: 0 3px 12px color-mix(in srgb, var(--accent) 14%, transparent); }
.save-design:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.save-design:disabled { opacity: .6; cursor: default; }
.details-toggle { display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; border: 0; background: none; color: var(--muted); font-size: 12px; white-space: nowrap; cursor: pointer; }
.details-toggle::after { content: "+"; font-size: 15px; line-height: 1; }
.details-toggle[aria-expanded="true"]::after { content: "\2212"; }
.details-toggle:hover, .details-toggle:focus-visible { color: var(--accent); }
.selection-details[hidden] { display: none; }
/* Mensagem do cartão: título + caixa com contador (0/120) no canto, como o layout aprovado. */
.gift-message-field { display: grid; gap: 8px; }
.gift-title { font-family: var(--mx-font-heading); font-size: 18px; line-height: 22px; font-weight: var(--mx-heading-weight); color: var(--text); letter-spacing: -.1px; }
.gift-box { position: relative; }
.gift-box textarea {
  display: block; width: 100%; height: 96px; padding: 14px 16px 28px; resize: none;
  border: 1.5px solid #dcd8de; border-radius: 12px; background: #fff; color: var(--text);
  font: inherit; font-size: 14px; line-height: 1.45;
}
.gift-box textarea::placeholder { color: #9a969c; }
.gift-box textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
.gift-count { position: absolute; right: 14px; bottom: 10px; font-size: 12px; color: #8f8a92; pointer-events: none; font-variant-numeric: tabular-nums; }
.selection-details { padding-left: 20px; font-size: 13px; line-height: 1.7; }
@media print {
  .header-actions, .cart-button, .prototype-note { display: none; }
  body { background: #fff; }
  .container { width: 100%; }
  .studio-form { grid-template-columns: 1fr 1fr; gap: 20px; }
  .preview-column, .configuration { break-inside: avoid; }
}


/* 10. Encaixe na tela + peças do estúdio 3D.
   As seções 01–09 acima já são o design da referência; aqui só entram o 3D e o encaixe na tela. */
@media screen {
  .container { max-width: 1320px; }
  .preview-column { position: sticky; top: 16px; }
  /* Preview em retrato (634 × 794) limitado à altura da tela, sem distorcer. */
  .preview-card {
    aspect-ratio: 634 / 794; width: min(100%, calc((100svh - 90px) * 634 / 794)); margin-inline: auto;
    background-color: #d3d5d5; background-position: 50% 80%; background-size: cover; background-repeat: no-repeat;
  }
  .preview-card canvas { cursor: grab; touch-action: none; }
  .preview-card canvas:active { cursor: grabbing; }
  .preview-badge { z-index: 1; }
  .preview-caption { margin-top: 14px; }

  /* Câmera: barra compacta translúcida sobre a base do preview. */
  .view-controls {
    position: absolute; z-index: 1; left: 50%; bottom: 16px; transform: translateX(-50%);
    display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px;
    background: #ffffffd9; box-shadow: 0 2px 10px #1d1d2214; backdrop-filter: blur(6px);
  }
  .view-controls button {
    min-height: 30px; padding: 0 11px; border: 0; border-radius: 999px; background: transparent;
    font-size: 11px; font-weight: 600; color: #5d5962;
  }
  .view-controls .view-icon { width: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
  .view-controls .view-icon .icon { width: 15px; height: 15px; }
  .view-controls button:hover, .view-controls button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent); }
  .view-controls button:disabled { opacity: .45; cursor: wait; }

  /* Paleta: nossas 34 glossy + 9 metálicas em 12 colunas (glossy em 3 linhas como na referência). */
  .swatch-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px 8px; }

  /* Chips das partes à esquerda e mensagem do cartão à direita, na mesma linha (espaço vazio
     na referência); "Save design · PDF" e "Order details" ficam sob a descrição, no resumo. */
  .checkout-area { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; }
  .checkout-area > * { flex: 1 1 100%; }
  .checkout-area .mix-summary { flex: 0 1 334px; }
  .checkout-area .gift-message-field { flex: 1 1 100%; margin-top: 6px; }
  .selection-details { margin: 8px 0 0; font-size: 11px; color: #6b6670; }
  .cart-button { margin-top: 18px; }
  #export-status { margin: 8px 0 0; font-size: 12px; text-align: center; }
  #export-status:empty { display: none; }
}

/* Desktop: o painel cabe na altura da tela sem rolar. As fotos dos tamanhos encolhem com a
   altura (121 px da referência em telas altas) e somem em telas baixas. */
@media screen and (min-width: 981px) {
  .studio-form { grid-template-columns: minmax(0, .96fr) minmax(0, 1fr); gap: 40px; margin-block: 16px 24px; }
  .size-photo { height: clamp(56px, calc(100svh - 1010px), 121px); }
  .cart-button { margin-top: clamp(10px, calc(100svh - 1110px), 34px); }
}
/* Telas até 1130 px de altura: espaçamentos menores e fotos dos tamanhos encolhendo com a altura. */
@media screen and (min-width: 981px) and (max-height: 1130px) {
  .studio-form { margin-block: 10px 16px; }
  .preview-column { top: 10px; }
  .preview-card { width: min(100%, calc((100svh - 70px) * 634 / 794)); }
  .size-photo { height: clamp(56px, calc(100svh - 890px), 121px); }
  .style-bar { min-height: 48px; }
  .style-thumb { width: 38px; height: 36px; }
  .size-fieldset { margin-top: 6px; }
  .section-eyebrow { margin-bottom: 7px; }
  .size-card-info { padding: 7px 12px 8px; }
  .timing { margin-top: 3px; }
  .part-tab { min-height: 36px; }
  .palette-panel { padding: 10px 24px 14px; }
  .finish-heading { margin-top: 6px; margin-bottom: 5px; }
  .swatch-grid { row-gap: 5px; }
  .swatch { width: min(30px, 100%); }
  .metallic-heading { margin-top: 10px; margin-bottom: 7px; }
  .swatch-grid.metallic-grid { padding-bottom: 14px; }
  .summary-top { padding: 10px 16px 8px; }
  .price-table .total-label, .price-table .total-amount { padding-top: 4px; }
  .checkout-area { padding-block: 6px 10px; }
  .mix-chip { min-height: 38px; padding-block: 4px; gap: 3px; }
  .mix-chip .color-dot { width: 15px; height: 15px; }
  .mix-chip { min-height: 34px; }
  .style-bar { min-height: 44px; padding-block: 3px; }
  .part-tab { min-height: 34px; }
  .summary-top { padding-block: 8px 6px; }
  .product-title { margin-bottom: 2px; }
  .cart-button { min-height: 42px; margin-top: 8px; }
}
/* Até 945 px: sem fotos nos tamanhos (ficariam menores que 56 px). */
@media screen and (min-width: 981px) and (max-height: 945px) {
  .size-photo { display: none; }
}
/* Até 880 px (notebooks): mensagem em 2 linhas e sem os chips das partes (as abas já mostram as cores). */
@media screen and (min-width: 981px) and (max-height: 880px) {
  .checkout-area .mix-summary { display: none; }
  .gift-title { font-size: 15px; line-height: 20px; }
  .gift-message-field { gap: 5px; }
  .gift-box textarea { height: 64px; padding-block: 10px 22px; }
  .gift-count { bottom: 7px; }
}
/* Desktop: as duas colunas com a mesma altura. O preview deixa de seguir a altura da tela e
   estica até a base do painel da direita; a legenda sai do fluxo e fica logo abaixo dele.
   Limites: nunca mais alto que a tela nem mais baixo que 480 px. Vem depois dos blocos por
   altura de tela acima para prevalecer sobre o tamanho do preview definido neles. */
@media screen and (min-width: 981px) {
  .studio-form { align-items: stretch; margin-bottom: 52px; }
  .preview-column { display: flex; flex-direction: column; }
  .preview-card { flex: 1 1 auto; width: 100%; min-height: 480px; max-height: calc(100svh - 32px); aspect-ratio: auto; }
  .preview-caption { position: absolute; top: 100%; left: 0; right: 0; margin-top: 12px; }
}
/* Celular/tablet: o preview 3D fica preso no topo enquanto o cliente rola pelas opções,
   para ver cada cor aplicada na hora. O renderer se ajusta ao novo formato do quadro. */
@media screen and (max-width: 980px) {
  .preview-column {
    position: sticky; top: 0; z-index: 5; margin-inline: -14px; padding: 8px 14px 10px;
    background: var(--page); box-shadow: 0 10px 14px -12px #1d1d2226;
  }
  .preview-card { width: 100%; aspect-ratio: auto; height: min(42svh, 440px); border-radius: 22px; }
  .preview-caption { display: none; }
  .preview-badge { top: 10px; left: 10px; min-width: 0; width: auto; height: auto; min-height: 0; padding: 5px 12px; font-size: 10px; }
  .view-controls { bottom: 10px; padding: 3px; }
  .view-controls button { min-height: 28px; padding: 0 9px; font-size: 10.5px; }
  .view-controls .view-icon { width: 28px; }
}
@media screen and (min-width: 581px) and (max-width: 980px) {
  .preview-column { margin-inline: -24px; padding-inline: 24px; }
  .preview-card { height: min(48svh, 520px); }
}
/* Celular: 9 colunas (metálicas numa linha, glossy em 4) para as cores não ficarem minúsculas. */
@media screen and (max-width: 580px) {
  .swatch-grid { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 8px 6px; }
}

/* 11. White-label (Modelamix): marca da loja em texto, faixa da prévia, pedido pelo WhatsApp. */

/* Marca: logo opcional; sem logo, um selo com a inicial do nome da loja (cor de destaque). */
.brand-initial {
  width: 42px; height: 42px; flex: 0 0 auto; display: inline-grid; place-items: center; border-radius: 50%;
  background: var(--accent); color: #fff; font: var(--mx-heading-weight) 21px/1 var(--mx-font-heading);
}
.brand-mark[hidden], .brand-initial[hidden], .loader-mark[hidden] { display: none; }
.loader-initial {
  width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%;
  background: var(--accent); color: #fff; font: var(--mx-heading-weight) 34px/1 var(--mx-font-heading);
  box-shadow: 0 6px 14px #0000001f; animation: loader-pulse 1.6s ease-in-out infinite;
}
.export-progress .loader-initial { margin-inline: auto; }
.export-progress.is-done .loader-initial { animation: none; transform: scale(1.06); }

/* Faixa da prévia gratuita (configuração com "previa"): avisa que é uma demonstração. */
.preview-banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px;
  padding: 9px 16px; background: #1f1f23; color: #fff; font-size: 13px; line-height: 18px; text-align: center;
}
.preview-banner strong { font-weight: 700; }
.preview-banner button {
  border: 0; border-radius: 999px; padding: 5px 14px; background: #fff; color: #1f1f23;
  font-size: 12px; font-weight: 700; white-space: nowrap;
}
.preview-banner button:hover { background: var(--accent-soft); }

/* Abas das partes em duas linhas (produto com mais de 4 partes). */
.part-tabs.is-multirow { border-radius: 18px; gap: 2px; }
.part-tabs.is-multirow .part-tab { border-radius: 14px; }

/* Grupo de cores que a parte ativa não usa (ex.: a bolha do bubble só aceita cristal). */
.palette-panel .finish-group[hidden] { display: none; }
.finish-group .metallic-heading { margin-top: 11px; margin-bottom: 7px; }
.finish-group:first-child .finish-heading, .finish-group:first-child .metallic-heading { margin-top: 11px; }

/* Tamanhos sem foto: só nome e preço. */
.size-card-info .size-detail { margin-top: 3px; font-size: 11px; line-height: 15px; color: var(--muted); }

/* Campos extras da loja (nome no balão, mensagem do cartão...). */
.extra-fields { display: grid; gap: 10px; }
.extra-field { display: grid; gap: 6px; }
.extra-field input {
  width: 100%; min-height: 44px; padding: 10px 52px 10px 14px; border: 1.5px solid #dcd8de; border-radius: 12px;
  background: #fff; color: var(--text); font: inherit; font-size: 14px;
}
.extra-field input::placeholder { color: #9a969c; }
.extra-field input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent); }
.extra-field .gift-count { bottom: 50%; transform: translateY(50%); }

/* Pedido pelo WhatsApp: mesmo formato do botão de compra, no verde do WhatsApp. */
.cart-button.whatsapp-button { border-color: #168a45; background: linear-gradient(176deg, #22b35a 0%, #18944a 100%); }
.cart-button.whatsapp-button:hover { background: #16843f; }
.cart-button .icon-whatsapp { width: 21px; height: 21px; }

/* Crédito no rodapé: quem fez o configurador (é também a vitrine da Modelamix). */
.mx-credit { margin: 0 auto 28px; text-align: center; font-size: 12px; color: var(--muted); }
.mx-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.mx-credit a:hover { color: var(--accent); }

/* Prévia: o clique em "Pedir no WhatsApp" mostra a mensagem que a loja receberia. */
.previa-note { width: min(480px, calc(100% - 32px)); }
.previa-message {
  margin: 14px 0 0; padding: 12px 14px; max-height: 38svh; overflow: auto; border-radius: 12px;
  background: #e7f6ec; color: #1d3527; font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap;
}
.previa-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.previa-actions .note-close { margin-top: 0; }
.previa-actions .previa-activate { background: #18944a; }

/* Miniatura de produto sem foto (seletor de produtos): degradê com as cores iniciais dele. */
.style-option .style-option-image { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; background: #eceaee; }
.product-swatch-thumb { border-radius: 0; }
/* Bolinha de cor cristal (abas e fichas): quadriculado sob a cor, como nas cores da paleta. */
.color-dot.is-crystal {
  background: linear-gradient(color-mix(in srgb, var(--dot) 70%, transparent), color-mix(in srgb, var(--dot) 70%, transparent)),
    repeating-conic-gradient(#d9dbe0 0 25%, #ffffff 0 50%) 50% / 6px 6px;
  box-shadow: inset 0 0 0 1px #00000014;
}
.previa-actions a.note-close { display: inline-flex; align-items: center; text-decoration: none; font-size: 14px; }

/* Parte que não cobra o adicional (confete, fita, peso): esconde o "+ R$" das cores. */
.palette-panel.sem-acrescimo .swatch-cost, .palette-panel.sem-acrescimo .upgrade-caption { display: none; }

/* Selo do produto no 3D: cresce com o texto (nomes de produto variam), sem cortar. */
.preview-badge { width: auto; min-width: 0; max-width: calc(100% - 28px); padding-inline: 16px; overflow: hidden; text-overflow: ellipsis; justify-content: flex-start; }
.previa-message { overflow-wrap: anywhere; }

/* 12. Tutorial guiado (tour.js): destaque sobre o elemento real + cartão com o passo. A página
   continua clicável, para o cliente experimentar enquanto lê. */
.tour-spotlight {
  position: fixed; z-index: 60; pointer-events: none; border-radius: 22px;
  box-shadow: 0 0 0 9999px #16161a99, 0 0 0 2px #fff inset;
  transition: top .28s ease, left .28s ease, width .28s ease, height .28s ease;
}
.tour-card {
  position: fixed; z-index: 61; width: min(360px, calc(100vw - 32px)); padding: 18px 18px 14px;
  border-radius: 18px; background: #fff; color: var(--text); box-shadow: 0 18px 50px #16161a47; outline: none;
  transition: top .28s ease, left .28s ease;
}
.tour-step { font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: var(--accent); }
.tour-title { margin-top: 4px; font: var(--mx-heading-weight) 23px/1.2 var(--mx-font-heading); letter-spacing: -.3px; }
.tour-text { margin-top: 8px; font-size: 14px; line-height: 1.5; color: #4b4950; }
.tour-hint { margin-top: 8px; padding: 6px 10px; border-radius: 10px; background: #e7f6ec; color: #136c37; font-size: 13px; font-weight: 600; }
.tour-actions { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.tour-skip { margin-right: auto; padding: 8px 4px; border: 0; background: none; color: var(--muted); font-size: 13px; }
.tour-skip:hover { color: var(--text); }
.tour-back, .tour-next { min-height: 38px; padding: 0 18px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.tour-back { border: 1px solid var(--line); background: #fff; }
.tour-next { border: 0; background: var(--accent); color: #fff; }
.tour-next:hover { background: color-mix(in srgb, var(--accent) 85%, #000); }
/* Celular: folha fixa embaixo, sem cobrir o preview 3D (preso no topo) nem o elemento destacado. */
.tour-card.is-sheet { top: auto; left: 12px; right: 12px; bottom: 12px; width: auto; transition: none; }
@media (prefers-reduced-motion: reduce) { .tour-spotlight, .tour-card { transition: none; } }
/* Celular: o 3D preso no topo fica sempre aceso durante o tutorial (é ali que a cor muda). */
@media screen and (max-width: 980px) { .tour-ativo .preview-column { z-index: 62; } }

/* 13. Tela inteira no computador (Full HD, HD e notebooks): a página ocupa exatamente a altura da
   tela, sem rolar. O 3D preenche a coluna da esquerda (com os botões de câmera à vista) e só a
   coluna de opções rola por dentro; o pedido fica numa barra presa embaixo dela. */
.order-bar { display: grid; gap: 4px; }
.order-bar .cart-button { margin-top: 0; }
.order-bar #export-status { margin: 0; font-size: 12px; text-align: center; }
.order-bar #export-status:empty { display: none; }
.configuration > .mx-credit { margin: 14px 0 4px; }

@media screen and (min-width: 981px) {
  body { display: flex; flex-direction: column; height: 100vh; height: 100svh; overflow: hidden; }
  .site-header { flex: 0 0 auto; }
  body > main { flex: 1 1 auto; min-height: 0; display: flex; }
  .studio-form {
    flex: 1 1 auto; min-height: 0; height: auto; margin-block: 14px 16px; margin-bottom: 16px;
    grid-template-rows: minmax(0, 1fr); align-items: stretch;
  }
  .preview-column { position: relative; top: 0; min-height: 0; display: flex; flex-direction: column; }
  .preview-card { flex: 1 1 auto; width: 100%; height: auto; min-height: 320px; max-height: none; aspect-ratio: auto; }
  .preview-caption { position: static; flex: 0 0 auto; margin-top: 8px; font-size: 12px; line-height: 16px; }
  .configuration {
    min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 6px;
    scrollbar-width: thin; scrollbar-color: #d5d2da transparent;
  }
  .order-bar {
    position: sticky; bottom: 0; z-index: 3; margin-top: 8px; padding: 14px 0 2px;
    background: linear-gradient(to bottom, transparent, var(--page) 14px);
  }
  .order-bar .cart-button { min-height: 46px; }
}
/* Telas baixas (HD 1366 × 768, 1280 × 720): o painel fica mais compacto. */
@media screen and (min-width: 981px) and (max-height: 820px) {
  .site-header { height: 56px; }
  .preview-banner { padding-block: 6px; font-size: 12px; }
  .preview-banner button { padding-block: 3px; }
  .studio-form { margin-block: 10px 12px; }
  .preview-caption { display: none; }
  .palette-panel { padding-block: 8px 12px; }
  .finish-heading, .finish-group .metallic-heading { margin-top: 6px; margin-bottom: 4px; }
  .swatch-grid { row-gap: 4px; }
  .swatch { width: min(28px, 100%); }
}

/* Celular e tablet: o 3D fica preso no topo (seção 10) e o pedido numa barra presa embaixo da tela
   enquanto o cliente rola pelas opções. */
@media screen and (max-width: 980px) {
  .order-bar {
    position: sticky; bottom: 0; z-index: 4; margin-top: 10px;
    padding: 12px 0 calc(10px + env(safe-area-inset-bottom));
    background: linear-gradient(to bottom, transparent, var(--page) 14px);
  }
  .configuration > .mx-credit { margin-bottom: 18px; }
}

/* As bolinhas de cor são esferas renderizadas: sempre quadradas, senão a imagem sai oval. */
.color-dot, .swatch, .swatch-disc { aspect-ratio: 1; }
/* Campo de data no Safari do iPhone: ignora a largura e vaza para fora da caixa sem estas regras. */
.extra-field input[type="date"] {
  -webkit-appearance: none; appearance: none; display: block; min-width: 0; max-width: 100%;
  min-height: 44px; line-height: 22px; text-align: left;
}
.extra-field input[type="date"]::-webkit-date-and-time-value { text-align: left; margin: 0; }

/* 14. Realidade aumentada: botão sobre o preview + janela do QR code (computador). */
.ar-button {
  position: absolute; z-index: 1; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 7px;
  min-height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: #242426; color: #fff;
  font-size: 12px; font-weight: 600; box-shadow: 0 4px 14px #1411142e;
}
.ar-button .icon { width: 16px; height: 16px; }
.ar-button:hover { background: var(--accent); }
.ar-button:disabled { opacity: .5; cursor: wait; }
.ar-button[aria-busy="true"] { cursor: progress; }
/* Selo do produto e "Ver no seu espaço" na mesma linha, no topo do 3D: o botão mantém o tamanho e o
   selo encolhe. Se o nome com o tamanho não cabe, app.js mostra só o nome; se nem ele cabe, "…". */
.preview-topo {
  position: absolute; z-index: 1; top: 12px; left: 12px; right: 12px;
  display: flex; align-items: center; gap: 8px; pointer-events: none;
}
.preview-topo > .preview-badge {
  position: static; display: block; flex: 0 1 auto; width: auto; min-width: 0; max-width: none; height: auto; min-height: 0;
  padding: 8px 16px; line-height: 18px; overflow: hidden; text-overflow: ellipsis;
}
.preview-topo > .ar-button { position: static; flex: none; margin-left: auto; pointer-events: auto; }
.preview-badge.sem-tamanho .badge-size { display: none; }
@media screen and (max-width: 980px) {
  .preview-topo { top: 10px; left: 10px; right: 10px; gap: 6px; }
}
@media screen and (max-width: 580px) {
  .preview-topo > .preview-badge { padding: 7px 11px; font-size: 9.5px; line-height: 14px; letter-spacing: .45px; }
  .ar-button { min-height: 28px; padding: 0 11px; gap: 5px; font-size: 11px; }
  .ar-button .icon { width: 14px; height: 14px; }
}
@media screen and (max-width: 359px) {
  .preview-topo { gap: 5px; }
  .preview-topo > .preview-badge { padding-inline: 9px; font-size: 9px; letter-spacing: .25px; }
  .ar-button { padding: 0 9px; gap: 4px; font-size: 10.5px; }
}
.ar-qr, .ar-place {
  width: min(380px, calc(100vw - 32px)); margin: auto; padding: 24px; border: 0; border-radius: 22px;
  background: #fff; color: var(--text); box-shadow: 0 24px 70px #1d1d2238; text-align: left;
}
.ar-qr::backdrop, .ar-place::backdrop { background: #16161a33; backdrop-filter: blur(3px); }
.ar-qr h2, .ar-place h2 { font: var(--mx-heading-weight) 22px/1.2 var(--mx-font-heading); letter-spacing: -.4px; }
/* Onde colocar o buquê no AR: na mesa (apoiado) ou sem mesa (flutua na altura de uma mesa). */
.ar-place-options { display: grid; gap: 10px; margin-top: 16px; }
.ar-place-option {
  display: grid; grid-template-columns: 38px 1fr; gap: 2px 12px; align-items: center; width: 100%;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff;
  color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.ar-place-option:hover, .ar-place-option:focus-visible { border-color: var(--accent); background: var(--accent-soft); }
.ar-place-option .icon { grid-row: span 2; width: 38px; height: 38px; color: var(--accent); }
.ar-place-option strong { font-size: 15px; }
.ar-place-option span { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.ar-place-option .recommended { color: var(--accent); font-weight: 700; }
.ar-qr-code { width: 220px; aspect-ratio: 1; margin: 18px auto 10px; }
.ar-qr-code svg { width: 100%; height: 100%; display: block; }
.ar-qr-link { text-align: center; font-size: 12px; }
.ar-qr-link a { color: var(--accent); }

/* Aviso de 3D demorando (app.js): dentro da tela de carregamento. */
.loader-slow { margin: 0; padding: 0 24px; font-size: 13px; color: #4b4950; text-align: center; }
.loader-reload { border: 0; border-radius: 999px; padding: 9px 18px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 600; }