/* ===== v4 — fotos reais (02/10/2026) ===== */

/* Banner: foto nítida + a mesma foto desfocada preenchendo a largura (continua o fundo do estúdio) */
.wp-banner { background: #6c7073; }
.wp-slide img.bg { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; filter: blur(34px) saturate(.9); transform: scale(1.05); }
.wp-slide img.fg { position: absolute; top: 0; bottom: 0; left: auto; right: 6%; width: auto; height: 100%; max-width: 62%; object-fit: contain; object-position: 50% 0 !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 16%, #000 84%, transparent 100%); }
.wp-slide::after { background: linear-gradient(90deg, rgba(24,16,16,.62) 0%, rgba(24,16,16,.38) 36%, rgba(24,16,16,0) 58%) !important; }
.wp-slide-copy h2 { color: var(--off); text-shadow: 0 2px 24px rgba(0,0,0,.25); }
.wp-slide-copy .eyebrow { color: #e3c38e; }
.wp-slide-copy .button.dark { background: var(--off); color: var(--bordo); border-color: var(--off); }
.wp-dots button { background: rgba(247,241,232,.45); }
.wp-dots button.on { background: var(--off); }

/* Cards: segunda foto ao passar o mouse */
.product-image .img-alt { position: absolute; inset: 0; opacity: 0; transition: opacity .45s; }
.product-card:hover .product-image .img-alt { opacity: 1; }
.product-image img { object-position: 50% 25%; }

/* Modal: miniaturas */
.modal-image { position: relative; }
.m-thumbs { position: absolute; left: 12px; bottom: 12px; display: flex; gap: 8px; }
.m-thumbs button { width: 54px; height: 70px; padding: 0; border: 2px solid transparent; cursor: pointer; background: #ddd; box-shadow: 0 6px 16px rgba(0,0,0,.2); }
.m-thumbs button.active { border-color: var(--off); outline: 1px solid var(--bordo); }

.wp-highlight-img img, .shop-look-image img { object-position: 50% 25%; }

@media (min-width: 981px) {
  /* desfaz o ajuste antigo que colocava a foto só na metade direita */
  .wp-slide img.bg { left: -40px; right: auto; width: calc(100% + 80px); }
  .wp-slide img.fg { left: auto; }
}
@media (max-width: 980px) {
  .wp-slide img.bg { display: none; }
  .wp-slide img.fg { inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 50% 15% !important; -webkit-mask-image: none; mask-image: none; }
  .wp-slide::after { background: linear-gradient(0deg, rgba(24,16,16,.78) 0%, rgba(24,16,16,.45) 34%, rgba(24,16,16,0) 60%) !important; }
  .m-thumbs button { width: 44px; height: 58px; }
}

/* Fundo do banner = só o canto vazio do estúdio, ampliado e desfocado (sem "fantasma" da modelo) */
@media (min-width: 981px) {
  .wp-slide img.bg { object-position: 0 0 !important; transform: scale(5); transform-origin: 0 0; filter: blur(24px); }
}