/* Locomotiva Obras: tokens do Identidade (--brand-*) com valores de reserva. */
.lob-visor, .lob-ficha, .lob-preco, .lob-tecnica, .lob-lista, .lob-assinatura, .lob-obra-embutida {
	--lob-tinta: var(--brand-black, #060015);
	--lob-suave: color-mix(in srgb, var(--brand-black, #060015) 62%, transparent);
	--lob-linha: #CCC7BE;
	--lob-creme: var(--brand-cream, #FEF3DE);
	--lob-creme-claro: var(--brand-cream-soft, #FFFEEE);
	--lob-amarelo: var(--brand-yellow, #FEBC0F);
	--lob-azul: var(--brand-teal, #0B4255);
	--lob-texto: 'DM Sans', system-ui, sans-serif;
	--lob-titulo: 'Anton', 'DM Sans', sans-serif;
	font-family: var(--lob-texto);
	color: var(--lob-tinta);
}

/* ---------- Página do produto (Astra clássico) ---------- */
.lob-pagina-obra div.product::after { content: ''; display: table; clear: both; }
.lob-pagina-obra div.product .lob-visor { float: left; width: 56%; margin: 0 0 3rem; }
.lob-pagina-obra div.product .summary { float: right; width: 38%; }
.lob-pagina-obra div.product .product_title { font-family: var(--lob-titulo, 'Anton', sans-serif); font-weight: 400; text-transform: uppercase; line-height: 1; font-size: clamp(2.2rem, 4vw, 3.6rem); margin-bottom: .4rem; }
.lob-pagina-obra .woocommerce-tabs { clear: both; }
@media (max-width: 921px) {
	.lob-pagina-obra div.product .lob-visor, .lob-pagina-obra div.product .summary { float: none; width: 100%; }
}
.lob-assinatura { font-size: 1.05rem; margin: 0 0 1.4rem; color: var(--lob-suave); }

/* ---------- Visor ---------- */
.lob-visor { position: relative; }
.lob-modos { display: inline-flex; gap: 2px; padding: 3px; margin-bottom: .9rem; border-radius: 999px; background: color-mix(in srgb, var(--lob-tinta) 7%, transparent); }
.lob-modo { appearance: none; border: 0; background: transparent; color: var(--lob-tinta); font: 500 .85rem/1 var(--lob-texto); letter-spacing: .04em; padding: .65rem 1.1rem; border-radius: 999px; cursor: pointer; min-height: 40px; }
.lob-modo[aria-selected="true"] { background: var(--lob-tinta); color: var(--lob-creme-claro); }
.lob-modo:focus-visible, .lob-mini:focus-visible, .lob-palco-botao:focus-visible, .lob-referencias button:focus-visible { outline: 2px solid var(--lob-amarelo); outline-offset: 2px; }

.lob-palco { margin: 0; }
.lob-palco-botao { display: grid; place-items: center; position: relative; width: 100%; padding: clamp(1rem, 3vw, 2.5rem); border: 0; border-radius: 4px; background: #fff; cursor: zoom-in; aspect-ratio: 1 / 1; }
.lob-palco-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; transition: opacity .25s ease; }
.lob-palco-img.is-trocando { opacity: .35; }
.lob-lupa { position: absolute; right: .8rem; bottom: .8rem; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--lob-creme-claro); color: var(--lob-tinta); box-shadow: 0 1px 4px rgba(6, 0, 21, .18); }
.lob-legenda { min-height: 1.2em; margin-top: .5rem; font-size: .85rem; color: var(--lob-suave); }
.lob-legenda:empty { display: none; }

.lob-miniaturas { display: flex; gap: .6rem; margin: .9rem 0 0; padding: 0 0 .3rem; list-style: none; overflow-x: auto; scrollbar-width: thin; }
.lob-miniaturas li { margin: 0; flex: 0 0 auto; }
.lob-mini { display: flex; flex-direction: column; gap: .35rem; width: 78px; padding: 0; border: 0; background: none; color: var(--lob-suave); font: 400 .72rem/1.2 var(--lob-texto); text-align: left; cursor: pointer; }
.lob-mini img { width: 78px; height: 78px; object-fit: cover; border-radius: 3px; background: #fff; outline: 1px solid var(--lob-linha); outline-offset: -1px; }
.lob-mini.is-ativa { color: var(--lob-tinta); }
.lob-mini.is-ativa img { outline: 2px solid var(--lob-tinta); outline-offset: 2px; }
.lob-dica { margin: .7rem 0 0; font-size: .8rem; color: var(--lob-suave); }

.lob-cena { width: 100%; border-radius: 4px; overflow: hidden; background: #EBE7DD; }
.lob-cena svg { display: block; width: 100%; height: 100%; }
.lob-referencias { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .8rem; }
.lob-referencias button { appearance: none; min-height: 36px; padding: .45rem .9rem; border: 1px solid var(--lob-linha); border-radius: 999px; background: transparent; color: var(--lob-tinta); font: 400 .8rem/1 var(--lob-texto); cursor: pointer; }
.lob-referencias button[aria-pressed="true"] { border-color: var(--lob-tinta); background: var(--lob-tinta); color: var(--lob-creme-claro); }

/* Zoom em tela cheia. */
.lob-zoom { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #060015; color: #FFFEEE; }
.lob-zoom::backdrop { background: rgba(6, 0, 21, .9); }
.lob-zoom[open] { display: flex; flex-direction: column; }
.lob-zoom-area { position: relative; flex: 1; overflow: hidden; touch-action: none; cursor: grab; }
.lob-zoom-area.is-arrastando { cursor: grabbing; }
.lob-zoom-area img { position: absolute; left: 0; top: 0; max-width: none; transform-origin: 0 0; user-select: none; -webkit-user-drag: none; }
.lob-zoom-barra { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .7rem; background: #060015; }
.lob-zoom-barra button { min-width: 44px; min-height: 44px; padding: 0 .9rem; border: 1px solid rgba(255, 254, 238, .3); border-radius: 999px; background: transparent; color: #FFFEEE; font: 500 1rem/1 'DM Sans', system-ui, sans-serif; cursor: pointer; }
.lob-zoom-barra .lob-zoom-fechar { margin-left: 1rem; background: #FEBC0F; border-color: #FEBC0F; color: #060015; }
.lob-zoom-nivel { min-width: 4.5ch; text-align: center; font: 400 .9rem 'DM Sans', system-ui, sans-serif; }
html.lob-sem-rolagem { overflow: hidden; }

/* ---------- Ficha ---------- */
.lob-ficha { margin: 1.6rem 0; }
.lob-ficha-titulo { margin: 0 0 .6rem; font: 500 .75rem/1 var(--lob-texto); letter-spacing: .12em; text-transform: uppercase; color: var(--lob-suave); }
.lob-ficha dl { margin: 0; border-top: 1px solid var(--lob-linha); }
.lob-ficha dl > div { display: grid; grid-template-columns: 9.5rem 1fr; gap: 1rem; padding: .6rem 0; border-bottom: 1px solid var(--lob-linha); }
.lob-ficha dt { font-size: .82rem; color: var(--lob-suave); }
.lob-ficha dd { margin: 0; font-size: .95rem; }
.lob-ficha a { color: inherit; text-decoration-color: var(--lob-amarelo); text-underline-offset: 3px; }
@media (max-width: 480px) { .lob-ficha dl > div { grid-template-columns: 1fr; gap: .15rem; } }

/* ---------- Preço discreto e marcações ---------- */
.lob-preco { margin: 1.4rem 0 1.2rem; }
.lob-preco p { margin: 0; }
.lob-preco-rotulo { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--lob-suave); }
.lob-preco-valor { font-size: 1.1rem; font-weight: 400; margin-top: .2rem !important; }
.lob-preco-valor .amount, .lob-preco-valor bdi { font-weight: 400; }
.lob-preco-marca { display: inline-flex; align-items: center; gap: .55rem; font-size: .95rem; font-weight: 500; letter-spacing: .01em; }
.lob-preco-marca::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--lob-amarelo); }
.lob-preco--vendida .lob-preco-marca::before { background: var(--lob-tinta); }
.lob-preco--reservada .lob-preco-marca::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--lob-tinta); }
.lob-preco-nota { margin-top: .45rem !important; max-width: 34em; font-size: .88rem; line-height: 1.5; color: var(--lob-suave); }
.lob-conversa { display: inline-block; margin-top: .8rem; font-size: .92rem; font-weight: 500; color: var(--lob-tinta); text-decoration: underline; text-decoration-color: var(--lob-amarelo); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.lob-conversa:hover { text-decoration-color: var(--lob-tinta); }
.lob-marca-curta { font-size: .85em; font-weight: 400; color: var(--lob-suave); }

/* ---------- Técnica e materiais ---------- */
.lob-tecnica { clear: both; margin: 2rem 0 3rem; padding: clamp(1.5rem, 4vw, 3rem); background: var(--lob-creme); border-radius: 4px; }
.lob-tecnica-titulo { margin: 0 0 1.2rem; font: 400 clamp(1.8rem, 3.2vw, 2.6rem)/1 var(--lob-titulo); text-transform: uppercase; }
.lob-tecnica-corpo { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
.lob-tecnica-texto p { margin: 0 0 1em; line-height: 1.6; }
.lob-materiais { display: flex; flex-wrap: wrap; gap: .45rem; margin: 0; padding: 0; list-style: none; }
.lob-materiais li { margin: 0; padding: .45rem .8rem; border: 1px solid var(--lob-tinta); border-radius: 999px; font-size: .85rem; }
@media (max-width: 760px) { .lob-tecnica-corpo { grid-template-columns: 1fr; } }

/* ---------- Lista de obras ---------- */
.lob-lista { display: grid; grid-template-columns: repeat(var(--lob-colunas, 3), minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); margin: 2rem 0; padding: 0; list-style: none; }
@media (max-width: 921px) { .lob-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 544px) { .lob-lista { grid-template-columns: 1fr; } }
.lob-cartao { margin: 0; }
.lob-cartao-link { display: flex; flex-direction: column; gap: .9rem; color: inherit; text-decoration: none; }
.lob-cartao-moldura { display: grid; place-items: center; aspect-ratio: 4 / 5; padding: 8%; background: var(--lob-creme-claro); border-radius: 4px; overflow: hidden; }
.lob-cartao-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; box-shadow: 0 10px 24px -14px rgba(6, 0, 21, .45); transition: transform .35s ease; }
.lob-cartao-img.is-redonda { border-radius: 50%; }
.lob-cartao-link:hover .lob-cartao-img { transform: scale(1.025); }
.lob-cartao-texto { display: flex; flex-direction: column; gap: .2rem; }
.lob-cartao-artista { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--lob-suave); }
.lob-cartao-titulo { font-size: 1.1rem; font-weight: 500; line-height: 1.25; }
.lob-cartao-ano { font-weight: 400; color: var(--lob-suave); }
.lob-cartao-meta { font-size: .85rem; color: var(--lob-suave); }
.lob-cartao .lob-preco { margin: .35rem 0 0; }
.lob-cartao .lob-preco-valor { font-size: .95rem; margin: 0 !important; }
.lob-cartao .lob-preco-marca { font-size: .85rem; font-weight: 400; color: var(--lob-suave); }
.lob-cartao-mais { margin-top: .4rem; font-size: .88rem; font-weight: 500; text-decoration: underline; text-decoration-color: var(--lob-amarelo); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.lob-lista-vazia { color: var(--lob-suave); }

/* ---------- [locomotiva_obra] ---------- */
.lob-obra-embutida { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; margin: 2rem 0; }
.lob-obra-titulo { margin: 0 0 1rem; font: 400 clamp(2rem, 3.5vw, 3rem)/1 var(--lob-titulo); text-transform: uppercase; }
.lob-obra-titulo a { color: inherit; text-decoration: none; }
@media (max-width: 760px) { .lob-obra-embutida { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) { .lob-palco-img, .lob-cartao-img { transition: none; } }
