:root {
  --paper: #fff8df;
  --card: #fffdf5;
  --linen: #f6e7bf;
  --sage: #d6bf77;
  --moss: #72551e;
  --ink: #2e2413;
  --muted: #7f6b42;
  --gold: #d7aa36;
  --gold-soft: #f4dd91;
  --rose: #c58a72;
  --blue: #9a8656;
  --line: rgba(142, 103, 31, 0.22);
  --shadow: 0 20px 55px rgba(97, 70, 20, 0.13);
  --radius: 8px;
  /* Superfícies editoriais partilhadas pela homepage e páginas interiores. */
  --surface-page: var(--paper);
  --surface-panel: var(--card);
  --surface-raised: var(--card);
  --surface-image: var(--linen);
  --surface-header: color-mix(in srgb, var(--paper) 94%, transparent);
  --hero-foreground: #fffdf8;
  --hero-foreground-muted: rgba(255, 253, 248, 0.94);
  --hero-accent: #f6df99;
  --hero-button-ink: #3b2d18;
  --hero-overlay: rgba(31, 25, 15, 0.52);
  --accent-hover: var(--rose);
  --shadow-header: 0 8px 28px rgba(46, 36, 19, 0.07);
  --shadow-editorial: 0 12px 30px rgba(46, 36, 19, 0.08);
  --shadow-menu: -20px 0 50px rgba(37, 28, 14, 0.2);
  --menu-backdrop: rgba(25, 20, 12, 0.56);
  --hero-text-shadow: 0 3px 22px rgba(20, 15, 8, 0.36);
  --hero-copy-shadow: 0 2px 12px rgba(20, 15, 8, 0.48);
  --hero-action-bg: rgba(35, 28, 17, 0.46);
  --hero-action-shadow: 0 10px 24px rgba(20, 15, 8, 0.2);
  /* STYLE_TOKENS_V1 — superfícies cremes uniformes para reduzir variantes
     de amarelo. Ver log_css_mods.txt para histórico de substituições.
       --surface-cream         → wrapper geral (dc-block, banners discretos)
       --surface-cream-soft    → caixas com mais ênfase (price-panel)
       --surface-cream-strong  → caixas com saturação extra (resumos)
       --surface-stone         → cinza-creme neutro (confirm-card, listas)
       --surface-gold-soft     → realce dourado suave para CTA / notas
       --border-soft-gold      → borda subtil dourada associada a notas
  */
  --surface-cream:        #fffbe9;
  --surface-cream-soft:   #fff8df;
  --surface-cream-strong: #f6e7bf;
  --surface-stone:        #f7f1e6;
  --surface-gold-soft:    #fff5d0;
  --border-soft-gold:     rgba(184, 134, 22, 0.42);
  /* CHECKMARK_CORNER_MODE_V1: para voltar ao centro-direita, usar
     --selection-check-top: 50%; --selection-check-transform: translateY(-50%); */
  --selection-check-top: var(--selection-check-inset, 14px);
  --selection-check-right: var(--selection-check-inset, 14px);
  --selection-check-transform: none;
  --admin-edit-accent: #c74438;
}

/* ADMIN_OVERLAY_EDITOR_V1: o modo admin conserva a geometria pública. */
.is-admin-editable {
  position: relative;
  isolation: isolate;
  outline: 2px solid var(--admin-edit-accent);
  outline-offset: 3px;
}

.admin-edit-target {
  position: absolute;
  inset: 5px 5px auto auto;
  z-index: 20;
  display: inline-flex;
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: inherit;
  background: transparent;
  color: var(--admin-edit-accent);
  cursor: pointer;
}

.admin-edit-target > span {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 8px;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: var(--surface-panel);
  box-shadow: var(--shadow-header);
  font-size: .68rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.admin-edit-target:hover > span,
.admin-edit-target:focus-visible > span {
  background: var(--admin-edit-accent);
  color: var(--hero-foreground);
}

.admin-edit-target:focus-visible {
  outline: 3px solid var(--admin-edit-accent);
  outline-offset: 2px;
}

.admin-edit-target--compact {
  inset: 8px 8px auto auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
}

.admin-edit-target--compact > span {
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  font-size: 1.15rem;
}

.admin-edit-layer {
  position: fixed;
  inset: 0;
  z-index: 1100;
  visibility: hidden;
  pointer-events: none;
}

.admin-edit-layer.is-open {
  visibility: visible;
  pointer-events: auto;
}

.admin-edit-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: var(--menu-backdrop);
  opacity: 0;
  transition: opacity .18s ease;
}

.admin-edit-layer.is-open .admin-edit-backdrop { opacity: 1; }

.admin-edit-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(620px, calc(100vw - 24px));
  max-height: min(78vh, 760px);
  box-sizing: border-box;
  overflow: auto;
  border: 2px solid var(--admin-edit-accent);
  border-radius: var(--radius);
  background: var(--surface-panel);
  box-shadow: var(--shadow-menu);
  color: var(--ink);
  transform: translate(-50%, -50%);
}

.admin-edit-dialog[hidden] { display: none; }

.admin-edit-dialog__head {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-panel);
}

.admin-edit-dialog__head h2 {
  margin: 0;
  color: var(--admin-edit-accent);
  font-family: inherit;
  font-size: 1rem;
}

.admin-edit-dialog__close {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  box-sizing: border-box;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface-raised);
  color: var(--ink);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.admin-edit-dialog__body { padding: 14px; }

.admin-edit-dialog .admin-card-tools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  padding: 0;
  border: 0;
  text-align: left;
}

.admin-edit-dialog .admin-card-tools label,
.admin-edit-dialog .admin-step-panel label {
  display: grid;
  gap: 5px;
  color: var(--admin-edit-accent);
  font-size: .76rem;
  font-weight: 850;
}

.admin-edit-dialog .admin-card-tools input,
.admin-edit-dialog .admin-card-tools textarea,
.admin-edit-dialog .admin-card-tools select,
.admin-edit-dialog .admin-step-panel input,
.admin-edit-dialog .admin-step-panel textarea,
.admin-edit-dialog .admin-step-panel select {
  width: 100%;
  box-sizing: border-box;
}

.admin-edit-dialog .admin-check {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-edit-dialog .admin-check input {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  min-height: 0;
}

.admin-edit-dialog .admin-step-panel {
  display: grid;
  gap: 10px;
}

.admin-edit-dialog .admin-add {
  position: static;
  width: 100%;
}

body.is-admin-edit-dialog-open { overflow: hidden; }

@media (max-width: 559px) {
  .admin-edit-dialog {
    top: auto;
    bottom: 0;
    width: 100%;
    max-height: 84vh;
    border-right: 0;
    border-bottom: 0;
    border-left: 0;
    border-radius: var(--radius) var(--radius) 0 0;
    transform: translateX(-50%);
  }

  .admin-edit-dialog .admin-card-tools { grid-template-columns: 1fr; }
}

/* FLOW_REFINEMENTS_20260720 */
.step-card > .wizard-progress {
  width: 100%;
  margin: -4px 0 0;
  padding: 0;
}

.step-card > .wizard-progress .wizard-progress__rail {
  height: 38px;
}

.step-card > .wizard-progress .wizard-progress__track {
  top: 10px;
}

.step-card > .wizard-progress .wizard-progress__ticks li {
  top: -4px;
}

.wizard-progress__ticks li:last-child button span {
  display: none;
}

/* ---- Água nos quadrados da paleta ----------------------------------------
   Física real num <canvas> (ver MiaWater em app.js): shallow-water por colunas
   (conserva massa, gera ondas/slosh) + partículas balísticas para o salpico. O
   quadrado é o "copo": fundo tingido com a cor por baixo (vidro vazio), o canvas
   desenha a água, e o ::after faz o reflexo de vidro por cima. Reage ao dedo/
   rato e ao girómetro; corre sempre, mesmo com "reduzir movimento". */
.palette-composition__slot.is-filled {
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(0,0,0,.06) 0 8%, transparent 30%),
    color-mix(in srgb, var(--palette-preview-color) 14%, var(--surface-stone));
}

.pcs__canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* Reflexo de vidro por cima da água. */
.palette-composition__slot.is-filled::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(118deg, rgba(255,255,255,.30) 0 12%, transparent 26% 66%, rgba(255,255,255,.10) 80%, transparent 94%);
}

.individual-color-choice.is-unavailable {
  opacity: .72;
}

.individual-color-choice.is-unavailable::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: 50%;
  left: 7%;
  width: 86%;
  height: 3px;
  border-radius: 999px;
  background: #c74438;
  box-shadow: 0 1px 1px rgba(255,255,255,.75);
  transform: rotate(-45deg);
  pointer-events: none;
}

.admin-colors-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.details-character-count {
  position: absolute;
  right: 16px;
  bottom: 12px;
  z-index: 2;
  padding: 3px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--card) 90%, transparent);
  color: var(--muted);
  font: 700 .74rem/1.2 system-ui, sans-serif;
}

.details-grid label:has(textarea) {
  position: relative;
}

/* A água corre mesmo com "reduzir movimento" — pedido explícito. */

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  min-height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body {
  min-height: 100vh;
  margin: 0;
  overflow-x: clip;
  background: var(--surface-page);
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select {
  font: inherit;
}

button {
  touch-action: manipulation;
}

.app-shell {
  min-height: 100vh;
}

.orders-suspended-banner {
  width: min(calc(100% - 32px), 760px);
  margin: 14px auto 0;
  padding: 10px 14px;
  border: 1px solid rgba(114, 85, 30, 0.28);
  border-radius: var(--radius);
  background: var(--surface-gold-soft);
  color: var(--moss);
  font-weight: 850;
  text-align: center;
}

.home-shell,
.product-shell,
.fallback {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 16px;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0 20px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.04rem;
}

.brand-text {
  position: relative;
  display: inline-block;
  line-height: 1.1;
  transition: opacity 0.3s ease;
}

/* Sem fundo no topo, o texto da marca ficaria por cima do conteudo durante o scroll.
   Desvanece assim que se sai do topo e reaparece quando se volta. */
body[data-scrolled="1"] .site-header .brand-text {
  opacity: 0;
  pointer-events: none;
}

.brand-letter-r {
  position: relative;
  display: inline-block;
}

.brand-butterfly-frame {
  position: absolute;
  left: 62%;
  top: -1.54em;
  z-index: 2;
  display: block;
  width: 42px;
  height: 34px;
  border: 0;
  pointer-events: none;
  overflow: hidden;
  background: transparent;
  filter: drop-shadow(0 3px 4px rgba(46, 36, 19, 0.18));
  transform: translateX(-50%) rotate(-10deg);
}

body:not(.is-brand-butterfly-enabled) .brand-butterfly-frame {
  display: none;
}

body.is-catalog-footer-hidden .catalog-footer-link {
  display: none;
}

.brand-mark {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  width: 46px;
  height: 46px;
  overflow: hidden;
  border: 2px solid rgba(202, 162, 59, 0.55);
  border-radius: 50%;
  background: var(--surface-page);
  color: var(--moss);
  font-size: 0.78rem;
  box-shadow: 0 6px 18px rgba(107, 84, 30, 0.16);
}

.brand-mark img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.header-link {
  color: var(--moss);
  font-size: 0.92rem;
  font-weight: 800;
}

.site-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 12px;
  padding: 18px 4px 4px;
  color: var(--muted);
  font-size: 0.8rem;
  text-align: center;
}

.site-footer a,
.site-footer button {
  color: var(--moss);
  font-weight: 850;
}

.site-footer button {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.eyebrow {
  margin: 0 0 10px;
  color: var(--moss);
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  overflow-wrap: anywhere;
}

h1,
h2,
h3 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 500;
  letter-spacing: 0;
}

h1 {
  font-size: clamp(2.35rem, 11.5vw, 4.2rem);
  line-height: 0.96;
}

h2 {
  font-size: clamp(1.9rem, 8vw, 3rem);
  line-height: 1;
}

p {
  line-height: 1.6;
}

.home-intro,
.product-intro,
.wizard-shell,
.result-card,
.fallback {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-panel);
  box-shadow: var(--shadow);
}

.home-intro,
.product-intro,
.fallback {
  padding: 22px;
}

.home-intro p:last-child,
.product-intro p:last-child,
.step-card > p {
  margin: 14px 0 0;
  color: var(--muted);
}

.category-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.home-back-row {
  margin: 2px 0 12px;
}

.home-back-link {
  color: var(--moss);
  font-size: 0.9rem;
  font-weight: 800;
  text-decoration: none;
}

.home-back-link:hover,
.home-back-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.category-card {
  position: relative;
  display: grid;
  align-content: space-between;
  min-height: 0;
  aspect-ratio: 1;
  padding: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.category-card.has-image {
  background:
    linear-gradient(180deg, rgba(46, 36, 19, 0.08), rgba(46, 36, 19, 0.42)),
    var(--category-image) center / cover no-repeat,
    var(--card);
  color: #fffdf5;
}

 .category-card.has-image::after,
.category-card.has-image .category-art {
  display: none;
}

.category-card.has-image .category-number,
.category-card.has-image > span:last-child {
  color: rgba(255, 253, 245, 0.88);
  text-shadow:
    0 1px 3px rgba(20, 15, 8, 0.72),
    0 7px 18px rgba(20, 15, 8, 0.46);
}

.admin-hidden-category-section {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding: 14px;
  border: 1px dashed rgba(114, 85, 30, 0.32);
  border-radius: var(--radius);
  background: rgba(255, 253, 248, 0.74);
}

.admin-hidden-category-section h2 {
  margin: 0;
  color: var(--moss);
  font-size: 1rem;
}

.admin-hidden-category-section p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.admin-hidden-category-grid {
  margin-top: 0;
}

.category-card.has-image strong {
  text-shadow:
    0 1px 3px rgba(20, 15, 8, 0.78),
    0 8px 22px rgba(20, 15, 8, 0.52);
}

.category-card:has(.home-admin-tools) {
  aspect-ratio: auto;
  min-height: 0;
}

.category-card::after {
  content: "";
  position: absolute;
  inset: auto -30% -38% 36%;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0.24;
  background: var(--gold);
}

.category-card.blue::after {
  background: var(--blue);
}

.category-card.gold::after {
  background: var(--gold);
}

.category-card.sage::after {
  background: var(--sage);
}

.category-card.rose::after {
  background: var(--rose);
}

.category-card.is-disabled {
  color: rgba(37, 41, 31, 0.48);
}

.category-card.is-admin-hidden {
  outline: 2px dashed rgba(114, 85, 30, 0.32);
  outline-offset: -8px;
}

.admin-hidden-badge {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(114, 85, 30, 0.12);
  color: var(--moss);
  font-size: 0.72rem;
  font-weight: 850;
}

.category-number,
.category-card strong,
.category-card > span:last-child {
  position: relative;
  z-index: 1;
}

.category-number {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 850;
}

.category-art {
  position: absolute;
  right: 14px;
  top: 14px;
  width: 38px;
  height: 38px;
  border: 7px solid #f0eee7;
  border-radius: 50%;
  background: var(--linen);
}

.category-card strong {
  align-self: end;
  font-family: Georgia, "Times New Roman", serif;
  min-width: 0;
  font-size: clamp(1.18rem, 5.8vw, 1.82rem);
  line-height: 1;
  overflow-wrap: anywhere;
}

.category-card > span:last-child {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.35;
}

.product-intro {
  margin-bottom: 12px;
}

.wizard-shell {
  padding: 16px;
  /* O salto entre passos alinha o wizard sem esconder os círculos por baixo
     do cabeçalho sticky. */
  scroll-margin-top: 82px;
}

.step-list {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin: 0 0 14px;
  /* Referência para o círculo fantasma do STEP_NUMBERS_FLIP_V1 (app.js), que
     recua por baixo dos que ficaram quando o design escolhido tem menos passos. */
  position: relative;
  padding: 2px 0 12px;
  overflow-x: visible;
  list-style: none;
}

.step-list li {
  flex: 0 0 auto;
  position: relative;
}

.step-list [data-step-ghost] {
  pointer-events: none;
}

.step-list [data-step-ghost]::before {
  display: none;
}

.step-list li + li::before {
  content: "";
  position: absolute;
  top: 50%;
  right: calc(100% + 1px);
  width: 14px;
  height: 1px;
  background: var(--line);
}

.step-list button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface-stone);
  color: var(--muted);
  font-size: 0;
  font-weight: 850;
  cursor: pointer;
}

.step-list button:disabled {
  opacity: 0.62;
  cursor: default;
}

.step-list span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: transparent;
  font-size: 0.94rem;
}

.step-list .is-active button {
  border-color: var(--moss);
  background: var(--moss);
  color: #fffdf8;
}

.step-list .is-complete button {
  border-color: rgba(142, 103, 31, 0.55);
  color: var(--moss);
}

.step-list .is-active.is-complete button {
  color: #fffdf8;
}

.wizard-progress {
  width: min(100%, 420px);
  margin: 0 auto 20px;
  padding: 8px 22px 10px;
}

.wizard-progress__rail {
  position: relative;
  height: 44px;
}

.wizard-progress__track {
  position: absolute;
  z-index: 1;
  top: 14px;
  right: 0;
  left: 0;
  height: 16px;
  overflow: hidden;
  border: 1px solid rgba(114, 85, 30, 0.24);
  border-radius: 999px;
  background: linear-gradient(180deg, #efe2bd 0%, #fff8df 52%, #e8d6a8 100%);
  box-shadow:
    inset 0 2px 4px rgba(114, 85, 30, 0.18),
    0 2px 6px rgba(97, 70, 20, 0.12);
}

.wizard-progress__fill {
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: 0;
  border-radius: inherit;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.24) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.24) 50%, rgba(255, 255, 255, 0.24) 75%, transparent 75%, transparent),
    linear-gradient(180deg, #edc45c 0%, var(--gold) 48%, #b97817 100%);
  background-size: 18px 18px, 100% 100%;
  box-shadow:
    inset 0 2px 2px rgba(255, 251, 226, 0.5),
    inset 0 -2px 3px rgba(114, 69, 8, 0.24);
}

@keyframes wizard-progress-grow {
  from { width: var(--progress-from); }
  to { width: var(--progress-to); }
}

@keyframes wizard-progress-tick-pop {
  0% {
    opacity: 0;
    transform: translateX(-50%) scaleY(0.25);
  }
  65% {
    opacity: 1;
    transform: translateX(-50%) scaleY(1.2);
  }
  100% {
    opacity: 1;
    transform: translateX(-50%) scaleY(1);
  }
}

.wizard-progress.is-changing .wizard-progress__fill {
  animation: wizard-progress-grow 720ms cubic-bezier(0.22, 0.72, 0.25, 1) both;
}

.wizard-progress.is-changing .wizard-progress__ticks .is-active button span {
  transform-origin: center;
  animation: wizard-progress-tick-pop 220ms ease-out 690ms both;
}

.wizard-progress.is-empty .wizard-progress__ticks,
.wizard-progress__ticks li:first-child button span {
  display: none;
}

.wizard-progress.is-empty .wizard-progress__track::before {
  content: "";
  position: absolute;
  inset: 2px 8px;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(199, 137, 36, 0.04), rgba(255, 253, 235, 0.58), rgba(199, 137, 36, 0.04));
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.44);
}

.wizard-progress__ticks {
  position: absolute;
  z-index: 2;
  inset: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wizard-progress__ticks li {
  position: absolute;
  top: 0;
  width: 44px;
  height: 44px;
  transform: translateX(-50%);
}

.wizard-progress__ticks button {
  position: relative;
  display: block;
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}

.wizard-progress__ticks button:disabled {
  cursor: default;
}

.wizard-progress__ticks button span {
  position: absolute;
  top: 18px;
  left: 50%;
  width: 2px;
  height: 8px;
  border-radius: 999px;
  background: rgba(114, 85, 30, 0.3);
  transform: translateX(-50%);
}

.wizard-progress__ticks .is-complete button span {
  background: rgba(255, 253, 235, 0.62);
  box-shadow: 0 1px 1px rgba(114, 69, 8, 0.22);
}

.wizard-progress__ticks .is-active button span {
  top: 16px;
  width: 0;
  height: 12px;
  border-left: 2px solid #fffdf0;
  border-radius: 0;
  background: transparent;
  box-shadow: 1px 0 1px rgba(114, 69, 8, 0.2);
}

.wizard-progress__ticks .is-future button span {
  background: rgba(114, 85, 30, 0.28);
}

.wizard-progress__ticks button:focus-visible {
  outline: 2px solid var(--moss);
  outline-offset: -6px;
  border-radius: 999px;
}

/* STEP_LIST_MOBILE_FIT_V1: com 6+ passos (caderninhos/cadernos só têm 5,
   mas crachas/imanes/lembrancas/pins agora têm 6+ por causa de
   delivery_contact) os círculos de 42px + gap 16px ultrapassam a largura
   de telemóvel. Reduzimos progressivamente em três breakpoints. Mantemos
   sempre place-items center e legível (>= 14px). */
@media (max-width: 520px) {
  .step-list {
    gap: 10px;
  }
  .step-list button {
    width: 34px;
    height: 34px;
    min-height: 34px;
  }
  .step-list li + li::before {
    width: 10px;
  }
  .step-list span {
    font-size: 0.82rem;
  }
}

@media (max-width: 400px) {
  .step-list {
    gap: 7px;
  }
  .step-list button {
    width: 30px;
    height: 30px;
    min-height: 30px;
  }
  .step-list li + li::before {
    width: 7px;
  }
  .step-list span {
    font-size: 0.78rem;
  }
}

@media (max-width: 340px) {
  .step-list {
    gap: 5px;
  }
  .step-list button {
    width: 26px;
    height: 26px;
    min-height: 26px;
  }
  .step-list li + li::before {
    width: 5px;
  }
  .step-list span {
    font-size: 0.72rem;
  }
}

.hidden-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.step-card {
  display: grid;
  gap: 16px;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.option-list,
.text-grid,
.price-pack-grid,
.design-grid,
.details-grid {
  display: grid;
  gap: 10px;
}

.option-list {
  grid-template-columns: 1fr;
}

.text-grid,
.price-pack-grid,
.design-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.color-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.choice-card {
  position: relative;
  display: grid;
  gap: 10px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fffdf8;
  cursor: pointer;
}

.choice-card.media-list {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-height: 104px;
  padding: 12px;
}

.choice-card.size-choice {
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  min-height: 94px;
  padding: 10px;
}

.choice-card.size-choice .option-image {
  width: 58px;
  border-width: 2px;
}

.choice-card.size-choice .option-image.pin-large {
  width: 66px;
}

.choice-card.size-choice .choice-copy strong {
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
}

.choice-card.size-choice.is-muted .option-image,
.choice-card.size-choice.is-muted .choice-copy,
.choice-card.size-choice.is-muted .size-price-preview {
  opacity: 0.54;
}

.size-price-preview {
  display: grid;
  gap: 3px;
  grid-column: 1 / -1;
  min-width: 0;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.size-price-preview span,
.size-price-preview p {
  margin: 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.22;
}

.size-price-preview strong {
  font-size: 1rem;
  line-height: 1.2;
}

.size-price-preview em {
  color: var(--moss);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 850;
  line-height: 1.2;
}

.choice-card.text-grid,
.choice-card.price-pack-grid,
.choice-card.design-grid {
  min-height: 124px;
  padding: 14px;
}

.choice-card.color-grid {
  grid-template-columns: 42px minmax(0, 1fr);
  align-items: center;
  min-height: 70px;
  padding: 12px;
}

.choice-card.color-grid:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.46;
}

.choice-swatch {
  display: block;
  width: 42px;
  aspect-ratio: 1;
  border: 2px solid rgba(46, 36, 19, 0.18);
  border-radius: 50%;
  background: var(--choice-swatch);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.42);
}

.choice-selection-counter {
  margin: 0;
  color: var(--moss);
  font-size: 0.88rem;
  font-weight: 800;
}

.product-quadros .design-grid {
  grid-template-columns: minmax(0, 1fr);
}

.product-quadros .design-grid > :last-child:nth-child(odd) {
  grid-column: auto;
}

.product-quadros .text-grid {
  grid-template-columns: minmax(0, 1fr);
}

/* Os cards .design-grid de quadros existem todos dentro do passo "designs" e sao
   definidos mais abaixo, num unico sitio. Nao duplicar aqui a mesma grelha. */

.product-quadros .choice-card.text-grid {
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 116px;
  padding: 12px;
  text-align: left;
}

.product-quadros .choice-card.text-grid .option-image {
  width: 96px;
  max-width: 100%;
}

.product-quadros .choice-card.text-grid .choice-copy {
  justify-items: start;
  text-align: left;
}

.product-quadros .design-grid[data-choice-grid-step="designs"] {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.product-quadros .design-grid[data-choice-grid-step="designs"] > :last-child:nth-child(odd) {
  grid-column: auto;
}

/* Imagem | texto | preco sao tres celulas reais do grid. Assim a coluna da imagem
   acompanha o tamanho definido em quadros.json, o texto fica com todo o espaco que
   sobra e o preco nao precisa de position:absolute nem de padding fingido a imita-lo. */
.product-quadros .design-grid[data-choice-grid-step="designs"] .choice-card.design-grid {
  grid-template-columns: var(--frame-col-width, 96px) minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 6px 16px;
  min-height: 0;
  padding: 16px;
  text-align: left;
}

/* A largura/altura da imagem ja vem em style inline, a partir de frameWidth/frameHeight
   em quadros.json. Nao repetimos aqui nenhuma medida: so a colocacao na grelha.
   Nota: nao usar max-width em % nesta celula — a coluna e "auto", logo a coluna
   dependeria do item e o item da coluna, e o layout colapsa. */
.product-quadros .design-grid[data-choice-grid-step="designs"] .choice-card.design-grid > .design-image,
.product-quadros .design-grid[data-choice-grid-step="designs"] .choice-card.design-grid > .design-card-media {
  grid-row: 1 / span 2;
  grid-column: 1;
  align-self: center;
  justify-self: center;
}

.product-quadros .design-grid[data-choice-grid-step="designs"] .choice-card.design-grid .choice-copy {
  grid-row: 1;
  grid-column: 2;
  align-self: end;
  justify-self: stretch;
  justify-items: start;
  gap: 6px;
  width: 100%;
  text-align: left;
}

/* Espacamento vertical vem todo do gap da grelha; sem margens proprias, senao
   somam-se ao gap e as linhas deixam de ficar equidistantes. */
.product-quadros .design-grid[data-choice-grid-step="designs"] .choice-card.design-grid > .quadros-design-size {
  grid-area: 2 / 2 / auto / auto;
  place-self: start start;
}

.quadros-design-size {
  color: var(--moss) !important;
  font-size: 0.94rem !important;
  font-weight: 900;
}

.product-quadros .design-grid[data-choice-grid-step="designs"] .choice-card.design-grid > .quadros-design-price {
  grid-area: 1 / 3 / span 2 / auto;
  place-self: center end;
}

.quadros-design-price {
  color: var(--moss);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.16rem;
  font-weight: 900;
  line-height: 1.15;
  text-align: right;
  white-space: nowrap;
}

.product-quadros .design-grid[data-choice-grid-step="designs"] .choice-card.design-grid .choice-copy strong {
  font-size: 1.08rem;
  line-height: 1.18;
}

.product-quadros .design-grid[data-choice-grid-step="designs"] .choice-card.design-grid .choice-copy span {
  font-size: 0.92rem;
  line-height: 1.35;
}

/* Abaixo de ~480px as tres colunas deixam menos de metade da largura para o titulo,
   que passa a partir palavra a palavra. Aqui o preco desce para a linha de baixo e
   a imagem ocupa as duas linhas, devolvendo ao texto a largura toda que sobra. */
@media (max-width: 480px) {
  .product-quadros .design-grid[data-choice-grid-step="designs"] .choice-card.design-grid {
    grid-template-columns: min(var(--frame-col-width, 96px), 30vw) minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    gap: 6px 12px;
    padding: 12px;
  }

  /* O tamanho passa para debaixo da imagem, onde sobra espaco, e o texto ocupa
     as duas primeiras linhas. O preco fecha o card, encostado a direita. */
  .product-quadros .design-grid[data-choice-grid-step="designs"] .choice-card.design-grid > .design-image,
  .product-quadros .design-grid[data-choice-grid-step="designs"] .choice-card.design-grid > .design-card-media {
    grid-row: 1;
    grid-column: 1;
    align-self: start;
  }

  .product-quadros .design-grid[data-choice-grid-step="designs"] .choice-card.design-grid .choice-copy {
    grid-row: 1 / span 2;
    grid-column: 2;
    align-self: start;
  }

  .product-quadros .design-grid[data-choice-grid-step="designs"] .choice-card.design-grid > .quadros-design-size {
    grid-area: 2 / 1 / auto / auto;
    place-self: start center;
    text-align: center;
  }

  .product-quadros .design-grid[data-choice-grid-step="designs"] .choice-card.design-grid > .quadros-design-price {
    grid-area: 3 / 1 / auto / span 2;
    place-self: center end;
    font-size: 0.98rem;
  }
}

.product-quadros .text-grid[data-choice-grid-step="frame_size"] .choice-card {
  grid-template-columns: 92px minmax(0, 1fr);
  align-items: center;
  align-content: center;
  gap: 14px;
  min-height: 132px;
  padding: 14px;
  text-align: left;
}

.product-quadros .text-grid[data-choice-grid-step="frame_size"] .choice-copy {
  justify-items: start;
  text-align: left;
}

.product-quadros .text-grid[data-choice-grid-step="frame_size"] .option-image {
  width: 88px;
  max-width: 100%;
}

.product-quadros .text-grid[data-choice-grid-step="frame_size"] .choice-note {
  margin-top: 6px;
  color: var(--moss);
  font-size: 1.08rem;
  font-weight: 900;
}

.palette-picker {
  display: grid;
  gap: 18px;
  min-width: 0;
}

.quadros-color-modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: 8px;
}

.quadros-color-mode {
  min-height: 52px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--ui-radius);
  background: var(--surface-cream-soft);
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 850;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
}

