/*
Theme Name: Evolury Commerce
Theme URI: https://evolury.com.br/
Author: Evolury
Author URI: https://evolury.com.br/
Description: Evolury Commerce — WooCommerce theme.
Version: 1.0
Template: riode
License URI: https://evolury.com.br
Tags: woocommerce, corporate, ecommerce, responsive, blue, black, green, white, light, dark, red, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, fixed-layout, responsive-layout, custom-menu, editor-style, featured-images, flexible-header, full-width-template, microformats, post-formats, rtl-language-support, sticky-post, theme-options, translation-ready, accessibility-ready
*/

/*************** ADD YOUR CUSTOM CSS HERE  ***************/


/*Ajuste espaçamento campo CEP página de carrinho de compras*/
.woocommerce-shipping-calculator .form-row-wide {
    margin-top: 1.5em;
}


/*Remove termo em inglês "PRICE" da página de desejos*/
.shop_table th.product-price span.nobr {
    display: none;
}


/*Tamanho dos botões na página meus desejos*/
#yith-wcwl-form .shop_table .product-add-to-cart .button {
    width: calc(17rem * var(--rio-typo-ratio,1));
}


/*Alinhamento ícones sociais e meus desejos na página do produto*/
@media (max-width: 575px) {
    .summary .social-icons {
        display: inline-flex;
    }
}


/*Alinhamento do botão comprar em telas pequenas*/
@media (max-width: 575px) {
    .summary .single_add_to_cart_button {
        margin-right: 0;
        padding: 0 2.8em;
    }
}


/*Tamanho do Swatch de variações na página do produto*/
.summary .product-variations>* {
    min-width: 5rem;
    height: 5rem;
}


/*Botão comprar em uppercase*/
.single_add_to_cart_button, .product-buy-now {
    text-transform: uppercase;
}


/*Ajuste bloco cep carrinho*/
.woocommerce-shipping-calculator .form-row-wide {
    margin-top: 1.5em;
}


/*Ajuste Join Chat Whatsapp mobile*/
@media (max-width: 575px) {
.joinchat--left .joinchat__button {
    bottom: 4em;
 }
}


/*Ajuste global da tabela de medidas no tab info*/
.riode-custom-tab-content {
    overflow: scroll;
}
.sizes-table {
    min-width: 130%;
}
@media (max-width: 767px) {
    .sizes-table {
        min-width: 200%;
    }
}
.sizes-table thead th, .sizes-table tbody th, .sizes-table tbody td {
	text-align: center;
}
.sizes-table { width: 100%; max-width: 100%; border-collapse: collapse; font-size: 14px; text-transform: uppercase; color: #21293c; } 
.sizes-table thead th { background: #f4f4f2; } 
.sizes-table tbody tr:nth-child(2n) > * { background: #ebebeb; } 
.sizes-table thead th { padding: 30px 0 30px 10px; font-weight: 600; } 
.sizes-table tbody td { padding: 12px 0 12px 10px; font-weight: bold; } 
@media (min-width: 576px) { 
  .sizes-table thead th:first-child, 
  .sizes-table tbody th { padding-left: 30px; } 
}


/*Centraliza bloco de produtos ao centro da vitrine e ao centro das páginas de categorias*/
.products .owl-item, .products .owl-carousel .owl-stage, .split-line .product-wrap {
	margin-bottom: 3rem !important;
    margin: 0 auto;
}

/*Ajuste das variações swatches sem estoque ou disable*/
.product-variations>.disabled {
    background-color: #e3e3e3 !important;
    border: 2px solid #f00!important;
}

/*Altura do bloco nome da categoria no bloco do produto nas vitrines e categorias*/
.product-cat {
    height: 10px;
}
.product-details .star-rating {
    height: 17px;
}

/*Ajuste tab informações adicionais*/
.woocommerce-tabs .shop_attributes {
    background-color: #eee;
}
.woocommerce-tabs .shop_attributes th {
    padding-left: 1rem;
}

/* Botão do WhtasApp na finalização do pedido via pix*/
     a.wcpix-whatsapp:hover {
       background-color: #037c20;
}
     a.wcpix-whatsapp {
      padding: 20px;
      background-color: #00bb2d;
      color: #fff;
      margin-left: 15px;
}

/* Travar scroll horizontal no mobile.
   Owl Carousel de produtos do Riode + clones de loop estouravam ~10px
   da viewport, e o html (default user-agent overflow: visible) permitia
   elastic-scroll lateral no iOS. overflow-x: clip não permite scroll
   programático nem rubber-band; cobre todos breakpoints. */
html,
body {
    overflow-x: clip;
}
.owl-carousel,
.elementor-image-carousel-wrapper,
.swiper {
    overflow: hidden;
}

/* SWATCHES de variação (Riode renderiza <button> sem texto e cor sem borda).
   - Cor: borda fina pra cor branca/clara não sumir em fundo branco.
   - Tamanho: o tema gera <button name="P" title="P"></button> vazio e o
     ::before nasce sem content. Pegar o título via attr(title). */
.product-variations.pa_cores button.color {
    border: 1px solid #d4d4d4;
}
.product-variations.pa_tamanhos button {
    color: #222;
}
.product-variations.pa_tamanhos button::before {
    content: attr(title);
    display: inline-block;
    font-size: 12px;
    line-height: 1;
}