/* =====================================================================
DELUI — Identidade visual (brandbook 2026) · v3.0.0
Tokens em tokens.css (fonte única). Componentes base em components.css.
===================================================================== */
/* ------------------------- Base ------------------------- */
/* CORREÇÃO DO SCROLL DUPLO:
O Storefront define `body{overflow-x:hidden}` e `.site{overflow-x:hidden}`.
Em #page (.site) isso faz `overflow-y` computar para `auto` -> #page vira um
contêiner de rolagem (2ª barra vertical). Trocamos por `overflow-x: clip`, que
corta o excesso horizontal SEM criar contêiner de rolagem (não força overflow-y). */
body, #page.site { overflow-x: clip; overflow-y: visible; }
body, button, input, select, textarea, .woocommerce-page {
font-family: var(--delui-sans);
color: var(--delui-graphite);
font-weight: 400;
}
h1, h2, h3, h4, h5, h6,
.entry-title, .page-title,
.woocommerce div.product .product_title,
.woocommerce ul.products li.product .woocommerce-loop-product__title {
font-family: var(--delui-serif);
color: var(--delui-navy);
font-weight: 600;
letter-spacing: .2px;
}
a { color: var(--delui-navy); }
a:hover { color: var(--delui-gold); }
/* ============================================================
FAIXA TOPO — MARQUEE EM LOOP
============================================================ */
.delui-announce { background: var(--delui-navy-deep); overflow: hidden; }
.delui-marquee { overflow: hidden; width: 100%; }
.delui-marquee__track {
display: flex;
align-items: center;
gap: 3.2rem;
width: max-content;
white-space: nowrap;
padding: .58em 0;
animation: delui-marquee 34s linear infinite;
}
.delui-marquee:hover .delui-marquee__track { animation-play-state: paused; }
.delui-marquee__item {
font-size: .76rem;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--delui-cream);
font-weight: 500;
}
@keyframes delui-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* ============================================================
HEADER — logo grande | busca central | mega menu | carrinho
============================================================ */
.site-header {
background-color: var(--delui-navy) !important;
border-bottom: 2px solid var(--delui-gold);
padding: .6em 0 !important;
}
/* linha 1: logo (esq) | busca (centro) | carrinho (dir) */
.delui-header-top { display: flex; align-items: center; gap: 1.5rem; }
.delui-logo { flex: 1 1 0; display: block; line-height: 0; }
.delui-logo img { height: 112px; width: 112px; display: block; }
.delui-cart { flex: 1 1 0; display: flex; align-items: center; justify-content: flex-end; }
/* busca realmente centralizada */
.delui-search { flex: 0 0 auto; display: flex; justify-content: center; }
.delui-search .woocommerce-product-search,
.delui-search form {
display: flex;
width: 480px;
max-width: 100%;
margin: 0;
position: relative;
}
.delui-search .woocommerce-product-search label { display: none; }
.delui-search input[type="search"],
.delui-search .search-field {
flex: 1 1 auto;
background: rgba(255,255,255,.10);
border: 1px solid rgba(255,255,255,.22);
color: var(--delui-cream);
padding: .72em 1em;
border-radius: 3px 0 0 3px;
font-size: .9rem;
}
.delui-search input::placeholder { color: var(--delui-muted); }
.delui-search button[type="submit"] {
background: var(--delui-gold);
color: var(--delui-navy);
border: none;
padding: 0 1.3em;
border-radius: 0 3px 3px 0;
font-weight: 700;
text-transform: uppercase;
font-size: .78rem;
cursor: pointer;
}
.delui-search button[type="submit"]:hover { background: var(--delui-gold-light); }
/* linha 2: mega menu centralizado */
.delui-nav { display: flex; justify-content: center; margin-top: .45rem; padding-top: .5rem; border-top: 1px solid rgba(255,255,255,.12); }
.delui-nav ul.delui-menu {
display: flex;
align-items: center;
gap: 1.9rem;
margin: 0;
padding: 0;
list-style: none;
}
.delui-nav ul.delui-menu li { margin: 0; position: relative; }
.delui-nav ul.delui-menu li a {
color: var(--delui-cream);
text-transform: uppercase;
font-size: .8rem;
letter-spacing: .05em;
font-weight: 500;
white-space: nowrap;
}
.delui-nav ul.delui-menu li a:hover,
.delui-nav ul.delui-menu li.current-menu-item > a { color: var(--delui-gold); }
/* submenu (mega) */
.delui-nav ul.delui-menu ul.sub-menu {
position: absolute;
top: 100%;
left: 0;
background: var(--delui-navy-2);
border-top: 2px solid var(--delui-gold);
padding: .6em 0;
min-width: 200px;
display: none;
z-index: 50;
box-shadow: 0 12px 30px rgba(0,0,0,.3);
}
.delui-nav ul.delui-menu li:hover > ul.sub-menu { display: block; }
.delui-nav ul.delui-menu ul.sub-menu li a { display: block; padding: .5em 1.2em; }
/* mega menu */
.site-header { overflow: visible; }
.delui-nav { position: relative; }
.delui-caret { font-size: .7em; opacity: .8; }
/* precisa vencer .delui-nav ul.delui-menu li { position: relative } */
.delui-nav ul.delui-menu li.delui-has-mega { position: static; }
.delui-mega {
position: absolute; left: 0; right: 0; top: calc(100% + .7rem);
background: #fff; border-top: 3px solid var(--delui-gold);
box-shadow: 0 22px 44px rgba(4,18,46,.22);
padding: 2.2rem 1.5rem; z-index: 60;
opacity: 0; visibility: hidden; transform: translateY(8px);
transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.delui-has-mega:hover .delui-mega { opacity: 1; visibility: visible; transform: translateY(0); }
.delui-mega__inner { max-width: 1160px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr 1fr 1.3fr; gap: 2.2rem; }
.delui-mega__col h4 { font-family: var(--delui-serif); color: var(--delui-navy); font-size: 1rem; margin: 0 0 .95rem; padding-bottom: .5rem; position: relative; }
/* filete dourado curto sob os títulos de coluna (padrão único DeLui) */
.delui-mega__col:not(.delui-mega__feature) > h4::after,
.delui-drop__col h4::after { content: ""; position: absolute; left: 0; bottom: 0; width: 26px; height: 2px; background: var(--delui-gold); }
.delui-mega__col ul { list-style: none; margin: 0; padding: 0; }
.delui-mega__col ul li { margin: 0 0 .55em; }
.delui-mega__col ul li a {
color: var(--delui-text) !important; text-transform: none !important;
font-size: .88rem !important; letter-spacing: 0 !important; font-weight: 400 !important; white-space: normal !important;
transition: color var(--t-base), padding-left var(--t-base);
}
.delui-mega__col ul li a:hover, .delui-mega__col ul li a:focus-visible { color: var(--delui-gold-text) !important; padding-left: 3px; }
.delui-mega__all { color: var(--delui-navy) !important; font-weight: 600 !important; }
.delui-mega__feature { background: linear-gradient(160deg, #0b1e48, #24345c); border-radius: 8px; padding: 1.6rem; color: var(--delui-cream); position: relative; overflow: hidden; }
.delui-mega__feature::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 85% 15%, rgba(201,162,77,.28), transparent 60%); }
.delui-mega__feature > * { position: relative; z-index: 1; }
.delui-mega__eyebrow { display: block; color: var(--delui-gold-light); letter-spacing: .2em; text-transform: uppercase; font-size: .68rem; font-weight: 600; line-height: 1.3; }
.delui-mega__feature h4 { color: var(--delui-cream) !important; border: none !important; font-size: 1.3rem; line-height: 1.25; margin: .5rem 0 .9rem; padding: 0; }
.delui-mega__feature p { color: var(--delui-muted); font-size: .82rem; margin: 0 0 1rem; }
.delui-mega__btn { display: inline-block; max-width: 100%; background: var(--delui-gold); color: var(--delui-navy) !important; font-weight: 700 !important; text-transform: uppercase !important; font-size: .74rem !important; letter-spacing: .05em !important; padding: .6em 1.2em; border-radius: 2px; text-align: center; line-height: 1.35; white-space: normal !important; overflow-wrap: break-word; }
.delui-mega__btn:hover { background: var(--delui-gold-light); }
/* dropdown — MESMO padrão claro do mega (creme + filete dourado) */
.delui-has-drop { position: relative; }
.delui-drop {
position: absolute; top: calc(100% + .7rem); left: 50%; transform: translateX(-50%) translateY(8px);
background: var(--delui-off-white); border-top: 3px solid var(--delui-gold);
border-radius: 0 0 var(--r-lg) var(--r-lg);
min-width: 210px; padding: .6em 0; list-style: none; margin: 0; z-index: 60;
box-shadow: var(--sh-lg);
opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s;
}
.delui-has-drop:hover .delui-drop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.delui-drop li a { display: block; padding: .5em 1.3em; color: var(--delui-text) !important; text-transform: none !important; font-size: .84rem !important; letter-spacing: 0 !important; font-weight: 400 !important; transition: color var(--t-base), background var(--t-base); }
.delui-drop li a:hover, .delui-drop li a:focus-visible { color: var(--delui-gold-text) !important; background: var(--delui-cream); }
/* ============================================================
MEGA MENU v2 (Kits destacado, 4 colunas + vitrine, painéis, a11y)
============================================================ */
.delui-mega { background: var(--delui-off-white); box-shadow: var(--sh-lg); border-radius: 0 0 var(--r-lg) var(--r-lg); }
/* abre também por foco de teclado */
.delui-has-mega:focus-within .delui-mega { opacity: 1; visibility: visible; transform: translateY(0); }
.delui-has-drop:focus-within > .delui-drop { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
/* 1. Kits & Presentes — pílula dourada premium (1º item) */
.delui-nav ul.delui-menu li.delui-menu__cta { margin-right: .4rem; }
.delui-menu__cta > a {
display: inline-flex; align-items: center; gap: .45em;
color: var(--delui-gold-light) !important;
border: 1px solid rgba(201,162,77,.55);
background: rgba(201,162,77,.10);
border-radius: var(--r-full);
padding: .5em 1.05em; min-height: var(--touch);
transition: background var(--t-base), border-color var(--t-base), color var(--t-base);
}
.delui-menu__cta > a:hover, .delui-menu__cta > a:focus-visible {
background: var(--delui-gold); color: var(--delui-navy) !important; border-color: var(--delui-gold);
}
.delui-menu__cta svg { width: 17px; height: 17px; }
.delui-menu__cta + li::before,
.delui-menu__blog::before {
content: ""; position: absolute; left: -1.15rem; top: 50%; transform: translateY(-50%);
width: 1px; height: 18px; background: rgba(255,255,255,.18);
}
/* Blog fecha o menu à direita, com respiro extra */
.delui-nav ul.delui-menu li.delui-menu__blog { margin-left: 1.5rem; }
/* 2. Mega de 4 colunas de links + vitrine */
.delui-mega__inner--4 { max-width: 1200px; grid-template-columns: repeat(4, 1fr) 1.4fr; gap: 1.6rem; }
.delui-mega__inner > * { min-width: 0; }
.delui-mega__col h4 a { color: var(--delui-navy) !important; text-transform: none !important; font-size: 1rem !important; letter-spacing: 0 !important; font-weight: 600 !important; }
.delui-mega__col h4 a:hover { color: var(--delui-gold) !important; }
/* vitrine: cards de produto */
.delui-mega__cards { display: flex; flex-direction: column; gap: .7rem; margin: .1rem 0 1rem; }
.delui-mega__card { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.delui-mega__card img { width: 52px; height: 68px; object-fit: contain; background: var(--delui-img-bg); border-radius: var(--r-sm); flex: 0 0 auto; padding: 4px; }
.delui-mega__card-txt { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.delui-mega__card-name { display: block; color: var(--delui-cream) !important; font-size: .82rem; font-weight: 600; line-height: 1.25; }
.delui-mega__card-price, .delui-mega__card .amount { color: var(--delui-gold-light) !important; font-size: .8rem; }
.delui-mega__card-price { line-height: 1.2; }
/* vitrine: banner */
.delui-mega__banner { display: block; margin: .1rem 0 1rem; border-radius: var(--r-sm); overflow: hidden; }
.delui-mega__banner img { width: 100%; height: auto; display: block; }
/* 3. Dropdown em painel (Feminino/Masculino/Árabes) */
.delui-drop--panel {
left: 0; transform: translateY(8px); min-width: 480px;
display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; padding: 1.5rem 1.7rem;
}
.delui-has-drop--panel:hover > .delui-drop--panel,
.delui-has-drop--panel:focus-within > .delui-drop--panel { opacity: 1; visibility: visible; transform: translateY(0); }
.delui-drop--panel .delui-drop__col h4 { font-family: var(--delui-serif); color: var(--delui-navy); font-size: .95rem; margin: 0 0 .8rem; padding-bottom: .45rem; text-transform: none; letter-spacing: 0; position: relative; }
.delui-drop--panel ul { list-style: none; margin: 0; padding: 0; }
.delui-drop--panel li a { padding: .4em 0; }
.delui-drop--panel li a:hover, .delui-drop--panel li a:focus-visible { background: transparent; padding-left: 3px; }
.delui-drop__seal { display: inline-flex; align-items: center; justify-content: center; gap: .45em; margin-top: .9rem; color: var(--delui-navy); background: var(--delui-gold); font-size: .66rem; font-weight: 700; line-height: 1.35; text-align: center; text-transform: uppercase; letter-spacing: .06em; padding: .5em .9em; border-radius: var(--r-full); }
.delui-drop__seal::after { content: "✓"; flex: none; font-size: 1.1em; line-height: 1; letter-spacing: 0; }
/* lista de serviços na vitrine de Presentes */
.delui-mega__svc { list-style: none; margin: 0 0 1.3rem; padding: 0; }
.delui-mega__svc li { margin: 0 0 .6em; }
.delui-mega__svc li:last-child { margin-bottom: 0; }
.delui-mega__feature .delui-mega__svc li a { color: var(--delui-cream) !important; font-size: .84rem; display: inline-flex; align-items: center; gap: .45em; }
.delui-mega__feature .delui-mega__svc li a::before { content: "◆"; color: var(--delui-gold-light); font-size: .55em; }
.delui-mega__feature .delui-mega__svc li a:hover,
.delui-mega__feature .delui-mega__svc li a:focus-visible { color: var(--delui-gold-light) !important; }
/* 4. Marcas em grade */
.delui-drop--grid { display: grid; grid-template-columns: repeat(2, minmax(135px, 1fr)); gap: 0 .8rem; min-width: 320px; padding: .9em 1.1em; }
.delui-drop--grid li a { padding: .45em .2em; }
/* carrinho */
.delui-cart .site-header-cart { padding: 0; margin: 0; list-style: none; }
.delui-cart .site-header-cart .cart-contents { color: var(--delui-cream) !important; font-weight: 600; font-size: .82rem; white-space: nowrap; }
.delui-cart .site-header-cart .cart-contents:hover { color: var(--delui-gold) !important; }
.delui-cart .amount { color: var(--delui-gold-light); }
/* ------------------------- Botões ------------------------- */
button, .button, input[type="submit"],
.woocommerce a.button, .woocommerce button.button,
.woocommerce #respond input#submit {
background-color: var(--delui-navy);
color: var(--delui-cream);
font-family: var(--delui-sans);
font-weight: 600;
letter-spacing: .04em;
text-transform: uppercase;
font-size: .8rem;
border-radius: 2px;
border: 1px solid var(--delui-navy);
transition: all .2s ease;
}
button:hover, .button:hover,
.woocommerce a.button:hover, .woocommerce button.button:hover {
background-color: var(--delui-navy-2); color: #fff;
}
.woocommerce a.button.alt, .woocommerce button.button.alt,
.woocommerce .single_add_to_cart_button, .woocommerce .checkout-button,
.wc-block-components-button {
background-color: var(--delui-gold) !important;
color: var(--delui-navy) !important;
border-color: var(--delui-gold) !important;
font-weight: 700;
}
.woocommerce a.button.alt:hover, .woocommerce button.button.alt:hover,
.woocommerce .single_add_to_cart_button:hover, .woocommerce .checkout-button:hover {
background-color: var(--delui-gold-light) !important; color: var(--delui-navy-deep) !important;
}
/* ============================================================
PLAYER DE BANNERS (slider)
============================================================ */
.delui-slider {
position: relative;
overflow: hidden;
background: var(--delui-navy);
border-bottom: 3px solid var(--delui-gold);
}
.delui-slide { display: none; }
.delui-slide.is-active { display: block; }
/* ---- Hero em BANNERS de imagem -------------------------------------------
Título, subtítulo e CTA fazem parte da arte — não há mais texto em HTML.
O banner inteiro é clicável. Altura fixada por aspect-ratio para os banners
não "pularem" ao trocar de slide (as artes têm proporções levemente
diferentes); o object-fit: cover acomoda a diferença.
Acessibilidade/SEO: a mensagem vive no alt da ![]()
(ver inc/home-customizer.php). */
/* O banner aparece SEMPRE INTEIRO: a altura vem da própria arte (height: auto),
sem aspect-ratio fixa e sem object-fit: cover.
Por quê: com uma proporção fixa no CSS, trocar a arte por outra de proporção
diferente corta o banner silenciosamente — foi o que houve ao subir a v2 (2,81)
numa caixa de 3,75: sumiram ~25% das laterais, levando junto o título e o CTA.
Assim, qualquer arte futura entra inteira, sem precisar mexer no CSS.
As artes são padronizadas (desktop 2,81 / mobile 0,8), então não há salto de
altura ao trocar de slide. */
.delui-slider--banners .delui-slide { overflow: hidden; }
.delui-slider--banners .delui-slide__link,
.delui-slider--banners picture { display: block; line-height: 0; }
.delui-slider--banners .delui-slide__img { display: block; width: 100%; height: auto; }
/* controles acima da arte clicável */
.delui-slider--banners .delui-slider__prev,
.delui-slider--banners .delui-slider__next,
.delui-slider--banners .delui-slider__dots { z-index: 2; }
/* No mobile o troca para a arte vertical (1080x1350) e a altura segue
a imagem — sem aspect-ratio aqui também, pelo mesmo motivo. */
.delui-btn {
display: inline-block;
background: var(--delui-gold);
color: var(--delui-navy);
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
padding: .9em 2.4em;
border-radius: 2px;
font-size: .85rem;
text-decoration: none;
}
.delui-btn:hover { background: var(--delui-gold-light); color: var(--delui-navy-deep); }
.delui-slider__prev, .delui-slider__next {
position: absolute; top: 50%; transform: translateY(-50%);
background: rgba(255,255,255,.08); color: var(--delui-cream);
border: 1px solid rgba(255,255,255,.25); width: 46px; height: 46px;
border-radius: 50%; font-size: 1.5rem; line-height: 1; cursor: pointer;
display: flex; align-items: center; justify-content: center; padding: 0;
}
.delui-slider__prev { left: 22px; } .delui-slider__next { right: 22px; }
.delui-slider__prev:hover, .delui-slider__next:hover { background: var(--delui-gold); color: var(--delui-navy); border-color: var(--delui-gold); }
.delui-slider__dots { position: absolute; bottom: 14px; left: 0; right: 0; display: flex; gap: 6px; justify-content: center; }
.delui-dot { width: 24px; height: 24px; border: none; background: none; padding: 0; cursor: pointer; position: relative; }
.delui-dot::before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--delui-gold-light); transition: background var(--t-base); }
.delui-dot.is-active::before { background: var(--delui-gold); border-color: var(--delui-gold); }
/* ============================================================
HOME — faixas
============================================================ */
.delui-values {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem;
max-width: 1100px; margin: 3.5rem auto; padding: 0 1.5rem; text-align: center;
}
.delui-values .delui-value h3 { font-size: 1.05rem; margin: .3em 0; }
.delui-values .delui-value .ic { color: var(--delui-gold); font-size: 1.6rem; }
.delui-values .delui-value p { color: var(--delui-text-muted); font-size: .86rem; margin: 0; }
.delui-manifesto { background: var(--delui-navy-deep); color: var(--delui-cream); text-align: center; padding: 4.5rem 1.5rem; margin: 3.5rem 0; }
.delui-manifesto h2 { color: var(--delui-cream); font-style: italic; font-size: clamp(1.6rem, 3.5vw, 2.4rem); max-width: 820px; margin: 0 auto .4em; font-weight: 500; }
.delui-manifesto span { color: var(--delui-gold-light); letter-spacing: .2em; text-transform: uppercase; font-size: .8rem; }
.delui-section-title { text-align: center; margin: 3rem 0 1.5rem; }
.delui-section-title span { color: var(--delui-gold-text); letter-spacing: .3em; text-transform: uppercase; font-size: .75rem; font-weight: 700; }
.delui-section-title h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: .2em 0 0; }
.delui-cats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; max-width: 1100px; margin: 1.5rem auto 3.5rem; padding: 0 1.5rem; }
.delui-cats a { display: flex; flex-direction: column; justify-content: center; align-items: center; background: var(--delui-navy); color: var(--delui-cream); text-align: center; padding: 2.2rem 1rem; border-radius: 4px; border: 1px solid var(--delui-navy); transition: all .25s ease; }
.delui-cats a:hover { background: var(--delui-navy-2); border-color: var(--delui-gold); color: #fff; transform: translateY(-3px); }
.delui-cats .delui-cat-name { font-family: var(--delui-serif); font-size: 1.15rem; }
.delui-cats .delui-cat-count { color: var(--delui-gold-light); font-size: .75rem; margin-top: .3em; }
/* home: sem título, faixas full-bleed, sem vão no topo */
.home .entry-header, .home .storefront-breadcrumb { display: none; }
/* o Storefront afasta o conteúdo do header em 4.24em (~68px) via
`.home.page:not(.page-template-template-homepage) .site-header`. Na home o banner
encosta no cabeçalho: zeramos a origem do vão em vez de compensá-la com margem
negativa. !important porque o seletor do pai tem especificidade maior. */
.home .site-header { margin-bottom: 0 !important; }
.home #content, .home .site-content, .home #primary,
.home .content-area, .home .col-full, .home .page.hentry, .home .entry-content {
padding-top: 0 !important;
margin-top: 0 !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
}
/* full-bleed exato (desconta a barra de rolagem via --sbw) -> zero estouro horizontal */
.delui-slider, .delui-manifesto {
width: calc(100vw - var(--sbw, 0px));
max-width: calc(100vw - var(--sbw, 0px));
margin-left: calc(50% - 50vw + var(--sbw, 0px) / 2);
margin-right: calc(50% - 50vw + var(--sbw, 0px) / 2);
}
/* ============================================================
CARD DE PRODUTO (Etapa C) — template único, sem borda, alinhado à esquerda
============================================================ */
/* o é só o item do grid/carrossel: sem caixa, o .dl-card cuida do visual */
.woocommerce ul.products li.product, .woocommerce-page ul.products li.product {
background: none; border: none; border-radius: 0; padding: 0; box-shadow: none;
text-align: left; overflow: visible;
}
.woocommerce ul.products li.product:hover { box-shadow: none; transform: none; border: none; border-color: transparent; }
.dl-card { display: flex; flex-direction: column; height: 100%; color: var(--delui-text); text-decoration: none; }
.dl-card:focus-visible { outline: 2px solid var(--delui-gold); outline-offset: 3px; border-radius: var(--r-md); }
/* imagem: proporção de frasco (3/4), fundo off-white, contain com respiro */
.dl-card__media {
position: relative; aspect-ratio: 3 / 4; background: var(--delui-img-bg);
border-radius: var(--r-md); overflow: hidden; display: flex; align-items: center; justify-content: center;
transition: box-shadow var(--t-base), transform var(--t-base);
}
.dl-card:hover .dl-card__media { transform: translateY(-2px); box-shadow: var(--sh-md); }
/* As fotos passam pelo normalizador (scripts/normalizar-imagens.php): já saem 3:4,
com fundo branco (== --delui-img-bg). A principal (-1) tem 5% de respiro; as
secundárias (-2+) preenchem até a borda. Por isso padding 0 aqui — o 12% de antes
somava com a margem da imagem e encolhia o frasco. `contain` fica como rede de
segurança: se entrar uma foto fora do padrão, ela não achata nem recorta. */
/* 80% => ~10% de respiro uniforme em volta do frasco, POR CIMA da moldura 3:4.
O produto para de encostar no limite do card (menos "poluição"). Só afeta o card;
a página de produto usa outro container e continua preenchendo. Ajuste este número
para calibrar: menor = frasco menor/mais ar; maior = frasco mais cheio. */
.dl-card__media img { width: 80%; height: 80%; object-fit: contain; padding: 0; margin: 0; border-radius: 0; background: none; }
/* Placeholder de marca preenche a moldura 3/4 inteira (sem o respiro do produto) */
.dl-card__media img.dl-placeholder { width: 100%; height: 100%; object-fit: cover; padding: 0; }
/* ============================================================
FAVORITOS (coração no card, produto, header e página)
============================================================ */
.woocommerce ul.products li.product { position: relative; }
.dl-fav {
position: absolute; top: 10px; right: 10px; z-index: 3;
width: 38px; height: 38px; border-radius: var(--r-full); padding: 0;
background: rgba(255,255,255,.92); border: 1px solid var(--delui-navy-10);
color: var(--delui-navy); cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: color var(--t-base), background var(--t-base), transform var(--t-base), border-color var(--t-base);
}
.dl-fav svg { width: 20px; height: 20px; fill: none; }
.dl-fav:hover { color: var(--delui-gold-text); transform: scale(1.06); }
.dl-fav.is-on { color: var(--delui-gold); border-color: var(--delui-gold); }
.dl-fav.is-on svg { fill: var(--delui-gold); }
/* coração na página do produto */
.dl-fav-single { display: inline-flex; align-items: center; gap: .55rem; margin: 0 0 1rem; }
.dl-fav-single .dl-fav { position: static; width: 40px; height: 40px; }
.dl-fav-single__txt { font-size: .85rem; color: var(--delui-text-muted); }
/* página de favoritos */
.dl-favpage { min-height: 220px; }
.dl-fav-empty { color: var(--delui-text-muted); padding: 2rem 0; font-size: .95rem; }
/* ============================================================
SEM SIDEBAR — o Storefront reserva ~26% para a sidebar que removemos;
sem isto o conteúdo fica preso em 74% e sobra espaço morto à direita.
============================================================ */
.delui-no-sidebar .content-area { width: 100%; float: none; margin-right: 0; }
.delui-no-sidebar #secondary, .delui-no-sidebar .widget-area { display: none; }
/* ============================================================
MINHA CONTA — entrar / cadastre-se (padrão DeLui)
============================================================ */
.woocommerce-account .col2-set#customer_login {
display: grid; grid-template-columns: 1fr; gap: 1.6rem;
max-width: var(--wrap); margin: 0 auto; width: 100%;
}
@media (min-width: 860px) { .woocommerce-account .col2-set#customer_login { grid-template-columns: 1fr 1fr; gap: 2rem; } }
/* o Storefront floata as colunas em 48%; como viramos grid, é preciso desarmar */
.woocommerce-account #customer_login > div.u-column1,
.woocommerce-account #customer_login > div.u-column2,
.woocommerce-account #customer_login > div {
float: none !important; width: auto !important; max-width: none !important; margin: 0 !important;
background: var(--delui-off-white); border: 1px solid var(--delui-navy-10);
border-radius: var(--r-lg); padding: 2rem 1.8rem; box-shadow: var(--sh-md);
}
/* o card de cadastro é o convite -> filete dourado no topo */
.woocommerce-account #customer_login > .u-column2 { border-top: 3px solid var(--delui-gold); }
.woocommerce-account #customer_login h2 {
font-family: var(--delui-serif); color: var(--delui-navy); font-size: 1.5rem;
margin: 0 0 1.2rem; padding-bottom: .6rem; position: relative;
}
.woocommerce-account #customer_login h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 28px; height: 2px; background: var(--delui-gold); }
.woocommerce-account .woocommerce-form-row label,
.woocommerce-account .woocommerce-form__label-for-checkbox { color: var(--delui-navy); font-size: .85rem; font-weight: 600; }
.woocommerce-account .woocommerce-form-row .input-text,
.woocommerce-account .woocommerce-Input--text {
width: 100%; background: #fff; border: 1px solid var(--delui-navy-10); border-radius: var(--r-sm);
padding: .8em .9em; color: var(--delui-text); font-size: .95rem;
}
.woocommerce-account .woocommerce-form-row .input-text:focus { border-color: var(--delui-gold); outline: none; }
.woocommerce-account .woocommerce-form-login__submit,
.woocommerce-account .woocommerce-form-register__submit {
background: var(--delui-gold) !important; color: var(--delui-navy) !important;
border: none; border-radius: var(--r-md); min-height: var(--touch);
padding: .85em 2em; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .82rem;
transition: background var(--t-base);
}
.woocommerce-account .woocommerce-form-login__submit:hover,
.woocommerce-account .woocommerce-form-register__submit:hover { background: var(--delui-gold-light) !important; }
.woocommerce-account .woocommerce-privacy-policy-text p { color: var(--delui-text-muted); font-size: .8rem; line-height: 1.5; }
.woocommerce-account .woocommerce-LostPassword a { color: var(--delui-gold-text); font-size: .85rem; }
/* nome/sobrenome lado a lado */
.woocommerce-account .form-row-first, .woocommerce-account .form-row-last { width: 100%; }
@media (min-width: 520px) {
.woocommerce-account .form-row-first { float: left; width: 48%; }
.woocommerce-account .form-row-last { float: right; width: 48%; }
.woocommerce-account .clear { clear: both; }
}
/* aba Favoritos dentro da conta */
.dl-conta__intro { color: var(--delui-text-muted); font-size: .9rem; margin: 0 0 1.2rem; }
/* ---- Drawer lateral de favoritos (lista + CTA no rodapé) ---- */
.dl-drawer--favs .dl-favdrawer__body { flex: 1 1 auto; overflow-y: auto; background: #fff; color: var(--delui-text); padding: .5rem 1.1rem; }
.dl-drawer--favs .dl-fav-empty { padding: 2.5rem 0; text-align: center; }
.dl-favlist { list-style: none; margin: 0; padding: 0; }
.dl-favlist__item { display: flex; align-items: center; gap: .75rem; padding: .8rem 0; border-bottom: 1px solid var(--delui-cream-2); }
.dl-favlist__thumb img { width: 52px; height: 66px; object-fit: contain; background: var(--delui-img-bg); border-radius: var(--r-sm); display: block; }
.dl-favlist__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
.dl-favlist__name { color: var(--delui-navy); font-weight: 600; font-size: .86rem; line-height: 1.25; text-decoration: none; }
.dl-favlist__name:hover { color: var(--delui-gold-text); }
.dl-favlist__price, .dl-favlist__price .amount { color: var(--delui-navy); font-size: .82rem; }
/* o "×" reaproveita .dl-fav (mesmo toggle), mas sem o visual de coração */
.dl-favlist__rm, .dl-favlist__rm.is-on {
position: static; width: 32px; height: 32px; flex: 0 0 auto;
background: none; border: none; color: var(--delui-text-muted);
}
.dl-favlist__rm svg, .dl-favlist__rm.is-on svg { width: 15px; height: 15px; fill: none; }
.dl-favlist__rm:hover { color: var(--delui-navy); transform: none; }
/* rodapé fixo com a CTA */
.dl-favdrawer__foot {
flex: 0 0 auto; background: var(--delui-navy); border-top: 1px solid rgba(255,255,255,.12);
padding: 1rem 1.1rem calc(1rem + env(safe-area-inset-bottom, 0));
}
.dl-favdrawer__all {
width: 100%; min-height: var(--touch); background: var(--delui-gold); color: var(--delui-navy);
border: none; border-radius: var(--r-md); padding: .9em 1em; cursor: pointer;
font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: .82rem;
transition: background var(--t-base), opacity var(--t-base);
}
.dl-favdrawer__all:hover:not(:disabled) { background: var(--delui-gold-light); }
.dl-favdrawer__all:disabled { opacity: .45; cursor: not-allowed; }
.dl-favdrawer__link { display: block; text-align: center; margin-top: .65rem; color: var(--delui-cream) !important; font-size: .8rem; text-decoration: none; }
.dl-favdrawer__link:hover { color: var(--delui-gold) !important; }
.dl-favdrawer__msg { margin: 0 0 .6rem; color: var(--delui-gold-light); font-size: .78rem; text-align: center; line-height: 1.4; }
.dl-favdrawer__msg[hidden] { display: none; }
/* badge sobre a imagem, canto superior esquerdo */
.dl-badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 5px; z-index: 2; }
.dl-badge2 { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; padding: .38em .6em; border-radius: var(--r-sm); line-height: 1; }
.dl-badge2--arab { background: var(--delui-gold); color: var(--delui-navy); }
.dl-badge2--nac, .dl-badge2--imp { background: var(--delui-navy); color: var(--delui-off-white); }
.dl-badge2--sale { background: var(--delui-error); color: #fff; }
/* corpo: coluna única de leitura, tudo à esquerda */
.dl-card__body { display: flex; flex-direction: column; padding: .75rem .1rem 0; flex: 1 1 auto; }
.dl-card__brand { font-family: var(--font-body); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--delui-text-muted); line-height: 1.2; }
.dl-card__name {
font-family: var(--font-display); font-size: 1.05rem; line-height: 1.25; color: var(--delui-navy); font-weight: 600;
margin: .2em 0 .12em;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
min-height: 2.5em; /* reserva 2 linhas -> evita CLS quando o nome varia */
}
.dl-card__tech { font-family: var(--font-body); font-size: 12px; color: var(--delui-text-muted); }
.dl-card__price { margin-top: auto; padding-top: .7em; display: flex; flex-direction: column; }
.dl-card__pricelabel { font-size: 11px; color: var(--delui-text-muted); }
.dl-card__priceval { font-family: var(--font-body); font-weight: 600; font-size: 1.25rem; color: var(--delui-navy); }
/* condições de pagamento (card e busca) — markup em inc/pagamento.php */
.dl-pay { display: flex; flex-direction: column; }
.dl-pay__inst { font-size: 12px; color: var(--delui-text-muted); }
.dl-pay__pix { font-size: 13px; color: var(--delui-gold-text); font-weight: 600; margin-top: .1em; }
.dl-pay__pix small { font-weight: 500; font-size: .85em; }
.dl-pay .amount { font-size: inherit; color: inherit; font-weight: inherit; }
.dl-card__cta {
display: block; text-align: center; margin-top: .85em; min-height: 44px; line-height: 42px;
border: 1px solid var(--delui-navy); color: var(--delui-navy); background: transparent;
font-family: var(--font-body); font-weight: 600; text-transform: uppercase; font-size: .76rem; letter-spacing: .05em;
border-radius: var(--r-sm); transition: background var(--t-base), color var(--t-base);
}
.dl-card:hover .dl-card__cta { background: var(--delui-navy); color: var(--delui-off-white); }
.woocommerce span.onsale { background-color: var(--delui-gold); color: var(--delui-navy); font-weight: 700; text-transform: uppercase; border-radius: 2px; min-height: auto; min-width: auto; padding: .4em .7em; line-height: 1; }
/* ============================================================
PÁGINA DE PRODUTO
============================================================ */
.woocommerce div.product .product_title { font-size: 2rem; }
.woocommerce div.product p.price, .woocommerce div.product span.price { color: var(--delui-navy); font-family: var(--delui-sans); font-weight: 700; }
/* Preço: só o valor na linha; as condições vêm no .dl-pay abaixo (padrão do card) */
.woocommerce div.product p.price { font-size: 1.75rem; line-height: 1.15; margin: 0 0 .35em; display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; }
.woocommerce div.product p.price del { font-size: .55em; font-weight: 500; color: var(--delui-text-muted); opacity: 1; }
.woocommerce div.product p.price ins { text-decoration: none; background: none; }
.dl-pay--single { margin: 0 0 1.3em; }
.dl-pay--single .dl-pay__inst { font-size: .9rem; }
.dl-pay--single .dl-pay__pix { font-size: 1rem; margin-top: .15em; }
.star-rating span { color: var(--delui-gold); }
/* Sticky "Adicionar ao carrinho" (desktop) — condições de pagamento completas.
A info do produto empilha: título / preço / parcelamento+Pix, tudo visível. */
.storefront-sticky-add-to-cart__content { align-items: center; }
.storefront-sticky-add-to-cart__content-product-info { display: flex; flex-direction: column; justify-content: center; gap: .1em; }
.storefront-sticky-add-to-cart__content-price { display: inline-block; margin: 0; }
.dl-pay--sticky { margin-top: .05em; line-height: 1.25; }
.dl-pay--sticky .dl-pay__inst { font-size: 12px; }
.dl-pay--sticky .dl-pay__pix { font-size: 13px; }
.dl-pay--sticky .amount { font-size: inherit; }
/* Atendimento via WhatsApp — ação secundária ao lado do add-to-cart (markup em inc/whatsapp.php) */
.dl-whats {
display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
min-height: var(--touch); padding: .6em 1.4em; margin: 0 0 1.2em;
border: 1px solid #1E9E5A; border-radius: var(--r-sm);
color: #157A45; background: transparent; text-decoration: none;
font-family: var(--font-body); font-weight: 600; font-size: .78rem;
text-transform: uppercase; letter-spacing: .05em;
transition: background var(--t-base), color var(--t-base);
}
.dl-whats:hover, .dl-whats:focus-visible { background: #1E9E5A; color: #fff; }
.dl-whats__ico { flex: 0 0 auto; }
/* ---- Linha de compra: quantidade + Adicionar ao carrinho + WhatsApp lado a lado ---- */
.woocommerce div.product form.cart {
display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: 1.6em;
}
/* o Storefront dá margin-right:14px no .quantity; com `gap` isso sobra e estoura a linha */
.woocommerce div.product form.cart .quantity { margin: 0 !important; float: none; flex: 0 0 auto; }
/* 0 1 auto: o botão NÃO cresce — se crescesse, empurraria o WhatsApp para a linha de baixo */
.woocommerce div.product form.cart .single_add_to_cart_button {
margin: 0; float: none; flex: 0 1 auto; min-width: 0; white-space: nowrap; padding-left: 1.2em; padding-right: 1.2em;
}
/* WhatsApp = ação secundária ao lado do botão principal (compacto p/ caber na linha) */
.dl-whats--inline {
margin: 0; flex: 0 1 auto; min-width: 0; white-space: nowrap;
padding: .6em .9em; font-size: .7rem; letter-spacing: .03em;
}
/* variações: os botões vivem dentro de .woocommerce-variation-add-to-cart */
.woocommerce div.product form.cart.variations_form { display: block; }
.woocommerce div.product form.cart.variations_form .woocommerce-variation-add-to-cart {
display: flex; flex-wrap: wrap; align-items: center; gap: .6rem;
}
/* telas estreitas: WhatsApp ocupa a linha inteira (não espremer o botão de compra) */
@media (max-width: 600px) {
.dl-whats--inline { flex: 1 1 100%; justify-content: center; }
}
/* ============================================================
PRODUTO — galeria + escalas na coluna 1, compra na coluna 2.
Vira grid porque com float não dá para ancorar as escalas
logo abaixo das imagens de forma previsível.
============================================================ */
@media (min-width: 768px) {
.single-product div.product {
display: grid; grid-template-columns: 46% 1fr; column-gap: 4%; align-items: start;
}
.single-product div.product > .woocommerce-product-gallery {
grid-column: 1; grid-row: 1; float: none !important; width: auto !important; margin-bottom: 0;
}
.single-product div.product > .dl-scales--gallery { grid-column: 1; grid-row: 2; }
.single-product div.product > .summary {
grid-column: 2; grid-row: 1 / span 2; float: none !important; width: auto !important; margin-bottom: 0;
}
/* o resto atravessa as duas colunas */
.single-product div.product > .woocommerce-tabs,
.single-product div.product > .related,
.single-product div.product > .up-sells,
.single-product div.product > .upsells { grid-column: 1 / -1; }
}
.dl-scales--gallery { margin: 1.6rem 0 0; padding: 1.4rem 0 0; }
/* ---- Volume / concentração sob o título (produto simples) ---- */
.dl-specs {
margin: -.2rem 0 1rem; color: var(--delui-text-muted);
font-size: 1rem; letter-spacing: .01em;
}
/* ---- Swatches de volume (produto variável) ---- */
.dl-swatches { display: flex; flex-wrap: wrap; gap: .55rem; margin: .5rem 0; }
.dl-swatch {
position: relative; display: inline-flex; align-items: center; justify-content: center;
min-width: 66px; min-height: var(--touch); padding: .5em .95em;
background: #fff; border: 1.5px solid var(--delui-navy-10); border-radius: var(--r-md);
color: var(--delui-navy); font-weight: 600; font-size: .92rem; cursor: pointer;
transition: border-color var(--t-base), background var(--t-base), box-shadow var(--t-base);
}
.dl-swatch:hover { border-color: var(--delui-gold); }
.dl-swatch:focus-visible { outline: 2px solid var(--delui-gold); outline-offset: 2px; }
.dl-swatch.is-active { border-color: var(--delui-gold); background: var(--delui-off-white); box-shadow: inset 0 0 0 1px var(--delui-gold); }
.dl-swatch[disabled] { opacity: .4; cursor: not-allowed; text-decoration: line-through; }
.dl-swatch__off {
position: absolute; top: -9px; right: -8px;
background: var(--delui-navy); color: var(--delui-gold-light);
font-size: .62rem; font-weight: 700; padding: .18em .42em; border-radius: var(--r-full);
}
/* a linha nativa do seletor de variação vira o rótulo "Volume" limpo */
.woocommerce div.product form.cart .variations { margin-bottom: .4rem; }
.woocommerce div.product form.cart .variations th.label { color: var(--delui-navy); font-weight: 600; }
/* No mobile o DOM colocaria as escalas entre a imagem e o título, empurrando preço/CTA
para baixo. Reordenamos: imagem -> compra -> escalas. */
@media (max-width: 767.98px) {
.single-product div.product { display: flex; flex-direction: column; }
.single-product div.product > .woocommerce-product-gallery { order: 1; }
.single-product div.product > .summary { order: 2; }
.single-product div.product > .dl-scales--gallery { order: 3; margin-top: .5rem; }
.single-product div.product > .woocommerce-tabs { order: 4; }
.single-product div.product > .related,
.single-product div.product > .up-sells,
.single-product div.product > .upsells { order: 5; }
}
.delui-selos { list-style: none; margin: 1.5em 0 0; padding: 1.2em 0 0; border-top: 1px solid var(--delui-cream-2); display: grid; gap: .8em; }
.delui-selos li { display: flex; flex-direction: column; margin: 0; }
.delui-selos strong { color: var(--delui-navy); font-size: .92rem; }
.delui-selos span { color: #70788a; font-size: .8rem; }
.woocommerce-Tabs-panel h3, .woocommerce div.product .woocommerce-tabs h2 { font-family: var(--delui-serif); color: var(--delui-navy); }
.woocommerce-tabs ul.tabs li.active a { color: var(--delui-gold); }
.woocommerce-products-header__title, .page-title { font-family: var(--delui-serif); color: var(--delui-navy); text-align: center; }
/* ============================================================
LARGURA TOTAL (loja/produto) — grade em CSS grid
============================================================ */
.delui-full-width .content-area { width: 100%; margin-right: 0; float: none; }
.delui-full-width #secondary { display: none; }
.delui-full-width ul.products {
display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin: 0 0 2.5rem !important;
}
.delui-full-width ul.products::before, .delui-full-width ul.products::after { content: none !important; display: none !important; }
.delui-full-width ul.products li.product { width: auto !important; margin: 0 !important; float: none !important; clear: none !important; }
/* ============================================================
RODAPÉ — navy + slogan + CNPJ
============================================================ */
.site-footer { background-color: var(--delui-navy) !important; color: var(--delui-muted); }
.site-footer a { color: var(--delui-cream); }
.site-footer a:hover { color: var(--delui-gold); }
.site-footer .widget-title, .site-footer h1, .site-footer h2, .site-footer h3 { color: var(--delui-gold-light) !important; font-family: var(--delui-serif); }
.delui-footer-slogan { text-align: center; padding: 1rem 0 1.6rem; }
.delui-footer-mark { display: block; width: 120px; height: 120px; margin: 0 auto; }
.delui-footer-tagline { color: var(--delui-cream); font-style: italic; font-family: var(--delui-serif); font-size: 1.2rem; margin: .25em 0 0; }
.delui-credit { border-top: 1px solid rgba(255,255,255,.12); padding-top: 1.4em; text-align: center; color: var(--delui-muted); font-size: .82rem; line-height: 1.8; }
/* ============================================================
FAIXA DE BENEFÍCIOS (abaixo do menu)
============================================================ */
.delui-benefits {
background: var(--delui-cream);
border-bottom: 1px solid var(--delui-cream-2);
}
.delui-benefits__inner {
max-width: 1240px; margin: 0 auto; padding: 1.1rem 1.5rem;
display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1rem;
}
.delui-benefit { display: flex; align-items: center; gap: .8rem; justify-content: center; }
.delui-benefit .ic {
width: 42px; height: 42px; flex: 0 0 42px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: #fff; border: 1px solid var(--delui-gold); color: var(--delui-gold);
font-size: 1.2rem;
}
.delui-benefit strong { display: block; color: var(--delui-navy); font-size: .86rem; font-weight: 600; line-height: 1.2; }
.delui-benefit span { color: var(--delui-text-muted); font-size: .74rem; }
/* ============================================================
PRATELEIRA / CARROSSEL DE PRODUTOS
============================================================ */
.delui-shelf { max-width: 1240px; margin: 3.2rem auto; padding: 0 1.5rem; position: relative; }
.delui-shelf__head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 1.4rem; gap: 1rem; }
.delui-shelf__head .t span { color: var(--delui-gold-text); letter-spacing: .28em; text-transform: uppercase; font-size: .72rem; font-weight: 700; }
.delui-shelf__head .t h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: .15em 0 0; }
.delui-shelf__head .verlink { color: var(--delui-navy); font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; border-bottom: 1px solid var(--delui-gold); padding-bottom: 2px; }
.delui-shelf__head .verlink:hover { color: var(--delui-gold); }
/* Trilho: scroll-snap NATIVO (sem lib JS de terceiros) */
.delui-shelf .products {
display: flex !important;
flex-wrap: nowrap !important;
gap: var(--sp-4);
overflow-x: auto;
scroll-snap-type: x mandatory;
scroll-behavior: smooth;
overscroll-behavior-x: contain;
scrollbar-width: none;
-ms-overflow-style: none;
margin: 0 !important;
padding: .5rem 1rem 1.4rem !important; /* margem de conteúdo (mobile) */
scroll-padding-inline-start: 1rem;
list-style: none;
}
.delui-shelf .products::-webkit-scrollbar { display: none; }
.delui-shelf .products::before, .delui-shelf .products::after { content: none !important; display: none !important; }
/* item: 2,2 cards no mobile — o card cortado sinaliza "arraste" */
.delui-shelf .products li.product {
flex: 0 0 calc((100% - 1.2 * var(--sp-4)) / 2.2) !important;
width: auto !important; margin: 0 !important; float: none !important;
scroll-snap-align: start;
}
@media (prefers-reduced-motion: reduce) { .delui-shelf .products { scroll-behavior: auto; } }
/* mobile: trilho sangra até a borda; header e 1º card na margem de conteúdo */
@media (max-width: 767px) {
.delui-shelf {
width: calc(100vw - var(--sbw, 0px)); max-width: calc(100vw - var(--sbw, 0px));
margin-left: calc(50% - 50vw + var(--sbw, 0px) / 2); margin-right: calc(50% - 50vw + var(--sbw, 0px) / 2);
padding: 0;
}
.delui-shelf__head { padding: 0 1rem; }
}
/* tablet: 3 cards */
@media (min-width: 768px) {
.delui-shelf .products { padding-inline: .2rem !important; scroll-padding-inline-start: .2rem; }
.delui-shelf .products li.product { flex-basis: calc((100% - 2 * var(--sp-4)) / 3) !important; }
}
/* desktop: 4 cards */
@media (min-width: 1024px) {
.delui-shelf .products li.product { flex-basis: calc((100% - 3 * var(--sp-4)) / 4) !important; }
}
/* setas: só no desktop, discretas, aparecem no hover da seção, somem no início/fim */
.delui-shelf__nav {
position: absolute; top: 42%; width: 44px; height: 44px; border-radius: 50%;
background: var(--delui-navy); border: 1px solid rgba(255, 255, 255, .22); color: var(--delui-off-white);
font-size: 1.4rem; cursor: pointer; display: none; align-items: center; justify-content: center;
box-shadow: var(--sh-md); z-index: 4; padding: 0;
opacity: 0; transition: opacity var(--t-base), background var(--t-base), color var(--t-base);
}
.delui-shelf:hover .delui-shelf__nav { opacity: 1; }
.delui-shelf__nav:hover { background: var(--delui-gold); color: var(--delui-navy); border-color: var(--delui-gold); }
.delui-shelf__nav.is-disabled { opacity: 0 !important; pointer-events: none; }
.delui-shelf__nav--prev { left: -6px; } .delui-shelf__nav--next { right: -6px; }
@media (min-width: 1024px) { .delui-shelf__nav { display: flex; } }
/* badges no card */
.delui-badges { position: absolute; top: 12px; left: 12px; display: flex; flex-direction: column; gap: 6px; z-index: 2; }
.delui-badge { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: .32em .6em; border-radius: 2px; line-height: 1; }
.delui-badge--arab { background: var(--delui-gold); color: var(--delui-navy); }
.delui-badge--nac { background: var(--delui-navy); color: var(--delui-cream); }
.delui-badge--imp { background: var(--delui-navy-soft); color: var(--delui-cream); }
.delui-badge--sale { background: #8a2b2b; color: #fff; }
/* cards com altura igual e botão alinhado no rodapé */
.woocommerce ul.products li.product {
position: relative;
display: flex !important;
flex-direction: column;
}
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
display: flex; flex-direction: column; flex: 1 1 auto;
}
.woocommerce ul.products li.product .woocommerce-loop-product__title { flex: 0 0 auto; }
.woocommerce ul.products li.product .price { margin-top: auto; padding-top: .5em; }
/* botão comprar full width no card */
.delui-shelf .products li.product .button,
.woocommerce ul.products li.product .add_to_cart_button,
.woocommerce ul.products li.product .button {
display: block; width: 100%; margin-top: .6em;
}
/* ============================================================
VITRINE DE COLEÇÕES (tiles com imagem/gradiente)
============================================================ */
.delui-collections { max-width: 1240px; margin: 3.2rem auto; padding: 0 1.5rem; }
.delui-collections__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.delui-collection {
position: relative; min-height: 220px; border-radius: 6px; overflow: hidden;
display: flex; flex-direction: column; justify-content: flex-end; padding: 1.6rem;
color: var(--delui-cream); background: var(--delui-navy);
border: 1px solid var(--delui-navy);
text-decoration: none;
}
.delui-collection, .delui-collection:hover,
.delui-collection__eyebrow, .delui-collection h3, .delui-collection__cta { text-decoration: none; }
/* vence o sublinhado padrão de links do conteúdo (Storefront: .entry-content a) */
.entry-content a.delui-btn, .entry-content a.delui-btn:hover,
.entry-content a.delui-collection, .entry-content a.delui-collection:hover,
.entry-content a.verlink, .entry-content a.verlink:hover { text-decoration: none; }
.delui-collection--1 { background: linear-gradient(160deg, #0b1e48, #24345c); }
.delui-collection--2 { background: linear-gradient(160deg, #14203b, #0b1e48); }
.delui-collection--3 { background: linear-gradient(160deg, #04122e, #0e2656); }
.delui-collection::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 80% 15%, rgba(201,162,77,.25), transparent 60%); }
/* Card com foto de fundo (--dl-coll-bg vem inline do shortcode).
Vem DEPOIS de --1/--2/--3 para vencer o gradiente por ordem de cascata.
O scrim substitui o brilho dourado: sem ele, o texto creme no canto inferior
esquerdo brigaria com a foto. */
.delui-collection--photo {
background: var(--dl-coll-bg) center / cover no-repeat, var(--delui-navy);
}
.delui-collection--photo::after {
background:
linear-gradient(to top, rgba(4,18,46,.93) 0%, rgba(4,18,46,.62) 38%, rgba(4,18,46,.15) 68%, rgba(4,18,46,0) 100%),
linear-gradient(to right, rgba(4,18,46,.55) 0%, rgba(4,18,46,0) 55%);
}
.delui-collection > * { position: relative; z-index: 1; }
.delui-collection .delui-collection__eyebrow { color: var(--delui-gold-light); letter-spacing: .2em; text-transform: uppercase; font-size: .7rem; font-weight: 600; }
.delui-collection h3 { color: var(--delui-cream); font-size: 1.5rem; margin: .2em 0 .5em; }
.delui-collection .delui-collection__cta { color: var(--delui-gold-light); font-weight: 600; font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; }
.delui-collection:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(11,30,72,.28); }
.delui-collection { transition: transform .25s, box-shadow .25s; }
/* ============================================================
PROVA SOCIAL / DEPOIMENTOS
============================================================ */
.delui-social { background: var(--delui-cream); padding: 4rem 1.5rem; margin: 3.5rem 0; }
.delui-social__head { text-align: center; max-width: 720px; margin: 0 auto 2.4rem; }
.delui-social__head span { color: var(--delui-gold-text); letter-spacing: .28em; text-transform: uppercase; font-size: .72rem; font-weight: 700; }
.delui-social__head h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); margin: .2em 0 0; }
.delui-social__grid { max-width: 1140px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }
.delui-testimonial { background: #fff; border: 1px solid var(--delui-cream-2); border-radius: 6px; padding: 1.6rem; }
.delui-testimonial .stars { color: var(--delui-gold); letter-spacing: 2px; font-size: .95rem; }
.delui-testimonial p { color: #4a4f5c; font-size: .92rem; line-height: 1.6; font-style: italic; margin: .7em 0 1em; }
.delui-testimonial .who { color: var(--delui-navy); font-weight: 600; font-size: .86rem; }
.delui-social__rating { text-align: center; margin-top: 2.2rem; color: var(--delui-navy); }
.delui-social__rating strong { font-size: 2rem; font-family: var(--delui-serif); color: var(--delui-navy); }
/* ============================================================
SERVIÇOS / DIFERENCIAIS
============================================================ */
.delui-services { max-width: 1240px; margin: 3.5rem auto; padding: 0 1.5rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem; }
.delui-service { text-align: center; padding: 2rem 1.2rem; border: 1px solid var(--delui-cream-2); border-radius: 6px; background: #fff; transition: border-color .2s, transform .2s; }
.delui-service:hover { border-color: var(--delui-gold); transform: translateY(-3px); }
.delui-service .ic { font-size: 1.8rem; color: var(--delui-gold); }
.delui-service h3 { font-size: 1.05rem; margin: .5em 0 .3em; }
.delui-service p { color: var(--delui-text-muted); font-size: .82rem; margin: 0; }
/* ============================================================
NEWSLETTER
============================================================ */
.delui-newsletter { background: var(--delui-navy-deep); color: var(--delui-cream); padding: 3.6rem 1.5rem; text-align: center; }
.delui-newsletter span { color: var(--delui-gold-light); letter-spacing: .28em; text-transform: uppercase; font-size: .72rem; font-weight: 600; }
.delui-newsletter h2 { color: var(--delui-cream); font-size: clamp(1.5rem, 3vw, 2.1rem); margin: .25em auto .3em; max-width: 640px; }
.delui-newsletter p { color: var(--delui-muted); max-width: 540px; margin: 0 auto 1.6rem; }
.delui-newsletter form { display: flex; max-width: 480px; margin: 0 auto; gap: .6rem; }
.delui-newsletter input[type="email"] { flex: 1; padding: .85em 1.1em; border-radius: 3px; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: var(--delui-cream); }
.delui-newsletter input::placeholder { color: var(--delui-muted); }
.delui-newsletter button { background: var(--delui-gold); color: var(--delui-navy); border: none; padding: 0 1.6em; border-radius: 3px; font-weight: 700; text-transform: uppercase; font-size: .8rem; cursor: pointer; }
.delui-newsletter button:hover { background: var(--delui-gold-light); }
/* full-bleed também para benefícios, social e newsletter na home */
.delui-benefits, .delui-social, .delui-newsletter {
width: calc(100vw - var(--sbw, 0px)); max-width: calc(100vw - var(--sbw, 0px));
margin-left: calc(50% - 50vw + var(--sbw, 0px) / 2); margin-right: calc(50% - 50vw + var(--sbw, 0px) / 2);
}
/* ============================================================
RODAPÉ RICO
============================================================ */
.delui-foot { max-width: 1240px; margin: 0 auto; padding: 3.2rem 1.5rem 1rem; }
.delui-foot__cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2rem; }
/* marca do rodapé: logo oficial (o mesmo SVG do cabeçalho) no lugar do texto */
.delui-foot__logo { display: inline-block; line-height: 0; margin: -.6rem 0 .9rem -.4rem; }
.delui-foot__logo img { width: 96px; height: 96px; display: block; }
.delui-foot h3 { color: var(--delui-gold-light); font-family: var(--delui-serif); font-size: 1.05rem; margin: 0 0 1rem; }
.delui-foot ul { list-style: none; margin: 0; padding: 0; }
.delui-foot ul li { margin: 0 0 .55em; }
.delui-foot a { color: var(--delui-cream) !important; }
.delui-foot a:hover { color: var(--delui-gold) !important; }
.delui-foot ul li a { font-size: .85rem; }
.delui-foot__contact p { color: var(--delui-muted); font-size: .82rem; line-height: 1.7; margin: 0 0 .6em; }
/* redes sociais: SVG (não glifo de fonte) — tamanho e peso iguais nos três */
.delui-social-icons { display: flex; gap: .55rem; margin-top: .2rem; }
.delui-social-icons a {
width: 42px; height: 42px; border-radius: 50%;
border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.04);
display: inline-flex; align-items: center; justify-content: center;
color: var(--delui-cream);
transition: background var(--t-base), border-color var(--t-base), color var(--t-base), transform var(--t-base);
}
.delui-social-icons a svg { width: 19px; height: 19px; display: block; }
/* Estados selecionados (hover/foco/clique): fundo dourado + ícone navy.
O ícone é stroke="currentColor", então basta a cor resolver para dourado em
algum desses estados para ele sumir dentro do círculo dourado. Fixamos a cor
nos quatro estados e reforçamos o stroke no SVG — sem tocar em mais nada.
Não usar `fill` no