/* 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;
}

/* 40.8.11 — preview sempre ocupado e sem sobreposição entre mockup e fotografia. */
.pod-config-drawer .config-preview {
  position: relative;
  min-height: 260px;
  background: #eeeae1;
}
.pod-config-drawer .pod-preview-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.pod-config-drawer .pod-preview-stage-art {
  padding: 18px;
}
.pod-config-drawer .pod-preview-art {
  width: min(78%, 360px) !important;
  height: min(78%, 360px) !important;
  max-width: 360px !important;
  max-height: 360px !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
  mix-blend-mode: multiply;
}
.pod-config-drawer .pod-preview-stage-photo {
  background: #eeeae1;
  padding: 0;
}
.pod-config-drawer .pod-preview-stage-photo .pod-preview-product {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center !important;
  transform: none !important;
}
@media (max-width: 580px) {
  .pod-config-drawer .config-preview { min-height: 235px; }
  .pod-config-drawer .pod-preview-art { width: min(82%, 300px) !important; height: min(82%, 300px) !important; }
}

/* 40.8.11 — nenhum estado do configurador deve deixar o palco visualmente vazio. */
.pod-config-drawer .pod-preview-missing {
  width: min(82%, 360px);
  min-height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  border: 1px dashed #d8d2c7;
  color: var(--green);
  text-align: center;
  background: rgba(255,255,255,.38);
}
.pod-config-drawer .pod-preview-missing strong {
  font: 500 28px/.98 'Fraunces', Georgia, serif;
}
.pod-config-drawer .pod-preview-missing span {
  color: #77736b;
  font: 500 11px/1.4 'Archivo', system-ui, sans-serif;
}
.pod-config-drawer .pod-preview-art {
  mix-blend-mode: normal !important;
  transform: none !important;
}

/* 40.8.11 — preview POD: imagem deve preencher todo o palco.
   O palco tem proporção fixa 16:9 e as fotografias usam cover, eliminando
   a "miniatura" central com áreas vazias laterais/superiores. */
.pod-config-drawer .config-preview {
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 16 / 9;
  padding: 0 !important;
  display: block !important;
  background: #eeeae1;
  overflow: hidden;
}

.pod-config-drawer .pod-preview-stage {
  width: 100%;
  height: 100%;
  min-height: 0 !important;
  display: block !important;
  overflow: hidden;
}

/* Fotografia do produto/modelagem: ocupa 100% do palco sem sobras. */
.pod-config-drawer .pod-preview-stage-photo .pod-preview-product {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: none !important;
}

/* A própria imagem da estampa também preenche o palco. */
.pod-config-drawer .pod-preview-stage-art {
  width: 100%;
  height: 100%;
  padding: 0 !important;
  display: block !important;
}

.pod-config-drawer .pod-preview-stage-art .pod-preview-art {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center center !important;
  transform: none !important;
}

@media (max-width: 580px) {
  .pod-config-drawer .config-preview {
    aspect-ratio: 16 / 10;
  }
}


/* 40.8.11 — troca de modelagem estável e preview resiliente. */
.pod-config-drawer .pod-preview-stage-photo,
.pod-config-drawer .pod-preview-stage-art {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}
.pod-config-drawer .pod-preview-stage-photo .pod-preview-product {
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: cover !important;
  object-position: center center !important;
}
.pod-config-drawer .pod-preview-stage-photo .pod-preview-missing {
  position: absolute;
  inset: 0;
  margin: 0;
  width: 100%;
  min-height: 0;
  border: 0;
  background: #eeeae1;
}


/* 40.8.12 — seleção de modelagem: destaque explícito e consistente. */
.pod-config-drawer .choice.selected {
  border-color: var(--green) !important;
  background: #fbfcfa !important;
  box-shadow: inset 0 0 0 1.5px var(--green), 0 0 0 1px rgba(31,60,47,.06) !important;
}
.pod-config-drawer .choice.selected > strong {
  color: var(--green);
}
.pod-config-drawer .choice[aria-pressed="true"] {
  outline: none;
}