.quadros-color-mode:hover,
.quadros-color-mode:focus-visible {
  border-color: var(--moss);
  transform: translateY(-1px);
}

.quadros-color-mode.is-active {
  border-color: var(--moss);
  background: var(--moss);
  color: #fffdf8;
  box-shadow: 0 5px 14px rgba(78, 55, 12, 0.16);
}


.quadros-photo-color-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(220px, 0.85fr);
  gap: 12px;
}

.quadros-photo-color-panel.is-preview-only {
  grid-template-columns: minmax(0, 1fr);
}

.quadros-photo-color-preview,
.quadros-photo-color-analysis {
  min-height: 180px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--ui-radius);
  background: var(--surface-stone);
}

.quadros-photo-color-preview img {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 180px;
  object-fit: cover;
}

.quadros-photo-color-analysis {
  display: grid;
  align-content: center;
  gap: 8px;
  padding: 14px;
}

.quadros-photo-color-analysis h3,
.quadros-photo-color-analysis p {
  margin: 0;
}

.quadros-photo-color-analysis h3 {
  color: var(--moss);
  font-size: 1rem;
}

.quadros-photo-color-analysis p {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.4;
}

.quadros-detected-colors {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  height: 42px;
  overflow: hidden;
  border: 1px solid rgba(46, 36, 19, 0.14);
  border-radius: 6px;
}

.quadros-detected-colors span {
  background: var(--detected-color);
}

.quadros-analysis-status {
  color: var(--moss) !important;
  font-weight: 850;
}




.individual-color-grid.quadros-color-family-grid {
  --quadros-grid-gap: 7px;
  --quadros-tone-size: 48px;
  position: relative;
  grid-template-columns: repeat(6, minmax(54px, 1fr));
  gap: var(--quadros-grid-gap);
}

.quadros-color-family {
  overflow: hidden;
  padding: 0;
  font: inherit;
}

.individual-color-choice.quadros-color-family > span {
  overflow: hidden;
  background: linear-gradient(
    125deg,
    var(--individual-color-light, var(--individual-color)) 0%,
    var(--individual-color) 52%,
    var(--individual-color-dark, var(--individual-color)) 100%
  );
}

.individual-color-choice.quadros-color-family > span::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.22), transparent 45%, rgba(0, 0, 0, 0.08));
  pointer-events: none;
}

.quadros-color-family > strong {
  position: absolute;
  right: 4px;
  bottom: 4px;
  left: 4px;
  z-index: 2;
  overflow: hidden;
  padding: 3px 4px;
  border-radius: 4px;
  background: rgba(38, 27, 12, 0.58);
  color: #fffdf8;
  font-size: clamp(0.58rem, 1.5vw, 0.7rem);
  line-height: 1.05;
  text-align: center;
  text-overflow: ellipsis;
}

.quadros-color-family[data-color-id="branco-creme"] > strong,
.quadros-color-family[data-color-id="rosa-bebe"] > strong,
.quadros-color-family[data-color-id="azul-claro"] > strong,
.quadros-color-family[data-color-id="verde-salvia"] > strong,
.quadros-color-family[data-color-id="cinzento"] > strong {
  background: rgba(255, 253, 248, 0.88);
  color: #3b260c;
}

/* Um visto por cada tom desta família usado nos quadrados da composição. */
.quadros-checks {
  position: absolute;
  right: 3px;
  bottom: 2px;
  z-index: 4;
  display: flex;
  gap: 2px;
  pointer-events: none;
}

.quadros-check {
  display: grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--moss);
  color: #fff;
  font-size: 0.66rem;
  font-style: normal;
  font-weight: 900;
  pointer-events: none;
}

/* Os 3 tons: fora do fluxo, em triângulo sobre a célula que o quadrado clicado
   libertou. O JS (quadrosPlaceToneStrip) dá as coordenadas de cada um. */
.quadros-tone-strip {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  pointer-events: none;
}

.quadros-tone-strip .quadros-tone-swatch {
  position: absolute;
  z-index: 5;
  width: var(--quadros-tone-size, 40px);
  height: var(--quadros-tone-size, 40px);
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  box-shadow: 0 3px 10px rgba(46, 36, 19, 0.26), 0 0 0 2px var(--card);
  pointer-events: auto;
}

.quadros-tone-strip .quadros-tone-swatch > span {
  inset: 3px;
  border-radius: 50%;
}

.quadros-tone-strip .quadros-tone-swatch--top {
  left: var(--quadros-tone-top-x, 0px);
  top: var(--quadros-tone-top-y, 0px);
}

.quadros-tone-strip .quadros-tone-swatch--left {
  left: var(--quadros-tone-left-x, 0px);
  top: var(--quadros-tone-left-y, 0px);
}

.quadros-tone-strip .quadros-tone-swatch--right {
  left: var(--quadros-tone-right-x, 0px);
  top: var(--quadros-tone-right-y, 0px);
}

.quadros-tone-strip .quadros-tone-swatch.is-selected {
  border-color: var(--moss);
  box-shadow: 0 0 0 3px var(--moss), 0 3px 10px rgba(46, 36, 19, 0.26);
}

/* O quadrado clicado desaparece — é dele que os círculos nascem — mas fica no
   DOM para a grelha não refluir. */
.individual-color-choice.quadros-color-family.is-expanded {
  opacity: 0;
  pointer-events: none;
}

/* Escolhida: mostra o tom exacto, sólido, em vez do degradê dos três tons. */
.individual-color-choice.quadros-color-family.is-toned > span {
  background: var(--individual-color);
}

.quadros-tone-swatch > span {
  background:
    linear-gradient(125deg, rgba(255, 255, 255, 0.22), transparent 46%, rgba(0, 0, 0, 0.08)),
    var(--individual-color);
}

.quadros-suggested-palette {
  width: 100%;
  font: inherit;
  text-align: left;
}

.quadros-suggested-palette small {
  display: block;
  color: var(--muted);
  font-size: 0.74rem;
  line-height: 1.25;
  text-align: center;
}

.quadros-palette-empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 18px;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 700px) {
  .quadros-photo-color-panel {
    grid-template-columns: 1fr;
  }

  .quadros-photo-color-preview,
  .quadros-photo-color-preview img,
  .quadros-photo-color-analysis {
    min-height: 148px;
  }

  .individual-color-grid.quadros-color-family-grid {
    --quadros-grid-gap: 6px;
    --quadros-tone-size: 44px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}

@media (max-width: 430px) {
  .quadros-color-modes {
    grid-template-columns: 1fr;
  }

  .quadros-color-mode {
    min-height: 44px;
  }

  /* Telemóvel: 90%+ das visitas. Quadrados mais pequenos, menos scroll. */
  .individual-color-grid.quadros-color-family-grid {
    --quadros-grid-gap: 6px;
    --quadros-tone-size: 40px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

.palette-composition {
  --palette-slot-size: clamp(68px, 20vw, 84px);
  display: grid;
  grid-template-columns: repeat(var(--palette-slot-count, 3), var(--palette-slot-size));
  justify-self: center;
  width: auto;
  max-width: 100%;
  height: var(--palette-slot-size);
  margin: 2px auto 4px;
  overflow: hidden;
  border: 1px solid rgba(46, 36, 19, 0.24);
  border-radius: 6px;
  background: var(--surface-stone);
  box-shadow: 0 8px 24px rgba(46, 36, 19, 0.08);
}

.palette-composition__slot {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--palette-slot-size);
  height: var(--palette-slot-size);
  aspect-ratio: 1 / 1;
  border-right: 1px dashed rgba(114, 85, 30, 0.28);
  background: var(--surface-stone);
}

.palette-composition__slot:not(.is-filled)::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px dashed rgba(114, 85, 30, 0.32);
  border-radius: 3px;
  pointer-events: none;
}

.palette-composition__slot:not(.is-filled)::after {
  content: "?";
  position: relative;
  color: rgba(73, 78, 58, 0.3);
  font-size: 1.65rem;
  font-weight: 900;
  line-height: 1;
}

.palette-composition__slot:last-child {
  border-right: 0;
}

.palette-composition__slot.is-filled {
  border-right-style: solid;
  background: var(--palette-preview-color);
}

.quadros-color-slot {
  padding: 0;
  border-top: 0;
  border-bottom: 0;
  border-left: 0;
  font: inherit;
  cursor: pointer;
  appearance: none;
}

/* O anel do quadrado activo tem de ser um pseudo-elemento acima da água
   (.pcs__canvas, z-index 1) e do reflexo de vidro (::after, z-index 3) — um
   box-shadow no próprio botão fica pintado por baixo dos filhos. */
/* O quadrado activo não leva moldura — é marcado por uma setinha por baixo,
   ver .quadros-active-marker. */
.quadros-color-composition {
  /* Tem de acompanhar o valor em .palette-composition (fonte de verdade):
     a setinha desloca-se em múltiplos do tamanho do quadrado. */
  --palette-slot-size: clamp(68px, 20vw, 84px);
  position: relative;
  padding-bottom: 11px;
}

.quadros-active-marker {
  position: absolute;
  bottom: 1px;
  left: calc(50% + var(--marker-shift, 0) * var(--palette-slot-size));
  width: 0;
  height: 0;
  border-right: 6px solid transparent;
  border-bottom: 7px solid color-mix(in srgb, var(--moss) 78%, transparent);
  border-left: 6px solid transparent;
  transform: translateX(-50%);
  pointer-events: none;
}

.palette-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.palette-suggestions-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface-stone);
  color: var(--moss);
  font-weight: 850;
  text-align: left;
  cursor: pointer;
}

.palette-suggestions-toggle b {
  flex: 0 0 auto;
  font-size: 1.2rem;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform 180ms ease;
}

.palette-suggestions-toggle[aria-expanded="true"] b {
  transform: rotate(180deg);
}

.palette-suggestions {
  display: grid;
  gap: 10px;
}

.palette-suggestions[hidden] {
  display: none;
}

.palette-mia-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px 12px;
  border: 1px solid rgba(142, 103, 31, 0.3);
  border-radius: var(--ui-radius);
  background: var(--card);
  color: var(--ink);
  font-weight: 850;
  cursor: pointer;
}

.palette-mia-choice.is-selected,
.palette-mia-choice:has(input:checked) {
  border-color: var(--moss);
  background: var(--surface-gold-soft);
}

.palette-mia-choice input {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--moss);
}

.palette-choice-wrap,
.individual-color-wrap {
  position: relative;
  min-width: 0;
}

.palette-choice {
  display: grid;
  gap: 9px;
  min-height: 96px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fffdf8;
  color: var(--ink);
  cursor: pointer;
}

.palette-choice.is-selected {
  border-color: var(--moss);
  box-shadow: inset 0 0 0 2px var(--moss);
}

.palette-choice input,
.individual-color-choice input,
.order-upload-button input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.palette-swatches {
  display: grid;
  grid-template-columns: repeat(var(--palette-swatch-count, 3), 1fr);
  height: 44px;
  overflow: hidden;
  border: 1px solid rgba(46, 36, 19, 0.18);
  border-radius: 5px;
}

.palette-swatches span {
  background: var(--palette-color);
}

.palette-choice strong {
  font-size: 0.9rem;
  line-height: 1.25;
  text-align: center;
}

.individual-color-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.individual-color-heading h3 {
  margin: 0;
  font-size: 1rem;
}

.individual-color-heading span {
  color: var(--moss);
  font-weight: 850;
}

.individual-color-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(36px, 1fr));
  align-items: start;
  gap: 8px;
}

.individual-color-choice {
  position: relative;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(46, 36, 19, 0.2);
  border-radius: 5px;
  background: #fffdf8;
  cursor: pointer;
}

.individual-color-choice > span {
  position: absolute;
  inset: 4px;
  border-radius: 3px;
  background: var(--individual-color);
}

.individual-color-choice.is-selected {
  border-color: var(--moss);
  box-shadow: 0 0 0 3px var(--moss);
}

.individual-color-choice.is-selected::after {
  content: "✓";
  position: absolute;
  right: 3px;
  bottom: 2px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--moss);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 900;
}

.individual-color-choice.is-disabled {
  cursor: not-allowed;
  opacity: 0.38;
}

.palette-admin-tools {
  position: relative;
  inset: auto;
  margin-top: 6px;
}

.individual-color-admin {
  display: flex;
  gap: 4px;
  margin-top: 5px;
}

.individual-color-admin input {
  width: 100%;
  min-width: 0;
  height: 30px;
  padding: 1px;
}

.individual-color-admin button {
  width: 30px;
  min-width: 30px;
  padding: 0;
}

.order-photo-upload {
  display: grid;
  gap: 14px;
}

.order-upload-button {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 4px 12px;
  min-height: 92px;
  padding: 16px;
  border: 2px solid var(--moss);
  border-radius: var(--radius);
  background: #fffdf8;
  color: var(--ink);
  cursor: pointer;
}

.order-upload-button-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--moss);
  color: #fff;
}

.order-upload-button:has(small) .order-upload-button-icon {
  grid-row: 1 / span 2;
}

.order-upload-button-icon svg,
.order-upload-file-icon svg {
  width: 24px;
  height: 24px;
}

.order-upload-button strong {
  align-self: center;
  font-size: 1.05rem;
  line-height: 1.2;
}

.order-upload-button small {
  color: var(--muted);
  font-size: 0.82rem;
}

.order-upload-button.is-disabled {
  border-color: #aaa69d;
  background: #ecebe7;
  color: #77736d;
  cursor: not-allowed;
  opacity: 0.8;
}

.order-upload-button.is-disabled .order-upload-button-icon {
  background: #96928b;
}

.order-upload-list {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.order-upload-item {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fffdf8;
}

.order-upload-item img,
.order-upload-file-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 5px;
  object-fit: cover;
  background: var(--linen);
  color: var(--moss);
}

.order-upload-item--audio {
  grid-template-columns: minmax(0, 1fr) 40px;
}

.order-upload-item--audio audio {
  grid-column: 1 / -1;
  width: 100%;
  height: 42px;
}

.order-upload-item--audio > span:nth-child(2) {
  grid-column: 1;
}

.order-upload-item--audio > button {
  grid-column: 2;
}

.order-upload-item > span:nth-child(2) {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.order-upload-item strong {
  overflow: hidden;
  font-size: 0.88rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-upload-item small,
.order-upload-status,
.order-upload-optional {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
}

.order-upload-item button {
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font-size: 1.35rem;
  cursor: pointer;
}

.order-upload-progress {
  display: grid;
  gap: 8px;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: var(--ui-radius);
  background: var(--surface-stone);
}

.order-upload-progress__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 0.8rem;
}

.order-upload-progress__heading span {
  font-weight: 800;
}

.order-upload-progress__heading strong {
  color: var(--moss);
  font-size: 0.82rem;
  text-align: right;
}

.order-upload-progress__track {
  position: relative;
  height: 14px;
  overflow: hidden;
  border: 1px solid rgba(114, 85, 30, 0.24);
  border-radius: 999px;
  background: var(--surface-cream-soft);
  box-shadow: inset 0 1px 3px rgba(78, 55, 12, 0.14);
}

.order-upload-progress__track > span {
  position: absolute;
  inset-block: -1px;
  left: 0;
  min-width: 18px;
  border-radius: inherit;
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.38) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.38) 50%,
      rgba(255, 255, 255, 0.38) 75%,
      transparent 75%,
      transparent),
    linear-gradient(180deg, #edc45c 0%, var(--gold) 50%, #b97817 100%);
  background-size: 20px 20px, 100% 100%;
  box-shadow: inset 0 1px 2px rgba(255, 251, 226, 0.5);
  transition: width 180ms linear;
  animation: order-upload-stripes 650ms linear infinite;
}

.order-upload-progress.is-preparing .order-upload-progress__track > span {
  animation:
    order-upload-preparing 1.1s ease-in-out infinite alternate,
    order-upload-stripes 650ms linear infinite;
}

@keyframes order-upload-stripes {
  to { background-position: 20px 0, 0 0; }
}

@keyframes order-upload-preparing {
  from { transform: translateX(-35%); }
  to { transform: translateX(215%); }
}

.photo-help-choice {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-cream-soft);
  color: var(--ink);
  font-weight: 750;
  cursor: pointer;
}

@media (max-width: 430px) {
  .order-upload-progress__heading {
    display: grid;
    gap: 2px;
  }

  .order-upload-progress__heading strong {
    text-align: left;
  }
}

.photo-help-choice input {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}

.photo-help-message {
  margin: -4px 0 0;
  color: var(--moss);
  font-size: 0.9rem;
  font-weight: 750;
  line-height: 1.4;
}

.order-media-attachments,
.order-photo-control,
.order-audio-control {
  display: grid;
  gap: 10px;
}

.order-media-attachments {
  gap: 14px;
  margin-top: 14px;
}

.order-audio-record-button {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 12px 14px;
  border: 1px solid var(--moss);
  border-radius: var(--radius);
  background: #fffdf8;
  color: var(--ink);
  text-align: left;
  touch-action: none;
  user-select: none;
  cursor: pointer;
}

.order-audio-record-button > span:last-child {
  display: grid;
  gap: 3px;
}

.order-audio-record-button strong,
.order-audio-record-button small {
  line-height: 1.25;
}

.order-audio-record-button small {
  color: var(--muted);
}

.order-audio-record-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--moss);
  color: #fff;
}

.order-audio-record-icon svg {
  width: 24px;
  height: 24px;
}

.order-audio-record-button.is-recording {
  border-color: #a8322b;
  background: #fff1ef;
}

.order-audio-record-button.is-recording .order-audio-record-icon {
  background: #a8322b;
}

.order-audio-record-button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.order-upload-error {
  margin: 0;
}

.order-upload-popup {
  position: relative;
  max-width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(155, 63, 53, 0.24);
  border-radius: 14px;
  background: #fff8f3;
  box-shadow: 0 12px 28px rgba(97, 70, 20, 0.16);
  color: #9b3f35;
  font-size: 0.88rem;
  line-height: 1.3;
}

.order-upload-popup::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 24px;
  width: 12px;
  height: 12px;
  border-top: 1px solid rgba(155, 63, 53, 0.24);
  border-left: 1px solid rgba(155, 63, 53, 0.24);
  background: #fff8f3;
  transform: rotate(45deg);
}

html[data-theme="dark"] .palette-choice,
html[data-theme="dark"] .individual-color-choice,
html[data-theme="dark"] .order-upload-button,
html[data-theme="dark"] .order-upload-item {
  background: var(--card);
}

html[data-theme="dark"] .order-audio-record-button {
  background: var(--card);
}

html[data-theme="dark"] .photo-help-choice {
  background: var(--linen);
}

.choice-card.design-grid {
  grid-template-columns: 1fr;
  grid-template-rows: 106px auto;
  align-content: start;
  justify-items: center;
  gap: 8px;
  min-height: 184px;
  text-align: center;
}

.choice-card.design-grid .design-image {
  grid-row: 1;
  align-self: start;
  width: 102px;
}

.choice-card.design-grid .design-card-media {
  position: relative;
  grid-row: 1;
  display: inline-grid;
  place-items: center;
  width: var(--frame-width-px, max-content);
  height: var(--frame-height-px, auto);
  aspect-ratio: var(--frame-aspect, auto);
  max-width: 100%;
  justify-self: center;
  align-self: start;
}

.choice-card.design-grid .design-card-media .design-image {
  grid-row: auto;
}

.choice-card.design-grid .design-card-media .design-image.uploaded-image {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.choice-card.design-grid .choice-copy {
  grid-row: 2;
  justify-items: center;
}

.choice-card.design-grid .choice-copy strong {
  max-width: 100%;
  font-size: 0.98rem;
  line-height: 1.12;
}

.choice-card.design-grid .choice-copy span {
  max-width: 100%;
  font-size: 0.88rem;
}


/* SORTIDO_SELECT_ALL_V1: ações rápidas no passo de designs.
   Usam a mesma base visual dos cartões normais (.choice-card). */
.design-action-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: 10px;
}

.design-action-card {
  position: relative;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  height: 100%;
  min-height: 86px;
  padding: 12px;
  color: var(--ink);
  text-align: left;
}

.design-action-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--linen);
  color: var(--moss);
  font-weight: 950;
}

.design-action-card .choice-copy strong {
  overflow-wrap: anywhere;
}

.design-action-message {
  margin: 10px 0 0;
}

.assorted-pill {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  width: fit-content;
  max-width: 100%;
  min-height: 34px;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--moss);
  border-radius: 999px;
  background: #fffdf8;
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 850;
  line-height: 1.35;
  text-align: left;
  white-space: normal;
}

.confirm-design-row--assorted {
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
}

.confirm-design-row--assorted span {
  color: var(--muted);
  font-weight: 650;
  line-height: 1.35;
}

@media (max-width: 390px) {
  .design-action-grid {
    gap: 8px;
  }

.design-action-card {
  grid-template-columns: 32px minmax(0, 1fr);
  min-height: 78px;
  padding: 10px 46px 10px 10px;
}

  .design-action-icon {
    width: 32px;
    height: 32px;
  }
}

/* REVIEW_BUBBLES_V1: testemunhos flutuantes exclusivos da homepage. */
.review-bubbles-host {
  --review-bottom: 18px;
  position: fixed;
  left: max(14px, env(safe-area-inset-left));
  bottom: var(--review-bottom);
  z-index: 950;
  width: min(372px, calc(100vw - 28px));
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px) scale(0.98);
  transform-origin: left bottom;
  transition: bottom 0.24s ease, opacity 0.28s ease, transform 0.28s ease;
}

