/*
Theme Name: Shoply
Theme URI: https://sellerthemes.com/shoply-free/
Author: Seller Themes
Author URI: https://sellerthemes.com/
Description: Shoply is a WooCommerce multipurpose WordPress theme designed for shopping online stores. Shoply is suitable for eCommerce websites such as fashion, suit, sneaker, shoes, glasses, accessories, supermarket … or anything you want. The theme is built with lots of cool features and fully eCommerce functionalities in Pro version. Visit Shoply pro demo. https://preview.sellerthemes.com/pro/shoply/
Template: storely
Version: 28.2
Tested up to: 7.0
Requires PHP: 7.4
Requires at least: 6.8
License: GPLv3 or later
License URI:  https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: shoply
Slug: shoply
Tags: one-column, two-columns, right-sidebar, flexible-header, custom-background, custom-colors, custom-header, custom-menu,  custom-logo, featured-image-header, featured-images, footer-widgets, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready, blog, e-commerce, portfolio, editor-style, grid-layout

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

*/


/* ===========================================================
   Identidade visual — Império dos Games
   Base premium/tecnológica (grafite quase preto) + acento
   dourado/âmbar (nod à fachada física e ao tema Pac-Man),
   calibrado para manter contraste com o texto branco que o
   tema já usa sobre a cor primária.
   =========================================================== */

:root {
    --bs-primary: #c1890f;
    --bs-primary-dark: #96690a;
    --bs-primary-light: #f7ecd8;
    --bs-primary-strips: rgb(193 137 15 / 0.12);

    --bs-secondary: #14161c;
    --bs-secondary-dark: #0b0c10;

    --bs-font-sans-serif: 'Roboto', sans-serif;
    --bs-font-heading: 'Rajdhani', sans-serif;
}

h1, h2, h3, h4, h5, h6,
[class*="title"],
[class*="heading"] {
    font-family: var(--bs-font-heading);
}

/* ===========================================================
   Barra superior do header (#above-header)
   - Redes sociais (esquerda no HTML) passam a aparecer à
     direita, na mesma linha — sem mexer em PHP, só invertendo
     a ordem visual das duas colunas.
   - O aviso "Please assign a widget" (área de widget vazia,
     visível só para admin) fica escondido — a área continua
     lá, disponível se um dia quisermos usá-la.
   =========================================================== */

#above-header .widget-left {
    order: 2;
    text-align: right;
}

#above-header .widget-right {
    order: 1;
}

.widget_none {
    display: none;
}

/* ===========================================================
   Logo + nome da loja lado a lado, centralizados verticalmente.
   A coluna do logo cresceu (col-lg-2 -> col-lg-3) e a da busca
   encolheu (col-lg-8 -> col-lg-7) no section-header.php do
   Shoply para abrir espaço, mantendo os 12 colunas do grid.
   =========================================================== */

.logo {
    display: flex;
    align-items: center;
    gap: 2px;
}

.logo img.custom-logo {
    max-height: 100px;
    width: auto;
}

.logo .site-description {
    /* Centralizado de volta, como preferido. Medi ao vivo: com
       text-align:center e margin:0, "IMPÉRIO" (linha mais curta)
       ficava a 50px do logo e "DOS GAMES" a 32px — a centralização
       sempre deixa a linha mais curta com mais vão, isso é normal
       em duas linhas centralizadas. Puxamos o bloco inteiro mais
       perto (-30px): "IMPÉRIO" cai pra ~20px e "DOS GAMES" pra
       ~2px, sem "DOS GAMES" encostar por baixo do logo. */
    margin: 0 0 0 -30px;
    font-family: var(--bs-font-heading);
    font-size: 27px;
    font-weight: 700;
    line-height: 1.15;
    color: var(--bs-secondary-dark);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-align: center;
}

@media (max-width: 991px) {
    .logo .site-description {
        font-size: 16px;
    }
    .logo img.custom-logo {
        max-height: 40px;
    }
}

/* ===========================================================
   Barra de pesquisa do header — reduzindo a "grossura"
   (altura) do campo, do dropdown de categorias e do botão.
   =========================================================== */

.header-search-form {
    height: 46px;
}

.header-search-form .header-search-select {
    min-height: 44px !important;
    padding: 8px 26px 8px 14px !important;
    background-position: 92% center !important;
    width: 30% !important;
}

.header-search-form input.header-search-input {
    min-height: 44px;
    font-size: 14px;
    width: 70% !important;
}

.header-search-form .header-search-button {
    padding: 7px 16px;
    font-size: 18px;
}

/* ===========================================================
   "Procurar categorias" alinhado à direita da tela.
   A terceira coluna dessa linha (área de widget vazia, já
   escondida) é removida do layout e a navegação central
   cresce para preencher o espaço.
   =========================================================== */

#browse-section .row > div:has(.product-category-browse) {
    order: 3;
}

#browse-section .row > div:has(.navbar-area) {
    order: 1;
    flex: 1 1 auto;
    max-width: 100%;
}

#browse-section .row > div:has(.main-navbar.menu-bar) {
    display: none;
}

/* Alinha o botão "Categorias" verticalmente com o texto do menu ao lado. */
#browse-section .row {
    align-items: center;
}

/* Tira as caixas com borda ao redor do menu (o tema aplicava uma borda de
   "pílula" pensada para outro layout de header, que não faz sentido aqui).
   A regra original é ".header2 #browse-section .navbar-area" (mais
   específica que só "#browse-section .navbar-area", por isso a primeira
   tentativa não bateu) — repetimos com a mesma classe extra e reforçamos
   com !important pra não depender de ordem no arquivo. */
#browse-section .navbar-area,
#browse-section .main-navbar.menu-bar,
.header2 #browse-section .navbar-area,
.header2 #browse-section .main-navbar.menu-bar {
    border: none !important;
    margin-bottom: 0 !important;
}

/* Espaço entre a linha do menu (Home/Produtos/Minha conta + Categorias)
   e o banner/imagens logo abaixo — estava rente, quase sem respiro.
   Era 28px; ficou grande demais, reduzido ~35% para 18px. */
#browse-section {
    margin-bottom: 18px;
}

.header2 #browse-section .widget_nav_menu .sub-menu {
    position: absolute;
    z-index: 99;
    width: 220px;
    background: var(--bs-white);
    padding: 4px 0;
    margin: 0;
    border: 0;
    right: -20%;
    border-radius: 0;
    -moz-box-shadow: 0 -8px 16px rgba(0, 0, 0, 0.075);
    box-shadow: 0 -8px 16px rgb(0 0 0 / 8%);
    font-size: 1rem;
    text-align: left;
    display: block;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: scaleY(0);
    transform: scaleY(0);
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
    -webkit-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
    border-bottom-width: 4px;
    border-style: solid;
    border-color: var(--bs-primary);
}

.header2 #browse-section .widget_nav_menu .menu-item:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    -webkit-transform: scaleY(1);
    transform: scaleY(1);
}


.header2 button.product-category-btn {
    background: var(--bs-primary);
}

.header2 #browse-section .widget_nav_menu .sub-menu li a {
    border-bottom: 1px solid #e1e1e1;
    color: var(--bs-secondary-dark);
    font-weight: 600;
    line-height: 24px;
    padding: 8px 18px 8px 18px;
    text-transform: none;
    white-space: normal;
    display: block;
}

.header2 #browse-section .widget_nav_menu li.menu-item-has-children > a:after {
    content: "\f107";
    font-family: var(--bs-font-awesome);
    font-weight: 700;
    position: absolute;
    top: 0;
    right: 5px;
    bottom: 0;
    display: flex;
    align-items: center;
    color: inherit;
    font-size: 16px;
    -webkit-transition: all 0.35s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: all 0.35s cubic-bezier(0.645, 0.045, 0.355, 1);
}


.header2 .main-navbar:not(.breadcrumb-menu) .main-menu > li > a {
    line-height: 58px;
} 

.header2 #browse-section #menu-language-menu a {
    color: var(--bs-secondary);
    padding-right: 20px;
}

.header2 #browse-section .navbar-area {
    border: 1px solid #e8e8e8;
    margin-bottom: 24px;
}

.header2 #browse-section .main-navbar.menu-bar {
    padding: 11px 0;
    border: 1px solid #e8e8e8;
}

.header2 #browse-section .main-navbar.menu-bar select{
	min-height:36px;
}

.header2 #browse-section .main-navbar.menu-bar.menu-bar-right p {
    line-height: 1;
    text-align: center;
}

.header2 #browse-section .main-navbar.menu-bar .widget.widget_nav_menu .menu li > a > img {
    display: inline-block;
    width: auto !important;
    height: 16px !important;
    margin-right: 5px;
    transform: translateY(0);
}
.header2 #browse-section .widget_nav_menu .menu > .menu-item > .sub-menu:before {
    content: "";
    position: absolute;
    top: auto;
    bottom: -10px;
    right: 20px;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

.header2 #browse-section .widget_nav_menu .menu > .menu-item > .sub-menu:before {
    top: -10px;
    border-bottom: 10px solid var(--bs-white);
}

.header-search-form .header-search-select,
#main-header2 .header-search-form .header-search-select,
#main-header3 .header-search-form .header-search-select,
.header5 .header-search-form .header-search-select {
    width: 30%;
    display: inline-block;
    border: none;
    float: right;
    cursor: pointer;
    min-height: 44px;
    border-left: 1px solid #e8e8e8;
    padding: 8px 26px 8px 14px;
    -webkit-appearance: none;
    -moz-appearance: none;
    outline-offset: -5px;
    background: url("data:image/svg+xml;utf8,<svg fill='rgb(36 39 46)' height='25' viewBox='0 0 24 24' width='25' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>")
        no-repeat 92% center;
}


