/* ============================================================
Redesign Loja Shori — tokens + componentes base
Fonte da verdade: design_handoff_loja_shori/README.md
Correções do critique aplicadas: verde de TEXTO é #117A36
(AA 5.4:1); #1BA84A só em dots/ícones/fundos. Cinza #9AA0A8
nunca em texto <18px.
============================================================ */
:root {
--ilhacommerceVolkswagen-red: #001E50;
--ilhacommerceVolkswagen-red-hover: #001333;
--ilhacommerceVolkswagen-red-tint: #EAF4FB;
--ilhacommerceVolkswagen-dark: #001E50;
--ilhacommerceVolkswagen-dark-hover: #16305E;
--ilhacommerceVolkswagen-dark-border: #2B4570;
--ilhacommerceVolkswagen-dark-divider: #16305E;
--ilhacommerceVolkswagen-text: #1B2236;
--ilhacommerceVolkswagen-text-2: #3C484D;
--ilhacommerceVolkswagen-text-dark: #C2CACF;
--ilhacommerceVolkswagen-gray: #9AA0A8;
--ilhacommerceVolkswagen-blue: #0082D6;
--ilhacommerceVolkswagen-blue-text: #0067AC; /* texto/link azul (AA) */
--ilhacommerceVolkswagen-bg: #F5F6F8;
--ilhacommerceVolkswagen-surface: #FFFFFF;
--ilhacommerceVolkswagen-border: #DFE4E8;
--ilhacommerceVolkswagen-border-hover: #C2CACF;
--ilhacommerceVolkswagen-green: #1BA84A; /* dots, ícones, fundos */
--ilhacommerceVolkswagen-green-text: #117A36; /* texto/link verde (AA) */
--ilhacommerceVolkswagen-green-tint: #EAF7EF;
--ilhacommerceVolkswagen-amber-tint: #FFF4E5; /* "Sob encomenda" */
--ilhacommerceVolkswagen-amber-text: #8A5A00;
--ilhacommerceVolkswagen-shadow-card: 0 10px 28px rgba(21, 24, 29, .10);
--ilhacommerceVolkswagen-shadow-hero: 0 24px 60px rgba(0, 0, 0, .45);
--ilhacommerceVolkswagen-radius-card: 16px;
--ilhacommerceVolkswagen-radius-btn: 8px;
}
/* Foco visível global (o protótipo usava outline:none — P1 do critique) */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
outline: none;
box-shadow: 0 0 0 3px rgba(0, 130, 214, .35);
border-radius: var(--ilhacommerceVolkswagen-radius-btn, 8px);
}
/* Parcelamento junto ao preço */
.ilhacommerceVolkswagen-parcelas {
display: block;
font-size: 12.5px;
font-weight: 400;
color: var(--ilhacommerceVolkswagen-text-2);
margin-top: 2px;
}
.single-product div.product .ilhacommerceVolkswagen-parcelas {
font-size: 14.5px;
color: var(--ilhacommerceVolkswagen-text);
}
.single-product div.product .ilhacommerceVolkswagen-parcelas .woocommerce-Price-amount {
font-weight: 700;
}
/* Preço Pix (PDP) */
.ilhacommerceVolkswagen-pix {
display: block;
font-size: 13.5px;
font-weight: 600;
color: var(--ilhacommerceVolkswagen-green-text);
margin: 4px 0 0;
}
.ilhacommerceVolkswagen-pix span { font-weight: 400; }
/* Badge -N% */
span.ilhacommerceVolkswagen-badge.onsale, .woocommerce span.ilhacommerceVolkswagen-badge.onsale {
position: absolute !important;
top: 12px !important;
left: 12px !important;
right: auto !important;
background: var(--ilhacommerceVolkswagen-red) !important;
color: #fff !important;
font-size: 11.5px !important;
font-weight: 700 !important;
letter-spacing: .04em;
white-space: nowrap !important;
padding: 5px 10px !important;
border-radius: 999px !important;
min-height: 0 !important;
min-width: 0 !important;
height: auto !important;
width: auto !important;
line-height: 1.2 !important;
margin: 0 !important;
z-index: 2;
}
/* Tabela de compatibilidade */
.ilhacommerceVolkswagen-compat {
width: 100%;
border: 1px solid var(--ilhacommerceVolkswagen-border);
border-radius: 12px;
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
font-size: 14px;
}
.ilhacommerceVolkswagen-compat th {
background: var(--ilhacommerceVolkswagen-bg);
padding: 10px 16px;
font-weight: 700;
text-align: left;
border-bottom: 1px solid var(--ilhacommerceVolkswagen-border);
}
.ilhacommerceVolkswagen-compat td {
padding: 10px 16px;
border-bottom: 1px solid var(--ilhacommerceVolkswagen-border);
}
.ilhacommerceVolkswagen-compat tr:last-child td { border-bottom: none; }
.ilhacommerceVolkswagen-compat td.anos { color: var(--ilhacommerceVolkswagen-text-2); }
/* ============ Card de produto (Loop Item) ============ */
.ilhacommerceVolkswagen-card {
position: relative;
background: var(--ilhacommerceVolkswagen-surface);
border: 1px solid var(--ilhacommerceVolkswagen-border);
border-radius: var(--ilhacommerceVolkswagen-radius-card);
overflow: hidden;
height: 100%;
transition: box-shadow .2s ease-out, border-color .2s ease-out;
}
.ilhacommerceVolkswagen-card:hover {
box-shadow: var(--ilhacommerceVolkswagen-shadow-card);
border-color: var(--ilhacommerceVolkswagen-border-hover);
}
.ilhacommerceVolkswagen-card__img img {
width: 100%;
aspect-ratio: 16 / 10;
object-fit: cover;
display: block;
}
.ilhacommerceVolkswagen-card__body {
padding: 16px;
display: flex;
flex-direction: column;
gap: 8px;
/* e-con: o CSS por-elemento do Elementor grava --flex-grow:0; só !important vence */
--flex-grow: 1 !important;
flex-grow: 1 !important;
}
.ilhacommerceVolkswagen-card__cat .elementor-heading-title {
font-size: 12px;
font-weight: 700;
color: var(--ilhacommerceVolkswagen-text-2);
letter-spacing: .06em;
text-transform: uppercase;
}
.ilhacommerceVolkswagen-card__title .elementor-heading-title {
font-size: 14.5px;
font-weight: 600 !important; /* kit global (primary 800) vence sem isso */
line-height: 1.4;
min-height: 40px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.ilhacommerceVolkswagen-card__title a { color: var(--ilhacommerceVolkswagen-text); }
/* card inteiro clicável via overlay no link do título */
.ilhacommerceVolkswagen-card .ilhacommerceVolkswagen-card__title a::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
}
.ilhacommerceVolkswagen-card__price { margin-top: auto; }
.ilhacommerceVolkswagen-card__price .woocommerce-Price-amount {
font-size: 18px;
font-weight: 800;
color: var(--ilhacommerceVolkswagen-text);
}
.ilhacommerceVolkswagen-card__price del { text-decoration: none; display: block; }
.ilhacommerceVolkswagen-card__price del .woocommerce-Price-amount {
font-size: 13px;
font-weight: 400;
color: var(--ilhacommerceVolkswagen-text-2); /* critique: #9AA0A8 reprova AA em 13px */
text-decoration: line-through;
}
.ilhacommerceVolkswagen-card__price ins { text-decoration: none; }
.ilhacommerceVolkswagen-card__buy { position: relative; z-index: 2; }
/* !important: o CSS do WooCommerce (.woocommerce a.button) vence em páginas de archive */
.ilhacommerceVolkswagen-card__buy .button {
display: block !important;
width: 100% !important;
text-align: center !important;
background: var(--ilhacommerceVolkswagen-dark) !important;
color: #fff !important;
font-family: 'Inter', sans-serif !important;
font-weight: 600 !important;
font-size: 14px !important;
border-radius: var(--ilhacommerceVolkswagen-radius-btn) !important;
padding: 10px 0 !important;
margin-top: 6px !important;
transition: background .2s ease-out;
}
.ilhacommerceVolkswagen-card__buy .button:hover { background: var(--ilhacommerceVolkswagen-dark-hover) !important; }
.ilhacommerceVolkswagen-card__buy .button.loading { opacity: .6; pointer-events: none; }
.ilhacommerceVolkswagen-card__buy .added_to_cart {
display: block;
text-align: center;
font-size: 12.5px;
font-weight: 600;
color: var(--ilhacommerceVolkswagen-green-text);
margin-top: 6px;
}
@media (prefers-reduced-motion: reduce) {
.ilhacommerceVolkswagen-card, .ilhacommerceVolkswagen-card__buy .button { transition: none; }
}
/* todas as linhas do grid com a mesma altura (não só dentro de cada linha) */
.elementor-widget-loop-grid .elementor-loop-container { grid-auto-rows: 1fr; }
/* ============ Topbar ============ */
/* nota: com e_optimized_markup não existe .elementor-widget-container — estilizar o widget direto */
.ilhacommerceVolkswagen-topbar { background: var(--ilhacommerceVolkswagen-dark); color: var(--ilhacommerceVolkswagen-text-dark); font-size: 13px; padding: 0 !important; }
.ilhacommerceVolkswagen-topbar__in { padding: 0 !important; }
.ilhacommerceVolkswagen-topbar__in > .e-con-inner { padding: 8px 24px !important; }
.ilhacommerceVolkswagen-topbar__left, .ilhacommerceVolkswagen-topbar__right {
width: auto !important;
display: flex;
align-items: center;
gap: 8px;
}
.ilhacommerceVolkswagen-topbar__right { gap: 24px; }
.ilhacommerceVolkswagen-topbar__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ilhacommerceVolkswagen-red); display: inline-block; }
/* ============ Header principal ============ */
.ilhacommerceVolkswagen-header { background: var(--ilhacommerceVolkswagen-surface); padding: 0 !important; }
.ilhacommerceVolkswagen-header__in { padding: 0 !important; }
.ilhacommerceVolkswagen-header__in > .e-con-inner { padding: 12px 24px !important; }
.ilhacommerceVolkswagen-header__in > .e-con-inner { display: flex; flex-wrap: wrap !important; --flex-wrap: wrap; align-items: center; gap: 10px 32px; }
.ilhacommerceVolkswagen-header__logo img { height: 42px; width: auto; }
.ilhacommerceVolkswagen-header__search { flex: 1 1 auto !important; --flex-grow: 1 !important; }
/* pill do Ajax Search Pro — medidas exatas do protótipo (Home.dc.html linhas 41-44) */
.ilhacommerceVolkswagen-header__search .asp_m {
background: var(--ilhacommerceVolkswagen-bg) !important;
border: 1.5px solid var(--ilhacommerceVolkswagen-border) !important;
border-radius: 999px !important;
height: 48px !important;
padding: 0 6px 0 20px !important;
box-shadow: none !important;
}
.ilhacommerceVolkswagen-header__search .asp_m:focus-within { border-color: var(--ilhacommerceVolkswagen-red) !important; }
.ilhacommerceVolkswagen-header__search .asp_m .probox {
background: transparent !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
}
.ilhacommerceVolkswagen-header__search .asp_m .probox .proinput {
background: transparent !important;
height: 100% !important;
display: flex !important;
align-items: center !important;
flex: 1 !important;
padding: 0 !important;
}
.ilhacommerceVolkswagen-header__search .asp_m .probox .proinput form { width: 100% !important; height: 100%; display: flex; align-items: center; }
.ilhacommerceVolkswagen-header__search .asp_m .probox .proinput input {
width: 100% !important;
height: 100% !important;
padding: 0 !important;
margin: 0 !important;
font-family: 'Inter', sans-serif !important;
font-size: 15px !important;
color: var(--ilhacommerceVolkswagen-text) !important;
}
.ilhacommerceVolkswagen-header__search .asp_m .probox .proinput input::placeholder { color: var(--ilhacommerceVolkswagen-text-2); opacity: 1; }
/* botão "Buscar": pill vermelho com texto, como no protótipo */
.ilhacommerceVolkswagen-header__search .asp_m .probox .promagnifier {
background: var(--ilhacommerceVolkswagen-red) !important;
border-radius: 999px !important;
height: 38px !important;
width: auto !important;
min-width: 0 !important;
padding: 0 22px !important;
margin: 0 !important;
display: flex !important;
align-items: center !important;
flex-shrink: 0 !important;
}
.ilhacommerceVolkswagen-header__search .asp_m .probox .promagnifier:hover { background: var(--ilhacommerceVolkswagen-red-hover) !important; }
.ilhacommerceVolkswagen-header__search .asp_m .probox .promagnifier .innericon { display: none !important; }
.ilhacommerceVolkswagen-header__search .asp_m .probox .promagnifier::before {
content: 'Buscar';
color: #fff;
font: 600 14px 'Inter', sans-serif;
white-space: nowrap;
}
/* loading do ASP dentro do pill */
.ilhacommerceVolkswagen-header__search .asp_m .probox .proloading { background: transparent !important; }
.ilhacommerceVolkswagen-header__account {
display: flex; align-items: center; gap: 8px;
font-size: 14px; font-weight: 500; color: var(--ilhacommerceVolkswagen-text);
}
.ilhacommerceVolkswagen-header__account:hover { color: var(--ilhacommerceVolkswagen-red); }
.ilhacommerceVolkswagen-header__cart .elementor-menu-cart__toggle .elementor-button {
background: transparent; color: var(--ilhacommerceVolkswagen-text); padding: 0; font-weight: 500; font-size: 14px;
}
.ilhacommerceVolkswagen-header__cart .elementor-button-icon [data-counter]::before {
background: var(--ilhacommerceVolkswagen-red); color: #fff; font-weight: 700;
}
/* ============ Nav (unificada no container do header) ============ */
.ilhacommerceVolkswagen-header { border-bottom: 1px solid var(--ilhacommerceVolkswagen-border); }
/* desktop: nav ocupa a 2ª linha (esquerda) e o WhatsApp fecha a linha (direita) */
.ilhacommerceVolkswagen-nav { order: 5; flex: 1 1 60%; width: auto !important; --width: auto; }
.ilhacommerceVolkswagen-nav__whats-wrap { order: 6; width: auto !important; --width: auto; }
.ilhacommerceVolkswagen-nav .elementor-nav-menu a.elementor-item {
padding: 8px 14px; border-radius: 8px;
font-size: 14.5px; font-weight: 600; color: var(--ilhacommerceVolkswagen-text);
}
.ilhacommerceVolkswagen-nav .elementor-nav-menu a.elementor-item:hover,
.ilhacommerceVolkswagen-nav .elementor-nav-menu a.elementor-item.elementor-item-active {
background: var(--ilhacommerceVolkswagen-bg); color: var(--ilhacommerceVolkswagen-red);
}
/* item Promoções = último custom link */
.ilhacommerceVolkswagen-nav .elementor-nav-menu li:last-child a.elementor-item { color: var(--ilhacommerceVolkswagen-red); font-weight: 700; }
.ilhacommerceVolkswagen-nav .elementor-nav-menu li:last-child a.elementor-item:hover { background: var(--ilhacommerceVolkswagen-red-tint); }
.ilhacommerceVolkswagen-nav__whats {
display: flex; align-items: center; gap: 8px;
padding: 8px 14px; border-radius: 8px;
font-size: 14px; font-weight: 600; color: var(--ilhacommerceVolkswagen-green-text);
}
.ilhacommerceVolkswagen-nav__whats:hover { background: var(--ilhacommerceVolkswagen-green-tint); color: var(--ilhacommerceVolkswagen-green-text); }
/* ============ Footer ============ */
.ilhacommerceVolkswagen-footer { background: var(--ilhacommerceVolkswagen-dark); color: var(--ilhacommerceVolkswagen-text-dark); }
.ilhacommerceVolkswagen-footer__grid { padding: 0 !important; }
.ilhacommerceVolkswagen-footer__grid > .e-con-inner { padding: 56px 24px 32px !important; }
.ilhacommerceVolkswagen-footer__grid > .e-con-inner {
display: grid !important;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 40px;
}
.ilhacommerceVolkswagen-footer__col { gap: 16px; }
.ilhacommerceVolkswagen-footer__logo img { height: 40px; width: auto; background: #fff; padding: 6px 12px; border-radius: 8px; }
.ilhacommerceVolkswagen-footer__addr { font-size: 13.5px; line-height: 1.6; color: var(--ilhacommerceVolkswagen-text-dark); }
.ilhacommerceVolkswagen-footer__title .elementor-heading-title {
color: #fff !important; font-weight: 700; font-size: 14px;
letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px;
}
.ilhacommerceVolkswagen-footer__title--pag { margin-top: 16px; }
.ilhacommerceVolkswagen-footer__links .elementor-icon-list-item { padding: 3px 0; }
.ilhacommerceVolkswagen-footer__links a, .ilhacommerceVolkswagen-footer__links .elementor-icon-list-text {
color: var(--ilhacommerceVolkswagen-text-dark); font-size: 14px;
}
.ilhacommerceVolkswagen-footer__links a:hover .elementor-icon-list-text,
.ilhacommerceVolkswagen-footer__links a:hover { color: #fff; }
.ilhacommerceVolkswagen-footer__social .elementor-social-icon {
width: 36px; height: 36px; background: transparent;
border: 1px solid var(--ilhacommerceVolkswagen-dark-border); border-radius: 8px;
color: var(--ilhacommerceVolkswagen-text-dark); font-size: 16px;
}
.ilhacommerceVolkswagen-footer__social .elementor-social-icon:hover { border-color: var(--ilhacommerceVolkswagen-red); color: #fff; }
.ilhacommerceVolkswagen-footer__flags img { max-width: 180px; border-radius: 6px; }
.ilhacommerceVolkswagen-footer__bar { border-top: 1px solid var(--ilhacommerceVolkswagen-dark-divider); }
.ilhacommerceVolkswagen-footer__bar-in { padding: 0 !important; font-size: 13px; }
.ilhacommerceVolkswagen-footer__bar-in > .e-con-inner { padding: 20px 24px !important; }
/* ============ Responsivo header/footer ============ */
@media (max-width: 1024px) {
.ilhacommerceVolkswagen-footer__grid > .e-con-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
.ilhacommerceVolkswagen-topbar__right { display: none; }
/* linha 1: hamburger + logo ... Conta + Carrinho | linha 2: busca | linha 3: WhatsApp */
.ilhacommerceVolkswagen-header__in > .e-con-inner { padding: 10px 16px !important; }
.ilhacommerceVolkswagen-header__in > .e-con-inner { gap: 12px; }
.ilhacommerceVolkswagen-nav { order: 0; flex: 0 0 auto; }
.ilhacommerceVolkswagen-header__logo { order: 1; margin-right: auto; }
.ilhacommerceVolkswagen-header__logo img { height: 34px; }
.ilhacommerceVolkswagen-header__account-wrap { order: 2; width: auto !important; }
.ilhacommerceVolkswagen-header__account span { display: none; } /* só o ícone, como o carrinho */
.ilhacommerceVolkswagen-header__cart { order: 3; width: auto !important; }
.ilhacommerceVolkswagen-header__search { order: 4; flex-basis: 100% !important; }
.ilhacommerceVolkswagen-nav__whats-wrap { order: 5; flex-basis: 100%; }
.ilhacommerceVolkswagen-nav__whats { justify-content: center; min-height: 44px; }
.ilhacommerceVolkswagen-footer__grid > .e-con-inner { grid-template-columns: 1fr; gap: 28px; }
.ilhacommerceVolkswagen-footer__bar-in { flex-direction: column; gap: 6px; text-align: center; }
}
/* ============ Archive: hero da categoria ============ */
.ilhacommerceVolkswagen-archhero { background: var(--ilhacommerceVolkswagen-surface); border-bottom: 1px solid var(--ilhacommerceVolkswagen-border); }
.ilhacommerceVolkswagen-archhero__in { padding: 0 !important; }
.ilhacommerceVolkswagen-archhero__in > .e-con-inner { padding: 28px 24px !important; }
.ilhacommerceVolkswagen-archhero .woocommerce-breadcrumb {
font-size: 13.5px !important; color: var(--ilhacommerceVolkswagen-text-2) !important; margin: 0 0 10px !important;
}
.ilhacommerceVolkswagen-archhero .woocommerce-breadcrumb a { color: var(--ilhacommerceVolkswagen-text-2); }
.ilhacommerceVolkswagen-archhero .woocommerce-breadcrumb a:hover { color: var(--ilhacommerceVolkswagen-red); }
.ilhacommerceVolkswagen-archhero__title .elementor-heading-title {
font-size: 34px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px;
}
.ilhacommerceVolkswagen-archhero__count { font-size: 15px; color: var(--ilhacommerceVolkswagen-text-2); }
/* ============ Archive: layout 250px + 1fr ============ */
/* containers boxed do Elementor envolvem os filhos em .e-con-inner — o grid e o padding vão NELE */
.ilhacommerceVolkswagen-archive { padding: 0 !important; }
.ilhacommerceVolkswagen-archive__main, .ilhacommerceVolkswagen-filtros ~ .ilhacommerceVolkswagen-archive__main { padding: 0 !important; }
.ilhacommerceVolkswagen-archive > .e-con-inner { padding: 28px 24px 64px !important; }
.ilhacommerceVolkswagen-archive > .e-con-inner {
display: grid !important;
grid-template-columns: 250px 1fr;
gap: 28px;
align-items: start;
}
/* ============ Sidebar de filtros (re-skin do HUSKY) ============ */
.ilhacommerceVolkswagen-filtros {
background: var(--ilhacommerceVolkswagen-surface);
border: 1px solid var(--ilhacommerceVolkswagen-border);
border-radius: 16px;
padding: 22px;
position: sticky;
top: 16px;
gap: 0;
}
.ilhacommerceVolkswagen-filtros__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ilhacommerceVolkswagen-filtros__head .titulo { font-size: 16px; font-weight: 800; }
.ilhacommerceVolkswagen-filtros__head a { font-size: 13px; color: var(--ilhacommerceVolkswagen-red); font-weight: 600; }
.ilhacommerceVolkswagen-filtros .woof_container { margin: 0 !important; padding: 16px 0 !important; border-top: 1px solid var(--ilhacommerceVolkswagen-border); }
.ilhacommerceVolkswagen-filtros .woof_container:first-of-type { border-top: none; }
.ilhacommerceVolkswagen-filtros .woof_container h4, .ilhacommerceVolkswagen-filtros .woof_container .woof_container_overlay_item {
font-size: 13px !important; font-weight: 700 !important;
letter-spacing: .06em; text-transform: uppercase; color: var(--ilhacommerceVolkswagen-text-2) !important;
margin: 0 0 10px !important;
}
.ilhacommerceVolkswagen-filtros .woof_list { margin: 0 !important; }
.ilhacommerceVolkswagen-filtros .woof_list li { padding: 4px 0 !important; margin: 0 !important; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* a sublista de anos (aberta pelo "+") quebra para a linha de baixo, indentada */
.ilhacommerceVolkswagen-filtros .woof_childs_list { flex-basis: 100%; }
/* o "+"/"-" de expandir */
.ilhacommerceVolkswagen-filtros .woof_list .woof_childs_list_opener { margin-left: 4px; }
.ilhacommerceVolkswagen-filtros .woof_list input[type=checkbox], .ilhacommerceVolkswagen-filtros .woof_list input[type=radio] {
width: 17px !important; height: 17px !important; accent-color: var(--ilhacommerceVolkswagen-red) !important; margin: 0 !important;
}
.ilhacommerceVolkswagen-filtros .woof_list label {
font-size: 14.5px !important; color: var(--ilhacommerceVolkswagen-text) !important; cursor: pointer;
display: flex !important; align-items: center; gap: 8px; flex: 1;
}
.ilhacommerceVolkswagen-filtros .woof_list .woof_checkbox_count, .ilhacommerceVolkswagen-filtros .woof_count {
margin-left: auto !important; color: var(--ilhacommerceVolkswagen-text-2) !important; font-size: 13px !important; background: none !important;
}
.ilhacommerceVolkswagen-filtros .woof_submit_search_form_container { margin: 8px 0 0 !important; }
.ilhacommerceVolkswagen-filtros button, .ilhacommerceVolkswagen-filtros .woof_reset_search_form, .ilhacommerceVolkswagen-filtros .woof_submit_search_form {
background: var(--ilhacommerceVolkswagen-dark) !important; color: #fff !important;
border: none !important; border-radius: 8px !important; height: 40px !important;
font-family: 'Inter', sans-serif !important; font-weight: 600 !important; font-size: 14px !important;
}
.ilhacommerceVolkswagen-filtros .woof_reset_search_form { background: transparent !important; color: var(--ilhacommerceVolkswagen-red) !important; }
/* ============ Toolbar de ordenação ============ */
.ilhacommerceVolkswagen-orderby { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; }
.ilhacommerceVolkswagen-orderby__label { font-size: 14px; color: var(--ilhacommerceVolkswagen-text-2); margin-right: 6px; }
.ilhacommerceVolkswagen-orderby__pill {
border: 1.5px solid var(--ilhacommerceVolkswagen-border); background: var(--ilhacommerceVolkswagen-surface); color: var(--ilhacommerceVolkswagen-text);
border-radius: 999px; padding: 8px 16px; font-size: 13.5px; font-weight: 600; line-height: 1;
}
.ilhacommerceVolkswagen-orderby__pill:hover { border-color: var(--ilhacommerceVolkswagen-dark); color: var(--ilhacommerceVolkswagen-text); }
.ilhacommerceVolkswagen-orderby__pill.is-active { background: var(--ilhacommerceVolkswagen-dark); border-color: var(--ilhacommerceVolkswagen-dark); color: #fff; }
/* ============ Paginação do Loop Grid ============ */
.ilhacommerceVolkswagen-archive .elementor-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 36px; }
.ilhacommerceVolkswagen-archive .elementor-pagination .page-numbers {
width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
border: 1.5px solid var(--ilhacommerceVolkswagen-border); background: var(--ilhacommerceVolkswagen-surface); color: var(--ilhacommerceVolkswagen-text);
border-radius: 10px; font-size: 15px; font-weight: 600;
}
.ilhacommerceVolkswagen-archive .elementor-pagination .page-numbers:hover { border-color: var(--ilhacommerceVolkswagen-dark); }
.ilhacommerceVolkswagen-archive .elementor-pagination .page-numbers.current {
background: var(--ilhacommerceVolkswagen-red); border-color: var(--ilhacommerceVolkswagen-red); color: #fff; font-weight: 700;
}
.ilhacommerceVolkswagen-archive .elementor-pagination .page-numbers.dots { border: none; color: var(--ilhacommerceVolkswagen-gray); }
/* grupos longos de filtro (Aplicação, Tipo da Peça, Marca): caixa rolável em vez de parede */
.ilhacommerceVolkswagen-filtros .woof_container_pa_aplicacao .woof_block_html_items,
.ilhacommerceVolkswagen-filtros .woof_container_pa_tipo-da-peca .woof_block_html_items,
.ilhacommerceVolkswagen-filtros .woof_container_pa_marca .woof_block_html_items,
.ilhacommerceVolkswagen-filtros .woof_container_product_cat .woof_block_html_items {
max-height: 280px;
overflow-y: auto;
padding-right: 6px;
scrollbar-width: thin;
scrollbar-color: var(--ilhacommerceVolkswagen-border-hover) transparent;
}
@media (max-width: 1024px) {
.ilhacommerceVolkswagen-archive > .e-con-inner { grid-template-columns: 220px 1fr; gap: 20px; }
}
@media (max-width: 767px) {
.ilhacommerceVolkswagen-archive > .e-con-inner { grid-template-columns: 1fr; }
.ilhacommerceVolkswagen-filtros { position: static; }
}
/* hierarquia Modelo > anos no filtro Aplicação */
.ilhacommerceVolkswagen-filtros .woof_childs_list { margin-left: 18px !important; padding-left: 0 !important; }
.ilhacommerceVolkswagen-filtros .woof_list > li > label { font-weight: 700 !important; }
.ilhacommerceVolkswagen-filtros .woof_childs_list label { font-weight: 400 !important; font-size: 13.5px !important; }
/* Headings usam a Global Color "Primary" (vermelho) por padrão — títulos são charcoal no design */
.ilhacommerceVolkswagen-archhero__title .elementor-heading-title,
.ilhacommerceVolkswagen-card__cat .elementor-heading-title,
.ilhacommerceVolkswagen-card__title .elementor-heading-title,
.ilhacommerceVolkswagen-card__title .elementor-heading-title a { color: var(--ilhacommerceVolkswagen-text) !important; }
.ilhacommerceVolkswagen-card__cat .elementor-heading-title { color: var(--ilhacommerceVolkswagen-text-2) !important; }
.ilhacommerceVolkswagen-card__title a:hover { color: var(--ilhacommerceVolkswagen-red) !important; }
/* ============ Toolbar: chips dos filtros ativos ============ */
.ilhacommerceVolkswagen-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.ilhacommerceVolkswagen-toolbar .ilhacommerceVolkswagen-orderby { margin-bottom: 0; }
.ilhacommerceVolkswagen-toolbar__chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ilhacommerceVolkswagen-chip {
display: inline-flex; align-items: center; gap: 8px;
background: var(--ilhacommerceVolkswagen-dark); color: #fff;
font-size: 13.5px; font-weight: 600; line-height: 1;
padding: 0 14px; min-height: 40px; border-radius: 999px;
}
.ilhacommerceVolkswagen-chip span { opacity: .7; font-size: 15px; }
.ilhacommerceVolkswagen-chip:hover { background: var(--ilhacommerceVolkswagen-dark-hover); color: #fff; }
.ilhacommerceVolkswagen-chip:hover span { opacity: 1; }
/* ============ Filtro colapsável (WOOF autohide) ============ */
/* o WOOF abre o painel como dropdown absoluto/transparente — aqui ele entra no fluxo
e EMPURRA o conteúdo para baixo, com fundo branco (decisão do cliente) */
.ilhacommerceVolkswagen-filtros .woof_autohide_wrapper { position: static !important; }
.ilhacommerceVolkswagen-filtros .woof_auto_show {
position: static !important;
background: var(--ilhacommerceVolkswagen-surface) !important;
}
/* aberto, o WOOF troca a classe para .woof_hide_auto_form — estilizar os DOIS estados */
.ilhacommerceVolkswagen-filtros .woof_show_auto_form,
.ilhacommerceVolkswagen-filtros .woof_hide_auto_form {
display: none;
align-items: center;
justify-content: center;
width: 100%;
min-height: 44px;
background: var(--ilhacommerceVolkswagen-dark) !important;
background-image: none !important;
color: #fff !important;
border-radius: var(--ilhacommerceVolkswagen-radius-btn);
text-decoration: none;
font-size: 0; /* esconde o texto fixo "Filtrar"; o rótulo vem do ::before por estado */
}
.ilhacommerceVolkswagen-filtros .woof_show_auto_form::before,
.ilhacommerceVolkswagen-filtros .woof_hide_auto_form::before {
font: 600 14.5px 'Inter', sans-serif;
color: #fff;
}
.ilhacommerceVolkswagen-filtros .woof_show_auto_form::before { content: '☰ Filtrar'; }
.ilhacommerceVolkswagen-filtros .woof_hide_auto_form { background: var(--ilhacommerceVolkswagen-dark-hover) !important; margin-bottom: 12px; }
.ilhacommerceVolkswagen-filtros .woof_hide_auto_form::before { content: '✕ Fechar filtros'; }
@media (min-width: 768px) {
/* desktop: painel sempre aberto, sem botão */
.ilhacommerceVolkswagen-filtros .woof_auto_show {
opacity: 1 !important;
height: auto !important;
}
.ilhacommerceVolkswagen-filtros .woof_show_auto_form,
.ilhacommerceVolkswagen-filtros .woof_hide_auto_form { display: none !important; }
}
@media (max-width: 767px) {
.ilhacommerceVolkswagen-filtros .woof_show_auto_form,
.ilhacommerceVolkswagen-filtros .woof_hide_auto_form { display: flex !important; }
}
/* Ordenação: pills no desktop, dropdown nativo no mobile */
.ilhacommerceVolkswagen-orderby__select {
display: none;
width: 100%;
min-height: 44px;
border: 1.5px solid var(--ilhacommerceVolkswagen-border);
border-radius: var(--ilhacommerceVolkswagen-radius-btn);
background: var(--ilhacommerceVolkswagen-surface);
font: 600 14px 'Inter', sans-serif;
color: var(--ilhacommerceVolkswagen-text);
padding: 0 12px;
}
@media (max-width: 767px) {
.ilhacommerceVolkswagen-orderby__label, .ilhacommerceVolkswagen-orderby__pill { display: none; }
.ilhacommerceVolkswagen-orderby__select { display: block; }
}
/* Carrinho do header: só ícone + badge (sem subtotal), nunca quebra linha */
.ilhacommerceVolkswagen-header__cart { width: auto !important; --width: auto; flex-shrink: 0; }
.ilhacommerceVolkswagen-header__cart .elementor-menu-cart__toggle .elementor-button-text { display: none; }
.ilhacommerceVolkswagen-header__cart .elementor-menu-cart__toggle .elementor-button {
background: transparent !important;
padding: 0 !important;
color: var(--ilhacommerceVolkswagen-text) !important;
}
/* ============ Dropdown do hamburger (mobile) ============ */
@media (max-width: 767px) {
.ilhacommerceVolkswagen-header { position: relative; }
.ilhacommerceVolkswagen-nav { position: static !important; }
.ilhacommerceVolkswagen-nav .elementor-nav-menu--dropdown.elementor-nav-menu__container {
position: absolute !important;
top: 100% !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
margin: 0 !important;
background: var(--ilhacommerceVolkswagen-surface) !important;
border-top: 1px solid var(--ilhacommerceVolkswagen-border);
border-bottom: 1px solid var(--ilhacommerceVolkswagen-border);
box-shadow: var(--ilhacommerceVolkswagen-shadow-card);
z-index: 999;
}
.ilhacommerceVolkswagen-nav .elementor-nav-menu--dropdown a.elementor-item {
padding: 14px 20px !important;
font-size: 15px !important;
font-weight: 600 !important;
color: var(--ilhacommerceVolkswagen-text) !important;
border-bottom: 1px solid var(--ilhacommerceVolkswagen-border);
border-radius: 0;
background: var(--ilhacommerceVolkswagen-surface) !important;
}
.ilhacommerceVolkswagen-nav .elementor-nav-menu--dropdown li:last-child a.elementor-item {
color: var(--ilhacommerceVolkswagen-red) !important;
border-bottom: none;
}
.ilhacommerceVolkswagen-nav .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active,
.ilhacommerceVolkswagen-nav .elementor-nav-menu--dropdown a.elementor-item:active {
background: var(--ilhacommerceVolkswagen-bg) !important;
color: var(--ilhacommerceVolkswagen-red) !important;
}
/* toggle com alvo de 44px */
.ilhacommerceVolkswagen-nav .elementor-menu-toggle { width: 44px; height: 44px; }
}
/* ============ HOME: hero ============ */
.ilhacommerceVolkswagen-hero { background: var(--ilhacommerceVolkswagen-dark); color: #fff; padding: 0 !important; }
.ilhacommerceVolkswagen-hero__in { padding: 0 !important; }
.ilhacommerceVolkswagen-hero__in > .e-con-inner { padding: 56px 24px 64px !important; }
.ilhacommerceVolkswagen-hero__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; }
.ilhacommerceVolkswagen-hero__eyebrow {
display: inline-flex; align-items: center; gap: 8px;
background: rgba(0, 130, 214, .14); border: 1px solid rgba(0, 130, 214, .45);
color: #6BC5F2; font-size: 13px; font-weight: 700; letter-spacing: .08em;
padding: 6px 14px; border-radius: 999px; text-transform: uppercase;
}
.ilhacommerceVolkswagen-hero__grid h1 {
font-size: 52px !important; line-height: 1.08 !important; font-weight: 800 !important;
margin: 20px 0 16px; letter-spacing: -.02em; color: #fff !important;
}
.ilhacommerceVolkswagen-hero__grid p { font-size: 18px; line-height: 1.55; color: var(--ilhacommerceVolkswagen-text-dark); margin: 0 0 32px; max-width: 480px; }
.ilhacommerceVolkswagen-hero__ctas { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.ilhacommerceVolkswagen-hero__cta {
background: var(--ilhacommerceVolkswagen-red); color: #fff !important; font-weight: 700; font-size: 16px;
padding: 15px 30px; border-radius: 10px; display: inline-block;
}
.ilhacommerceVolkswagen-hero__cta:hover { background: var(--ilhacommerceVolkswagen-red-hover); }
.ilhacommerceVolkswagen-hero__cta--ghost { background: transparent; border: 1.5px solid var(--ilhacommerceVolkswagen-dark-border); font-weight: 600; padding: 14px 28px; }
.ilhacommerceVolkswagen-hero__cta--ghost:hover { background: transparent; border-color: #fff; }
.ilhacommerceVolkswagen-hero__card { background: #fff; border-radius: 20px; padding: 20px; box-shadow: var(--ilhacommerceVolkswagen-shadow-hero); color: var(--ilhacommerceVolkswagen-text); }
.ilhacommerceVolkswagen-hero__card img {
width: 100%;
aspect-ratio: 3 / 2; /* janela fixa: fotos quadradas ou paisagem geram cards da MESMA altura */
object-fit: contain;
background: #fff;
border-radius: 12px;
display: block;
}
.ilhacommerceVolkswagen-hero__card-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 8px 4px; }
.ilhacommerceVolkswagen-hero__card-nome { font-size: 14px; color: var(--ilhacommerceVolkswagen-text-2); font-weight: 500; }
.ilhacommerceVolkswagen-hero__card-preco { font-size: 22px; font-weight: 800; color: var(--ilhacommerceVolkswagen-text); }
.ilhacommerceVolkswagen-hero__card-preco span { font-size: 13px; font-weight: 500; color: var(--ilhacommerceVolkswagen-text-2); }
.ilhacommerceVolkswagen-hero__card-btn {
background: var(--ilhacommerceVolkswagen-dark); color: #fff !important; font-weight: 600; font-size: 14px;
padding: 10px 20px; border-radius: 8px; flex-shrink: 0;
}
.ilhacommerceVolkswagen-hero__card-btn:hover { background: var(--ilhacommerceVolkswagen-red); }
/* ============ HOME: seções claras ============ */
.ilhacommerceVolkswagen-sec { padding: 0 !important; }
.ilhacommerceVolkswagen-sec__in { padding: 0 !important; }
.ilhacommerceVolkswagen-sec__in > .e-con-inner { padding: 44px 24px !important; }
.ilhacommerceVolkswagen-sec--branca { background: var(--ilhacommerceVolkswagen-surface); border-bottom: 1px solid var(--ilhacommerceVolkswagen-border); }
.ilhacommerceVolkswagen-sec__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 24px; gap: 16px; flex-wrap: wrap; }
.ilhacommerceVolkswagen-sec__head h2 { font-size: 26px; font-weight: 800; margin: 0; letter-spacing: -.01em; color: var(--ilhacommerceVolkswagen-text); }
.ilhacommerceVolkswagen-sec__head .sub { font-size: 14px; color: var(--ilhacommerceVolkswagen-text-2); }
.ilhacommerceVolkswagen-sec__head .ver-todos { font-size: 14.5px; font-weight: 600; color: var(--ilhacommerceVolkswagen-red); }
/* modelos */
.ilhacommerceVolkswagen-modelos { display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px; }
.ilhacommerceVolkswagen-modelos a {
background: var(--ilhacommerceVolkswagen-bg); border: 1.5px solid transparent; border-radius: 14px;
padding: 18px 10px 14px; text-align: center; display: block; color: var(--ilhacommerceVolkswagen-text);
}
.ilhacommerceVolkswagen-modelos a:hover { border-color: var(--ilhacommerceVolkswagen-red); background: #fff; }
.ilhacommerceVolkswagen-modelos img { width: 100%; height: 56px; object-fit: contain; display: block; }
.ilhacommerceVolkswagen-modelos .nome { font-weight: 700; font-size: 15px; margin-top: 10px; }
/* trust bar */
.ilhacommerceVolkswagen-trust { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.ilhacommerceVolkswagen-trust__item { display: flex; align-items: center; gap: 14px; }
.ilhacommerceVolkswagen-trust__chip {
width: 46px; height: 46px; border-radius: 12px; background: var(--ilhacommerceVolkswagen-red-tint);
color: var(--ilhacommerceVolkswagen-red); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ilhacommerceVolkswagen-trust__titulo { font-weight: 700; font-size: 14.5px; color: var(--ilhacommerceVolkswagen-text); }
.ilhacommerceVolkswagen-trust__sub { font-size: 13px; color: var(--ilhacommerceVolkswagen-text-2); }
/* categorias */
.ilhacommerceVolkswagen-cats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.ilhacommerceVolkswagen-cats a {
background: var(--ilhacommerceVolkswagen-surface); border: 1px solid var(--ilhacommerceVolkswagen-border); border-radius: 16px;
padding: 24px; display: flex; flex-direction: column; gap: 10px; min-height: 130px; color: var(--ilhacommerceVolkswagen-text);
}
.ilhacommerceVolkswagen-cats a:hover { border-color: var(--ilhacommerceVolkswagen-red); box-shadow: 0 8px 24px rgba(21, 24, 29, .08); }
.ilhacommerceVolkswagen-cats .titulo { font-size: 18px; font-weight: 800; }
.ilhacommerceVolkswagen-cats .desc { font-size: 14px; color: var(--ilhacommerceVolkswagen-text-2); line-height: 1.5; }
.ilhacommerceVolkswagen-cats .link { margin-top: auto; color: var(--ilhacommerceVolkswagen-red); font-weight: 700; font-size: 14px; }
/* banner promo */
.ilhacommerceVolkswagen-promo {
background: var(--ilhacommerceVolkswagen-red); color: #fff !important; border-radius: 20px; padding: 40px 48px;
display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap;
}
.ilhacommerceVolkswagen-promo:hover { background: var(--ilhacommerceVolkswagen-red-hover); }
.ilhacommerceVolkswagen-promo .eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
.ilhacommerceVolkswagen-promo .titulo { font-size: 32px; font-weight: 800; letter-spacing: -.01em; margin-top: 6px; }
.ilhacommerceVolkswagen-promo .btn { background: #fff; color: var(--ilhacommerceVolkswagen-red); font-weight: 700; font-size: 15px; padding: 14px 28px; border-radius: 10px; flex-shrink: 0; }
/* responsivo home */
@media (max-width: 1024px) {
.ilhacommerceVolkswagen-hero__grid { grid-template-columns: 1fr; gap: 32px; }
.ilhacommerceVolkswagen-hero__grid h1 { font-size: 40px !important; }
.ilhacommerceVolkswagen-modelos { grid-template-columns: repeat(4, 1fr); }
.ilhacommerceVolkswagen-trust { grid-template-columns: 1fr 1fr; gap: 16px; }
.ilhacommerceVolkswagen-cats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
.ilhacommerceVolkswagen-hero__in > .e-con-inner { padding: 36px 16px 44px !important; }
.ilhacommerceVolkswagen-hero__grid h1 { font-size: 32px !important; }
.ilhacommerceVolkswagen-sec__in > .e-con-inner { padding: 32px 16px !important; }
.ilhacommerceVolkswagen-modelos { grid-template-columns: repeat(2, 1fr); }
.ilhacommerceVolkswagen-cats { grid-template-columns: 1fr; }
.ilhacommerceVolkswagen-promo { padding: 28px 24px; }
.ilhacommerceVolkswagen-promo .titulo { font-size: 24px; }
}
/* ============ PDP ============ */
.ilhacommerceVolkswagen-pdp-bc { padding: 0 !important; }
.ilhacommerceVolkswagen-pdp-bc > .e-con-inner { padding: 20px 24px 0 !important; }
.ilhacommerceVolkswagen-pdp { padding: 0 !important; }
.ilhacommerceVolkswagen-pdp > .e-con-inner {
display: grid !important;
grid-template-columns: 1.05fr 1fr;
gap: 24px 40px;
align-items: start;
padding: 20px 24px 48px !important;
}
.ilhacommerceVolkswagen-pdp__left { gap: 12px; }
/* galeria */
.ilhacommerceVolkswagen-pdp__galcard {
background: var(--ilhacommerceVolkswagen-surface);
border: 1px solid var(--ilhacommerceVolkswagen-border);
border-radius: 20px;
padding: 24px !important;
position: relative;
}
.ilhacommerceVolkswagen-pdp__badge {
position: absolute; top: 20px; left: 20px; z-index: 5;
background: var(--ilhacommerceVolkswagen-dark); color: #fff;
font-size: 12px; font-weight: 700; letter-spacing: .05em;
padding: 6px 12px; border-radius: 999px; text-transform: uppercase;
}
.ilhacommerceVolkswagen-pdp__galcard .woocommerce-product-gallery__image img { border-radius: 12px; }
.ilhacommerceVolkswagen-pdp__galcard .flex-control-thumbs { display: flex; gap: 12px; margin-top: 12px !important; }
.ilhacommerceVolkswagen-pdp__galcard .flex-control-thumbs li { width: 88px !important; }
.ilhacommerceVolkswagen-pdp__galcard .flex-control-thumbs img {
border: 1.5px solid var(--ilhacommerceVolkswagen-border); border-radius: 12px; padding: 4px; opacity: 1 !important;
}
.ilhacommerceVolkswagen-pdp__galcard .flex-control-thumbs img.flex-active { border: 2px solid var(--ilhacommerceVolkswagen-red); }
/* compatibilidade */
.ilhacommerceVolkswagen-pdp__compat {
background: var(--ilhacommerceVolkswagen-surface);
border: 1px solid var(--ilhacommerceVolkswagen-border);
border-radius: 20px;
padding: 24px !important;
}
.ilhacommerceVolkswagen-pdp__compat-titulo { font-size: 16px; font-weight: 800; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; color: var(--ilhacommerceVolkswagen-text); }
.ilhacommerceVolkswagen-pdp__compat-titulo svg { color: var(--ilhacommerceVolkswagen-red); flex-shrink: 0; }
.ilhacommerceVolkswagen-pdp__compat-obs { font-size: 13px; color: var(--ilhacommerceVolkswagen-text-2); margin-top: 12px; }
.ilhacommerceVolkswagen-pdp__compat-obs a { color: var(--ilhacommerceVolkswagen-green-text); font-weight: 600; }
/* coluna de compra */
.ilhacommerceVolkswagen-pdp__buy {
background: var(--ilhacommerceVolkswagen-surface);
border: 1px solid var(--ilhacommerceVolkswagen-border);
border-radius: 20px;
padding: 28px !important;
gap: 0;
position: sticky;
top: 16px;
}
.ilhacommerceVolkswagen-pdp__meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ilhacommerceVolkswagen-text-2); flex-wrap: wrap; }
.ilhacommerceVolkswagen-pdp__meta a { color: var(--ilhacommerceVolkswagen-red); font-weight: 600; }
.ilhacommerceVolkswagen-pdp__meta .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--ilhacommerceVolkswagen-border-hover); }
.ilhacommerceVolkswagen-pdp__meta .fill { flex: 1; }
.ilhacommerceVolkswagen-stock {
display: inline-flex; align-items: center; gap: 6px;
background: var(--ilhacommerceVolkswagen-green-tint); color: var(--ilhacommerceVolkswagen-green-text);
font-weight: 700; font-size: 12.5px; padding: 5px 12px; border-radius: 999px;
}
.ilhacommerceVolkswagen-stock .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ilhacommerceVolkswagen-green); }
.ilhacommerceVolkswagen-stock--enc { background: var(--ilhacommerceVolkswagen-amber-tint); color: var(--ilhacommerceVolkswagen-amber-text); }
.ilhacommerceVolkswagen-stock--enc .dot { background: var(--ilhacommerceVolkswagen-amber-text); }
.ilhacommerceVolkswagen-stock--off { background: var(--ilhacommerceVolkswagen-bg); color: var(--ilhacommerceVolkswagen-text-2); }
.ilhacommerceVolkswagen-pdp__titulo .elementor-heading-title, .ilhacommerceVolkswagen-pdp__titulo h1 {
font-size: 28px !important; font-weight: 800 !important; line-height: 1.2 !important;
margin: 12px 0 8px !important; letter-spacing: -.01em; color: var(--ilhacommerceVolkswagen-text) !important;
}
.ilhacommerceVolkswagen-pdp__desc, .ilhacommerceVolkswagen-pdp__desc p { font-size: 14.5px; color: var(--ilhacommerceVolkswagen-text-2); line-height: 1.6; }
/* bloco de preço */
.ilhacommerceVolkswagen-pdp__price { background: var(--ilhacommerceVolkswagen-bg); border-radius: 14px; padding: 20px !important; margin-top: 20px; }
.ilhacommerceVolkswagen-pdp__price .woocommerce-Price-amount { font-size: 34px; font-weight: 800; letter-spacing: -.02em; color: var(--ilhacommerceVolkswagen-text); }
.ilhacommerceVolkswagen-pdp__price del .woocommerce-Price-amount { font-size: 16px; font-weight: 400; color: var(--ilhacommerceVolkswagen-text-2); text-decoration: line-through; }
.ilhacommerceVolkswagen-pdp__price del { text-decoration: none; }
.ilhacommerceVolkswagen-pdp__price ins { text-decoration: none; }
.ilhacommerceVolkswagen-pdp__price .ilhacommerceVolkswagen-parcelas { font-size: 14.5px; color: var(--ilhacommerceVolkswagen-text); margin-top: 4px; }
.ilhacommerceVolkswagen-pdp__price .ilhacommerceVolkswagen-parcelas .woocommerce-Price-amount { font-size: 14.5px; font-weight: 700; }
.ilhacommerceVolkswagen-pdp__price .ilhacommerceVolkswagen-pix .woocommerce-Price-amount { font-size: 13.5px; font-weight: 600; color: var(--ilhacommerceVolkswagen-green-text); }
/* quantidade + comprar */
.ilhacommerceVolkswagen-pdp__cart form.cart { display: flex; gap: 12px; margin-top: 20px; align-items: stretch; }
.ilhacommerceVolkswagen-pdp__cart .quantity { display: flex; }
.ilhacommerceVolkswagen-pdp__cart .quantity .qty {
width: 72px; height: 52px;
border: 1.5px solid var(--ilhacommerceVolkswagen-border); border-radius: 10px;
text-align: center; font: 700 16px 'Inter', sans-serif; color: var(--ilhacommerceVolkswagen-text);
}
.ilhacommerceVolkswagen-pdp__cart .single_add_to_cart_button {
flex: 1;
background: var(--ilhacommerceVolkswagen-red) !important; color: #fff !important;
border: none !important; border-radius: 10px !important;
font: 700 16px 'Inter', sans-serif !important;
height: 52px; cursor: pointer;
}
.ilhacommerceVolkswagen-pdp__cart .single_add_to_cart_button:hover { background: var(--ilhacommerceVolkswagen-red-hover) !important; }
/* whatsapp */
.ilhacommerceVolkswagen-pdp__whats {
display: flex; align-items: center; justify-content: center; gap: 10px;
border: 1.5px solid var(--ilhacommerceVolkswagen-green); color: var(--ilhacommerceVolkswagen-green-text) !important;
font-weight: 700; font-size: 15px; border-radius: 10px; min-height: 50px; margin-top: 12px;
}
.ilhacommerceVolkswagen-pdp__whats:hover { background: var(--ilhacommerceVolkswagen-green-tint); }
/* frete (wc-simulador-frete re-skin) */
.ilhacommerceVolkswagen-pdp__frete { border-top: 1px solid var(--ilhacommerceVolkswagen-border); margin-top: 24px; padding-top: 20px; }
.ilhacommerceVolkswagen-pdp__frete-titulo { font-size: 15px; font-weight: 800; margin-bottom: 12px; display: flex; align-items: center; gap: 10px; color: var(--ilhacommerceVolkswagen-text); }
.ilhacommerceVolkswagen-pdp__frete-titulo svg { color: var(--ilhacommerceVolkswagen-red); }
.ilhacommerceVolkswagen-pdp__frete .shipping-simulator-wrapper label { flex: 1; display: flex; }
.ilhacommerceVolkswagen-pdp__frete .shipping-simulator-wrapper label svg.icon,
.ilhacommerceVolkswagen-pdp__frete .shipping-simulator-wrapper label .text { display: none; }
.ilhacommerceVolkswagen-pdp__frete .shipping-simulator-wrapper label input { width: 100%; }
.ilhacommerceVolkswagen-pdp__frete .shipping-simulator-wrapper button { font-size: 0 !important; }
.ilhacommerceVolkswagen-pdp__frete .shipping-simulator-wrapper button::before { content: 'Calcular'; font: 600 14px 'Inter', sans-serif; color: #fff; }
.ilhacommerceVolkswagen-pdp__frete .shipping-simulator-wrapper { display: flex; gap: 10px; }
.ilhacommerceVolkswagen-pdp__frete .shipping-simulator-wrapper input[type=text],
.ilhacommerceVolkswagen-pdp__frete .shipping-simulator-wrapper input[type=tel] {
flex: 1; border: 1.5px solid var(--ilhacommerceVolkswagen-border) !important; border-radius: 10px !important;
height: 46px; padding: 0 16px; font: 400 15px 'Inter', sans-serif; color: var(--ilhacommerceVolkswagen-text);
background: var(--ilhacommerceVolkswagen-surface) !important;
}
.ilhacommerceVolkswagen-pdp__frete .shipping-simulator-wrapper button,
.ilhacommerceVolkswagen-pdp__frete .shipping-simulator-wrapper input[type=submit] {
background: var(--ilhacommerceVolkswagen-dark) !important; color: #fff !important;
border: none !important; border-radius: 10px !important; padding: 0 24px;
font: 600 14px 'Inter', sans-serif !important; height: 46px; cursor: pointer;
}
.ilhacommerceVolkswagen-pdp__frete .shipping-simulator-results { margin-top: 14px; }
.ilhacommerceVolkswagen-pdp__frete .shipping-simulator-results li,
.ilhacommerceVolkswagen-pdp__frete .shipping-simulator-results tr {
display: flex; justify-content: space-between; align-items: center; gap: 10px;
background: var(--ilhacommerceVolkswagen-bg); border-radius: 10px; padding: 12px 16px;
font-size: 14px; margin-bottom: 8px; list-style: none;
}
.ilhacommerceVolkswagen-pdp__frete .shipping-simulator-results li[class*=pickup],
.ilhacommerceVolkswagen-pdp__frete .shipping-simulator-results li[class*=free] { background: var(--ilhacommerceVolkswagen-green-tint); }
/* selos */
.ilhacommerceVolkswagen-pdp__selos { border-top: 1px solid var(--ilhacommerceVolkswagen-border); margin-top: 24px; padding-top: 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ilhacommerceVolkswagen-pdp__selos .item { display: flex; align-items: center; gap: 12px; font-size: 13.5px; color: var(--ilhacommerceVolkswagen-text); }
.ilhacommerceVolkswagen-pdp__selos .chip { width: 38px; height: 38px; border-radius: 10px; background: var(--ilhacommerceVolkswagen-red-tint); color: var(--ilhacommerceVolkswagen-red); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ilhacommerceVolkswagen-pdp__selos .sub { color: var(--ilhacommerceVolkswagen-text-2); }
/* abas */
.ilhacommerceVolkswagen-pdp-tabs { padding: 0 !important; }
.ilhacommerceVolkswagen-pdp-tabs > .e-con-inner { padding: 0 24px 48px !important; }
.ilhacommerceVolkswagen-pdp__tabs .woocommerce-tabs {
background: var(--ilhacommerceVolkswagen-surface); border: 1px solid var(--ilhacommerceVolkswagen-border); border-radius: 20px; overflow: hidden;
}
.ilhacommerceVolkswagen-pdp__tabs .woocommerce-tabs ul.wc-tabs {
display: flex; gap: 4px; border-bottom: 1px solid var(--ilhacommerceVolkswagen-border);
padding: 8px 20px 0 !important; margin: 0 !important; background: var(--ilhacommerceVolkswagen-surface) !important; list-style: none;
}
.ilhacommerceVolkswagen-pdp__tabs .woocommerce-tabs ul.wc-tabs li { background: none !important; border: none !important; margin: 0 !important; }
.ilhacommerceVolkswagen-pdp__tabs .woocommerce-tabs ul.wc-tabs li a {
display: block; font: 700 15px 'Inter', sans-serif; color: var(--ilhacommerceVolkswagen-text-2) !important;
padding: 14px 18px !important; border-bottom: 3px solid transparent !important;
}
.ilhacommerceVolkswagen-pdp__tabs .woocommerce-tabs ul.wc-tabs li.active a { color: var(--ilhacommerceVolkswagen-text) !important; border-bottom-color: var(--ilhacommerceVolkswagen-red) !important; }
.ilhacommerceVolkswagen-pdp__tabs .woocommerce-Tabs-panel { padding: 28px !important; font-size: 15px; line-height: 1.7; color: #2B4570; }
.ilhacommerceVolkswagen-pdp__tabs .woocommerce-Tabs-panel h2:first-of-type { display: none; }
.ilhacommerceVolkswagen-pdp__tabs .woocommerce-product-attributes th { background: var(--ilhacommerceVolkswagen-bg); font-weight: 700; padding: 12px 18px; }
.ilhacommerceVolkswagen-pdp__tabs .woocommerce-product-attributes td { padding: 12px 18px; color: var(--ilhacommerceVolkswagen-text-2); }
/* relacionados */
.ilhacommerceVolkswagen-pdp-rel { padding: 0 !important; }
.ilhacommerceVolkswagen-pdp-rel > .e-con-inner { padding: 0 24px 64px !important; }
/* responsivo PDP */
@media (max-width: 768px) {
.ilhacommerceVolkswagen-pdp > .e-con-inner { grid-template-columns: 1fr; }
.ilhacommerceVolkswagen-pdp__buy { position: static; }
}
@media (max-width: 767px) {
.ilhacommerceVolkswagen-pdp > .e-con-inner { padding: 12px 16px 32px !important; }
.ilhacommerceVolkswagen-pdp__buy, .ilhacommerceVolkswagen-pdp__galcard, .ilhacommerceVolkswagen-pdp__compat { padding: 18px !important; }
.ilhacommerceVolkswagen-pdp__price .woocommerce-Price-amount { font-size: 28px; }
.ilhacommerceVolkswagen-pdp__selos { grid-template-columns: 1fr; }
.ilhacommerceVolkswagen-pdp-tabs > .e-con-inner { padding: 0 16px 32px !important; }
.ilhacommerceVolkswagen-pdp-rel > .e-con-inner { padding: 0 16px 48px !important; }
}
/* o plugin injeta um simulador duplicado dentro do form do add-to-cart — fica só o da seção frete */
.ilhacommerceVolkswagen-pdp__cart .wc-shipping-simulator { display: none !important; }
/* tabela de resultados do simulador */
.ilhacommerceVolkswagen-pdp__frete .table-freight { width: 100%; border-collapse: separate; border-spacing: 0 8px; margin-top: 6px; }
.ilhacommerceVolkswagen-pdp__frete .table-freight thead { display: none; }
.ilhacommerceVolkswagen-pdp__frete .table-freight tr { background: var(--ilhacommerceVolkswagen-bg); font-size: 14px; }
.ilhacommerceVolkswagen-pdp__frete .table-freight td { padding: 12px 16px; }
.ilhacommerceVolkswagen-pdp__frete .table-freight td:first-child { border-radius: 10px 0 0 10px; }
.ilhacommerceVolkswagen-pdp__frete .table-freight td:last-child { border-radius: 0 10px 10px 0; text-align: right; font-weight: 700; }
.ilhacommerceVolkswagen-pdp__frete .table-freight tr[class*=pickup] td,
.ilhacommerceVolkswagen-pdp__frete .table-freight tr[class*=free_shipping] td { background: var(--ilhacommerceVolkswagen-green-tint); color: var(--ilhacommerceVolkswagen-green-text); }
.ilhacommerceVolkswagen-pdp__frete .table-freight tr[class*=pickup] .woocommerce-Price-amount,
.ilhacommerceVolkswagen-pdp__frete .table-freight tr[class*=free_shipping] .woocommerce-Price-amount { color: var(--ilhacommerceVolkswagen-green-text); }
.ilhacommerceVolkswagen-pdp__frete .shipping-simulator-results .error { color: var(--ilhacommerceVolkswagen-red); font-size: 13.5px; margin-top: 8px; }
/* ============ Frete v2 — override consolidado (CSS do plugin tem borda/padding no label e botão travado) ============ */
.ilhacommerceVolkswagen-pdp__frete .shipping-simulator-wrapper {
display: flex !important;
gap: 10px;
align-items: stretch;
margin-top: 4px;
}
.ilhacommerceVolkswagen-pdp__frete .shipping-simulator-wrapper label {
border: none !important;
padding: 0 !important;
margin: 0 !important;
background: none !important;
flex: 0 0 auto; /* CEP tem formato fixo XXXXX-XXX — input compacto, botão cresce */
width: auto !important;
display: flex;
height: auto !important;
}
.ilhacommerceVolkswagen-pdp__frete .shipping-simulator-wrapper input.cep-number {
flex: 0 0 140px !important;
width: 140px !important;
text-align: center;
letter-spacing: .03em;
height: 46px !important;
border: 1.5px solid var(--ilhacommerceVolkswagen-border) !important;
border-radius: 10px !important;
padding: 0 16px !important;
font: 400 15px 'Inter', sans-serif !important;
color: var(--ilhacommerceVolkswagen-text) !important;
background: var(--ilhacommerceVolkswagen-surface) !important;
box-shadow: none !important;
}
.ilhacommerceVolkswagen-pdp__frete .shipping-simulator-wrapper input.cep-number:focus { border-color: var(--ilhacommerceVolkswagen-red) !important; }
.ilhacommerceVolkswagen-pdp__frete .shipping-simulator-wrapper .calculate {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 1 !important;
width: auto !important;
min-width: 112px !important;
height: 46px !important;
padding: 0 22px !important;
border-radius: 10px !important;
background: var(--ilhacommerceVolkswagen-dark) !important;
text-transform: none !important;
overflow: visible !important;
font-size: 0 !important; /* esconde o "Ok" nativo; o rótulo vem do ::before */
}
.ilhacommerceVolkswagen-pdp__frete .shipping-simulator-wrapper .calculate:hover { background: var(--ilhacommerceVolkswagen-dark-hover) !important; }
.ilhacommerceVolkswagen-pdp__frete .shipping-simulator-wrapper .calculate::before {
content: 'Calcular';
font: 600 14px 'Inter', sans-serif;
color: #fff;
letter-spacing: 0;
}
/* resultados do frete ocupam toda a largura da coluna */
.ilhacommerceVolkswagen-pdp__frete .wc-shipping-simulator,
.ilhacommerceVolkswagen-pdp__frete #fshipping-results,
.ilhacommerceVolkswagen-pdp__frete .shipping-simulator-results { width: 100% !important; max-width: none !important; display: block; }
.ilhacommerceVolkswagen-pdp__frete .table-freight { width: 100% !important; max-width: none !important; }
.ilhacommerceVolkswagen-pdp__frete .table-freight td:first-child { width: 70%; }
/* ============ Dropdown de resultados do ASP (lista vertical) ============ */
div.asp_r.asp_r_1, div.asp_r_1 .results {
background: var(--ilhacommerceVolkswagen-surface) !important;
}
div.asp_r.asp_r_1 {
border-radius: 16px !important;
border: 1px solid var(--ilhacommerceVolkswagen-border) !important;
box-shadow: var(--ilhacommerceVolkswagen-shadow-card) !important;
overflow: hidden !important;
margin-top: 8px !important;
padding: 6px 0 !important;
}
div.asp_r_1 .results .item {
background: var(--ilhacommerceVolkswagen-surface) !important;
border: none !important;
box-shadow: none !important;
padding: 10px 16px !important;
margin: 0 !important;
}
div.asp_r_1 .results .item:hover { background: var(--ilhacommerceVolkswagen-bg) !important; }
div.asp_r_1 .results .item .asp_image {
width: 56px !important;
height: 42px !important;
border-radius: 8px !important;
border: 1px solid var(--ilhacommerceVolkswagen-border);
background-size: cover !important;
}
div.asp_r_1 .results .item .asp_content { padding: 0 0 0 12px !important; }
div.asp_r_1 .results .item .asp_content h3,
div.asp_r_1 .results .item .asp_content h3 a {
font: 600 14px/1.4 'Inter', sans-serif !important;
color: var(--ilhacommerceVolkswagen-text) !important;
text-transform: none !important;
}
div.asp_r_1 .results .item .asp_content h3 a:hover { color: var(--ilhacommerceVolkswagen-red) !important; }
div.asp_r_1 .results .item .asp_content .overlap { display: none !important; }
div.asp_r_1 .asp_showmore, div.asp_r_1 .asp_showmore a, div.asp_r_1 p.showmore a {
background: var(--ilhacommerceVolkswagen-bg) !important;
color: var(--ilhacommerceVolkswagen-text) !important;
font: 600 13.5px 'Inter', sans-serif !important;
text-align: center;
padding: 12px !important;
}
div.asp_r_1 .asp_nores {
background: var(--ilhacommerceVolkswagen-surface) !important;
font: 400 14px 'Inter', sans-serif !important;
color: var(--ilhacommerceVolkswagen-text-2) !important;
padding: 16px !important;
}
/* preço no resultado da busca — canto direito, em destaque (o span fica DENTRO do ) */
div.asp_r_1 .results .item .asp_content h3 a {
display: flex !important;
align-items: center;
gap: 12px;
width: 100%;
}
div.asp_r_1 .ilhacommerceVolkswagen-asp-price {
margin-left: auto !important;
flex-shrink: 0;
font: 800 14px 'Inter', sans-serif !important;
color: var(--ilhacommerceVolkswagen-text) !important;
background: var(--ilhacommerceVolkswagen-bg) !important;
padding: 4px 10px !important;
border-radius: 999px !important;
white-space: nowrap;
}
/* hero do archive compacto no mobile (pedido do cliente) */
@media (max-width: 767px) {
.ilhacommerceVolkswagen-archhero__in > .e-con-inner { padding: 14px 16px !important; }
.ilhacommerceVolkswagen-archhero .woocommerce-breadcrumb { display: none !important; }
.ilhacommerceVolkswagen-archhero__title .elementor-heading-title { font-size: 20px !important; margin: 0 0 2px !important; }
.ilhacommerceVolkswagen-archhero__count { font-size: 13px; }
}
/* ============ Mobile: filtros em linha compacta + cards horizontais ============ */
@media (max-width: 767px) {
/* filtros: sem caixa, botão + Limpar numa linha */
.ilhacommerceVolkswagen-filtros {
flex-direction: row !important;
--flex-direction: row;
align-items: flex-start;
gap: 12px;
padding: 0 !important;
border: none !important;
background: transparent !important;
border-radius: 0 !important;
}
.ilhacommerceVolkswagen-filtros > .elementor-widget-html { order: 2; width: auto !important; --width: auto; }
.ilhacommerceVolkswagen-filtros__head { margin: 0 !important; padding-top: 12px; }
.ilhacommerceVolkswagen-filtros__head .titulo { display: none; }
.ilhacommerceVolkswagen-filtros .elementor-widget-shortcode { flex: 1 !important; --flex-grow: 1; width: auto !important; }
/* moldura só quando ABERTO (fechado tem inline opacity:0 — sem borda/margem para não criar vão) */
.ilhacommerceVolkswagen-filtros .woof_auto_show { background: var(--ilhacommerceVolkswagen-surface) !important; }
.ilhacommerceVolkswagen-filtros .woof_auto_show[style*='opacity: 0'] {
border: none !important;
margin: 0 !important;
padding: 0 !important;
}
.ilhacommerceVolkswagen-filtros .woof_auto_show:not([style*='opacity: 0']) {
border: 1px solid var(--ilhacommerceVolkswagen-border);
border-radius: 12px;
margin-top: 10px;
padding: 14px !important;
}
/* espaçamentos compactos da listagem mobile */
.ilhacommerceVolkswagen-archive > .e-con-inner { padding: 10px 16px 40px !important; gap: 10px !important; }
.ilhacommerceVolkswagen-toolbar { margin-bottom: 10px; gap: 8px; }
/* cards de produto: 1 por linha, horizontais */
.elementor-widget-loop-grid .elementor-loop-container { grid-template-columns: 1fr !important; }
.ilhacommerceVolkswagen-card {
display: flex !important;
flex-direction: row !important;
--flex-direction: row;
align-items: stretch;
}
.ilhacommerceVolkswagen-card__img {
width: 118px !important;
--width: 118px;
flex-shrink: 0 !important;
align-self: stretch;
}
.ilhacommerceVolkswagen-card__img img {
width: 118px !important;
height: 100% !important;
min-height: 118px;
aspect-ratio: auto !important;
object-fit: cover;
}
/* o widget do badge (largura 100% default) e o basis 100% do corpo forçavam wrap */
.ilhacommerceVolkswagen-card > .elementor-widget-shortcode { position: absolute; width: auto !important; --width: auto; }
.ilhacommerceVolkswagen-card__body {
padding: 12px 14px !important;
gap: 4px;
flex: 1 1 0 !important;
width: auto !important;
--width: auto;
min-width: 0;
}
.ilhacommerceVolkswagen-card__cat .elementor-heading-title { font-size: 10.5px; }
.ilhacommerceVolkswagen-card__title .elementor-heading-title { font-size: 13.5px; min-height: 0; }
.ilhacommerceVolkswagen-card__price .woocommerce-Price-amount { font-size: 16px; }
.ilhacommerceVolkswagen-card__price del .woocommerce-Price-amount { font-size: 12px; }
.ilhacommerceVolkswagen-parcelas { font-size: 11.5px; }
.ilhacommerceVolkswagen-card__buy .button { padding: 8px 0 !important; font-size: 13px !important; margin-top: 4px !important; }
span.ilhacommerceVolkswagen-badge.onsale { top: 8px !important; left: 8px !important; font-size: 10.5px !important; padding: 4px 8px !important; }
}
/* ajustes mobile (feedback do cliente) */
@media (max-width: 767px) {
/* 1) dropdown de ordenação na largura total */
.ilhacommerceVolkswagen-toolbar { flex-direction: column; align-items: stretch; }
.ilhacommerceVolkswagen-toolbar .ilhacommerceVolkswagen-orderby { width: 100%; }
.ilhacommerceVolkswagen-orderby__select { width: 100% !important; }
/* 2) botão Comprar full-width: o corpo precisa esticar os filhos */
.ilhacommerceVolkswagen-card__body { align-items: stretch !important; --align-items: stretch; }
.ilhacommerceVolkswagen-card__buy { width: 100% !important; --width: 100%; }
}
/* 3) placeholder da busca legível (o input-fantasma do autocomplete do ASP saía branco) */
.ilhacommerceVolkswagen-header__search .asp_m .proinput input::placeholder {
color: var(--ilhacommerceVolkswagen-text-2) !important;
-webkit-text-fill-color: var(--ilhacommerceVolkswagen-text-2) !important;
opacity: 1 !important;
}
.ilhacommerceVolkswagen-header__search .asp_m .proinput input.autocomplete {
color: var(--ilhacommerceVolkswagen-text-2) !important;
-webkit-text-fill-color: var(--ilhacommerceVolkswagen-text-2) !important;
}
/* mobile: "Limpar" só aparece com os filtros abertos, como botão no rodapé do painel */
@media (max-width: 767px) {
.ilhacommerceVolkswagen-filtros > .elementor-widget-html { display: none; }
/* aberto (o botão vira .woof_hide_auto_form), o bloco empilha e o Limpar entra por último */
.ilhacommerceVolkswagen-filtros:has(.woof_hide_auto_form) {
flex-direction: column !important;
--flex-direction: column;
align-items: stretch !important;
--align-items: stretch;
}
.ilhacommerceVolkswagen-filtros:has(.woof_hide_auto_form) .elementor-widget-shortcode {
width: 100% !important;
--width: 100%;
flex: none !important;
}
.ilhacommerceVolkswagen-filtros:has(.woof_hide_auto_form) > .elementor-widget-html {
display: block;
order: 3;
width: 100% !important;
--width: 100%;
}
.ilhacommerceVolkswagen-filtros:has(.woof_hide_auto_form) .ilhacommerceVolkswagen-filtros__head { padding: 0; }
.ilhacommerceVolkswagen-filtros:has(.woof_hide_auto_form) .ilhacommerceVolkswagen-filtros__head a {
display: flex;
width: 100%;
min-height: 44px;
align-items: center;
justify-content: center;
border: 1.5px solid var(--ilhacommerceVolkswagen-border);
border-radius: 8px;
color: var(--ilhacommerceVolkswagen-red);
font-weight: 600;
font-size: 14.5px;
}
}
/* paginação: "Previous/Next" viram setas */
.ilhacommerceVolkswagen-archive .elementor-pagination .page-numbers.prev,
.ilhacommerceVolkswagen-archive .elementor-pagination .page-numbers.next { font-size: 0; }
.ilhacommerceVolkswagen-archive .elementor-pagination .page-numbers.prev::before { content: '«'; font-size: 16px; font-weight: 700; }
.ilhacommerceVolkswagen-archive .elementor-pagination .page-numbers.next::before { content: '»'; font-size: 16px; font-weight: 700; }
/* ============ Correções do check responsivo (itens 2, 3 e 4) ============ */
/* 2) nav: split limpo no breakpoint 767 — nunca hamburger E menu completo juntos */
@media (min-width: 768px) {
.ilhacommerceVolkswagen-nav .elementor-menu-toggle,
.ilhacommerceVolkswagen-nav .elementor-nav-menu--dropdown { display: none !important; }
/* o widget esconde o menu principal até 1024 por conta própria — forçar a partir de 768 */
.ilhacommerceVolkswagen-nav .elementor-nav-menu--main { display: flex !important; }
}
@media (max-width: 767px) {
.ilhacommerceVolkswagen-nav .elementor-nav-menu--main { display: none !important; }
}
/* 3) PDP empilhada: galeria -> COMPRA -> compatibilidade (handoff + critique) */
@media (max-width: 768px) {
.ilhacommerceVolkswagen-pdp__left { display: contents !important; }
.ilhacommerceVolkswagen-pdp__galcard { order: 1; }
.ilhacommerceVolkswagen-pdp__buy { order: 2; position: static !important; }
.ilhacommerceVolkswagen-pdp__compat { order: 3; }
}
/* 4) barra final do footer empilha no mobile (o flex mora no e-con-inner) */
@media (max-width: 767px) {
.ilhacommerceVolkswagen-footer__bar-in > .e-con-inner {
flex-direction: column !important;
--flex-direction: column;
gap: 6px;
text-align: center;
align-items: center;
}
}
/* zoom da galeria não faz sentido no touch */
@media (hover: none) {
.ilhacommerceVolkswagen-pdp__galcard .zoomImg { display: none !important; }
}
/* ============ Fonte global do tema (multi-marca: trocar aqui + Global Fonts do kit) ============ */
:root { --ilhacommerceVolkswagen-font: 'Inter', sans-serif; }
body, button, input, select, textarea,
h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
font-family: var(--ilhacommerceVolkswagen-font);
}
/* ============ Slider do hero (Swiper embutido do Elementor + containers livres) ============ */
/* essenciais do Swiper inline — se a lib não carregar, os slides degradam para empilhados */
.ilhacommerceVolkswagen-slider { position: relative; overflow: hidden; padding: 0 !important; }
.ilhacommerceVolkswagen-slider .swiper-wrapper {
display: flex !important;
flex-direction: row !important;
--flex-direction: row;
flex-wrap: nowrap !important;
--flex-wrap: nowrap;
padding: 0 !important;
gap: 0 !important;
}
.ilhacommerceVolkswagen-slider .swiper-slide {
flex-shrink: 0;
width: 100%;
min-height: 420px;
height: auto;
padding: 0 !important;
}
/* setas */
.ilhacommerceVolkswagen-slider .swiper-button-prev,
.ilhacommerceVolkswagen-slider .swiper-button-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
border-radius: 50%;
background: rgba(255, 255, 255, .14);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
transition: background .2s ease-out;
}
.ilhacommerceVolkswagen-slider .swiper-button-prev { left: 16px; }
.ilhacommerceVolkswagen-slider .swiper-button-next { right: 16px; }
.ilhacommerceVolkswagen-slider .swiper-button-prev:hover,
.ilhacommerceVolkswagen-slider .swiper-button-next:hover { background: var(--ilhacommerceVolkswagen-red); }
.ilhacommerceVolkswagen-slider .swiper-button-prev::after,
.ilhacommerceVolkswagen-slider .swiper-button-next::after { font-size: 16px; font-weight: 800; }
.ilhacommerceVolkswagen-slider .swiper-button-lock { display: none; }
/* dots */
.ilhacommerceVolkswagen-slider .swiper-pagination {
position: absolute;
bottom: 14px;
left: 0;
right: 0;
display: flex;
justify-content: center;
gap: 8px;
z-index: 10;
}
.ilhacommerceVolkswagen-slider .swiper-pagination-bullet {
width: 9px; height: 9px; border-radius: 50%;
background: rgba(255, 255, 255, .45);
opacity: 1; cursor: pointer;
}
.ilhacommerceVolkswagen-slider .swiper-pagination-bullet-active { background: var(--ilhacommerceVolkswagen-red); }
.ilhacommerceVolkswagen-slider .swiper-pagination-lock { display: none; }
/* slide "imagem full" (modelo para o time duplicar) */
.ilhacommerceVolkswagen-slide-full { position: relative; display: block; width: 100%; min-height: 420px; overflow: hidden; }
.ilhacommerceVolkswagen-slide-full { background: var(--ilhacommerceVolkswagen-dark); }
.ilhacommerceVolkswagen-slide-full > img {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: contain; /* banner centralizado com fundo escuro ao redor (pedido do cliente) */
}
/* gradiente só quando o slide tem texto sobreposto (imagens com arte própria ficam limpas) */
.ilhacommerceVolkswagen-slide-full:has(.ilhacommerceVolkswagen-slide-full__content)::before {
content: '';
position: absolute; inset: 0;
background: linear-gradient(90deg, rgba(21, 24, 29, .82) 0%, rgba(21, 24, 29, .35) 60%, rgba(21, 24, 29, .1) 100%);
}
.ilhacommerceVolkswagen-slide-full__content {
position: relative;
max-width: 1280px;
margin: 0 auto;
padding: 72px 24px;
color: #fff;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 14px;
min-height: 420px;
justify-content: center;
}
.ilhacommerceVolkswagen-slide-full__content .eyebrow {
font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .85;
}
.ilhacommerceVolkswagen-slide-full__content h2 {
font-size: 40px !important; font-weight: 700 !important; color: #fff !important;
letter-spacing: -.01em; margin: 0; max-width: 560px; line-height: 1.15;
}
.ilhacommerceVolkswagen-slide-full__content .btn {
background: #fff; color: var(--ilhacommerceVolkswagen-red);
font-weight: 700; font-size: 15px; padding: 14px 28px; border-radius: 10px;
}
@media (max-width: 767px) {
.ilhacommerceVolkswagen-slider .swiper-slide, .ilhacommerceVolkswagen-slide-full, .ilhacommerceVolkswagen-slide-full__content { min-height: 340px; }
.ilhacommerceVolkswagen-slide-full__content { padding: 40px 16px; }
.ilhacommerceVolkswagen-slide-full__content h2 { font-size: 26px !important; }
.ilhacommerceVolkswagen-slider .swiper-button-prev, .ilhacommerceVolkswagen-slider .swiper-button-next { display: none; }
}
/* setas/dots ancoram no trilho, não no widget de altura 0 (widgets Elementor são position:relative) */
.ilhacommerceVolkswagen-slider > .elementor-widget-html { position: static !important; }
/* preço "de/por" no card do hero */
.ilhacommerceVolkswagen-hero__card-de {
font-size: 13px;
color: var(--ilhacommerceVolkswagen-text-2);
text-decoration: line-through;
font-weight: 400;
}
/* ============ Hero em widgets NATIVOS (slides editáveis sem código) ============ */
/* grid do slide como container Elementor */
.ilhacommerceVolkswagen-hero__grid.e-con {
display: grid !important;
grid-template-columns: 1.1fr 1fr;
gap: 48px;
align-items: center;
width: 100%;
padding: 0 !important;
}
@media (max-width: 1024px) {
.ilhacommerceVolkswagen-hero__grid.e-con { grid-template-columns: 1fr; gap: 32px; }
}
.ilhacommerceVolkswagen-hero__col.e-con { padding: 0 !important; gap: 0 !important; }
/* eyebrow como Heading widget */
.ilhacommerceVolkswagen-hero__eyebrow .elementor-heading-title {
display: inline-flex; align-items: center; gap: 8px;
background: rgba(0, 130, 214, .14); border: 1px solid rgba(0, 130, 214, .45);
color: #6BC5F2 !important; font-size: 13px !important; font-weight: 700 !important;
letter-spacing: .08em; padding: 6px 14px; border-radius: 999px; text-transform: uppercase;
}
.elementor-widget-heading.ilhacommerceVolkswagen-hero__eyebrow { width: auto !important; --width: auto; margin-bottom: 20px; }
/* H1 e parágrafo como widgets */
.ilhacommerceVolkswagen-hero__titulo h1, .ilhacommerceVolkswagen-hero__titulo .elementor-heading-title {
font-size: 52px !important; line-height: 1.08 !important; font-weight: 800 !important;
margin: 0 0 16px !important; letter-spacing: -.02em; color: #fff !important;
}
@media (max-width: 1024px) { .ilhacommerceVolkswagen-hero__titulo .elementor-heading-title { font-size: 40px !important; } }
@media (max-width: 767px) { .ilhacommerceVolkswagen-hero__titulo .elementor-heading-title { font-size: 32px !important; } }
.ilhacommerceVolkswagen-hero__texto, .ilhacommerceVolkswagen-hero__texto p {
font-size: 18px; line-height: 1.55; color: var(--ilhacommerceVolkswagen-text-dark); max-width: 480px; margin: 0 0 12px;
}
/* CTAs como Button widgets */
.ilhacommerceVolkswagen-hero__ctas.e-con { display: flex !important; flex-direction: row !important; --flex-direction: row; gap: 14px; flex-wrap: wrap; padding: 0 !important; margin-top: 20px; }
.ilhacommerceVolkswagen-hero__ctas .elementor-widget-button { width: auto !important; --width: auto; }
.ilhacommerceVolkswagen-hero__cta .elementor-button {
background: var(--ilhacommerceVolkswagen-red); color: #fff; font-weight: 700; font-size: 16px;
padding: 15px 30px; border-radius: 10px;
}
.ilhacommerceVolkswagen-hero__cta .elementor-button:hover { background: var(--ilhacommerceVolkswagen-red-hover); }
.ilhacommerceVolkswagen-hero__cta--ghost .elementor-button {
background: transparent; border: 1.5px solid var(--ilhacommerceVolkswagen-dark-border);
font-weight: 600; padding: 14px 28px;
}
.ilhacommerceVolkswagen-hero__cta--ghost .elementor-button:hover { background: transparent; border-color: #fff; }
/* card do produto como container + widgets */
.ilhacommerceVolkswagen-hero__card.e-con {
background: #fff; border-radius: 20px; padding: 20px !important;
box-shadow: var(--ilhacommerceVolkswagen-shadow-hero); color: var(--ilhacommerceVolkswagen-text);
gap: 0 !important;
}
.ilhacommerceVolkswagen-hero__card .elementor-widget-image img { width: 100%; }
.ilhacommerceVolkswagen-hero__card-row.e-con {
display: flex !important; flex-direction: row !important; --flex-direction: row;
justify-content: space-between; align-items: center; gap: 12px;
padding: 16px 8px 4px !important;
}
.ilhacommerceVolkswagen-hero__card-info.e-con { padding: 0 !important; gap: 0 !important; flex: 1; min-width: 0; }
.ilhacommerceVolkswagen-hero__card-nome .elementor-heading-title {
font-size: 14px !important; color: var(--ilhacommerceVolkswagen-text-2) !important; font-weight: 500 !important;
}
.ilhacommerceVolkswagen-hero__card-preco, .ilhacommerceVolkswagen-hero__card-preco p {
font-size: 22px; font-weight: 800; color: var(--ilhacommerceVolkswagen-text); margin: 0;
}
.ilhacommerceVolkswagen-hero__card-preco small { font-size: 13px; font-weight: 500; color: var(--ilhacommerceVolkswagen-text-2); }
.ilhacommerceVolkswagen-hero__card-preco s { font-size: 13px; color: var(--ilhacommerceVolkswagen-text-2); font-weight: 400; }
.ilhacommerceVolkswagen-hero__card-row .elementor-widget-button { width: auto !important; --width: auto; flex-shrink: 0; }
.ilhacommerceVolkswagen-hero__card-btn .elementor-button {
background: var(--ilhacommerceVolkswagen-dark); color: #fff; font-weight: 600; font-size: 14px;
padding: 10px 20px; border-radius: 8px;
}
.ilhacommerceVolkswagen-hero__card-btn .elementor-button:hover { background: var(--ilhacommerceVolkswagen-red); }
/* correção "caixa dupla": as regras da era HTML pintavam o elemento; agora a classe está no
WRAPPER do widget — o wrapper fica neutro e só o elemento interno recebe o estilo */
.elementor-widget-heading.ilhacommerceVolkswagen-hero__eyebrow {
background: none !important;
border: none !important;
padding: 0 !important;
color: inherit;
}
.elementor-widget-button.ilhacommerceVolkswagen-hero__cta,
.elementor-widget-button.ilhacommerceVolkswagen-hero__cta--ghost,
.elementor-widget-button.ilhacommerceVolkswagen-hero__card-btn {
background: none !important;
border: none !important;
padding: 0 !important;
border-radius: 0 !important;
}
/* ============ Skin de marca para o widget Slides do Pro (página demo) ============ */
.ilhacommerceVolkswagen-slides-wrap { padding: 0 !important; }
.ilhacommerceVolkswagen-slides .elementor-slide-heading {
font-family: var(--ilhacommerceVolkswagen-font) !important;
font-size: 52px !important;
font-weight: 800 !important;
line-height: 1.08 !important;
letter-spacing: -.02em;
margin-bottom: 16px;
}
.ilhacommerceVolkswagen-slides .elementor-slide-description {
font-family: var(--ilhacommerceVolkswagen-font) !important;
font-size: 18px !important;
line-height: 1.55 !important;
max-width: 480px;
margin-bottom: 28px;
}
.ilhacommerceVolkswagen-slides .elementor-slide-button {
font-family: var(--ilhacommerceVolkswagen-font) !important;
background: var(--ilhacommerceVolkswagen-red) !important;
border: none !important;
color: #fff !important;
font-weight: 700 !important;
font-size: 16px !important;
padding: 15px 30px !important;
border-radius: 10px !important;
}
.ilhacommerceVolkswagen-slides .elementor-slide-button:hover { background: var(--ilhacommerceVolkswagen-red-hover) !important; }
.ilhacommerceVolkswagen-slides .swiper-slide-inner { max-width: 1280px; margin: 0 auto; padding: 56px 24px; }
.ilhacommerceVolkswagen-slides .elementor-swiper-button {
width: 44px; height: 44px; border-radius: 50%;
background: rgba(255, 255, 255, .14); color: #fff;
display: flex; align-items: center; justify-content: center;
}
.ilhacommerceVolkswagen-slides .elementor-swiper-button:hover { background: var(--ilhacommerceVolkswagen-red); }
.ilhacommerceVolkswagen-slides .swiper-pagination-bullet { background: rgba(255, 255, 255, .45); opacity: 1; }
.ilhacommerceVolkswagen-slides .swiper-pagination-bullet-active { background: var(--ilhacommerceVolkswagen-red); }
@media (max-width: 767px) {
.ilhacommerceVolkswagen-slides .elementor-slide-heading { font-size: 32px !important; }
.ilhacommerceVolkswagen-slides .swiper-slide-inner { padding: 36px 16px; }
.ilhacommerceVolkswagen-slides .elementor-swiper-button { display: none; }
}
/* ============ Widget Ilha Slider Home ============ */
.ilha-slide-in { max-width: 1280px; margin: 0 auto; padding: 56px 24px 64px; }
.ilhacommerceVolkswagen-hero__grid .ilha-slide-titulo {
font-size: 52px !important; line-height: 1.08 !important; font-weight: 800 !important;
margin: 20px 0 16px !important; letter-spacing: -.02em; color: #fff !important;
}
/* card do outro lado */
.ilhacommerceVolkswagen-hero__grid.ilha-invertido > div:first-child { order: 2; }
.ilhacommerceVolkswagen-hero__grid.ilha-invertido > div:last-child { order: 1; }
/* sem peça: coluna única de texto */
.ilhacommerceVolkswagen-hero__grid.ilha-sem-card { grid-template-columns: 1fr; max-width: 640px; }
/* preço automático do Woo dentro do card do hero */
.ilha-preco-auto del { text-decoration: none; }
.ilha-preco-auto del .woocommerce-Price-amount {
font-size: 13px; font-weight: 400; color: var(--ilhacommerceVolkswagen-text-2); text-decoration: line-through;
}
.ilha-preco-auto ins { text-decoration: none; }
.ilha-preco-auto .woocommerce-Price-amount { font-size: 22px; font-weight: 800; color: var(--ilhacommerceVolkswagen-text); }
.ilha-preco-auto .ilhacommerceVolkswagen-parcelas { font-size: 12.5px; font-weight: 400; color: var(--ilhacommerceVolkswagen-text-2); }
.ilha-preco-auto .ilhacommerceVolkswagen-parcelas .woocommerce-Price-amount { font-size: 12.5px; font-weight: 700; }
@media (max-width: 1024px) {
.ilhacommerceVolkswagen-hero__grid .ilha-slide-titulo { font-size: 40px !important; }
}
@media (max-width: 767px) {
.ilha-slide-in { padding: 36px 16px 44px; }
.ilhacommerceVolkswagen-hero__grid .ilha-slide-titulo { font-size: 32px !important; }
.ilhacommerceVolkswagen-hero__grid.ilha-invertido > div:first-child { order: 1; }
.ilhacommerceVolkswagen-hero__grid.ilha-invertido > div:last-child { order: 2; }
}
/* layout "Banner — sem peça" do widget: fluxo normal (nada absoluto — o editor zerava a caixa do ) */
.ilha-slide-banner { display: flex !important; align-items: center; justify-content: center; min-height: 420px; }
.ilha-slide-banner > a, .ilha-slide-banner > span { display: block; width: 100%; }
.ilha-slide-banner img { display: block; width: 100%; height: auto; }
.ilha-slide-banner picture { display: block; width: 100%; }
.ilha-slide-banner picture img { width: 100%; }
/* switch "Ocultar peça no mobile" do widget */
@media (max-width: 767px) {
.ilhacommerceVolkswagen-hero__grid > .ilha-card-so-desktop { display: none; }
}
/* ============ VW: skin navy do slider de preço (ion.rangeSlider default é vermelho) ============ */
.woof .irs-bar,
.woof .irs-from, .woof .irs-to, .woof .irs-single { background: var(--ilhacommerceVolkswagen-dark) !important; }
.woof .irs-from:after, .woof .irs-to:after, .woof .irs-single:after { border-top-color: var(--ilhacommerceVolkswagen-dark) !important; }
.woof .irs-slider { border-color: var(--ilhacommerceVolkswagen-dark) !important; }