/* 40.8.16 — galeria POD: rolagem robusta de miniaturas + navegação por setas. */
.pod-config-drawer .config-preview {
  height: clamp(300px, 42vh, 430px);
  min-height: 300px;
  padding: 0 !important;
  background: #eeeae1;
  overflow: hidden;
}
.pod-config-drawer .pod-preview-gallery {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-rows: minmax(0,1fr) auto;
  gap: 10px;
  padding: 10px;
  box-sizing: border-box;
  overflow: hidden;
}
.pod-config-drawer .pod-preview-primary {
  min-height: 0;
  width: 100%;
  overflow: hidden;
  background: #eeeae1;
}
.pod-config-drawer .pod-preview-primary-image {
  width: 100% !important;
  height: 100% !important;
  display: block;
  object-fit: cover !important;
  object-position: center center !important;
  transform: none !important;
}
.pod-config-drawer .pod-preview-thumbs-wrap {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 6px;
  min-width: 0;
  max-width: 100%;
}
.pod-config-drawer .pod-preview-thumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 0 2px;
  scrollbar-width: thin;
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  cursor: grab;
  -webkit-overflow-scrolling: touch;
}
.pod-config-drawer .pod-preview-thumbs.is-dragging { cursor: grabbing; user-select: none; }
.pod-config-drawer .pod-preview-thumbs-nav {
  width: 34px;
  height: 34px;
  border: 1px solid #d9d0c4;
  border-radius: 999px;
  background: #fff;
  color: var(--green);
  display: grid;
  place-items: center;
  padding: 0;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: opacity .15s ease, background .15s ease, border-color .15s ease;
}
.pod-config-drawer .pod-preview-thumbs-nav:hover:not(:disabled) { background: #f7faf7; border-color: var(--green); }
.pod-config-drawer .pod-preview-thumbs-nav:disabled { opacity: .28; cursor: default; }
.pod-config-drawer .pod-preview-thumb {
  appearance: none;
  border: 1px solid #ddd4c8;
  border-radius: 6px;
  background: #fff;
  padding: 0;
  margin: 0;
  width: 58px;
  height: 46px;
  min-width: 58px;
  flex: 0 0 58px;
  overflow: hidden;
  cursor: pointer;
  box-sizing: border-box;
  opacity: .92;
  transition: border-color .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.pod-config-drawer .pod-preview-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.pod-config-drawer .pod-preview-thumb:hover { opacity: 1; }
.pod-config-drawer .pod-preview-thumb.selected {
  border: 2px solid var(--green) !important;
  box-shadow: 0 0 0 1px rgba(31,60,47,.08);
  opacity: 1;
}

/* Modelagem: seleção visível e consistente em todas as interações. */
.pod-config-drawer .choice.selected {
  border-color: var(--green) !important;
  background: #f7faf7 !important;
  box-shadow: inset 0 0 0 1.5px var(--green), 0 0 0 2px rgba(31,60,47,.06) !important;
}
.pod-config-drawer .choice.selected > strong { color: var(--green) !important; }
.pod-config-drawer .choice[aria-pressed="true"] { border-color: var(--green) !important; }

@media (max-width: 580px) {
  .pod-config-drawer .config-preview {
    height: clamp(260px, 48vh, 360px);
    min-height: 260px;
  }
  .pod-config-drawer .pod-preview-gallery { padding: 8px; gap: 8px; }
  .pod-config-drawer .pod-preview-thumbs-wrap { grid-template-columns: 30px minmax(0, 1fr) 30px; gap: 5px; }
  .pod-config-drawer .pod-preview-thumbs-nav { width: 30px; height: 30px; font-size: 19px; }
  .pod-config-drawer .pod-preview-thumb { width: 52px; height: 42px; min-width: 52px; flex-basis: 52px; }
}

/* 40.8.19 — Galeria POD: imagem principal + miniaturas horizontais abaixo. */
.pod-config-drawer .config-preview {
  height: clamp(390px, 60vh, 560px) !important;
  min-height: 390px !important;
  padding: 0 !important;
  background: #eeeae1 !important;
  overflow: hidden !important;
}

.pod-config-drawer .pod-preview-gallery {
  width: 100%;
  height: 100%;
  padding: 14px;
  box-sizing: border-box;
  overflow: hidden;
}

.pod-config-drawer .pod-preview-gallery-frame {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(0, 1fr) 76px;
  gap: 10px;
  overflow: hidden;
}

.pod-config-drawer .pod-preview-primary {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #ded7cc;
  border-radius: 8px;
}

.pod-config-drawer .pod-preview-primary-image {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center center !important;
}

.pod-config-drawer .pod-preview-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 36px !important;
  height: 36px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.72) !important;
  background: rgba(255,255,255,.93) !important;
  color: var(--green) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.12);
}