.header2 #main-header2 .widget_social_widget li a {
    background-color: transparent;
    border: 1px solid var(--bs-secondary);
}
.header2 #main-header2 .widget_social_widget li a i {
    color: var(--bs-secondary);
}
.header2 #main-header2 .widget_social_widget li a:hover i {
    color: var(--bs-primary);
}

.header2 #main-header2 .widget_social_widget li a {
    border: none;
    overflow: visible;
}
.header2 #main-header2 .widget_social_widget li a:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid var(--bs-secondary);
    border-radius: 50%;
    transition: all 0.2s linear 0s;
}
.header2 #main-header2 .widget_social_widget li a:hover:after {
    height: 0px;
    top: 100%;
    border-color: var(--bs-primary);
}


.slider2 .home-slider-info-wrapper .slider-silde-info .slide-text-title {
    color: #ffffff;
}

.slider2 .home-slider-info-wrapper .slider-silde-info .slide-text-description {
    color: #ffffff;
}

.slider2 .slider-section .slider-info,
.slider3 .slider-section .slider-info {
    min-height: 247px;
    overflow: hidden;
    position: relative;
    z-index: 0;
    height: 247px;
}

.slider2 .slider-section .slider-info .slide-text.btn-white:hover,
.slider2 .slider-section .slider-info .slide-text.btn-white:focus,
.slider3 .slider-section .slide-text.btn-white:hover,
.slider3 .slider-section .slide-text.btn-white:focus {
    color: var(--bs-white);
    background-color: var(--bs-secondary);
}

.slider2 .slider-section .slider-info img,
.slider3 .slider-section .slider-info img {
    object-fit: fill;
    min-height: 197px;
    height: 100%;
    width: 100%;
    transform: scale(1);
    transition: 1s linear;
}

.slider2 .slider-section .slider-info .slider-area,
.slider3 .slider-section .slider-info .slider-area {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    padding: 20px 10px 10px 20px;
}

.slider2 .slider-section .slider-info >img:hover, .slider3 .slider-section .slider-info >img:hover, .slider2 .slider-section .slider-info >img:focus-within, .slider3 .slider-section .slider-info >img:focus-within {
    transform: scale(1.2);
}

.high-bg {
    background-color: #ffffff;
    color: var(--bs-primary);
    padding: 5px 10px;
}

.header-search-form {
    margin-bottom: 0;
	overflow: hidden;
}

.header2 #browse-section .main-navbar.menu-bar.menu-bar-right select {
    border: none;
    background: none;
}

.header-search-form .header-search-button {
    border: 1px solid var(--bs-secondary);
    background-color: var(--bs-secondary) !important;
}	

.footer-widgets .widget_products li a:before {
    content: none !important;
}

.footer-widgets .widget_products li a {
	display: contents !important;
}

.sidebar .wp-block-woocommerce-mini-cart {
    padding: 20px 12px;
}

.wp-block-button__link {
    background-color: var(--bs-primary)
}    

.footer-section figure.wp-block-table table tr, 
.footer-section figure.wp-block-table figcaption {
    color: #fff;
}

.footer-section figure.wp-block-table table td {
    border-width: 1px;
}

.footer-widgets .widget_text {
    color: #fff;
}

.footer-section ol.wp-block-latest-comments {
    padding: 0;
}

.wp-block-file a.wp-block-file__button {
    border-radius: 4px;
    background-color: var(--bs-primary);
}

.aligncenter {
    margin-left: auto;
    margin-right: auto;
}

.sidebar .wp-block-table {
    padding: 15px;
}

.wp-block-table table tr, .wp-block-table table td {
    border: 1px solid #e8e8e8;
    text-align: center;
}

.sidebar .wp-block-table figcaption {
    text-align: center;
}

.sidebar .widget_block {
    /* padding: 18px 12px; */
}

.post-content .gallery {
    display: inline-block;
}

.wp-block-image figcaption {
    text-align: center;
}

.wp-block-social-links li.wp-social-link {
    padding: 0;
}

.wp-block-social-links li a:before {
    content: none !important;
}

.footer-section .wp-block-social-links li a {
    padding-left: 0.25rem !important;
    margin-bottom: 0 !important;
}

.header2 .browse-section .widget_calendar table caption {
    padding-right: 1.75rem;
    padding-top: 0;
    padding-bottom: 0;
}

.header2 .browse-section .wp-block-calendar, .calendar_wrap {
    padding: 20px;
}

.post-items .post-content .gallery-item .gallery-icon img {
    width: 100%;
}

.footer-section .wp-block-buttons .is-style-outline a.wp-block-button__link {
    color: var(--bs-primary);
    border-color: var(--bs-primary);
}

.wp-block-embed figcaption {
    text-align: center;
}

.post-section #st-primary-content .wp-block-group {
    padding: 0 20px;
}

.wp-block-group em {
    color: inherit;
}

.is-style-outline .wp-block-button__link {
    background: transparent !important;
}

.has-text-color em,
.has-text-color h2 {
    color: inherit;
}

a.wp-block-file__button,
a.wp-block-file__button:hover,
a.wp-block-file__button:focus {
    color: #fff;
}

.has-text-color * {
    color: inherit;
}

.has-text-color a:hover, 
.has-text-color a:focus {
    color: inherit;
}

.wp-block-pullquote.has-text-color blockquote {
    border-color: inherit !important;
}

blockquote {
    border-color: inherit !important;
}

.wp-block-calendar table caption {
    font-weight: 500;
}

.wp-block-avatar img {
    border-radius: 50%;
}

.sidebar form.wp-block-search{
	padding: 0;
}

.sidebar .wp-block-search__label{
	border-bottom: 2px solid var(--bs-primary);
	font-size: 18px;
	font-weight: 600;
}

.sidebar .wp-block-search__label, .sidebar .wp-block-search__inside-wrapper{
	padding: 20px 12px;
}

.sidebar .wp-block-search__inside-wrapper{
	position: relative;
}

.sidebar .wp-block-search__button{	
	position: absolute;
    right: 12px;
    top: 20px;
    padding: 12px 5px;
}

.wp-block-image figcaption {
 	margin-bottom: 0;
}

.wp-block-group .wp-block-image figcaption a {
	color: var(--bs-primary);
}

blockquote.wp-block-quote.has-text-color p, blockquote.wp-block-quote.has-text-color p var, blockquote.wp-block-quote.has-text-color p cite, blockquote.wp-block-quote.has-text-color cite {
	color: inherit;
}

.wp-block-table figcaption {
	text-align: center;
}
.sidebar .widget .wp-block-group .wp-block-image {
	margin-bottom: 0;
}
ul.wp-block-rss {
 	list-style: disc;
}
.has-text-color a:hover, .has-text-color a:focus {
	color: inherit;
}
.entry-content ul:last-child {
	margin-bottom: 0;
}
.wp-block-code.has-text-color code {
	color: inherit;
}
.sidebar .widget .wp-block-group .is-nowrap p {
 	padding: 0;
 }
.sidebar .widget .wp-block-group .wp-block-latest-comments .wp-block-latest-comments__comment .wp-block-latest-comments__comment-date {
	padding-top: 0.5rem;
 	padding-bottom: 0.5rem;
 	font-size: 0.875rem;
}

/*wp-Block-RSS*/
ul.wp-block-rss {
	list-style: none;
	margin-left: 0;
}
ul.wp-block-rss li.wp-block-rss__item {
	margin-bottom: 1rem;
}
ul.wp-block-rss li.wp-block-rss__item:last-child {
	margin-bottom: 0;
}

/*wp-block-latest-comments*/
.wp-block-latest-comments__comment-date {
	padding-top: 0.500rem;
	padding-bottom: 0.500rem;		
}

.sidebar .widget .wp-block-group .wp-block-pullquote blockquote {
	margin-top: 0;
	margin-bottom: 0;
}

.sidebar .widget .wp-block-group .wp-block-rss .wp-block-rss__item-title > a {
 	font-weight: 600;
}

.wp-block-quote.is-style-large {
	padding-top: 1.10rem;
	padding-bottom: 1.10rem;
}

.sidebar .widget .wp-block-group .wp-block-file, .sidebar .widget .wp-block-group .wp-block-image {
	padding: 1.563rem 1.000rem 1.563rem;
}

.widget .wp-block-group .is-vertical a {
    color: inherit;
}

.entry-content ol.wp-block-latest-comments {
	padding-left: 2rem;
}

.wp-block-table figcaption {
  text-align: center;
}

.post .entry-content ul.wp-block-archives {
	margin-left: 1.125rem;
	list-style: disc
}

.wp-block-code.has-background code {
	background: inherit;
}

.wp-block-group .wp-block-embed,
.wp-block-group .wp-block-image {
	 padding: 1.563rem 1.000rem 1.563rem;
}

.wp-block-archives-dropdown select,
.wp-block-categories-dropdown select {
     width: auto;
}

.widget .wp-block-group .wp-block-columns {
	margin-bottom: 0;
}

.widget .wp-block-group .wp-block-rss li:last-child {
    padding-bottom: 0;
}

ul.wp-block-page-list a {
    text-decoration: none;
}

.sidebar .wp-block-group .is-nowrap {
    margin: 1.563rem 1.000rem 1.563rem;
}

.wp-block-code code img {
    display: inline-block;
    margin-left: 20px;
}