.review-bubbles-host.is-ready {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.review-bubble-card {
  --review-drag-x: 0px;
  position: relative;
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-height: 108px;
  padding: 10px 12px 10px 10px;
  overflow: visible;
  border: 1px solid rgba(102, 123, 77, 0.16);
  border-radius: 20px;
  background: rgba(255, 253, 248, 0.97);
  box-shadow: 0 18px 48px -24px rgba(45, 52, 36, 0.52), 0 5px 16px rgba(45, 52, 36, 0.1);
  color: #3b3d35;
  text-decoration: none;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.review-bubble-card.has-link {
  cursor: pointer;
}

.review-bubble-card.has-link:hover {
  border-color: rgba(114, 85, 30, 0.3);
  box-shadow: 0 20px 50px -24px rgba(45, 52, 36, 0.58), 0 6px 18px rgba(45, 52, 36, 0.12);
}

.review-bubble-card::after {
  content: "";
  position: absolute;
  left: 45px;
  bottom: -7px;
  width: 15px;
  height: 15px;
  border-right: 1px solid rgba(102, 123, 77, 0.13);
  border-bottom: 1px solid rgba(102, 123, 77, 0.13);
  background: #fffdf8;
  transform: rotate(45deg);
}

.review-bubble-card:focus-visible {
  outline: 2px solid rgba(114, 85, 30, 0.28);
  outline-offset: 3px;
}

.review-bubble-card.is-dragging {
  transform: translateX(var(--review-drag-x));
  transition: none;
  cursor: grabbing;
}

.review-bubble-card.is-entering-next {
  animation: review-bubble-enter-next 0.28s ease both;
}

.review-bubble-card.is-entering-previous {
  animation: review-bubble-enter-previous 0.28s ease both;
}

@keyframes review-bubble-enter-next {
  from { opacity: 0.34; transform: translateX(14px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes review-bubble-enter-previous {
  from { opacity: 0.34; transform: translateX(-14px); }
  to { opacity: 1; transform: translateX(0); }
}

.review-bubble-image-wrap {
  position: relative;
  width: 88px;
  height: 88px;
}

.review-bubble-image {
  display: block;
  width: 100%;
  height: 100%;
  border: 3px solid #fffdf8;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 6px 16px rgba(45, 52, 36, 0.2);
  pointer-events: none;
}

.review-bubble-content {
  min-width: 0;
}

.review-bubble-name {
  margin: 0 0 3px;
  color: #765044;
  font-size: 0.84rem;
  font-weight: 850;
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.review-bubble-text {
  margin: 0 0 7px;
  color: #44463d;
  font-size: 0.85rem;
  font-weight: 650;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.review-bubble-stars {
  display: block;
  color: #f4bd35;
  font-size: 1.02rem;
  line-height: 1;
  letter-spacing: 0.045em;
  text-shadow: 0 1px 0 rgba(158, 111, 4, 0.14);
  white-space: nowrap;
}

html[data-theme="dark"] .review-bubble-card {
  border-color: rgba(244, 224, 169, 0.18);
  background: rgba(35, 37, 35, 0.97);
  box-shadow: 0 18px 48px -20px rgba(0, 0, 0, 0.72);
  color: #f7e9c4;
}

html[data-theme="dark"] .review-bubble-card::after {
  border-color: rgba(244, 224, 169, 0.16);
  background: #232523;
}

html[data-theme="dark"] .review-bubble-image {
  border-color: #232523;
}

html[data-theme="dark"] .review-bubble-name {
  color: #e2bca7;
}

html[data-theme="dark"] .review-bubble-text {
  color: #f1ead9;
}

@media (max-width: 540px) {
  .review-bubbles-host {
    left: max(10px, env(safe-area-inset-left));
    width: min(290px, calc(100vw - 84px - env(safe-area-inset-right)));
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  .review-bubbles-host.review-position-right {
    right: max(10px, env(safe-area-inset-right));
    left: auto;
    bottom: calc(var(--review-bottom, 12px) + 72px);
  }

  .review-bubble-card,
  .review-bubble-card.review-size-compact,
  .review-bubble-card.review-size-large,
  .review-bubble-card.without-image {
    grid-template-columns: 1fr;
    gap: 0;
    min-height: 0;
    padding: 8px 30px 8px 12px;
    border-radius: 14px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  .review-bubble-image-wrap,
  .review-size-compact .review-bubble-image-wrap,
  .review-size-large .review-bubble-image-wrap {
    display: none;
  }

  .review-bubble-name {
    margin-bottom: 2px;
    font-size: 0.84rem;
  }

  .review-bubble-text {
    margin-bottom: 5px;
    font-size: 0.85rem;
    line-height: 1.2;
  }

  .review-bubble-stars {
    font-size: 1.02rem;
  }

  .review-bubble-card::after {
    left: 24px;
  }

  .review-position-right .review-bubble-card::after {
    right: 24px;
    left: auto;
  }
}

/* REVIEW_BUBBLES_V2: opções configuradas em reviews.html. */
.review-bubbles-host.review-position-right {
  right: max(14px, env(safe-area-inset-right));
  left: auto;
  bottom: calc(var(--review-bottom, 18px) + 74px);
  transform-origin: right bottom;
}

.review-position-right .review-bubble-card::after {
  right: 45px;
  left: auto;
}

.review-bubble-card.without-image {
  grid-template-columns: 1fr;
  min-height: 88px;
  padding: 14px 16px;
}

.review-bubble-card.review-size-compact {
  grid-template-columns: 66px minmax(0, 1fr);
  min-height: 84px;
  gap: 9px;
  padding: 8px;
}

.review-size-compact .review-bubble-image-wrap { width: 66px; height: 66px; }
.review-size-compact .review-bubble-name { font-size: 0.76rem; }
.review-size-compact .review-bubble-text { font-size: 0.76rem; }

.review-bubble-card.review-size-large {
  grid-template-columns: 108px minmax(0, 1fr);
  min-height: 132px;
  gap: 15px;
  padding: 12px;
}

.review-size-large .review-bubble-image-wrap { width: 108px; height: 108px; }
.review-size-large .review-bubble-name { font-size: 0.92rem; }
.review-size-large .review-bubble-text { font-size: 0.94rem; line-height: 1.28; }

/* REVIEW_MOBILE_COPY_V1: o nome genérico lê-se como introdução ao testemunho.
   Os tamanhos repetem explicitamente os de desktop para não encolherem no
   telemóvel, incluindo nas variantes compacta e grande. */
@media (max-width: 540px) {
  .review-bubble-name--fallback::after { content: ":"; }
  .review-bubble-name { font-size: 0.84rem; }
  .review-bubble-text { font-size: 0.85rem; }
  .review-size-compact .review-bubble-name,
  .review-size-compact .review-bubble-text { font-size: 0.76rem; }
  .review-size-large .review-bubble-name { font-size: 0.92rem; }
  .review-size-large .review-bubble-text { font-size: 0.94rem; line-height: 1.28; }
}

.review-image-rounded .review-bubble-image { border-radius: 16px; }
.review-image-square .review-bubble-image { border-radius: 2px; }
.review-image-circle .review-bubble-image { border-radius: 50%; }

.review-bubble-card.review-theme-rose { background: rgba(255, 245, 241, 0.98); border-color: rgba(178, 111, 92, 0.23); }
.review-bubble-card.review-theme-rose::after { background: #fff5f1; border-color: rgba(178, 111, 92, 0.2); }
.review-theme-rose .review-bubble-name { color: #925d50; }

.review-bubble-card.review-theme-sage { background: rgba(244, 248, 237, 0.98); border-color: rgba(91, 113, 69, 0.24); }
.review-bubble-card.review-theme-sage::after { background: #f4f8ed; border-color: rgba(91, 113, 69, 0.2); }
.review-theme-sage .review-bubble-name { color: #5f7549; }

.review-bubble-card.review-theme-dark { background: rgba(35, 37, 35, 0.98); border-color: rgba(244, 224, 169, 0.18); }
.review-bubble-card.review-theme-dark::after { background: #232523; border-color: rgba(244, 224, 169, 0.16); }
.review-theme-dark .review-bubble-name { color: #e2bca7; }
.review-theme-dark .review-bubble-text { color: #f1ead9; }
.review-theme-dark .review-bubble-image { border-color: #232523; }

.review-bubble-card.without-image {
  grid-template-columns: 1fr;
}

.product-shape-rect .choice-card.design-grid {
  grid-template-rows: 136px auto;
  min-height: 214px;
}

.choice-card input[type="radio"],
.choice-card input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.choice-card:has(input:checked),
.choice-card.is-selected {
  border-color: var(--moss);
  outline: 3px solid rgba(125, 139, 98, 0.24);
}

.choice-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.choice-copy strong,
.summary-list dd {
  font-weight: 850;
}

.choice-copy span,
.choice-note,
.details-grid label > span,
.summary-list dt,
.empty-state {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.4;
}

.choice-note {
  font-weight: 800;
}

.option-image,
.design-image {
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 4;
  border: 2px solid #f3df9e;
  border-radius: 7px;
  background: var(--linen);
  box-shadow: inset 0 0 0 1px rgba(142, 103, 31, 0.16), 0 10px 22px rgba(46, 36, 19, 0.08);
}

.product-shape-round .option-image,
.product-shape-round .design-image {
  aspect-ratio: 1;
  border-radius: 50%;
}

.product-shape-round .design-image.item-frame-rounded-square,
.product-shape-round .option-image.item-frame-rounded-square,
.product-shape-round .uploaded-image.item-frame-rounded-square {
  border-radius: 14px;
}

.option-image {
  width: 70px;
}

.uploaded-image {
  background-position: center;
  border-color: #f3df9e;
  margin:
    var(--image-frame-margin-top, 0px)
    var(--image-frame-margin-right, 0px)
    var(--image-frame-margin-bottom, 0px)
    var(--image-frame-margin-left, 0px);
  transform: none;
  z-index: 1;
}

.option-image.pin-large {
  width: 86px;
}

.design-image {
  width: 96px;
}

.pin-small,
.pin-large {
  background:
    radial-gradient(circle at 50% 50%, var(--gold) 0 24%, transparent 25%),
    var(--linen);
}

.product-shape-rect .pin-small,
.product-shape-rect .pin-large {
  background:
    linear-gradient(160deg, rgba(215, 170, 54, 0.38), rgba(255, 253, 245, 0.28)),
    var(--linen);
}

.flowers {
  background:
    radial-gradient(circle at 32% 36%, #f6d9dc 0 10%, transparent 11%),
    radial-gradient(circle at 64% 42%, #dce7c9 0 11%, transparent 12%),
    radial-gradient(circle at 48% 68%, #d4aa3a 0 9%, transparent 10%),
    #fff7e6;
}

.blue-gold {
  background:
    radial-gradient(circle at 42% 42%, rgba(255, 253, 248, 0.7) 0 18%, transparent 19%),
    linear-gradient(135deg, #5f7895, #e5c65d);
}

.text-pin {
  background: #f7eddc;
  color: var(--moss);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.2rem;
}

.leaves {
  background:
    radial-gradient(ellipse at 32% 52%, #b9963a 0 14%, transparent 15%),
    radial-gradient(ellipse at 62% 42%, #8b6b25 0 13%, transparent 14%),
    #f5ead7;
}

.neutral {
  background: linear-gradient(135deg, #fff8ec 0 28%, #d8c7b4 28% 55%, #efe7d8 55%);
}

.custom-pin {
  background: conic-gradient(from 10deg, #f3d3c9, #dce7c9, #d7e2ee, #f4e4b8, #f3d3c9);
}

.details-grid {
  grid-template-columns: 1fr;
}

.details-section {
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid rgba(202, 162, 59, 0.34);
  border-radius: var(--radius);
  background: var(--surface-cream-soft);
}

.details-section + .details-section {
  margin-top: 2px;
}

.details-section h3,
.details-section p,
.details-section-note,
.privacy-note {
  margin: 0;
}

/* REORDER_CONTACT_BLOCK_V1: nota explicativa que aparece DEPOIS dos campos
   da secção quando o campo tem sectionTextAfter: true. Visualmente igual ao
   <p> normal mas com pequeno espaço acima para se separar dos inputs. */
.details-section-note {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
  margin-top: 4px;
}

.details-section h3 {
  color: var(--moss);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.05;
}

.details-section.details-section--no-rule h3 {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

.details-section p,
.privacy-note {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.45;
}

.privacy-note a {
  color: var(--moss);
  font-weight: 850;
}

.example-toggle {
  justify-self: start;
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(202, 162, 59, 0.42);
  border-radius: 999px;
  background: #fffaf0;
  color: var(--moss);
  font-size: 0.92rem;
  font-weight: 850;
}

.details-example {
  display: grid;
}

.details-example-grid {
  display: grid;
  gap: 8px;
}

.details-example-grid.is-multiple {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.details-form-intro {
  display: grid;
  gap: 5px;
  margin-top: 4px;
}

.details-form-intro h3,
.details-form-intro p {
  margin: 0;
}

.details-form-intro h3 {
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.24rem;
  line-height: 1.25;
}

.details-form-intro p {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.45;
}

.details-example-image-button {
  display: block;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  cursor: zoom-in;
}

.details-example-grid:has(.details-example-choice) {
  grid-template-columns: 1fr;
}

.details-example-choice {
  position: relative;
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 112px;
  padding: 8px;
  border: 1px solid rgba(142, 103, 31, 0.28);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  text-align: left;
}

.details-example-choice.is-selected {
  border-color: var(--moss);
  box-shadow: 0 0 0 2px rgba(215, 170, 54, 0.28);
}

.details-example-choice.is-selected::after {
  content: "✓";
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--moss);
  color: #fffdf5;
  font-weight: 900;
}

.details-example-choice .example-image,
.details-example-grid.is-multiple .details-example-choice .example-image {
  width: 104px;
  height: 96px;
  aspect-ratio: auto;
  object-fit: contain;
}

.details-example-choice-copy {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding-right: 30px;
}

.details-example-choice strong {
  font-size: 1rem;
  line-height: 1.3;
}

.details-example-choice small {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.3;
}

.details-example-grid.is-multiple .example-image {
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: contain;
}

.example-image {
  display: block;
  width: 100%;
  max-height: 360px;
  object-fit: contain;
  border: 1px solid rgba(202, 162, 59, 0.42);
  border-radius: var(--radius);
  background: var(--surface-cream-soft);
}

.details-grid label {
  display: grid;
  gap: 8px;
}

.details-skip-choice {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  padding: 10px 12px;
  border: 1px solid rgba(142, 103, 31, 0.3);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  font-weight: 850;
  cursor: pointer;
}

.details-skip-choice:has(input:checked) {
  border-color: var(--moss);
  background: var(--surface-gold-soft);
}

.details-skip-choice input {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--moss);
}

.details-grid label:has(textarea) {
  grid-column: 1 / -1;
}

.details-field-note {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.4;
}

small {
  font-size: 0.84em;
  font-weight: 600;
}

input[type="text"],
input[type="password"],
select,
textarea {
  width: 100%;
  min-height: 48px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
}

input.is-missing,
textarea.is-missing {
  border-color: #b9342b;
  background: #fff7f6;
  box-shadow: 0 0 0 3px rgba(185, 52, 43, 0.16);
}

.details-grid label:has(.is-missing) > span {
  color: #8c3028;
  font-weight: 900;
}

textarea {
  min-height: 76px;
  padding-top: 10px;
  resize: vertical;
}

input:focus,
select:focus,
button:focus-visible,
a:focus-visible {
  outline: 3px solid rgba(212, 170, 58, 0.48);
  outline-offset: 2px;
}

.step-actions,
.actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

/* STEP_ACTIONS_STICKY_MOBILE_V1: em mobile a barra de "Voltar / Continuar"
   fica colada ao fundo do ecra enquanto o formulario esta visivel; ao chegar
   ao fundo da pagina sai do sticky e revela o footer naturalmente. Mantem-se
   dentro do padding do .wizard-shell para nao colidir com o border-radius. */
@media (max-width: 700px) {
  .step-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin-top: 16px;
    padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px));
    background: rgba(255, 253, 248, 0.96);
    border-top: 1px solid var(--line);
    box-shadow: 0 -10px 22px rgba(107, 84, 30, 0.12);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  html[data-theme="dark"] .step-actions {
    background: rgba(28, 28, 28, 0.92);
    border-top-color: var(--line);
    box-shadow: 0 -10px 22px rgba(0, 0, 0, 0.32);
  }

  .product-quadros .cart-entry-actions {
    position: static;
    padding-bottom: 0;
    background: transparent;
    border-top: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

.copy-request {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-stone);
}

.copy-request label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  color: var(--moss);
  font-weight: 850;
}

.copy-request input[type="checkbox"] {
  accent-color: var(--moss);
}

@media (min-width: 701px) {
  .step-actions + .copy-request,
  .step-actions ~ .copy-request,
  .copy-request + .step-actions {
    margin-top: 22px;
  }
}

.button,
.admin-toolbar button,
.admin-login button,
.admin-add,
.admin-card-tools button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 850;
}

.button.primary {
  background: var(--moss);
  color: #fffdf8;
}

.button.secondary {
  border-color: var(--line);
  background: var(--card);
  color: var(--moss);
}

.button:disabled {
  opacity: 0.45;
  cursor: default;
}

.button.is-disabled,
.button[aria-disabled="true"] {
  opacity: 0.58;
  cursor: not-allowed;
  filter: grayscale(0.45);
}

.form-error {
  margin: 0;
  color: #9b3f35;
  font-weight: 850;
}

.summary-list {
  display: grid;
  gap: 9px;
  margin: 0;
}

.summary-list div {
  display: grid;
  grid-template-columns: minmax(96px, 0.38fr) minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-stone);
}

.summary-list dt,
.summary-list dd {
  margin: 0;
}

.confirm-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-stone);
}

.confirm-design-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.confirm-design-row .design-image {
  width: 58px;
  border-width: 5px;
}

.confirm-design-row strong {
  min-width: 0;
  font-size: 0.96rem;
}

.confirm-design-row span {
  color: var(--ink);
  font-weight: 900;
}

.confirm-design-row--assorted span {
  color: var(--muted);
  font-weight: 650;
  line-height: 1.35;
}

.confirm-list {
  display: grid;
  gap: 7px;
  margin: 0;
  padding-top: 4px;
}

/* CONFIRM_REFORMAT_V1: separador subtil entre as 3 secções do resumo
   (encomenda / cartão de apresentação / dados de contacto). */
.confirm-divider {
  border: 0;
  border-top: 1px solid rgba(142, 103, 31, 0.22);
  margin: 14px 0 4px;
}

.confirm-list + .confirm-divider {
  margin-top: 16px;
}

/* CONFIRM_REFORMAT_V1: caixa discreta de aviso de pagamento, mostrada
   imediatamente antes do botão "Enviar pedido". Não bloqueia o submit. */
.payment-notice {
  display: grid;
  gap: 6px;
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 12px;
  background: linear-gradient(180deg, var(--surface-cream) 0%, var(--surface-gold-soft) 100%);
  border: 1px solid rgba(184, 134, 22, 0.42);
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset;
}

.payment-notice strong {
  font-size: 0.98rem;
  font-weight: 850;
  line-height: 1.35;
  color: var(--ink);
}

.payment-notice span {
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--muted);
}

@media (max-width: 540px) {
  .payment-notice {
    padding: 12px 14px;
  }

  .payment-notice strong {
    font-size: 0.94rem;
  }

  .payment-notice span {
    font-size: 0.86rem;
  }
}

html[data-theme="dark"] .payment-notice {
  background: linear-gradient(180deg, rgba(212, 168, 74, 0.16) 0%, rgba(212, 168, 74, 0.06) 100%);
  border-color: rgba(212, 168, 74, 0.45);
}

html[data-theme="dark"] .confirm-divider {
  border-top-color: rgba(255, 255, 255, 0.16);
}

/* COOKIE_BANNER_V1: banner discreto, fixo no fundo do ecrã. Mostra-se com
   transição suave (.is-visible). Em mobile cobre largura total; em desktop
   centra-se. */
.cookie-banner {
  position: fixed;
  left: 50%;
  bottom: 16px;
  transform: translate(-50%, calc(100% + 24px));
  width: min(680px, calc(100% - 24px));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  background: var(--card-bg, var(--surface-cream));
  border: 1px solid var(--card-border, #ead8a9);
  border-radius: 14px;
  box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.25);
  color: var(--ink);
  z-index: 1000;
  transition: transform 0.22s ease, opacity 0.22s ease;
  opacity: 0;
}

.cookie-banner.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
}

.cookie-banner-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.cookie-banner-text strong {
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--ink);
}

.cookie-banner-text a {
  color: var(--moss, #4f7a3a);
  font-size: 0.84rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 700;
}

.cookie-banner-accept {
  flex: 0 0 auto;
  font: inherit;
  font-weight: 800;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid var(--gold, #b88616);
  background: var(--gold, #b88616);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.05s ease;
}

.cookie-banner-accept:hover {
  background: #a77410;
  border-color: #a77410;
}

.cookie-banner-accept:active {
  transform: translateY(1px);
}

@media (max-width: 540px) {
  .cookie-banner {
    width: calc(100% - 16px);
    bottom: 10px;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 12px 14px;
  }

  .cookie-banner-accept {
    width: 100%;
  }
}

html[data-theme="dark"] .cookie-banner {
  background: rgba(28, 30, 34, 0.97);
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.55);
}

html[data-theme="dark"] .cookie-banner-text strong {
  color: #f7e9c4;
}

html[data-theme="dark"] .cookie-banner-text a {
  color: #d4a84a;
}

.confirm-list div {
  display: grid;
  grid-template-columns: minmax(108px, 0.36fr) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.confirm-list dt,
.confirm-list dd {
  margin: 0;
  line-height: 1.28;
}

.confirm-list dt {
  color: var(--muted);
  font-size: 0.9rem;
}

.confirm-list dd {
  min-width: 0;
  font-weight: 850;
  overflow-wrap: anywhere;
}

.pack-control {
  display: grid;
  gap: 14px;
}

.pack-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

.admin-pack-items {
  display: grid;
  gap: 10px;
}

.pack-option {
  position: relative;
  display: grid;
  gap: 4px;
  min-height: 74px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fffdf8;
  color: var(--ink);
  text-align: left;
  overflow: hidden;
}

.pack-option strong {
  font-size: 1.34rem;
  line-height: 1;
}

.pack-option span {
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
}

/* PACK_SELECTION_STYLE_CONSISTENCY_V1: a seleção de pack usa apenas
   border + outline, igual ao .choice-card dos passos 1 e 2. Sem
   preenchimento amarelo — a moldura já comunica a escolha. */
.pack-option.is-selected {
  border-color: var(--moss);
  outline: 3px solid rgba(125, 139, 98, 0.24);
}

/* CRACHAS_PACK_DISABLED_MESSAGE_V1
   Pack visivel mas nao chega para os designs escolhidos: cinzento,
   continua clicavel para mostrar mensagem (em vez de seleccionar). */
.pack-option.is-disabled {
  opacity: 0.45;
  background: #f6f0e3;
  color: var(--muted);
  cursor: pointer;
}

.pack-option.is-disabled strong,
.pack-option.is-disabled span {
  color: var(--muted);
}

.pack-disabled-message {
  margin: 8px 0 0;
  padding: 10px 12px;
  border-radius: var(--radius);
  background: rgba(199, 68, 56, 0.08);
  border: 1px solid rgba(199, 68, 56, 0.18);
  color: #8c3028;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.3;
}

html[data-theme="dark"] .pack-option.is-disabled {
  background: rgba(216, 192, 138, 0.05);
}

html[data-theme="dark"] .pack-disabled-message {
  background: rgba(208, 154, 130, 0.12);
  border-color: rgba(208, 154, 130, 0.32);
  color: var(--rose);
}

.quantity-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border-radius: var(--radius);
  background: var(--surface-stone);
  color: var(--muted);
}

.quantity-status strong {
  color: var(--ink);
}

.quantity-status.is-complete {
  background: var(--surface-cream-soft);
}

.quantity-grid {
  display: grid;
  gap: 12px;
}

/* PACK_PRICE_OVERVIEW_PRO_V5: caixa de resumo profissional com layout
   assimétrico — duas linhas à esquerda (Cada / Desconto) e Total à
   direita centrado verticalmente, separados por divisor vertical
   subtil. Ícone de calculadora à esquerda do valor total. */
.pack-price-overview {
  --price-summary-width: 560px;
  --price-summary-padding-y: 19px;
  --price-summary-padding-x: 34px;
  --price-summary-left-row-gap: 13px;
  --price-summary-divider-gap: 21px;

  --price-summary-icon-size: 18px;
  --price-summary-small-value-size: 19px;
  --price-summary-small-label-size: 13px;
  --price-summary-total-value-size: 30px;
  --price-summary-total-label-size: 13px;

  display: grid;
  justify-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.pack-price-card {
  width: min(100%, var(--price-summary-width));
  display: grid;
  grid-template-columns: minmax(112px, max-content) 1px minmax(128px, 1fr);
  align-items: stretch;
  column-gap: var(--price-summary-divider-gap);
  padding: var(--price-summary-padding-y) var(--price-summary-padding-x);
  background: linear-gradient(180deg, var(--surface-cream) 0%, var(--surface-cream-soft) 100%);
  border: 1px solid #ead8a9;
  border-radius: 14px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.85) inset,
    0 10px 24px rgba(68, 41, 0, 0.07);
}

.pack-price-card--solo {
  grid-template-columns: 1fr;
}

.pack-price-card header {
  grid-column: 1 / -1;
  margin: 0 0 6px;
  color: var(--moss);
  font-size: 0.86rem;
  font-weight: 850;
}

.summary-left {
  display: grid;
  gap: var(--price-summary-left-row-gap);
  align-content: center;
  min-width: 0;
}

.summary-row {
  display: flex;
  align-items: flex-end;
  gap: 9px;
  min-width: 0;
  white-space: nowrap;
}

.summary-icon {
  width: var(--price-summary-icon-size);
  height: var(--price-summary-icon-size);
  color: #b88616;
  opacity: 0.9;
  flex: 0 0 auto;
}

.summary-value,
.summary-label,
.total-value,
.total-label {
  line-height: 1;
  white-space: nowrap;
}

.summary-value {
  font-size: var(--price-summary-small-value-size);
  font-weight: 900;
  letter-spacing: 0.01em;
  color: var(--ink);
}

.summary-label {
  font-size: var(--price-summary-small-label-size);
  font-weight: 850;
  color: #76551c;
  text-transform: lowercase;
}

.summary-row.is-discount .summary-value {
  color: var(--moss);
}

.summary-divider {
  width: 1px;
  background: rgba(118, 85, 28, 0.22);
  border-radius: 999px;
  align-self: stretch;
}

.summary-total {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  text-align: right;
  gap: 6px;
}

.summary-total--solo {
  align-items: center;
  text-align: center;
}

.total-top {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.summary-total--solo .total-top {
  justify-content: center;
}

.total-value {
  font-size: var(--price-summary-total-value-size);
  font-weight: 950;
  letter-spacing: 0.035em;
  color: var(--ink);
}

.total-label {
  font-size: var(--price-summary-total-label-size);
  font-weight: 850;
  color: #76551c;
  text-transform: lowercase;
  letter-spacing: 0.025em;
}

.quantity-adjust-hint {
  margin: 14px 0 0;
  color: var(--moss);
  font-size: 0.92rem;
  font-weight: 800;
}

@media (max-width: 420px) {
  .pack-price-overview {
    --price-summary-padding-y: 14px;
    --price-summary-padding-x: 14px;
    --price-summary-left-row-gap: 9px;
    --price-summary-divider-gap: 12px;
    --price-summary-icon-size: 15px;
    --price-summary-small-value-size: 15px;
    --price-summary-small-label-size: 10px;
    --price-summary-total-value-size: 27px;
    --price-summary-total-label-size: 11px;
  }

  .pack-price-card {
    width: 100%;
    grid-template-columns: minmax(92px, max-content) 1px minmax(112px, 1fr);
  }

  .pack-price-card--solo {
    grid-template-columns: 1fr;
  }

  .summary-row {
    gap: 5px;
  }

  .total-top {
    gap: 6px;
  }

  .quantity-adjust-hint {
    font-size: 0.88rem;
  }
}

.quantity-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(136px, 42%) minmax(0, 1fr);
  align-items: start;
  gap: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fffdf8;
}

.auto-distribute {
  min-height: 44px;
  border: 1px solid rgba(142, 103, 31, 0.24);
  border-radius: var(--radius);
  background: var(--surface-stone);
  color: var(--moss);
  cursor: pointer;
  font-weight: 850;
}

.unassigned-pins {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px dashed rgba(155, 63, 53, 0.38);
  border-radius: var(--radius);
  background: #fff8f2;
}

.unassigned-pins > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: #7d463f;
}

.unassigned-pins strong {
  font-size: 0.94rem;
}

.unassigned-pins > div:first-child span {
  font-weight: 900;
}

.sad-pin-list {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.sad-pin {
  display: grid;
  place-items: center;
  width: 24px;
  height: 32px;
  border: 2px solid #e5d4bd;
  border-radius: 6px;
  background: #f7ead8;
  color: #7d463f;
  font-size: 0.68rem;
  font-weight: 900;
}

.product-shape-round .sad-pin {
  height: 24px;
  border-radius: 50%;
}

.quantity-main {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  align-content: start;
  gap: 10px;
  min-width: 0;
}

.quantity-hero {
  position: relative;
  display: grid;
  place-items: center;
  align-self: center;
  min-height: 176px;
  padding: 8px;
}

.quantity-visual-wrap {
  position: relative;
  display: inline-grid;
  place-items: center;
  isolation: isolate;
}

.quantity-hero .design-image {
  width: min(38vw, 148px);
}

.quantity-main strong,
.quantity-main span {
  display: block;
}

.quantity-main > div span {
  color: var(--muted);
  font-size: 0.88rem;
}

.quantity-badge {
  display: inline-grid;
  place-items: center;
  position: absolute;
  right: -8px;
  bottom: 8px;
  z-index: 8;
  min-width: 48px;
  height: 34px;
  padding: 0 9px;
  border: 2px solid rgba(255, 253, 248, 0.9);
  border-radius: 999px;
  background: rgba(116, 82, 24, 0.94);
  color: #fffdf8;
  font-size: clamp(0.92rem, 3vw, 1.08rem);
  font-weight: 950;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(46, 36, 19, 0.22);
  pointer-events: none;
}

.pin-stack {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  min-height: 34px;
  padding-left: 8px;
}

.pin-stack > span,
.pin-stack > strong {
  display: grid;
  place-items: center;
  width: 32px;
  height: 42px;
  margin-left: -8px;
  border: 2px solid #f3df9e;
  border-radius: 6px;
  box-shadow: 0 4px 10px rgba(46, 36, 19, 0.1);
}

.pin-stack > .pin-stack-dot {
  background: #ffeebc;
  border-color: #f3d985;
}

.product-shape-round .pin-stack > span,
.product-shape-round .pin-stack > strong {
  height: 32px;
  border-radius: 50%;
}

.product-shape-round .pin-stack > .pin-stack-dot {
  width: 32px;
  height: 32px;
}

.pin-stack .uploaded-image-inner {
  width: auto;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.pin-stack strong {
  background: var(--moss);
  color: #fffdf8;
  font-size: 0.76rem;
}

.quantity-controls {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 46px;
  align-items: center;
  gap: 8px;
}

.quantity-controls button {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface-stone);
  color: var(--moss);
  font-size: 1.3rem;
  font-weight: 900;
}

.quantity-controls button:disabled {
  opacity: 0.35;
}

.quantity-controls span {
  text-align: center;
  font-weight: 900;
}

.selected-summary {
  display: grid;
  gap: 8px;
}

.selected-pill {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-stone);
}

.selected-pill .design-image {
  width: 64px;
  border-width: 2px;
}

.selected-pill > span {
  min-width: 0;
  color: var(--muted);
  font-weight: 800;
}

.selected-pill strong {
  color: var(--moss);
}

.price-panel {
  display: grid;
  gap: 5px;
  padding: 14px;
  border: 1px solid rgba(142, 103, 31, 0.26);
  border-radius: var(--radius);
  background: var(--surface-cream-soft);
}

.price-panel.muted {
  background: var(--surface-stone);
}

.price-panel span,
.price-panel p,
.price-panel em {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
}

.price-panel strong {
  font-size: 1.8rem;
  line-height: 1;
}

.price-panel em {
  color: var(--moss);
  font-style: normal;
  font-weight: 850;
}

/* PRICE_SHIPPING_BREAKDOWN_V1: nota pequena por baixo do preço total a
   esclarecer que o portes é estimativa (CTT) ou que é grátis. */
.price-panel-shipping-note {
  display: block;
  margin-top: 2px;
  font-size: 0.84rem;
  color: var(--muted);
  font-weight: 700;
}

.price-panel-shipping-note strong {
  font-size: inherit;
  color: var(--moss);
  font-weight: 850;
}

.delivery-choice {
  display: grid;
  gap: 8px;
}

.price-panel .delivery-choice {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid rgba(142, 103, 31, 0.16);
}

.delivery-choice.is-standalone {
  padding: 12px;
  border: 1px solid rgba(142, 103, 31, 0.26);
  border-radius: var(--radius);
  background: var(--surface-cream-soft);
}

.delivery-choice > span {
  color: var(--moss);
  font-size: 0.82rem;
  font-weight: 850;
  text-transform: uppercase;
}

.delivery-choice p {
  margin: 0;
  color: var(--muted);
  font-size: 0.86rem;
}

.delivery-option {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fffdf8;
}

.delivery-option input {
  margin-top: 3px;
  accent-color: var(--moss);
}

.delivery-option span {
  display: grid;
  gap: 2px;
}

.delivery-option strong {
  font-size: 0.94rem;
}

.delivery-option em {
  color: var(--muted);
  font-size: 0.86rem;
  font-style: normal;
}

.delivery-price {
  justify-self: end;
  color: var(--ink);
  font-size: 1.28rem;
  font-weight: 900;
  white-space: nowrap;
  text-align: right;
}

/* DELIVERY_OPTIONS_3_V1: priceText pode conter "\n" (ex.: "Valor mínimo\n8,50 €")
   para forçar quebra de linha no badge de preço. white-space: pre-line
   preserva \n como line break sem afectar outros sítios (summaryRows
   substitui \n por espaço explicitamente). is-text-price reduz o tamanho
   da fonte para textos longos. */
.delivery-price.is-text-price,
.dc-delivery-price {
  white-space: pre-line;
  line-height: 1.2;
  font-size: 0.95rem;
}

.delivery-price.is-text-price {
  font-size: 0.84rem;
  font-weight: 800;
}

.result-body {
  display: grid;
  place-items: center;
  padding: clamp(18px, 4vw, 48px);
}

.result-card {
  display: grid;
  gap: 28px;
  width: 100%;
  max-width: 720px;
  padding: clamp(22px, 4vw, 38px);
}

.result-card.error {
  border-color: rgba(182, 111, 100, 0.45);
}

.result-list {
  margin: 0;
  padding: 18px 18px 18px 38px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-stone);
  color: var(--muted);
  line-height: 1.55;
}

/* FINAL_MESSAGE_V1: caixa rica mostrada no resultado de "Pedido enviado".
   Inclui saudação personalizada, dica para juntar encomendas, e código
   destacado. Visualmente consistente com .payment-notice / .confirm-card. */
.order-success-card {
  display: grid;
  gap: 12px;
  padding: 20px 22px;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--surface-cream) 0%, var(--surface-gold-soft) 100%);
  border: 1px solid rgba(184, 134, 22, 0.42);
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset, 0 6px 18px -10px rgba(0, 0, 0, 0.08);
}

.order-success-greeting {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 850;
  color: var(--ink);
  line-height: 1.35;
}

.order-success-tip {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.order-success-tip strong {
  color: var(--ink);
  font-weight: 850;
}

.order-success-code {
  margin: 4px 0 0;
  font-size: 0.92rem;
  color: var(--muted);
}

.order-success-code-label {
  margin-right: 6px;
}

.order-success-code code {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(184, 134, 22, 0.12);
  border: 1px solid rgba(184, 134, 22, 0.3);
  color: var(--ink);
  font-weight: 850;
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  letter-spacing: 0.02em;
}

@media (max-width: 540px) {
  .order-success-card {
    padding: 16px 16px;
  }
  .order-success-greeting {
    font-size: 1rem;
  }
  .order-success-tip {
    font-size: 0.88rem;
  }
}

html[data-theme="dark"] .order-success-card {
  background: linear-gradient(180deg, rgba(212, 168, 74, 0.16) 0%, rgba(212, 168, 74, 0.06) 100%);
  border-color: rgba(212, 168, 74, 0.45);
}

html[data-theme="dark"] .order-success-code code {
  background: rgba(212, 168, 74, 0.18);
  border-color: rgba(212, 168, 74, 0.3);
}

.result-categories {
  margin-top: 0;
}

.privacy-page {
  display: grid;
  gap: 14px;
  width: min(100%, 760px);
  margin: 0 auto;
  padding: 16px;
}

.privacy-summary,
.privacy-content {
  display: grid;
  gap: 12px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.privacy-summary {
  background: var(--surface-cream-soft);
  border-color: rgba(142, 103, 31, 0.24);
}

.privacy-summary h1,
.privacy-content h2,
.privacy-content h3,
.privacy-summary p,
.privacy-content p {
  margin: 0;
}

.privacy-summary h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 8vw, 3.4rem);
  line-height: 0.95;
}

.privacy-content h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.7rem, 6vw, 2.6rem);
  line-height: 1;
}

.privacy-content h3 {
  margin-top: 10px;
  color: var(--moss);
  font-size: 1rem;
}

.privacy-summary p,
.privacy-content p {
  color: var(--muted);
  line-height: 1.55;
}

.admin-login,
.admin-toolbar {
  position: fixed;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 30;
  border: 2px solid #c74438;
  border-radius: var(--radius);
  background: #fffdf8;
  box-shadow: 0 14px 44px rgba(37, 41, 31, 0.24);
}

.admin-login {
  padding: 12px;
}

.admin-login form,
.admin-toolbar,
.admin-step-panel[open] {
  display: grid;
  gap: 10px;
}

.admin-login label,
.admin-toolbar label {
  display: grid;
  gap: 5px;
  color: #8c3028;
  font-size: 0.78rem;
  font-weight: 850;
}

.admin-actions,
.admin-toolbar-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.admin-toolbar {
  padding: 8px;
  max-height: 34vh;
  overflow: auto;
}

.admin-toolbar-head {
  grid-template-columns: minmax(0, 1fr) auto auto auto auto;
  align-items: center;
}

.admin-toolbar-head strong {
  align-self: center;
  color: #8c3028;
}

.admin-toolbar.is-collapsed {
  left: auto;
  width: auto;
  max-height: none;
  padding: 6px;
  overflow: visible;
}

.admin-toolbar.is-collapsed > :not(.admin-toolbar-head),
.admin-toolbar.is-collapsed .admin-toolbar-head > :not(strong):not(.admin-panel-toggle) {
  display: none;
}

.admin-toolbar.is-collapsed .admin-toolbar-head {
  grid-template-columns: auto auto;
}

.admin-panel-toggle {
  white-space: nowrap;
}

.admin-message {
  grid-column: 1 / -1;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid rgba(199, 68, 56, 0.22);
  border-radius: 8px;
  background: #fff7f6;
  color: #8c3028;
  font-size: 0.82rem;
  font-weight: 800;
}

.admin-toolbar-head button {
  min-height: 34px;
  padding: 0 8px;
  font-size: 0.72rem;
}

/* FUNNEL_DASHBOARD_V1: link "Funil" na admin-toolbar-head segue o estilo
   dos botões para coerência visual. */
.admin-toolbar-head .admin-funnel-link {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 10px;
  font-size: 0.72rem;
  font-weight: 800;
  text-decoration: none;
  color: var(--moss, #4f7a3a);
  border: 1px solid var(--line, rgba(118, 85, 28, 0.22));
  border-radius: 6px;
  background: rgba(79, 122, 58, 0.08);
}

.admin-toolbar-head .admin-funnel-link:hover {
  background: rgba(79, 122, 58, 0.16);
}

.admin-step-panel {
  grid-column: 1 / -1;
  min-width: 0;
}

.admin-step-panel summary {
  cursor: pointer;
  color: #8c3028;
  font-size: 0.82rem;
  font-weight: 900;
}

.admin-step-panel label {
  margin-top: 8px;
}

.admin-price-panel section {
  display: grid;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid rgba(199, 68, 56, 0.16);
}

.admin-price-panel section > strong {
  color: #8c3028;
  font-size: 0.8rem;
}

.admin-image-panel p {
  margin: 0;
  color: #8c3028;
  font-size: 0.78rem;
}

.admin-image-panel button {
  width: 100%;
  border-color: #c74438;
  background: #fff7f6;
  color: #8c3028;
}

.home-intro-tools,
.home-admin-tools,
.field-admin-tools {
  margin-top: 10px;
}

.admin-check {
  display: flex !important;
  grid-column: 1 / -1;
  align-items: center;
  gap: 8px !important;
}

.admin-check input {
  position: static !important;
  width: auto;
  min-height: 0;
  opacity: 1 !important;
}

.result-retry-form {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid rgba(142, 103, 31, 0.2);
  border-radius: var(--radius);
  background: var(--surface-cream-soft);
}

.result-retry-form label {
  display: grid;
  gap: 6px;
  color: var(--moss);
  font-weight: 850;
}

.admin-toolbar label {
  grid-column: 1 / -1;
}

.admin-card-tools {
  display: grid;
  grid-column: 1 / -1;
  gap: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(199, 68, 56, 0.2);
}

.admin-card-tools label {
  display: grid;
  gap: 5px;
  color: #8c3028;
  font-size: 0.75rem;
  font-weight: 850;
}

.admin-card-tools input {
  min-height: 38px;
}

.admin-card-tools input[type="number"] {
  min-width: 0;
}

.text-grid:has(.admin-card-tools),
.price-pack-grid:has(.admin-card-tools),
.design-grid:has(.admin-card-tools) {
  grid-template-columns: 1fr;
}

.choice-card:has(.admin-card-tools) {
  min-height: 0;
}

.choice-card.design-grid:has(.admin-card-tools) {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  justify-items: stretch;
  text-align: left;
}

.choice-card.design-grid:has(.admin-card-tools) .design-image,
.choice-card.design-grid:has(.admin-card-tools) .design-card-media,
.choice-card.design-grid:has(.admin-card-tools) .choice-copy {
  grid-row: 1;
}

.choice-card.design-grid:has(.admin-card-tools) .design-image,
.choice-card.design-grid:has(.admin-card-tools) .design-card-media {
  width: 58px;
}

.choice-card.design-grid:has(.admin-card-tools) .choice-copy {
  justify-items: start;
}

.admin-toolbar textarea {
  min-height: 52px;
}

.admin-toolbar button:disabled {
  opacity: 0.45;
  cursor: default;
}

.admin-card-tools button,
.admin-add {
  border-color: #c74438;
  background: #fff7f6;
  color: #8c3028;
}

.admin-add {
  width: 100%;
}

@media (min-width: 560px) {
  .home-shell,
  .product-shell,
  .fallback {
    padding: 24px;
  }

  .home-intro,
  .product-intro {
    padding: 28px;
  }

  .category-grid {
    gap: 14px;
  }

  .choice-card.media-list {
    min-height: 118px;
    padding: 16px;
  }

  .choice-card.size-choice {
    grid-template-columns: auto minmax(0, 1fr) minmax(168px, 0.48fr);
  }

  .size-price-preview {
    grid-column: auto;
    padding-top: 0;
    padding-left: 10px;
    border-top: 0;
    border-left: 1px solid var(--line);
  }

  .details-grid {
    grid-template-columns: 1fr 1fr;
  }

  .details-grid label:nth-child(3):last-child {
    grid-column: 1 / -1;
  }

.admin-login,
.admin-toolbar {
  left: auto;
  width: calc(100% - 20px);
  max-width: 620px;
}

.admin-card-tools {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.admin-card-tools button {
  grid-column: 1 / -1;
}
}

@media (min-width: 860px) {
  .home-shell {
    max-width: 980px;
  }

  .product-shell {
    max-width: 760px;
  }

  .category-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .category-grid.category-grid-count-1 {
    grid-template-columns: minmax(0, 1fr);
  }

  .category-grid.category-grid-count-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .category-grid.category-grid-count-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .category-grid.category-grid-count-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .category-grid.category-grid-count-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .category-grid.category-grid-count-6,
  .category-grid.category-grid-count-7 {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .category-grid.category-grid-count-6 > .category-card,
  .category-grid.category-grid-count-7 > .category-card {
    grid-column: span 3;
  }

  .category-grid.category-grid-count-6 > .category-card:nth-child(5) {
    grid-column: 4 / span 3;
  }

  .category-grid.category-grid-count-7 > .category-card:nth-child(5) {
    grid-column: 2 / span 3;
  }

  .text-grid,
  .price-pack-grid,
  .design-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Admin: central pricing table + image crop controls */
.admin-price-help {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.35;
}

.admin-price-help code,
.admin-price-panel code {
  padding: 1px 5px;
  border-radius: 6px;
  background: rgba(125, 139, 98, 0.12);
  color: var(--moss);
  font-size: 0.78rem;
}

.admin-price-table-wrap {
  max-height: 420px;
  overflow: auto;
  border: 1px solid rgba(202, 162, 59, 0.3);
  border-radius: 12px;
  background: #fffaf0;
}

.admin-price-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  font-size: 0.82rem;
}

.admin-price-table th,
.admin-price-table td {
  padding: 8px;
  border-bottom: 1px solid rgba(202, 162, 59, 0.22);
  text-align: left;
  vertical-align: middle;
}

.admin-price-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f7edda;
  color: var(--moss);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-price-table small {
  display: block;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.admin-price-table input {
  width: 92px;
  min-height: 34px;
  padding: 6px 8px;
  border: 1px solid rgba(125, 139, 98, 0.3);
  border-radius: 9px;
  background: #fffdf8;
  color: var(--ink);
  font: inherit;
  font-weight: 800;
}

.admin-image-control-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.uploaded-image {
  background-repeat: no-repeat;
}

/* Admin v3: global theme, homepage carousel, product previews, congregação gift checkbox */
:root {
  --button-bg: var(--moss);
  --button-text: #fffdf8;
  --site-bg-image: none;
}

body.has-site-background {
  background:
    linear-gradient(180deg, rgba(255, 248, 223, 0.72), rgba(255, 248, 223, 0.88)),
    var(--site-bg-image) center / cover fixed no-repeat,
    var(--paper);
}

.button.primary,
.step-list .is-active button,
.admin-toolbar button,
.admin-login button,
.admin-add,
.admin-card-tools button {
  background: var(--button-bg);
  color: var(--button-text);
}

.category-card.has-carousel {
  color: #fffdf5;
  background: var(--card);
}

.category-card.has-carousel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: rgba(46, 36, 19, var(--carousel-overlay, 0.36));
  pointer-events: none;
}

.category-card.has-carousel::after,
.category-card.has-carousel .category-art {
  display: none;
}

.category-carousel {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.category-carousel-frame {
  position: absolute;
  inset: -8%;
  opacity: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: scale(1) translate(0, 0);
  transition: opacity 900ms ease;
  will-change: opacity, transform;
}

.category-carousel-frame.is-active {
  opacity: 1;
  animation: categoryKenBurns var(--carousel-speed, 8s) ease-in-out both;
}

@keyframes categoryKenBurns {
  from {
    transform: scale(1) translate(0, 0);
  }
  to {
    transform: scale(var(--carousel-zoom-scale, 1.08)) translate(var(--carousel-pan-x, 6%), var(--carousel-pan-y, -6%));
  }
}

.category-card.has-carousel .category-number,
.category-card.has-carousel > span:last-child {
  color: rgba(255, 253, 245, 0.9);
  text-shadow:
    0 1px 3px rgba(20, 15, 8, 0.76),
    0 7px 18px rgba(20, 15, 8, 0.5);
}

.category-card.has-carousel strong {
  text-shadow:
    0 1px 3px rgba(20, 15, 8, 0.84),
    0 8px 24px rgba(20, 15, 8, 0.58);
}

.admin-global-panel hr {
  border: 0;
  border-top: 1px solid rgba(202, 162, 59, 0.28);
  margin: 12px 0;
}

.product-preview {
  margin: 14px 0 4px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
  background: rgba(255, 253, 248, 0.84);
}

.product-preview-image {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: cover;
}

.product-preview-copy {
  padding: 12px 14px;
}

.product-preview-copy strong {
  display: block;
  color: var(--moss);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  line-height: 1.15;
}

.product-preview-copy p {
  margin: 6px 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.product-example-gallery {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin: 4px 0 2px;
}

.product-example-gallery-heading strong {
  display: block;
  color: var(--moss);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.08rem;
}

.product-example-gallery-heading p {
  margin: 3px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.4;
}

.product-example-gallery-track {
  display: grid;
  grid-auto-columns: 132px;
  grid-auto-flow: column;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 8px;
  scroll-snap-type: x proximity;
}

.product-example-gallery-item {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--linen);
  cursor: zoom-in;
  scroll-snap-align: start;
}

.product-example-gallery-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-quadros .product-example-gallery-item img {
  object-fit: contain;
}

.product-example-gallery-item:focus-visible {
  outline: 3px solid rgba(114, 85, 30, 0.32);
  outline-offset: 2px;
}

@media (min-width: 700px) {
  .product-example-gallery-track {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-auto-flow: initial;
    overflow: visible;
  }
}

.gift-request {
  margin: 12px 0 0;
  padding: 12px;
  border: 1px solid rgba(202, 162, 59, 0.32);
  border-radius: calc(var(--radius) + 4px);
  background: rgba(255, 250, 240, 0.92);
}

.gift-request label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--ink);
  font-weight: 850;
}

.gift-request input {
  margin-top: 3px;
  accent-color: var(--moss);
}

.gift-request em {
  display: block;
  margin: 6px 0 0 28px;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.35;
}

/* Admin v4: imagem interna com zoom/posição/rotação separada da moldura */
.uploaded-image {
  position: relative;
  overflow: hidden;
  background-image: none !important;
  background-color: var(--linen);
}

.uploaded-image-inner {
  position: absolute;
  inset: -30%;
  background-image: var(--uploaded-image);
  background-position: center;
  background-size: var(--image-fit, cover);
  background-repeat: no-repeat;
  transform: translate(var(--image-position-x, 0), var(--image-position-y, 0)) scale(var(--image-zoom-scale, 1)) rotate(var(--image-rotation, 0deg));
  transform-origin: center;
  will-change: transform;
}

.step-list .is-hidden-step button {
  border-style: dashed;
  opacity: 0.72;
}

.step-list .is-hidden-step button span::after {
  content: "•";
  display: block;
  margin-top: -5px;
  font-size: 0.7rem;
  line-height: 1;
}

.delivery-price.is-text-price {
  max-width: 170px;
  text-align: right;
  line-height: 1.05;
  white-space: normal;
}

.gift-request p {
  margin: 6px 0 0 28px;
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.35;
}

.interior-slideshow {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
  padding: 12px;
  border: 1px solid rgba(202, 162, 59, 0.32);
  border-radius: calc(var(--radius) + 4px);
  background: rgba(255, 253, 248, 0.9);
}

.interior-slideshow-frame {
  position: relative;
  width: min(100%, 360px);
  aspect-ratio: 1;
  justify-self: center;
  overflow: hidden;
  border: 1px solid rgba(202, 162, 59, 0.42);
  border-radius: calc(var(--radius) + 6px);
  background: var(--surface-cream-soft);
  box-shadow: inset 0 0 0 1px rgba(142, 103, 31, 0.12), 0 10px 22px rgba(46, 36, 19, 0.08);
}

.interior-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  animation: interiorSlideshow calc(var(--interior-slide-count, 1) * var(--interior-slide-speed, 5s)) ease-in-out infinite;
  animation-delay: calc(var(--interior-slide-index, 0) * var(--interior-slide-speed, 5s));
}

.interior-slide:first-child {
  opacity: 1;
}

@keyframes interiorSlideshow {
  0%, 8% {
    opacity: 0;
    transform: scale(1.02) translate(0, 0);
  }
  12%, 32% {
    opacity: 1;
    transform: scale(1.08) translate(1.5%, -1.5%);
  }
  38%, 100% {
    opacity: 0;
    transform: scale(1.12) translate(-1.5%, 1.5%);
  }
}

.interior-slideshow-copy {
  display: grid;
  gap: 4px;
}

.interior-slideshow-copy strong {
  color: var(--moss);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.05rem;
  line-height: 1.12;
}

.interior-slideshow-copy p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Admin v5/v6: contact link/form, action error bubble, button press feedback, lightweight butterfly */
.header-actions {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--moss);
  font-size: 0.9rem;
  font-weight: 850;
}

.header-separator {
  color: rgba(114, 85, 30, 0.42);
}

.next-action-wrap {
  position: relative;
  display: grid;
}

.action-error {
  position: absolute;
  right: 0;
  bottom: calc(100% + 9px);
  z-index: 4;
  max-width: min(270px, 76vw);
  padding: 10px 12px;
  border: 1px solid rgba(155, 63, 53, 0.24);
  border-radius: 14px;
  background: #fff8f3;
  box-shadow: 0 12px 28px rgba(97, 70, 20, 0.16);
  color: #9b3f35;
  font-size: 0.88rem;
  line-height: 1.25;
}

.action-error::after {
  content: "";
  position: absolute;
  right: 24px;
  bottom: -7px;
  width: 12px;
  height: 12px;
  border-right: 1px solid rgba(155, 63, 53, 0.24);
  border-bottom: 1px solid rgba(155, 63, 53, 0.24);
  background: #fff8f3;
  transform: rotate(45deg);
}

.checkout-action-error {
  position: static;
  max-width: none;
  margin: 12px 0 0;
}

.checkout-action-error::after {
  display: none;
}

.button,
.pack-option,
.example-toggle,
.auto-distribute,
.site-footer button,
.admin-toolbar button,
.admin-login button,
.admin-add,
.admin-card-tools button {
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}

.button:active,
.pack-option:active,
.example-toggle:active,
.auto-distribute:active,
.site-footer button:active,
.admin-toolbar button:active,
.admin-login button:active,
.admin-add:active,
.admin-card-tools button:active {
  transform: translateY(1px) scale(0.985);
  filter: brightness(0.96);
}

.footer-butterfly-trigger {
  font: inherit;
  line-height: inherit;
}

.header-actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.header-separator {
  display: none;
}

.header-link-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: 1px solid rgba(123, 98, 56, 0.2);
  background: rgba(255,255,255,0.72);
  color: var(--moss);
  box-shadow: 0 6px 16px rgba(46,36,19,0.08);
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease, color 160ms ease;
}

.header-link-icon:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(46,36,19,0.12);
  background: rgba(255,255,255,0.96);
}

.header-link-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

.cart-header-button {
  position: relative;
  border-color: rgba(114, 85, 30, 0.34);
  background: rgba(255, 253, 245, 0.9);
}

.cart-header-button.has-items {
  border-color: rgba(114, 85, 30, 0.58);
  background: var(--surface-gold-soft);
}

body:has(.site-header.has-site-menu) .cart-floating-button {
  display: none;
}

.cart-count-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  display: grid;
  min-width: 20px;
  height: 20px;
  place-items: center;
  padding: 0 5px;
  border: 2px solid var(--card);
  border-radius: 999px;
  background: var(--moss);
  color: #fffdf8;
  font-size: 0.7rem;
  font-weight: 900;
  line-height: 1;
}

.cart-surface {
  position: relative;
  z-index: 80;
}

.cart-floating-button {
  appearance: none;
  position: fixed;
  top: max(12px, env(safe-area-inset-top, 0px));
  right: max(12px, env(safe-area-inset-right, 0px));
  z-index: 85;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 12px 0 14px;
  border: 1px solid rgba(114, 85, 30, 0.36);
  border-radius: 999px;
  background: rgba(255, 253, 245, 0.96);
  color: var(--moss);
  box-shadow: 0 10px 26px rgba(46, 36, 19, 0.18);
  cursor: pointer;
  font-family: inherit;
  font-weight: 900;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.cart-floating-icon {
  display: grid;
  width: 18px;
  height: 18px;
  place-items: center;
}

.cart-floating-icon svg {
  width: 18px;
  height: 18px;
}

.cart-floating-button strong {
  display: grid;
  min-width: 24px;
  height: 24px;
  place-items: center;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--moss);
  color: #fffdf8;
  font-size: 0.78rem;
  line-height: 1;
}

.cart-panel-backdrop {
  position: fixed;
  inset: 0;
  z-index: 88;
  border: 0;
  background: rgba(46, 36, 19, 0.18);
  cursor: default;
}

.cart-panel {
  position: fixed;
  top: 66px;
  right: max(12px, env(safe-area-inset-right, 0px));
  z-index: 90;
  display: none;
  width: min(420px, calc(100vw - 24px));
  max-height: min(74vh, 620px);
  overflow: auto;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 253, 245, 0.98);
  color: var(--ink);
  box-shadow: 0 22px 54px rgba(46, 36, 19, 0.2);
}

.cart-panel.is-open {
  display: grid;
  gap: 14px;
}

.cart-panel-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: start;
}

.cart-panel-head .eyebrow {
  margin-bottom: 6px;
}

.cart-panel-head h2 {
  font-size: clamp(1.6rem, 7vw, 2.25rem);
}

.cart-close-button {
  display: grid;
  width: 36px;
  height: 36px;
  min-height: 36px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--moss);
  cursor: pointer;
  font-size: 1.35rem;
  line-height: 1;
}

.cart-empty-state {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-stone);
}

.cart-empty-state strong {
  color: var(--moss);
}

.cart-empty-state p {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
}

.cart-panel-list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cart-panel-item {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-stone);
}

.cart-item-thumb {
  display: grid;
  width: 54px;
  height: 54px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(114, 85, 30, 0.24);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--moss);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.35rem;
}

.cart-item-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cart-item-copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.cart-item-copy strong,
.cart-item-copy span,
.cart-item-copy em {
  min-width: 0;
  overflow-wrap: anywhere;
}

.cart-item-copy strong {
  color: var(--moss);
  font-size: 0.95rem;
}

.cart-item-copy span {
  color: var(--ink);
  font-weight: 750;
}

.cart-item-copy em {
  color: var(--muted);
  font-size: 0.84rem;
  font-style: normal;
}

.cart-item-side {
  display: grid;
  gap: 8px;
  justify-items: end;
}

.cart-item-price {
  color: var(--moss);
  font-weight: 900;
  white-space: nowrap;
}

.cart-item-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-end;
}

.cart-edit-button,
.cart-remove-button {
  min-height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 850;
}

.cart-edit-button {
  border: 1px solid rgba(114, 85, 30, 0.28);
  background: rgba(255, 253, 245, 0.92);
  color: var(--moss);
}

.cart-remove-button {
  border: 1px solid rgba(155, 63, 53, 0.24);
  background: rgba(255, 247, 246, 0.86);
  color: #8c3028;
}

.cart-panel-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 0 0;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-weight: 850;
}

.cart-panel-total strong {
  color: var(--moss);
  font-size: 1.05rem;
}

.cart-finalize-button {
  width: 100%;
}

.cart-panel-note {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--border-soft-gold);
  border-radius: var(--radius);
  background: var(--surface-gold-soft);
  color: var(--moss);
  font-size: 0.9rem;
  font-weight: 800;
}

