/*
 * Marta Manente — Produto (single). Réplica do template atual (Elementor #198).
 * Medidas: container fluido até --mm-wrap-max (1536) · imagens 740fr / texto 355fr (a proporção do template atual, escalando) · galeria masonry 2 col (gap 10) · grade em linhas justificadas.
 * Títulos: Produtos 45 (escala do site) · categoria 40 (era 35) · nome do produto 40 (igual ao atual: coluna estreita) · Outros 40 (era 35).
 *
 * Projeto Gerado pelo Prompt Mestre do Desenvolvedor e Vibe Coder Dante Testa — www.dantetesta.com.br
 */

.mm-prod {
	--mm-ease: cubic-bezier(.22, 1, .36, 1);
	--mm-ease-io: cubic-bezier(.76, 0, .24, 1);
	font-family: var(--mm-font);
	color: var(--mm-black);
}
.mm-prod__wrap { width: 100%; max-width: calc(var(--mm-wrap-max) + 2 * var(--mm-gutter)); margin: 0 auto; padding: 0 var(--mm-gutter); }

/* ---------- Cabeçalho da seção: traço 150px + "Produtos" / categoria ---------- */
.mm-prod__top { padding: 50px 0; }
.mm-prod__head { display: grid; grid-template-columns: 175px 1fr; align-items: start; }
.mm-prod__headrule { margin-top: 30px; } /* alinha o traço ao meio da 1ª linha do título */
.mm-prod__label, .mm-prod__cat { display: block; margin: 0 0 6px; letter-spacing: 2px; }
.mm-prod__label { font-size: 45px; }
.mm-prod__cat { font-size: 40px; color: var(--mm-black); }
.mm-prod__cat:hover { color: var(--mm-black); }
.mm-prod__cat .mm-title__in { transition: opacity var(--mm-transition); }
.mm-prod__cat:hover .mm-title__in { opacity: .6; }

/* ---------- Corpo: imagens (66%) · texto (33%) ---------- */
.mm-prod__grid { display: grid; grid-template-columns: minmax(0, 740fr) 25px minmax(0, 355fr); align-items: start; }
.mm-prod__media { min-width: 0; }
.mm-prod__feat, .mm-masonry__item { display: block; overflow: hidden; cursor: zoom-in; background: #f3f3f3; }
.mm-prod__feat { margin-bottom: 20px; }
.mm-prod__feat img, .mm-masonry__item img { display: block; width: 100%; height: auto; transition: transform .9s var(--mm-ease); }
.mm-prod__feat:hover img, .mm-prod__gallery .mm-masonry__item:hover img { transform: scale(1.03); }
.mm-prod__feat:focus-visible, .mm-masonry__item:focus-visible { outline-offset: -3px; }

/* Masonry: colunas independentes, cada item cai na mais baixa (montado em PHP; product.js refaz se o nº de colunas mudar). */
.mm-masonry { display: flex; gap: var(--mm-gap, 10px); align-items: flex-start; }
.mm-masonry__col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--mm-gap, 10px); }