.sidebar .widget .wp-block-group .wp-block-latest-comments__comment-meta {
     font-weight: 600;
     line-height: 1.5;
}

​.wp-block-woocommerce-customer-account a .wc-block-customer-account__account-icon {
    height: 2em;
    width: 2em;
}

.sidebar .widget .wp-block-group .is-layout-flow h2 {
	border-left: 0 none;
}

.wc-block-components-product-title a,
.wc-block-components-product-title a:hover,
.wc-block-components-product-title a:focus {
	text-decoration: none;
}

.wp-block-details summary {
    font-weight: 600;
}

.wp-block-verse {
    padding: 10px;
}

.wp-block-calendar .wp-calendar-nav {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
 }

 .wc-block-cart .wp-block-woocommerce-cart-order-summary-block .wc-block-cart__totals-title {
    font-size: 24px;
    line-height: 34px;
    text-transform: capitalize;
    margin-bottom: 15px;
}

.sidebar .widget .wp-block-group .wp-block-latest-comments,
.sidebar .widget .wp-block-group .wp-block-loginout,
.sidebar .widget .wp-block-group .wp-block-table,
.sidebar .widget .wp-block-group .wp-block-buttons {
	padding: 1.563rem 1.000rem 1.563rem;
}

.sidebar .widget .wp-block-group .wp-block-embed {
    margin: 0;
}

.sidebar .widget .wp-block-group ol li {
    padding-bottom: 0.625rem;
}

.wp-block-details summary {
 	font-weight: 600;
 	padding: 10px;
}

a.wc-block-grid__product-link {
    text-decoration: none;
}

.wp-block-latest-posts__post-author {
    font-size: 1.7rem;
    font-weight: 600;
}

.wp-block-cover.has-background-dim-60.has-background-dim .wp-block-cover-text a:hover {
    color: inherit;
}

.sidebar .widget .wp-block-group .wp-block-cover,
.sidebar .widget .wp-block-group .wp-block-separator {
  margin-bottom: 0rem;
}

.wp-block-quote .wp-block-search {
	padding-bottom: 5px;
}

.gallery:after {
	display: table;
	content: "";
	clear: both;
}

.wc-block-mini-cart__icon,
 	.wc-block-mini-cart__badge {
 	       color: inherit;
}

.sidebar .widget .wp-block-pullquote cite {
    z-index: 1;
}

.sidebar .widget .wp-block-group .is-nowrap {
	margin: 1.563rem 1.000rem 1.563rem;
}

.wp-block-post-title a {
    text-decoration: none;
}

.wp-block-details summary {
    font-weight: 600;
}
   
.wp-block-group.has-black-border-color {
    border-color: #333 !important;
}   

.widget .wp-block-group .wp-block-preformatted a {
    color: inherit;
}

.wp-block-woocommerce-single-product .wp-block-post-title a {
    text-decoration: none;
}

.wc-block-grid__products .wc-block-components-product-sale-badge.wc-block-grid__product-onsale {
    letter-spacing: 0.2px;
    border: none;
}

.footer-sidebar .widget .wp-block-group .wp-block-image .wp-element-caption a {
    color:inherit;
}

.wp-block-archives-list a {
    text-decoration: none;
}

.sidebar .widget .wp-block-group .is-nowrap p {
	padding: 0;
}

.sidebar .widget.widget_block .wp-block-group ul.wp-block-latest-posts__list {
    margin-left: 0;
}

blockquote:last-child { 
	margin-bottom: 0; 
}

.sidebar .widget .wp-block-group .wp-block-latest-comments__comment-meta {
	font-weight: 600;
	line-height: 1.5;
}

.wc-block-grid__product-price.price ins {
    font-weight: bold;
}

.wc-block-components-product-title a.wc-block-components-product-name:hover,
.wc-block-components-product-title a.wc-block-components-product-name:focus {
	color: inherit;
}

.wc-block-grid__products .wc-block-components-product-sale-badge.wc-block-grid__product-onsale {
	font-size: 12px;
	letter-spacing: 0.2px;
	border: none;
}

.wc-block-components-product-title a.wc-block-components-product-name {
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
}

.wp-block-code.has-text-color code {
    color: inherit;
}

.wc-block-components-product-title a.wc-block-components-product-name:hover,
.wc-block-components-product-title a.wc-block-components-product-name:focus {
	color: inherit;
}

.wc-block-grid__products .wc-block-components-product-button__button {
    border-radius: 0;
}

.wp-block-search .wp-block-search__button {
	border-radius: 0.5rem;
}

.widget .wp-block-heading:before {
	left: 0;
	top: 0;
}

.wp-block-details summary {
    font-weight: 600;
    padding: 10px;
}

div.wc-block-components-sidebar-layout.wc-block-cart .wc-block-cart__totals-title {
	font-weight: 700;
	font-size: 24px;
}

.wc-block-components-product-title a.wc-block-components-product-name {
	font-size: 16px;
	font-weight: 700;
	text-transform: capitalize;
	margin-bottom: 10px;
	text-decoration: none;
}

.wc-block-components-checkout-place-order-button{
	background: inherit;
}

.wc-block-components-totals-item {
	font-weight: 700;
}

.widget .wp-block-social-links {
	margin-bottom: 0;
}

ol.wp-block-latest-comments{
	padding-left: 0px;
}

.wp-block-latest-comments article{
	margin-bottom: 0px;
}

.wp-block-button.is-style-outline .wp-block-button__link {
    background: transparent;
}

.sidebar .widget .wp-block-group .wp-block-button .wp-block-button__link {
	color: #fff;
}

.sidebar .widget .wp-block-group .wp-block-media-text .wp-block-media-text__content a {
    color: inherit;
}

button.wp-block-search__button.wp-element-button:hover,
button.wp-block-search__button.wp-element-button:focus{
    border: 2px solid;
}

div.wc-block-components-sidebar-layout.wc-block-cart .wc-block-cart__totals-title {
	font-weight: 700;
}

.button.wp-block-search__button.wp-element-button:hover,
.button.wp-block-search__button.wp-element-button:focus{
	text-decoration: none;
}

.wc-block-components-totals-coupon__content button.components-button {
    border-radius: 4px;
}

.wp-block-query-pagination {
	margin-bottom: 1.5rem;
}

.wp-block-code code img {
	padding: 10px;
}

.wp-block-image figcaption {
	text-align: center;
}

.wp-block-latest-posts__list .wp-block-latest-posts__post-author,
.wp-block-latest-posts__list .wp-block-latest-posts__post-date {
	text-decoration: none;
}

.wp-block-code.has-text-color code {
	color: inherit;
}

.wc-block-components-checkout-place-order-button {
	color: inherit;
}

.wc-block-cart-items td {
	color: inherit;
}

.wp-block-woocommerce-customer-account a .icon {
    color: inherit;
}

.wc-block-components-totals-coupon__content button.components-button {
    border-radius: 0;
}

.wc-block-cart__submit-container .wc-block-cart__submit-button.wc-block-components-button:not(.is-link).contained {
    background-color: inherit;
}

ul.wp-block-page-list a {
    text-decoration: none;
}

.woocommerce table.shop_attributes tr:nth-child(even) th {
	color: inherit;
}

.wc-block-featured-category__link .wp-block-button__link:hover {
	color: #fff;
}

.wc-block-featured-category__link .wp-block-button__link:focus {
	color: #fff;
}

.wc-block-components-product-price__value {
	font-weight: 800;
}

.wc-block-featured-product__price .woocommerce-Price-amount.amount {
	color: inherit;
}

.wp-block-post-author__avatar img {
    border-radius: 100%;
}

.woocommerce table.shop_attributes tr:nth-child(even) th {
	color: inherit;
}

.wp-block-post-comments-form .comment-reply-title {
    margin-bottom: 1.4rem;
}

.wp-block-query-pagination {
	margin-bottom: 1.5rem;
}

.wp-block-group .wp-block-details p {
	margin-top: 1rem;
    padding-top: 1rem;
}

.entry-content ul.wp-block-latest-posts {
	list-style: disc;
}

.woocommerce table.shop_attributes td {
    text-decoration: none;
}

table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
    text-decoration: none;
}

.wc-block-cart-items th {
	color: inherit;
}

.wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link {
    font-weight: bold;
}

.wp-block-latest-posts__post-author {
	font-size: 18px;
	font-weight: 600;
}

.post .wp-block-query-pagination {
    margin-bottom: 1.5rem;
}

.post .entry-content ul.wp-block-post-template li.wp-block-post .wp-block-post-date {
	padding-bottom: 1.2rem;
}

.wp-block-group .wp-block-preformatted a {
	color: #ff5d20;
}

.wc-block-mini-cart__empty-cart-wrapper .wc-block-mini-cart__shopping-button:focus {
	color: #fff;
}

.wc-block-mini-cart__empty-cart-wrapper .wc-block-mini-cart__shopping-button:active {
    color: #fff;
}

.wc-block-featured-product__price .woocommerce-Price-amount.amount {
    text-decoration: none;
}

.widget .wp-block-group pre.wp-block-preformatted {
    background: rgba(26, 26, 26, 0.8);
    color: #ddd;
}

.sidebar .widget .wp-block-file .wp-block-file__button {
    background-color: #1b8415;
}

.wp-block-social-links .wp-social-link:last-child {
    margin-bottom: 8px;
}

.wp-block-code.has-background code {
    background: inherit;
}

.widget .wc-block-grid__products a:before {
	display: none;
}

.wc-block-mini-cart__footer-checkout:focus {
    background-color: inherit;
    color: #fff;
}