.cart-entry-actions {
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
}

.cart-entry-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.cart-entry-buttons .action-error {
  grid-column: 1 / -1;
}

.cart-edit-bar {
  position: sticky;
  top: 12px;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--border-soft-gold);
  border-radius: var(--radius);
  background: rgba(255, 253, 245, 0.94);
  color: var(--moss);
  box-shadow: 0 8px 22px rgba(46, 36, 19, 0.08);
}

.cart-edit-bar span {
  font-weight: 850;
}

.cart-edit-bar > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-end;
}

.add-product-shell .home-intro {
  display: grid;
  gap: 12px;
}

.add-product-checkout-link {
  justify-self: start;
}

.checkout-shell {
  max-width: 860px;
}

.checkout-wizard {
  display: grid;
  gap: 14px;
}

.checkout-step-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.checkout-step-list li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-stone);
  color: var(--muted);
  font-weight: 850;
}

.checkout-step-list span {
  display: grid;
  width: 28px;
  height: 28px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 999px;
  background: var(--card);
  color: var(--moss);
}

.checkout-step-list .is-active {
  border-color: rgba(114, 85, 30, 0.46);
  background: var(--surface-gold-soft);
  color: var(--moss);
}

.checkout-step-list .is-active span,
.checkout-step-list .is-complete span {
  background: var(--moss);
  color: #fffdf8;
}

.checkout-contact-step {
  margin-top: 16px;
}

.checkout-cart-list {
  display: grid;
  gap: 10px;
}

.checkout-cart-list h3,
.checkout-confirm-card h3 {
  color: var(--moss);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 900;
}

.checkout-cart-item {
  background: var(--card);
}

.checkout-copy-request {
  background: var(--surface-stone);
}

.dc-delivery.is-missing {
  border-color: rgba(155, 63, 53, 0.42);
  box-shadow: 0 0 0 3px rgba(155, 63, 53, 0.08);
}

.checkout-confirm-card {
  margin-top: 12px;
}

.checkout-confirm-card + .payment-notice,
.checkout-copy-request,
.checkout-copy-request + .checkout-actions {
  margin-top: 12px;
}

.checkout-actions {
  margin-top: 0;
}

.checkout-empty-state {
  margin: 14px 0;
}

@media (max-width: 700px) {
  .cart-floating-button {
    top: max(10px, env(safe-area-inset-top, 0px));
    right: max(10px, env(safe-area-inset-right, 0px));
    min-height: 38px;
    padding: 0 10px 0 12px;
    font-size: 0.88rem;
  }

  .cart-panel {
    top: 58px;
    right: 10px;
    left: 10px;
    width: auto;
    max-height: calc(100vh - 78px);
  }

  .cart-panel-item {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .cart-item-thumb {
    width: 48px;
    height: 48px;
  }

  .cart-item-side {
    grid-column: 2;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    justify-items: stretch;
  }

  .cart-item-actions {
    justify-content: flex-end;
  }

  .cart-item-price {
    white-space: normal;
  }

  .cart-entry-actions,
  .cart-entry-buttons,
  .cart-edit-bar,
  .checkout-step-list {
    grid-template-columns: 1fr;
  }

  .cart-edit-bar {
    position: sticky;
    top: 8px;
    z-index: 12;
  }

  .cart-edit-bar > div {
    justify-content: stretch;
  }

  .cart-edit-bar .button {
    width: 100%;
  }

  .checkout-step-list li {
    padding: 9px 10px;
  }
}

.button.primary:active,
.pack-option:active {
  box-shadow: inset 0 2px 8px rgba(46, 36, 19, 0.24);
}

.admin-price-table input[data-admin-price-pack-edit] {
  width: 76px;
}

.contact-shell,
.message-result-shell {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 16px;
}

.contact-card,
.message-result-card {
  display: grid;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: var(--shadow);
}

.contact-form {
  display: grid;
  gap: 12px;
}

.contact-form label {
  display: grid;
  gap: 6px;
  color: var(--moss);
  font-weight: 850;
}

.contact-form textarea {
  min-height: 150px;
  resize: vertical;
}

.contact-form .copy-line {
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  color: var(--ink);
  font-weight: 750;
}

.contact-form .copy-line input {
  margin-top: 4px;
  accent-color: var(--moss);
}

.category-entry-shell {
  max-width: 980px;
}

.category-entry-card {
  gap: 20px;
}

.category-entry-layout {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.1fr);
  gap: 24px;
  align-items: center;
}

.category-entry-media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--linen);
}

.category-entry-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.category-entry-copy {
  display: grid;
  gap: 16px;
}

