/**
* Kardeu Site Layout — Frontend Stylesheet
* Estilos para Barra de Notificação, Header Presets, Gatilho do Carrinho,
* Drawer Cart, Rodapé Modular (Crachás de Pagamento) e Checkout Sem Distrações.
*/
/* ==================== 1. Barra de Notificação / Portes ==================== */
.kd-notification-bar {
background-color: var(--kd-notif-bg, var(--kd-primary, #059669)) !important;
color: var(--kd-notif-text, #ffffff) !important;
font-family: var(--kd-notif-font-family, inherit) !important;
font-size: var(--kd-notif-font-size, 13px) !important;
font-weight: var(--kd-notif-font-weight, 500) !important;
text-transform: var(--kd-notif-text-transform, none) !important;
letter-spacing: var(--kd-notif-letter-spacing, 0px) !important;
line-height: 1.4;
position: relative;
z-index: 999;
transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease, padding 0.3s ease;
overflow: hidden;
}
.kd-notification-bar.kd-bar-dismissed {
max-height: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
opacity: 0;
pointer-events: none;
}
.kd-notification-bar__inner {
max-width: var(--kd-container-width, 1320px);
margin: 0 auto;
padding-top: var(--kd-notif-padding-y, 10px) !important;
padding-bottom: var(--kd-notif-padding-y, 10px) !important;
padding-left: 24px;
padding-right: 24px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
text-align: var(--kd-notif-text-align, center) !important;
}
.kd-notification-bar__content {
flex: 1;
margin: 0 32px;
text-align: var(--kd-notif-text-align, center) !important;
color: var(--kd-notif-text, #ffffff) !important;
}
.kd-notification-bar__content a,
.kd-notification-bar__link {
color: var(--kd-notif-text, #ffffff) !important;
text-decoration: underline;
text-underline-offset: 2px;
font-weight: inherit;
display: inline-block;
}
.kd-notification-bar__dismiss {
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: none;
color: var(--kd-notif-text, #ffffff) !important;
opacity: 0.85;
cursor: pointer;
padding: 6px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 4px;
transition: opacity 0.15s ease, background-color 0.15s ease;
}
.kd-notification-bar__dismiss:hover,
.kd-notification-bar__dismiss:focus {
opacity: 1;
background-color: rgba(255, 255, 255, 0.2);
}
/* ==================== 2. Header Presets & Navegação Shopify Dawn ==================== */
/* Logótipo & Alinhamento à Esquerda Rigoroso (Zero Recuo / Flush Left na Grelha) */
.site-branding.kd-header-branding,
.site-header .site-branding {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
text-align: left !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1 !important;
}
.custom-logo-link.kd-logo-link,
.site-header .custom-logo-link {
display: inline-flex !important;
align-items: center !important;
justify-content: flex-start !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1 !important;
}
.custom-logo.kd-custom-logo,
.site-header .custom-logo {
width: auto !important;
max-width: var(--kd-header-logo-w-desktop, 160px) !important;
max-height: var(--kd-header-logo-h-desktop, 48px) !important;
height: auto !important;
object-fit: contain !important;
object-position: left center !important;
display: block !important;
margin: 0 !important;
padding: 0 !important;
}
@media (max-width: 992px) {
.custom-logo.kd-custom-logo,
.site-header .custom-logo {
width: auto !important;
max-width: var(--kd-header-logo-w-tablet, 140px) !important;
max-height: var(--kd-header-logo-h-tablet, 38px) !important;
object-position: left center !important;
}
}
@media (max-width: 767px) {
.custom-logo.kd-custom-logo,
.site-header .custom-logo {
width: auto !important;
max-width: var(--kd-header-logo-w-mobile, 120px) !important;
max-height: var(--kd-header-logo-h-mobile, 34px) !important;
object-position: left center !important;
}
}
/* Ocultar elementos legados intrusivos no cabeçalho moderno */
.site-header .site-search {
display: none !important;
}
.site-header .site-header-cart {
display: none !important;
}
/* Layout do Cabeçalho no Desktop */
#kardeu-masthead,
.site-header {
background-color: var(--kd-header-bg, #ffffff) !important;
border-bottom: var(--kd-header-border, 1px solid #f1f5f9) !important;
box-shadow: var(--kd-header-shadow, none) !important;
margin-top: var(--kd-header-margin-top, 0px) !important;
padding-top: var(--kd-header-padding-top, 0px) !important;
padding-bottom: var(--kd-header-padding-bottom, 0px) !important;
transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
/* Ocultar a barra preta legada de segundo nível do tema em qualquer resolução */
.col-full-nav {
display: none !important;
}
/* Estrutura Universal Flex do Cabeçalho (Alinhamento em Contentor com a Grelha do Site) */
#kardeu-masthead .main-header,
#kardeu-masthead .kd-header-inner,
.site-header .main-header,
.site-header .kd-header-inner {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: space-between !important;
flex-wrap: nowrap !important;
width: 100% !important;
max-width: var(--kd-container-width, 1320px) !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 24px !important;
padding-right: 24px !important;
box-sizing: border-box !important;
}
.site-header .site-branding,
.kd-header-branding {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1 !important;
text-align: left !important;
}
/* Suporte WooCommerce Coming Soon Header: Alinhamento ao Contentor */
.woocommerce-coming-soon-header .wp-block-group__inner-container,
.woocommerce-coming-soon-header-logo-title,
.woocommerce-coming-soon-header .wp-block-site-logo {
max-width: var(--kd-container-width, 1320px) !important;
width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
justify-content: flex-start !important;
text-align: left !important;
}
.woocommerce-coming-soon-header:has(.wp-block-site-logo img) .wp-block-site-title {
display: none !important;
}
@media (min-width: 993px) {
.site-header .main-header {
min-height: var(--kd-header-height, 72px) !important;
gap: 24px !important;
}
.site-header .site-branding {
flex: 0 0 auto !important;
}
.kd-mobile-menu-trigger-wrap {
display: none !important;
}
}
/* Regras Estritas para Tablet e Telemóvel (Nike Mobile Header Pattern) */
@media (max-width: 992px) {
.kd-site-navigation,
.site-header .main-navigation:not(.kd-mobile-nav) {
display: none !important;
}
.site-header .main-header,
.kd-header-inner {
min-height: 56px !important;
padding-left: 16px !important;
padding-right: 16px !important;
gap: 12px !important;
}
/* Logótipo na extrema esquerda, sem empurrar os ícones */
.site-header .site-branding,
.kd-header-branding {
flex: 0 1 auto !important;
max-width: 50% !important;
margin: 0 !important;
padding: 0 !important;
}
.custom-logo.kd-custom-logo,
.site-header .custom-logo {
max-height: 38px !important;
width: auto !important;
max-width: 100% !important;
object-fit: contain !important;
}
/* Ações na extrema direita em linha única horizontal */
.kd-header-actions {
flex: 0 0 auto !important;
display: inline-flex !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-end !important;
margin-left: auto !important;
gap: 4px !important;
}
/* Ordenação Flexível das Ações (Pesquisa, Conta, Carrinho, Hambúrguer e Shortcodes) */
.kd-header-search-wrapper {
order: var(--kd-order-search, 10) !important;
}
.kd-header-account-wrapper {
order: var(--kd-order-account, 20) !important;
}
.kd-header-cart-wrapper {
order: var(--kd-order-cart, 30) !important;
}
.kd-mobile-menu-trigger-wrap {
order: var(--kd-order-hamburger, 40) !important;
display: inline-flex !important;
}
.kd-header-shortcode-1 {
order: var(--kd-order-shortcode-1, 15) !important;
}
.kd-header-shortcode-2 {
order: var(--kd-order-shortcode-2, 25) !important;
}
.kd-header-shortcode-3 {
order: var(--kd-order-shortcode-3, 35) !important;
}
.kd-header-search-trigger,
.kd-header-account-link,
.kd-header-cart-trigger,
.kd-mobile-menu-trigger {
width: 38px !important;
height: 38px !important;
padding: 0 !important;
}
}
/* Preset 1: Clássico E-Commerce (Logo à esquerda, menu ao centro, ações à direita) */
@media (min-width: 993px) {
body.kd-header-preset-classic .site-header .main-header {
display: grid !important;
grid-template-columns: 1fr auto 1fr !important;
align-items: center !important;
}
body.kd-header-preset-classic .site-branding {
grid-column: 1 !important;
justify-self: start !important;
flex: none !important;
order: 1 !important;
}
body.kd-header-preset-classic .kd-site-navigation {
grid-column: 2 !important;
justify-self: center !important;
display: flex !important;
justify-content: center !important;
margin: 0 auto !important;
width: auto !important;
flex: none !important;
order: 2 !important;
}
body.kd-header-preset-classic .kd-site-navigation .kd-nav-menu-list {
justify-content: center !important;
}
body.kd-header-preset-classic .kd-header-actions {
grid-column: 3 !important;
justify-self: end !important;
margin-left: 0 !important;
flex: none !important;
order: 3 !important;
}
}
/* Preset 2: Centrado / Elegante (Menu à esquerda, logótipo ao centro, ações à direita) */
@media (min-width: 993px) {
body.kd-header-preset-centered .site-header .main-header {
display: grid !important;
grid-template-columns: 1fr auto 1fr !important;
align-items: center !important;
}
body.kd-header-preset-centered .kd-site-navigation {
grid-column: 1 !important;
order: 1 !important;
justify-content: flex-start !important;
}
body.kd-header-preset-centered .site-branding,
body.kd-header-preset-centered .kd-header-branding {
grid-column: 2 !important;
order: 2 !important;
justify-content: center !important;
text-align: center !important;
margin: 0 auto !important;
}
body.kd-header-preset-centered .custom-logo-link.kd-logo-link {
justify-content: center !important;
}
body.kd-header-preset-centered .custom-logo.kd-custom-logo {
object-position: center center !important;
margin: 0 auto !important;
}
body.kd-header-preset-centered .kd-header-actions {
grid-column: 3 !important;
order: 3 !important;
justify-self: end !important;
}
}
/* Preset 3: Minimalista / Drawer */
body.kd-header-preset-minimal .kd-site-navigation {
display: none !important;
}
/* Preset 4: Clássico / Menu à Direita (Logo à esquerda, menu à direita junto às ações) */
@media (min-width: 993px) {
body.kd-header-preset-classic_right .site-header .main-header {
display: grid !important;
grid-template-columns: auto 1fr auto !important;
align-items: center !important;
gap: 24px !important;
}
body.kd-header-preset-classic_right .site-branding {
grid-column: 1 !important;
justify-self: start !important;
flex: none !important;
order: 1 !important;
}
body.kd-header-preset-classic_right .kd-site-navigation {
grid-column: 2 !important;
justify-self: end !important;
display: flex !important;
justify-content: flex-end !important;
margin-left: auto !important;
margin-right: var(--kd-header-menu-margin-right, 16px) !important;
width: auto !important;
flex: none !important;
order: 2 !important;
}
body.kd-header-preset-classic_right .kd-site-navigation .kd-nav-menu-list {
justify-content: flex-end !important;
}
body.kd-header-preset-classic_right .kd-header-actions {
grid-column: 3 !important;
justify-self: end !important;
margin-left: 0 !important;
flex: none !important;
order: 3 !important;
}
}
/* ==================== 2.1 Navegação Horizontal (Desktop) ==================== */
.kd-site-navigation {
display: none;
}
@media (min-width: 993px) {
.kd-site-navigation {
display: flex !important;
align-items: center !important;
}
.kd-nav-menu-container {
display: flex !important;
align-items: center !important;
}
/* Alinhamentos Dinâmicos do Menu */
body.kd-header-preset-classic .kd-site-navigation.kd-nav-align-right,
.kd-site-navigation.kd-nav-align-right {
justify-self: end !important;
justify-content: flex-end !important;
margin-left: auto !important;
margin-right: var(--kd-header-menu-margin-right, 0px) !important;
}
.kd-site-navigation.kd-nav-align-right .kd-nav-menu-list {
justify-content: flex-end !important;
}
body.kd-header-preset-classic .kd-site-navigation.kd-nav-align-center,
.kd-site-navigation.kd-nav-align-center {
justify-self: center !important;
justify-content: center !important;
margin: 0 auto !important;
}
.kd-site-navigation.kd-nav-align-center .kd-nav-menu-list {
justify-content: center !important;
}
body.kd-header-preset-classic .kd-site-navigation.kd-nav-align-left,
.kd-site-navigation.kd-nav-align-left {
justify-self: start !important;
justify-content: flex-start !important;
margin-right: auto !important;
margin-left: var(--kd-header-menu-margin-left, 0px) !important;
}
.kd-site-navigation.kd-nav-align-left .kd-nav-menu-list {
justify-content: flex-start !important;
}
body.kd-header-preset-classic .kd-site-navigation.kd-nav-align-space_between,
.kd-site-navigation.kd-nav-align-space_between {
justify-content: space-between !important;
width: 100% !important;
}
.kd-site-navigation.kd-nav-align-space_between .kd-nav-menu-list {
justify-content: space-between !important;
width: 100% !important;
}
.kd-nav-menu-list {
display: flex !important;
align-items: center !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
gap: var(--kd-header-menu-gap, 24px) !important;
}
.kd-nav-menu-list > li {
position: relative !important;
margin: 0 !important;
padding: 0 !important;
display: inline-flex !important;
align-items: center !important;
}
.kd-nav-menu-list > li > a {
font-family: var(--kd-font-heading, inherit) !important;
font-size: var(--kd-header-font-size, 15px) !important;
font-weight: var(--kd-header-font-weight, 500) !important;
text-transform: var(--kd-header-text-transform, none) !important;
color: var(--kd-header-menu-color, var(--kd-header-text, #1e293b)) !important;
word-spacing: var(--kd-header-menu-word-spacing, 0px) !important;
text-decoration: none !important;
padding: 16px 0 !important;
display: inline-flex !important;
align-items: center !important;
line-height: 1.4 !important;
position: relative !important;
transition: color 0.18s ease, background-color 0.18s ease !important;
}
/* Traço elegante animado ao pairar (Padrão Underline) */
.kd-nav-hover-underline .kd-nav-menu-list > li > a::after,
.kd-nav-menu-list > li > a::after {
content: '' !important;
position: absolute !important;
bottom: 8px !important;
left: 0 !important;
width: 0 !important;
height: 2px !important;
background-color: var(--kd-header-hover, var(--kd-primary, #059669)) !important;
border-radius: 1px !important;
transition: width 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.kd-nav-hover-underline .kd-nav-menu-list > li:hover > a::after,
.kd-nav-hover-underline .kd-nav-menu-list > li.current-menu-item > a::after,
.kd-nav-menu-list > li:hover > a::after,
.kd-nav-menu-list > li.current-menu-item > a::after {
width: 100% !important;
}
/* Variação Hover: Pílula (Pill) */
.kd-nav-hover-pill .kd-nav-menu-list > li > a {
padding: 8px 14px !important;
border-radius: 9999px !important;
}
.kd-nav-hover-pill .kd-nav-menu-list > li > a::after {
display: none !important;
}
.kd-nav-hover-pill .kd-nav-menu-list > li:hover > a,
.kd-nav-hover-pill .kd-nav-menu-list > li.current-menu-item > a {
background-color: rgba(0, 0, 0, 0.06) !important;
color: var(--kd-header-hover, var(--kd-primary, #059669)) !important;
}
/* Variação Hover: Opacidade (Opacity) */
.kd-nav-hover-opacity .kd-nav-menu-list > li > a::after {
display: none !important;
}
.kd-nav-hover-opacity .kd-nav-menu-list > li:hover > a {
opacity: 0.65 !important;
}
/* Variação Hover: Apenas Cor (Color) */
.kd-nav-hover-color .kd-nav-menu-list > li > a::after {
display: none !important;
}
.kd-nav-hover-color .kd-nav-menu-list > li:hover > a,
.kd-nav-hover-color .kd-nav-menu-list > li.current-menu-item > a {
color: var(--kd-header-hover, var(--kd-primary, #059669)) !important;
}
.kd-nav-menu-list > li:hover > a,
.kd-nav-menu-list > li > a:hover,
.kd-nav-menu-list > li > a:focus {
color: var(--kd-header-menu-hover, var(--kd-header-hover, var(--kd-primary, #059669))) !important;
}
.kd-nav-menu-list > li.current-menu-item > a,
.kd-nav-menu-list > li.current_page_item > a,
.kd-nav-menu-list > li.current-menu-ancestor > a,
.kd-nav-menu-list > li.active > a {
color: var(--kd-header-menu-active, var(--kd-header-menu-hover, var(--kd-primary, #059669))) !important;
}
.kd-nav-menu-list > li:hover > a::after,
.kd-nav-menu-list > li > a:hover::after {
width: 100% !important;
background-color: var(--kd-header-menu-hover, var(--kd-header-hover, var(--kd-primary, #059669))) !important;
}
.kd-nav-menu-list > li.current-menu-item > a::after,
.kd-nav-menu-list > li.current_page_item > a::after,
.kd-nav-menu-list > li.active > a::after {
width: 100% !important;
background-color: var(--kd-header-menu-active, var(--kd-header-menu-hover, var(--kd-primary, #059669))) !important;
}
/* Seta para itens com submenus */
.kd-nav-menu-list > li.menu-item-has-children > a {
padding-right: 14px !important;
}
.kd-nav-menu-list > li.menu-item-has-children::before {
content: '' !important;
position: absolute !important;
right: 0 !important;
top: 50% !important;
transform: translateY(-50%) !important;
width: 8px !important;
height: 5px !important;
background-color: currentColor !important;
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain !important;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain !important;
opacity: 0.55 !important;
pointer-events: none !important;
transition: transform 0.2s ease, opacity 0.2s ease !important;
}
.kd-nav-menu-list > li.menu-item-has-children:hover::before,
.kd-nav-menu-list > li.menu-item-has-children.is-dropdown-open::before {
transform: translateY(-50%) rotate(180deg) !important;
opacity: 1 !important;
}
/* Submenus / Dropdowns */
.kd-nav-menu-list ul.sub-menu {
position: absolute !important;
top: 100% !important;
left: 0 !important;
background-color: var(--kd-header-submenu-bg, #ffffff) !important;
min-width: 220px !important;
padding: 10px 0 !important;
margin: 0 !important;
list-style: none !important;
border-radius: var(--kd-card-radius, 8px) !important;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04) !important;
border: 1px solid rgba(0, 0, 0, 0.06) !important;
opacity: 0 !important;
visibility: hidden !important;
transform: translateY(10px) !important;
transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.2s ease !important;
z-index: 1000 !important;
}
.kd-nav-menu-list > li:hover > ul.sub-menu,
.kd-nav-menu-list > li:focus-within > ul.sub-menu,
.kd-nav-menu-list > li.menu-item-has-children.is-dropdown-open > ul.sub-menu {
opacity: 1 !important;
visibility: visible !important;
transform: translateY(0) !important;
pointer-events: auto !important;
}
.kd-nav-menu-list ul.sub-menu li {
margin: 0 !important;
padding: 0 !important;
display: block !important;
position: relative !important;
}
.kd-nav-menu-list ul.sub-menu li a {
display: block !important;
padding: 8px 18px !important;
font-size: var(--kd-header-submenu-font-size, 14px) !important;
font-weight: var(--kd-header-submenu-font-weight, 500) !important;
color: var(--kd-header-submenu-color, var(--kd-secondary, #334155)) !important;
text-decoration: none !important;
transition: background-color 0.15s ease, color 0.15s ease, padding-left 0.15s ease !important;
}
.kd-nav-menu-list ul.sub-menu li a:hover,
.kd-nav-menu-list ul.sub-menu li a:focus {
background-color: rgba(5, 150, 105, 0.06) !important;
color: var(--kd-header-menu-hover, var(--kd-header-hover, var(--kd-primary, #059669))) !important;
padding-left: 22px !important;
}
.kd-nav-menu-list ul.sub-menu ul.sub-menu {
top: 0 !important;
left: 100% !important;
margin-left: 4px !important;
}
/* Padrão Mega Menu em Colunas */
.kd-menu-style-mega_menu .kd-nav-menu-list > li.menu-item-has-children > ul.sub-menu {
display: flex !important;
flex-wrap: wrap !important;
min-width: 460px !important;
padding: 18px 22px !important;
gap: 16px 24px !important;
}
.kd-menu-style-mega_menu .kd-nav-menu-list > li.menu-item-has-children > ul.sub-menu > li {
flex: 1 1 180px !important;
}
}
/* ==================== 2.2 Sticky Header Inteligente (Shopify Dawn Pattern) ==================== */
body.kd-sticky-always .site-header,
body.kd-sticky-always .kd-header {
position: sticky !important;
top: 0 !important;
z-index: 990 !important;
background-color: var(--kd-surface, #ffffff);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
body.kd-sticky-scroll_up .site-header,
body.kd-sticky-scroll_up .kd-header {
position: sticky !important;
top: 0 !important;
z-index: 990 !important;
background-color: var(--kd-surface, #ffffff);
transition: transform 0.28s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.25s ease !important;
}
body.kd-sticky-scroll_up .site-header.kd-header-hidden,
body.kd-sticky-scroll_up .kd-header.kd-header-hidden {
transform: translateY(-100%) !important;
}
body.kd-sticky-scroll_up .site-header.kd-header-sticky-visible,
body.kd-sticky-scroll_up .kd-header.kd-header-sticky-visible {
transform: translateY(0) !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
}
/* ==================== 3. Utilidades do Cabeçalho (Pesquisa, Conta & Carrinho) ==================== */
.kd-header-actions {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
}
.kd-header-search-wrapper,
.kd-header-account-wrapper,
.kd-header-cart-wrapper,
.kd-mobile-menu-trigger-wrap,
.kd-header-shortcode-wrapper {
position: relative;
display: inline-flex;
align-items: center;
}
/* Flex Order Global (Desktop e Mobile) */
.kd-header-search-wrapper {
order: var(--kd-order-search, 10) !important;
}
.kd-header-account-wrapper {
order: var(--kd-order-account, 20) !important;
}
.kd-header-cart-wrapper {
order: var(--kd-order-cart, 30) !important;
}
.kd-mobile-menu-trigger-wrap {
order: var(--kd-order-hamburger, 40) !important;
}
.kd-header-shortcode-1 {
order: var(--kd-order-shortcode-1, 15) !important;
}
.kd-header-shortcode-2 {
order: var(--kd-order-shortcode-2, 25) !important;
}
.kd-header-shortcode-3 {
order: var(--kd-order-shortcode-3, 35) !important;
}
/* Visibilidade dos Shortcodes Personalizados */
@media (max-width: 992px) {
.kd-header-shortcode-wrapper.kd-shortcode-vis-desktop {
display: none !important;
}
}
@media (min-width: 993px) {
.kd-header-shortcode-wrapper.kd-shortcode-vis-mobile {
display: none !important;
}
/* Ocultar gatilho móvel no desktop exceto se configurado para 'all' */
.kd-mobile-menu-trigger-wrap:not(.kd-hamburger-visible-all) {
display: none !important;
}
}
/* ==================== Utilitários Responsivos de Visibilidade de Elementos ==================== */
@media (min-width: 993px) {
.kd-hide-desktop {
display: none !important;
}
}
@media (min-width: 769px) and (max-width: 992px) {
.kd-hide-tablet {
display: none !important;
}
}
@media (max-width: 768px) {
.kd-hide-mobile {
display: none !important;
}
}
.kd-header-search-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: var(--kd-radius, 8px);
background: transparent;
border: none;
color: var(--kd-header-search-icon-color, var(--kd-header-text, inherit));
cursor: pointer;
transition: background-color 0.2s ease, color 0.15s ease, transform 0.1s ease;
}
.kd-header-search-icon {
display: flex;
align-items: center;
justify-content: center;
}
.kd-header-search-icon svg {
width: var(--kd-header-search-icon-size, 20px) !important;
height: var(--kd-header-search-icon-size, 20px) !important;
}
.kd-header-search-trigger:hover,
.kd-header-search-trigger:focus {
background-color: rgba(0, 0, 0, 0.05);
color: var(--kd-header-menu-hover, var(--kd-header-hover, var(--kd-primary, #059669)));
}
.kd-header-search-trigger:active {
transform: scale(0.95);
}
/* Erradicação Canónica do Antigo Dropdown de Pesquisa (Substituído pelo Kardeu Ajax Search Modal) */
.kd-header-search-dropdown,
#kd-header-search-form,
.kd-search-input-wrap,
.kd-search-input,
.kd-search-close {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
height: 0 !important;
width: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
box-shadow: none !important;
position: absolute !important;
top: -9999px !important;
left: -9999px !important;
}
.kd-header-account-link {
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
width: 44px;
height: 44px;
border-radius: var(--kd-radius, 8px);
color: var(--kd-header-text, inherit);
text-decoration: none;
transition: background-color 0.2s ease, color 0.15s ease, transform 0.1s ease;
}
.kd-header-account-link:hover,
.kd-header-account-link:focus {
background-color: rgba(0, 0, 0, 0.05);
color: var(--kd-header-hover, var(--kd-primary, #059669));
}
.kd-header-account-link:active {
transform: scale(0.95);
}
.kd-header-cart-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
width: 44px;
height: 44px;
border-radius: var(--kd-radius, 8px);
color: var(--kd-header-cart-icon-color, var(--kd-header-text, inherit));
text-decoration: none;
transition: background-color 0.2s ease, color 0.15s ease, transform 0.1s ease;
}
.kd-header-cart-trigger:hover,
.kd-header-cart-trigger:focus {
background-color: rgba(0, 0, 0, 0.05);
color: var(--kd-header-menu-hover, var(--kd-header-hover, var(--kd-primary, #059669)));
}
.kd-header-cart-trigger:active {
transform: scale(0.95);
}
.kd-header-cart-icon {
display: flex;
align-items: center;
justify-content: center;
}
.kd-header-cart-icon svg,
.kd-header-cart-icon img {
width: var(--kd-header-cart-icon-size, 22px) !important;
height: var(--kd-header-cart-icon-size, 22px) !important;
}
.kd-header-cart-badge {
position: absolute;
top: 2px;
right: 2px;
background-color: var(--kd-header-cart-badge-bg, var(--kd-primary, #059669));
color: var(--kd-header-cart-badge-color, #ffffff);
font-size: 11px;
font-weight: 700;
min-width: 18px;
height: 18px;
padding: 0 4px;
border-radius: 9px;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.kd-header-cart-badge.kd-badge-empty {
display: none;
}
.kd-header-cart-badge.kd-badge-bounce {
animation: kdBadgeBounce 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes kdBadgeBounce {
0% { transform: scale(1); }
50% { transform: scale(1.35); }
100% { transform: scale(1); }
}
/* Gatilho Hambúrguer do Menu Móvel */
.kd-mobile-menu-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
border-radius: var(--kd-radius, 8px);
background: transparent;
border: none;
color: var(--kd-header-hamburger-color, var(--kd-header-text, inherit));
cursor: pointer;
transition: background-color 0.2s ease, color 0.15s ease, transform 0.1s ease;
}
.kd-mobile-menu-trigger:hover,
.kd-mobile-menu-trigger:focus {
background-color: rgba(0, 0, 0, 0.05);
color: var(--kd-header-menu-hover, var(--kd-header-hover, var(--kd-primary, #059669)));
}
.kd-mobile-menu-trigger:active {
transform: scale(0.95);
}
.kd-hamburger-icon {
display: flex;
align-items: center;
justify-content: center;
color: inherit;
}
.kd-hamburger-icon svg {
width: var(--kd-header-hamburger-size, 24px) !important;
height: var(--kd-header-hamburger-size, 24px) !important;
color: inherit;
}
/* ==================== 4. Mini-Carrinho Gaveta (Cart Drawer) ==================== */
.kd-cart-drawer-overlay {
position: fixed;
inset: 0;
background-color: rgba(15, 23, 42, 0.6);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 99998;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease;
pointer-events: none;
}
.kd-cart-drawer-overlay.kd-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.kd-cart-drawer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 440px;
max-width: 100vw;
background-color: #ffffff;
box-shadow: -8px 0 32px rgba(0, 0, 0, 0.16);
z-index: 99999;
display: flex;
flex-direction: column;
transform: translateX(100%);
visibility: hidden;
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease;
outline: none;
box-sizing: border-box;
}
.kd-cart-drawer.kd-open {
transform: translateX(0);
visibility: visible;
}
body.kd-drawer-active {
overflow: hidden !important;
}
.kd-cart-drawer__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
border-bottom: 1px solid #e2e8f0;
background-color: #ffffff;
flex-shrink: 0;
}
.kd-cart-drawer__title {
display: flex;
align-items: center;
gap: 8px;
}
.kd-cart-drawer__heading {
font-size: 18px;
font-weight: 700;
color: #0f172a;
letter-spacing: -0.01em;
}
.kd-cart-drawer__count-wrap {
font-size: 14px;
font-weight: 600;
color: #64748b;
}
.kd-cart-drawer__close {
background: transparent;
border: none;
color: #64748b;
padding: 8px;
cursor: pointer;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
transition: color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}
.kd-cart-drawer__close:hover,
.kd-cart-drawer__close:focus {
color: #0f172a;
background-color: #f1f5f9;
transform: rotate(90deg);
}
.kd-cart-drawer__body {
flex: 1;
overflow-y: auto;
overscroll-behavior: contain;
position: relative;
}
.kd-drawer-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 24px;
text-align: center;
}
.kd-drawer-empty__icon {
color: #94a3b8;
margin-bottom: 16px;
}
.kd-drawer-empty__title {
font-size: 18px;
font-weight: 700;
color: #0f172a;
margin: 0 0 8px 0;
}
.kd-drawer-empty__desc {
font-size: 14px;
color: #64748b;
margin: 0 0 24px 0;
max-width: 280px;
line-height: 1.5;
}
.kd-drawer-empty__btn {
background-color: var(--kd-primary, #059669) !important;
color: #ffffff !important;
border-radius: var(--kd-radius, 8px) !important;
padding: 12px 28px !important;
font-size: 14px !important;
font-weight: 600 !important;
text-decoration: none !important;
}
.kd-drawer-items-list {
padding: 16px 24px;
}
.kd-drawer-item {
display: flex;
gap: 16px;
padding: 16px 0;
border-bottom: 1px solid #f1f5f9;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.kd-drawer-item.kd-item-removing {
opacity: 0.3;
transform: scale(0.98);
pointer-events: none;
}
.kd-drawer-item__thumb {
width: 72px;
height: 72px;
flex-shrink: 0;
border-radius: var(--kd-radius, 8px);
overflow: hidden;
background: #f8fafc;
border: 1px solid #e2e8f0;
}
.kd-drawer-item__thumb img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.kd-drawer-item__details {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
min-width: 0;
}
.kd-drawer-item__title-wrap {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 8px;
}
.kd-drawer-item__title {
margin: 0;
font-size: 14px;
font-weight: 600;
line-height: 1.35;
color: #0f172a;
}
.kd-drawer-item__title a {
color: inherit;
text-decoration: none;
transition: color 0.15s ease;
}
.kd-drawer-item__title a:hover {
color: var(--kd-primary, #059669);
}
.kd-drawer-item__remove {
background: transparent;
border: none;
color: #94a3b8;
cursor: pointer;
padding: 4px;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
transition: color 0.15s ease, background-color 0.15s ease;
flex-shrink: 0;
}
.kd-drawer-item__remove:hover,
.kd-drawer-item__remove:focus {
color: #ef4444;
background-color: #fee2e2;
}
.kd-drawer-item__meta {
font-size: 12px;
color: #64748b;
margin-top: 4px;
}
.kd-drawer-item__bottom {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10px;
}
/* Stepper de Quantidade */
.kd-quantity-stepper {
display: inline-flex;
align-items: center;
border: 1px solid #cbd5e1;
border-radius: var(--kd-radius, 8px);
background: #ffffff;
height: 32px;
overflow: hidden;
}
.kd-qty-btn {
width: 30px;
height: 100%;
background: transparent;
border: none;
color: #334155;
font-size: 15px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: background-color 0.15s ease, color 0.15s ease;
user-select: none;
}
.kd-qty-btn:hover,
.kd-qty-btn:focus {
background-color: #f1f5f9;
color: #0f172a;
}
.kd-qty-input {
width: 36px;
height: 100%;
border: none !important;
background: transparent !important;
text-align: center;
font-size: 13px;
font-weight: 700;
color: #0f172a;
padding: 0 !important;
margin: 0 !important;
-moz-appearance: textfield;
}
.kd-qty-input::-webkit-outer-spin-button,
.kd-qty-input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.kd-drawer-item__price {
font-size: 14px;
font-weight: 700;
color: #0f172a;
}
.kd-cart-drawer__footer {
padding: 20px 24px;
background-color: #f8fafc;
border-top: 1px solid #e2e8f0;
flex-shrink: 0;
}
.kd-drawer-subtotal {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 4px;
}
.kd-drawer-subtotal__label {
font-size: 15px;
font-weight: 600;
color: #334155;
}
.kd-drawer-subtotal__amount {
font-size: 18px;
font-weight: 800;
color: #0f172a;
}
.kd-drawer-shipping-notice {
font-size: 12px;
color: #64748b;
margin: 0 0 16px 0;
}
.kd-drawer-actions {
display: flex;
flex-direction: column;
gap: 10px;
}
.kd-btn-checkout {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
width: 100% !important;
height: 48px !important;
background-color: var(--kd-primary, #059669) !important;
color: #ffffff !important;
border-radius: var(--kd-radius, 8px) !important;
font-size: 15px !important;
font-weight: 700 !important;
text-decoration: none !important;
border: none !important;
box-shadow: 0 2px 8px rgba(5, 150, 105, 0.25) !important;
transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
}
.kd-btn-checkout:hover,
.kd-btn-checkout:focus {
background-color: var(--kd-primary-hover, #047857) !important;
box-shadow: 0 4px 14px rgba(5, 150, 105, 0.35) !important;
}
.kd-btn-view-cart {
display: block;
text-align: center;
font-size: 13px;
font-weight: 600;
color: #475569;
text-decoration: none;
padding: 6px 0;
}
.kd-btn-view-cart:hover {
color: var(--kd-primary, #059669);
text-decoration: underline;
}
.kd-drawer-trust {
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
margin-top: 14px;
font-size: 11px;
color: #64748b;
font-weight: 500;
}
/* ==================== 4.1 Menu Móvel / Slide-Out Navigation Drawer ==================== */
body.kd-mobile-menu-active {
overflow: hidden !important;
}
.kd-mobile-menu-overlay {
position: fixed;
inset: 0;
background-color: rgba(15, 23, 42, 0.6);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
z-index: 99998;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s ease;
pointer-events: none;
}
.kd-mobile-menu-overlay.kd-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.kd-mobile-menu-drawer {
position: fixed;
top: 0;
right: 0;
bottom: 0;
width: 340px;
max-width: 88vw;
background-color: #ffffff;
box-shadow: -8px 0 32px rgba(0, 0, 0, 0.16);
z-index: 99999;
display: flex;
flex-direction: column;
transform: translate3d(100%, 0, 0);
visibility: hidden;
transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.32s ease;
outline: none;
box-sizing: border-box;
}
.kd-mobile-menu-drawer.kd-open {
transform: translate3d(0, 0, 0);
visibility: visible;
}
.kd-mobile-drawer__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 20px;
border-bottom: 1px solid #f1f5f9;
background-color: #ffffff;
flex-shrink: 0;
}
.kd-mobile-drawer__branding {
display: flex;
align-items: center;
}
.kd-mobile-drawer__logo {
max-height: 36px;
width: auto;
object-fit: contain;
}
.kd-mobile-drawer__title {
font-size: 18px;
font-weight: 700;
color: #0f172a;
text-decoration: none;
}
.kd-mobile-drawer__close {
background: transparent;
border: none;
color: #64748b;
padding: 8px;
cursor: pointer;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
transition: color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}
.kd-mobile-drawer__close:hover,
.kd-mobile-drawer__close:focus {
color: #0f172a;
background-color: #f1f5f9;
transform: rotate(90deg);
}
.kd-mobile-drawer__search {
padding: 14px 20px;
border-bottom: 1px solid #f1f5f9;
background-color: #f8fafc;
}
.kd-mobile-search-wrap {
position: relative;
display: flex;
align-items: center;
}
.kd-mobile-search-icon {
position: absolute;
left: 12px;
color: #94a3b8;
pointer-events: none;
display: flex;
align-items: center;
}
.kd-mobile-search-input {
width: 100% !important;
height: 40px !important;
padding: 0 14px 0 38px !important;
border-radius: var(--kd-radius, 8px) !important;
border: 1px solid #e2e8f0 !important;
background-color: #ffffff !important;
font-size: 14px !important;
color: #1e293b !important;
outline: none !important;
box-shadow: none !important;
box-sizing: border-box !important;
transition: border-color 0.15s ease;
}
.kd-mobile-search-input:focus {
border-color: var(--kd-primary, #059669) !important;
box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.12) !important;
}
.kd-mobile-drawer__body {
flex: 1;
overflow-y: auto;
overscroll-behavior: contain;
padding: 12px 0;
}
.kd-mobile-menu-list {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.kd-mobile-menu-list li {
position: relative;
border-bottom: 1px solid #f8fafc;
margin: 0 !important;
}
.kd-mobile-menu-list > li > a {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 20px;
font-size: 16px;
font-weight: 600;
color: #1e293b;
text-decoration: none;
transition: color 0.15s ease, background-color 0.15s ease;
}
.kd-mobile-menu-list > li > a:hover {
color: var(--kd-primary, #059669);
background-color: #f8fafc;
}
.kd-mobile-menu-list .kd-submenu-toggle {
position: absolute;
right: 12px;
top: 7px;
width: 36px;
height: 36px;
border: none;
background: transparent;
color: #64748b;
border-radius: 6px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: transform 0.2s ease, color 0.15s ease, background-color 0.15s ease;
z-index: 2;
}
.kd-mobile-menu-list .kd-submenu-toggle:hover {
color: #0f172a;
background-color: #f1f5f9;
}
.kd-mobile-menu-list li.is-open > .kd-submenu-toggle {
transform: rotate(180deg);
color: var(--kd-primary, #059669);
}
.kd-mobile-menu-list ul.sub-menu {
list-style: none !important;
margin: 0 !important;
padding: 0 0 6px 0 !important;
background-color: #f8fafc;
display: none;
}
.kd-mobile-menu-list li.is-open > ul.sub-menu {
display: block;
}
.kd-mobile-menu-list ul.sub-menu li a {
display: block;
padding: 10px 20px 10px 32px;
font-size: 14px;
font-weight: 500;
color: #475569;
text-decoration: none;
transition: color 0.15s ease, padding-left 0.15s ease;
}
.kd-mobile-menu-list ul.sub-menu li a:hover {
color: var(--kd-primary, #059669);
padding-left: 36px;
}
.kd-mobile-menu-list ul.sub-menu ul.sub-menu li a {
padding-left: 44px;
font-size: 13px;
}
.kd-mobile-drawer__footer {
padding: 16px 20px;
border-top: 1px solid #f1f5f9;
background-color: #ffffff;
flex-shrink: 0;
}
.kd-mobile-drawer__account-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 12px;
border-radius: var(--kd-radius, 8px);
background-color: #f1f5f9;
color: #1e293b;
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: background-color 0.15s ease, color 0.15s ease;
}
.kd-mobile-drawer__account-btn:hover {
background-color: var(--kd-primary, #059669);
color: #ffffff;
}
.kd-mobile-drawer__account-btn svg {
flex-shrink: 0;
}
/* ==================== 5. Rodapé Modular & Crachás de Pagamento ==================== */
/* Sticky Footer de Alta Conversão (Shopify Dawn Standard) */
html {
height: 100%;
}
body {
min-height: 100%;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
}
#page,
.site,
.hfeed.site {
display: flex !important;
flex-direction: column !important;
min-height: 100vh !important;
flex: 1 0 auto !important;
width: 100% !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
#content,
.site-content {
flex: 1 0 auto !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.kd-modular-footer {
margin-top: var(--kd-footer-margin-top, 40px) !important;
margin-bottom: 0 !important;
width: 100% !important;
background-color: var(--kd-footer-bg, #0f172a);
border-top: var(--kd-footer-border-top, 1px solid #334155) !important;
padding-top: var(--kd-footer-padding-y, 40px);
padding-bottom: 135px !important;
color: var(--kd-footer-text, #94a3b8);
position: relative;
box-shadow: 0 50vh 0 50vh var(--kd-footer-bg, #0f172a);
clip-path: inset(0 -100vw -100vh -100vw);
transition: background-color 0.2s ease, color 0.2s ease;
font-family: var(--kd-font-body, var(--kardeu-font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif)) !important;
}
.kd-modular-footer,
.kd-modular-footer * {
font-family: var(--kd-font-body, var(--kardeu-font-body, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif));
}
.kd-footer-logo-title,
.kd-footer-title,
.kd-footer-unit,
.kd-footer-newsletter-title,
.kd-copyright-line1,
.kd-gdpr-lead,
.kd-trust-lead {
font-family: var(--kd-font-heading, var(--kardeu-font-heading, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif)) !important;
}
@media (max-width: 768px) {
.kd-modular-footer {
margin-top: var(--kd-footer-margin-top-mobile, 24px) !important;
padding-top: var(--kd-footer-padding-y-mobile, 32px);
padding-bottom: 135px !important;
}
}
/* Neutralização Total de Rodapés e Elementos Legados de Outros Temas */
footer.site-footer:not(.kardeu-site-footer):not(.kd-modular-footer),
footer.copyright:not(.kardeu-site-footer):not(.kd-modular-footer),
.site-footer:not(.kardeu-site-footer):not(.kd-modular-footer),
.shoptimizer-footer-widgets,
#colophon:not(#kardeu-colophon):not(.kardeu-site-footer),
.colophon:not(#kardeu-colophon):not(.kardeu-site-footer),
.below-content {
display: none !important;
margin: 0 !important;
padding: 0 !important;
height: 0 !important;
min-height: 0 !important;
max-height: 0 !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
border: none !important;
background: transparent !important;
}
/* Garantia de Visibilidade do Rodapé Modular Kardeu */
footer.kardeu-site-footer,
.kardeu-site-footer,
.kd-modular-footer {
display: block !important;
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
height: auto !important;
min-height: auto !important;
max-height: none !important;
}
.kd-modular-footer__inner {
max-width: var(--kd-container-width, 1320px);
margin: 0 auto;
padding: 0 24px;
}
/* Grelha de Colunas Modulares Estilo Shopify */
.kd-footer-columns-grid {
display: grid;
grid-template-columns: 1.35fr 0.95fr 0.95fr 1.35fr;
gap: 32px;
margin-bottom: 24px;
}
.kd-footer-columns-grid.kd-footer-layout-4_col {
grid-template-columns: 1.35fr 0.95fr 0.95fr 1.35fr;
}
.kd-footer-columns-grid.kd-footer-layout-wide_left_3_col {
grid-template-columns: 2fr 1fr 1.2fr;
gap: 36px;
}
.kd-footer-columns-grid.kd-footer-layout-3_col {
grid-template-columns: 1fr 1fr 1fr;
gap: 36px;
}
.kd-footer-columns-grid.kd-footer-layout-2_col {
grid-template-columns: 1.3fr 1fr;
gap: 48px;
}
.kd-footer-columns-grid.kd-footer-layout-1_col_centered {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
max-width: 680px;
margin-left: auto;
margin-right: auto;
gap: 24px;
}
.kd-footer-columns-grid.kd-footer-layout-1_col_centered .kd-footer-col {
width: 100%;
align-items: center;
text-align: center;
}
.kd-footer-columns-grid.kd-footer-layout-1_col_centered .kd-footer-contact,
.kd-footer-columns-grid.kd-footer-layout-1_col_centered .kd-footer-social-row,
.kd-footer-columns-grid.kd-footer-layout-1_col_centered .kd-footer-links {
justify-content: center;
align-items: center;
}
@media (max-width: 1024px) {
.kd-footer-columns-grid,
.kd-footer-columns-grid.kd-footer-layout-4_col,
.kd-footer-columns-grid.kd-footer-layout-wide_left_3_col,
.kd-footer-columns-grid.kd-footer-layout-3_col {
grid-template-columns: repeat(2, 1fr);
gap: 32px;
}
}
@media (max-width: 640px) {
.kd-footer-columns-grid,
.kd-footer-columns-grid.kd-footer-layout-4_col,
.kd-footer-columns-grid.kd-footer-layout-wide_left_3_col,
.kd-footer-columns-grid.kd-footer-layout-3_col,
.kd-footer-columns-grid.kd-footer-layout-2_col {
grid-template-columns: 1fr;
gap: 28px;
}
}
/* Coluna 1: Logótipo, Unidade, Morada & Dados da Empresa */
.kd-footer-logo-link {
display: inline-block;
margin-bottom: 16px;
text-decoration: none;
}
.kd-footer-logo {
width: var(--kd-footer-logo-w-desktop, 160px);
max-width: 100%;
height: auto;
object-fit: contain;
display: block;
}
@media (max-width: 992px) {
.kd-footer-logo {
width: var(--kd-footer-logo-w-tablet, 140px);
}
}
@media (max-width: 767px) {
.kd-footer-logo {
width: var(--kd-footer-logo-w-mobile, 120px);
}
}
.kd-footer-logo-title {
font-family: var(--kd-font-heading, var(--kardeu-font-heading, sans-serif)) !important;
font-size: 26px;
font-weight: 800;
margin: 0 0 16px 0;
letter-spacing: -0.5px;
color: var(--kd-footer-heading, #ffffff);
}
.kd-footer-company-block {
display: flex;
flex-direction: column;
}
.kd-footer-unit {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: var(--kd-footer-unit-size, var(--kd-footer-heading-size, 14px)) !important;
font-weight: var(--kd-footer-unit-weight, var(--kd-footer-heading-weight, 700)) !important;
line-height: 1.3 !important;
color: var(--kd-footer-heading, #ffffff);
margin-bottom: 8px;
}
.kd-footer-unit-title,
.kd-footer-unit strong,
.kd-footer-unit span {
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
}
.kd-footer-unit svg,
.kd-footer-unit-icon {
width: 1em !important;
height: 1em !important;
font-size: inherit !important;
flex-shrink: 0 !important;
stroke: currentColor;
opacity: 0.9;
}
.kd-footer-address {
font-size: var(--kd-footer-address-size, var(--kd-footer-text-size, 13px)) !important;
font-weight: var(--kd-footer-address-weight, var(--kd-footer-text-weight, 400)) !important;
line-height: 1.55;
color: var(--kd-footer-text, #94a3b8);
margin-bottom: 12px;
}
.kd-footer-about-text {
font-size: var(--kd-footer-address-size, var(--kd-footer-text-size, 13px)) !important;
font-weight: var(--kd-footer-address-weight, var(--kd-footer-text-weight, 400)) !important;
line-height: 1.6;
color: var(--kd-footer-text, #94a3b8);
margin: 0;
}
.kd-footer-contact {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 12px;
}
.kd-footer-contact-item {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: var(--kd-footer-contact-size, var(--kd-footer-text-size, 13px)) !important;
font-weight: var(--kd-footer-contact-weight, var(--kd-footer-text-weight, 400)) !important;
color: var(--kd-footer-text, #94a3b8);
text-decoration: none;
transition: color 0.15s ease;
}
.kd-footer-contact-item:hover,
.kd-footer-contact-item:hover span {
color: var(--kd-footer-link-hover, var(--kd-footer-hover, #38bdf8)) !important;
}
.kd-footer-contact-item:hover svg {
stroke: var(--kd-footer-link-hover, var(--kd-footer-hover, #38bdf8)) !important;
}
.kd-footer-contact-item:active,
.kd-footer-contact-item.active,
.kd-footer-contact-item:active span,
.kd-footer-contact-item.active span {
color: var(--kd-footer-link-active, #38bdf8) !important;
}
.kd-footer-contact-item svg {
flex-shrink: 0;
stroke: currentColor;
transition: stroke 0.15s ease;
}
.kd-footer-disclaimer {
font-size: var(--kd-footer-disclaimer-size, 11px) !important;
font-weight: var(--kd-footer-disclaimer-weight, 400) !important;
line-height: 1.45;
color: var(--kd-footer-text, #94a3b8);
opacity: 0.85;
margin: 10px 0 0 0;
}
/* Colunas Centrais: Links & Navegação */
.kd-footer-title {
font-family: var(--kd-font-heading, var(--kardeu-font-heading, sans-serif)) !important;
font-size: var(--kd-footer-heading-size, 16px) !important;
font-weight: var(--kd-footer-heading-weight, 700) !important;
margin: 0 0 14px 0;
color: var(--kd-footer-heading, #ffffff) !important;
}
.kd-footer-links {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.kd-footer-links li {
margin-bottom: 9px !important;
}
.kd-footer-has-separators .kd-footer-links li:not(:last-child),
.kd-footer-has-separators .kd-footer-col-legal ul > li:not(:last-child),
.kd-footer-has-separators .kd-footer-col-nav ul > li:not(:last-child),
.kd-footer-has-separators .kd-footer-columns-grid ul.kd-footer-links > li:not(:last-child),
.kd-modular-footer.kd-footer-has-separators ul.kd-footer-links > li:not(:last-child) {
border-bottom: 1px var(--kd-footer-menu-sep-style, dashed) var(--kd-footer-menu-sep-color, var(--kd-footer-border, #e2e8f0)) !important;
padding-bottom: 8px !important;
margin-bottom: 8px !important;
list-style: none !important;
}
.kd-footer-has-separators .kd-footer-links li a,
.kd-footer-has-separators .kd-footer-col-legal ul > li a,
.kd-footer-has-separators .kd-footer-col-nav ul > li a {
display: block !important;
width: 100% !important;
}
.kd-footer-links a {
color: var(--kd-footer-text, #94a3b8) !important;
font-size: var(--kd-footer-text-size, 13px) !important;
font-weight: var(--kd-footer-text-weight, 400) !important;
text-decoration: none;
transition: color 0.15s ease !important;
display: inline-block;
transform: none !important;
}
.kd-footer-links a:hover {
color: var(--kd-footer-link-hover, var(--kd-footer-hover, #38bdf8)) !important;
transform: none !important;
}
/* Links Ativos (Página Atual ou Menu Ativo no Rodapé) */
.kd-footer-links li.current-menu-item > a,
.kd-footer-links li.current_page_item > a,
.kd-footer-links li.current-menu-ancestor > a,
.kd-footer-links li.current-menu-parent > a,
.kd-modular-footer a.active,
.kd-modular-footer a[aria-current="page"] {
color: var(--kd-footer-link-active, #38bdf8) !important;
font-weight: 600;
}
.kd-footer-links li.current-menu-item > a:hover,
.kd-footer-links li.current_page_item > a:hover,
.kd-footer-links li.current-menu-ancestor > a:hover,
.kd-footer-links li.current-menu-parent > a:hover,
.kd-modular-footer a.active:hover,
.kd-modular-footer a[aria-current="page"]:hover {
color: var(--kd-footer-link-hover, var(--kd-footer-hover, #38bdf8)) !important;
transform: none !important;
}
/* Coluna 4: Direita (Selos, Imagem, Newsletter & Redes Sociais) */
.kd-footer-col-right {
display: flex;
flex-direction: column;
gap: 18px;
}
.kd-footer-trust-img-wrap {
display: block;
width: 100%;
}
.kd-footer-trust-img {
width: var(--kd-footer-trust-img-w-desktop, 280px);
max-width: 100%;
height: auto;
display: block;
object-fit: contain;
border-radius: var(--kd-radius, 6px);
}
@media (max-width: 992px) {
.kd-footer-trust-img {
width: var(--kd-footer-trust-img-w-tablet, 240px);
}
}
@media (max-width: 767px) {
.kd-footer-trust-img {
width: var(--kd-footer-trust-img-w-mobile, 200px);
}
}
/* Preset Gráfico Nativo de Selos de Confiança */
.kd-footer-trust-preset {
display: flex;
flex-direction: column;
gap: 12px;
}
.kd-trust-row-top {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.kd-trust-badge {
display: inline-flex;
align-items: center;
gap: 10px;
color: var(--kd-footer-heading, #ffffff);
}
.kd-trust-icon {
stroke: var(--kd-footer-text, #94a3b8);
flex-shrink: 0;
}
.kd-trust-divider {
width: 1px;
height: 24px;
background: rgba(255, 255, 255, 0.18);
margin: 0 4px;
flex-shrink: 0;
}
.kd-modular-footer[data-scheme="light"] .kd-trust-divider,
.kd-modular-footer[data-scheme="surface"] .kd-trust-divider {
background: #cbd5e1;
}
.kd-trust-text {
display: flex;
flex-direction: column;
line-height: 1.15;
}
.kd-trust-lead {
font-size: 13px;
font-weight: 800;
color: var(--kd-footer-heading, #ffffff);
letter-spacing: 0.02em;
}
.kd-trust-sub {
font-size: 11px;
font-weight: 500;
color: var(--kd-footer-text, #94a3b8);
}
/* Linha de Cartões de Pagamento Uniformes ("MAIS GRANDE" & Idêntico à Imagem 1) */
.kd-trust-row-payments {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin: 2px 0;
}
.kd-payment-card {
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--kd-footer-card-width, 74px);
height: var(--kd-footer-card-height, 46px);
background: #ffffff;
border-radius: 6px !important;
border: 1px solid #cbd5e1;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
flex-shrink: 0;
overflow: hidden;
padding: 0;
box-sizing: border-box;
transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.kd-payment-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);
border-color: #94a3b8;
}
.kd-payment-card.kd-card-blue {
background: #00579F !important;
border-color: rgba(255, 255, 255, 0.25) !important;
color: #ffffff;
}
.kd-payment-card.kd-pay-amex {
background: #006FCF !important;
border-color: rgba(255, 255, 255, 0.25) !important;
color: #ffffff;
}
.kd-payment-card svg {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
display: block;
object-fit: contain;
}
/* Selo GDPR Compliant com Círculo de 12 Estrelas Europeias & Cadeado ("MAIS GRANDE" 52px) */
.kd-trust-row-gdpr {
display: flex;
align-items: center;
margin-top: 16px;
margin-bottom: 6px;
}
.kd-gdpr-badge {
display: inline-flex;
align-items: center;
gap: 16px;
color: var(--kd-footer-heading, #ffffff);
}
.kd-gdpr-icon {
width: 52px;
height: 52px;
min-width: 52px;
color: #cbd5e1;
flex-shrink: 0;
}
.kd-gdpr-text {
display: flex;
flex-direction: column;
justify-content: center;
line-height: 1.2;
}
.kd-gdpr-lead {
font-size: 21px !important;
font-weight: 800 !important;
color: var(--kd-footer-heading, #ffffff) !important;
letter-spacing: -0.01em;
}
.kd-gdpr-sub {
font-size: 15px !important;
font-weight: 400 !important;
color: var(--kd-footer-text, #94a3b8) !important;
margin-top: 4px;
letter-spacing: 0.01em;
}
/* Formulário de Novidades na Coluna da Direita */
.kd-footer-newsletter-block {
margin-top: 2px;
}
.kd-footer-newsletter-title {
font-family: var(--kd-font-heading, var(--kardeu-font-heading, sans-serif)) !important;
font-size: 14px;
font-weight: 700;
margin: 0 0 4px 0;
color: var(--kd-footer-heading, #ffffff);
}
.kd-footer-newsletter-desc {
font-size: 12px;
color: var(--kd-footer-text, #94a3b8);
margin: 0 0 8px 0;
line-height: 1.4;
}
.kd-newsletter-form {
display: flex;
gap: 6px;
width: 100%;
}
.kd-newsletter-input {
flex: 1;
height: 38px;
border: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.07);
color: var(--kd-footer-heading, #ffffff);
border-radius: var(--kd-radius, 6px);
padding: 0 12px;
font-size: 13px;
outline: none;
transition: border-color 0.15s ease, background 0.15s ease;
}
.kd-newsletter-input:focus {
border-color: var(--kd-primary, #059669);
background: rgba(255, 255, 255, 0.12);
}
.kd-modular-footer[data-scheme="light"] .kd-newsletter-input,
.kd-modular-footer[data-scheme="surface"] .kd-newsletter-input {
border-color: #cbd5e1;
background: #ffffff;
color: #1e293b;
}
.kd-newsletter-btn {
height: 38px !important;
background-color: var(--kd-primary, #059669) !important;
color: #ffffff !important;
border-radius: var(--kd-radius, 6px) !important;
padding: 0 14px !important;
font-weight: 600 !important;
font-size: 13px !important;
border: none !important;
cursor: pointer;
white-space: nowrap;
transition: background-color 0.15s ease, transform 0.1s ease !important;
}
.kd-newsletter-btn:hover {
filter: brightness(1.08);
}
.kd-newsletter-btn:active {
transform: scale(0.97);
}
/* Linha de Redes Sociais Ampliadas */
.kd-footer-social-row {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
margin-top: 2px;
}
.kd-social-btn {
width: 34px;
height: 34px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: var(--kd-radius, 6px);
background: rgba(255, 255, 255, 0.08);
color: var(--kd-footer-text, #94a3b8);
text-decoration: none;
transition: all 0.2s ease;
flex-shrink: 0;
}
.kd-social-btn svg {
color: currentColor;
flex-shrink: 0;
}
.kd-social-btn:hover {
background: var(--kd-primary, #059669);
color: #ffffff !important;
transform: translateY(-2px);
}
.kd-modular-footer[data-scheme="light"] .kd-social-btn,
.kd-modular-footer[data-scheme="surface"] .kd-social-btn {
background: #f1f5f9;
color: #475569;
}
.kd-modular-footer[data-scheme="light"] .kd-social-btn:hover,
.kd-modular-footer[data-scheme="surface"] .kd-social-btn:hover {
background: var(--kd-primary, #059669);
color: #ffffff;
}
/* Sub-Rodapé (Copyright em 2 Linhas e Selos) */
.kd-footer-bottom-row {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 14px;
padding-top: 14px;
padding-bottom: 0 !important;
border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.kd-footer-bottom-row.kd-bottom-align-centered {
flex-direction: column !important;
justify-content: center !important;
text-align: center !important;
gap: 16px !important;
}
.kd-footer-bottom-row.kd-bottom-align-centered .kd-footer-copyright {
align-items: center !important;
text-align: center !important;
}
.kd-footer-bottom-row.kd-bottom-align-centered .kd-footer-payment-badges {
justify-content: center !important;
}
.kd-footer-bottom-row.kd-bottom-align-space_between {
justify-content: space-between !important;
}
.kd-modular-footer[data-scheme="light"] .kd-footer-bottom-row,
.kd-modular-footer[data-scheme="surface"] .kd-footer-bottom-row {
border-top-color: #f1f5f9;
}
.kd-footer-copyright {
display: flex;
flex-direction: column;
gap: 3px;
margin: 0;
padding: 0;
flex: 1;
min-width: 280px;
}
.kd-copyright-line1 {
font-size: var(--kd-footer-copyright-size, 13px) !important;
font-weight: var(--kd-footer-copyright-weight, 600) !important;
color: var(--kd-footer-heading, #ffffff);
letter-spacing: -0.1px;
line-height: 1.4;
}
.kd-copyright-line2 {
font-size: var(--kd-footer-legal-size, 11px) !important;
font-weight: var(--kd-footer-legal-weight, 400) !important;
color: var(--kd-footer-text, #94a3b8);
opacity: 0.85;
line-height: 1.5;
}
/* ==================== Aplicação Universal de Link Hover & Link Ativo em Todo o Rodapé ==================== */
.kd-modular-footer a {
transition: color 0.15s ease !important;
}
.kd-modular-footer a:hover,
.kd-copyright-line1 a:hover,
.kd-copyright-line2 a:hover,
.kd-footer-disclaimer a:hover,
.kd-footer-address a:hover,
.kd-footer-about-text a:hover {
color: var(--kd-footer-link-hover, var(--kd-footer-hover, #38bdf8)) !important;
transform: none !important;
}
.kd-copyright-line1 a,
.kd-copyright-line2 a,
.kd-footer-disclaimer a,
.kd-footer-address a,
.kd-footer-about-text a {
color: inherit;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
.kd-copyright-line1 a.active,
.kd-copyright-line2 a.active,
.kd-footer-disclaimer a.active,
.kd-copyright-line1 a[aria-current="page"],
.kd-copyright-line2 a[aria-current="page"],
.kd-footer-disclaimer a[aria-current="page"],
.kd-copyright-line1 a:active,
.kd-copyright-line2 a:active,
.kd-footer-disclaimer a:active {
color: var(--kd-footer-link-active, #38bdf8) !important;
}
/* Crachás de Pagamento Oficiais (SVG & Badges) */
.kd-footer-payment-badges {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
}
.kd-pay-badge {
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 4px;
overflow: hidden;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
transition: transform 0.15s ease, box-shadow 0.15s ease;
vertical-align: middle;
}
.kd-pay-badge:hover {
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}
.kd-badges-size-small .kd-pay-badge svg {
height: 18px !important;
width: auto !important;
}
.kd-badges-size-medium .kd-pay-badge svg {
height: 24px !important;
width: auto !important;
}
.kd-badges-size-large .kd-pay-badge svg {
height: 32px !important;
width: auto !important;
}
.kd-badge-chip {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 10px;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.02em;
border-radius: 4px;
background: #ffffff;
border: 1px solid #cbd5e1;
color: #0f172a;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.kd-badge-mbway {
background: #e11d48;
color: #ffffff;
border-color: #e11d48;
}
.kd-badge-multibanco {
background: #0284c7;
color: #ffffff;
border-color: #0284c7;
}
.kd-badge-visa {
color: #1d4ed8;
font-style: italic;
font-weight: 900;
}
.kd-badge-mastercard {
color: #ea580c;
}
.kd-badge-paypal {
color: #0284c7;
}
.kd-badge-applepay {
background: #000000;
color: #ffffff;
border-color: #000000;
}
/* ==================== 6. Modo Checkout Sem Distrações ==================== */
body.kd-distraction-free .kd-notification-bar,
body.kd-distraction-free .kd-modular-footer .kd-footer-newsletter,
body.kd-distraction-free .kd-modular-footer .kd-footer-social-links {
display: none !important;
}
body.kd-distraction-free .kd-nav,
body.kd-distraction-free .kd-header-actions,
body.kd-distraction-free .col-full-nav,
body.kd-distraction-free .site-navigation,
body.kd-distraction-free .main-navigation,
body.kd-distraction-free #site-navigation,
body.kd-distraction-free .menu-toggle,
body.kd-distraction-free .primary-navigation,
body.kd-distraction-free .site-search,
body.kd-distraction-free .widget_product_search,
body.kd-distraction-free .header-widget-region {
display: none !important;
}
body.kd-distraction-free .kd-header-inner,
body.kd-distraction-free .main-header {
display: flex !important;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
padding-top: 16px !important;
padding-bottom: 16px !important;
}
body.kd-distraction-free .kd-footer-nav,
body.kd-distraction-free .footer-widgets,
body.kd-distraction-free .site-footer .widget-area,
body.kd-distraction-free .shoptimizer-footer-widgets {
display: none !important;
}
body.kd-distraction-free .kd-footer-bottom-row {
justify-content: center !important;
text-align: center !important;
}
/* ==================== 7. Homepage & Secções Modulares (Shopify OS 2.0 Style) ==================== */
.kd-homepage-sections {
width: 100%;
display: flex;
flex-direction: column;
gap: 0;
}
/* 7.1 Hero Section */
.kd-hero-section {
position: relative;
width: 100%;
min-height: 480px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
padding: var(--kd-section-padding-y, 64px) 24px;
background: linear-gradient(135deg, #0b1320 0%, #172554 50%, #0f172a 100%);
background-size: cover;
background-position: center;
color: #ffffff;
overflow: hidden;
box-sizing: border-box;
}
.kd-hero-section.has-bg-image .kd-hero-overlay {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(11, 19, 32, 0.75) 0%, rgba(15, 23, 42, 0.88) 100%);
z-index: 1;
}
.kd-hero-container {
position: relative;
z-index: 2;
max-width: 860px;
margin: 0 auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
}
.kd-hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 16px;
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 9999px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.5px;
color: #f8fafc;
text-transform: uppercase;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.kd-hero-badge-dot {
width: 8px;
height: 8px;
background: var(--kd-primary, #10b981);
border-radius: 50%;
box-shadow: 0 0 8px var(--kd-primary, #10b981);
}
.kd-hero-title {
font-family: var(--kd-font-heading, inherit);
font-size: clamp(32px, 5vw, 56px);
font-weight: 800;
line-height: 1.15;
letter-spacing: -0.03em;
color: #ffffff;
margin: 0;
text-wrap: balance;
}
.kd-hero-subtitle {
font-family: var(--kd-font-body, inherit);
font-size: clamp(16px, 2vw, 20px);
font-weight: 400;
line-height: 1.6;
color: #cbd5e1;
max-width: 680px;
margin: 0;
}
.kd-hero-actions {
display: flex;
align-items: center;
gap: 14px;
margin-top: 10px;
flex-wrap: wrap;
justify-content: center;
}
.kd-hero-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 28px;
font-size: 15px;
font-weight: 700;
border-radius: var(--kd-radius-btn, 8px);
text-decoration: none;
transition: all 0.2s ease;
cursor: pointer;
}
.kd-hero-btn-primary {
background: var(--kd-primary, #059669);
color: #ffffff;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.kd-hero-btn-primary:hover {
background: var(--kd-primary-hover, #047857);
color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.kd-hero-btn-secondary {
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.25);
}
.kd-hero-btn-secondary:hover {
background: rgba(255, 255, 255, 0.22);
color: #ffffff;
transform: translateY(-2px);
}
.kd-hero-social-proof {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 12px;
font-size: 13px;
color: #94a3b8;
}
.kd-social-proof-stars {
color: #fbbf24;
font-size: 15px;
letter-spacing: 2px;
}
/* 7.2 Features Section (Multicolumn) */
.kd-features-section {
padding: var(--kd-section-padding-y, 64px) 0;
background: #ffffff;
border-bottom: 1px solid #e2e8f0;
}
.kd-features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: var(--kd-grid-gap, 24px);
}
.kd-feature-card {
display: flex;
align-items: center;
gap: 16px;
padding: 16px 20px;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: var(--kd-card-radius, var(--kd-radius-card, 0px));
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.kd-feature-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.kd-feature-icon {
width: 44px;
height: 44px;
border-radius: 10px;
background: rgba(5, 150, 105, 0.1);
color: var(--kd-primary, #059669);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.kd-feature-info {
flex: 1;
}
.kd-feature-title {
font-family: var(--kd-font-heading, inherit);
font-size: 15px;
font-weight: 700;
color: #0f172a;
margin: 0 0 4px;
}
.kd-feature-desc {
font-family: var(--kd-font-body, inherit);
font-size: 13px;
color: #64748b;
margin: 0;
line-height: 1.4;
}
/* 7.3 Content Section (Brand Story) */
.kd-content-section {
padding: var(--kd-section-padding-y, 64px) 0;
background: #f8fafc;
}
.kd-brand-story-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: center;
}
@media (max-width: 860px) {
.kd-brand-story-grid {
grid-template-columns: 1fr;
gap: 32px;
}
}
.kd-brand-story-text {
display: flex;
flex-direction: column;
gap: 16px;
}
.kd-section-badge {
display: inline-block;
align-self: flex-start;
padding: 4px 12px;
background: rgba(5, 150, 105, 0.1);
color: var(--kd-primary, #059669);
border-radius: 9999px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.kd-brand-story-title {
font-family: var(--kd-font-heading, inherit);
font-size: clamp(24px, 3.5vw, 36px);
font-weight: 800;
line-height: 1.25;
letter-spacing: -0.02em;
color: #0f172a;
margin: 0;
}
.kd-brand-story-desc {
font-family: var(--kd-font-body, inherit);
font-size: 16px;
line-height: 1.7;
color: #475569;
}
.kd-brand-story-desc p {
margin: 0 0 12px;
}
.kd-brand-story-action {
margin-top: 8px;
}
.kd-btn-outline {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 12px 24px;
border: 2px solid var(--kd-primary, #059669);
color: var(--kd-primary, #059669);
font-weight: 700;
font-size: 15px;
border-radius: var(--kd-radius-btn, 8px);
text-decoration: none;
transition: all 0.2s ease;
}
.kd-btn-outline:hover {
background: var(--kd-primary, #059669);
color: #ffffff;
transform: translateY(-2px);
}
.kd-brand-story-media {
border-radius: var(--kd-card-radius, var(--kd-radius-card, 0px));
overflow: hidden;
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
}
.kd-brand-story-img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
aspect-ratio: 4/3;
}
.kd-brand-story-placeholder {
width: 100%;
aspect-ratio: 4/3;
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
color: #ffffff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
font-weight: 700;
font-size: 18px;
}
/* 7.4 CTA Section */
.kd-cta-section {
padding: var(--kd-section-padding-y, 64px) 0;
background: #ffffff;
}
.kd-cta-card {
background: linear-gradient(135deg, var(--kd-secondary, #0b1320) 0%, #1e293b 100%);
border-radius: var(--kd-card-radius, var(--kd-radius-card, 0px));
padding: 44px 36px;
color: #ffffff;
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
flex-wrap: wrap;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
.kd-cta-content {
max-width: 580px;
display: flex;
flex-direction: column;
gap: 10px;
}
.kd-cta-badge {
align-self: flex-start;
padding: 4px 12px;
background: rgba(255, 255, 255, 0.15);
border-radius: 9999px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #cbd5e1;
}
.kd-cta-title {
font-family: var(--kd-font-heading, inherit);
font-size: clamp(22px, 3vw, 32px);
font-weight: 800;
line-height: 1.25;
margin: 0;
color: #ffffff;
}
.kd-cta-desc {
font-family: var(--kd-font-body, inherit);
font-size: 15px;
color: #94a3b8;
margin: 0;
line-height: 1.5;
}
.kd-cta-actions {
display: flex;
align-items: center;
gap: 16px;
flex-wrap: wrap;
}
.kd-coupon-box {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
background: rgba(255, 255, 255, 0.08);
border: 1px dashed rgba(255, 255, 255, 0.35);
border-radius: var(--kd-radius-btn, 8px);
cursor: pointer;
position: relative;
user-select: none;
transition: all 0.2s ease;
}
.kd-coupon-box:hover {
background: rgba(255, 255, 255, 0.15);
border-color: #ffffff;
}
.kd-coupon-label {
font-size: 12px;
color: #94a3b8;
}
.kd-coupon-code {
font-size: 15px;
font-weight: 800;
font-family: monospace;
letter-spacing: 1px;
color: #38bdf8;
}
.kd-coupon-tooltip {
font-size: 11px;
background: rgba(255, 255, 255, 0.2);
padding: 2px 6px;
border-radius: 4px;
color: #ffffff;
font-weight: 600;
}
.kd-cta-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 14px 28px;
background: var(--kd-primary, #059669);
color: #ffffff;
font-weight: 700;
font-size: 15px;
border-radius: var(--kd-radius-btn, 8px);
text-decoration: none;
transition: all 0.2s ease;
}
.kd-cta-btn:hover {
background: var(--kd-primary-hover, #047857);
color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
/* 7.5 FAQ Section (Perguntas Frequentes) */
.kd-faq-section {
padding: var(--kd-section-padding-y, 64px) 0;
background: #ffffff;
}
.kd-faq-header {
text-align: center;
max-width: 640px;
margin: 0 auto 40px;
}
.kd-faq-badge {
display: inline-block;
padding: 4px 12px;
background: rgba(5, 150, 105, 0.1);
color: var(--kd-primary, #059669);
border-radius: 9999px;
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 12px;
}
.kd-faq-title {
font-family: var(--kd-font-heading, inherit);
font-size: clamp(24px, 3.5vw, 36px);
font-weight: 800;
line-height: 1.25;
color: #0f172a;
margin: 0 0 12px;
}
.kd-faq-subtitle {
font-family: var(--kd-font-body, inherit);
font-size: 16px;
color: #64748b;
margin: 0;
line-height: 1.6;
}
.kd-faq-list {
max-width: 780px;
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 14px;
}
.kd-faq-item {
border: 1px solid #e2e8f0;
border-radius: var(--kd-card-radius, var(--kd-radius-card, 0px));
background: #ffffff;
overflow: hidden;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.kd-faq-item[open] {
border-color: var(--kd-primary, #059669);
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}
.kd-faq-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 18px 24px;
font-family: var(--kd-font-heading, inherit);
font-size: 16px;
font-weight: 700;
color: #0f172a;
cursor: pointer;
list-style: none;
user-select: none;
transition: color 0.15s ease;
}
.kd-faq-summary::-webkit-details-marker {
display: none;
}
.kd-faq-summary:hover {
color: var(--kd-primary, #059669);
}
.kd-faq-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
color: #94a3b8;
transition: transform 0.25s ease, color 0.2s ease;
}
.kd-faq-item[open] .kd-faq-icon {
transform: rotate(180deg);
color: var(--kd-primary, #059669);
}
.kd-faq-answer {
padding: 0 24px 20px;
font-family: var(--kd-font-body, inherit);
font-size: 15px;
line-height: 1.65;
color: #475569;
animation: kdFaqFadeIn 0.2s ease-in;
}
@keyframes kdFaqFadeIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
/* ==========================================================================
Shopify OS 2.0 (Dawn) - Esquemas de Cores das Secções (Color Schemes)
========================================================================== */
.kd-section.kd-scheme-accent {
background-color: var(--kd-primary, #059669) !important;
color: #ffffff !important;
}
.kd-section.kd-scheme-accent .kd-hero-title,
.kd-section.kd-scheme-accent .kd-feature-title,
.kd-section.kd-scheme-accent .kd-brand-story-title,
.kd-section.kd-scheme-accent .kd-cta-title,
.kd-section.kd-scheme-accent .kd-faq-title,
.kd-section.kd-scheme-accent .kd-faq-summary {
color: #ffffff !important;
}
.kd-section.kd-scheme-accent .kd-hero-subtitle,
.kd-section.kd-scheme-accent .kd-feature-desc,
.kd-section.kd-scheme-accent .kd-brand-story-desc,
.kd-section.kd-scheme-accent .kd-cta-desc,
.kd-section.kd-scheme-accent .kd-faq-subtitle,
.kd-section.kd-scheme-accent .kd-faq-answer {
color: rgba(255, 255, 255, 0.9) !important;
}
.kd-section.kd-scheme-accent .kd-feature-card,
.kd-section.kd-scheme-accent .kd-faq-item {
background: rgba(255, 255, 255, 0.12) !important;
border-color: rgba(255, 255, 255, 0.22) !important;
}
.kd-section.kd-scheme-accent .kd-feature-icon {
background: rgba(255, 255, 255, 0.2) !important;
color: #ffffff !important;
}
.kd-section.kd-scheme-accent .kd-btn-outline {
border-color: #ffffff !important;
color: #ffffff !important;
}
.kd-section.kd-scheme-accent .kd-btn-outline:hover {
background: #ffffff !important;
color: var(--kd-primary, #059669) !important;
}
/* Esquema Secundário / Escuro */
.kd-section.kd-scheme-secondary {
background-color: #0f172a !important;
color: #f8fafc !important;
}
.kd-section.kd-scheme-secondary .kd-hero-title,
.kd-section.kd-scheme-secondary .kd-feature-title,
.kd-section.kd-scheme-secondary .kd-brand-story-title,
.kd-section.kd-scheme-secondary .kd-cta-title,
.kd-section.kd-scheme-secondary .kd-faq-title,
.kd-section.kd-scheme-secondary .kd-faq-summary {
color: #ffffff !important;
}
.kd-section.kd-scheme-secondary .kd-hero-subtitle,
.kd-section.kd-scheme-secondary .kd-feature-desc,
.kd-section.kd-scheme-secondary .kd-brand-story-desc,
.kd-section.kd-scheme-secondary .kd-cta-desc,
.kd-section.kd-scheme-secondary .kd-faq-subtitle,
.kd-section.kd-scheme-secondary .kd-faq-answer {
color: #94a3b8 !important;
}
.kd-section.kd-scheme-secondary .kd-feature-card,
.kd-section.kd-scheme-secondary .kd-faq-item {
background: #1e293b !important;
border-color: #334155 !important;
}
.kd-section.kd-scheme-secondary .kd-feature-icon {
background: #334155 !important;
color: var(--kd-primary, #059669) !important;
}
/* Esquema Suave / Muted */
.kd-section.kd-scheme-muted {
background-color: #f8fafc !important;
color: #1e293b !important;
}
.kd-section.kd-scheme-muted .kd-feature-card,
.kd-section.kd-scheme-muted .kd-faq-item {
background: #ffffff !important;
border-color: #e2e8f0 !important;
}
/* Esquema Branco Puro */
.kd-section.kd-scheme-light {
background-color: #ffffff !important;
color: #0f172a !important;
}
/* ==========================================================================
Shopify OS 2.0 (Dawn) - Alinhamentos de Conteúdo
========================================================================== */
.kd-section.is-align-left {
text-align: left;
}
.kd-section.is-align-left .kd-hero-container,
.kd-section.is-align-left .kd-faq-header {
align-items: flex-start;
text-align: left;
}
.kd-section.is-align-left .kd-hero-actions {
justify-content: flex-start;
}
.kd-section.is-align-center {
text-align: center;
}
.kd-section.is-align-center .kd-hero-container,
.kd-section.is-align-center .kd-faq-header {
align-items: center;
text-align: center;
}
.kd-section.is-align-center .kd-hero-actions {
justify-content: center;
}
.kd-section.is-align-right {
text-align: right;
}
.kd-section.is-align-right .kd-hero-container,
.kd-section.is-align-right .kd-faq-header {
align-items: flex-end;
text-align: right;
}
.kd-section.is-align-right .kd-hero-actions {
justify-content: flex-end;
}
/* ==========================================================================
Kardeu Theme Studio - Inspetor Visual no Modo de Pré-visualização
========================================================================== */
.is-kardeu-preview-mode [data-kd-section-id] {
position: relative;
outline: 2px dashed transparent;
transition: outline-color 0.15s ease, box-shadow 0.15s ease;
}
.is-kardeu-preview-mode [data-kd-section-id].is-inspector-hovered {
outline: 2px dashed #0066cc !important;
cursor: pointer;
}
.is-kardeu-preview-mode [data-kd-section-id].is-inspector-selected {
outline: 3px solid #0066cc !important;
box-shadow: 0 0 0 4px rgba(0, 102, 204, 0.25) !important;
}
/* No modo de pré-visualização do Studio, o cabeçalho permanece sempre visível e fixo */
.is-kardeu-preview-mode .site-header,
.is-kardeu-preview-mode .kardeu-site-header {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
transform: none !important;
position: relative !important;
}
/* ==========================================================================
Shopify OS 2.0 (Dawn) - Tipografia & Escala de Títulos (Heading Scales)
========================================================================== */
.kd-heading-small .kd-hero-title { font-size: clamp(26px, 3.5vw, 36px) !important; }
.kd-heading-small .kd-brand-story-title,
.kd-heading-small .kd-cta-title,
.kd-heading-small .kd-faq-title,
.kd-heading-small .kd-rich-text-title,
.kd-heading-small .kd-newsletter-title { font-size: clamp(20px, 2.8vw, 26px) !important; }
.kd-heading-medium .kd-hero-title { font-size: clamp(34px, 5.5vw, 54px) !important; }
.kd-heading-medium .kd-brand-story-title,
.kd-heading-medium .kd-cta-title,
.kd-heading-medium .kd-faq-title,
.kd-heading-medium .kd-rich-text-title,
.kd-heading-medium .kd-newsletter-title { font-size: clamp(24px, 3.8vw, 36px) !important; }
.kd-heading-large .kd-hero-title { font-size: clamp(42px, 6.8vw, 68px) !important; }
.kd-heading-large .kd-brand-story-title,
.kd-heading-large .kd-cta-title,
.kd-heading-large .kd-faq-title,
.kd-heading-large .kd-rich-text-title,
.kd-heading-large .kd-newsletter-title { font-size: clamp(28px, 4.8vw, 44px) !important; }
.kd-heading-xl .kd-hero-title { font-size: clamp(48px, 8vw, 84px) !important; line-height: 1.05 !important; }
.kd-heading-xl .kd-brand-story-title,
.kd-heading-xl .kd-cta-title,
.kd-heading-xl .kd-faq-title,
.kd-heading-xl .kd-rich-text-title,
.kd-heading-xl .kd-newsletter-title { font-size: clamp(32px, 5.5vw, 52px) !important; }
/* Famílias de Tipografia */
.kd-font-serif,
.kd-font-serif h1, .kd-font-serif h2, .kd-font-serif h3, .kd-font-serif h4,
.kd-font-serif .kd-hero-title, .kd-font-serif .kd-brand-story-title, .kd-font-serif .kd-cta-title, .kd-font-serif .kd-faq-title, .kd-font-serif .kd-rich-text-title {
font-family: 'Playfair Display', Georgia, Cambria, serif !important;
}
.kd-font-sans,
.kd-font-sans h1, .kd-font-sans h2, .kd-font-sans h3, .kd-font-sans h4,
.kd-font-sans .kd-hero-title, .kd-font-sans .kd-brand-story-title, .kd-font-sans .kd-cta-title, .kd-font-sans .kd-faq-title, .kd-font-sans .kd-rich-text-title {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}
/* ==========================================================================
Cores Livres Personalizadas (Free Color Pickers)
========================================================================== */
.kd-section.has-custom-colors .kd-hero-title,
.kd-section.has-custom-colors .kd-feature-title,
.kd-section.has-custom-colors .kd-brand-story-title,
.kd-section.has-custom-colors .kd-cta-title,
.kd-section.has-custom-colors .kd-faq-title,
.kd-section.has-custom-colors .kd-faq-summary,
.kd-section.has-custom-colors .kd-rich-text-title,
.kd-section.has-custom-colors .kd-newsletter-title {
color: var(--kd-section-text, inherit) !important;
}
.kd-section.has-custom-colors .kd-hero-btn-primary,
.kd-section.has-custom-colors .kd-cta-btn,
.kd-section.has-custom-colors .kd-newsletter-submit {
background-color: var(--kd-section-btn, var(--kd-primary)) !important;
color: var(--kd-section-btn-text, #ffffff) !important;
border-color: var(--kd-section-btn, var(--kd-primary)) !important;
}
/* ==========================================================================
Secções Expandidas: Texto Rico, HTML Personalizado e Newsletter
========================================================================== */
/* Texto Rico / Citação / Manifesto */
.kd-rich-text-section .kd-rich-text-container {
max-width: 820px;
margin: 0 auto;
}
.kd-rich-text-title {
margin: 0 0 20px;
font-weight: 700;
color: #0f172a;
line-height: 1.25;
}
.kd-rich-text-body {
font-size: 17px;
line-height: 1.75;
color: #475569;
}
.kd-rich-text-action {
margin-top: 28px;
}
/* HTML / Liquid Personalizado */
.kd-html-section .kd-html-container {
max-width: 100%;
}
/* Subscrição de Novidades (Newsletter) */
.kd-newsletter-section .kd-newsletter-box {
max-width: 680px;
margin: 0 auto;
text-align: inherit;
}
.kd-newsletter-title {
margin: 0 0 12px;
font-weight: 700;
color: #0f172a;
}
.kd-newsletter-desc {
font-size: 15px;
color: #64748b;
margin: 0 0 24px;
line-height: 1.6;
}
.kd-newsletter-form {
display: flex;
gap: 10px;
max-width: 520px;
margin: 0 auto 12px;
}
.kd-newsletter-input {
flex: 1;
padding: 12px 16px;
border-radius: var(--kd-radius, 8px);
border: 1px solid #cbd5e1;
background: #ffffff;
font-size: 14px;
outline: none;
color: #1e293b;
}
.kd-newsletter-input:focus {
border-color: var(--kd-primary, #059669);
box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.2);
}
.kd-newsletter-submit {
padding: 12px 24px;
background: var(--kd-section-btn, var(--kd-primary, #059669));
color: var(--kd-section-btn-text, #ffffff);
border: none;
border-radius: var(--kd-radius, 8px);
font-weight: 600;
font-size: 14px;
cursor: pointer;
transition: filter 0.15s ease;
}
.kd-newsletter-submit:hover {
filter: brightness(0.92);
}
.kd-newsletter-disclaimer {
font-size: 12px;
color: #94a3b8;
margin: 0;
}
/* ==========================================================================
Grelha Multicolunas (Shopify Dawn Multicolumn)
========================================================================== */
.kd-multicolumn-section {
width: 100%;
box-sizing: border-box;
position: relative;
}
.kd-multicolumn-header {
text-align: center;
margin-bottom: 36px;
}
.kd-multicolumn-title {
font-size: 1.85rem;
font-weight: 700;
color: var(--kd-heading-color, #0f172a);
margin: 0 0 10px 0;
line-height: 1.25;
}
.kd-multicolumn-subtitle {
font-size: 1rem;
color: var(--kd-text-muted, #64748b);
max-width: 640px;
margin: 0 auto;
line-height: 1.6;
}
.kd-multicolumn-grid {
display: grid;
gap: 28px;
width: 100%;
box-sizing: border-box;
}
.kd-multicolumn-grid.kd-cols-2 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.kd-multicolumn-grid.kd-cols-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.kd-multicolumn-grid.kd-cols-4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.kd-multicolumn-card {
display: flex;
flex-direction: column;
height: 100%;
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: var(--kd-card-radius, var(--kd-radius-card, 0px));
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
box-sizing: border-box;
}
.kd-multicolumn-card:hover {
transform: translateY(-3px);
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.08), 0 8px 10px -6px rgba(0, 0, 0, 0.04);
border-color: #cbd5e1;
}
.kd-multicolumn-media {
width: 100%;
aspect-ratio: 4 / 3;
overflow: hidden;
background: #f8fafc;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.kd-multicolumn-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.35s ease;
}
.kd-multicolumn-card:hover .kd-multicolumn-img {
transform: scale(1.03);
}
.kd-multicolumn-media-placeholder {
color: #94a3b8;
background: #f1f5f9;
}
.kd-multicolumn-content {
padding: 22px 20px 24px 20px;
display: flex;
flex-direction: column;
flex-grow: 1;
text-align: left;
}
.kd-multicolumn-card-title {
font-size: 1.15rem;
font-weight: 700;
color: var(--kd-heading-color, #0f172a);
margin: 0 0 10px 0;
line-height: 1.35;
}
.kd-multicolumn-card-text {
font-size: 0.925rem;
color: var(--kd-text-color, #475569);
line-height: 1.6;
margin-bottom: 18px;
flex-grow: 1;
}
.kd-multicolumn-card-action {
margin-top: auto;
}
.kd-multicolumn-card-btn {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 0.875rem;
font-weight: 600;
color: var(--kd-color-primary, #0066cc);
text-decoration: none;
transition: color 0.15s ease, gap 0.15s ease;
}
.kd-multicolumn-card-btn:hover {
color: var(--kd-color-primary-hover, #004c99);
gap: 9px;
}
/* Responsividade Multicolunas */
@media (max-width: 1024px) and (min-width: 641px) {
.kd-multicolumn-grid.kd-cols-3,
.kd-multicolumn-grid.kd-cols-4 {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 22px;
}
}
@media (max-width: 640px) {
.kd-multicolumn-grid,
.kd-multicolumn-grid.kd-cols-2,
.kd-multicolumn-grid.kd-cols-3,
.kd-multicolumn-grid.kd-cols-4 {
grid-template-columns: 1fr;
gap: 18px;
}
.kd-multicolumn-header {
margin-bottom: 24px;
}
.kd-multicolumn-title {
font-size: 1.5rem;
}
}
/* ==========================================================================
Grelha de Layout em Colunas Heterogéneas (Shopify Columns / Layout Grid)
========================================================================== */
.kd-layout-grid-section {
position: relative;
width: 100%;
box-sizing: border-box;
}
.kd-layout-grid {
display: grid;
width: 100%;
box-sizing: border-box;
column-gap: var(--kd-col-gap, 24px);
row-gap: var(--kd-row-gap, 24px);
align-items: start;
}
/* 6 Layout Presets */
.kd-grid-100 {
grid-template-columns: 100%;
}
.kd-grid-50-50 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.kd-grid-33-33-33 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.kd-grid-25-25-25-25 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.kd-grid-66-33 {
grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
}
.kd-grid-33-66 {
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}
/* Colunas e Conteúdos */
.kd-grid-col {
display: flex;
flex-direction: column;
width: 100%;
min-width: 0;
box-sizing: border-box;
}
.kd-grid-col-html {
width: 100%;
}
.kd-grid-col-image {
width: 100%;
}
.kd-grid-col-image-wrap {
overflow: hidden;
border-radius: var(--kd-card-radius, var(--kd-radius-card, 0px));
width: 100% !important;
max-width: 100%;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.kd-grid-col-image-wrap:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.kd-grid-col-image-wrap img {
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
.kd-grid-col-html-body {
width: 100%;
}
.kd-grid-col-html-body img {
max-width: 100%;
height: auto;
}
.is-kardeu-preview-mode .kd-grid-col-image-wrap img:hover {
outline: 2px dashed #059669 !important;
outline-offset: 3px !important;
}
/* Responsividade da Grelha de Layout */
@media (max-width: 1024px) and (min-width: 641px) {
.kd-grid-25-25-25-25 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.kd-grid-33-33-33 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.kd-grid-66-33,
.kd-grid-33-66 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.kd-layout-grid,
.kd-grid-100,
.kd-grid-50-50,
.kd-grid-33-33-33,
.kd-grid-25-25-25-25,
.kd-grid-66-33,
.kd-grid-33-66 {
grid-template-columns: 100% !important;
column-gap: 0 !important;
row-gap: var(--kd-row-gap, 24px) !important;
}
}
/* Indicador visual de texto editável no Canvas em direto */
.is-kardeu-preview-mode .kd-inline-editable {
outline: 1px dashed transparent;
transition: outline-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
cursor: text !important;
border-radius: 4px;
}
.is-kardeu-preview-mode .kd-inline-editable:hover {
outline: 1px dashed rgba(0, 102, 204, 0.65) !important;
background-color: rgba(0, 102, 204, 0.05) !important;
}
.is-kardeu-preview-mode .kd-inline-editable:focus {
outline: 2px solid #0066cc !important;
background-color: rgba(0, 102, 204, 0.08) !important;
box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.15) !important;
}
/* Barra Flutuante de Formatação Inline (Tamanho, Peso, Cor) */
.is-kardeu-preview-mode .kd-inline-toolbar {
position: absolute;
z-index: 999999;
display: none;
align-items: center;
gap: 4px;
padding: 5px 8px;
background: #0f172a;
color: #f8fafc;
border-radius: 10px;
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.35), 0 2px 6px rgba(0, 0, 0, 0.15);
border: 1px solid rgba(255, 255, 255, 0.14);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 12px;
user-select: none;
opacity: 0;
transform: translateY(6px);
transition: opacity 0.15s ease, transform 0.15s ease;
max-width: calc(100vw - 20px);
box-sizing: border-box;
}
.is-kardeu-preview-mode .kd-inline-toolbar.is-visible {
display: flex;
opacity: 1;
transform: translateY(0);
}
.is-kardeu-preview-mode .kd-tb-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
height: 28px;
padding: 0 6px;
border-radius: 6px;
background: transparent;
border: none;
color: #f1f5f9;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.is-kardeu-preview-mode .kd-tb-btn:hover {
background: rgba(255, 255, 255, 0.15);
color: #ffffff;
}
.is-kardeu-preview-mode .kd-tb-btn.is-active {
background: #059669;
color: #ffffff;
}
.is-kardeu-preview-mode .kd-tb-divider {
width: 1px;
height: 18px;
background: rgba(255, 255, 255, 0.15);
margin: 0 4px;
}
/* Dropdown Customizado de Tamanho de Letra */
.is-kardeu-preview-mode .kd-tb-dropdown-wrap {
position: relative;
display: inline-flex;
align-items: center;
}
.is-kardeu-preview-mode .kd-tb-dropdown-trigger {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 0 8px;
height: 28px;
background: rgba(255, 255, 255, 0.1);
color: #ffffff;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 6px;
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.is-kardeu-preview-mode .kd-tb-dropdown-trigger:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.35);
}
.is-kardeu-preview-mode .kd-tb-dropdown-menu {
position: absolute;
top: calc(100% + 6px);
left: 50%;
transform: translateX(-50%);
display: none;
flex-direction: column;
min-width: 175px;
max-height: 250px;
overflow-y: auto;
background: #0f172a;
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 8px;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
padding: 4px;
z-index: 1000000;
}
.is-kardeu-preview-mode .kd-tb-dropdown-menu.is-open {
display: flex;
}
.is-kardeu-preview-mode .kd-tb-menu-item {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 6px 10px;
border: none;
background: transparent;
color: #f1f5f9;
font-size: 12px;
font-weight: 600;
text-align: left;
border-radius: 5px;
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.is-kardeu-preview-mode .kd-tb-menu-item:hover {
background: #059669;
color: #ffffff;
}
.is-kardeu-preview-mode .kd-tb-menu-desc {
font-size: 10px;
font-weight: 400;
color: #94a3b8;
margin-left: 8px;
}
.is-kardeu-preview-mode .kd-tb-menu-item:hover .kd-tb-menu-desc {
color: #e2e8f0;
}
.is-kardeu-preview-mode .kd-tb-btn svg {
display: inline-block;
vertical-align: middle;
}
/* Alternador de Alvo de Cor: Texto vs Fundo */
.is-kardeu-preview-mode .kd-tb-color-mode-toggle {
display: inline-flex;
align-items: center;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 7px;
padding: 2px;
gap: 2px;
}
.is-kardeu-preview-mode .kd-tb-mode-btn {
position: relative;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 26px;
height: 26px;
border-radius: 5px;
background: transparent;
border: none;
color: #94a3b8;
cursor: pointer;
padding: 2px 0 3px;
transition: all 0.15s ease;
}
.is-kardeu-preview-mode .kd-tb-mode-btn:hover {
color: #ffffff;
background: rgba(255, 255, 255, 0.12);
}
.is-kardeu-preview-mode .kd-tb-mode-btn.is-active {
background: rgba(255, 255, 255, 0.22);
color: #ffffff;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}
.is-kardeu-preview-mode .kd-tb-mode-a {
font-size: 13px;
font-weight: 700;
line-height: 1;
}
.is-kardeu-preview-mode .kd-tb-mode-bar {
display: block;
width: 14px;
height: 3px;
border-radius: 1.5px;
margin-top: 2px;
background: currentColor;
transition: background-color 0.15s ease, border 0.15s ease;
}
.is-kardeu-preview-mode .kd-tb-color-wrap {
display: inline-flex;
align-items: center;
gap: 4px;
margin-left: 2px;
}
.is-kardeu-preview-mode .kd-tb-color-dot {
width: 18px;
height: 18px;
border-radius: 50%;
border: 1.5px solid rgba(255, 255, 255, 0.3);
cursor: pointer;
padding: 0;
transition: transform 0.15s ease, border-color 0.15s ease;
}
.is-kardeu-preview-mode .kd-tb-color-dot:hover {
transform: scale(1.2);
border-color: #ffffff;
}
.is-kardeu-preview-mode .kd-tb-color-dot.kd-tb-color-transparent {
background: rgba(255, 255, 255, 0.08);
display: inline-flex;
align-items: center;
justify-content: center;
}
.is-kardeu-preview-mode .kd-tb-color-dot.kd-tb-color-transparent svg {
display: block;
}
.is-kardeu-preview-mode .kd-tb-custom-color {
position: relative;
width: 24px;
height: 24px;
border-radius: 6px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
background: rgba(255, 255, 255, 0.1);
color: #f1f5f9;
}
.is-kardeu-preview-mode .kd-tb-custom-color input[type="color"] {
position: absolute;
opacity: 0;
width: 100%;
height: 100%;
cursor: pointer;
top: 0;
left: 0;
}
.is-kardeu-preview-mode .kd-tb-btn-close {
transition: color 0.15s ease, background-color 0.15s ease;
}
.is-kardeu-preview-mode .kd-tb-btn-close:hover {
color: #ef4444 !important;
background: rgba(239, 68, 68, 0.2) !important;
}
/* Compatibilidade Universal com Tailblocks, Flowbite e Blocos Tailwind CSS */
.kd-html-fullwidth {
width: 100%;
max-width: 100%;
padding: 0;
margin: 0;
}
.kd-html-section-body {
width: 100%;
}
.kd-html-section-body > section {
width: 100%;
margin: 0;
}
/* Garante herança tipográfica fluida para classes exclusivas do Tailblocks */
.kd-html-section-body .body-font {
font-family: inherit;
}
.kd-html-section-body .title-font {
font-family: inherit;
}
/* Previne que imagens de hero ou cards do Tailblocks fiquem cortadas ou desproporcionadas */
.kd-html-section-body img {
max-width: 100%;
height: auto;
}
/* Previne que SVGs inline do Tailblocks fiquem desproporcionados */
.kd-html-section-body svg {
max-width: 100%;
box-sizing: content-box;
}
/* Badge Flutuante de Substituição de Imagem no Canvas */
.is-kardeu-preview-mode .kd-image-hover-badge {
position: absolute;
z-index: 999998;
display: none;
align-items: center;
gap: 6px;
padding: 6px 12px;
background: #0f172a;
color: #ffffff;
border-radius: 20px;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 11px;
font-weight: 600;
box-shadow: 0 8px 24px rgba(15, 23, 42, 0.4), 0 2px 6px rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.2);
cursor: pointer;
user-select: none;
transition: transform 0.15s ease, background-color 0.15s ease;
}
.is-kardeu-preview-mode .kd-image-hover-badge:hover {
background: #059669;
transform: scale(1.05);
}
/* ==================== Barra Flutuante de Redimensionamento Visual de Imagem ==================== */
.is-kardeu-preview-mode .kd-image-resize-toolbar {
position: absolute;
z-index: 999999;
display: none;
align-items: center;
gap: 4px;
padding: 5px 8px;
background: #0f172a;
color: #f8fafc;
border-radius: 10px;
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.35), 0 2px 6px rgba(0, 0, 0, 0.15);
border: 1px solid rgba(255, 255, 255, 0.14);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 11px;
user-select: none;
opacity: 0;
transform: translateY(6px);
transition: opacity 0.15s ease, transform 0.15s ease;
}
.is-kardeu-preview-mode .kd-image-resize-toolbar.is-visible {
display: flex;
opacity: 1;
transform: translateY(0);
}
.is-kardeu-preview-mode .kd-img-tb-btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 26px;
min-width: 26px;
padding: 0 6px;
border: none;
background: rgba(255, 255, 255, 0.08);
color: #f1f5f9;
border-radius: 6px;
cursor: pointer;
font-size: 11px;
font-weight: 600;
line-height: 1;
transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.is-kardeu-preview-mode .kd-img-tb-btn:hover {
background: #059669;
color: #ffffff;
}
.is-kardeu-preview-mode .kd-img-tb-btn:active {
transform: scale(0.95);
}
.is-kardeu-preview-mode .kd-img-tb-btn.is-active {
background: #059669;
color: #ffffff;
box-shadow: 0 0 0 2px rgba(5, 150, 105, 0.4);
}
.is-kardeu-preview-mode .kd-img-tb-badge {
padding: 0 8px;
height: 26px;
display: inline-flex;
align-items: center;
font-size: 11px;
font-weight: 700;
color: #38bdf8;
background: rgba(56, 189, 248, 0.1);
border-radius: 6px;
letter-spacing: 0.02em;
}
.is-kardeu-preview-mode .kd-img-tb-divider {
width: 1px;
height: 18px;
background: rgba(255, 255, 255, 0.15);
margin: 0 2px;
}
/* Puxador de Canto para Redimensionamento por Arraste (Corner Drag Handle) */
.is-kardeu-preview-mode .kd-image-resize-handle {
position: absolute;
width: 22px;
height: 22px;
background: #059669;
border: 2px solid #ffffff;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
cursor: se-resize;
z-index: 999998;
display: none;
align-items: center;
justify-content: center;
transition: transform 0.15s ease, background-color 0.15s ease;
}
.is-kardeu-preview-mode .kd-image-resize-handle.is-visible {
display: flex;
}
.is-kardeu-preview-mode .kd-image-resize-handle:hover,
.is-kardeu-preview-mode .kd-image-resize-handle.is-dragging {
background: #047857;
transform: scale(1.25);
}
.is-kardeu-preview-mode .kd-image-resize-handle svg {
stroke: #ffffff;
stroke-width: 2.5;
}
/* Indicador de Arraste Ativo na Imagem */
.is-kardeu-preview-mode .is-image-resizing {
outline: 2px solid #059669 !important;
outline-offset: 2px !important;
user-select: none !important;
}
.is-kardeu-preview-mode .kd-grid-col-image-wrap {
position: relative;
}
.is-kardeu-preview-mode .kd-grid-col-image-wrap:hover {
outline: 2px dashed #059669 !important;
outline-offset: 2px !important;
}
.is-kardeu-preview-mode .kd-html-section-body img {
transition: outline 0.15s ease, opacity 0.2s ease;
}
.is-kardeu-preview-mode .kd-html-section-body img:hover {
outline: 2px dashed #059669 !important;
outline-offset: 3px !important;
}
/* ==========================================================================
Puxadores Visuais de Redimensionamento no Próprio Visor (Edge & Corner)
========================================================================== */
.is-kardeu-preview-mode .kd-grid-col {
position: relative !important;
}
.is-kardeu-preview-mode .kd-layout-grid-section .kd-grid-col {
transition: outline 0.15s ease;
}
.is-kardeu-preview-mode .kd-layout-grid-section .kd-grid-col:hover {
outline: 2px dashed rgba(0, 102, 204, 0.45) !important;
outline-offset: 3px !important;
border-radius: 8px;
}
/* 1. Divisor Canónico e Puxador de Redimensionamento de Coluna (Theme Studio Canvas) */
.is-kardeu-preview-mode .kd-col-resizer-edge {
position: absolute;
top: 0;
bottom: 0;
right: calc((var(--kd-col-gap, 24px) / -2) - 16px);
width: 32px;
z-index: 99998;
display: flex;
align-items: center;
justify-content: center;
cursor: col-resize;
user-select: none;
pointer-events: none;
opacity: 0;
transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}
.is-kardeu-preview-mode .kd-layout-grid:hover .kd-col-resizer-edge,
.is-kardeu-preview-mode .kd-col-resizer-edge:hover,
.is-kardeu-preview-mode .kd-col-resizer-edge.is-dragging,
.is-kardeu-preview-mode .kd-layout-grid:focus-within .kd-col-resizer-edge,
.is-kardeu-preview-mode .kd-layout-grid .kd-grid-col.is-active-col ~ .kd-col-resizer-edge,
.is-kardeu-preview-mode .kd-layout-grid .kd-grid-col.is-active-col .kd-col-resizer-edge {
opacity: 1;
pointer-events: auto;
}
.is-kardeu-preview-mode .kd-col-resizer-line {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 3px;
background: #0066cc;
border-radius: 3px;
box-shadow: 0 0 10px rgba(0, 102, 204, 0.5);
transition: background-color 0.15s ease, width 0.15s ease, box-shadow 0.15s ease;
}
.is-kardeu-preview-mode .kd-col-resizer-edge:hover .kd-col-resizer-line,
.is-kardeu-preview-mode .kd-col-resizer-edge.is-dragging .kd-col-resizer-line {
background: #0052a3;
width: 4px;
box-shadow: 0 0 14px rgba(0, 102, 204, 0.75);
}
.is-kardeu-preview-mode .kd-col-resizer-pill {
position: absolute;
top: 50%;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 12px;
background: #0066cc;
color: #ffffff;
border: 2px solid #ffffff;
border-radius: 9999px;
box-shadow: 0 4px 14px rgba(0, 102, 204, 0.45), 0 2px 6px rgba(0, 0, 0, 0.25);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 11px;
font-weight: 700;
white-space: nowrap;
cursor: col-resize;
pointer-events: auto;
transition: transform 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.is-kardeu-preview-mode .kd-col-resizer-edge:hover .kd-col-resizer-pill,
.is-kardeu-preview-mode .kd-col-resizer-edge.is-dragging .kd-col-resizer-pill {
background: #0052a3;
transform: translateY(-50%) scale(1.1);
box-shadow: 0 6px 18px rgba(0, 102, 204, 0.55);
}
.is-kardeu-preview-mode .kd-col-resizer-pill svg {
stroke: #ffffff;
stroke-width: 2.5;
}
.is-kardeu-preview-mode .kd-col-resizer-badge {
letter-spacing: 0.02em;
}
/* Oculta em ecrãs móveis quando as colunas colapsam para 100% */
@media (max-width: 640px) {
.is-kardeu-preview-mode .kd-col-resizer-edge {
display: none !important;
}
}
/* Durante redimensionamento de coluna, desativa pointer-events em vídeos/iframes para arrasto 60fps fluido */
.kd-is-col-resizing iframe,
.kd-is-col-resizing video {
pointer-events: none !important;
}
/* ==========================================================================
Barra Flutuante de Seleção e Ajuste de Coluna no Canvas
========================================================================== */
.is-kardeu-preview-mode .kd-col-toolbar {
position: absolute;
z-index: 999995;
display: none;
align-items: center;
gap: 6px;
padding: 5px 10px;
background: #0f172a;
color: #f8fafc;
border-radius: 10px;
box-shadow: 0 14px 34px rgba(15, 23, 42, 0.35), 0 2px 6px rgba(0, 0, 0, 0.15);
border: 1px solid rgba(255, 255, 255, 0.14);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 12px;
user-select: none;
opacity: 0;
transform: translateY(6px);
transition: opacity 0.15s ease, transform 0.15s ease;
}
.is-kardeu-preview-mode .kd-col-toolbar.is-visible {
display: flex;
opacity: 1;
transform: translateY(0);
}
.is-kardeu-preview-mode .kd-col-tb-header {
display: inline-flex;
align-items: center;
gap: 6px;
}
.is-kardeu-preview-mode .kd-col-tb-title {
font-weight: 600;
color: #94a3b8;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.is-kardeu-preview-mode .kd-col-tb-badge {
background: rgba(0, 102, 204, 0.3);
color: #93c5fd;
border: 1px solid rgba(147, 197, 253, 0.3);
padding: 1px 6px;
border-radius: 4px;
font-weight: 700;
font-size: 11px;
}
.is-kardeu-preview-mode .kd-col-tb-divider {
width: 1px;
height: 16px;
background: rgba(255, 255, 255, 0.15);
margin: 0 2px;
}
.is-kardeu-preview-mode .kd-col-tb-chips {
display: inline-flex;
align-items: center;
gap: 3px;
}
.is-kardeu-preview-mode .kd-col-tb-chip {
padding: 2px 7px;
border-radius: 5px;
background: rgba(255, 255, 255, 0.08);
color: #e2e8f0;
border: 1px solid transparent;
font-size: 11px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s ease;
}
.is-kardeu-preview-mode .kd-col-tb-chip:hover {
background: rgba(255, 255, 255, 0.2);
color: #ffffff;
}
.is-kardeu-preview-mode .kd-col-tb-chip.is-active {
background: #0066cc;
color: #ffffff;
font-weight: 700;
border-color: rgba(255, 255, 255, 0.3);
}
.is-kardeu-preview-mode .kd-col-tb-steppers {
display: inline-flex;
align-items: center;
gap: 3px;
}
.is-kardeu-preview-mode .kd-col-tb-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
border-radius: 5px;
background: rgba(255, 255, 255, 0.1);
color: #ffffff;
border: none;
font-size: 13px;
font-weight: 700;
cursor: pointer;
transition: background 0.15s ease;
}
.is-kardeu-preview-mode .kd-col-tb-btn:hover {
background: rgba(255, 255, 255, 0.25);
}
/* Realce sutil de coluna ativa */
.is-kardeu-preview-mode .kd-grid-col.is-active-col {
outline: 2px dashed rgba(0, 102, 204, 0.5) !important;
outline-offset: 3px !important;
}
/* ==========================================================================
Garantia de Visibilidade Permanente do Cabeçalho & Rodapé no Kardeu Studio
========================================================================== */
.is-kardeu-preview-mode .site-header,
.is-kardeu-preview-mode .kardeu-site-header {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
transform: none !important;
position: relative !important;
}
.is-kardeu-preview-mode .site-footer,
.is-kardeu-preview-mode .kardeu-site-footer,
.is-kardeu-preview-mode .kd-modular-footer {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Neutralização Absoluta da Barra de Administração WP no Kardeu Studio */
.is-kardeu-preview-mode #wpadminbar,
html.is-kardeu-preview-mode #wpadminbar,
body.is-kardeu-preview-mode #wpadminbar {
display: none !important;
}
html.is-kardeu-preview-mode,
body.is-kardeu-preview-mode {
margin-top: 0px !important;
padding-top: 0px !important;
}
/* ==========================================================================
1. Hover Ótico Universal (Nunca Perde o Efeito) & Estados de Ação
========================================================================== */
button:hover,
a.button:hover,
[role="button"]:not(.co-order-review-title-header):not(.co-summary-collapse-chevron):hover,
.kd-btn:hover,
.kd-product-card-btn:hover,
[data-kd-custom-color]:hover,
button[style*="background-color"]:hover,
a[style*="background-color"]:hover,
.kd-html-section-body button:hover,
.kd-html-section-body a[class*="bg-"]:hover {
filter: brightness(0.92) contrast(1.05) !important;
transform: translateY(-1px) !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12) !important;
}
button:active,
a.button:active,
[role="button"]:not(.co-order-review-title-header):not(.co-summary-collapse-chevron):active,
.kd-btn:active,
.kd-product-card-btn:active,
[data-kd-custom-color]:active,
button[style*="background-color"]:active,
a[style*="background-color"]:active,
.kd-html-section-body button:active,
.kd-html-section-body a[class*="bg-"]:active {
filter: brightness(0.85) contrast(1.10) !important;
transform: translateY(0) !important;
}
/* Herança Automática de Botões em Blocos Tailwind a partir das Global Settings */
.kd-html-section-body button:not([data-kd-custom-color]),
.kd-html-section-body a[class*="bg-"]:not([data-kd-custom-color]),
.kd-html-section-body a[role="button"]:not([data-kd-custom-color]),
.kd-grid-col-html-body button:not([data-kd-custom-color]),
.kd-grid-col-html-body a[class*="bg-"]:not([data-kd-custom-color]) {
background-color: var(--kardeu-btn-bg, var(--kd-primary)) !important;
color: var(--kardeu-btn-text, #ffffff) !important;
border-radius: var(--kardeu-btn-radius, var(--kd-radius, 8px)) !important;
transition: filter 0.2s ease, background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease !important;
}
.kd-html-section-body button:not([data-kd-custom-color]):hover,
.kd-html-section-body a[class*="bg-"]:not([data-kd-custom-color]):hover,
.kd-html-section-body a[role="button"]:not([data-kd-custom-color]):hover,
.kd-grid-col-html-body button:not([data-kd-custom-color]):hover,
.kd-grid-col-html-body a[class*="bg-"]:not([data-kd-custom-color]):hover {
background-color: var(--kardeu-btn-hover-bg, var(--kd-primary-hover)) !important;
color: var(--kardeu-btn-text, #ffffff) !important;
}
/* ==========================================================================
2. Micro-Spinner Canónico Universal (Idêntico ao Checkout do Carrinho) & Anti-CLS
========================================================================== */
@keyframes co-modern-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@keyframes kardeu-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.is-loading,
.kardeu-btn-loading,
.co-btn-loading,
.button.loading {
position: relative !important;
color: transparent !important;
text-shadow: none !important;
pointer-events: none !important;
user-select: none !important;
cursor: not-allowed !important;
}
/* Ocultar rigorosamente texto, ícones SVG e rótulos durante o estado de carregamento */
.is-loading *,
.kardeu-btn-loading *,
.co-btn-loading *,
.button.loading * {
opacity: 0 !important;
visibility: hidden !important;
}
/* Spinner circular 22px perfeitamente centrado via pseudo-elemento */
.is-loading::after,
.kardeu-btn-loading::after,
.co-btn-loading::after,
.button.loading::after {
content: '' !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
width: 22px !important;
height: 22px !important;
margin-top: -11px !important;
margin-left: -11px !important;
border: 2.5px solid rgba(255, 255, 255, 0.25) !important;
border-top-color: var(--kardeu-btn-text, #ffffff) !important;
border-radius: 50% !important;
animation: co-modern-spin 0.65s linear infinite !important;
box-sizing: border-box !important;
z-index: 10 !important;
display: block !important;
}
/* Blindagem: impedir estritamente micro-spinner e estado de carregamento no cabeçalho e menu móvel */
.site-header .kardeu-spinner,
.kd-header-actions .kardeu-spinner,
.kd-mobile-menu-trigger-wrap .kardeu-spinner,
.kd-mobile-menu-trigger .kardeu-spinner,
.kd-mobile-menu-drawer .kardeu-spinner,
.kd-mobile-drawer__close .kardeu-spinner,
.kd-submenu-toggle .kardeu-spinner {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
.kd-mobile-menu-trigger.is-loading,
.kd-mobile-drawer__close.is-loading,
.kd-submenu-toggle.is-loading,
.kd-header-actions .is-loading {
pointer-events: auto !important;
cursor: pointer !important;
opacity: 1 !important;
min-width: unset !important;
min-height: unset !important;
}
/* ==========================================================================
3. Grelha de Produtos / Product Cards (Design System & Conversão)
========================================================================== */
.kd-products-grid {
display: grid;
grid-template-columns: repeat(var(--kd-cols-desktop, var(--kd-cols-desk, 4)), minmax(0, 1fr));
column-gap: var(--kd-grid-gap-x, var(--kd-gap-x, var(--kd-gap, 20px))) !important;
row-gap: var(--kd-grid-gap-y, var(--kd-gap-y, 24px)) !important;
gap: var(--kd-grid-gap-y, var(--kd-gap-y, 24px)) var(--kd-grid-gap-x, var(--kd-gap-x, var(--kd-gap, 20px)));
width: 100%;
}
@media (max-width: 1024px) {
.kd-products-grid {
grid-template-columns: repeat(var(--kd-cols-tablet, var(--kd-cols-tab, 2)), minmax(0, 1fr));
}
}
@media (max-width: 640px) {
.kd-products-grid {
grid-template-columns: repeat(var(--kd-cols-mobile, var(--kd-cols-mob, 2)), minmax(0, 1fr));
}
}
.kd-product-card {
background: var(--kd-card-bg, var(--kd-card-surface, #ffffff));
border: var(--kd-card-border-width, 1px) solid var(--kd-card-border, var(--kd-color-border, #e2e8f0));
border-radius: var(--kd-card-radius, 14px);
padding: var(--kd-card-padding, 14px);
display: flex;
flex-direction: column;
transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease;
box-sizing: border-box;
position: relative;
}
.kd-product-card:hover {
box-shadow: 0 6px 16px -2px rgba(0, 0, 0, 0.06);
border-color: #cbd5e1;
}
.kd-product-card.has-hover-lift:hover {
transform: translateY(-5px) !important;
box-shadow: 0 14px 28px -4px rgba(0, 0, 0, 0.12);
border-color: #94a3b8;
}
.kd-product-card:not(.has-hover-lift):hover,
.kd-product-card:not(.has-hover-lift) {
transform: none !important;
}
.kd-product-card:not(.has-hover-lift):hover .kd-product-card-img,
.kd-product-card:not(.has-hover-lift):hover img {
transform: none !important;
}
/* Modo Sem Moldura / Edge-to-Edge (txrace.com) */
.kd-product-card.is-frameless,
.has-frameless-cards .kd-product-card,
.kd-products-grid.is-frameless .kd-product-card {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0 !important;
}
.kd-product-card.is-frameless:hover,
.has-frameless-cards .kd-product-card:hover,
.kd-products-grid.is-frameless .kd-product-card:hover {
transform: none !important;
box-shadow: none !important;
border-color: transparent !important;
}
.kd-product-card.is-frameless .kd-product-card-media,
.has-frameless-cards .kd-product-card .kd-product-card-media,
.kd-products-grid.is-frameless .kd-product-card .kd-product-card-media {
border-radius: 0 !important;
width: 100% !important;
margin-bottom: 8px !important;
}
.kd-product-card.is-frameless .kd-product-card-img,
.has-frameless-cards .kd-product-card .kd-product-card-img,
.kd-products-grid.is-frameless .kd-product-card .kd-product-card-img {
width: 100% !important;
max-width: 100% !important;
}
.kd-product-card-media,
.kd-product-card-media-wrapper {
position: relative;
overflow: hidden;
border-radius: calc(var(--kd-card-radius, 14px) - 4px);
background: transparent;
display: flex;
align-items: center;
justify-content: center;
}
/* Quando o card não tem padding (zero margem / full bleed), a imagem sangra até às bordas superiores */
.kd-product-card[style*="--kd-card-padding: 0px"] .kd-product-card-media,
.kd-product-card[style*="--kd-card-padding:0px"] .kd-product-card-media,
.kd-product-card[style*="--kd-card-padding: 0"] .kd-product-card-media {
border-radius: var(--kd-card-radius, 14px) var(--kd-card-radius, 14px) 0 0;
}
/* Proporções da Imagem */
.kd-aspect-1-1,
.kd-aspect-1-1 a,
.kd-products-grid[data-aspect-ratio="1:1"] .kd-product-card-media-link,
.kd-products-grid[data-aspect-ratio="1:1"] .kd-product-card-link { aspect-ratio: 1/1; }
.kd-aspect-4-5,
.kd-aspect-4-5 a,
.kd-products-grid[data-aspect-ratio="4:5"] .kd-product-card-media-link,
.kd-products-grid[data-aspect-ratio="4:5"] .kd-product-card-link { aspect-ratio: 4/5; }
.kd-aspect-3-4,
.kd-aspect-3-4 a,
.kd-products-grid[data-aspect-ratio="3:4"] .kd-product-card-media-link,
.kd-products-grid[data-aspect-ratio="3:4"] .kd-product-card-link { aspect-ratio: 3/4; }
.kd-aspect-16-9,
.kd-aspect-16-9 a,
.kd-products-grid[data-aspect-ratio="16:9"] .kd-product-card-media-link,
.kd-products-grid[data-aspect-ratio="16:9"] .kd-product-card-link { aspect-ratio: 16/9; }
/* Proporção adaptativa / natural: baseline rigorosa e uniforme em livros e produtos */
.kd-aspect-adapt,
.kd-aspect-adapt a,
.kd-products-grid[data-aspect-ratio="adapt"] .kd-product-card-media-link,
.kd-products-grid[data-aspect-ratio="adapt"] .kd-product-card-link {
aspect-ratio: auto !important;
height: var(--kd-card-img-max-h, 250px) !important;
min-height: var(--kd-card-img-max-h, 250px) !important;
display: flex;
align-items: center;
justify-content: center;
padding: 6px 4px;
}
.kd-product-card-link,
.kd-product-card-media-link {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
position: relative;
text-align: center;
}
/* Imagens sem cortes: contain por defeito para livros e capas com altura máxima respeitada */
.kd-product-card-img {
max-height: 100% !important;
max-width: 100% !important;
width: auto !important;
height: auto !important;
object-fit: var(--kd-card-img-fit, contain) !important;
display: block;
margin: 0 auto;
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.08));
transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, filter 0.35s ease;
}
/* Modo cover opcional */
[data-image-fit="cover"] .kd-product-card-img,
.kd-products-grid[data-image-fit="cover"] .kd-product-card-img,
.kd-products-grid-section[data-image-fit="cover"] .kd-product-card-img {
width: 100% !important;
height: 100% !important;
max-height: 100% !important;
object-fit: cover !important;
filter: none !important;
}
.kd-product-card:hover .kd-img-primary,
.kd-product-card:hover .primary-img {
transform: none;
filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.08));
}
.kd-img-secondary,
.secondary-img,
.kd-product-card-img.secondary-img {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
max-height: 100% !important;
max-width: 100% !important;
object-fit: var(--kd-card-img-fit, contain) !important;
object-position: center !important;
transform: none !important;
opacity: 0 !important;
pointer-events: none !important;
transition: opacity 0.3s ease !important;
}
[data-image-fit="cover"] .kd-img-secondary,
[data-image-fit="cover"] .secondary-img,
[data-image-fit="cover"] .kd-product-card-img.secondary-img,
.kd-products-grid[data-image-fit="cover"] .secondary-img,
.kd-products-grid[data-image-fit="cover"] .kd-product-card-img.secondary-img,
.kd-products-grid-section[data-image-fit="cover"] .secondary-img,
.kd-products-grid-section[data-image-fit="cover"] .kd-product-card-img.secondary-img {
width: 100% !important;
height: 100% !important;
max-height: 100% !important;
object-fit: cover !important;
object-position: center !important;
filter: none !important;
}
.kd-product-card:hover .kd-img-secondary,
.kd-product-card:hover .secondary-img,
.kd-product-card:hover .kd-product-card-img.secondary-img {
opacity: 1 !important;
transform: none !important;
}
.kd-product-card.has-secondary-image:hover .kd-img-primary,
.kd-product-card.has-secondary-image:hover .primary-img,
.kd-product-card-media.has-secondary-image:hover .primary-img {
opacity: 0 !important;
transform: none !important;
}
.kd-product-demo-media {
display: flex;
align-items: center;
justify-content: center;
background: #f8fafc;
}
.kd-product-badges {
position: absolute;
top: 8px;
left: 8px;
z-index: 2;
display: flex;
flex-direction: column;
gap: 4px;
}
.kd-product-badge {
padding: 3px 8px;
font-size: 11px;
font-weight: 700;
border-radius: 6px;
line-height: 1.2;
text-transform: uppercase;
letter-spacing: 0.03em;
}
.kd-badge-sale {
background: #e11d48;
color: #ffffff;
box-shadow: 0 2px 6px rgba(225, 29, 72, 0.3);
}
.kd-badge-out {
background: #475569;
color: #ffffff;
}
.kd-product-card-info,
.kd-product-card-body {
display: flex;
flex-direction: column;
flex-grow: 1;
padding: var(--kd-card-content-padding, 0px);
padding-top: calc(var(--kd-card-elements-gap, 8px) + 4px);
gap: var(--kd-card-elements-gap, 8px);
box-sizing: border-box;
}
/* Tipografia do Título */
.kd-product-card-title,
h3.kd-product-card-title {
order: var(--kd-order-title, 1) !important;
font-size: var(--kd-card-title-size, 15px) !important;
font-weight: var(--kd-card-title-weight, 700) !important;
line-height: 1.35 !important;
margin: 0 !important;
display: -webkit-box !important;
-webkit-line-clamp: var(--kd-card-title-clamp, 2) !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-align: var(--kd-card-align, left) !important;
}
.kd-product-card-title a,
h3.kd-product-card-title a {
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
color: var(--kd-card-title-color, #0f172a) !important;
text-decoration: none !important;
transition: color 0.15s ease;
}
.kd-product-card-title a:hover,
h3.kd-product-card-title a:hover {
color: var(--kd-card-title-hover, #0066cc) !important;
}
/* Subtítulo / Autor do Produto */
.kd-product-card-subtitle {
order: var(--kd-order-subtitle, 2) !important;
font-size: var(--kd-card-sub-size, 12.5px) !important;
font-weight: var(--kd-card-sub-weight, 500) !important;
color: var(--kd-card-sub-color, #64748b) !important;
line-height: 1.35 !important;
margin: 0 !important;
text-align: var(--kd-card-align, left) !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: nowrap !important;
}
.kd-product-card-subtitle a,
.kd-product-sub-link {
font-size: inherit !important;
font-weight: inherit !important;
color: inherit !important;
text-decoration: none;
transition: color 0.15s ease;
}
.kd-product-card-subtitle a:hover,
.kd-product-sub-link:hover {
color: var(--kd-card-title-hover, #0066cc) !important;
text-decoration: underline;
}
/* Preço do Produto & Remoção Estrita de IVA */
.kd-product-card-price {
order: var(--kd-order-price, 3) !important;
font-size: var(--kd-card-price-size, 18px) !important;
font-weight: var(--kd-card-price-weight, 800) !important;
color: var(--kd-card-price-color, #0f172a) !important;
margin: 0 !important;
text-align: var(--kd-card-align, left) !important;
display: flex !important;
align-items: baseline !important;
justify-content: var(--kd-card-flex-align, flex-start) !important;
gap: 6px !important;
flex-wrap: wrap !important;
}
.kd-product-card-price .amount,
.kd-product-card-price .woocommerce-Price-amount {
font-size: inherit !important;
font-weight: inherit !important;
color: inherit !important;
}
.kd-product-card-price .woocommerce-price-suffix,
.kd-product-card-price small {
display: none !important;
}
.kd-product-card-price del {
font-size: 0.85em !important;
color: var(--kd-card-price-del-color, #94a3b8) !important;
font-weight: 400 !important;
}
.kd-product-card-price ins {
text-decoration: none !important;
color: #e11d48 !important;
font-weight: 800 !important;
}
/* Avaliações / Ratings com Micro-Animação e Estrelas Interativas */
.kd-product-card-rating {
order: var(--kd-order-rating, 4);
display: flex;
align-items: center;
justify-content: var(--kd-card-flex-align, flex-start);
gap: 6px;
margin: 0;
font-size: 12px;
}
/* Botão de Ação / Compra Rápida */
.kd-product-card-action {
order: var(--kd-order-button, 5);
margin-top: auto;
padding-top: 4px;
}
.kd-rating-stars-list {
display: inline-flex;
align-items: center;
gap: var(--kd-star-gap, 3px) !important;
line-height: 1;
}
.kd-star-btn {
font-size: var(--kd-star-size, 14px) !important;
color: #cbd5e1;
transition: color 0.15s ease, transform 0.15s ease;
user-select: none;
display: inline-block;
line-height: 1;
margin: 0 !important;
padding: 0 !important;
}
.kd-star-btn.is-active {
color: var(--kd-star-color, #f59e0b);
}
.kd-interactive-rating .kd-star-btn {
cursor: pointer;
}
.kd-interactive-rating .kd-star-btn:hover {
transform: scale(1.25);
color: var(--kd-star-color, #f59e0b);
}
.kd-star-btn.just-voted {
animation: kdStarPop 0.45s cubic-bezier(0.175, 0.885, 0.32, 1.275);
color: var(--kd-star-color, #f59e0b) !important;
}
@keyframes kdStarPop {
0% { transform: scale(1); }
40% { transform: scale(1.5) rotate(10deg); filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.6)); }
100% { transform: scale(1) rotate(0deg); }
}
.kd-rating-count {
font-size: 12px;
color: var(--kd-color-muted, #64748b);
font-weight: 500;
}
/* Ações e Botão Adicionar ao Carrinho Canónico (UX.md) */
.kd-product-card-action {
margin-top: auto;
position: relative;
}
/* ELIMINAR VAZAMENTO: Ocultar universalmente o texto View cart do WooCommerce nativo */
a.added_to_cart,
.added_to_cart,
.added_to_cart.wc-forward,
.woocommerce a.added_to_cart,
.woocommerce-page a.added_to_cart,
.woocommerce .added_to_cart,
.woocommerce-page .added_to_cart,
ul.products li.product .added_to_cart,
.products .added_to_cart,
.product .added_to_cart,
.kd-product-card .added_to_cart,
.kd-products-grid .added_to_cart,
.kd-product-card-action .added_to_cart,
.kardeu-product-card .added_to_cart,
.kardeu-grid-card .added_to_cart,
body.single-product .added_to_cart {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
height: 0 !important;
width: 0 !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
font-size: 0 !important;
line-height: 0 !important;
pointer-events: none !important;
position: absolute !important;
left: -9999px !important;
}
.kd-product-card-btn {
width: 100% !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
height: 42px !important;
font-family: var(--kd-btn-font-family, var(--kardeu-btn-font, var(--kd-font-heading, inherit))) !important;
font-size: 13.5px !important;
font-weight: var(--kd-btn-font-weight, var(--kardeu-btn-font-weight, 700)) !important;
border-radius: var(--kd-grid-btn-radius, var(--kardeu-btn-radius, 8px)) !important;
background-color: var(--kd-grid-btn-bg, var(--kardeu-btn-bg, var(--kd-primary, #ff7a00))) !important;
color: var(--kd-grid-btn-color, var(--kardeu-btn-text, #ffffff)) !important;
border: none !important;
text-decoration: none !important;
cursor: pointer !important;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
box-sizing: border-box !important;
position: relative !important;
overflow: hidden !important;
}
.kd-product-card-btn:hover {
background-color: var(--kd-grid-btn-hover, var(--kardeu-btn-hover-bg, var(--kd-primary-hover, #e56d00))) !important;
color: var(--kd-grid-btn-color, var(--kardeu-btn-text, #ffffff)) !important;
transform: translateY(-1px) !important;
box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18) !important;
}
.kd-product-card-btn:active {
transform: translateY(0) !important;
}
.kd-product-card-btn .kd-btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
}
.kd-product-card-btn .kd-btn-icon svg {
width: 15px;
height: 15px;
transition: transform 0.2s ease;
}
.kd-product-card-btn:hover .kd-btn-icon svg {
transform: scale(1.1);
}
/* Transição de Estado: Sucesso ao Adicionar (Sem checkmark e sem alterar cores/layout) */
.kd-product-card-btn.added {
/* Mantém estilo sem checkmark */
}
.kd-product-card-btn.added .kd-btn-label::after,
.kd-product-card-btn.added .kd-btn-label:after,
.kd-product-card-btn.added::after,
.kd-product-card-btn.added:after,
.woocommerce a.button.added::after,
.woocommerce a.button.added:after,
.woocommerce button.button.added::after,
.woocommerce button.button.added:after,
.woocommerce input.button.added::after,
.woocommerce input.button.added:after,
.button.added::after,
.button.added:after,
.single_add_to_cart_button.added::after,
.single_add_to_cart_button.added:after {
display: none !important;
content: none !important;
opacity: 0 !important;
visibility: hidden !important;
width: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.kd-product-card-btn.loading,
.kd-product-card-btn.co-btn-loading,
.kd-product-card-btn.kardeu-btn-loading,
.kd-product-card-btn.is-loading {
position: relative !important;
color: transparent !important;
text-shadow: none !important;
pointer-events: none !important;
user-select: none !important;
cursor: not-allowed !important;
}
.kd-product-card-btn.loading *,
.kd-product-card-btn.co-btn-loading *,
.kd-product-card-btn.kardeu-btn-loading *,
.kd-product-card-btn.is-loading * {
opacity: 0 !important;
visibility: hidden !important;
}
.kd-product-card-btn.loading::after,
.kd-product-card-btn.co-btn-loading::after,
.kd-product-card-btn.kardeu-btn-loading::after,
.kd-product-card-btn.is-loading::after {
content: '' !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
width: 22px !important;
height: 22px !important;
margin-top: -11px !important;
margin-left: -11px !important;
border: 2.5px solid rgba(255, 255, 255, 0.25) !important;
border-top-color: var(--kardeu-btn-text, #ffffff) !important;
border-radius: 50% !important;
animation: co-modern-spin 0.65s linear infinite !important;
box-sizing: border-box !important;
z-index: 10 !important;
display: block !important;
}
/* ==========================================================================
4. Secção de Vídeo (YouTube, Vimeo, MP4)
========================================================================== */
.kd-video-section {
width: 100%;
}
.kd-video-wrapper {
width: 100%;
}
.kd-video-box,
.kd-grid-col-video-media,
.kd-grid-col-video-box-media,
.kd-video-placeholder {
position: relative;
width: 100%;
overflow: hidden;
background: #0f172a;
border-radius: var(--kd-card-radius, 0px) !important;
}
.kd-video-wrapper,
.kd-grid-col-video-box {
position: relative;
width: 100%;
background: transparent !important;
border: none !important;
box-shadow: none !important;
margin-top: 0 !important;
padding-top: 0 !important;
}
.kd-video-box iframe,
.kd-video-box video,
.kd-grid-col-video-box iframe,
.kd-grid-col-video-box video,
.kd-grid-col-video-box-media iframe,
.kd-grid-col-video-box-media video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
object-fit: cover;
border-radius: var(--kd-card-radius, 0px) !important;
}
/* ==========================================================================
5. Secções Aninhadas na Grelha de Layout (Universal Layout Grid Columns)
========================================================================== */
.kd-grid-col .kd-section {
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
width: 100% !important;
}
.kd-grid-col .kd-container {
max-width: 100% !important;
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
.kd-grid-col .kd-section-header,
.kd-grid-col .kd-products-header,
.kd-grid-col .kd-video-header {
margin-bottom: 18px !important;
}
.kd-grid-col .kd-products-title,
.kd-grid-col .kd-video-title {
font-size: 1.35rem !important;
}
.kd-grid-col .kd-products-subtitle {
font-size: 0.875rem !important;
}
.kd-grid-col .kd-video-wrapper {
max-width: 100% !important;
margin-top: 0 !important;
padding-top: 0 !important;
}
/* ==========================================================================
Ajuste e Alinhamento Rigoroso ao Topo do Quadro para Vídeo na Grelha
========================================================================== */
.kd-layout-grid > .kd-grid-col-video,
.kd-grid-col.kd-grid-col-video,
.kd-grid-col-video {
display: flex !important;
flex-direction: column !important;
justify-content: flex-start !important;
align-items: stretch !important;
align-self: flex-start !important;
margin-top: 0 !important;
padding-top: 0 !important;
top: 0 !important;
}
.kd-grid-col-video .kd-section,
.kd-grid-col-video .kd-video-section,
.kd-grid-col-video .kd-container,
.kd-grid-col-video .kd-video-wrapper,
.kd-grid-col-video .kd-grid-col-video-box {
margin-top: 0 !important;
padding-top: 0 !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
align-self: flex-start !important;
justify-content: flex-start !important;
width: 100% !important;
max-width: 100% !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
}
.kd-grid-col-video .kd-video-wrapper,
.kd-grid-col-video .kd-grid-col-video-box {
margin-top: 0 !important;
padding-top: 0 !important;
}
.kd-grid-col-video .kd-video-box,
.kd-grid-col-video .kd-grid-col-video-box-media {
margin-top: 0 !important;
align-self: flex-start !important;
}
/* Proporções de Vídeo Padronizadas (Aspect Ratio) */
.kd-aspect-16-9,
.kd-video-box[style*="16 / 9"],
.kd-grid-col-video-box-media[style*="16 / 9"],
.kd-grid-col-video-box-media[style*="16/9"] {
aspect-ratio: 16 / 9 !important;
width: 100% !important;
}
.kd-aspect-4-3,
.kd-video-box[style*="4 / 3"],
.kd-grid-col-video-box-media[style*="4 / 3"],
.kd-grid-col-video-box-media[style*="4/3"] {
aspect-ratio: 4 / 3 !important;
width: 100% !important;
}
.kd-aspect-1-1,
.kd-video-box[style*="1 / 1"],
.kd-grid-col-video-box-media[style*="1 / 1"],
.kd-grid-col-video-box-media[style*="1/1"] {
aspect-ratio: 1 / 1 !important;
width: 100% !important;
}
.kd-aspect-9-16,
.kd-video-box[style*="9 / 16"],
.kd-grid-col-video-box-media[style*="9 / 16"],
.kd-grid-col-video-box-media[style*="9/16"] {
aspect-ratio: 9 / 16 !important;
max-width: min(100%, 480px) !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;
}
.kd-grid-col .kd-newsletter-card {
padding: 24px 20px !important;
}
/* ==========================================================================
6. Secção de Texto Formatado / Código / Shortcodes (.kd-text-section)
========================================================================== */
.kd-text-section {
position: relative;
width: 100%;
box-sizing: border-box;
}
.kd-text-container {
width: 100%;
box-sizing: border-box;
}
.kd-text-title {
font-size: clamp(1.5rem, 3vw, 2.25rem);
font-weight: 700;
color: var(--kd-heading-color, #0f172a);
margin: 0 0 12px 0;
line-height: 1.25;
}
.kd-text-subtitle {
font-size: clamp(0.95rem, 1.5vw, 1.15rem);
color: #64748b;
margin: 0 0 24px 0;
line-height: 1.6;
}
.kd-text-body {
font-size: 1rem;
line-height: 1.8;
color: var(--kd-body-color, #334155);
word-break: break-word;
}
.kd-text-body p {
margin: 0 0 1.25em 0;
}
.kd-text-body p:last-child {
margin-bottom: 0;
}
.kd-text-body h1,
.kd-text-body h2,
.kd-text-body h3,
.kd-text-body h4,
.kd-text-body h5,
.kd-text-body h6 {
color: var(--kd-heading-color, #0f172a);
font-weight: 700;
margin: 1.5em 0 0.6em 0;
line-height: 1.3;
}
.kd-text-body h1:first-child,
.kd-text-body h2:first-child,
.kd-text-body h3:first-child {
margin-top: 0;
}
.kd-text-body ul,
.kd-text-body ol {
margin: 0 0 1.25em 1.5em;
padding: 0;
}
.kd-text-body li {
margin-bottom: 0.5em;
}
.kd-text-body blockquote {
border-left: 4px solid var(--kd-primary, #0066cc);
padding: 8px 16px;
margin: 1.5em 0;
font-style: italic;
color: #475569;
background: #f8fafc;
border-radius: 0 8px 8px 0;
}
.kd-text-body img {
max-width: 100%;
height: auto;
border-radius: var(--kd-card-radius, 6px);
}
.kd-text-body code {
font-family: monospace;
font-size: 0.9em;
background: #f1f5f9;
padding: 2px 6px;
border-radius: 4px;
color: #0f172a;
}
.kd-text-body a {
color: var(--kd-primary, #0066cc);
text-decoration: underline;
text-underline-offset: 2px;
}
.kd-text-body a:hover {
color: #004b99;
}
.kd-grid-col .kd-text-section {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.kd-grid-col .kd-text-title {
font-size: 1.5rem !important;
}
/* ==========================================================================
Secção Before / After (Cortina de Comparação de Imagens Interativa)
========================================================================== */
.kd-before-after-section {
position: relative;
box-sizing: border-box;
}
.kd-before-after-header {
margin-bottom: clamp(16px, 3vw, 28px);
}
.kd-before-after-title {
font-size: clamp(1.5rem, 2.8vw, 2.25rem);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.25;
margin: 0 0 8px 0;
}
.kd-before-after-subtitle {
font-size: clamp(0.95rem, 1.4vw, 1.125rem);
color: #64748b;
line-height: 1.5;
margin: 0;
}
.kd-before-after-wrapper {
position: relative;
width: 100%;
display: flex;
justify-content: center;
box-sizing: border-box;
}
.kd-before-after-frame {
position: relative;
width: 100%;
max-width: 100%;
overflow: hidden;
border-radius: var(--kd-ba-radius, 16px);
box-shadow: 0 20px 40px -15px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05);
user-select: none;
-webkit-user-select: none;
touch-action: pan-y;
cursor: ew-resize;
background-color: #0f172a;
box-sizing: border-box;
isolation: isolate;
}
/* Camadas de Imagem */
.kd-ba-layer {
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
box-sizing: border-box;
}
.kd-before-after-frame:not([style*="aspect-ratio"]) .kd-ba-layer.kd-ba-after {
position: relative;
display: block;
}
.kd-before-after-frame[style*="aspect-ratio"] .kd-ba-layer.kd-ba-after {
position: absolute;
inset: 0;
}
.kd-ba-layer.kd-ba-before {
position: absolute;
inset: 0;
z-index: 2;
will-change: clip-path;
}
.kd-ba-layer img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
user-select: none;
-webkit-user-select: none;
-webkit-user-drag: none;
pointer-events: none;
}
/* Badges / Etiquetas de Legenda */
.kd-ba-badge {
position: absolute;
z-index: 5;
display: inline-flex;
align-items: center;
padding: 6px 14px;
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.04em;
line-height: 1.2;
text-transform: uppercase;
color: #ffffff;
background: rgba(15, 23, 42, 0.85);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border: 1px solid rgba(255, 255, 255, 0.16);
border-radius: 6px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
pointer-events: none;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.kd-before-after-frame.is-pos-bottom .kd-ba-badge {
bottom: 16px;
}
.kd-before-after-frame.is-pos-top .kd-ba-badge {
top: 16px;
}
.kd-ba-badge-before {
left: 16px;
}
.kd-ba-badge-after {
right: 16px;
}
/* Divisor Vertical e Handle Flutuante */
.kd-ba-divider {
position: absolute;
top: 0;
bottom: 0;
width: 0;
z-index: 10;
pointer-events: none;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
will-change: left;
}
.kd-ba-divider-line {
flex: 1 1 auto;
width: 2.5px;
background: #ffffff;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.4), 0 0 1px rgba(0, 0, 0, 0.8);
}
.kd-ba-handle {
position: relative;
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 50%;
background: #ffffff;
color: #1e293b;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.2);
border: 2px solid #ffffff;
cursor: ew-resize;
pointer-events: auto;
transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.15s ease, background-color 0.15s ease;
outline: none;
z-index: 12;
}
.kd-before-after-frame:hover .kd-ba-handle {
transform: scale(1.08);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
}
.kd-before-after-frame.is-dragging .kd-ba-handle,
.kd-ba-handle:active {
transform: scale(1.15);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
background: #f8fafc;
}
.kd-ba-handle:focus-visible {
outline: 3px solid var(--kd-primary, #059669);
outline-offset: 3px;
}
.kd-ba-handle-arrows {
width: 22px;
height: 22px;
color: #334155;
display: block;
stroke-width: 2.5;
}
/* Range Input Acessível (Invisível mas focado por leitores de ecrã) */
.kd-ba-range {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
pointer-events: none;
margin: 0;
z-index: 15;
cursor: ew-resize;
}
/* Responsividade Mobile */
@media (max-width: 768px) {
.kd-ba-handle {
width: 38px;
height: 38px;
}
.kd-ba-handle-arrows {
width: 18px;
height: 18px;
}
.kd-ba-badge {
font-size: 0.75rem;
padding: 4px 10px;
}
.kd-before-after-frame.is-pos-bottom .kd-ba-badge {
bottom: 10px;
}
.kd-before-after-frame.is-pos-top .kd-ba-badge {
top: 10px;
}
.kd-ba-badge-before {
left: 10px;
}
.kd-ba-badge-after {
right: 10px;
}
}
/* Compatibilidade dentro de Colunas Heterogéneas (Layout Grid) */
.kd-grid-col .kd-before-after-section {
padding-top: 0 !important;
padding-bottom: 0 !important;
}