/* =========================================================
PELISSARI — LOJA PREMIUM (LIGHT LUXURY) + VISIBILIDADE ALTA
Aplicação: SOMENTE WooCommerce (loja / produto / carrinho / checkout)
========================================================= */
/* ---------- Tokens (luxo claro) ---------- */
:root{
--pel-ivory:#F7F2EC;
--pel-ivory2:#EFE6DD;
--pel-ink:#2A241E;
--pel-muted: rgba(42,36,30,.72);
--pel-gold:#C9A46A;
--pel-gold2:#A1790F;
--pel-line: rgba(42,36,30,.12);
--pel-glass: rgba(255,255,255,.72);
--r-xl: 26px;
--r-lg: 20px;
--r-md: 16px;
--shadow-lg: 0 26px 80px rgba(0,0,0,.14);
--shadow-md: 0 16px 46px rgba(0,0,0,.10);
--shadow-sm: 0 10px 28px rgba(0,0,0,.08);
--focus: 0 0 0 3px rgba(201,164,106,.28);
}
/* =========================================================
1) BASE: só WooCommerce fica claro
========================================================= */
body.woocommerce,
body.woocommerce-page{
background: linear-gradient(180deg, var(--pel-ivory), var(--pel-ivory2)) !important;
color: var(--pel-ink) !important;
}
/* mata “tela branca quebrada”/wrappers */
body.woocommerce #page,
body.woocommerce .site,
body.woocommerce .site-content,
body.woocommerce #content,
body.woocommerce #primary,
body.woocommerce #main,
body.woocommerce .content-area,
body.woocommerce .entry-content,
body.woocommerce .elementor,
body.woocommerce .elementor-section,
body.woocommerce .elementor-container,
body.woocommerce .e-con,
body.woocommerce .e-con-inner{
background: transparent !important;
}
/* canvas claro elegante */
body.woocommerce::before{
content:"";
position: fixed;
inset: 0;
z-index: -1;
background:
radial-gradient(900px 520px at 18% 14%, rgba(201,164,106,.16), transparent 62%),
radial-gradient(900px 520px at 84% 20%, rgba(61,10,8,.08), transparent 64%),
linear-gradient(180deg, var(--pel-ivory), var(--pel-ivory2));
}
/* =========================================================
2) MENU (Woo) — versão clara + shrink no scroll
========================================================= */
body.woocommerce .pel-nav,
body.woocommerce-page .pel-nav{
/* mantém seu menu, só muda skin na loja */
}
body.woocommerce .pel-nav__inner,
body.woocommerce-page .pel-nav__inner{
background: linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.68)) !important;
border: 1px solid rgba(42,36,30,.10) !important;
box-shadow: 0 16px 52px rgba(0,0,0,.12) !important;
backdrop-filter: blur(16px) saturate(120%) !important;
-webkit-backdrop-filter: blur(16px) saturate(120%) !important;
}
body.woocommerce .pel-nav__links a,
body.woocommerce-page .pel-nav__links a{
color: rgba(42,36,30,.76) !important;
}
body.woocommerce .pel-nav__links a:hover,
body.woocommerce-page .pel-nav__links a:hover{
color: rgba(42,36,30,.95) !important;
background: rgba(42,36,30,.06) !important;
}
body.woocommerce .pel-nav__cta,
body.woocommerce-page .pel-nav__cta{
color: #140e0b !important;
border-color: rgba(201,164,106,.42) !important;
background: linear-gradient(180deg, rgba(201,164,106,.96), rgba(201,164,106,.74)) !important;
box-shadow: 0 12px 34px rgba(0,0,0,.14) !important;
}
/* ---- shrink (desktop) ---- */
@media (min-width: 769px){
body.pel-nav--shrink .pel-nav{
padding: 4px clamp(10px, 2vw, 18px) !important;
}
body.pel-nav--shrink .pel-nav__inner{
padding: 6px 10px !important;
gap: 10px !important;
}
body.pel-nav--shrink .pel-nav__logo img{
width: 108px !important;
}
body.pel-nav--shrink .pel-nav__links a{
padding: 5px 7px !important;
font-size: 10px !important;
letter-spacing: .10em !important;
line-height: 1 !important;
}
body.pel-nav--shrink .pel-nav__cta{
padding: 6px 9px !important;
font-size: 9.5px !important;
letter-spacing: .12em !important;
line-height: 1 !important;
}
}
/* =========================================================
3) VITRINE: grid + card premium Woo
========================================================= */
/* largura e respiro */
body.woocommerce .site-main,
body.woocommerce-page .site-main{
padding-top: 14px;
}
/* grid */
.woocommerce ul.products{
display: grid !important;
gap: 16px !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
@media (max-width: 1024px){
.woocommerce ul.products{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 820px){
.woocommerce ul.products{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 520px){
.woocommerce ul.products{ grid-template-columns: 1fr !important; }
}
/* card */
.woocommerce ul.products li.product{
border-radius: var(--r-xl) !important;
border: 1px solid var(--pel-line) !important;
background: rgba(255,255,255,.70) !important;
box-shadow: var(--shadow-md) !important;
padding: 14px 14px 16px !important;
overflow: hidden !important;
transform: translateZ(0);
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
}
.woocommerce ul.products li.product:hover{
transform: translateY(-2px);
border-color: rgba(201,164,106,.26) !important;
box-shadow: var(--shadow-lg) !important;
filter: saturate(1.02);
}
/* “glow” discreto */
.woocommerce ul.products li.product::after{
content:"";
position:absolute;
inset:-2px;
background: radial-gradient(520px 240px at 75% 18%, rgba(201,164,106,.16), transparent 58%);
opacity: .0;
pointer-events:none;
transition: opacity .18s ease;
}
.woocommerce ul.products li.product:hover::after{ opacity: .9; }
/* imagem limpa tipo e-commerce */
.woocommerce ul.products li.product a img{
border-radius: 18px !important;
background: linear-gradient(180deg, rgba(247,242,236,.95), rgba(239,230,221,.80)) !important;
border: 1px solid rgba(42,36,30,.08) !important;
padding: 12px !important;
margin-bottom: 10px !important;
}
/* título */
.woocommerce ul.products li.product .woocommerce-loop-product__title{
color: rgba(42,36,30,.94) !important;
font-weight: 750 !important;
letter-spacing: -.01em;
font-size: 18px !important;
line-height: 1.15 !important;
margin: 8px 0 6px !important;
}
/* preço (contraste + “luxo”) */
.woocommerce ul.products li.product .price{
color: rgba(42,36,30,.90) !important;
font-weight: 900 !important;
letter-spacing: .01em;
margin-bottom: 10px !important;
}
.woocommerce ul.products li.product .price ins{
color: rgba(42,36,30,.95) !important;
text-decoration: none !important;
}
/* botão */
.woocommerce ul.products li.product a.button{
width: 100% !important;
text-align: center !important;
border-radius: 999px !important;
padding: 12px 14px !important;
font-weight: 900 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
font-size: 12px !important;
border: 1px solid rgba(201,164,106,.46) !important;
background: linear-gradient(180deg, rgba(201,164,106,.95), rgba(201,164,106,.72)) !important;
color: #140e0b !important;
box-shadow: var(--shadow-sm) !important;
transition: transform .16s ease, filter .16s ease;
}
.woocommerce ul.products li.product a.button:hover{
filter: brightness(1.03);
transform: translateY(-1px);
}
.woocommerce ul.products li.product a.button:focus{ outline: none; box-shadow: var(--focus) !important; }
/* badge sale mais premium */
.woocommerce span.onsale{
border-radius: 999px !important;
padding: 8px 12px !important;
background: rgba(61,10,8,.92) !important;
color: rgba(255,255,255,.96) !important;
border: 1px solid rgba(201,164,106,.36) !important;
font-weight: 900 !important;
letter-spacing: .10em;
}
/* =========================================================
4) PÁGINA DO PRODUTO — leitura / hierarquia / CTA
========================================================= */
body.woocommerce div.product .product_title{
color: rgba(42,36,30,.95) !important;
letter-spacing: -.02em;
}
body.woocommerce div.product .price{
color: rgba(42,36,30,.92) !important;
font-weight: 900 !important;
}
body.woocommerce div.product form.cart .button{
border-radius: 999px !important;
padding: 14px 16px !important;
font-weight: 950 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
background: linear-gradient(180deg, rgba(201,164,106,.96), rgba(201,164,106,.74)) !important;
border: 1px solid rgba(201,164,106,.46) !important;
color: #140e0b !important;
box-shadow: var(--shadow-sm) !important;
}
body.woocommerce div.product .woocommerce-product-details__short-description{
color: rgba(42,36,30,.74) !important;
line-height: 1.7;
}
body.woocommerce .woocommerce-tabs ul.tabs li a{
color: rgba(42,36,30,.72) !important;
font-weight: 900 !important;
letter-spacing: .10em;
text-transform: uppercase;
font-size: 12px;
}
body.woocommerce .woocommerce-tabs ul.tabs li.active a{
color: rgba(42,36,30,.95) !important;
}
/* =========================================================
5) Forms / mensagens / acessibilidade
========================================================= */
.woocommerce input.input-text,
.woocommerce textarea,
.woocommerce select{
border-radius: 14px !important;
border: 1px solid rgba(42,36,30,.14) !important;
background: rgba(255,255,255,.78) !important;
padding: 12px 12px !important;
color: rgba(42,36,30,.92) !important;
}
.woocommerce input.input-text:focus,
.woocommerce textarea:focus,
.woocommerce select:focus{
outline: none !important;
box-shadow: var(--focus) !important;
border-color: rgba(201,164,106,.42) !important;
}
.woocommerce-message, .woocommerce-info, .woocommerce-error{
border-radius: var(--r-lg) !important;
background: rgba(255,255,255,.78) !important;
border: 1px solid rgba(201,164,106,.22) !important;
box-shadow: var(--shadow-sm) !important;
}
/* =========================================================
6) FIX: não deixar admin/Elementor atrapalhar edição
- quando estiver logado, não “cobre” barra do WP
========================================================= */
body.admin-bar .pel-nav{ top: 32px !important; }
@media (max-width: 782px){
body.admin-bar .pel-nav{ top: 46px !important; }
}
/* =========================================================
7) Reduced motion
========================================================= */
@media (prefers-reduced-motion: reduce){
*{ transition:none !important; animation:none !important; }
}
/* =========================================================
PELISSARI — LOJA LUXO (V2)
- melhora contraste do hero
- escala e respira melhor no desktop
- cards + botões + preço com cara de boutique
- NÃO quebra o resto do site
========================================================= */
/* Ativa só no universo Woo */
body.woocommerce,
body.woocommerce-page,
body.post-type-archive-product,
body.single-product,
body.woocommerce-cart,
body.woocommerce-checkout{
--pel-ivory: #fbf6f1;
--pel-ivory2:#f0e6de;
--pel-text: rgba(55,46,39,.92);
--pel-muted: rgba(55,46,39,.68);
--pel-line: rgba(55,46,39,.10);
--pel-gold: #a1790f;
--pel-gold2:#c9a46a;
--r-xl: 26px;
--r-lg: 20px;
--r-md: 16px;
--shadow-lg: 0 32px 90px rgba(0,0,0,.16);
--shadow-md: 0 18px 55px rgba(0,0,0,.12);
--shadow-sm: 0 10px 28px rgba(0,0,0,.10);
background:
radial-gradient(1200px 680px at 12% 6%, rgba(161,121,15,.10), transparent 62%),
radial-gradient(900px 520px at 92% 18%, rgba(61,10,8,.06), transparent 62%),
linear-gradient(180deg, var(--pel-ivory), var(--pel-ivory2)) !important;
color: var(--pel-text);
}
/* Remove brancos “boxed” do tema dentro do Woo */
body.woocommerce #page,
body.woocommerce #content,
body.woocommerce .site,
body.woocommerce .site-content,
body.woocommerce .content-area,
body.woocommerce .site-main,
body.woocommerce .entry-content{
background: transparent !important;
}
/* ============ HERO (a sua seção custom) ============ */
/* Se você usa .pel-shop e .pel-card como no seu HTML */
body.woocommerce .pel-shop.pel-section{
padding: clamp(22px, 3vw, 40px) 0 26px;
}
/* A “pílula card” do hero: mais presença, mais contraste */
body.woocommerce .pel-shop .pel-card{
background: rgba(255,255,255,.72) !important;
border: 1px solid var(--pel-line) !important;
box-shadow: var(--shadow-lg) !important;
backdrop-filter: blur(14px) saturate(120%);
-webkit-backdrop-filter: blur(14px) saturate(120%);
}
/* Kicker + título + lead (mais boutique / editorial) */
body.woocommerce .pel-kicker{
color: rgba(55,46,39,.72) !important;
letter-spacing: .22em !important;
font-weight: 700 !important;
}
body.woocommerce .pel-title{
color: rgba(55,46,39,.94) !important;
letter-spacing: -0.02em !important;
line-height: 1.02 !important;
text-wrap: balance;
font-size: clamp(34px, 3.6vw, 60px) !important;
}
body.woocommerce .pel-lead{
color: rgba(55,46,39,.74) !important;
line-height: 1.72 !important;
font-size: clamp(15px, 1.08vw, 18px) !important;
max-width: 68ch;
}
/* Botões do hero: mais “luxo” e legíveis */
body.woocommerce .pel-btn{
border-radius: 999px !important;
padding: 12px 16px !important;
font-weight: 900 !important;
letter-spacing: .14em !important;
text-transform: uppercase !important;
font-size: 12px !important;
}
body.woocommerce .pel-btn--gold{
background: linear-gradient(180deg, rgba(161,121,15,.92), rgba(161,121,15,.72)) !important;
border: 1px solid rgba(161,121,15,.38) !important;
color: #140e0b !important;
box-shadow: var(--shadow-sm) !important;
}
body.woocommerce .pel-btn--ghost{
background: rgba(255,255,255,.78) !important;
border: 1px solid rgba(55,46,39,.16) !important;
color: rgba(55,46,39,.88) !important;
box-shadow: var(--shadow-sm) !important;
}
/* Hero imagem: deixa mais “clean” e premium */
body.woocommerce [data-pel-bg]{
background-position: 60% 45% !important;
filter: saturate(.98) contrast(1.02) brightness(1.02);
}
/* Mobile: evita “hero grande demais” */
@media (max-width: 980px){
body.woocommerce .pel-shop .pel-card{
border-radius: 18px !important;
}
}
/* ============ GRID / CARDS DO WOOCOMMERCE ============ */
body.woocommerce ul.products{
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 16px !important;
}
@media (max-width: 1100px){
body.woocommerce ul.products{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 980px){
body.woocommerce ul.products{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 560px){
body.woocommerce ul.products{ grid-template-columns: 1fr !important; }
}
/* Card produto = boutique */
body.woocommerce ul.products li.product{
border-radius: var(--r-xl) !important;
border: 1px solid rgba(55,46,39,.10) !important;
background: rgba(255,255,255,.74) !important;
box-shadow: var(--shadow-md) !important;
overflow: hidden !important;
padding: 14px 14px 16px !important;
transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, filter .22s ease;
}
body.woocommerce ul.products li.product:hover{
transform: translateY(-3px);
border-color: rgba(161,121,15,.22) !important;
box-shadow: 0 30px 90px rgba(0,0,0,.16) !important;
filter: brightness(1.01);
}
/* Imagem: “packshot” com moldura suave */
body.woocommerce ul.products li.product a img{
border-radius: 18px !important;
background: linear-gradient(180deg, rgba(251,246,241,.95), rgba(240,230,222,.72)) !important;
padding: 10px !important;
border: 1px solid rgba(161,121,15,.12) !important;
}
/* Título e preço: legibilidade premium */
body.woocommerce ul.products li.product .woocommerce-loop-product__title{
font-size: 18px !important;
line-height: 1.18 !important;
color: rgba(55,46,39,.92) !important;
margin: 12px 0 6px !important;
font-weight: 750 !important;
}
body.woocommerce ul.products li.product .price{
color: rgba(55,46,39,.88) !important;
font-weight: 900 !important;
letter-spacing: .01em !important;
margin-bottom: 10px !important;
}
/* Botão add: mais “luxo” + maior área clicável */
body.woocommerce ul.products li.product a.button{
width: 100% !important;
text-align: center !important;
border-radius: 999px !important;
padding: 12px 14px !important;
font-weight: 950 !important;
letter-spacing: .16em !important;
text-transform: uppercase !important;
font-size: 11px !important;
border: 1px solid rgba(161,121,15,.38) !important;
background: linear-gradient(180deg, rgba(161,121,15,.90), rgba(161,121,15,.68)) !important;
color: #140e0b !important;
box-shadow: var(--shadow-sm) !important;
}
body.woocommerce ul.products li.product a.button:hover{
filter: brightness(1.04);
transform: translateY(-1px);
}
/* ============ SINGLE PRODUCT (produto interno) ============ */
body.single-product div.product{
padding-top: 10px;
}
body.single-product .summary{
color: rgba(55,46,39,.88);
}
body.single-product .product_title{
color: rgba(55,46,39,.94) !important;
letter-spacing: -0.02em;
}
body.single-product .price{
color: rgba(161,121,15,.90) !important;
font-weight: 950 !important;
}
/* Tabs mais sofisticadas */
body.single-product .woocommerce-tabs ul.tabs li a{
letter-spacing: .14em !important;
text-transform: uppercase !important;
font-size: 11px !important;
font-weight: 900 !important;
color: rgba(55,46,39,.68) !important;
}
body.single-product .woocommerce-tabs ul.tabs li.active a{
color: rgba(55,46,39,.92) !important;
}
/* ============ NÃO ATRAPALHAR EDIÇÃO (Elementor/WP Admin) ============ */
/* Quando estiver editando: some com nav fixo pra você trabalhar em paz */
body.elementor-editor-active .pel-nav,
body.elementor-editor-active .pel-bottomnav,
body.wp-admin .pel-nav,
body.wp-admin .pel-bottomnav{
display: none !important;
}