.category-entry-copy > p {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

@media (max-width: 640px) {
  .category-entry-layout {
    grid-template-columns: 1fr;
  }

  .category-entry-media {
    aspect-ratio: 16 / 10;
  }
}

.form-hint {
  margin: -4px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.result-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.butterfly-friend {
  position: fixed;
  z-index: 9999;
  width: calc(var(--butterfly-size, 54px) * 2.5);
  height: calc(var(--butterfly-size, 54px) * 2.1);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: grab;
  transform-origin: center;
  transition: left 1500ms cubic-bezier(.2,.85,.25,1), top 1500ms cubic-bezier(.2,.85,.25,1), transform 850ms ease, opacity 500ms ease;
  filter: drop-shadow(0 8px 11px rgba(46, 36, 19, 0.18));
  touch-action: none;
  perspective: 800px;
}

.butterfly-friend.is-dragging {
  cursor: grabbing;
  transition: none;
}

.butterfly-friend.is-resting {
  animation: butterflyRest 2600ms ease-in-out infinite;
}

.butterfly-friend.is-leaving {
  pointer-events: none;
  opacity: 0;
  transform: translate(90px, -80px) rotate(18deg) scale(0.82);
}

.butterfly-shadow {
  position: absolute;
  left: 50%;
  bottom: 10%;
  width: 44%;
  height: 7%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.18);
  border-radius: 999px;
  filter: blur(1px);
  animation: butterflyShadow 250ms cubic-bezier(.48,.01,.54,1) infinite alternate-reverse;
}

.butterfly-core {
  position: absolute;
  left: 50%;
  top: 46%;
  width: calc(var(--butterfly-size, 54px) * 0.18);
  height: calc(var(--butterfly-size, 54px) * 1.22);
  transform: translate(-50%, -50%) rotateY(100deg);
  transform-style: preserve-3d;
  border-radius: 999px;
  background: var(--butterfly-body, #6e4a35);
  z-index: 3;
}

.butterfly-friend::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 46%;
  width: calc(var(--butterfly-size, 54px) * 0.18);
  height: calc(var(--butterfly-size, 54px) * 1.22);
  transform: translate(-50%, -50%) rotateY(100deg);
  border-radius: 999px;
  background: color-mix(in srgb, var(--butterfly-body, #6e4a35) 84%, black 16%);
  z-index: 2;
}

.butterfly-wing {
  position: absolute;
  top: 50%;
  width: 1px;
  height: 1px;
  opacity: 0.96;
  outline: 1px solid transparent;
  transform-style: preserve-3d;
}

.butterfly-wing.left {
  left: 50%;
  transform: translate(-6px, -10px) rotateX(50deg) rotateY(-20deg) rotateZ(-50deg);
  transform-origin: 700% 50%;
  animation: butterflyLeftFlap 250ms cubic-bezier(.48,.01,.54,1) infinite alternate-reverse;
  z-index: 3;
}

.butterfly-wing.right {
  right: 50%;
  transform: translate(6px, -10px) rotateX(50deg) rotateY(200deg) rotateZ(-50deg);
  transform-origin: -600% 50%;
  animation: butterflyRightFlap 250ms cubic-bezier(.48,.01,.54,1) infinite alternate-reverse;
  z-index: 1;
}

.butterfly-bit,
.butterfly-bit::after {
  position: absolute;
  right: 0;
  top: 0;
  border-radius: 50%;
  overflow: hidden;
  transform-origin: 100% 50%;
}

.butterfly-bit.upper {
  width: calc(var(--butterfly-size, 54px) * 2.15);
  height: calc(var(--butterfly-size, 54px) * 1.16);
  top: calc(var(--butterfly-size, 54px) * 0.24);
  transform: rotateZ(40deg);
  background: var(--butterfly-wing-a, #63a9ff);
}

.butterfly-bit.upper::after {
  content: '';
  width: calc(var(--butterfly-size, 54px) * 1.68);
  height: calc(var(--butterfly-size, 54px) * 1.0);
  left: calc(var(--butterfly-size, 54px) * -0.48);
  top: calc(var(--butterfly-size, 54px) * 0.1);
  background: var(--butterfly-wing-b, #8dc2ff);
}

.butterfly-bit.lower {
  width: calc(var(--butterfly-size, 54px) * 1.68);
  height: calc(var(--butterfly-size, 54px) * 0.92);
  transform: rotateZ(-40deg);
  background: var(--butterfly-wing-a, #63a9ff);
}

.butterfly-bit.lower::after {
  content: '';
  width: calc(var(--butterfly-size, 54px) * 1.0);
  height: calc(var(--butterfly-size, 54px) * 0.75);
  left: calc(var(--butterfly-size, 54px) * -0.38);
  top: calc(var(--butterfly-size, 54px) * 0.09);
  background: var(--butterfly-wing-c, #aad0ff);
  z-index: 1;
}

.butterfly-friend.is-dragging .butterfly-wing {
  animation-duration: 140ms;
}

@keyframes butterflyLeftFlap {
  from { transform: translate(-6px, -10px) rotateX(50deg) rotateY(-20deg) rotateZ(-50deg); }
  to { transform: translate(-6px, -10px) rotateX(50deg) rotateY(90deg) rotateZ(-50deg); }
}

@keyframes butterflyRightFlap {
  from { transform: translate(6px, -10px) rotateX(50deg) rotateY(200deg) rotateZ(-50deg); }
  to { transform: translate(6px, -10px) rotateX(50deg) rotateY(90deg) rotateZ(-50deg); }
}

@keyframes butterflyShadow {
  from { transform: translateX(-50%) scale(1,1); }
  to { transform: translateX(-50%) scale(1.1,1.1); }
}

@keyframes butterflyRest {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-5px) rotate(2deg); }
}

@media (prefers-reduced-motion: reduce) {
  .butterfly-friend {
    display: none;
  }
}


/* v10 bugfix: keep quantity stack separate from the hero image and keep the xNN badge on the hero. */
.quantity-main .pin-stack {
  position: relative;
  z-index: 1;
  max-width: 100%;
  overflow: hidden;
}

.quantity-visual-wrap .uploaded-image,
.quantity-visual-wrap .design-image {
  position: relative;
  z-index: 1;
}

@media (max-width: 620px) {
  .quantity-card {
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 10px;
    padding: 12px;
  }

  .quantity-hero {
    min-height: 134px;
    padding: 4px;
  }

  .quantity-hero .design-image {
    width: min(34vw, 118px);
  }

  .pin-stack > span,
  .pin-stack > strong {
    width: 27px;
    height: 34px;
    margin-left: -10px;
  }

  .product-shape-round .pin-stack > span,
  .product-shape-round .pin-stack > strong,
  .product-shape-round .pin-stack > .pin-stack-dot {
    width: 27px;
    height: 27px;
  }
}

/* Admin keyboard image adjuster */
.uploaded-image[data-admin-image-visual],
.uploaded-image[data-admin-side-image-visual] {
  cursor: crosshair;
  outline: 0;
}

.uploaded-image[data-admin-image-visual]:hover,
.uploaded-image[data-admin-image-visual]:focus-visible,
.uploaded-image[data-admin-side-image-visual]:hover,
.uploaded-image[data-admin-side-image-visual]:focus-visible,
.uploaded-image.is-admin-image-active {
  box-shadow:
    0 0 0 3px rgba(199, 68, 56, 0.38),
    0 12px 28px rgba(46, 36, 19, 0.16),
    inset 0 0 0 1px rgba(142, 103, 31, 0.16);
}

.uploaded-image.is-admin-image-active::after {
  content: "teclado";
  position: absolute;
  left: 50%;
  bottom: 6px;
  z-index: 3;
  transform: translateX(-50%);
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.92);
  color: #8c3028;
  font-size: 0.58rem;
  font-weight: 900;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  pointer-events: none;
}

.admin-keyboard-panel {
  border-color: rgba(199, 68, 56, 0.28);
  background: #fff7f6;
}

.admin-keyboard-selected {
  margin: 0 0 8px;
  color: #8c3028;
  font-size: 0.82rem;
  font-weight: 800;
}

.admin-keyboard-values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin: 8px 0;
}

.admin-keyboard-values span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 10px;
  background: #fffdf8;
  color: #8c3028;
  font-size: 0.76rem;
  font-weight: 850;
}

.admin-keyboard-help {
  margin: 8px 0 0;
  color: #8c3028;
  font-size: 0.75rem;
  line-height: 1.45;
}

.admin-keyboard-help kbd {
  display: inline-block;
  min-width: 1.45em;
  margin: 0 2px;
  padding: 1px 4px;
  border: 1px solid rgba(140, 48, 40, 0.28);
  border-radius: 5px;
  background: #fffdf8;
  color: #8c3028;
  font: inherit;
  font-weight: 900;
  text-align: center;
}

/* v12 bugfix: round crachá/pin designs use Margem Y in pixels.
   Positive Y now moves the frame down through layout margin instead of only transform,
   so the title/subtitle never slide underneath the image. */
.product-shape-round .choice-card.design-grid {
  grid-template-rows: minmax(128px, auto) auto;
  min-height: 220px;
  align-items: start;
}

.product-shape-round .choice-card.design-grid .design-image {
  align-self: start;
}

.product-shape-round .choice-card.design-grid .choice-copy {
  align-self: start;
}

.product-shape-round .quantity-card {
  grid-template-columns: minmax(168px, 44%) minmax(0, 1fr);
}

.product-shape-round .quantity-hero {
  min-height: 198px;
  align-self: start;
}

.pin-stack .uploaded-image {
  margin-top: 0;
  margin-bottom: 0;
}

@media (max-width: 620px) {
  .product-shape-round .choice-card.design-grid {
    grid-template-rows: minmax(118px, auto) auto;
    min-height: 210px;
  }

  .product-shape-round .quantity-card {
    grid-template-columns: 144px minmax(0, 1fr);
  }

  .product-shape-round .quantity-hero {
    min-height: 168px;
  }
}

/* v13 crachás: keep round design cards balanced and keep +NN inline with the small crachás. */
.product-shape-round .choice-card.design-grid:not(:has(.admin-card-tools)) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  gap: 0;
  min-height: 230px;
}

.product-shape-round .choice-card.design-grid:not(:has(.admin-card-tools)) .design-image {
  flex: 0 0 auto;
}

.product-shape-round .choice-card.design-grid:not(:has(.admin-card-tools)) .choice-copy {
  flex: 0 0 auto;
  justify-items: center;
}

.pin-stack .pin-stack-dot.uploaded-image {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  transform: none !important;
}

.product-shape-round .pin-stack > strong {
  align-self: center;
  margin-top: 0;
  margin-bottom: 0;
}

@media (max-width: 620px) {
  .product-shape-round .choice-card.design-grid:not(:has(.admin-card-tools)) {
    min-height: 222px;
  }
}

/* v13.1: the +NN remainder belongs on the small-crachá preview, not as a lower extra row. */
.product-shape-round .quantity-main .pin-stack {
  position: relative;
  overflow: visible;
  padding-right: 18px;
}

.product-shape-round .quantity-main .pin-stack > strong {
  position: absolute;
  right: 0;
  bottom: -2px;
  z-index: 7;
  margin-left: 0;
}

/* v14: uploaded frames use edited size as real layout size; image transforms live inside. */
.design-image.uploaded-image {
  width: var(--image-frame-render-size, 96px);
}

.option-image.uploaded-image {
  width: var(--image-frame-render-size, 70px);
}

.product-shape-round .design-grid {
  align-items: start;
}

.product-shape-round .choice-card.design-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto auto !important;
  align-items: start !important;
  align-content: start !important;
  justify-items: center !important;
  gap: 16px !important;
  min-height: 0 !important;
  padding: 16px !important;
  text-align: center !important;
}

.product-shape-round .choice-card.design-grid .design-image,
.product-shape-round .choice-card.design-grid .design-card-media {
  grid-column: 1 !important;
  grid-row: 1 !important;
  justify-self: center !important;
  align-self: start !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.product-shape-round .choice-card.design-grid .choice-copy {
  grid-column: 1 !important;
  grid-row: 2 !important;
  justify-items: center !important;
  align-self: start !important;
  width: 100%;
  text-align: center !important;
}

.product-shape-round .choice-card.design-grid .admin-card-tools {
  grid-column: 1 !important;
  grid-row: 3 !important;
  width: 100%;
  text-align: left !important;
}

.product-shape-round .choice-card.design-grid .design-image.uploaded-image {
  max-width: none;
}

.product-shape-round .quantity-hero .design-image.uploaded-image {
  width: min(var(--image-frame-render-size, 148px), 100%) !important;
  max-width: 100%;
}

/* The +NN remainder should behave like one more small crachá in the stack. */
.product-shape-round .quantity-main .pin-stack {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: center;
  overflow: visible;
  padding-right: 0;
}

.product-shape-round .quantity-main .pin-stack > strong {
  position: relative !important;
  right: auto !important;
  bottom: auto !important;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-left: -8px;
  border-radius: 50%;
}


/* v15: final crachá layout fix.
   Do not use min(var(...), 100%) for round uploaded images: in shrink-to-fit
   wrappers it can resolve too small/empty. The edited frame size is the real
   layout width; the Y offset is already compensated by margins so text spacing
   stays balanced. */
.product-shape-round .choice-card.design-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto auto !important;
  justify-items: center !important;
  align-content: start !important;
  gap: 16px !important;
  padding: 16px !important;
  min-height: 0 !important;
  text-align: center !important;
}

.product-shape-round .choice-card.design-grid .design-image.uploaded-image {
  width: var(--image-frame-render-size, 102px) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.product-shape-round .choice-card.design-grid .choice-copy {
  width: 100% !important;
  justify-items: center !important;
  text-align: center !important;
}

@media (max-width: 430px) {
  .product-shape-round .step-card {
    padding-left: 6px;
    padding-right: 6px;
  }

  .product-shape-round .design-grid {
    gap: 6px;
  }

  .product-shape-round .choice-card.design-grid {
    padding: 12px 4px !important;
  }

  .product-shape-round .choice-card.design-grid .design-image.uploaded-image {
    width: min(var(--image-frame-render-size, 102px), 118px) !important;
  }
}

/* APP_FRAME_FIT_V8_MOBILE: design-grid frames must shrink with the card on
   narrow viewports. Hard-coded widths plus minmax(0,1fr) columns were causing
   the right side of the frame to be clipped (round circles read as ovals,
   portrait rectangles read as squares with the bottom cut), and at very
   narrow widths the image overflowed the card. Letting width track 100% of
   the cell with the existing aspect-ratio preserves the shape. The
   --frame-width-px / --frame-aspect vars come from app.js V7 so the admin's
   manual frameWidth/frameHeight is respected on mobile too (clamped to the
   cell width). */
@media (max-width: 620px) {
  .choice-card.design-grid .design-image.uploaded-image,
  .choice-card.design-grid .design-image {
    width: min(var(--frame-width-px, var(--image-frame-render-size, 102px)), 100%) !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
  }

  .choice-card.design-grid .design-image.uploaded-image {
    aspect-ratio: var(--frame-aspect, 1) !important;
  }

  .product-shape-rect .choice-card.design-grid .design-image.uploaded-image {
    aspect-ratio: var(--frame-aspect, 3 / 4) !important;
  }


.product-shape-rect .choice-card.design-grid {
    grid-template-rows: auto auto !important;
    min-height: 0;
  }

  .product-shape-round .choice-card.design-grid {
    grid-template-rows: auto auto !important;
    min-height: 0;
  }

  .product-shape-round .choice-card.design-grid:not(:has(.admin-card-tools)) {
    min-height: 0 !important;
  }
}

@media (max-width: 430px) {
  .choice-card.design-grid .design-image.uploaded-image,
  .choice-card.design-grid .design-image {
    width: min(var(--frame-width-px, var(--image-frame-render-size, 102px)), 100%) !important;
  }
}

.product-shape-round .quantity-visual-wrap {
  width: max-content !important;
  max-width: none !important;
}

.product-shape-round .quantity-hero .design-image.uploaded-image {
  width: var(--image-frame-render-size, 148px) !important;
  max-width: none !important;
  min-width: var(--image-frame-render-size, 148px) !important;
}

.product-shape-round .pin-stack .pin-stack-dot.uploaded-image {
  width: 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  height: 32px !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  transform: none !important;
}

.product-shape-round .quantity-main .pin-stack {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  align-content: center !important;
  overflow: visible !important;
  padding-right: 0 !important;
}

.product-shape-round .quantity-main .pin-stack > strong {
  position: relative !important;
  right: auto !important;
  bottom: auto !important;
  display: grid !important;
  place-items: center !important;
  width: 32px !important;
  height: 32px !important;
  margin-left: -8px !important;
  border-radius: 50% !important;
}


/* v16: ímanes/mini-cadernos no PASSO dos packs.
   As imagens retangulares carregadas precisam de tamanho real dentro do hero,
   senão min(var(...), 100%) pode encolher dentro do wrapper e a foto desaparece. */
.product-shape-rect .quantity-visual-wrap {
  width: max-content !important;
  max-width: none !important;
}

.product-shape-rect .quantity-hero .design-image.uploaded-image {
  width: var(--image-frame-render-size, 120px) !important;
  min-width: var(--image-frame-render-size, 120px) !important;
  max-width: none !important;
  aspect-ratio: 3 / 4;
}

.product-shape-rect.product-rect-orientation-landscape .design-image,
.product-shape-rect.product-rect-orientation-landscape .option-image,
.product-shape-rect.product-rect-orientation-landscape .pin-stack > span {
  aspect-ratio: 4 / 3;
}

.product-shape-rect.product-rect-orientation-landscape .choice-card.design-grid {
  grid-template-rows: 112px auto;
}

.product-shape-rect.product-rect-orientation-landscape .quantity-hero .design-image.uploaded-image {
  aspect-ratio: 4 / 3;
}

@media (max-width: 620px) {
  .product-shape-rect .quantity-hero .design-image.uploaded-image {
    width: min(var(--image-frame-render-size, 104px), 104px) !important;
    min-width: min(var(--image-frame-render-size, 104px), 104px) !important;
  }
}


/* v17: formato individual por design para ímanes e mini-cadernos.
   O selector no admin grava rectOrientation em cada item do Passo 1. */
.product-shape-rect .item-rect-orientation-portrait {
  aspect-ratio: 3 / 4 !important;
}

.product-shape-rect .item-rect-orientation-landscape {
  aspect-ratio: 4 / 3 !important;
}

/* As molduras ficam de fora: o card delas tem grelha propria (imagem | texto | preco,
   com o tamanho por baixo da imagem em ecras estreitos) e alturas automaticas. */
.product-shape-rect:not(.product-quadros) .choice-card.design-grid:has(.item-rect-orientation-portrait) {
  grid-template-rows: 136px auto !important;
}

.product-shape-rect:not(.product-quadros) .choice-card.design-grid:has(.item-rect-orientation-landscape) {
  grid-template-rows: 112px auto !important;
}

.product-shape-rect .quantity-hero .design-image.item-rect-orientation-portrait.uploaded-image {
  aspect-ratio: 3 / 4 !important;
}

.product-shape-rect .quantity-hero .design-image.item-rect-orientation-landscape.uploaded-image {
  aspect-ratio: 4 / 3 !important;
}

.product-shape-rect .pin-stack > .item-rect-orientation-portrait {
  width: 32px !important;
  height: 42px !important;
  aspect-ratio: 3 / 4 !important;
}

.product-shape-rect .pin-stack > .item-rect-orientation-landscape {
  width: 42px !important;
  height: 32px !important;
  aspect-ratio: 4 / 3 !important;
}

/* HOMEPAGE_CAROUSEL_DARKMODE_V1_OFFICIAL_SITE
   - Botao sol/lua: usa .header-link-icon (40x40 redondo) ja existente.
   - Numeros 01/02 sao removidos do DOM em renderHomeCategoryCard quando
     home.showCategoryNumbers !== true; nao precisa de regra para esconder.
   - Dark mode: html[data-theme="dark"] sobrepoe as CSS vars com !important
     porque applySiteSettings escreve as cores do home.json como inline
     style no <html>, e inline ganha sempre a CSS sem !important. Em dark,
     a paleta dos admins do home.json e ignorada de proposito. */

.header-theme-toggle {
  cursor: pointer;
  padding: 0;
  font: inherit;
  margin-left: auto;
}

.header-theme-toggle svg {
  pointer-events: none;
}

html[data-theme="dark"] {
  --paper: #15110a !important;
  --card: #221a0f !important;
  --linen: #2a2014 !important;
  --sage: #a59065 !important;
  --moss: #d8c08a !important;
  --ink: #f3e6c4 !important;
  --muted: #b89e6e !important;
  --gold: #e1bd5c !important;
  --gold-soft: #54401d !important;
  --rose: #d09a82 !important;
  --blue: #b09e72 !important;
  --line: rgba(216, 192, 138, 0.22) !important;
  --surface-cream: #21190e !important;
  --surface-cream-soft: #2a2014 !important;
  --surface-cream-strong: #342715 !important;
  --surface-stone: #271e13 !important;
  --surface-gold-soft: #3b2d15 !important;
  --border-soft-gold: rgba(216, 192, 138, 0.32) !important;
  --shadow: 0 20px 55px rgba(0, 0, 0, 0.5) !important;
  --button-bg: #d8c08a !important;
  --button-text: #15110a !important;
  --shadow-header: 0 8px 28px rgba(0, 0, 0, 0.42) !important;
  --shadow-editorial: 0 12px 30px rgba(0, 0, 0, 0.36) !important;
  --shadow-menu: -20px 0 50px rgba(0, 0, 0, 0.5) !important;
  color-scheme: dark;
}

html[data-theme="dark"] body {
  background: var(--surface-page) !important;
  color: var(--ink);
}

html[data-theme="dark"] .choice-card,
html[data-theme="dark"] .step-card,
html[data-theme="dark"] .home-intro,
html[data-theme="dark"] .summary-card,
html[data-theme="dark"] .delivery-card,
html[data-theme="dark"] .price-card,
html[data-theme="dark"] .interior-slideshow,
html[data-theme="dark"] .quantity-card,
html[data-theme="dark"] .contact-card,
html[data-theme="dark"] .privacy-page section,
html[data-theme="dark"] .home-shell,
html[data-theme="dark"] .product-shell {
  background: var(--card);
  color: var(--ink);
}

html[data-theme="dark"] .header-link-icon {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(216, 192, 138, 0.32);
  color: var(--moss);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .header-link-icon:hover {
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.55);
}

html[data-theme="dark"] .cart-header-button.has-items,
html[data-theme="dark"] .cart-floating-button,
html[data-theme="dark"] .cart-panel,
html[data-theme="dark"] .cart-close-button,
html[data-theme="dark"] .cart-edit-bar {
  background: var(--card);
  color: var(--moss);
}

html[data-theme="dark"] .cart-count-badge,
html[data-theme="dark"] .cart-floating-button strong {
  border-color: var(--card);
  background: var(--moss);
  color: var(--paper);
}

html[data-theme="dark"] .cart-panel-backdrop {
  background: rgba(0, 0, 0, 0.42);
}

html[data-theme="dark"] .cart-empty-state,
html[data-theme="dark"] .cart-panel-item,
html[data-theme="dark"] .checkout-step-list li {
  background: var(--surface-stone);
}

html[data-theme="dark"] .checkout-step-list .is-active {
  background: rgba(216, 192, 138, 0.14);
  border-color: rgba(216, 192, 138, 0.34);
}

html[data-theme="dark"] .cart-item-thumb {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line);
}

html[data-theme="dark"] .cart-remove-button {
  background: rgba(185, 52, 43, 0.12);
  border-color: rgba(208, 154, 130, 0.34);
  color: #d09a82;
}

html[data-theme="dark"] .button.primary,
html[data-theme="dark"] button.primary,
html[data-theme="dark"] [class*="button"].primary {
  background: var(--button-bg);
  color: var(--button-text);
  border-color: var(--button-bg);
}

html[data-theme="dark"] .button.is-disabled,
html[data-theme="dark"] .button[aria-disabled="true"] {
  border-color: var(--line);
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  opacity: 0.76;
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  border-color: var(--line);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: var(--muted);
}

html[data-theme="dark"] .uploaded-image {
  background-color: var(--linen);
}

html[data-theme="dark"] .pin-small,
html[data-theme="dark"] .pin-large {
  background:
    radial-gradient(circle at 50% 50%, var(--gold) 0 24%, transparent 25%),
    var(--linen);
}

html[data-theme="dark"] .site-footer,
html[data-theme="dark"] .step-list button {
  color: var(--muted);
}

html[data-theme="dark"] .admin-toolbar,
html[data-theme="dark"] .admin-login {
  background: var(--card);
  color: var(--ink);
  border-color: var(--line);
}

/* HOMEPAGE_CAROUSEL_DARKMODE_FIX_V2_OFFICIAL_SITE
   Patch sobre V1:
   1) Placeholder do numero da homepage: ocupa o mesmo espaco vertical
      mas e invisivel quando o toggle "Mostrar numeros" esta desligado,
      para o titulo do cartao continuar centrado (grid space-between).
   2) Dark mode completo do wizard: stepper, packs, cartoes informativos,
      summary, delivery, price, inputs/selects/textareas, botoes secundarios,
      fundos (.app-shell, .product-shell, .wizard-shell, body) e qualquer
      card branco do passo 4/5 que ainda usasse cores fixas.
   So toca em html[data-theme="dark"] selectors. Light mode intacto. */

.category-number.is-placeholder {
  visibility: hidden;
}

/* Stepper */
html[data-theme="dark"] .step-list button {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--line);
  color: var(--muted);
}

html[data-theme="dark"] .step-list .is-active button {
  background: var(--moss);
  border-color: var(--moss);
  color: var(--paper);
}

html[data-theme="dark"] .step-list .is-complete button {
  border-color: rgba(216, 192, 138, 0.55);
  color: var(--moss);
}

html[data-theme="dark"] .step-list .is-active.is-complete button {
  color: var(--paper);
}

html[data-theme="dark"] .wizard-progress__track {
  border-color: rgba(244, 221, 145, 0.24);
  background: linear-gradient(180deg, #4b3d24 0%, #302719 54%, #49391f 100%);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.36),
    0 2px 6px rgba(0, 0, 0, 0.24);
}

html[data-theme="dark"] .step-list li + li::before {
  background: var(--line);
}

/* Wizard / shells */
html[data-theme="dark"] .wizard-shell,
html[data-theme="dark"] .product-shell,
html[data-theme="dark"] .home-shell,
html[data-theme="dark"] .fallback,
html[data-theme="dark"] .contact-shell,
html[data-theme="dark"] .privacy-page {
  background: transparent;
  color: var(--ink);
}

html[data-theme="dark"] .step-card {
  background: var(--card);
  color: var(--ink);
  border-color: var(--line);
}

/* Cartoes de escolha (designs, ordem, etc.) */
html[data-theme="dark"] .choice-card {
  background: var(--card);
  color: var(--ink);
  border-color: var(--line);
}

html[data-theme="dark"] .choice-card:has(input:checked) {
  border-color: var(--moss);
  outline-color: rgba(216, 192, 138, 0.32);
}

/* Pack options */
html[data-theme="dark"] .pack-option {
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  border-color: var(--line);
}

html[data-theme="dark"] .pack-option span {
  color: var(--muted);
}

html[data-theme="dark"] .pack-option.is-selected {
  border-color: var(--moss);
  outline-color: rgba(216, 192, 138, 0.32);
}

html[data-theme="dark"] .pack-option strong,
html[data-theme="dark"] .quantity-status strong,
html[data-theme="dark"] .summary-value,
html[data-theme="dark"] .total-value {
  color: var(--ink);
}

html[data-theme="dark"] .summary-row.is-discount .summary-value {
  color: var(--gold);
}

html[data-theme="dark"] .summary-label,
html[data-theme="dark"] .total-label {
  color: var(--muted);
}

html[data-theme="dark"] .pack-price-card {
  background: linear-gradient(180deg, rgba(216, 192, 138, 0.16) 0%, rgba(216, 192, 138, 0.10) 100%);
  border-color: rgba(216, 192, 138, 0.28);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 10px 24px rgba(0, 0, 0, 0.32);
}

html[data-theme="dark"] .summary-divider {
  background: rgba(216, 192, 138, 0.32);
}

html[data-theme="dark"] .summary-icon {
  color: var(--gold);
  opacity: 1;
}

/* Cartoes informativos / status / preco / packs / quantidade.
   .pack-price-overview e .pack-price-card têm dark mode próprio acima
   (V5), por isso não entram aqui. */
html[data-theme="dark"] .quantity-status,
html[data-theme="dark"] .copy-request,
html[data-theme="dark"] .summary-list div,
html[data-theme="dark"] .confirm-card,
html[data-theme="dark"] .quantity-status.is-complete {
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  border-color: var(--line);
}

/* Inputs / textareas / selects */
html[data-theme="dark"] .details-grid input,
html[data-theme="dark"] .details-grid textarea,
html[data-theme="dark"] .details-grid select,
html[data-theme="dark"] .contact-form input,
html[data-theme="dark"] .contact-form textarea,
html[data-theme="dark"] .contact-form select,
html[data-theme="dark"] .admin-card-tools input,
html[data-theme="dark"] .admin-card-tools textarea,
html[data-theme="dark"] .admin-card-tools select,
html[data-theme="dark"] .admin-toolbar input,
html[data-theme="dark"] .admin-toolbar textarea,
html[data-theme="dark"] .admin-toolbar select {
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  border-color: var(--line);
}

/* Botao secundario */
html[data-theme="dark"] .button.secondary {
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  border-color: var(--line);
}

html[data-theme="dark"] .button.primary {
  background: var(--button-bg);
  color: var(--button-text);
  border-color: var(--button-bg);
}

/* Brand mark (logo redondo) — fundo claro fica estranho em dark */
html[data-theme="dark"] .brand-mark {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(216, 192, 138, 0.45);
}

/* Marca de admin oculto */
html[data-theme="dark"] .admin-hidden-badge {
  background: rgba(216, 192, 138, 0.18);
  color: var(--moss);
}

html[data-theme="dark"] .admin-hidden-category-section {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(216, 192, 138, 0.32);
}

/* Erro continua legivel em dark */
html[data-theme="dark"] .form-error {
  color: #ff8a7a;
}

/* Slideshow do interior (passo 2 cadernos) */
html[data-theme="dark"] .interior-slideshow {
  background: var(--card);
  border-color: var(--line);
}

html[data-theme="dark"] .interior-slideshow-frame {
  background: rgba(255, 255, 255, 0.04);
  border-color: var(--line);
}

/* Notas/banners de preco com fundos crema var(--surface-cream-soft) */
html[data-theme="dark"] .quantity-status.is-complete {
  background: rgba(216, 192, 138, 0.12);
}

/* Selected-pill / selected-summary do passo 4 */
html[data-theme="dark"] .selected-summary,
html[data-theme="dark"] .selected-pill {
  background: rgba(255, 255, 255, 0.04);
  color: var(--ink);
  border-color: var(--line);
}

/* Pin-stack-dot, e moldura interna */
html[data-theme="dark"] .pin-stack-dot {
  background: rgba(216, 192, 138, 0.18);
  color: var(--ink);
}

/* Privacy/contact specifics */
html[data-theme="dark"] .privacy-summary,
html[data-theme="dark"] .privacy-content,
html[data-theme="dark"] .contact-card {
  background: var(--card);
  color: var(--ink);
  border-color: var(--line);
}

html[data-theme="dark"] .privacy-summary p,
html[data-theme="dark"] .privacy-content p {
  color: var(--ink);
}

html[data-theme="dark"] .form-hint {
  color: var(--muted);
}

/* Hidden-step (admin) */
html[data-theme="dark"] .step-list .is-hidden-step button {
  border-style: dashed;
}

/* Confirm row no passo final */
html[data-theme="dark"] .confirm-design-row span {
  color: var(--ink);
}

/* CRACHAS_SECTIONS_V1
   Separadores do Passo 1 dos crachas. Cada seccao e um <section> com um
   <h3.design-grid-section-title> + um <div.design-grid> independente, por
   isso as 2/3 colunas, gap e overrides de mobile do design-grid continuam
   exactamente iguais aos anteriores; o titulo fica em flow normal acima
   do grid e ocupa a largura toda. */

.design-grid-section {
  display: block;
  margin-top: 18px;
}

.design-grid-section:first-child {
  margin-top: 0;
}

/* STYLE_TOKENS_V1: o conjunto abaixo é o estilo canónico de "título de
   secção" no wizard. Aplica-se a:
   - .design-grid-section-title (separadores Cidade do Porto / Restelo / ...)
   - .crachas-step2-summary-title ("Designs que vais encomendar")
   - .dc-block-title ("Como queres receber...", "Dados de Contacto")
   - .section-title (uso genérico futuro)
   Mantém-se a regra herdeira para .design-grid-section-title-old etc. */
.section-title,
.design-grid-section-title,
.crachas-step2-summary-title,
.confirm-card-title,
.dc-block-title {
  margin: 0 0 10px;
  padding-bottom: 6px;
  color: var(--moss);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.04rem, 4.4vw, 1.32rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.01em;
  border-bottom: 1px solid var(--line);
}

html[data-theme="dark"] .design-grid-section-title {
  color: var(--moss);
  border-bottom-color: var(--line);
}

.design-grid-section-empty {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.4;
  font-style: italic;
}

/* SECTIONED_STEP_ORDERING_V1 + SECTION_DISPLAY_LABELS_V1
   Estilos extra para grupos invisiveis (modo admin): ainda mostramos
   um titulo discreto ao admin para perceber a estrutura, mas sem linha
   por baixo nem destaque visual de separador. Tambem styling para a
   referencia "Original: ..." nos controlos de admin de cada item. */

.design-grid-section-invisible {
  margin-top: 14px;
}

.design-grid-section-invisible:first-child {
  margin-top: 0;
}

.design-grid-section-title.is-admin-only {
  color: var(--muted);
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  border-bottom: 0;
  padding-bottom: 0;
}

.design-grid-section-hint {
  color: var(--muted);
  font-weight: 500;
  font-size: 0.78rem;
  text-transform: none;
  letter-spacing: 0;
}

.admin-original-title {
  margin: 0 0 4px;
  color: var(--muted);
  font-size: 0.72rem;
  font-style: italic;
}

html[data-theme="dark"] .admin-original-title,
html[data-theme="dark"] .design-grid-section-hint,
html[data-theme="dark"] .design-grid-section-title.is-admin-only {
  color: var(--muted);
}

/* CRACHAS_STEP2_SIZE_LAYOUT_V2
   Cartões maiores no passo 2 dos crachás: visual original do tamanho |
   texto | indicador seleccionado. A foto de comparação deixou de ser a
   terceira coluna e passa a aparecer grande por baixo, só no cartão
   seleccionado. */

.crachas-size-card-list {
  display: grid;
  gap: 12px;
}

.choice-card.crachas-size-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) 32px;
  align-items: center;
  gap: 14px;
  min-height: 124px;
  padding: 16px;
}