.pod-config-drawer .pod-preview-nav-prev { left: 12px; }
.pod-config-drawer .pod-preview-nav-next { right: 12px; }
.pod-config-drawer .pod-preview-nav:hover { background: #fff !important; }

.pod-config-drawer .pod-preview-counter {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.9);
  color: #3e3a34;
  font: 600 10px/1 'Archivo', system-ui, sans-serif;
  letter-spacing: .03em;
}

.pod-config-drawer .pod-preview-thumbs-wrap {
  min-width: 0;
  min-height: 0;
  height: 76px;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 32px;
  gap: 6px;
  align-items: center;
}

.pod-config-drawer .pod-preview-thumbs {
  min-width: 0;
  min-height: 0;
  height: 76px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 2px 1px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: #c7bfb3 transparent;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  scroll-behavior: smooth;
  cursor: grab;
}

.pod-config-drawer .pod-preview-thumbs::-webkit-scrollbar { height: 5px; }
.pod-config-drawer .pod-preview-thumbs::-webkit-scrollbar-thumb {
  background: #c7bfb3;
  border-radius: 999px;
}
.pod-config-drawer .pod-preview-thumbs::-webkit-scrollbar-track { background: transparent; }
.pod-config-drawer .pod-preview-thumbs.is-dragging { cursor: grabbing; user-select: none; }

.pod-config-drawer .pod-preview-thumb {
  width: 78px !important;
  min-width: 78px !important;
  max-width: 78px !important;
  height: 68px !important;
  min-height: 68px !important;
  flex: 0 0 78px !important;
  border-radius: 7px !important;
  opacity: .82;
  overflow: hidden;
  background: #fff;
}

.pod-config-drawer .pod-preview-thumb img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.pod-config-drawer .pod-preview-thumb.selected {
  border: 2px solid var(--green) !important;
  box-shadow: 0 0 0 1px rgba(31,60,47,.12) !important;
  opacity: 1 !important;
}

.pod-config-drawer .pod-preview-thumbs-nav {
  width: 32px !important;
  height: 32px !important;
  justify-self: center;
  border-radius: 999px !important;
  font-size: 18px !important;
}

.pod-config-drawer .pod-preview-thumbs-nav:hover:not(:disabled) {
  background: #fff !important;
  border-color: var(--green) !important;
}
.pod-config-drawer .pod-preview-thumbs-nav:disabled {
  opacity: .25 !important;
  cursor: default !important;
}

.pod-config-drawer .pod-preview-gallery-empty {
  display: grid;
  place-items: center;
}

.pod-config-drawer .pod-preview-gallery-empty .pod-preview-placeholder {
  width: min(100%, 360px);
  min-height: 160px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px;
  box-sizing: border-box;
  text-align: center;
  color: var(--green);
  background: rgba(255,255,255,.38);
  border: 1px dashed #d8d2c7;
}