.has-background.post-navigation-link-next,
.has-background.post-navigation-link-previous {
	padding: 0.20em 1.325em;
}

.wc-block-cart__submit-button,
.wc-block-cart__submit-button:hover,
.wc-block-cart__submit-button:focus {
	text-decoration: none;
}

.wc-block-mini-cart__badge {
    color: inherit;
}

.wc-block-components-product-sale-badge.wc-block-grid__product-onsale {
	line-height: 16px;
}

table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
	line-height: 16px;
}

table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
    text-decoration: none;
}

.wc-block-mini-cart__footer .wc-block-mini-cart__footer-actions a {
	font-size: 1.2rem;
	text-decoration: none;
}

.wc-block-mini-cart__footer .wc-block-mini-cart__footer-actions a:hover {
	text-decoration: underline;
}

.wc-block-mini-cart__badge {
    text-decoration: none;
}

.wc-block-mini-cart__footer span.wc-block-components-totals-item__label {
	font-size: 16px;
	line-height: 20px;
}

.wp-block-latest-comments.has-background {
    padding: 10px;
}

.wp-block-file.has-background {
	padding: 0.5rem;
}

.wp-block-file a {
	text-decoration: none;
}

.wc-block-cart-item__remove-link {
	text-decoration: none !important;
}

.wc-block-cart-item__quantity {
	text-decoration: none !important;
}

a.wp-block-latest-posts__post-title {
    text-decoration: none;
}

.sidebar .wp-block-code {
	padding: 1.8rem;
}

.wp-block-latest-comments__comment a {
	text-decoration: none;
}

.has-background.wp-block-post-author {
	padding: 1rem;
}

.has-background.wp-block-read-more {
	padding: 0.25em 1.375em;
}

.wc-block-grid__products .wc-block-components-product-sale-badge.wc-block-grid__product-onsale {
	line-height: 16px;
}

.wc-block-components-product-badge {
    font-size: 1rem !important;
}

.wp-block-latest-comments__comment a {
    line-height: 1.5;
}

.wc-block-components-totals-coupon-link {
	text-decoration: none;
}

.wc-block-components-order-summary-item__quantity {
	color: #fff;
}

.wc-block-grid__product-price.price ins {
    line-height: 18px;
}

.wc-block-grid__products .wc-block-components-product-button__button {
    line-height: 18px;
}

.wc-block-components-product-badge {
    text-decoration: none;
}

.wp-block-latest-comments__comment a {
    text-decoration: none;
}

.wp-block-file a {
	line-height: 18px;
}

.wp-block-file.has-background {
	margin: 0.5rem;
}

.wc-block-components-product-badge {
	line-height: 18px;
}

.wc-block-components-totals-coupon-link {
    line-height: 18px;
}

.wp-block-comment-date a {
	color: inherit;
}

.wp-block-comment-author-name a {
    color: inherit;
}

.widget .wp-block-heading:after {
	background: inherit;
}

.wp-block-comment-date span a {
    color: inherit;
}

.wc-block-grid__product-add-to-cart.wp-block-button .wp-block-button__link {
	text-decoration: none;
}

.wc-block-components-product-metadata .wc-block-components-product-metadata__description>p	{
	font-size: 1.2rem;
}

.wc-block-mini-cart__empty-cart-wrapper .wc-block-mini-cart__shopping-button:hover	{
	color: #fff;
}

.wc-block-mini-cart__empty-cart-wrapper .wc-block-mini-cart__shopping-button:focus	{
	color: #fff;
}

.widget.widget_shopping_cart span a:before	{
	display:none;
}

.wp-block-page-list a:hover,
.wp-block-page-list a:focus {
	color: inherit;
}

.wp-block-page-list a {
	text-decoration: none;
    font-weight: 600;
}

.wp-block-page-list {
	list-style: none;
}

.wp-block-social-links .wp-social-link:last-child {
	margin-bottom: 5px;
}

.wp-block-social-links .wp-social-link a {
	box-shadow: none;
}

.wp-block-calendar table th {
	font-weight: 600;
}

.wp-block-calendar a {
	text-decoration: none;
	box-shadow: none;
}

.widget .wp-block-read-more {
	font-weight: 500;
}

.footer-sidebar .widget .wp-block-group .wp-block-quote cite a {
	color: inherit;
}

.entry-content blockquote cite a:hover,
.entry-content blockquote cite a:focus {
	text-decoration: underline;
}

.widget .wp-block-group ul li {
	padding-bottom: 14px;
}

.widget .wp-block-group ul li a {
	text-decoration: none;
}

.wp-block-archives {
	list-style: none;
}

.wp-block-list.has-background {
	padding: 1.25em 2.375em;
}

.wp-block-preformatted.has-background {
	padding: 1em;
}

.sidebar .widget .wp-block-group .wp-block-preformatted a {
	color: inherit;
}

.sidebar .widget .wp-block-group .is-vertical a {
	color: inherit;
}

.sidebar .widget.widget_block .wp-block-group p {
	padding: 0.78125rem 1.000rem 0.78125rem;
}

.footer-sidebar .widget.widget_block .wp-block-group p a {
	color: inherit;
}

.wp-block-page-list.has-background {
	padding: 1rem;
}

.wp-block-page-list p a {
	padding: 1rem;
}

.wp-block-post-author img {
    border-radius: 100%;
}

a.wp-block-button__link:focus {
	color: #fff;
	text-decoration: none;
}

.wp-block-latest-comments li a:not(:hover, :focus) {
	color: inherit;
}

.wc-block-components-product-sale-badge {
	text-decoration: none;
}

.post.grid-view-news-area ul.wp-block-rss {
	list-style: disc;
}

.widget .logged-in.wp-block-loginout a,
.widget .logged-out.wp-block-loginout a {
	color: inherit;
}

.post .wp-block-archives li {
	padding-bottom: 0.625rem;
}

.widget .wp-block-embed .wp-element-caption a {
	color: inherit;
}

.wp-block-navigation .wp-block-navigation-item__content:hover,
.wp-block-navigation .wp-block-navigation-item__content:focus {
	text-decoration: none;
}

.sidebar .widget .textwidget a span{
	color: inherit;
}

.wp-block-file .wp-block-file__button {
   text-decoration: none;
   border: none;
}

select:focus,
.form-control:focus {
	border-color: rgb(255, 33, 79);
	box-shadow: 0 0 5px rgba(255, 33, 79, 1);
}

.wp-calendar-nav .wp-calendar-nav-prev > a:hover,
.wp-calendar-nav .wp-calendar-nav-next > a:hover,
.wp-calendar-nav .wp-calendar-nav-prev > a:focus,
.wp-calendar-nav .wp-calendar-nav-next > a:focus {
	text-decoration: none;
}

.input-group > .form-control:focus,
.input-group > .custom-select:focus,
.input-group > .custom-file:focus {
	z-index: 0;
}

.sidebar .widget .wp-block-group .wp-block-embed {
	margin: 0;
}

table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
 text-decoration: none !important;
}

.footer-sidebar .widget .wp-block-group .wp-block-verse {
 	    background: #202020;
 	    color: #cccccc;
}

.widget .wp-block-quote {
	color: inherit;
}

.sidebar .widget .wp-block-group .wp-block-preformatted a {
	text-decoration: underline;
}

.footer-sidebar .widget .wp-block-group .is-vertical a {
	color: inherit;
}

.entry-content ul.wp-block-post-template li.wp-block-post:hover {
	box-shadow: none;
}

.entry-content ul.wp-block-post-template {
	margin-left: 0;
	padding-left: 0;
}

.wp-block-image .alignleft figcaption {   
	text-align: left; 
}

.wp-block-button.is-style-outline a.wp-block-button__link {
    color: inherit;
}

.wp-block-button.is-style-outline a.wp-block-button__link {
 	border-color: inherit;
}

.wp-block-button.is-style-outline a.wp-block-button__link {
 	background: transparent;
}

.wp-block-group .wp-block-details p {
	margin-top: 1rem;
	padding-top: 1rem;
}

table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
    text-decoration: none;
}

.wp-block-file a {
	text-decoration: none;
}

.wp-block-latest-comments.has-background {
	padding: 1rem;
}

.sidebar .widget .wp-block-accordion-heading .wp-block-accordion-heading__toggle:focus {
        border: 0px solid transparent;
        background-color: transparent;
        color: #333333;
}

.sidebar .widget .wp-block-file .wp-block-file__button {
	background-color: #ec1c24;
}

.footer-sidebar .widget .wp-block-media-text .wp-block-media-text__content a {
	color: #ff214f;
}

a.wp-block-latest-posts__post-title:hover,
a.wp-block-latest-posts__post-title:focus {
 	        color: inherit;
}

.wc-block-components-sidebar-layout.wc-block-cart .wc-block-cart__totals-title {
	font-weight: 700;
}

.wc-block-components-sidebar-layout.wc-block-cart .wc-block-cart__totals-title a {
    font-weight: 700;
}

.woocommerce .summary .product_meta>span a {
	text-decoration: none;
}

.footer-sidebar .widget .wp-block-accordion-heading__toggle-icon {
	display: flex;
	border: 0 none;
	margin: 0;
}

.footer-sidebar .widget .wp-block-accordion-heading .wp-block-accordion-heading__toggle {
	    border: 0px solid transparent;
 	    background-color: transparent;
}

.wc-block-components-formatted-money-amount {
	    font-weight: 700;
}

.woocommerce .summary .product_meta>span a {
   text-decoration: none;
}