.choice-card.crachas-size-card.is-muted .crachas-size-card-visual,
.choice-card.crachas-size-card.is-muted .crachas-size-card-text,
.choice-card.crachas-size-card.is-muted .crachas-size-card-selected {
  opacity: 0.54;
}

.choice-card.crachas-size-card .choice-copy strong {
  color: var(--ink);
  font-size: 1.46rem;
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1.05;
}

.crachas-size-card-visual {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.crachas-size-card-selected {
  position: absolute;
  top: var(--selection-check-top);
  right: var(--selection-check-right);
  transform: var(--selection-check-transform);
  z-index: 5;
  display: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #756026;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1;
  pointer-events: none;
}

.choice-card.crachas-size-card.is-selected .crachas-size-card-selected,
.choice-card.crachas-size-card:has(input:checked) .crachas-size-card-selected {
  display: inline-flex;
}

.crachas-size-choice,
.cadernos-cover-choice,
.cadernos-lamination-choice,
.cadernos-purchase-choice {
  display: grid;
}

.crachas-size-card-proof {
  display: grid;
  justify-items: center;
  margin: -6px 8px 12px;
  padding: 14px;
  overflow: visible;
  border: 1px solid rgba(126, 93, 22, 0.18);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  background: #fffaf0;
}

.crachas-size-card-proof-media {
  position: relative;
  display: block;
  width: 100%;
  overflow: hidden;
  border: 1px solid rgba(126, 93, 22, 0.20);
  border-radius: 16px;
  background: #f6ead1;
  box-shadow: 0 12px 28px rgba(69, 49, 14, 0.12);
}

.crachas-size-card-proof-note {
  position: absolute;
  left: 0.8rem;
  right: 0.8rem;
  bottom: 0.8rem;
  z-index: 2;
  display: inline-block;
  max-width: calc(100% - 1.6rem);
  padding: 0.5rem 0.7rem;
  border-radius: 0.8rem;
  background: rgba(255, 252, 246, 0.96);
  color: #6f5520;
  font-size: 0.78rem;
  line-height: 1.35;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(69, 49, 14, 0.12);
}

.crachas-size-card-proof .option-image,
.crachas-size-card-proof .option-image.uploaded-image,
.crachas-size-card-proof .uploaded-image {
  display: block;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.crachas-size-card-proof .uploaded-image-inner {
  inset: -30%;
}

/* CRACHAS_STEP2_PROOF_PHOTO_CROP_FIX_V1
   A foto grande usa um <img> real para que X/Y/zoom actuem sobre a foto
   completa, em vez de herdar o recorte da antiga miniatura lateral. */
.crachas-size-card-proof-frame.uploaded-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #f6ead1;
  overflow: hidden;
}

.crachas-size-card-proof-img {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
  object-position:
    calc(50% + var(--image-position-x, 0%))
    calc(50% + var(--image-position-y, 0%));
  transform: scale(var(--image-zoom-scale, 1)) rotate(var(--image-rotation, 0deg));
  transform-origin: center;
  will-change: transform, object-position;
}

.crachas-size-card-proof--wide .crachas-size-card-proof-img {
  width: 100%;
}

.cadernos-proof--adaptive .crachas-size-card-proof-media {
  width: min(420px, 100%);
  background: #fff;
}

.cadernos-proof--adaptive .crachas-size-card-proof-img {
  width: auto;
  max-height: min(62vh, 520px);
  margin-inline: auto;
}

.cadernos-proof--adaptive .crachas-size-card-proof-frame.uploaded-image {
  background: #fff;
}

html[data-theme="dark"] .crachas-size-card-proof-note {
  background: rgba(32, 28, 20, 0.88);
  color: var(--surface-cream);
}

.choice-card.cadernos-lamination-card .crachas-size-card-visual .option-image,
.choice-card.cadernos-lamination-card .crachas-size-card-visual .uploaded-image {
  width: var(--frame-width-px, 86px) !important;
  height: var(--frame-height-px, 64px) !important;
  border-radius: 12px;
}

.choice-card.cadernos-cover-card .crachas-size-card-visual .uploaded-image,
.choice-card.cadernos-lamination-card .crachas-size-card-visual .uploaded-image,
.choice-card.cadernos-purchase-card .crachas-size-card-visual .uploaded-image {
  background-color: #fff;
}

.choice-card.cadernos-cover-card .crachas-size-card-visual .uploaded-image-inner,
.choice-card.cadernos-lamination-card .crachas-size-card-visual .uploaded-image-inner,
.choice-card.cadernos-purchase-card .crachas-size-card-visual .uploaded-image-inner {
  inset: 0;
  background-size: contain !important;
}

.cadernos-cover-list {
  gap: 12px;
}

.cadernos-cover-choice {
  display: grid;
}

.choice-card.cadernos-cover-card {
  grid-template-columns: auto minmax(0, 1fr) 32px;
}

.choice-card.cadernos-cover-card .cadernos-cover-media {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: auto;
  height: auto;
}

.choice-card.cadernos-cover-card .crachas-size-card-visual .option-image,
.choice-card.cadernos-cover-card .crachas-size-card-visual .uploaded-image {
  width: var(--frame-width-px, 76px) !important;
  height: var(--frame-height-px, 96px) !important;
  border-radius: 12px;
}

.choice-card.cadernos-cover-card .cadernos-cover-media .option-image,
.choice-card.cadernos-cover-card .cadernos-cover-media .uploaded-image {
  width: var(--frame-width-px, 76px) !important;
  height: var(--frame-height-px, 96px) !important;
  margin: 0;
}

.choice-card.cadernos-cover-card .cadernos-cover-media .design-zoom-button {
  right: 4px;
  bottom: 4px;
  width: 28px;
  height: 28px;
}

.cadernos-cover-drawer {
  display: grid;
  align-items: center;
  justify-items: center;
  margin: -6px 8px 12px;
  padding: 14px;
  border: 1px solid rgba(126, 93, 22, 0.18);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  background: #fffaf0;
}

.cadernos-cover-preview-frame {
  position: relative;
  justify-self: center;
  width: min(260px, 100%);
  margin-inline: auto;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid rgba(126, 93, 22, 0.20);
  border-radius: 16px;
  background: #f6ead1;
  box-shadow: 0 12px 28px rgba(69, 49, 14, 0.12);
  touch-action: pan-y;
}

.cadernos-cover-preview-slide {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  opacity: 0;
  transition: opacity 320ms ease;
}

.cadernos-cover-preview-slide.is-active {
  opacity: 1;
}

.quadros-design-choice {
  display: grid;
  min-width: 0;
}

.quadros-design-choice > .choice-card {
  position: relative;
  z-index: 1;
}

.quadros-design-drawer {
  margin-top: -8px;
  padding-top: 18px;
}

.quadros-design-preview-frame {
  width: min(360px, 100%);
  aspect-ratio: 4 / 3;
  background: #fffdf8;
}

.quadros-design-preview-slide {
  background-color: #fffdf8;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

.cadernos-preview-pill {
  display: grid;
  place-items: center;
  min-width: 9.5rem;
}

.cadernos-preview-pill-label {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 220ms ease;
}

.cadernos-preview-pill-label.is-active {
  opacity: 1;
}

.cadernos-preview-arrow {
  position: absolute;
  top: 50%;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 42px;
  border: 1px solid rgba(255, 253, 248, 0.7);
  border-radius: 999px;
  background: rgba(46, 36, 19, 0.36);
  color: #fffdf8;
  font-size: 2rem;
  font-weight: 650;
  line-height: 1;
  transform: translateY(-50%);
  cursor: pointer;
}

.cadernos-preview-arrow--prev {
  left: 10px;
}

.cadernos-preview-arrow--next {
  right: 10px;
}

.cadernos-preview-arrow:hover,
.cadernos-preview-arrow:focus-visible {
  background: rgba(46, 36, 19, 0.52);
}

@keyframes cadernos-cover-carousel {
  0%, 26% { opacity: 1; }
  32%, 100% { opacity: 0; }
}

.choice-card.cadernos-purchase-card,
.choice-card.cadernos-personalization-card {
  appearance: none;
  width: 100%;
  grid-template-columns: minmax(0, 1fr) 32px;
  text-align: left;
  font: inherit;
  color: inherit;
}

.choice-card.cadernos-purchase-card {
  grid-template-columns: auto minmax(0, 1fr) auto 32px;
}

.choice-card.cadernos-purchase-card .choice-copy,
.choice-card.cadernos-personalization-card .choice-copy {
  align-items: flex-start;
}

.choice-card.cadernos-purchase-card .crachas-size-card-visual .option-image,
.choice-card.cadernos-purchase-card .crachas-size-card-visual .uploaded-image {
  width: var(--frame-width-px, 86px) !important;
  height: var(--frame-height-px, 64px) !important;
  border-radius: 12px;
}

.cadernos-purchase-price {
  justify-self: end;
  color: var(--moss);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.2rem;
  font-weight: 800;
  white-space: nowrap;
}

.cadernos-purchase-list .admin-card-tools {
  grid-column: 1 / -1;
}

.cadernos-order-quantity {
  margin-top: 16px;
  padding: 14px;
  border: 1px solid rgba(126, 93, 22, 0.18);
  border-radius: var(--radius);
  background: #fffaf0;
}

.cadernos-order-quantity-copy {
  display: grid;
  gap: 4px;
  margin-bottom: 10px;
}

.cadernos-order-quantity-copy strong {
  color: var(--moss);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.06rem;
}

.cadernos-order-quantity-copy span {
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.35;
}

.cadernos-order-quantity-options {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cadernos-order-quantity-control {
  display: grid;
  grid-template-columns: 44px minmax(96px, 150px) 44px auto;
  align-items: center;
  gap: 8px;
}

.cadernos-order-quantity-control > button {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(126, 93, 22, 0.24);
  border-radius: 12px;
  background: var(--paper);
  color: var(--moss);
  font: inherit;
  font-size: 1.2rem;
  font-weight: 800;
  cursor: pointer;
}

.cadernos-order-quantity-control > button:disabled {
  opacity: 0.42;
  cursor: default;
}

.cadernos-order-quantity-control label {
  display: block;
}

.cadernos-order-quantity-control label > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.cadernos-order-quantity-control input {
  width: 100%;
  height: 44px;
  box-sizing: border-box;
  border: 1px solid rgba(126, 93, 22, 0.24);
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  text-align: center;
}

.cadernos-order-quantity-control > small {
  color: var(--muted);
  font-weight: 700;
}

.cadernos-info-note {
  display: inline-block;
  max-width: 100%;
  margin: 14px 0 0;
  padding: 0.5rem 0.7rem;
  border: 1px solid rgba(126, 93, 22, 0.16);
  border-radius: 0.8rem;
  background: rgba(255, 252, 246, 0.96);
  color: #6f5520;
  font-size: 0.82rem;
  line-height: 1.35;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(69, 49, 14, 0.10);
}

.cadernos-info-note--promo,
.cadernos-info-note--important {
  display: block;
  padding: 0.78rem 0.9rem;
  border-color: rgba(126, 93, 22, 0.28);
  background: #fff7df;
  color: #654914;
  font-size: 0.92rem;
  box-shadow: 0 12px 28px rgba(69, 49, 14, 0.14);
}

.cadernos-info-note--important {
  border-left: 4px solid var(--moss);
}

.cadernos-personalization-field {
  display: grid;
  gap: 8px;
}

.cadernos-personalization-field span {
  color: var(--moss);
  font-weight: 800;
}

.cadernos-personalization-field small {
  color: var(--muted);
  font-weight: 600;
}

.cadernos-personalization-field input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0.82rem 0.9rem;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}

.cadernos-personalization-field input.is-missing {
  border-color: #b94d3f;
  box-shadow: 0 0 0 3px rgba(185, 77, 63, 0.12);
}

.cadernos-personalization-choice {
  display: grid;
}

.cadernos-personalization-drawer {
  display: grid;
  gap: 8px;
  margin: -8px 8px 10px;
  padding: 12px;
  border: 1px solid rgba(126, 93, 22, 0.18);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  background: #fffaf0;
}

.cadernos-build-summary {
  margin-top: 22px;
  padding: 16px;
  border: 1px solid rgba(126, 93, 22, 0.18);
  border-radius: var(--radius);
  background: #fffaf0;
}

.cadernos-build-summary h3 {
  margin: 0 0 12px;
  color: var(--moss);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.08rem;
}

.cadernos-build-parts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  align-items: stretch;
  gap: 12px;
}

.cadernos-build-part {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid rgba(126, 93, 22, 0.16);
  border-radius: 14px;
  background: #fffdf8;
  text-align: center;
}

.cadernos-build-part .design-image,
.cadernos-build-part .option-image,
.cadernos-build-part .uploaded-image {
  width: var(--frame-width-px, 88px) !important;
  height: var(--frame-height-px, 118px) !important;
  border-radius: 12px;
}

.cadernos-build-part span {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.cadernos-build-part strong {
  color: var(--moss);
  font-size: 0.76rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cadernos-build-part em {
  color: var(--ink);
  font-style: normal;
  font-weight: 750;
  line-height: 1.25;
}

.cadernos-build-part .admin-card-tools-image-slot {
  width: 100%;
  margin-top: 6px;
  text-align: left;
}

.cadernos-build-part--text {
  min-width: 0;
}

.cadernos-build-plus {
  display: none;
}

.cadernos-confirm-card {
  display: grid;
  gap: 18px;
}

.cadernos-confirm-card .confirm-list {
  padding: 0 0 16px;
}

.cadernos-confirm-card .confirm-list div {
  padding: 10px 0;
}

.cadernos-confirm-card .confirm-list dt {
  margin-bottom: 4px;
  color: var(--moss);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cadernos-confirm-card .confirm-list dd {
  font-size: 1rem;
  line-height: 1.45;
}

html[data-theme="dark"] .cadernos-info-note {
  background: rgba(32, 28, 20, 0.88);
  color: var(--surface-cream);
}

@media (max-width: 560px) {
  .choice-card.cadernos-purchase-card {
    grid-template-columns: auto minmax(0, 1fr) 28px;
  }

  .choice-card.cadernos-purchase-card .crachas-size-card-visual .option-image,
  .choice-card.cadernos-purchase-card .crachas-size-card-visual .uploaded-image {
    width: var(--frame-width-px, 70px) !important;
    height: var(--frame-height-px, 58px) !important;
  }

  .choice-card.cadernos-purchase-card .cadernos-purchase-price {
    grid-column: 2 / 3;
    justify-self: start;
    font-size: 1.1rem;
  }

  .choice-card.cadernos-purchase-card .crachas-size-card-selected {
    grid-column: 3 / 4;
    grid-row: 1 / 2;
  }

  .cadernos-order-quantity-options {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cadernos-order-quantity-control {
    grid-template-columns: 42px minmax(82px, 1fr) 42px;
  }

  .cadernos-order-quantity-control > small {
    grid-column: 1 / -1;
    text-align: center;
  }
}

.admin-card-tools-section {
  display: contents;
}

.admin-card-tools-heading {
  grid-column: 1 / -1;
  margin: 8px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--moss);
  letter-spacing: 0.02em;
}

@media (min-width: 720px) {
  .crachas-size-card-proof .option-image,
  .crachas-size-card-proof .option-image.uploaded-image,
  .crachas-size-card-proof .uploaded-image,
  .crachas-size-card-proof-frame.uploaded-image {
    aspect-ratio: auto;
  }
}

@media (max-width: 480px) {
  .choice-card.crachas-size-card {
    grid-template-columns: 78px minmax(0, 1fr) 28px;
    gap: 12px;
    padding: 14px;
    min-height: 0;
  }

  .choice-card.crachas-size-card .choice-copy strong {
    font-size: 1.44rem;
  }

  .choice-card.crachas-size-card .choice-copy > span {
    font-size: 0.92rem;
  }

  .choice-card.crachas-size-card .choice-note {
    font-size: 0.9rem;
  }

  .crachas-size-card-visual .option-image,
  .crachas-size-card-visual .uploaded-image {
    width: 68px !important;
    height: 68px !important;
  }

  .crachas-size-card-visual .option-image.pin-large,
  .crachas-size-card-visual .uploaded-image.pin-large {
    width: 76px !important;
    height: 76px !important;
  }

  .crachas-size-card-selected {
    width: 22px;
    height: 22px;
  }
}

@media (max-width: 390px) {
  .choice-card.crachas-size-card {
    grid-template-columns: 70px minmax(0, 1fr) 26px;
    gap: 10px;
    padding: 12px;
  }

  .choice-card.crachas-size-card .choice-copy strong {
    font-size: 1.34rem;
  }

  .choice-card.crachas-size-card .choice-copy > span,
  .choice-card.crachas-size-card .choice-note {
    font-size: 0.86rem;
  }

  .crachas-size-card-visual .option-image,
  .crachas-size-card-visual .uploaded-image {
    width: 62px !important;
    height: 62px !important;
  }

  .crachas-size-card-visual .option-image.pin-large,
  .crachas-size-card-visual .uploaded-image.pin-large {
    width: 68px !important;
    height: 68px !important;
  }

  .crachas-size-card-proof-note {
    left: 0.65rem;
    right: 0.65rem;
    bottom: 0.65rem;
    max-width: calc(100% - 1.3rem);
    font-size: 0.72rem;
  }
}

/* CADERNOS_MOBILE_FRAME_COLUMN_FIX_V1
   Os cartões de cadernos podem ter molduras ajustadas no admin. Em mobile,
   a grelha genérica dos crachás forçava a coluna da imagem a 70/78px e a
   moldura invadia o texto. Para cadernos, a coluna mede a moldura real. */
@media (max-width: 480px) {
  .choice-card.cadernos-cover-card,
  .choice-card.cadernos-lamination-card,
  .choice-card.cadernos-purchase-card {
    grid-template-columns: max-content minmax(0, 1fr) 28px;
  }
}

@media (max-width: 390px) {
  .choice-card.cadernos-cover-card,
  .choice-card.cadernos-lamination-card,
  .choice-card.cadernos-purchase-card {
    grid-template-columns: max-content minmax(0, 1fr) 26px;
  }
}

.choice-card.cadernos-cover-card .cadernos-cover-media .uploaded-image[data-admin-image-visual],
.choice-card.cadernos-cover-card .crachas-size-card-visual .uploaded-image[data-admin-image-visual],
.choice-card.cadernos-lamination-card .crachas-size-card-visual .uploaded-image[data-admin-image-visual],
.choice-card.cadernos-purchase-card .crachas-size-card-visual .uploaded-image[data-admin-image-visual] {
  width: var(--frame-width-px, 76px) !important;
  height: var(--frame-height-px, 96px) !important;
}

.choice-card.cadernos-lamination-card .crachas-size-card-visual .uploaded-image[data-admin-image-visual],
.choice-card.cadernos-purchase-card .crachas-size-card-visual .uploaded-image[data-admin-image-visual] {
  width: var(--frame-width-px, 86px) !important;
  height: var(--frame-height-px, 64px) !important;
}

@media (max-width: 480px) {
  .choice-card.cadernos-lamination-card .crachas-size-card-visual .option-image,
  .choice-card.cadernos-lamination-card .crachas-size-card-visual .uploaded-image,
  .choice-card.cadernos-lamination-card .crachas-size-card-visual .uploaded-image[data-admin-image-visual] {
    width: min(var(--frame-width-px, 86px), max(78px, 27vw)) !important;
    height: auto !important;
    aspect-ratio: var(--frame-aspect, 160 / 124) !important;
  }
}

@media (max-width: 420px) {
  .choice-card.cadernos-purchase-card .crachas-size-card-visual .option-image,
  .choice-card.cadernos-purchase-card .crachas-size-card-visual .uploaded-image,
  .choice-card.cadernos-purchase-card .crachas-size-card-visual .uploaded-image[data-admin-image-visual] {
    width: min(var(--frame-width-px, 86px), max(58px, 20vw)) !important;
    height: auto !important;
    aspect-ratio: var(--frame-aspect, 86 / 64) !important;
  }
}

/* CRACHAS_STEP2_SELECTED_DESIGNS_CLEANUP_V2
   Bloco unico de designs escolhidos com fundo bege quente e tiles
   verticais sem moldura individual. */
.crachas-step2-summary {
  margin-top: 22px;
  padding: 18px 16px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-cream-strong);
}

/* STYLE_TOKENS_V1: estilo canónico aplicado pela regra agrupada acima. */

.crachas-step2-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px 18px;
  align-items: start;
  justify-items: center;
}

.crachas-step2-summary-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  min-width: 0;
}

.crachas-step2-summary-tile .design-image,
.crachas-step2-summary-tile .option-image,
.crachas-step2-summary-tile .uploaded-image {
  width: 56px;
  flex: 0 0 auto;
}

.crachas-step2-summary-tile-name {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--ink);
  text-align: center;
  white-space: normal;
  line-height: 1.15;
  max-width: 12ch;
}

html[data-theme="dark"] .crachas-step2-summary {
  background: rgba(216, 192, 138, 0.08);
  border-color: var(--line);
}

html[data-theme="dark"] .crachas-step2-summary-title,
html[data-theme="dark"] .crachas-step2-summary-tile-name {
  color: var(--ink);
}

/* CRACHAS_STEP2_MOBILE_COLUMNS_FIX_V6 — escala de colunas:
   >700px: 4 (default), ≤700: 3, ≤575: 2, ≤384: 1. Cada bloco vem DEPOIS
   do anterior para ganhar por source order quando varios @media batem
   (ex.: 350px bate em 700, 575 e 384 → ganha 384). */
@media (max-width: 700px) {
  .crachas-step2-summary-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px 14px;
  }
}

@media (max-width: 575px) {
  .crachas-step2-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 12px;
  }

  .crachas-step2-summary-tile .design-image,
  .crachas-step2-summary-tile .option-image,
  .crachas-step2-summary-tile .uploaded-image {
    width: 48px;
  }

  .crachas-step2-summary-tile-name {
    font-size: 0.86rem;
    max-width: 100%;
  }
}

@media (max-width: 384px) {
  .crachas-step2-summary-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .crachas-step2-summary-tile .design-image,
  .crachas-step2-summary-tile .option-image,
  .crachas-step2-summary-tile .uploaded-image {
    width: 56px;
  }

  .crachas-step2-summary-tile-name {
    font-size: 0.86rem;
  }
}

/* MOLDURAS_SUMMARY_V1
   O "O que vais encomendar:" das molduras reaproveita o bloco dos crachas e
   acrescenta tiles proprios: foto enviada, quadrados de cor e caixas de texto.
   Vem DEPOIS dos @media dos crachas para a grelha auto-fit ganhar em todos os
   ecras (as media queries acima nao acrescentam especificidade). */
.quadros-summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(94px, 1fr));
  gap: 16px 14px;
}

.quadros-summary-tile {
  gap: 7px;
  width: 100%;
  max-width: 148px;
}

/* Todos os tiles do resumo têm a mesma caixa (5/4), independentemente da
   moldura de cada item — misturar retratos e paisagens desalinhava a grelha. */
.quadros-summary-tile .design-image,
.quadros-summary-tile .option-image,
.quadros-summary-tile .uploaded-image {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 5 / 4 !important;
  border-radius: 12px;
}

.quadros-summary-tile .crachas-step2-summary-tile-name {
  max-width: 100%;
  font-size: 0.86rem;
}

.quadros-summary-tile-label {
  color: var(--moss);
  font-size: 0.7rem;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.04em;
  text-align: center;
  text-transform: uppercase;
}

.quadros-summary-photo,
.quadros-summary-note,
.quadros-summary-text,
.quadros-summary-colors {
  width: 100%;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  border: 1px solid var(--ui-border);
  border-radius: 12px;
  background: var(--ui-card);
}

.quadros-summary-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quadros-summary-note {
  display: grid;
  place-items: center;
  color: var(--moss);
}

.quadros-summary-note svg {
  width: 34px;
  height: 34px;
}

.quadros-summary-text {
  display: grid;
  place-items: center;
  padding: 8px;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.82rem;
  line-height: 1.25;
  text-align: center;
  overflow-wrap: anywhere;
}

/* Cores escolhidas: quadrados com a cor real, nunca o nome. */
.quadros-summary-colors {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px;
}

.quadros-summary-colors > span {
  width: 100%;
  max-width: 32px;
  aspect-ratio: 1 / 1;
  border: 1px solid rgba(46, 36, 19, 0.2);
  border-radius: 5px;
  background: var(--quadros-summary-swatch, transparent);
}

html[data-theme="dark"] .quadros-summary-colors > span {
  border-color: rgba(216, 192, 138, 0.28);
}

