/* ==============================================================
Ajustes próprios da Prime Pesca sobre o tema Marino.
Não editar os arquivos originais do tema (bootstrap.min.css,
style.css) — tudo que for necessário sobrescrever entra aqui,
carregado depois deles.
============================================================== */
/*
* A faixa do Newsletter (.subscribe.style1::after) é desenhada de propósito
* com width:140% em telas acima de 1500px — um "sangramento" decorativo pra
* fora do container, recortado só pelo overflow-x:hidden do no tema
* original. Esse padrão (overflow só no body, sem o ) é frágil,
* principalmente com elementos que usam transform (o próprio .subscribe.style1
* tem translateY) — o excesso pode escapar do recorte e alargar a página
* inteira. Reforçando no também, sem mudar nada do desenho.
*/
html {
overflow-x: hidden;
}
/*
* Preloader (tela de carregamento entre páginas, layouts/storefront.blade.php).
* O tema original tinha um botão "Cancelar" solto no canto superior
* esquerdo (.preloaderCls) — ele aparece antes da logo terminar de
* carregar (não depende de imagem, só de CSS), então em conexões mais
* lentas dava a impressão de que "o carregamento fica preso no canto".
* Removido (não faz sentido cancelar o carregamento de uma loja), a
* logo também saiu (só o anel giratório, maior e sozinho no centro) e
* trocamos o loader de blocos quadrados por esse anel suave.
* A centralização em si (.preloader-inner, absolute + translate) já
* era do tema e funcionava — o problema era só esse botão.
*/
.preloader {
display: flex;
align-items: center;
justify-content: center;
}
.site-preloader-spinner {
display: block;
width: 84px;
height: 84px;
margin: 0 auto;
border-radius: 50%;
border: 6px solid var(--border-color);
border-top-color: var(--theme-color);
animation: sitePreloaderSpin 0.8s linear infinite;
}
@keyframes sitePreloaderSpin {
to {
transform: rotate(360deg);
}
}
/*
* O tema define .form-control com border transparente por padrão
* (só fica visível quando o formulário está dentro de um contexto
* específico do template original, como .woocommerce-checkout).
* Nossas páginas (login, cadastro, contato, checkout, carrinho) não
* têm esse wrapper, então os campos ficavam sem borda visível.
*/
.form-control,
.form-select,
textarea.form-control {
border-color: var(--border-color);
border-radius: 6px;
}
.form-control:focus,
.form-select:focus {
border-color: var(--theme-color);
}
/*
* Paginação: os componentes Livewire usam o tema de paginação padrão
* do Bootstrap (classes .pagination/.page-item/.page-link), mas o
* tema Marino só estiliza sua própria marcação .vs-pagination. Sem
* isso, os botões ficam com o visual bruto do Bootstrap (esticados
* pelo flex-fill no bloco mobile, sem o tamanho/raio do tema).
* Aqui replicamos o visual de .vs-pagination em cima das classes
* padrão do Bootstrap, para não precisar customizar a view do Livewire.
*/
.pagination {
justify-content: center;
flex-wrap: wrap;
gap: 6px;
margin-top: 20px;
}
.pagination .page-item {
flex: 0 0 auto;
}
.pagination .page-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 46px;
padding: 0;
border: 1px solid var(--border-color);
border-radius: 6px;
font-family: var(--body-font);
font-weight: 700;
font-size: 15px;
color: var(--title-color);
background-color: var(--white-color);
}
.pagination .page-link:hover,
.pagination .page-item.active .page-link {
color: var(--white-color);
background-color: var(--theme-color);
border-color: var(--theme-color);
}
.pagination .page-item.disabled .page-link {
color: var(--body-color);
opacity: .5;
}
/* Botões "Anterior"/"Próximo" com texto (bloco mobile) não devem esticar. */
.pagination .page-link {
flex-grow: 0;
white-space: nowrap;
}
/*
* Selos de forma de pagamento no rodapé (faixa "Formas de pagamento").
* Não existe uma classe pronta no tema Marino para isso.
*/
.payment-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border: 1px solid var(--border-color);
border-radius: 30px;
font-size: 13px;
font-weight: 600;
color: var(--title-color);
background-color: var(--white-color);
}
.payment-badge-logo {
width: 18px;
height: 18px;
object-fit: contain;
}
/*
* O tema anima o hover do .vs-btn com um quadrado (::after) de cantos
* retos que cresce de scale(0) até cobrir o botão inteiro. Como o botão
* tem cantos arredondados mas o botão não recorta o conteúdo (sem
* overflow: hidden), esse quadrado aparece "vazando" para fora dos
* cantos por um instante — o efeito de "quadro" que aparece e o botão
* fica todo escuro. Aqui trocamos por um fade de opacidade simples,
* sem crescimento geométrico, recortado nos mesmos cantos do botão.
*/
.vs-btn {
overflow: hidden;
}
.vs-btn:after {
border-radius: inherit;
transform: none;
opacity: 0;
transition: opacity ease 0.3s;
}
.vs-btn:hover:after {
transform: none;
opacity: 1;
}
/*
* O tema só define "width: 100%" na foto de equipe via o seletor
* ".team-style1 .team-img a img" — ou seja, exige um envolvendo a
* imagem. Nossa marcação não tem esse (não existe página de detalhe
* do membro), então nenhuma regra de tamanho do tema chegava a valer: a
* foto renderizava no tamanho original do arquivo enviado (ex.: uma foto
* de celular de milhares de pixels), estourando o card e quebrando a
* grade inteira da home. Aqui força o recorte certo direto no ![]()
,
* sem depender do , e numa proporção fixa (5:6, igual à recomendada
* no upload) — assim qualquer foto enviada fica cortada de forma
* consistente, nunca estoura o layout.
*/
.team-style1 .team-img {
aspect-ratio: 5 / 6;
overflow: hidden;
}
.team-style1 .team-img img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: all 0.5s ease;
}
.team-style1:hover .team-img img {
transform: scale(1.2);
}
/*
* Título das páginas internas da loja (produto, quem somos, contato,
* conta, checkout, políticas etc). O tema usa o .breadcumb-wrapper
* padrão pra isso — uma faixa azul enorme com imagem de fundo e
* padding-top de 255px — que empurrava o conteúdo pra muito longe do
* menu e piorava bastante no mobile. Aqui trocamos por um título
* simples, sem fundo, colado perto do menu. Usado via o partial
* resources/views/livewire/storefront/partials/page-title.blade.php,
* incluído em toda página que antes usava o .breadcumb-wrapper.
*
* O padding-top não pode ser pequeno demais: o header do tema
* (.vs-container1 .sticky-wrapper, logo + menu) é posicionado com
* position:absolute e "flutua" por cima do conteúdo abaixo dele (é
* por isso que o breadcumb-wrapper original precisava de tanto
* padding). Sem um mínimo aqui o título fica escondido atrás do
* menu. Valores medidos por breakpoint (altura real do menu
* flutuante) + uma folga pequena.
*/
.page-title-wrap {
padding-top: 130px;
padding-bottom: 8px;
}
@media (max-width: 991px) {
.page-title-wrap {
padding-top: 64px;
}
}
.page-title {
font-size: 32px;
color: var(--title-color);
margin-bottom: 0;
font-family: var(--title-font);
line-height: 1.2;
}
.page-title-crumbs {
display: flex;
flex-wrap: wrap;
gap: 4px 8px;
list-style: none;
margin: 6px 0 0;
padding: 0;
font-size: 14px;
color: var(--body-color);
}
.page-title-crumbs li {
display: flex;
align-items: center;
gap: 8px;
}
.page-title-crumbs li:not(:last-child):after {
content: "/";
margin-left: 8px;
color: var(--border-color);
}
.page-title-crumbs a {
color: var(--body-color);
}
.page-title-crumbs a:hover {
color: var(--theme-color);
}
@media (max-width: 767px) {
.page-title-wrap {
padding-top: 56px;
}
.page-title {
font-size: 24px;
}
}
/*
* Avisos de sessão (sucesso/erro) logo abaixo do header, em
* layouts/storefront.blade.php — ex.: "Produto adicionado ao
* carrinho" depois do redirect do botão "Adicionar ao carrinho".
* Precisam do mesmo respiro que .page-title-wrap pelo mesmo motivo:
* o menu flutuante do tema (position:absolute) cobre essa área e
* escondia o aviso por trás dele.
*/
.site-flash-alerts {
padding-top: 130px;
}
.site-flash-alerts .alert:last-child {
margin-bottom: 0;
}
@media (max-width: 991px) {
.site-flash-alerts {
padding-top: 64px;
}
}
@media (max-width: 767px) {
.site-flash-alerts {
padding-top: 56px;
}
}
/* Quando o aviso já limpou o menu flutuante, o título logo em seguida não precisa repetir o respiro todo. */
.site-flash-alerts + .container .page-title-wrap {
padding-top: 16px;
}
/*
* Galeria de fotos do produto (/produto/{slug}): zoom no hover, clique
* abre lightbox em tela cheia (também com zoom) e setas de navegação
* quando há mais de uma foto. Tudo em JS puro, sem depender de nenhuma
* lib do tema — Slick e Magnific Popup não cobrem esse comportamento.
* O bloco inteiro roda dentro de wire:ignore (ver show.blade.php) para
* o Livewire nunca sobrescrever o estado da galeria num re-render.
*/
.product-gallery-main {
position: relative;
aspect-ratio: 1 / 1;
border-radius: 12px;
overflow: hidden;
background-color: var(--smoke-color, #f7f7f7);
cursor: zoom-in;
}
.product-gallery-zoom {
position: absolute;
inset: 0;
overflow: hidden;
}
.product-gallery-img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
transition: transform .25s ease, opacity .2s ease;
will-change: transform;
}
@media (hover: hover) {
.product-gallery-main:hover .product-gallery-img {
transform: scale(2);
}
}
.product-gallery-img.is-fading {
opacity: 0;
}
.product-gallery-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 42px;
height: 42px;
border-radius: 50%;
border: none;
background: rgba(255, 255, 255, .9);
color: var(--title-color);
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
cursor: pointer;
z-index: 3;
opacity: 0;
transition: opacity .2s ease, background-color .2s ease, color .2s ease;
}
.product-gallery-main:hover .product-gallery-nav,
.product-gallery-nav:focus-visible {
opacity: 1;
}
.product-gallery-nav:hover {
background-color: var(--theme-color);
color: var(--white-color);
}
.product-gallery-nav.prev {
left: 14px;
}
.product-gallery-nav.next {
right: 14px;
}
.product-gallery-counter {
position: absolute;
left: 14px;
bottom: 14px;
padding: 4px 12px;
border-radius: 20px;
background: rgba(0, 0, 0, .55);
color: #fff;
font-size: 12px;
font-weight: 600;
letter-spacing: .3px;
z-index: 3;
}
.product-gallery-expand {
position: absolute;
right: 14px;
bottom: 14px;
width: 38px;
height: 38px;
border-radius: 50%;
border: none;
background: rgba(255, 255, 255, .9);
color: var(--title-color);
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
cursor: pointer;
z-index: 3;
transition: background-color .2s ease, color .2s ease;
}
.product-gallery-expand:hover {
background-color: var(--theme-color);
color: var(--white-color);
}
.product-gallery-thumbs {
display: flex;
flex-wrap: wrap;
gap: 10px;
margin-top: 12px;
}
.product-gallery-thumb {
width: 72px;
height: 72px;
padding: 0;
border-radius: 8px;
border: 2px solid transparent;
overflow: hidden;
background: var(--smoke-color, #f7f7f7);
cursor: pointer;
transition: border-color .2s ease, opacity .2s ease;
opacity: .7;
}
.product-gallery-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.product-gallery-thumb:hover {
opacity: 1;
}
.product-gallery-thumb.active {
border-color: var(--theme-color);
opacity: 1;
}
/* Lightbox em tela cheia (aberto pelo clique na foto ou no botão de ampliar) */
.product-lightbox {
position: fixed;
inset: 0;
z-index: 99999;
background: rgba(10, 10, 10, .94);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity .25s ease;
}
.product-lightbox.is-open {
opacity: 1;
visibility: visible;
}
.product-lightbox-stage {
width: min(90vw, 1100px);
height: min(85vh, 900px);
overflow: hidden;
position: relative;
display: flex;
align-items: center;
justify-content: center;
cursor: zoom-in;
touch-action: pan-y;
}
.product-lightbox-stage.is-zoomed {
cursor: zoom-out;
}
.product-lightbox-img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
transition: transform .2s ease, opacity .2s ease;
user-select: none;
-webkit-user-drag: none;
}
.product-lightbox-stage.is-zoomed .product-lightbox-img {
transform: scale(2.2);
transition: none;
}
.product-lightbox-close,
.product-lightbox-nav {
position: absolute;
border: none;
background: rgba(255, 255, 255, .12);
color: #fff;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color .2s ease;
z-index: 2;
}
.product-lightbox-close:hover,
.product-lightbox-nav:hover {
background: var(--theme-color);
}
.product-lightbox-close {
top: 20px;
right: 20px;
width: 44px;
height: 44px;
font-size: 16px;
}
.product-lightbox-nav {
top: 50%;
transform: translateY(-50%);
width: 52px;
height: 52px;
font-size: 18px;
}
.product-lightbox-nav.prev {
left: 20px;
}
.product-lightbox-nav.next {
right: 20px;
}
.product-lightbox-counter {
position: absolute;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
color: #fff;
font-size: 13px;
font-weight: 600;
background: rgba(255, 255, 255, .12);
padding: 6px 16px;
border-radius: 20px;
}
@media (max-width: 767px) {
.product-gallery-nav,
.product-gallery-expand {
opacity: 1;
}
.product-lightbox-nav {
width: 42px;
height: 42px;
font-size: 15px;
}
}