.accordion-section .button-secondary:hover,
.wp-core-ui .accordion-section .button-secondary:focus {
   border: 1px solid #fff;
   color: #fff;
}

table.wc-block-cart-items .wc-block-cart-items__row .wc-block-cart-item__quantity .wc-block-cart-item__remove-link {
    font-weight: 600;
}

.wp-block-jetpack-tiled-gallery {
	border-radius: 16px;
	overflow: hidden;
	margin-block: 2rem;
}

.wc-block-components-totals-footer-item .wc-block-components-totals-item__label,
 .wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
	font-weight: 600;
}

.wp-block-woocommerce-customer-account a:focus {
    text-decoration: underline !important;
}

.wp-block-list li a:not(:hover):not(:focus) {
	text-decoration: none;
}

.wp-block-search.wp-block-search__button-only .wp-block-search__button {
    background-color: inherit;
}

/* ===========================================================
   Barra de breadcrumb da página de produto (iog_product_breadcrumb
   em functions.php). Sem o título grande, a altura mínima padrão
   do tema (200px, vinda do Personalizar > Page Breadcrumb) ficaria
   vazia — reduzimos e trocamos o fundo bege/pêssego padrão por um
   azul suave, mais alinhado com o resto da identidade visual.
   =========================================================== */

#breadcrumb-section.breadcrumb-area-product {
    background: #e8eef7;
}

#breadcrumb-section.breadcrumb-area-product::before {
    display: none;
}

#breadcrumb-section.breadcrumb-area-product .breadcrumb-content {
    min-height: auto;
    padding: 18px 0;
    align-items: center;
}

#breadcrumb-section.breadcrumb-area-product .breadcrumb-list li {
    color: var(--bs-secondary);
    font-size: 15px;
}

/* ===========================================================
   Rodapé — remove as bordas internas (caixa ao redor de tudo +
   divisória entre colunas) e reduz o espaçamento, que estava
   exagerado (50px de padding por bloco, 45px abaixo de cada
   título, 30px entre linhas de contato).
   =========================================================== */

.footer-content .footer-widgets,
.footer-content .footer-widgets > .row > .col-lg-4,
.footer-content .footer-widgets .row > .col-lg-4 > * {
    border: none;
}

.footer-content .footer-widgets > .row > .col-12 > * {
    padding: 22px 24px;
}

.footer-content .footer-widgets .row > .col-lg-4 > .widget .widget-title {
    margin-bottom: 14px;
}

.footer-section .widget .widget-title {
    margin-bottom: 12px;
}

.footer-content .footer-widgets .contact-area {
    margin-bottom: 12px;
}

.footer-content .footer-widgets .widget ul li {
    margin-bottom: 6px;
}

.footer-content .footer-widgets .widget ul li:last-child {
    margin-bottom: 0;
}

/* ===========================================================
   Badge de quantidade no ícone do carrinho: é o contador de itens
   do WooCommerce (mostra "0" quando o carrinho está vazio, por
   isso parecia só uma bolinha sem sentido). Escondemos ele quando
   o carrinho está vazio e mostramos de novo assim que um item é
   adicionado, sem precisar recarregar a página.
   =========================================================== */

.cart-count.iog-empty {
    display: none;
}

/* ===========================================================
   Barra "above-header" (redes sociais + área de widget vazia)
   removida — sem o aviso de widget e com os ícones sociais como
   único conteúdo, essa faixa inteira parou de ter função própria.
   Os ícones de rede social ficam melhor no rodapé, perto do
   endereço/telefone/e-mail (Aparência > Widgets > área do rodapé
   > bloco "Ícones de redes sociais", nativo do WordPress).
   =========================================================== */

#above-header {
    display: none !important;
}

/* ===========================================================
   Submenu do "Procurar categorias" (ex: Consoles > Playstation 4 /
   Switch) abria para a direita (left: 100%, regra original do
   tema em meanmenu.css) e vazava pra fora da caixa. Passa a abrir
   para a esquerda.
   =========================================================== */

.product-category-menus-list .dropdown-menu {
    left: auto;
    right: 100%;
}

/* ===========================================================
   Overlay do banner principal (hero slider). Primeira tentativa
   usava a <div class="slider-overlay">, mas ela é filha da SEÇÃO
   inteira do slider — que tem 45px de padding embaixo e é mais
   larga que a imagem visível — por isso o gradiente vazava pra
   baixo e pros lados da foto. Conferido ao vivo: ".home-slider-
   info-wrap" bate pixel a pixel com a imagem de cada slide, então
   o gradiente vai nela (via ::before) em vez da div original, que
   fica desativada.
   =========================================================== */

.slider-overlay {
    display: none;
}

.home-slider-info-wrap {
    position: relative;
}

/* ::after (não ::before) de propósito: dentro do mesmo grupo de
   empilhamento (z-index negativo, atrás do texto normal), o elemento
   que vem depois na árvore desenha por cima — e a <img> é um filho
   real entre o ::before e o ::after. Usar ::after garante que o
   degradê fique acima da imagem (z-index -1 também) sem precisar
   mexer no z-index do texto, que tem um left/top:50% desativado
   hoje e quebraria o centro do texto se ganhasse position:relative. */
.home-slider-info-wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(0,0,0,.48) 0%, rgba(0,0,0,.48) 40%, rgba(0,0,0,0) 70%);
}

/* ===========================================================
   Foto de fundo do rodapé: o Personalizador gera a posição como
   "center center" (via inc/dynamic_style.php, injetado em <style>
   inline), cortando a parte de cima da foto — as cabeças da foto
   da família ficavam fora. Sobrescrevemos só a posição, mantendo
   imagem/opacidade/blend-mode que já vêm daquele CSS dinâmico.
   =========================================================== */

.footer-section {
    background-position: center top !important;
}

/* ===========================================================
   Seção "Frete promocional / Envio rápido / Pagamento seguro /
   Garantia": 45px de padding em cima e embaixo (medido ao vivo),
   deixando muito espaço vazio entre o banner e os cards de
   produto. Reduzido em ~80%.
   =========================================================== */

.infoservice-section.st-py-default {
    padding: 8px 0;
}

/* ===========================================================
   Ícone de casa antes do primeiro item do menu principal ("Home").
   Como é um menu montado no wp-admin (Aparência > Menus), não dá
   pra amarrar num ID fixo — assume que "Home" é sempre o primeiro
   item. Se um dia mudar a ordem do menu, este ícone acompanha
   o que estiver em primeiro, não necessariamente o "Home".

   Colocado como ::before do próprio <a> (não do <li>) com position:
   absolute — dentro de um <a> com display:grid, um ::before normal
   vira "item de grid" e pula de linha (era o bug de antes); como
   absolute tira o elemento do fluxo do grid, ele fica posicionado
   certinho E dentro da área clicável do link (resolve o pedido de
   o ícone também ser parte do link).
   =========================================================== */

.navbar-area .main-menu > li:first-child > a {
    position: relative;
    padding-left: 24px !important;
}

.navbar-area .main-menu > li:first-child > a::before {
    content: "\f015";
    font-family: var(--bs-font-awesome);
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    /* Antes era fixo em var(--bs-primary) (dourado sempre) — por isso
       ficava laranja mesmo fora da Home. Com "inherit", acompanha a
       cor que o próprio link já tem (escura parada, dourada ativo/hover). */
    color: inherit;
}

/* Fonte do menu principal um pouco maior (Home / Produtos / Minha conta). */
.navbar-area .main-menu > li > a {
    font-size: 18px;
}

/* ===========================================================
   Botão "Categorias" — a altura vinha só do line-height (60px),
   deixando o botão muito grosso e colado no banner. Reduzido, com
   uma margem embaixo pra dar respiro.
   =========================================================== */

.product-category-btn {
    line-height: 38px;
    font-size: 16px;
    padding: 0 18px;
}

.product-category-btn i {
    font-size: 17px;
}

.product-category-browse {
    margin-bottom: 12px;
}

/* ===========================================================
   Menu "Categorias": abertura instantânea, sem animação.
   Antes usava jQuery .slideDown(700) (quase 1s) SOMADO a uma
   animação escalonada item-por-item (--delay-in/--delay-out,
   setados via JS por elemento, até 0,1s de atraso por item —
   um item podia só começar a aparecer 700ms+ depois do clique).
   Passar o mouse nesse intervalo travava o efeito a meio caminho
   (o "esmaecido" que aparecia). Em vez de só acelerar, eliminamos
   a janela de tempo: a lista aparece de uma vez.
   =========================================================== */

.product-category-menus .product-category-menus-list {
    height: auto !important;
    overflow: visible !important;
}

.product-category-menus-list .main-menu > li,
.product-category-menus-list .main-menu > li > a {
    transition: none !important;
    transform: none !important;
}

/* ===========================================================
   Menu principal (Home / Produtos / Minha conta) e o submenu de
   categorias (Consoles > Playstation 4 / Switch): as transições
   de hover estavam em 0.35s. Reduzidas pra uma resposta bem mais
   imediata.
   =========================================================== */

.main-navbar .dropdown-menu,
.main-navbar .main-menu .menu-item:hover > .dropdown-menu,
.main-navbar .main-menu .menu-item.focus > .dropdown-menu,
.product-category-menus-list .dropdown-menu {
    transition-duration: .12s !important;
}

/* ===========================================================
   Zoom da imagem do produto ao passar o mouse (cards da loja):
   estava em 1.5s (bem lento), reduzido pela metade.
   =========================================================== */

.woocommerce ul.products li.product .product-img a img {
    transition-duration: .75s !important;
}

