/* Tema Mare (premium, 4a onda): surf shop com cara de lookbook - areia, azul-oceano e petroleo, Fraunces nos titulos
   e Manrope no texto. Topo da familia "hamburguer": o menu e uma gaveta azul de tela cheia com os itens em serifa grande,
   tambem no computador. Carrossel de foto inteira com o texto do editor por cima, foto com o look marcado, mosaico assimetrico,
   cartoes com o nome e o preco sobre a foto, boletim das ondas e rodape de uma linha so. Carregado depois do Vitrine e do premium.css. */

.tema-mare { --mr-mar: var(--loja, #0f6e78); --mr-fundo: var(--titulos, #0d2b33); --mr-areia: #f6f1e8; --mr-areia2: #ece4d6; --mr-sol: #f2a65a; --mr-linha: #e0d6c4; }
body.tema-mare { background: var(--mr-areia); }

/* ---------- topo enxuto: Menu | logotipo | busca e icones */
.mr-topo .vt-aviso { font-size: 12px; letter-spacing: .08em; }
.mr-topo .vt-barra { border-bottom: 1px solid var(--mr-linha); }
.mr-topo .vt-marca img { width: auto; height: var(--logo-altura, 52px); max-width: 260px; border: 0; border-radius: 0; background: none; object-fit: contain; }
.mr-menu-btn { display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px 9px 14px; border: 1px solid var(--mr-fundo); border-radius: 999px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mr-fundo); cursor: pointer; }
.mr-menu-btn i { font-size: 18px; }
.mr-menu-btn:hover { background: var(--mr-fundo); color: var(--mr-areia); }
body.vitrine .mr-topo .vt-busca input { height: 40px; border: 0; border-bottom: 1px solid var(--mr-fundo); border-radius: 0; background: transparent; }
body.vitrine .mr-topo .vt-busca button { background: transparent !important; color: var(--mr-fundo) !important; }
.mr-topo .vt-acao:hover { background: transparent; color: var(--mr-mar) !important; }
.mr-topo .vt-sacola .counter { background: var(--mr-mar); }
@media (min-width: 992px) {
	.mr-topo .vt-barra .container { position: relative; min-height: 88px; gap: 22px; }
	.mr-topo .vt-marca { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
	body.vitrine .mr-topo .vt-busca { flex: 0 1 220px; margin: 0 0 0 auto; }
	/* gaveta azul de tela cheia (o script do topo leva o menu para o <body> enquanto aberto) */
	body.vitrine.tema-mare .vt-menu { position: fixed; top: 0; left: 0; bottom: 0; z-index: 10001; width: min(520px, 92vw); margin: 0; padding: 0; border: 0; background: var(--mr-fundo); transform: translateX(-105%); transition: transform .4s cubic-bezier(.2, .8, .2, 1); overflow-y: auto; }
	body.vitrine.tema-mare.vt-menu-aberto .vt-menu { transform: none; }
	body.vitrine.tema-mare .vt-menu .container { display: grid; align-content: start; gap: 0; width: auto; padding: 0 44px 40px; min-height: 0; overflow: visible; }
	body.vitrine.tema-mare .vt-menu-topo { display: flex !important; justify-content: space-between; align-items: center; padding: 30px 0 26px; color: var(--mr-sol); font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; }
	body.vitrine.tema-mare .vt-menu-topo button { width: 42px; height: 42px; border: 1px solid rgba(246, 241, 232, .3); border-radius: 50%; background: transparent; color: var(--mr-areia); }
	body.vitrine.tema-mare .vt-menu a, body.vitrine.tema-mare .vt-menu .vt-menu-item { padding: 10px 0; border-radius: 0; background: transparent !important; color: var(--mr-areia) !important; font-family: var(--fonte-titulos), serif; font-size: 34px; font-weight: 400; line-height: 1.15; }
	body.vitrine.tema-mare .vt-menu a:hover { color: var(--mr-sol) !important; font-style: italic; }
	body.vitrine.tema-mare .vt-menu-dep { display: none; }
	body.vitrine.tema-mare .vt-menu-cat > a i { display: none; }
	body.vitrine.tema-mare .vt-menu-cat-lista { display: grid; position: static; padding: 0 0 8px; min-width: 0; max-height: none; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
	body.vitrine.tema-mare .vt-menu-cat-lista a { padding: 5px 0 !important; font-family: var(--fonte), sans-serif !important; font-size: 15px !important; color: #a9c3c4 !important; }
	body.vitrine.tema-mare.vt-menu-aberto .vt-menu-veu { display: block; position: fixed; inset: 0; z-index: 10000; background: rgba(13, 43, 51, .45); }
}

/* ---------- carrossel de foto inteira, texto do editor por cima */
body.vitrine.tema-mare .hdl-car h2, body.vitrine.tema-mare .hdl-car-titulo { font-family: var(--fonte-titulos), serif; font-size: clamp(42px, 6vw, 88px); font-weight: 400; font-style: italic; line-height: .95; letter-spacing: -.02em; }

/* ---------- titulos de secao em serifa italica */
.tema-mare .vt-secao-cab h2 { font-size: 40px; font-style: italic; font-weight: 400 !important; letter-spacing: -.02em; color: var(--mr-fundo); }
.tema-mare .vt-secao-cab a { color: var(--mr-mar) !important; font-weight: 700; }

/* ---------- cartao lookbook: so a foto; nome e preco aparecem por cima ao passar o mouse */
.tema-mare .vt-card { position: relative; border: 0; border-radius: 4px; background: transparent; box-shadow: none !important; overflow: hidden; }
.tema-mare .vt-card-img { aspect-ratio: 4 / 5; border-radius: 4px; background: var(--mr-areia2); }
.tema-mare .vt-card-info { padding: 12px 2px 0; }
.tema-mare .ppc-marca { display: none; }
.tema-mare .vt-card-nome { font-size: 14px; font-weight: 600; color: var(--mr-fundo); }
.tema-mare .vt-card-preco strong { font-size: 15px; font-weight: 800; color: var(--mr-fundo); }
.tema-mare .vt-card-botao, .tema-mare .ppc .ppc-ver { display: none; }
@media (min-width: 992px) {
	.tema-mare .vt-card-info { position: absolute; left: 10px; right: 10px; bottom: 10px; z-index: 2; padding: 14px 16px; border-radius: 4px; background: rgba(246, 241, 232, .94); transform: translateY(calc(100% + 14px)); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
	.tema-mare .vt-card:hover .vt-card-info, .tema-mare .vt-card:focus-visible .vt-card-info { transform: none; }
	.tema-mare .vt-card::after { content: attr(title); position: absolute; left: 14px; bottom: 14px; right: 14px; z-index: 1; color: var(--mr-fundo); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .2s; }
	.tema-mare .vt-card:hover::after { opacity: 0; }
}
.tema-mare .vt-selo { border-radius: 999px; background: var(--mr-sol); color: var(--mr-fundo); font-weight: 800; }

/* ---------- look marcado e mosaico assimetrico */
.tema-mare .hdl-look { align-items: center; }
.tema-mare .hdl-look-foto { aspect-ratio: 760 / 1100; height: auto; max-height: 86vh; margin: 0 auto; }
body.vitrine.tema-mare .hdl-look-foto img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: center top; }
.tema-mare .hdl-look-ponto { background: var(--mr-sol); box-shadow: 0 0 0 6px rgba(242, 166, 90, .35); }
body.vitrine.tema-mare .hdl-look h2 { font-family: var(--fonte-titulos), serif; font-size: 52px; font-style: italic; font-weight: 400; }
.tema-mare .hdl-mos { gap: 10px; }
.tema-mare .hdl-mos a, .tema-mare .hdl-mos-img { border-radius: 4px; }
body.vitrine.tema-mare .hdl-mos-sobre b, body.vitrine.tema-mare .hdl-mos-sobre span { font-family: var(--fonte-titulos), serif; font-size: 30px; font-style: italic; font-weight: 400; }

/* ---------- boletim das ondas (bloco Destaques) */
.mr-boletim { position: relative; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 50px; align-items: center; padding: 56px; border-radius: 4px; overflow: hidden; color: var(--mr-areia); background: var(--mr-fundo); }
.mr-boletim::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 44px; background: radial-gradient(28px 20px at 28px 0, transparent 96%, var(--mr-mar) 100%) 0 0 / 56px 44px repeat-x; opacity: .55; }
.mr-boletim-cab small { display: inline-flex; align-items: center; gap: 8px; color: var(--mr-sol); font-size: 12px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
body.vitrine .mr-boletim-cab h2 { margin: 10px 0 8px; font-family: var(--fonte-titulos), serif; font-size: 56px; font-style: italic; font-weight: 400; line-height: 1; color: var(--mr-areia); }
.mr-boletim-cab p { margin: 0 0 20px; color: #a9c3c4; }
.mr-selo { display: inline-block; margin-bottom: 20px; padding: 6px 14px; border-radius: 999px; background: #2e8b57; color: #fff; font-size: 12.5px; font-weight: 800; }
.mr-boletim-botao { display: inline-flex; padding: 13px 26px; border-radius: 999px; background: var(--mr-sol); color: var(--mr-fundo) !important; font-weight: 800; text-decoration: none !important; }
.mr-medidas { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border-radius: 4px; overflow: hidden; background: rgba(246, 241, 232, .14); }
.mr-medida { display: grid; gap: 4px; padding: 24px; background: var(--mr-fundo); color: inherit; text-decoration: none; }
.mr-medida small { color: #a9c3c4; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.mr-medida b { font-family: var(--fonte-titulos), serif; font-size: 40px; font-weight: 400; line-height: 1.05; color: var(--mr-areia); }
.mr-medida span { color: #a9c3c4; font-size: 14px; }

/* ---------- carrinho: a mare subindo na escotilha */
.mr-frete { display: flex; align-items: center; gap: 18px; padding: 14px 20px; border-radius: 4px; background: #fff; border: 1px solid var(--mr-linha); }
.mr-frete p { margin: 0; color: var(--mr-fundo); }
.mr-escotilha { position: relative; flex: none; width: 46px; height: 46px; border: 3px solid var(--mr-fundo); border-radius: 50%; overflow: hidden; background: var(--mr-areia2); }
.mr-escotilha i { position: absolute; left: 0; right: 0; bottom: 0; background: var(--mr-mar); transition: height .6s; }
.mr-escotilha i::before { content: ""; position: absolute; left: -10%; right: -10%; top: -5px; height: 10px; border-radius: 50%; background: var(--mr-mar); }

/* ---------- rodape: horizonte e tudo numa linha */
.mr-horizonte { position: relative; height: 90px; overflow: hidden; background: linear-gradient(180deg, var(--mr-areia) 0, #f6d8b5 100%); }
.mr-horizonte i { position: absolute; left: 50%; bottom: -46px; width: 92px; height: 92px; margin-left: -46px; border-radius: 50%; background: var(--mr-sol); }
.mr-horizonte::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: var(--mr-fundo); }
.mr-linha-frase { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 30px; padding-top: 34px; padding-bottom: 18px; }
.mr-linha-frase p { margin: 0; font-family: var(--fonte-titulos), serif; font-size: 30px; font-style: italic; color: var(--mr-areia); }
.mr-linha-frase span { color: #a9c3c4; font-size: 13px; }
@media (min-width: 992px) {
	.mr-rodape .vt-rodape-grade { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; padding-top: 18px; padding-bottom: 18px; border-top: 1px solid rgba(246, 241, 232, .12); }
	.mr-rodape .vt-rodape-grade > div { display: contents; }
	.mr-rodape .vt-rodape-grade h3, .mr-rodape .vt-rodape-loja .vt-marca, .mr-rodape .vt-rodape-loja > p, .mr-rodape .vt-rodape-contato p { display: none; }
	.mr-rodape .vt-rodape-grade a { font-size: 13px; }
	.mr-rodape .vt-rodape-faixa { padding-top: 10px; }
}

@media (max-width: 991px) {
	.mr-boletim { grid-template-columns: 1fr; gap: 26px; padding: 36px 22px 60px; }
	body.vitrine .mr-boletim-cab h2 { font-size: 40px; }
	.mr-medida b { font-size: 30px; }
	.tema-mare .vt-secao-cab h2 { font-size: 30px; }
}