/* Candeeiro POD configurator — only dynamic overrides; base layout/typography comes from catalogo.css (Candeeiro reference). */
.pod-config-drawer .config-preview {
  position: relative;
  overflow: hidden;
}
.pod-config-drawer .config-preview img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}
.pod-config-drawer .config-preview .pod-preview-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  padding: 20px;
  color: var(--green);
  text-align: center;
}
.pod-config-drawer .config-preview .pod-preview-fallback small {
  font: 700 9px/1 'Archivo', system-ui, sans-serif;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.pod-config-drawer .config-preview .pod-preview-fallback strong {
  max-width: 85%;
  font: 500 34px/.95 'Fraunces', Georgia, serif;
  letter-spacing: -.04em;
  overflow-wrap: anywhere;
}
.pod-config-drawer .choice:disabled,
.pod-config-drawer .swatch:disabled,
.pod-config-drawer .size:disabled {
  opacity: .4;
  cursor: not-allowed;
}
.pod-config-drawer .choice .pod-model-image {
  display: block;
  width: 100%;
  height: 72px;
  margin-bottom: 8px;
  border-radius: 10px;
  object-fit: cover;
  background: var(--paper);
}
.pod-config-drawer .choice .choice-icon {
  min-height: 22px;
}
.pod-config-drawer .swatch .pod-color-image,
.pod-config-drawer .swatch .swatch-dot {
  width: 24px;
  height: 24px;
  min-width: 24px;
  display: block;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid rgba(0,0,0,.08);
}
.pod-config-drawer .swatch .swatch-dot {
  background: var(--swatch, #ddd);
}
.pod-config-drawer .size small {
  display: block;
  margin-top: 3px;
  color: #929087;
  font-size: 8px;
}
.pod-config-drawer .size.selected small {
  color: rgba(255,255,255,.72);
}
.pod-config-drawer .stock-hint {
  white-space: nowrap;
  font-size: 10px;
  color: #7f7b73;
}
.pod-config-drawer .pod-availability {
  min-height: 0;
  margin-top: 8px;
  color: #8a5a00;
  font-size: 11px;
  line-height: 1.45;
}
.pod-config-drawer .pod-toast {
  position: absolute;
  z-index: 150;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  padding: 12px 17px;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.16);
  font: 600 11px/1.2 'Archivo', system-ui, sans-serif;
}
@media (max-width: 580px) {
  .pod-config-drawer .choice-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.pod-config-drawer .choice .choice-icon{width:100%;height:54px;min-height:54px;margin:0 auto 8px;display:flex;align-items:center;justify-content:center;overflow:hidden}.pod-config-drawer .choice .choice-icon-img{width:54px;height:54px;object-fit:contain;display:block;flex:0 0 54px}.pod-config-drawer .choice .choice-icon-glyph{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;flex:0 0 54px;font-size:22px;line-height:1}.pod-config-drawer .choice .choice-icon-fallback{font-size:22px}.pod-config-drawer .choice .choice-icon [hidden]{display:none!important}

/* 40.6.8 — preview do POD: a peça deve ocupar o palco, não um quadro dentro dele. */
.pod-config-drawer .config-preview {
  height: clamp(250px, 34vh, 330px);
  min-height: 250px;
  margin-bottom: 20px;
  display: grid;
  place-items: center;
  padding: 10px 18px;
  background: #eeeae1;
  border-radius: 0;
}
.pod-config-drawer .config-preview > img {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
  transform: scale(1.08);
  transform-origin: center;
}
.pod-config-drawer .config-preview .pod-preview-svg {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: block;
}

/* 40.7.1 — modelos POD: ícone menor, conteúdo centralizado e card mais equilibrado. */
.pod-config-drawer .choice {
  min-height: 116px;
  padding: 10px 12px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.pod-config-drawer .choice .choice-icon {
  width: 100%;
  height: 38px;
  min-height: 38px;
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pod-config-drawer .choice .choice-icon-img,
.pod-config-drawer .choice .choice-icon-glyph {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
}
.pod-config-drawer .choice .choice-icon-glyph { font-size: 18px; }
.pod-config-drawer .choice > strong {
  display: block;
  width: 100%;
  margin: 0;
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
}
.pod-config-drawer .choice > small {
  display: block;
  width: 100%;
  margin: 3px 0 0;
  text-align: center;
  font-size: 10px;
  line-height: 1.2;
}

/* Feedback discreto: a configuração permanece aberta após adicionar. */
.pod-config-drawer .drawer-body { position: relative; }
.pod-config-drawer .pod-toast {
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  z-index: 3;
  max-width: calc(100% - 32px);
  white-space: nowrap;
  padding: 10px 14px;
  border: 1px solid rgba(31,60,47,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  color: var(--green);
  box-shadow: 0 8px 24px rgba(21,25,20,.12);
  font: 600 11px/1.2 'Archivo', system-ui, sans-serif;
}

@media (max-width: 580px) {
  .pod-config-drawer .config-preview {
    height: 235px;
    min-height: 235px;
    padding: 8px 14px;
  }
  .pod-config-drawer .choice { min-height: 112px; }
  .pod-config-drawer .pod-toast { top: 8px; }
}


/* 40.7.3 — feedback de adição discreto e independente do conteúdo do drawer. */
.pod-toast {
  position: fixed !important;
  top: 88px !important;
  right: 24px !important;
  left: auto !important;
  bottom: auto !important;
  z-index: 9999 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: fit-content !important;
  min-width: 0 !important;
  max-width: min(360px, calc(100vw - 32px)) !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 10px 14px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;
  border: 1px solid rgba(31,60,47,.12) !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,.97) !important;
  color: var(--green) !important;
  box-shadow: 0 8px 24px rgba(21,25,20,.14) !important;
  pointer-events: none !important;
  font: 600 11px/1.2 'Archivo', system-ui, sans-serif !important;
}

/* Seleção padrão: os três níveis começam sempre definidos quando houver opções. */
.pod-config-drawer .choice.selected,
.pod-config-drawer .swatch.selected,
.pod-config-drawer .size.selected { outline: none; }

/* Ícones ainda mais compactos e alinhados como referência de catálogo de moda. */
.pod-config-drawer .choice { min-height: 108px; }
.pod-config-drawer .choice .choice-icon,
.pod-config-drawer .choice .choice-icon-img,
.pod-config-drawer .choice .choice-icon-glyph {
  width: 32px !important;
  height: 32px !important;
  min-height: 32px !important;
  flex-basis: 32px !important;
}
.pod-config-drawer .choice .choice-icon { margin: 0 auto 5px !important; }
.pod-config-drawer .choice .choice-icon-glyph { font-size: 17px !important; }

@media (max-width: 580px) {
  .pod-toast {
    top: 74px !important;
    right: 12px !important;
    max-width: calc(100vw - 24px) !important;
  }
  .pod-config-drawer .choice { min-height: 106px; }
}


/* 40.7.6 — cor selecionada: destaque explícito igual aos demais níveis. */
.pod-config-drawer .swatch {
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.pod-config-drawer .swatch.selected {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
  box-shadow: inset 0 0 0 1px var(--green), 0 0 0 2px rgba(31, 60, 47, .08);
}
.pod-config-drawer .swatch.selected .swatch-dot,
.pod-config-drawer .swatch.selected .pod-color-image {
  border-color: rgba(255,255,255,.78);
  box-shadow: 0 0 0 2px rgba(255,255,255,.72);
}
.pod-config-drawer .swatch.selected span:last-child {
  color: #fff;
  font-weight: 600;
}