/* ===========================================================
   A camada escura semitransparente que gira/desliza por cima da
   imagem do produto no hover (.product-img .info) — separada do
   zoom da imagem. Era .35s de transição + .2s de atraso; reduzido
   pela metade.
   =========================================================== */

.product-img .info {
    transition-duration: .175s !important;
}

.product-single:hover .info {
    transition-delay: .1s !important;
}

/* ===========================================================
   Cartões laterais do banner (Apple Watch / Headphones / Outlet
   Imperial etc.). O texto usa nossa cor escura (--bs-secondary)
   fixa, sem nenhum fundo próprio — funcionava por coincidência
   nos cartões com imagem clara, mas ficava ilegível em fotos
   escuras/cheias de detalhe. Em vez de depender da imagem, damos
   um fundo claro sólido ao texto (opção 2 sugerida) e reduzimos
   um pouco o tamanho pra ficar mais compacto.
   =========================================================== */

.slider-info .slider-info-content {
    background: rgba(255, 255, 255, .88);
    display: inline-block;
    padding: 10px 14px;
    border-radius: 6px;
}

.slider-info .slide-text-title,
.slider-info .slide-text-description {
    font-size: 17px;
}

/* ===========================================================
   WOW.js (animação de entrada ao rolar a página) não dispara de
   imediato pra blocos que já aparecem perto do topo — eles ficam
   com opacity:0 e deslocados (translateY) até o usuário rolar a
   página, o que parece um espaço vazio enorme (foi a causa do
   "rodapé sumido" e agora dessa margem grande antes dos selos de
   confiança). Em vez de corrigir seção por seção, desativamos a
   animação de entrada no site inteiro: os blocos aparecem direto
   no estado final, sem esse efeito de fade/deslocamento.
   =========================================================== */

