/* Ajustes do storefront Medusa sobre o CSS original do tema Brasília. */

/* Galeria em tela cheia (no tema era o Fancybox). */
.u3d-lightbox {
  position: fixed; inset: 0; z-index: 30000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(31, 35, 38, .92); cursor: zoom-out;
}
.u3d-lightbox img { max-width: 92vw; max-height: 88vh; object-fit: contain; cursor: default; }
.u3d-lightbox button {
  position: absolute; background: var(--off-white); border: 0; border-radius: 999px;
  width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.u3d-lightbox-close { top: 16px; right: 16px; }
.u3d-lightbox-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.u3d-lightbox-next { right: 16px; top: 50%; transform: translateY(-50%); }

/* Checkout: o da Nuvemshop era uma página à parte; este segue os tokens do tema. */
.u3d-checkout { display: grid; gap: 24px; align-items: start; }
@media (min-width: 768px) { .u3d-checkout { grid-template-columns: minmax(0, 1fr) 360px; } }
.u3d-checkout .card { background: var(--main-background); border: 1px solid var(--main-foreground-opacity-10); border-radius: var(--border-radius); }
.u3d-checkout-step { opacity: .75; }
.u3d-checkout-step.is-active { opacity: 1; border-color: var(--main-foreground-opacity-20); }
.u3d-checkout-step-head { display: flex; align-items: center; gap: 10px; }
.u3d-checkout-step-n {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%;
  background: var(--button-background); color: var(--button-foreground); font-size: 13px; font-weight: 700;
}
.u3d-checkout-step .btn-link { background: none; border: 0; cursor: pointer; }
.u3d-checkout-aside { position: sticky; top: 140px; }
.u3d-checkout-thumb { width: 56px; height: 56px; border-radius: 6px; overflow: hidden; background: var(--verde-agua-claro); }
.u3d-checkout-thumb img { width: 100%; height: 100%; object-fit: cover; }
.u3d-checkout-summary .top-line, .card .top-line { border-top: 1px solid var(--main-foreground-opacity-10); }
.card-img-small { height: 20px; width: auto; }
.ml-auto { margin-left: auto; }

/* Miniaturas da galeria: no tema o Swiper as empilhava via JS. */
.swiper-product-thumb .swiper-wrapper { display: flex; }
.swiper-product-thumb .product-thumb-container { flex-shrink: 0; }
@media (min-width: 768px) {
  .swiper-product-thumb .swiper-wrapper { flex-direction: column; }
  .swiper-product-thumb .product-thumb-container { width: 100%; margin-bottom: 10px; }
}
@media (max-width: 767px) {
  .swiper-product-thumb { height: auto; }
  .swiper-product-thumb .product-thumb-container { margin-right: 16px; }
}

/* Andamento do pedido (pagamento, produção e envio). */
.u3d-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
@media (min-width: 768px) { .u3d-timeline { grid-template-columns: repeat(8, 1fr); } }
.u3d-timeline-step { position: relative; display: flex; gap: 10px; align-items: flex-start; padding: 0 0 18px 0; color: var(--main-foreground-opacity-50); font-size: var(--font-small); }
@media (min-width: 768px) { .u3d-timeline-step { flex-direction: column; align-items: center; text-align: center; padding: 0 4px; } }
.u3d-timeline-step::before { content: ""; position: absolute; left: 6px; top: 14px; bottom: 0; width: 2px; background: var(--main-foreground-opacity-10); }
@media (min-width: 768px) { .u3d-timeline-step::before { left: 50%; right: -50%; top: 6px; bottom: auto; width: auto; height: 2px; } }
.u3d-timeline-step:last-child::before { display: none; }
.u3d-timeline-dot { position: relative; z-index: 1; flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--main-background); border: 2px solid var(--main-foreground-opacity-20); }
.u3d-timeline-step.is-done, .u3d-timeline-step.is-current { color: var(--main-foreground); }
.u3d-timeline-step.is-done::before { background: var(--button-background); }
.u3d-timeline-step.is-done .u3d-timeline-dot { background: var(--button-background); border-color: var(--button-background); }
.u3d-timeline-step.is-current .u3d-timeline-dot { border-color: var(--button-background); box-shadow: 0 0 0 4px var(--verde-agua-claro); }
.u3d-timeline-step.is-current .u3d-timeline-label { font-weight: 700; }
.u3d-timeline-date { display: block; font-size: var(--font-smallest); opacity: .7; }