.mm-prod__info { grid-column: 3;}
.mm-prod__vrule { display: block; width: 2px; height: 150px; margin-bottom: 0; background: var(--mm-black); transform-origin: 50% 0; }
.mm-prod__title { margin: 50px 0 6px; font-size: 40px; letter-spacing: 2px; }
.mm-prod__text { padding-top: 15px; color: #464646; font-size: 15px; font-weight: 400; line-height: 2; }
.mm-prod__text p { margin: 0 0 .9rem; }
.mm-prod__info .mm-fade--btn { display: block; margin-top: 24px; }
.mm-prod__info .mm-btn { cursor: pointer; }

/* ---------- Outros Produtos ---------- */
.mm-prod__related { padding: 150px 0 50px; }
.mm-prod__head--sm { margin-bottom: 30px; }
.mm-prod__sub { margin: 0 0 6px; font-size: 40px; letter-spacing: 2px; text-transform: none; }
.mm-prod__head--sm .mm-prod__headrule { margin-top: 28px; }
/* ---------- Grade "linhas justificadas": formato real de cada foto, linhas fechando na largura ----------
   flex-grow = proporção (largura/altura) → as fotos da mesma linha ficam com a MESMA altura, sem cortar nada.
   --mm-rowh é a altura-alvo: define quantas fotos cabem por linha (e o tamanho delas). */
.mm-rows { --mm-gap: 14px; --mm-rowh: clamp(300px, 28vw, 460px); display: flex; flex-wrap: wrap; gap: var(--mm-gap); }
.mm-rows > .mm-pcard { flex: calc(var(--r, 1) * 100) 1 calc(var(--r, 1) * var(--mm-rowh, 400px)); min-width: 0; }
.mm-rows--rel { --mm-rowh: clamp(260px, 23vw, 380px); }
/* Com JS (product.js): linhas montadas — 3 produtos por linha (2 no celular), todos com a mesma altura. */
.mm-rows.is-js { display: block; }
.mm-rows.is-js .mm-rows__row { display: flex; align-items: flex-start; justify-content: center; gap: var(--mm-gap); margin-bottom: var(--mm-gap); }
.mm-rows.is-js .mm-rows__row:last-child { margin-bottom: 0; }
.mm-rows.is-js .mm-pcard { flex: none; }
.mm-rows.is-js .mm-pcard__media { aspect-ratio: auto; }
.mm-rows.is-js .mm-rows__end { display: none; }
.mm-rows__end { flex: 100000 1 0; height: 0; } /* a última linha não estica */

/* ---------- Cartão de produto ----------
   Fundo claro das fotos → legenda em preto sobre um degradê branco (nome 15–20px conforme a tela, espaçamento 2,5px).
   Hover: a foto se aproxima bem devagar, a legenda sobe e a seta desliza; os outros cartões esmaecem de leve. */
.mm-pcard { position: relative; display: block; color: var(--mm-black); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
.mm-pcard__media { position: relative; display: block; overflow: hidden; background: #f3f3f3; aspect-ratio: var(--r, 1); }
.mm-pcard__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mm-pcard:focus-visible { outline-offset: 3px; }

/* Nome do produto — duas apresentações:
   (a) mouse + tela ≥ 768px: legenda sobre degradê branco aparece no hover (a foto se aproxima devagar);
   (b) toque ou tela < 768px: o nome fica SEMPRE visível, em texto simples logo abaixo da foto. */
.mm-pcard__cap { display: none; }
.mm-pcard__name { display: block; padding: 14px 8px 8px; font-size: clamp(14px, 3.6vw, 16px); font-weight: 600; letter-spacing: 2px; line-height: 1.35; text-align: center; text-transform: uppercase; color: var(--mm-black); }
@media (hover: hover) and (min-width: 768px) {
	.mm-pcard__name { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* só leitores de tela */
	/* Legenda: texto preto sobre degradê branco. O texto nunca se move (nítido). Estados iniciais aqui;
	   a animação do hover (zoom, legenda, sublinhado, seta e o esmaecer dos demais) é do GSAP — product.js, seção 1c. */
	.mm-pcard__cap {
		position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
		padding: 90px 26px 24px; background: linear-gradient(to top, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .7) 50%, rgba(255, 255, 255, 0) 100%);
		opacity: 0;
	}
	.mm-pcard__title {
		padding-bottom: 10px; font-size: clamp(14px, 0.95vw, 15px); font-weight: 600; letter-spacing: 2.5px; line-height: 1.3; text-transform: uppercase; color: var(--mm-black);
		background: linear-gradient(currentColor, currentColor) 0 100% / 0% 1px no-repeat; /* sublinhado: cresce pela largura do fundo, sem transform */
	}
	.mm-pcard__go { position: relative; flex: none; width: 22px; height: 1px; margin-bottom: 0; background: currentColor; } /* base do bloco = mesma linha do sublinhado do nome, com 1 ou 2 linhas de texto */
	.mm-pcard__go::after { content: ""; position: absolute; right: 0; top: -4px; width: 9px; height: 9px; border-top: 1px solid currentColor; border-right: 1px solid currentColor; transform: rotate(45deg); }
}

/* ---------- Categoria ---------- */
.mm-cat__name { margin-top: 0; }
.mm-cat__top { padding-bottom: 60px; }
.mm-cat__grid { padding-bottom: 50px; }

/* ---------- Tablet / celular ---------- */
@media (max-width: 1024px) {
	.mm-rows, .mm-rows--rel { --mm-rowh: 300px; }
	.mm-prod__top { padding-bottom: 20px; }
	.mm-prod__head { grid-template-columns: 1fr; justify-items: center; text-align: center; }
	.mm-prod__headrule { margin: 0 0 24px; }
	.mm-prod__grid { grid-template-columns: 1fr; }
	.mm-prod__info { order: -1; grid-column: 1; margin-right: 0; padding: 0 0 30px; text-align: center; }
	.mm-prod__vrule { display: none; }
	.mm-prod__title { margin-top: 10px; }
	.mm-prod__related { padding-top: 90px; }
		}
@media (max-width: 767px) {
	.mm-rows, .mm-rows--rel { --mm-rowh: 340px; --mm-gap: 10px; } /* celular: 1 produto por linha, na largura toda */
	.mm-rows.is-js .mm-rows__row { margin-bottom: 22px; }
	.mm-prod__label { font-size: 44px; }
	.mm-prod__cat { font-size: 32px; }
	.mm-prod__sub { font-size: 32px; }
	}

/* ---------- Lightbox (controles e fechar no desenho do menu lateral) ---------- */
.mm-lb { position: fixed; inset: 0; z-index: 10001; --mm-ease-out: cubic-bezier(.22, 1, .36, 1); font-family: var(--mm-font); }
.mm-lb[hidden] { display: none; }
.mm-lb__bg { position: absolute; inset: 0; background: rgba(0, 0, 0, .94); }
.mm-lb__stage { position: absolute; inset: 0; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; padding: clamp(72px, 9vh, 96px) clamp(20px, 8vw, 120px); overflow: hidden; touch-action: pan-y pinch-zoom; }
.mm-lb__img { grid-area: 1 / 1; display: block; max-width: 100%; max-height: 100%; min-height: 0; width: auto; height: auto; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.mm-lb__btn {
	position: absolute; z-index: 2;
	display: flex; align-items: center; justify-content: center;
	width: 48px; height: 48px; padding: 0;
	color: var(--mm-black); background-color: var(--mm-white);
	border: 2px solid var(--mm-white); border-radius: 0; cursor: pointer;
	transition: background-color var(--mm-transition), color var(--mm-transition);
}
.mm-lb__btn:hover, .mm-lb__btn:focus-visible { background-color: transparent; color: var(--mm-white); }
.mm-lb :focus-visible { outline: 2px solid var(--mm-white); outline-offset: 3px; }
.mm-lb__close { top: clamp(16px, 3vw, 36px); right: clamp(16px, 3vw, 36px); }
.mm-lb__close:hover .mm-offcanvas__x { transform: rotate(90deg); }
.mm-lb__prev, .mm-lb__next { top: 50%; margin-top: -24px; }
.mm-lb__prev { left: clamp(12px, 3vw, 36px); }
.mm-lb__next { right: clamp(12px, 3vw, 36px); }
.mm-lb__arrow { width: 12px; height: 12px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transition: transform .5s var(--mm-ease-out); }
.mm-lb__next .mm-lb__arrow { transform: rotate(45deg); margin-left: -4px; }
.mm-lb__prev .mm-lb__arrow { transform: rotate(-135deg); margin-right: -4px; }
.mm-lb__next:hover .mm-lb__arrow { transform: rotate(45deg) translate(3px, -3px); }
.mm-lb__prev:hover .mm-lb__arrow { transform: rotate(-135deg) translate(3px, -3px); }
.mm-lb__count { position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(16px, 3vh, 32px); text-align: center; color: var(--mm-white); font-size: 12px; font-weight: 600; letter-spacing: 2.5px; }
.mm-lb__btn[hidden] { display: none; }
@media (max-width: 767px) {
	.mm-lb__prev, .mm-lb__next { top: auto; bottom: 12px; margin: 0; }
	.mm-lb__prev { left: 12px; } .mm-lb__next { right: 12px; }
	.mm-lb__stage { padding: 76px 12px 76px; }
}
html.mm-lb-open { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
	html.mm-js .mm-prod [data-mm-rise] { opacity: 0; }
	html.mm-js .mm-prod .mm-vrule { opacity: 0; }
}

/* =====================================================================
 * Modal de orçamento (<dialog>) — visual do Contato, painel branco
 * ===================================================================== */
.mm-modal {
	--mm-ease: cubic-bezier(.22, 1, .36, 1);
	width: min(680px, calc(100vw - 24px)); max-width: none; max-height: calc(100dvh - 24px);
	margin: auto; padding: 0; border: 0; background: transparent; color: var(--mm-black); font-family: var(--mm-font); overflow: visible;
}
.mm-modal::backdrop { background: rgba(0, 0, 0, .72); animation: mm-fade-in .5s both; }
.mm-modal.is-closing::backdrop { animation: mm-fade-out .45s both; }
.mm-modal__panel { position: relative; max-height: calc(100dvh - 24px); overflow: auto; overscroll-behavior: contain; background: var(--mm-white); padding: clamp(28px, 5vw, 56px) clamp(22px, 5vw, 64px) clamp(28px, 4vw, 48px); }
.mm-modal__close {
	position: absolute; top: 12px; right: 12px; z-index: 2;
	display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; padding: 0;
	color: var(--mm-white); background: var(--mm-black); border: 2px solid var(--mm-black); border-radius: 0; cursor: pointer;
	transition: background-color var(--mm-transition), color var(--mm-transition);
}
.mm-modal__close:hover, .mm-modal__close:focus-visible { background: transparent; color: var(--mm-black); }
.mm-modal__close:hover .mm-offcanvas__x { transform: rotate(90deg); }
.mm-modal__body, .mm-modal__done { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; }
.mm-modal__body[hidden], .mm-modal__done[hidden] { display: none; }
.mm-modal__rule { margin-top: 8px; }
.mm-modal__title { margin: 0; max-width: 460px; font-size: 17px; font-weight: 500; line-height: 1.5; letter-spacing: .5px; }
.mm-modal__form { width: 100%; text-align: left; gap: 22px; }
.mm-modal__form select { display: block; width: 100%; padding: 10px 0 12px; font: 400 15px/1.4 var(--mm-font); color: var(--mm-black); background: transparent; border: 0; border-radius: 0; outline: none; appearance: none; cursor: pointer;
	background-image: linear-gradient(45deg, transparent 50%, #000 50%), linear-gradient(135deg, #000 50%, transparent 50%); background-position: calc(100% - 9px) 55%, calc(100% - 4px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.mm-field.is-invalid { border-bottom-color: var(--mm-black); }
.mm-field.is-invalid::after { transform: scaleX(1); }
.mm-field__err { margin: 0; padding: 6px 0 2px; font-size: 12px; font-weight: 600; letter-spacing: .5px; color: var(--mm-black); }
.mm-field__err::before { content: "! "; font-weight: 700; }
.mm-modal__notice { margin: 0; }
.mm-form__ts { min-height: 65px; }
.mm-modal .mm-btn.is-busy { opacity: .5; pointer-events: none; }
@media (max-width: 767px) { .mm-modal__form .mm-form__row { grid-template-columns: 1fr; } .mm-modal__form .mm-form__row--cidade { grid-template-columns: 3fr 1fr; } }

/* ---------- 404 ---------- */
.mm-404 { min-height: 55vh; }
.mm-404__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }
@media (max-width: 1024px) { .mm-404__actions { justify-content: center; } }