/* DELIVERY_CONTACT_STEP_V1
   Estilos para o novo passo "Entrega e contacto". Composição:
   - .delivery-contact-step → wrapper com gap entre blocos
   - .dc-block → cada bloco (delivery, contact, designs); fundo creme suave
   - .dc-delivery-options / .dc-delivery-option → radios estilo card
   - .dc-contact-grid / .dc-field → grelha responsiva 2 colunas → 1 em mobile
   - .dc-block-note → texto explicativo abaixo dos campos (Phase B)
   - .dc-designs reaproveita .crachas-step2-summary com pequena adaptação
*/
.delivery-contact-step {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.dc-block {
  background: var(--card-bg, var(--surface-cream));
  border: 1px solid var(--card-border, #ead8a9);
  border-radius: 14px;
  padding: 22px 22px 20px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 6px 16px -10px rgba(0, 0, 0, 0.08);
}

/* STYLE_TOKENS_V1: estilo canónico aplicado pela regra agrupada acima. */

.dc-block-subtitle {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.45;
}

.dc-block-note {
  margin: 14px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.dc-delivery-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dc-delivery-option {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--card-border, #ead8a9);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.dc-delivery-option:hover {
  border-color: #c9a45e;
  background: rgba(255, 255, 255, 0.85);
}

.dc-delivery-option input {
  margin: 0;
  width: 18px;
  height: 18px;
  accent-color: var(--gold, #b88616);
}

.dc-delivery-option.is-selected,
.dc-delivery-option:has(input:checked) {
  border-color: var(--gold, #b88616);
  outline: 2px solid var(--gold, #b88616);
  outline-offset: -2px;
  background: var(--surface-cream-soft);
}

.dc-delivery-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.dc-delivery-text strong {
  font-size: 1rem;
  color: var(--ink);
  font-weight: 800;
}

.dc-delivery-text em {
  font-style: normal;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.35;
}

.dc-delivery-price {
  font-style: normal;
  font-weight: 800;
  font-size: 0.95rem;
  color: var(--ink);
  white-space: nowrap;
  text-align: right;
}

.dc-contact-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.dc-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dc-field > label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dc-field span {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--ink);
}

.dc-field span small {
  font-weight: 600;
  color: var(--muted);
  font-size: 0.8rem;
}

.dc-field-note {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.35;
}

.dc-field input {
  font: inherit;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--card-border, #ead8a9);
  background: #fff;
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.dc-field input:focus {
  outline: none;
  border-color: var(--gold, #b88616);
  box-shadow: 0 0 0 3px rgba(184, 134, 22, 0.18);
}

.dc-field input.is-missing {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15);
}

.dc-designs {
  /* reaproveita estilos de .crachas-step2-summary mas com fundo do dc-block */
  background: var(--card-bg, var(--surface-cream));
}

@media (max-width: 540px) {
  .dc-block {
    padding: 18px 16px 16px;
  }

  .dc-contact-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .dc-delivery-option {
    grid-template-columns: auto 1fr;
    gap: 10px 12px;
  }

  .dc-delivery-price {
    grid-column: 2;
    text-align: left;
    font-size: 0.9rem;
  }
}

html[data-theme="dark"] .dc-block {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .dc-delivery-option {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.12);
}

html[data-theme="dark"] .dc-delivery-option:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--gold, #d4a84a);
}

html[data-theme="dark"] .dc-delivery-option.is-selected,
html[data-theme="dark"] .dc-delivery-option:has(input:checked) {
  background: rgba(212, 168, 74, 0.12);
  border-color: var(--gold, #d4a84a);
  outline-color: var(--gold, #d4a84a);
}

html[data-theme="dark"] .dc-field input {
  background: rgba(0, 0, 0, 0.25);
  border-color: rgba(255, 255, 255, 0.18);
  color: var(--ink);
}

/* OPEN_ORDER_HINT_V1: nota discreta acima dos blocos do passo
   delivery_contact, mostrada quando check-open-orders.php devolve true.
   Não revela detalhes da encomenda anterior. */
.open-order-hint {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(79, 122, 58, 0.10);
  border: 1px solid rgba(79, 122, 58, 0.30);
  color: var(--ink);
  font-size: 0.92rem;
  line-height: 1.45;
}

.open-order-hint strong {
  color: var(--moss, #4f7a3a);
  font-weight: 850;
}

.open-order-hint em {
  font-style: normal;
  font-weight: 800;
  color: var(--ink);
}

/* Destaca visualmente a opção "Junta as minhas encomendas" enquanto a
   hint estiver activa. Mantém a aparência consistente com is-selected. */
.dc-delivery-option.is-suggested {
  border-color: var(--moss, #4f7a3a);
  box-shadow: 0 0 0 2px rgba(79, 122, 58, 0.18) inset;
}

.dc-delivery-option.is-suggested .dc-delivery-text strong::after {
  content: " · recomendado";
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--moss, #4f7a3a);
  margin-left: 4px;
}

html[data-theme="dark"] .open-order-hint {
  background: rgba(79, 122, 58, 0.16);
  border-color: rgba(79, 122, 58, 0.4);
}

/* CSS_UNIFORMITY_LAYER_V1
   Camada canónica de UI: força os principais componentes públicos
   a partilharem a mesma linguagem visual, sem apagar o histórico acima.
   Reversão simples: remover este bloco inteiro. */
:root {
  --ui-surface: rgba(255, 253, 248, 0.92);
  --ui-card: #fffdf8;
  --ui-card-soft: var(--surface-cream-soft);
  --ui-card-muted: var(--surface-stone);
  --ui-card-highlight: var(--surface-gold-soft);
  --ui-border: var(--line);
  --ui-border-warm: rgba(142, 103, 31, 0.24);
  --ui-border-strong: rgba(142, 103, 31, 0.32);
  --ui-radius: var(--radius);
  --ui-radius-lg: 14px;
  --ui-shadow-card: 0 10px 24px rgba(68, 41, 0, 0.07);
  --ui-shadow-shell: var(--shadow);
  --ui-focus: rgba(125, 139, 98, 0.24);
  --ui-danger-bg: #fff7f6;
  --ui-danger-border: rgba(199, 68, 56, 0.18);
  --ui-danger-text: #8c3028;
  --ui-success-bg: rgba(79, 122, 58, 0.10);
  --ui-success-border: rgba(79, 122, 58, 0.30);
}

/* Superfícies principais */
.home-intro,
.product-intro,
.wizard-shell,
.result-card,
.fallback,
.contact-card,
.privacy-content {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-shell);
  color: var(--ink);
}

.step-card,
.choice-card,
.quantity-card,
.pack-option,
.delivery-option,
.dc-delivery-option,
.selected-pill,
.copy-request,
.confirm-card,
.summary-list div,
.result-list,
.contact-card,
.privacy-content {
  border-color: var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--ui-card);
  color: var(--ink);
}

.details-section,
.dc-block,
.price-panel,
.quantity-status,
.privacy-summary,
.crachas-step2-summary,
.delivery-choice.is-standalone {
  border: 1px solid var(--ui-border-warm);
  border-radius: var(--ui-radius);
  background: var(--ui-card-soft);
  color: var(--ink);
}

.price-panel.muted,
.summary-list div,
.confirm-card,
.copy-request,
.result-list,
.selected-pill,
.quantity-status {
  background: var(--ui-card-muted);
}

.product-crachas .confirm-card {
  background: var(--ui-card-soft);
}

.product-crachas .dc-design-quantity-wrap .quantity-badge {
  right: auto;
  left: -8px;
}

.payment-notice,
.order-success-card {
  border: 1px solid var(--border-soft-gold);
  border-radius: var(--ui-radius-lg);
  background: linear-gradient(180deg, var(--surface-cream) 0%, var(--ui-card-highlight) 100%);
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset, var(--ui-shadow-card);
}

.pack-price-card {
  border-color: var(--ui-border-strong);
  border-radius: var(--ui-radius-lg);
  background: linear-gradient(180deg, var(--surface-cream) 0%, var(--ui-card-soft) 100%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.85) inset, var(--ui-shadow-card);
}

/* Títulos de secção: mesmo tom, mesma família e mesma linha inferior */
.section-title,
.design-grid-section-title,
.crachas-step2-summary-title,
.confirm-card-title,
.dc-block-title,
.details-section h3,
.privacy-content h3 {
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--ui-border);
  color: var(--moss);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.04rem, 4.4vw, 1.32rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.01em;
}

.details-section h3,
.privacy-content h3 {
  margin-top: 0;
}

.dc-block-title + .dc-block-subtitle,
.details-section h3 + p,
.privacy-content h3 + p {
  margin-top: -2px;
}

/* Texto secundário */
.choice-copy span,
.choice-note,
.details-grid label > span,
.summary-list dt,
.empty-state,
.price-panel span,
.price-panel p,
.price-panel em,
.delivery-option em,
.dc-block-subtitle,
.dc-block-note,
.dc-delivery-text em,
.dc-field-note,
.privacy-summary p,
.privacy-content p,
.form-hint,
.selected-pill > span,
.quantity-main > div span,
.quantity-status,
.result-list {
  color: var(--muted);
}

/* Inputs e campos */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="number"],
select,
textarea,
.dc-field input,
.contact-form input,
.contact-form textarea,
.contact-form select {
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  background: var(--card);
  color: var(--ink);
}

input.is-missing,
.details-grid textarea.is-missing,
.dc-field input.is-missing,
.contact-form input.is-missing,
.contact-form textarea.is-missing {
  border-color: var(--ui-danger-text);
  background: var(--ui-danger-bg);
  box-shadow: 0 0 0 3px rgba(185, 52, 43, 0.16);
}

.form-error,
.details-grid label:has(.is-missing) > span,
.dc-field:has(.is-missing) span {
  color: var(--ui-danger-text);
  font-weight: 900;
}

/* Estados seleccionados: uma linguagem só — border + outline, sem cartões amarelos diferentes */
.choice-card:has(input:checked),
.pack-option.is-selected,
.delivery-option:has(input:checked),
.dc-delivery-option.is-selected,
.dc-delivery-option:has(input:checked) {
  border-color: var(--moss);
  outline: 3px solid var(--ui-focus);
  background: var(--ui-card);
}

.dc-delivery-option.is-selected,
.dc-delivery-option:has(input:checked) {
  outline-offset: 0;
}

/* SELECTED_CHECKMARKS_V1: o visto passa a ser a marca visual comum de selecao.
   Por defeito fica no canto superior direito; as variaveis em :root permitem
   voltar facilmente ao lado direito centrado. */
.choice-card.design-grid:has(input:checked)::after,
.choice-card.media-list:not(.crachas-size-card):has(input:checked)::after,
.choice-card.text-grid:has(input:checked)::after,
.choice-card.price-pack-grid:has(input:checked)::after,
.choice-card.size-choice:has(input:checked)::after,
.design-action-card.is-selected::after,
.pack-option.is-selected::after {
  content: "✓";
  position: absolute;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: #756026;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1;
  box-shadow: none;
  pointer-events: none;
}

.choice-card.design-grid:has(input:checked)::after {
  top: var(--selection-check-inset, 14px);
  right: var(--selection-check-inset, 14px);
}

.choice-card.media-list:not(.crachas-size-card):has(input:checked)::after,
.choice-card.text-grid:has(input:checked)::after,
.choice-card.price-pack-grid:has(input:checked)::after,
.choice-card.size-choice:has(input:checked)::after,
.design-action-card.is-selected::after,
.pack-option.is-selected::after {
  top: var(--selection-check-top);
  right: var(--selection-check-right);
  transform: var(--selection-check-transform);
}

.choice-card.media-list:not(.crachas-size-card),
.choice-card.text-grid,
.choice-card.price-pack-grid,
.choice-card.size-choice,
.design-action-card,
.pack-option {
  padding-right: 46px;
}

.design-action-card[data-select-all-designs] {
  grid-template-columns: 38px minmax(0, 1fr);
}

.design-action-card[data-select-all-designs] .design-action-icon {
  display: grid;
}

/* Quando o botão está em modo "Limpar Seleção", o ícone de ação passa de ✓ para × */
.design-action-card[data-select-all-designs].is-selected .design-action-icon {
  font-size: 0;
}

.design-action-card[data-select-all-designs].is-selected .design-action-icon::before {
  content: "×";
  font-size: 1.15rem;
  line-height: 1;
}

@media (max-width: 390px) {
  .design-action-card[data-select-all-designs] {
    grid-template-columns: 32px minmax(0, 1fr);
  }
}

.delivery-option input,
.dc-delivery-option input {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 0;
  border: 1px solid var(--ui-border, var(--line));
  border-radius: 999px;
  background: #fffdf8;
  color: #fff;
  appearance: none;
  -webkit-appearance: none;
}

.delivery-option input:checked,
.dc-delivery-option input:checked {
  border-color: #756026;
  background: #756026;
}

.delivery-option input:checked::before,
.dc-delivery-option input:checked::before {
  content: "✓";
  color: #fff;
  font-size: 0.8rem;
  font-weight: 900;
  line-height: 1;
}

.pack-option.is-disabled {
  border-color: var(--ui-border);
  background: var(--ui-card-muted);
  color: var(--muted);
}

.pack-disabled-message,
.admin-message {
  border-color: var(--ui-danger-border);
  background: var(--ui-danger-bg);
  color: var(--ui-danger-text);
}

.open-order-hint {
  border: 1px solid var(--ui-success-border);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-success-bg);
  color: var(--ink);
}

/* Botões públicos */
.button,
.example-toggle,
.auto-distribute,
.cookie-banner-accept {
  border-radius: var(--ui-radius);
  font-weight: 850;
}

.button.primary,
.cookie-banner-accept {
  border-color: var(--button-bg);
  background: var(--button-bg);
  color: var(--button-text);
}

.button.is-disabled,
.button[aria-disabled="true"] {
  border-color: var(--ui-border-strong);
  background: var(--ui-card-muted);
  color: var(--muted);
  opacity: 0.72;
  cursor: not-allowed;
  filter: grayscale(0.35);
}

.button.secondary,
.example-toggle,
.auto-distribute,
.quantity-controls button {
  border-color: var(--ui-border);
  background: var(--ui-card-muted);
  color: var(--moss);
}

/* Molduras de imagem */
.option-image,
.design-image,
.uploaded-image,
.example-image,
.interior-slideshow,
.interior-slideshow-frame {
  border-color: var(--ui-border-strong);
  background-color: var(--ui-card-soft);
}

/* Contacto/privacidade usam a mesma largura visual das páginas do funil */
.contact-shell,
.privacy-page {
  width: min(100%, 760px);
  margin: 0 auto;
  padding: 16px;
}

.contact-card,
.privacy-summary,
.privacy-content {
  display: grid;
  gap: 12px;
  padding: 18px;
}

/* Mobile: os blocos mantêm o mesmo ritmo de espaçamento */
@media (max-width: 540px) {
  .home-shell,
  .product-shell,
  .contact-shell,
  .privacy-page,
  .fallback {
    padding: 12px;
  }

  .home-intro,
  .product-intro,
  .wizard-shell,
  .contact-card,
  .privacy-summary,
  .privacy-content {
    padding: 16px;
  }

  .step-card,
  .details-section,
  .dc-block,
  .quantity-card,
  .pack-price-card,
  .payment-notice,
  .order-success-card {
    padding: 14px;
  }
}

/* Dark mode: as mesmas categorias continuam alinhadas */
html[data-theme="dark"] {
  --ui-surface: rgba(255, 255, 255, 0.04);
  --ui-card: rgba(255, 255, 255, 0.04);
  --ui-card-soft: rgba(216, 192, 138, 0.12);
  --ui-card-muted: rgba(255, 255, 255, 0.04);
  --ui-card-highlight: rgba(212, 168, 74, 0.12);
  --ui-border: var(--line);
  --ui-border-warm: rgba(216, 192, 138, 0.28);
  --ui-border-strong: rgba(216, 192, 138, 0.32);
  --ui-shadow-card: 0 10px 24px rgba(0, 0, 0, 0.32);
  --ui-danger-bg: rgba(208, 154, 130, 0.12);
  --ui-danger-border: rgba(208, 154, 130, 0.32);
  --ui-danger-text: var(--rose);
  --ui-success-bg: rgba(79, 122, 58, 0.16);
  --ui-success-border: rgba(79, 122, 58, 0.4);
}

html[data-theme="dark"] .step-card,
html[data-theme="dark"] .choice-card,
html[data-theme="dark"] .quantity-card,
html[data-theme="dark"] .pack-option,
html[data-theme="dark"] .delivery-option,
html[data-theme="dark"] .dc-delivery-option,
html[data-theme="dark"] .selected-pill,
html[data-theme="dark"] .copy-request,
html[data-theme="dark"] .confirm-card,
html[data-theme="dark"] .summary-list div,
html[data-theme="dark"] .result-list,
html[data-theme="dark"] .contact-card,
html[data-theme="dark"] .privacy-content,
html[data-theme="dark"] .details-section,
html[data-theme="dark"] .dc-block,
html[data-theme="dark"] .price-panel,
html[data-theme="dark"] .quantity-status,
html[data-theme="dark"] .privacy-summary,
html[data-theme="dark"] .crachas-step2-summary,
html[data-theme="dark"] .delivery-choice.is-standalone {
  border-color: var(--ui-border-warm);
  background: var(--ui-card);
  color: var(--ink);
}

html[data-theme="dark"] .choice-card:has(input:checked),
html[data-theme="dark"] .pack-option.is-selected,
html[data-theme="dark"] .delivery-option:has(input:checked),
html[data-theme="dark"] .dc-delivery-option.is-selected,
html[data-theme="dark"] .dc-delivery-option:has(input:checked) {
  border-color: var(--moss);
  outline-color: rgba(216, 192, 138, 0.32);
  background: rgba(216, 192, 138, 0.10);
}

html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="tel"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .dc-field input,
html[data-theme="dark"] .contact-form input,
html[data-theme="dark"] .contact-form textarea,
html[data-theme="dark"] .contact-form select {
  border-color: var(--ui-border-warm);
  background: rgba(0, 0, 0, 0.25);
  color: var(--ink);
}


/* REQUEST_FIXES_20260511_V1
   Ajustes pontuais: texto/imagem do exemplo de tamanho em mobile,
   alinhamento dos cartões da homepage e ordem visual/contacto-entrega. */
.category-card {
  text-align: center;
  justify-items: center;
}

.category-card strong,
.category-card > span:last-child {
  text-align: center;
}

.category-card > span:last-child {
  max-width: 22ch;
}

.crachas-size-card-proof-note {
  left: 50%;
  right: auto;
  bottom: 0.7rem;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 1.4rem);
  text-align: center;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .crachas-size-card-proof {
    margin: -6px 8px 12px;
    padding: 12px;
    border: 1px solid rgba(126, 93, 22, 0.18);
    border-top: 0;
    border-radius: 0 0 var(--radius) var(--radius);
  }

  .crachas-size-card-proof-frame.uploaded-image {
    aspect-ratio: auto;
    min-height: 0;
    height: auto !important;
    background: #f6ead1;
  }

  .crachas-size-card-proof-img {
    width: 100%;
    height: auto;
    object-fit: contain;
    object-position: center;
    transform: none;
  }

  .crachas-size-card-proof-note {
    bottom: 0.55rem;
    padding: 0.42rem 0.68rem;
    font-size: 0.74rem;
    line-height: 1.2;
  }
}

@media (max-width: 480px) {
  .choice-card.crachas-size-card {
    --card-pad-mobile: 14px;
  }
}

@media (max-width: 390px) {
  .choice-card.crachas-size-card {
    --card-pad-mobile: 12px;
  }
}


/* REQUEST_FIXES_20260511_V2
   Uniformiza o texto "Se quiseres também podes ajustar..." com o
   mesmo tratamento tipográfico dos títulos de secção do wizard. */
.quantity-adjust-hint {
  margin: 16px 0 10px;
  padding-bottom: 6px;
  color: var(--moss);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.04rem, 4.4vw, 1.32rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.01em;
  border-bottom: 1px solid var(--line);
}

html[data-theme="dark"] .quantity-adjust-hint {
  color: var(--moss);
  border-bottom-color: var(--line);
}

/* HOME_DEADLINE_AND_LINK_TOGGLE_V1
   Aviso simples de prazo na homepage e cartões visíveis mas sem link. */
.home-deadline-notice {
  display: inline-flex;
  max-width: 100%;
  margin-top: 12px;
  padding: 9px 12px;
  border: 1px solid rgba(114, 85, 30, 0.18);
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.74);
  color: var(--moss);
  font-weight: 850;
  line-height: 1.35;
}

.category-card.is-link-disabled {
  cursor: default;
  opacity: 0.62;
  filter: grayscale(0.68);
}

.category-card.is-link-disabled.has-unavailable-message {
  cursor: pointer;
}

.category-card.is-link-disabled.has-unavailable-message:hover,
.category-card.is-link-disabled.has-unavailable-message:focus {
  opacity: 0.74;
}

.category-card.is-link-disabled:focus {
  outline: none;
}

.category-card.is-link-disabled.has-unavailable-message:focus-visible {
  outline: 2px solid rgba(114, 85, 30, 0.42);
  outline-offset: 3px;
}

.home-unavailable-message {
  margin: 12px 0 0;
}

/* HOME_DEADLINE_TIMER_BOX_V2
   Caixa discreta antes do footer com countdown real até à data limite. */
.home-deadline-note {
  width: fit-content;
  max-width: calc(100% - 32px);
  margin: 18px auto 0;
}

.home-deadline-note__inner {
  border: 1px solid var(--ui-border, var(--line));
  background: var(--ui-surface, rgba(255, 253, 248, 0.92));
  border-radius: var(--ui-radius, var(--radius));
  padding: 18px 18px 20px;
  text-align: center;
  box-shadow: 0 10px 26px rgba(97, 70, 20, 0.06);
}

.home-deadline-note__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(114, 85, 30, 0.08);
  color: var(--moss);
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: 0.01em;
}

.home-deadline-note__text {
  margin: 0;
  color: var(--muted);
  font-size: 0.98rem;
  line-height: 1.5;
}

.home-deadline-note__text strong {
  display: block;
  color: var(--ink);
  font-weight: 850;
}

.home-deadline-note__text em {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.92em;
  font-style: italic;
}

.home-deadline-note__timer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px;
  margin-top: 18px;
}

.home-deadline-note__unit {
  --deadline-ring-angle: 300deg;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 82px;
}

.home-deadline-note__ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  background: conic-gradient(
    var(--moss) 0deg var(--deadline-ring-angle),
    rgba(114, 85, 30, 0.16) var(--deadline-ring-angle) 360deg
  );
}

.home-deadline-note__ring::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(142, 103, 31, 0.12);
  border-radius: 50%;
  background: rgba(255, 253, 248, 0.96);
}

.home-deadline-note__value {
  position: relative;
  z-index: 1;
  color: var(--moss);
  font-size: 1.86rem;
  font-weight: 850;
  line-height: 1;
  letter-spacing: 0.015em;
}

.home-deadline-note__name {
  margin-top: 8px;
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 800;
}

@media (max-width: 540px) {
  .home-deadline-note {
    max-width: calc(100% - 24px);
    margin-top: 14px;
  }

  .home-deadline-note__inner {
    padding: 16px 12px 18px;
  }

  .home-deadline-note__text {
    font-size: 0.94rem;
  }

  .home-deadline-note__timer {
    gap: 10px;
    margin-top: 16px;
  }

  .home-deadline-note__unit {
    min-width: 64px;
  }

  .home-deadline-note__ring {
    width: 64px;
    height: 64px;
  }

  .home-deadline-note__value {
    font-size: 1.38rem;
  }

  .home-deadline-note__name {
    font-size: 0.74rem;
  }
}



/* SELECT_ACTIONS_FINAL_FIX_V1:
   Corrige os botões Selecionar tudo / Limpar Seleção e os novos vistos. */

/* Os novos vistos não devem ter sombra. */
.choice-card.design-grid:has(input:checked)::after,
.choice-card.media-list:not(.crachas-size-card):has(input:checked)::after,
.choice-card.text-grid:has(input:checked)::after,
.choice-card.price-pack-grid:has(input:checked)::after,
.choice-card.size-choice:has(input:checked)::after,
.design-action-card.is-selected::after,
.pack-option.is-selected::after {
  box-shadow: none;
  filter: none;
  text-shadow: none;
}

/* Não partir palavras ao meio nos botões Selecionar tudo / Sortido. */
.design-action-card .choice-copy strong {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}

/* Selecionar tudo / Limpar Seleção é uma ação, não uma opção selecionada.
   Por isso NÃO deve ter visto à direita. */
.design-action-card[data-select-all-designs]::after {
  content: none !important;
  display: none !important;
}

/* Mantém o ícone da esquerda no botão Selecionar tudo. */
.design-action-card[data-select-all-designs] {
  grid-template-columns: 38px minmax(0, 1fr);
  padding-right: 12px;
}

.design-action-card:not([data-select-all-designs]).is-selected {
  padding-right: 56px;
}

.design-zoom-button {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(117, 96, 38, 0.28);
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.94);
  color: #756026;
  box-shadow: 0 8px 18px rgba(69, 49, 14, 0.14);
  cursor: pointer;
}

.design-zoom-button svg {
  width: 16px;
  height: 16px;
}

.design-zoom-button:hover,
.design-zoom-button:focus-visible {
  background: #fff8e8;
  color: var(--moss);
  outline: 2px solid rgba(117, 96, 38, 0.22);
  outline-offset: 2px;
}

.image-viewer {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  place-items: center;
  padding: 56px 18px 24px;
  background: rgba(31, 25, 16, 0.78);
}

.image-viewer-stage {
  display: grid;
  place-items: center;
  width: min(100%, 980px);
  height: min(78vh, 760px);
  overflow: auto;
}

.image-viewer-img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  border-radius: 16px;
  box-shadow: 0 22px 56px rgba(0, 0, 0, 0.36);
  transform: scale(var(--image-viewer-zoom, 1));
  transform-origin: center;
  transition: transform 160ms ease;
}

.image-viewer-close,
.image-viewer-controls button {
  border: 1px solid rgba(255, 253, 248, 0.38);
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.96);
  color: #5f4b1f;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
  cursor: pointer;
}

.image-viewer-close {
  position: fixed;
  top: 18px;
  right: 18px;
  width: 40px;
  height: 40px;
  font-size: 1.45rem;
  line-height: 1;
}

.image-viewer-controls {
  position: fixed;
  right: 18px;
  bottom: 18px;
  display: flex;
  gap: 10px;
}

.image-viewer-controls button {
  width: 42px;
  height: 42px;
  font-size: 1.35rem;
  font-weight: 850;
}

.image-viewer-open {
  overflow: hidden;
}

html[data-theme="dark"] .design-zoom-button,
html[data-theme="dark"] .image-viewer-close,
html[data-theme="dark"] .image-viewer-controls button {
  background: var(--card);
  color: var(--moss);
  border-color: var(--line);
}

@media (max-width: 620px) {
  .choice-card.design-grid .design-card-media {
    width: min(var(--frame-width-px, var(--image-frame-render-size, 102px)), 100%) !important;
    height: auto !important;
    aspect-ratio: var(--frame-aspect, 1);
  }

  .product-shape-rect .choice-card.design-grid .design-card-media {
    aspect-ratio: var(--frame-aspect, 3 / 4);
  }

  .choice-card.design-grid .design-card-media .design-image.uploaded-image {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: var(--frame-aspect, 1) !important;
  }

  .design-zoom-button {
    right: 5px;
    bottom: 5px;
    width: 28px;
    height: 28px;
  }

  .image-viewer {
    padding: 54px 12px 76px;
  }

  .image-viewer-stage {
    height: calc(100vh - 140px);
  }

  .image-viewer-img {
    border-radius: 12px;
  }
}

.design-action-card[data-select-all-designs] .design-action-icon {
  display: grid;
}

/* Quando muda para Limpar Seleção, o ícone da esquerda passa de ✓ para ×. */
.design-action-card[data-select-all-designs].is-selected .design-action-icon {
  font-size: 0;
}

.design-action-card[data-select-all-designs].is-selected .design-action-icon::before {
  content: "×";
  font-size: 1.15rem;
  line-height: 1;
}

/* Mobile: dar mais espaço real ao texto. */
@media (max-width: 390px) {
  .design-action-card {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 8px;
    min-height: 78px;
    padding: 10px 12px;
  }

  .design-action-icon {
    width: 28px;
    height: 28px;
  }

  .design-action-card[data-select-all-designs] {
    grid-template-columns: 28px minmax(0, 1fr);
    padding-right: 12px;
  }

  /* Só os botões que realmente têm visto à direita precisam de espaço extra.
     Exemplo: Sortido quando está selecionado. */
  .design-action-card:not([data-select-all-designs]).is-selected {
    padding-right: 52px;
  }

  .design-action-card .choice-copy strong {
    font-size: 0.92rem;
    line-height: 1.15;
  }
}

/* BRAND_HOME_V1: homepage de marca, novidades e navegação lateral. */
body.is-site-menu-open {
  overflow: hidden;
}

.site-menu-surface {
  position: fixed;
  inset: 0;
  z-index: 90;
  visibility: hidden;
  pointer-events: none;
}

.site-menu-surface.is-open {
  visibility: visible;
  pointer-events: auto;
}

.site-menu-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--menu-backdrop);
  opacity: 0;
  transition: opacity 180ms ease;
}

.site-menu-surface.is-open .site-menu-backdrop {
  opacity: 1;
}

.site-menu-panel {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: min(88vw, 420px);
  height: 100%;
  padding: 24px;
  overflow-y: auto;
  background: var(--surface-panel);
  box-shadow: var(--shadow-menu);
  color: var(--ink);
  transform: translateX(100%);
  transition: transform 220ms ease;
  touch-action: pan-y;
  overscroll-behavior: contain;
}

.site-menu-surface.is-open .site-menu-panel {
  transform: translateX(0);
}

.site-menu-panel.is-dragging {
  transition: none;
  user-select: none;
}

.site-menu-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
}

.site-menu-head p,
.site-menu-nav > p {
  margin: 0 0 5px;
  color: var(--moss);
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-menu-head h2 {
  font-size: 1.75rem;
  line-height: 1;
}

.site-menu-close {
  display: grid;
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  place-items: center;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: transparent;
  color: var(--moss);
  cursor: pointer;
}

.site-menu-close svg {
  width: 21px;
  height: 21px;
}

.site-menu-nav {
  display: grid;
  margin-top: 28px;
}

.site-menu-home-link {
  width: max-content;
  margin-bottom: 28px;
  color: var(--moss);
  font-weight: 850;
}

.site-menu-category-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 52px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.22rem;
}

.site-menu-category-link b {
  color: var(--gold);
  font-family: Arial, sans-serif;
  font-size: 1rem;
}

.site-menu-category-link:hover,
.site-menu-category-link:focus-visible,
.site-menu-home-link:hover,
.site-menu-home-link:focus-visible,
.site-menu-secondary a:hover,
.site-menu-secondary a:focus-visible {
  color: var(--accent-hover);
}

.site-menu-secondary {
  display: grid;
  gap: 12px;
  margin-top: auto;
  padding-top: 32px;
  color: var(--moss);
  font-size: 0.9rem;
  font-weight: 750;
}

.home-shell--brand {
  max-width: none;
  padding: 0;
  overflow: clip;
  background: var(--surface-page);
}

body:has(.home-shell--brand) .cart-floating-button {
  display: none;
}

.home-shell--brand > .site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  margin: 0;
  padding: 12px max(20px, env(safe-area-inset-right)) 12px max(20px, env(safe-area-inset-left));
  border-bottom: none;
  background: transparent;
  box-shadow: none;
}

.home-shell--brand .brand-mark {
  width: 44px;
  height: 44px;
}

.home-brand-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  height: min(58svh, 540px);
  min-height: 440px;
  overflow: hidden;
  background-color: var(--linen);
  background-image: var(--home-hero-image);
  background-position: var(--home-hero-position, center);
  background-size: cover;
  color: var(--hero-foreground);
}

.home-brand-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--hero-overlay);
}

.home-brand-hero__inner {
  display: flex;
  align-items: flex-end;
  width: min(100%, 1180px);
  height: 100%;
  margin: 0 auto;
  padding: 54px 32px;
}

.home-brand-hero__copy {
  width: min(100%, 680px);
}

.home-brand-hero .eyebrow {
  margin-bottom: 12px;
  color: var(--hero-accent);
}

.home-brand-hero h1 {
  max-width: 12ch;
  color: var(--hero-foreground);
  font-size: 5.6rem;
  line-height: 0.92;
  text-shadow: var(--hero-text-shadow);
}

.home-brand-hero__copy > p:last-of-type {
  max-width: 52ch;
  margin: 20px 0 0;
  color: var(--hero-foreground-muted);
  font-size: 1.1rem;
  line-height: 1.55;
  text-shadow: var(--hero-copy-shadow);
}

.home-brand-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 28px;
}

.home-hero-action {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 11px 18px;
  overflow: hidden;
  border: 1px solid var(--hero-foreground-muted);
  border-radius: var(--radius);
  background: var(--hero-action-bg);
  font-weight: 850;
  line-height: 1.2;
  white-space: nowrap;
}

.home-hero-action::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: inherit;
  background: var(--hero-foreground);
  will-change: opacity;
}

.home-hero-action--primary {
  color: var(--hero-button-ink);
  animation: homeHeroPrimaryText 12s ease-in-out infinite;
}

.home-hero-action--primary::before {
  opacity: 1;
  animation: homeHeroPrimaryFill 12s ease-in-out infinite;
}

.home-hero-action--secondary {
  color: var(--hero-foreground);
  animation: homeHeroSecondaryText 12s ease-in-out infinite;
}

.home-hero-action--secondary::before {
  opacity: 0;
  animation: homeHeroSecondaryFill 12s ease-in-out infinite;
}

@keyframes homeHeroPrimaryFill {
  0%,
  40% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }

  50.01%,
  90% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes homeHeroSecondaryFill {
  0%,
  40% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  50.01%,
  90% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes homeHeroPrimaryText {
  0%,
  43%,
  97%,
  100% {
    color: var(--hero-button-ink);
  }

  47%,
  93% {
    color: var(--hero-foreground);
  }
}

@keyframes homeHeroSecondaryText {
  0%,
  43%,
  97%,
  100% {
    color: var(--hero-foreground);
  }

  47%,
  93% {
    color: var(--hero-button-ink);
  }
}

.home-hero-action:hover,
.home-hero-action:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--hero-action-shadow);
}

.home-section {
  width: 100%;
  padding: 64px 24px;
  scroll-margin-top: 76px;
}

.home-section-inner {
  width: min(100%, 1180px);
  margin: 0 auto;
}

.home-section-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.72fr);
  gap: 20px 48px;
  align-items: end;
  margin-bottom: 30px;
}

.home-section-heading .eyebrow {
  grid-column: 1 / -1;
  margin-bottom: -8px;
}