@media (max-width: 580px) {
  .pod-config-drawer .config-preview {
    height: clamp(300px, 50vh, 390px) !important;
    min-height: 300px !important;
  }
  .pod-config-drawer .pod-preview-gallery { padding: 8px; }
  .pod-config-drawer .pod-preview-gallery-frame {
    grid-template-rows: minmax(0, 1fr) 60px;
    gap: 8px;
  }
  .pod-config-drawer .pod-preview-thumbs-wrap {
    height: 60px;
    grid-template-columns: 28px minmax(0, 1fr) 28px;
    gap: 4px;
  }
  .pod-config-drawer .pod-preview-thumbs {
    height: 60px;
    gap: 6px;
    padding: 1px;
  }
  .pod-config-drawer .pod-preview-thumbs-nav { width: 28px !important; height: 28px !important; }
  .pod-config-drawer .pod-preview-thumb {
    width: 68px !important;
    min-width: 68px !important;
    max-width: 68px !important;
    height: 52px !important;
    min-height: 52px !important;
    flex-basis: 68px !important;
  }
}

/* 40.8.19 — Gallery authoritative override: large primary image + horizontal thumbnail rail below. */
.pod-config-drawer .pod-preview-gallery {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  padding: 12px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  background: transparent !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
}

.pod-config-drawer .pod-preview-gallery-frame {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) 72px !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  gap: 10px !important;
  overflow: hidden !important;
}

.pod-config-drawer .pod-preview-primary {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  background: #ded7cc !important;
  border-radius: 6px !important;
}

.pod-config-drawer .pod-preview-primary-image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* Keep the main image clean: navigation lives in the thumbnail rail. */
.pod-config-drawer .pod-preview-primary .pod-preview-nav {
  display: none !important;
}

.pod-config-drawer .pod-preview-counter {
  right: 10px !important;
  bottom: 10px !important;
}

.pod-config-drawer .pod-preview-thumbs-wrap {
  grid-column: 1 !important;
  grid-row: 2 !important;
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr) 34px !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  height: 72px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.pod-config-drawer .pod-preview-thumbs {
  grid-column: 2 !important;
  grid-row: 1 !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  height: 72px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: 2px 1px 6px !important;
  box-sizing: border-box !important;
  scrollbar-width: thin !important;
  overscroll-behavior-x: contain !important;
  touch-action: pan-x !important;
  -webkit-overflow-scrolling: touch !important;
}

.pod-config-drawer .pod-preview-thumb {
  flex: 0 0 76px !important;
  width: 76px !important;
  min-width: 76px !important;
  max-width: 76px !important;
  height: 62px !important;
  min-height: 62px !important;
  max-height: 62px !important;
  padding: 0 !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.pod-config-drawer .pod-preview-thumb img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

.pod-config-drawer .pod-preview-thumb.selected {
  border: 2px solid var(--green) !important;
  box-shadow: 0 0 0 1px rgba(31,60,47,.10) !important;
  opacity: 1 !important;
  transform: translateY(-1px) !important;
}

.pod-config-drawer .pod-preview-thumbs-nav {
  grid-row: 1 !important;
  position: static !important;
  justify-self: center !important;
  width: 32px !important;
  height: 32px !important;
  flex: none !important;
}
.pod-config-drawer .pod-preview-thumbs-prev { grid-column: 1 !important; }
.pod-config-drawer .pod-preview-thumbs-next { grid-column: 3 !important; }

@media (max-width: 580px) {
  .pod-config-drawer .config-preview {
    height: clamp(300px, 50vh, 390px) !important;
    min-height: 300px !important;
  }
  .pod-config-drawer .pod-preview-gallery {
    padding: 8px !important;
  }
  .pod-config-drawer .pod-preview-gallery-frame {
    grid-template-rows: minmax(0, 1fr) 60px !important;
    gap: 8px !important;
  }
  .pod-config-drawer .pod-preview-thumbs-wrap,
  .pod-config-drawer .pod-preview-thumbs {
    height: 60px !important;
  }
  .pod-config-drawer .pod-preview-thumb {
    flex-basis: 62px !important;
    width: 62px !important;
    min-width: 62px !important;
    height: 50px !important;
    min-height: 50px !important;
  }
  .pod-config-drawer .pod-preview-thumbs-wrap {
    grid-template-columns: 28px minmax(0, 1fr) 28px !important;
    gap: 4px !important;
  }
  .pod-config-drawer .pod-preview-thumbs-nav {
    width: 28px !important;
    height: 28px !important;
  }
}