.wow {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

/* ===========================================================
   Espaço antes de "Em alta na Império / Mais vendidos": 45px em
   cima e embaixo, reduzido em 40%.
   =========================================================== */

.popular-products-home.st-py-default {
    padding: 27px 0;
}

/* ===========================================================
   Ajustes finos no fundo branco dos cartões laterais do banner
   (Apple Watch / Headphones / Outlet Imperial): mais transparência,
   e botão menor, já que o cartão é bem mais compacto que o banner
   principal (o botão herdava o tamanho padrão do site).
   =========================================================== */

.slider-info .slider-info-content {
    background: rgba(255, 255, 255, .8);
}

.slider-info .slide-text-btn {
    padding: 6px 14px;
    font-size: 13px;
}

/* ===========================================================
   Cartões de produto de mesmo tamanho nos carrosséis (Em alta na
   Império, Mais vendidos etc). O carrossel usa Owl Carousel com
   "autoHeight" — a fileira cresce até a altura do cartão mais alto,
   mas cada cartão individual não é esticado pra preencher esse
   espaço, ficando alinhado só por cima (por isso a diferença de
   altura visível: título/descrição/preço com tamanhos variados).
   Com flexbox do .owl-stage até o conteúdo do produto, cada cartão
   estica pra ocupar 100% da fileira e o botão "Adicionar ao
   carrinho" fica sempre na mesma posição, na base do cartão.
   =========================================================== */

.owl-carousel.products .owl-stage {
    display: flex;
}

.owl-carousel.products .owl-item {
    height: auto;
    display: flex;
}

.owl-carousel.products .owl-item > li.product {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* O WooCommerce injeta um <div class="product"> entre o <li> e o
   .product-single que não tinha entrado na corrente flex — sem ele
   esticar também (flex: 1 1 auto), o .product-single ficava do
   tamanho do próprio conteúdo mesmo com o <li> já na altura certa. */
.owl-carousel.products .owl-item > li.product > .product {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.owl-carousel.products .owl-item .product-single {
    width: 100%;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.owl-carousel.products .owl-item .product-content-outer {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.owl-carousel.products .owl-item .product-content {
    flex: 1 1 auto;
}

/* ===========================================================
   Banners da seção "Banner Info" (Frontpage Sections) sempre com
   a mesma altura, acompanhando o maior dos dois. A coluna
   Bootstrap (.col-lg-6 dentro de .row) já iguala a altura das duas
   colunas — só faltava o cartão (.bannerinfo) preencher 100% dela,
   em vez de só usar o min-height fixo (250px) e ficar do tamanho
   do próprio texto.
   =========================================================== */

#bannerinfo-section .bannerinfo {
    height: 100%;
}

/* ===========================================================
   Rodapé — colunas "Categorias" (lista em duas colunas) e
   "Segurança" (selos), ao lado de "Loja física". Marcação em
   functions.php (iog_footer_categories_and_badges). Os selos são
   imagens (placeholders em assets/images/selos/) ou blocos de
   Imagem da área de widgets "Rodapé — Selos de Segurança".
   =========================================================== */

.iog-footer-categories ul {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 2;
    column-gap: 28px;
}

.iog-footer-categories li {
    break-inside: avoid;
}

.iog-trust-badges {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 160px));
    gap: 12px;
}

.iog-trust-badge {
    display: block;
}

.iog-trust-badge img {
    display: block;
    width: 100%;
    height: auto;
}

/* ===========================================================
   Imagem do produto com altura fixa nos cards da loja. O tema só
   define "min-height: 268px" (um piso, não um teto) no container —
   uma capa de jogo em pé (retrato) esticava bem além disso, ficando
   maior que produtos com foto mais "quadrada"/deitada (ex: console).
   Trava a altura da caixa e encolhe a imagem proporcionalmente
   dentro dela (sem cortar e sem esticar).

   Bug encontrado depois (capas bem compridas, tipo Mario Kart):
   "max-height: 100%" não resolvia direito porque o container é
   flex com align-items:center — o mesmo problema que já tínhamos
   visto na imagem principal da página de produto. A imagem ficava
   mais alta que a caixa (cortada por baixo pelo overflow:hidden) e,
   com o zoom do hover (1.15x) em cima disso, também estourava a
   largura da caixa. Troca pro mesmo truque de position:absolute
   que resolveu na página de produto.
   =========================================================== */

.woocommerce ul.products li.product .product-single .product-img {
    height: 268px;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

.woocommerce ul.products li.product .product-img a img:not(.info) {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* ===========================================================
   Faixa de título das páginas internas (Carrinho, Loja, categorias,
   Minha conta etc — tudo que usa #breadcrumb-section fora da home
   e fora de produto). O tema já usa background-blend-mode:multiply
   + uma animação de deslize (@keyframes slide) no padrão de fundo —
   isso é o "padrão e movimento" que já existia e ficou bom; só a
   COR (creme #fef7f2) não combinava com o site. Trocamos só a cor
   base, mantendo padrão e animação como estavam.
   =========================================================== */

.breadcrumb-area {
    background-color: var(--bs-secondary) !important;
    /* O min-height:200px do tema estava aqui, na faixa INTEIRA, não só
       no conteúdo — por isso reduzir só o .breadcrumb-content não bastava:
       a faixa continuava com 200px de altura, com o conteúdo (68px)
       flutuando dentro dela e sobrando um vão vazio embaixo. */
    min-height: 0 !important;
}

.breadcrumb-area::before {
    background-color: var(--bs-secondary) !important;
}

/* O ícone de "Home" no breadcrumb usava a cor escura padrão do texto
   (quase preta) — invisível/apagado em cima do fundo escuro da faixa. */
.breadcrumb-list i.fa-home {
    color: #fff !important;
}

/* Altura: era 200px de min-height (bem mais que o necessário) — o
   título (36px) mais um respiro decente cabe em bem menos.
   Depois reduzimos ainda mais: com o título a 32px (ver abaixo) e
   este padding a 18px em cima/baixo, a faixa fecha em ~74px de
   altura total, mais parecida com o restante das páginas. */
.breadcrumb-content {
    min-height: 0 !important;
    padding: 18px 30px !important;
    color: #fff;
}

.breadcrumb-heading h3 {
    color: #fff;
    font-size: 32px !important;
}

.breadcrumb-list li {
    color: var(--bs-primary);
}

.breadcrumb-list li a {
    color: #fff;
}

.breadcrumb-list li a:hover,
.breadcrumb-list li a:focus {
    color: var(--bs-primary);
}

/* Último item da trilha (seção atual) em dourado, nos breadcrumbs de
   produto e categoria — nas demais páginas ele já é texto dourado. */
.breadcrumb-list li a.iog-current {
    color: var(--bs-primary);
}

.breadcrumb-list li a.iog-current:hover,
.breadcrumb-list li a.iog-current:focus {
    text-decoration: underline;
}

/* ===========================================================
   Espaço enorme (90px em cima E embaixo) ao redor da listagem de
   produtos (Loja, categorias) — sobrava tanto entre o header/faixa
   quanto antes do rodapé.
   =========================================================== */

.post-section.st-py-full {
    padding: 30px 0;
}

/* ===========================================================
   Quantidade cortada no carrinho: a causa real (achada testando ao
   vivo) é uma regra genérica de campo de formulário do tema, que
   também atinge esse input ("padding: 0.65rem 1.25rem") — 1.25rem
   (20px) de respiro DE CADA LADO numa caixa de só 45px de largura
   não deixava quase nenhum espaço pro dígito, então até "1" já
   ficava espremido e 2 dígitos cortavam de vez. line-height/overflow
   sozinhos (tentativa anterior) não resolviam porque o problema era
   a caixa de conteúdo ter ficado pequena demais, não recorte.
   =========================================================== */

.wc-block-components-quantity-selector__input {
    line-height: normal !important;
    overflow: visible !important;
    padding: 0 2px !important;
    min-width: 30px !important;
}

/* ===========================================================
   Botão "Finalizar Compra" do carrinho (bloco nativo do WooCommerce):
   vinha com texto branco em fundo transparente — invisível sobre
   fundo branco da página. O tema clássico não tem estilo pra esse
   bloco novo, então ele usa o padrão do WooCommerce (que espera
   outro tema). Aplicamos as cores do site.
   =========================================================== */

.wc-block-cart__submit-button {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
}

.wc-block-cart__submit-button:hover,
.wc-block-cart__submit-button:focus {
    background-color: var(--bs-primary-dark) !important;
    color: #fff !important;
}

/* ===========================================================
   Reordena o carrinho: "Adicionar cupons" passa a aparecer DEPOIS
   de "Total estimado", em vez de antes.
   =========================================================== */

.wp-block-woocommerce-cart-order-summary-block {
    display: flex;
    flex-direction: column;
}

.wp-block-woocommerce-cart-order-summary-coupon-form-block {
    order: 3;
}

/* ===========================================================
   Ordenação da loja (Ordenar por popularidade): o tema tem uma
   regra genérica "select:focus" com borda/glow rosa (leftover de
   algum framework antigo) que disparava ao clicar em QUALQUER
   select do site, inclusive esse. Trocado pela cor do site.
   =========================================================== */

select:focus,
.form-control:focus {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 5px rgba(193, 137, 15, .6) !important;
}

/* "Linha quebrada" ao lado da ordenação: ".woocommerce-result-count"
   tinha border-bottom e ".woocommerce-ordering" não — como são dois
   blocos flutuantes lado a lado com alturas diferentes (50px vs
   52px), a borda de um "pulava" em relação ao outro, parecendo uma
   linha quebrada. Iguala a borda e a altura dos dois. */
.woocommerce-ordering,
.woocommerce-ordering select {
    height: 52px;
    border-bottom: 1px solid #e8e8e8;
}

/* ===========================================================
   "Secure Payment Methods" na página de produto: não veio de nada
   que fizemos — é de um plugin à parte (id="convers-trust-badges-
   product_page", visto no HTML). Escondido a pedido, até você
   decidir o que colocar ali no lugar.
   =========================================================== */

#convers-trust-badges-product_page {
    display: none;
}

/* ===========================================================
   Textos roxos no slider/banners da home: a classe ".text-primary"
   é usada pelo TEMA (cor dourada, via var(--bs-primary)) mas o
   plugin "trust-badges" (o mesmo do "Secure Payment Methods")
   também define uma ".text-primary" global, própria dele, em roxo
   (hsl(var(--primary)) do próprio plugin) — e como o CSS dele
   carrega depois do bootstrap do tema, ganha a disputa em TODO o
   site, não só onde o plugin aparece. Não foi mudança nossa nem
   bug do tema: é conflito de nomes de classe entre tema e plugin.
   Devolve ".text-primary" para a cor do site.
   =========================================================== */

.text-primary {
    color: var(--bs-primary) !important;
}

/* ===========================================================
   Página de produto: a imagem principal da galeria só tinha
   max-height na "caixa" (li), mas não na <img> — então uma capa
   retrato (ex.: 600x632) era escalada pela LARGURA e acabava mais
   alta que a caixa, estourando por baixo.

   Duas complicações descobertas testando ao vivo:
   1. O FlexSlider (script da própria galeria do WooCommerce) seta
      "display:block" via JS *inline* em cada slide (<li>) — isso
      vence qualquer "display:flex" nosso que não tenha !important,
      então o !important aqui não é excesso de zelo, é necessário.
   2. Com max-height/height em porcentagem, o navegador ignorava o
      limite de altura mesmo com a caixa já sendo flex (a imagem
      continuava esticando pela largura). Usar position:absolute
      dentro da caixa (que já vem com position:relative do próprio
      FlexSlider) resolve de forma confiável.
   =========================================================== */

.woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(1) {
    height: 440px !important;
    overflow: hidden !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.woocommerce div.product div.images .woocommerce-product-gallery__image:nth-child(1) img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    margin: auto !important;
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

/* ===========================================================
   Miniaturas da galeria (abaixo da imagem principal): o FlexSlider
   gera essa lista (.flex-control-thumbs) e força cada <img> a usar
   sua própria largura/altura NATURAL via atributo (onload="this.width
   = this.naturalWidth..."), ignorando completamente o width:25% que
   o tema já definia pro <li>. Resultado: cada miniatura com um
   tamanho diferente, desalinhadas ("encavaladas").

   Duas tentativas anteriores (altura fixa + "cover", depois +
   "contain" com fundo cinza) ficaram estranhas — "contain" deixava
   barras cinzas nas miniaturas que não são quadradas. A saída
   correta: o WordPress já gera essas miniaturas em tamanho quadrado
   (100x100, recorte centralizado no servidor — confirmado via
   naturalWidth/naturalHeight). Bastava fazer a caixa também ser
   quadrada (aspect-ratio:1) — sem precisar de "contain" nem fundo
   nenhum, porque a imagem já é quadrada e preenche certinho.
   =========================================================== */

.flex-control-thumbs li {
    aspect-ratio: 1 / 1;
    height: auto !important;
    overflow: hidden !important;
}

.flex-control-thumbs li img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* ===========================================================
   Nome do produto e preço na página de produto: 18px/20px sem
   negrito é pouco pra informação mais importante da página.
   =========================================================== */

.product_title.entry-title {
    font-size: 28px !important;
    font-weight: 700 !important;
}

.summary .price {
    font-size: 26px !important;
    font-weight: 700 !important;
}

/* ===========================================================
   Colunas da página de produto: o tema divide 44% imagem / 56%
   texto — o texto começava bem antes do meio real da área de
   conteúdo (uns 75px à esquerda do centro, medido ao vivo), dando
   a impressão de que o quadro de informações estava "puxado" pra
   esquerda. Ajustado pra 50/50, alinhado com o padrão de duas
   colunas do resto do site.
   =========================================================== */

@media (min-width: 769px) {
    .woocommerce #content div.product div.images {
        width: 50% !important;
    }
    .woocommerce #content div.product div.summary {
        width: 50% !important;
    }
}

/* ===========================================================
   "Simulação de frete" na página de produto: o plugin de frete
   (Correios) injeta a calculadora DENTRO do <form class="cart">,
   e esse form tem "display:inline-block" no tema (pra ficar do
   lado de um botão de comparação que a loja não usa) — inline-block
   encolhe pro tamanho do conteúdo, então a calculadora + o resto
   do quadro de dados ficavam ocupando só ~245px de uma coluna de
   quase 700px, sobrando um vão vazio enorme à direita.
   =========================================================== */

.woocommerce div.product form.cart {
    display: block !important;
    width: 100% !important;
}

/* ===========================================================
   Grid de produtos do carrinho: título e preços (unitário e total)
   iguala pra 1rem; a descrição curta e o selo "Economize R$xx" (que
   estavam maiores que o título, 1.2rem e 1rem respectivamente)
   reduzem pra 0.8rem.
   =========================================================== */

.wc-block-components-product-name,
.wc-block-cart-item__prices .wc-block-components-product-price,
.wc-block-cart-item__total .wc-block-components-product-price__value {
    font-size: 1rem !important;
}

.wc-block-components-product-metadata__description p,
.wc-block-components-sale-badge {
    font-size: 0.8rem !important;
}

/* ===========================================================
   Simulador de frete do carrinho (plugin "shipping-simulator"):
   o container dele vem com max-width fixo em 360px no próprio
   plugin, então não acompanha a largura real da barra lateral —
   sobra espaço à direita e ele fica menor que o botão "Finalizar
   Compra" logo abaixo. Solto pra ocupar 100% da coluna, igual o
   botão.
   =========================================================== */

.wc-shipping-simulator-parent-container,
.wc-shipping-simulator-container-current-style,
.wc-shipping-simulator-input-button-group-current-style {
    width: 100% !important;
    max-width: 100% !important;
}

/* ===========================================================
   Botão "Consultar" do simulador de frete: dentro do grupo
   input+botão (flex), o botão tinha flex-shrink normal e acabava
   espremido pelo input, sobrando ~44px — o texto "CONSULTAR"
   quebrava em duas linhas. Fixa uma largura mínima de 178px pro
   botão não encolher. Vale tanto pro carrinho quanto pra página
   de produto (mesma classe do plugin shipping-simulator nos dois
   lugares).
   =========================================================== */

.wc-shipping-simulator-button-current-style {
    flex: 0 0 178px !important;
    width: 178px !important;
    white-space: nowrap !important;
}

/* ===========================================================
   "Via de entrega" no carrinho (ex.: "Retirada na loja"): estava
   em ~10px, ilegível perto do resto do texto do carrinho.
   =========================================================== */

.wc-block-components-totals-shipping__via {
    font-size: 0.9rem !important;
}

/* ===========================================================
   Valores em dinheiro do carrinho (preço/total dos itens e os
   totais da barra lateral) em verde — tom mais leve pro cliente
   na hora de ver o preço. Cor pedida explicitamente (#1e7532, mais
   escura que o --bs-success padrão do Bootstrap, que ficou claro
   demais).
   =========================================================== */

.wc-block-cart-item__prices .wc-block-components-product-price__value,
.wc-block-cart-item__total .wc-block-components-product-price__value,
.wc-block-components-totals-item__value {
    color: #1e7532 !important;
}

/* ===========================================================
   Campo de quantidade do carrinho muito alto (50px). O valor vem
   de uma regra genérica de formulário do tema (min-height:50px em
   todo input/select/textarea do site) — a mesma que já tinha
   invadido o padding desse campo antes. Dessa vez ela só cede com
   um seletor de especificidade maior (classe + [type=number]),
   um "!important" sozinho com a classe simples não bastou.
   =========================================================== */

.wc-block-components-quantity-selector,
input.wc-block-components-quantity-selector__input[type="number"],
button.wc-block-components-quantity-selector__button {
    min-height: 36px !important;
    height: 36px !important;
}

/* ===========================================================
   Cabeçalho da tabela do carrinho ("Produto" / "Total") em negrito.
   =========================================================== */

.wc-block-cart-items__header-image span,
.wc-block-cart-items__header-total span {
    font-weight: 700 !important;
}

/* ===========================================================
   Selo "Economize R$xx": era uma caixinha cinza sem graça pra uma
   informação boa pro cliente. Primeira versão usou o mesmo verde
   do preço, mas ficou confuso (os dois lados pareciam a mesma
   informação). Trocado para o dourado da marca — se destaca sem
   ser confundido com o preço.
   =========================================================== */

.wc-block-components-sale-badge {
    background-color: #fdf1dc !important;
    color: #96690b !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    border-radius: 999px !important;
    border: 1px solid var(--bs-primary) !important;
}

/* ===========================================================
   Loja e categorias de produto (/produtos, categoria-produto/*):
   o título ("Produtos", nome da categoria...) já aparece na faixa
   escura do breadcrumb — esse <h1> do WooCommerce era um segundo
   título repetido na área branca, sem necessidade.
   =========================================================== */

.woocommerce h1.page-title {
    display: none !important;
}

/* "Mostrando todos os X resultados": fonte grande demais e uma
   borda/caixa que não combinava com o resto da barra de ordenação.
   Também trocada a ordem com "Ordenar por": os dois vinham com
   float:right, e como o resultado é o primeiro no HTML, ele empurrava
   a ordenação pra esquerda dele — ficava "Ordenar" à esquerda e
   "Mostrando" à direita, ao contrário do pedido. Só o resultado muda
   pra float:left; a ordenação continua float:right (como já estava). */
.woocommerce p.woocommerce-result-count {
    border: none !important;
    font-size: 14px !important;
    float: left !important;
    margin: 0 !important;
}

/* ===========================================================
   Hover nos cards de produto (listagens): o tema tem DOIS efeitos
   sobrepostos — um zoom na imagem (".product-img a img:hover") e uma
   segunda cópia da mesma imagem (".info") que desliza na diagonal e
   gira 45deg por cima da primeira, tipo um leque se abrindo. Mantido
   só o zoom, um pouco mais acentuado (1.1 → 1.15); o "leque" (.info)
   é só uma imagem duplicada decorativa, sem função — escondida.
   =========================================================== */

.product-img .info {
    display: none !important;
}

.woocommerce ul.products li.product .product-single:hover .product-img a img,
.woocommerce ul.products li.product .product-single:focus-within .product-img a img {
    transform: scale(1.15) !important;
}

/* ===========================================================
   Cards de produto (loja, categorias, busca, relacionados e a grade
   "Em alta na Império" da home):
   1) Mesma altura por linha — o tema usava float, então cada card
      tinha a altura do próprio conteúdo. Trocamos a lista por flex
      (cards esticam até o mais alto da linha), o título reserva 2
      linhas (cresce até 3 se precisar) e o botão fica encostado no
      fundo do card. Antes reservava 3 linhas e sobrava um vazio
      entre título e preço.
      Na home só a grade "Em alta" entra (o carrossel já tem regra
      própria mais acima).
      Atenção ao seletor: em páginas do WooCommerce a classe
      .woocommerce está no próprio <body>, então "body ... .woocommerce
      ul.products" nunca casava — por isso usamos "ul.products" direto.
   2) Botão "Adicionar ao carrinho" em destaque: fundo na cor primária,
      texto branco e ícone de carrinho (Font Awesome f07a).
   =========================================================== */

body:not(.home) ul.products,
.popular-products-grid ul.products {
    display: flex !important;
    flex-wrap: wrap;
}

body:not(.home) ul.products::before,
body:not(.home) ul.products::after,
.popular-products-grid ul.products::before,
.popular-products-grid ul.products::after {
    display: none !important;
}

body:not(.home) ul.products li.product,
.popular-products-grid ul.products li.product {
    display: flex !important;
    float: none !important;
}

body:not(.home) ul.products li.product > .product,
.popular-products-grid ul.products li.product > .product {
    display: flex;
    width: 100%;
}

body:not(.home) ul.products li.product .product-single,
.popular-products-grid ul.products li.product .product-single {
    display: flex !important;
    flex-direction: column;
    width: 100%;
}

body:not(.home) ul.products li.product .product-content-outer,
.popular-products-grid ul.products li.product .product-content-outer {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

body:not(.home) ul.products li.product .product-content,
.popular-products-grid ul.products li.product .product-content {
    flex: 1 1 auto;
}

body:not(.home) ul.products li.product .product-content h3,
.popular-products-grid ul.products li.product .product-content h3 {
    line-height: 1.2 !important;
    min-height: 2.4em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
}

/* Botão em largura total, colado no fundo do card (loja/categorias). */
body:not(.home) ul.products li.product .product-action {
    margin: auto 0 0 !important;
    padding: 0 !important;
    border-top: none !important;
}

.woocommerce ul.products li.product .product-action a.button.add_to_cart_button {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box !important;
    width: 100%;
    margin: 0 !important;
    padding: 8px 20px !important;
    background: var(--bs-primary) !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    border-radius: 0 !important;
    transition: background-color .2s;
}

.woocommerce ul.products li.product .product-action a.button.add_to_cart_button::before {
    content: "\f07a";
    font-family: FontAwesome;
    font-size: 16px;
    font-weight: 400;
}

.woocommerce ul.products li.product .product-action a.button.add_to_cart_button:hover,
.woocommerce ul.products li.product .product-action a.button.add_to_cart_button:focus {
    background: var(--bs-secondary) !important;
    color: #fff !important;
}

/* ===========================================================
   Home: "Em alta na Império" em grade (2 linhas x 4 colunas, máx. 8
   produtos) no lugar do carrossel, e links de categoria à direita do
   título (.iog-heading-links, mesmo visual do filtro do carrossel).
   Marcação em functions.php (iog_render_product_section).
   =========================================================== */

.popular-products-grid ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin: 0;
    padding: 0;
}

.popular-products-grid ul.products li.product {
    width: auto !important;
    margin: 0 !important;
}

@media (max-width: 991px) {
    .popular-products-grid ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;
    }
}

.heading-right .iog-heading-links {
    max-width: 500px;
    overflow: hidden;
    overflow-x: auto;
    vertical-align: sub;
}

.heading-right .iog-heading-links a {
    color: #fff;
    display: inline-block;
    text-decoration: none;
    margin-left: 20px;
}

.heading-right .iog-heading-links a:first-child {
    margin-left: 0;
}

.heading-right .iog-heading-links a:hover,
.heading-right .iog-heading-links a:focus {
    color: var(--bs-primary);
}

/* Preço nos cards: o WooCommerce usa 0.857em (~13,7px); mínimo de 1rem.
   O preço antigo (riscado) fica em 1rem e o atual em 1.1rem. */
.woocommerce ul.products li.product .price {
    font-size: 1.1rem !important;
}

.woocommerce ul.products li.product .price del {
    font-size: 1rem !important;
}

/* ===========================================================
   Depois de "Adicionar ao carrinho" (AJAX), o WooCommerce põe um link
   "Ver carrinho" ao lado do botão (.added_to_cart) — como a área da
   ação é flex, os dois ficavam espremidos lado a lado, com o texto
   estourando. Agora o botão original some e o link ocupa o lugar dele
   (mesmo tamanho/posição, fundo escuro com ✓), sem esticar o card.
   =========================================================== */

.woocommerce ul.products li.product .product-action a.button.add_to_cart_button.added {
    display: none !important;
}

.woocommerce ul.products li.product .product-action a.added_to_cart {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box !important;
    width: 100%;
    margin: 0 !important;
    padding: 8px 20px !important;
    background: var(--bs-secondary) !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.7;
    border-radius: 0 !important;
    text-decoration: none !important;
    transition: background-color .2s;
}

.woocommerce ul.products li.product .product-action a.added_to_cart::before {
    content: "\f00c";
    font-family: FontAwesome;
    font-size: 16px;
    font-weight: 400;
}

.woocommerce ul.products li.product .product-action a.added_to_cart:hover,
.woocommerce ul.products li.product .product-action a.added_to_cart:focus {
    background: var(--bs-primary) !important;
}

/* ===========================================================
   Faixa superior do rodapé (CNPJ + Central de ajuda / Trocas e
   assistência / Fale conosco): o CNPJ ficava colado à esquerda e os
   três links colados à direita, com um buraco no meio. Os quatro itens
   agora se distribuem por igual na largura do container (as colunas
   do Bootstrap viram "display: contents", então cada item vira filho
   direto da linha flex), e quebram centralizados em telas menores.
   =========================================================== */

.footer-section .footer-top .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    gap: 14px 24px;
}

.footer-section .footer-top .row > [class*="col-"],
.footer-section .footer-top .widget-contact {
    display: contents;
}

.footer-section .footer-top .row .contact-area {
    margin: 0 !important;
}