.home-section-heading h2 {
  font-size: 2.8rem;
  line-height: 0.98;
}

.home-section-heading > p:last-child {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.home-news-section {
  background: var(--surface-panel);
}

.home-news-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.home-news-card {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  min-height: 300px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-raised);
  color: var(--ink);
  box-shadow: var(--shadow-editorial);
}

.home-news-card__media {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  background: var(--surface-image);
}

.home-news-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 240ms ease;
}

.home-news-card:hover .home-news-card__media img,
.home-news-card:focus-visible .home-news-card__media img {
  transform: scale(1.025);
}

.home-news-card__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 26px;
}

.home-news-card__label {
  margin-bottom: 12px;
  color: var(--moss);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.home-news-card__copy strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.55rem;
  font-weight: 500;
  line-height: 1.05;
}

.home-news-card__copy > span:not(.home-news-card__label) {
  margin-top: 14px;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.home-news-card__copy b {
  margin-top: 22px;
  color: var(--moss);
  font-size: 0.86rem;
}

.home-products-section {
  background: var(--surface-panel);
}

.home-products-section .category-grid {
  margin-top: 0;
}

.home-products-section .category-card {
  border-radius: var(--radius);
  box-shadow: var(--shadow-editorial);
  scroll-margin-top: 88px;
}

.home-products-section .category-card strong {
  font-size: 1.45rem;
}

.home-admin-edit-band {
  padding: 20px 24px;
  background: var(--surface-panel);
}

.home-shell--brand > .site-footer {
  width: min(calc(100% - 32px), 1180px);
  margin: 0 auto;
  padding: 30px 4px 22px;
}

html[data-theme="dark"] .site-menu-panel,
html[data-theme="dark"] .home-news-section,
html[data-theme="dark"] .home-news-card,
html[data-theme="dark"] .home-admin-edit-band {
  background: var(--card);
  color: var(--ink);
}

html[data-theme="dark"] .home-products-section {
  background: var(--card);
}

@media (max-width: 860px) {
  .home-brand-hero h1 {
    font-size: 4.5rem;
  }

  .home-news-card {
    grid-template-columns: 1fr;
  }

  .home-news-card__media {
    min-height: 220px;
  }
}

@media (max-width: 620px) {
  .home-shell--brand > .site-header {
    padding: 10px 14px;
  }

  .home-shell--brand .brand {
    gap: 8px;
    font-size: 0.98rem;
  }

  .home-shell--brand .brand-mark {
    width: 40px;
    height: 40px;
  }

  .home-brand-hero {
    height: 55svh;
    min-height: 430px;
    max-height: 500px;
    background-position: 58% center;
  }

  .home-brand-hero__inner {
    padding: 38px 20px;
  }

  .home-brand-hero h1 {
    font-size: 3.35rem;
  }

  .home-brand-hero__copy > p:last-of-type {
    font-size: 1rem;
  }

  .home-brand-hero__actions {
    margin-top: 22px;
  }

  .home-hero-action {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 0.88rem;
  }

  .home-section {
    padding: 48px 16px;
  }

  .home-section-heading {
    display: block;
    margin-bottom: 24px;
  }

  .home-section-heading .eyebrow {
    margin-bottom: 10px;
  }

  .home-section-heading h2 {
    font-size: 2.1rem;
  }

  .home-section-heading > p:last-child {
    margin-top: 14px;
  }

  .home-news-grid {
    grid-template-columns: 1fr;
  }

  .home-news-card {
    min-height: 0;
  }

  .home-news-card__media {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .home-news-card__copy {
    padding: 22px;
  }

  .home-products-section .category-grid {
    gap: 10px;
  }

  .home-products-section .category-card {
    aspect-ratio: 1;
    padding: 12px;
  }

  .home-products-section .category-card strong {
    font-size: 1.12rem;
  }

  .home-products-section .category-card > span:last-child {
    font-size: 0.77rem;
  }
}

@media (max-width: 370px) {
  .home-shell--brand .brand-text {
    display: none;
  }

  .home-brand-hero h1 {
    font-size: clamp(2.5rem, 12.5vw, 3rem);
  }

  .home-hero-action {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .palette-suggestions-toggle b,
  .site-menu-backdrop,
  .site-menu-panel,
  .home-news-card__media img {
    animation: none;
    transition: none;
  }

  .home-hero-action {
    transition: none;
  }
}

/* Homepage: lista de produtos inspirada no catálogo simples.
   Mantém os carrosséis existentes, agora contidos na miniatura do cartão. */
.home-products-section .category-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

.home-products-section .category-grid > .category-card {
  grid-column: 1 / -1 !important;
}

.home-products-section .category-card {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: 22px;
  row-gap: 7px;
  align-items: center;
  justify-items: stretch;
  min-height: 138px;
  aspect-ratio: auto;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  text-align: left;
  box-shadow: var(--shadow-editorial);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.home-products-section a.category-card:hover,
.home-products-section a.category-card:focus-visible {
  border-color: var(--moss);
  box-shadow: var(--shadow-editorial);
  transform: translateY(-1px);
}

.home-products-section a.category-card:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--moss) 24%, transparent);
  outline-offset: 3px;
}

.home-products-section .category-card.has-image,
.home-products-section .category-card.has-carousel {
  background: var(--card);
  color: var(--ink);
}

.home-products-section .category-card.is-link-disabled {
  opacity: 1;
  filter: none;
}

.home-products-section .category-card.has-carousel::before {
  display: none;
}

.home-products-section .category-card .category-number {
  display: none;
}

.home-products-section .category-card .category-art,
.home-products-section .category-card .category-carousel {
  position: relative;
  inset: auto;
  z-index: 1;
  grid-column: 1;
  grid-row: 1 / 3;
  display: block;
  width: 112px;
  height: 112px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--linen);
}

.home-products-section .category-card.has-image .category-art {
  background: var(--category-image) center / cover no-repeat, var(--linen);
}

.home-products-section .category-card.has-carousel .category-art {
  display: none;
}

.home-products-section .category-card strong {
  grid-column: 2;
  grid-row: 1;
  align-self: end;
  color: var(--ink);
  font-size: clamp(1.45rem, 3vw, 2rem);
  font-weight: 500;
  line-height: 1;
  text-align: left;
  text-shadow: none;
}

.home-products-section .category-card > strong + span,
.home-products-section .category-card.has-image > strong + span,
.home-products-section .category-card.has-carousel > strong + span {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  max-width: 62ch;
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.42;
  text-align: left;
  text-shadow: none;
}

.home-products-section .category-card::after,
.home-products-section .category-card.has-image::after,
.home-products-section .category-card.has-carousel::after {
  content: "Ver opções \2192";
  position: static;
  inset: auto;
  z-index: 1;
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
  justify-self: end;
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  aspect-ratio: auto;
  margin: 0 6px 0 18px;
  padding: 9px 12px;
  border: 1px solid color-mix(in srgb, var(--moss) 20%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--moss) 12%, transparent);
  color: var(--moss);
  font-size: 0.82rem;
  font-weight: 850;
  line-height: 1.2;
  opacity: 1;
  white-space: nowrap;
}

.home-products-section .category-card.is-link-disabled::after {
  content: "Em breve";
  border-color: var(--line);
  background: transparent;
  color: var(--muted);
}

.home-products-section .category-card:has(.home-admin-tools)::after {
  display: none;
}

.home-products-section .category-card .home-admin-tools {
  grid-column: 1 / -1;
  grid-row: 3;
  width: 100%;
  margin-top: 8px;
}

@media (max-width: 620px) {
  .home-products-section .category-grid {
    gap: 10px;
    width: calc(100% + 32px);
    margin-inline: -16px;
  }

  .home-products-section .category-card {
    grid-template-columns: 92px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    min-height: 114px;
    column-gap: 12px;
    row-gap: 5px;
    aspect-ratio: auto;
    padding: 10px;
    border-right: 0;
    border-left: 0;
    border-radius: 0;
  }

  .home-products-section .category-card .category-art,
  .home-products-section .category-card .category-carousel {
    width: 92px;
    height: 92px;
  }

  .home-products-section .category-card strong {
    font-size: clamp(1.12rem, 5vw, 1.42rem);
  }

  .home-products-section .category-card > strong + span,
  .home-products-section .category-card.has-image > strong + span,
  .home-products-section .category-card.has-carousel > strong + span {
    font-size: 0.8rem;
    line-height: 1.32;
  }

  .home-products-section .category-card::after,
  .home-products-section .category-card.has-image::after,
  .home-products-section .category-card.has-carousel::after {
    grid-column: 2;
    grid-row: 3;
    align-self: start;
    justify-self: start;
    margin: 1px 0 0;
    padding: 5px 8px;
    font-size: 0.74rem;
  }
}

@media (max-width: 390px) {
  .home-products-section .category-card {
    grid-template-columns: 82px minmax(0, 1fr);
    min-height: 104px;
    column-gap: 10px;
    padding: 9px;
  }

  .home-products-section .category-card .category-art,
  .home-products-section .category-card .category-carousel {
    width: 82px;
    height: 82px;
  }
}

/* Homepage: cartões de produtos com o mesmo desenho editorial das novidades. */
.home-products-section .category-grid:not(.is-admin-home-grid) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  width: 100%;
  margin-inline: 0;
}

.home-products-section .category-grid:not(.is-admin-home-grid) > .category-card {
  grid-column: auto !important;
}

.home-products-section .category-grid:not(.is-admin-home-grid) .category-card {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  grid-template-rows: minmax(26px, 1fr) auto auto auto minmax(26px, 1fr);
  column-gap: 0;
  row-gap: 0;
  align-items: stretch;
  min-height: 300px;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-raised);
  color: var(--ink);
  box-shadow: var(--shadow-editorial);
}

.home-products-section .category-grid:not(.is-admin-home-grid) .category-card .category-art,
.home-products-section .category-grid:not(.is-admin-home-grid) .category-card .category-carousel {
  position: relative;
  inset: auto;
  z-index: 1;
  grid-column: 1;
  grid-row: 1 / -1;
  width: 100%;
  height: 100%;
  min-height: 300px;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background-color: var(--surface-image);
}

.home-products-section .category-grid:not(.is-admin-home-grid) .category-card.has-image .category-art {
  background-position: center;
  background-size: cover;
}

.home-products-section .category-grid:not(.is-admin-home-grid) .category-card strong {
  grid-column: 2;
  grid-row: 2;
  align-self: end;
  margin: 0 26px;
  color: var(--ink);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.55rem;
  font-weight: 500;
  line-height: 1.05;
  text-align: left;
}

.home-products-section .category-grid:not(.is-admin-home-grid) .category-card > strong + span,
.home-products-section .category-grid:not(.is-admin-home-grid) .category-card.has-image > strong + span,
.home-products-section .category-grid:not(.is-admin-home-grid) .category-card.has-carousel > strong + span {
  grid-column: 2;
  grid-row: 3;
  align-self: start;
  max-width: none;
  margin: 14px 26px 0;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
}

.home-products-section .category-grid:not(.is-admin-home-grid) .category-card::after,
.home-products-section .category-grid:not(.is-admin-home-grid) .category-card.has-image::after,
.home-products-section .category-grid:not(.is-admin-home-grid) .category-card.has-carousel::after {
  grid-column: 2;
  grid-row: 4;
  align-self: start;
  justify-self: start;
  width: auto;
  margin: 22px 26px 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--moss);
  font-size: 0.86rem;
  font-weight: 850;
  line-height: 1.2;
}

.home-products-section .category-grid:not(.is-admin-home-grid) .category-card.is-link-disabled::after {
  border: 0;
  background: transparent;
  color: var(--muted);
}

html[data-theme="dark"] .home-products-section .category-grid:not(.is-admin-home-grid) .category-card {
  background: var(--card);
  color: var(--ink);
}

html[data-theme="dark"] .home-products-section .category-grid:not(.is-admin-home-grid) .category-card strong {
  color: var(--ink);
}

@media (max-width: 860px) {
  .home-products-section .category-grid:not(.is-admin-home-grid) {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-products-section .category-grid:not(.is-admin-home-grid) .category-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto auto auto;
    min-height: 0;
  }

  .home-products-section .category-grid:not(.is-admin-home-grid) .category-card .category-art,
  .home-products-section .category-grid:not(.is-admin-home-grid) .category-card .category-carousel {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: auto;
    min-height: 220px;
  }

  .home-products-section .category-grid:not(.is-admin-home-grid) .category-card strong {
    grid-column: 1;
    grid-row: 2;
    margin: 22px 22px 0;
  }

  .home-products-section .category-grid:not(.is-admin-home-grid) .category-card > strong + span,
  .home-products-section .category-grid:not(.is-admin-home-grid) .category-card.has-image > strong + span,
  .home-products-section .category-grid:not(.is-admin-home-grid) .category-card.has-carousel > strong + span {
    grid-column: 1;
    grid-row: 3;
    margin: 14px 22px 0;
  }

  .home-products-section .category-grid:not(.is-admin-home-grid) .category-card::after,
  .home-products-section .category-grid:not(.is-admin-home-grid) .category-card.has-image::after,
  .home-products-section .category-grid:not(.is-admin-home-grid) .category-card.has-carousel::after {
    grid-column: 1;
    grid-row: 4;
    margin: 22px;
  }
}

@media (max-width: 620px) {
  .home-products-section .category-grid:not(.is-admin-home-grid) {
    gap: 18px;
    width: 100%;
    margin-inline: 0;
  }

  .home-products-section .category-grid:not(.is-admin-home-grid) .category-card {
    padding: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius);
  }

  .home-products-section .category-grid:not(.is-admin-home-grid) .category-card .category-art,
  .home-products-section .category-grid:not(.is-admin-home-grid) .category-card .category-carousel {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  .home-products-section .category-grid:not(.is-admin-home-grid) .category-card strong {
    font-size: 1.55rem;
  }

  .home-products-section .category-grid:not(.is-admin-home-grid) .category-card > strong + span,
  .home-products-section .category-grid:not(.is-admin-home-grid) .category-card.has-image > strong + span,
  .home-products-section .category-grid:not(.is-admin-home-grid) .category-card.has-carousel > strong + span {
    font-size: 0.92rem;
    line-height: 1.5;
  }

  .home-products-section .category-grid:not(.is-admin-home-grid) .category-card::after,
  .home-products-section .category-grid:not(.is-admin-home-grid) .category-card.has-image::after,
  .home-products-section .category-grid:not(.is-admin-home-grid) .category-card.has-carousel::after {
    padding: 0;
    font-size: 0.86rem;
  }
}

/* SITE_EDITORIAL_SHELL_V1: cabeçalho e superfícies comuns a todo o site. */
.home-shell:not(.home-shell--brand),
.product-shell,
.contact-shell,
.privacy-page {
  padding-top: 0;
}

.home-shell:not(.home-shell--brand) > .site-header,
.product-shell > .site-header,
.contact-shell > .site-header,
.privacy-page > .site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 12px max(20px, env(safe-area-inset-right)) 12px max(20px, env(safe-area-inset-left));
  border-bottom: none;
  background: transparent;
  box-shadow: none;
}

.product-shell > .product-intro,
.product-shell > .wizard-shell,
.contact-shell > .contact-card,
.privacy-page > .privacy-summary {
  margin-top: 24px;
}

.product-page-intro {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
  padding: 8px 4px 20px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.product-page-intro .eyebrow,
.product-page-intro p {
  margin: 0;
}

.product-page-intro h1 {
  max-width: 15ch;
  font-size: clamp(2.4rem, 8vw, 3.8rem);
  line-height: 0.96;
}

.product-page-intro > p:last-child {
  max-width: 62ch;
  color: var(--muted);
}

.home-shell--hub {
  max-width: none;
  padding: 0;
  overflow: clip;
  background: var(--surface-page);
}

.home-shell--hub > .home-hub-section {
  margin-top: 0;
  background: var(--surface-page);
}

.home-hub-section .home-section-heading h1 {
  max-width: 15ch;
  font-size: clamp(2.8rem, 8vw, 4.6rem);
  line-height: 0.94;
}

.home-hub-summary {
  grid-column: 1 / -1;
  display: grid;
  gap: 12px;
  margin-top: 8px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-panel);
}

.home-hub-summary .cart-panel-note {
  margin: 0;
}

.home-shell--hub > .site-footer {
  width: min(calc(100% - 32px), 1180px);
  margin: 0 auto;
  padding: 30px 4px 22px;
}

.home-shell:not(.home-shell--brand) > .site-footer,
.product-shell > .site-footer,
.contact-shell > .site-footer,
.privacy-page > .site-footer {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  padding: 30px max(16px, calc((100vw - 1180px) / 2)) 22px;
}

@media (max-width: 620px) {
  .home-shell:not(.home-shell--brand) > .site-header,
  .product-shell > .site-header,
  .contact-shell > .site-header,
  .privacy-page > .site-header {
    padding: 10px 14px;
  }

  .home-hub-section .home-section-heading h1,
  .product-page-intro h1 {
    font-size: clamp(2.3rem, 12vw, 3.25rem);
  }
}

/* ORDER_MEDIA_COMPOSER_V1: texto, fotos e áudio num único bloco,
   inspirado nos compositores familiares das aplicações de mensagens. */
.step-card--media-composer > .step-help {
  max-width: 38rem;
  margin: -6px 0 2px;
  color: var(--muted);
  font-size: 1rem;
  line-height: 1.5;
}

.details-section.details-section--media-composer {
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.details-section--media-composer > h3 {
  display: none;
}

/* MEDIA_COMPOSER_TEXTBOX_V2
   A caixa de escrita deixou de imitar papel pautado: as linhas nunca
   acompanhavam o texto e a zona de foco ficava colada às margens do cartão.
   Agora é uma caixa própria, com respiro à volta, fundo mais claro, metade
   da altura e a tipografia do resto do site. */
.details-section--media-composer .details-grid {
  gap: 0;
  overflow: hidden;
  padding: 0 16px 16px;
  border: 1px solid var(--ui-border-warm, var(--line));
  border-bottom: 0;
  border-radius: var(--radius) var(--radius) 0 0;
  background: var(--card);
  box-shadow: none;
}

.details-section--media-composer .details-grid label {
  gap: 8px;
}

.details-section--media-composer .details-grid label > span {
  display: block;
  padding: 14px 2px 0;
  color: var(--ink);
  font-size: 0.94rem;
  font-weight: 850;
  line-height: 1.3;
}

.details-section--media-composer .details-grid textarea {
  min-height: 88px;
  padding: 12px 14px;
  border: 1px solid var(--ui-border-warm, var(--line));
  border-radius: var(--radius);
  background: var(--ui-card, #fffdf8);
  color: var(--ink);
  font-family: inherit;
  font-size: 1.02rem;
  line-height: 1.55;
  resize: vertical;
}

.details-section--media-composer .details-grid textarea.is-missing {
  border-color: #b9342b;
  background: var(--ui-danger-bg, #fff7f6);
  box-shadow: 0 0 0 3px rgba(185, 52, 43, 0.16);
}

.details-section--media-composer .details-grid textarea::placeholder {
  color: color-mix(in srgb, var(--muted) 88%, transparent);
  opacity: 1;
}

.details-section--media-composer .details-grid textarea:focus-visible {
  outline: 0;
  border-color: color-mix(in srgb, var(--moss) 55%, var(--line));
  box-shadow: 0 0 0 3px rgba(130, 96, 25, 0.18);
}

.details-section--media-composer .order-media-attachments {
  position: relative;
  gap: 10px;
  margin: 0;
  padding: 22px 20px 20px;
  border: 1px solid var(--ui-border-warm, var(--line));
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--card);
  box-shadow: 0 10px 24px rgba(68, 41, 0, 0.06);
}

.details-section--media-composer .order-media-attachments::before {
  content: "";
  position: absolute;
  top: 0;
  right: 20px;
  left: 20px;
  height: 1px;
  background: var(--ui-border-warm, var(--line));
}

.order-media-action-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
}

.order-media-action-bar > :only-child {
  grid-column: 1 / -1;
}

.order-media-action {
  min-width: 0;
  min-height: 92px;
  padding: 16px;
  border: 1px solid var(--ui-border-warm, var(--line));
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  box-shadow: 0 6px 18px rgba(61, 46, 12, 0.07);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform 120ms ease, background-color 120ms ease, box-shadow 120ms ease;
}

.order-upload-button.order-media-action,
.order-audio-record-button.order-media-action {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  align-content: center;
  column-gap: 12px;
  row-gap: 2px;
  text-align: left;
}

.order-audio-record-button.order-media-action > span:last-child {
  align-content: center;
  align-self: stretch;
  gap: 2px;
}

.order-media-action:active {
  transform: scale(0.975);
}

.order-media-action:focus-visible,
.order-media-action:focus-within {
  outline: 3px solid rgba(130, 96, 25, 0.28);
  outline-offset: 3px;
}

.order-media-action .order-upload-button-icon,
.order-media-action .order-audio-record-icon {
  display: grid;
  width: 44px;
  height: 44px;
  grid-row: 1 / span 2;
  place-items: center;
  border-radius: 50%;
  background: var(--surface-cream-strong);
  color: var(--moss);
}

.order-media-action strong {
  align-self: center;
  min-width: 0;
  font-size: 1rem;
  line-height: 1.15;
}

.order-media-action small {
  align-self: center;
  min-width: 0;
  color: var(--muted);
  font-size: 0.77rem;
  line-height: 1.25;
}

.order-media-action small.is-success {
  color: #4b7656;
  font-weight: 800;
}

.order-audio-record-button.order-media-action.is-recording {
  background: #fae4e2;
  box-shadow: 0 4px 14px rgba(185, 75, 71, 0.13);
}

.order-audio-record-button.order-media-action.is-recording .order-audio-record-icon {
  background: #b94b47;
  color: #fff;
  animation: order-audio-pulse 1.1s infinite;
}

.order-media-upload-list {
  margin-top: 2px;
}

.details-section--media-composer .details-skip-choice {
  margin-top: 12px;
}

/* O passo exclusivamente fotográfico mantém o mesmo vocabulário visual. */
.order-photo-upload .order-upload-button {
  border: 1px solid var(--ui-border-warm, var(--line));
  border-radius: var(--radius);
  background: var(--card);
  box-shadow: 0 6px 18px rgba(61, 46, 12, 0.07);
}

.order-photo-upload .order-upload-button-icon {
  background: var(--surface-cream-strong);
  color: var(--moss);
}

@keyframes order-audio-pulse {
  50% { box-shadow: 0 0 0 8px rgba(185, 75, 71, 0.15); }
}

@media (max-width: 620px) {
  .details-section--media-composer .details-grid textarea {
    min-height: 76px;
  }
}

@media (max-width: 390px) {
  .details-section--media-composer .order-media-attachments {
    padding: 22px 18px 18px;
  }

  .details-section--media-composer .order-media-attachments::before {
    right: 18px;
    left: 18px;
  }

  .order-media-action-bar {
    gap: 10px;
  }

  .order-upload-button.order-media-action,
  .order-audio-record-button.order-media-action {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 12px;
    padding-inline: 14px;
  }

  .order-media-action .order-upload-button-icon,
  .order-media-action .order-audio-record-icon {
    width: 48px;
    height: 48px;
  }

  .order-media-action strong {
    font-size: 1rem;
  }

  .order-media-action small {
    font-size: 0.82rem;
  }
}

@media (max-width: 340px) {
  .order-media-action-bar {
    grid-template-columns: minmax(0, 1fr);
  }

  .order-media-action-bar > .order-media-action {
    grid-column: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .order-media-action,
  .order-audio-record-button.order-media-action.is-recording .order-audio-record-icon {
    animation: none;
    transition: none;
  }
}

/* Mantém estes refinamentos depois dos estilos históricos do wizard. */
.palette-composition__slot.is-filled {
  background:
    linear-gradient(180deg, rgba(0,0,0,.06) 0 8%, transparent 30%),
    color-mix(in srgb, var(--palette-preview-color) 14%, var(--surface-stone));
}

.individual-color-choice.is-disabled.is-unavailable {
  opacity: .72;
}

/* MEDIA_COMPOSER_TEXTBOX_V2: o visual "papel pautado" saiu daqui — ver o
   bloco com o mesmo nome mais acima, que é agora a única fonte de verdade. */
.details-section--media-composer .details-grid {
  position: relative;
  border-color: color-mix(in srgb, var(--moss) 32%, var(--line));
  box-shadow: 0 12px 28px rgba(68,41,0,.07);
}

/* COLOR_FLOW_SCOPED_V1: os dois quadrados de um degradê são duas decisões
   distintas. A seta ocupa o espaço entre ambos, sem transformar o conjunto
   num único bloco segmentado. */
.palette-composition.is-gradient {
  --palette-gradient-gap: 12px;
  --palette-gradient-arrow: 24px;
  grid-template-columns: var(--palette-slot-size) var(--palette-gradient-arrow) var(--palette-slot-size);
  column-gap: var(--palette-gradient-gap);
  height: var(--palette-slot-size);
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.palette-composition.is-gradient .palette-composition__slot {
  border: 1px solid rgba(46, 36, 19, 0.24);
  border-radius: 7px;
  box-shadow: 0 8px 24px rgba(46, 36, 19, 0.08);
}

.quadros-gradient-arrow {
  display: grid;
  place-items: center;
  align-self: center;
  color: var(--moss);
  font-size: 1.55rem;
  font-weight: 900;
  line-height: 1;
}

.quadros-color-picker.is-gradient .quadros-color-composition {
  --palette-slot-pitch: calc(var(--palette-slot-size) + 48px);
}

.quadros-active-marker {
  left: calc(50% + var(--marker-shift, 0) * var(--palette-slot-pitch, var(--palette-slot-size)));
}

/* Ajuda discreta depois de três alterações no mesmo quadrado fixado. */
.quadros-color-composition.has-next-hint {
  padding-bottom: 76px;
}

.quadros-color-composition.has-next-hint .palette-composition {
  overflow: visible;
}

.quadros-next-color-hint {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  z-index: 9;
  width: min(190px, 56vw);
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--moss);
  box-shadow: 0 8px 20px rgba(46, 36, 19, .18);
  color: #fff;
  font-size: .76rem;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  transform: translateX(-50%);
  pointer-events: none;
}

.quadros-next-color-hint::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  border-right: 7px solid transparent;
  border-bottom: 8px solid var(--moss);
  border-left: 7px solid transparent;
  transform: translateX(-50%);
}

/* Folha de glitter: a textura acompanha famílias, tons, sugestões e o
   quadrado final, sem imagens adicionais. */
.quadros-color-picker.is-glitter .individual-color-choice.quadros-color-family > span {
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.95) 0 1px, transparent 1.8px),
    radial-gradient(circle at 72% 30%, rgba(255,255,255,.78) 0 1.2px, transparent 2px),
    radial-gradient(circle at 42% 76%, rgba(255,235,180,.85) 0 1px, transparent 1.8px),
    linear-gradient(125deg, var(--individual-color-light, var(--individual-color)), var(--individual-color) 52%, var(--individual-color-dark, var(--individual-color)));
  background-size: 17px 17px, 23px 23px, 19px 19px, auto;
}

.quadros-color-picker.is-glitter .quadros-tone-swatch > span {
  background:
    radial-gradient(circle at 20% 24%, rgba(255,255,255,.98) 0 1px, transparent 2px),
    radial-gradient(circle at 70% 62%, rgba(255,238,184,.9) 0 1.2px, transparent 2.1px),
    linear-gradient(125deg, rgba(255,255,255,.22), transparent 46%, rgba(0,0,0,.08)),
    var(--individual-color);
  background-size: 15px 15px, 21px 21px, auto, auto;
}

.quadros-color-picker.is-glitter .palette-swatches span {
  background:
    radial-gradient(circle at 22% 30%, rgba(255,255,255,.95) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 68%, rgba(255,236,170,.82) 0 1px, transparent 1.9px),
    var(--palette-color);
  background-size: 13px 13px, 19px 19px, auto;
}

.quadros-color-picker.is-glitter .palette-composition__slot.is-filled::after {
  background:
    radial-gradient(circle at 14% 18%, rgba(255,255,255,.98) 0 1.2px, transparent 2px),
    radial-gradient(circle at 70% 35%, rgba(255,245,204,.9) 0 1.4px, transparent 2.3px),
    radial-gradient(circle at 38% 78%, rgba(255,255,255,.82) 0 1px, transparent 2px),
    linear-gradient(118deg, rgba(255,255,255,.30) 0 12%, transparent 26% 66%, rgba(255,255,255,.10) 80%, transparent 94%);
  background-size: 17px 17px, 25px 25px, 21px 21px, auto;
}

.step-help {
  white-space: pre-line;
}

.details-field-note {
  white-space: pre-line;
}

.quadros-details-example-drawer {
  align-content: start;
}

.free-quantity-builder {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-stone);
}

.free-quantity-builder > p {
  margin: 0;
  color: var(--muted);
  font-size: .88rem;
  text-align: center;
}

.free-quantity-control {
  display: grid;
  grid-template-columns: 48px minmax(96px, 132px) 48px;
  align-items: end;
  gap: 10px;
}

.free-quantity-control button {
  width: 48px;
  height: 48px;
  border: 1px solid var(--moss);
  border-radius: 50%;
  background: var(--card);
  color: var(--moss);
  font: inherit;
  font-size: 1.5rem;
  font-weight: 850;
  cursor: pointer;
}

.free-quantity-control button:disabled {
  opacity: .35;
  cursor: default;
}

.free-quantity-control label {
  display: grid;
  gap: 5px;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
  text-align: center;
}

.free-quantity-control input {
  width: 100%;
  height: 48px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fffdf8;
  color: var(--ink);
  font: inherit;
  font-size: 1.25rem;
  font-weight: 850;
  text-align: center;
}

/* ORDER_LEAD_TIME_V1: aviso editável do primeiro passo, abaixo do progresso. */
.order-lead-time-notice {
  margin: 4px 0 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--gold-soft);
  color: var(--ink);
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.5;
}

html[data-theme="dark"] .order-lead-time-notice {
  border-color: var(--line);
  background: var(--card);
}