/* =========================================
   CARRINHO — Widget (mini-cart) + Página /carrinho
   =========================================

   Override do tema pai (storely) sem tocar nos arquivos do pai.
   Cores da marca herdadas das variáveis em style.css (--bs-primary etc).
*/


/* =========================================
   1. WIDGET — Botão de fechar (ícone "×")
   =========================================
   O tema pai renderiza <a class="cart-close">CLOSE</a> (traduzido como
   "PERTO"). Escondemos o texto e mostramos um ícone de fechar (FontAwesome 4
   já carregado pelo pai). Vira um alvo de clique redondo e acessível.
*/
.cart-top .cart-close {
    font-size: 0;
    /* esconde o rótulo de texto */
    line-height: 1;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--bs-secondary);
    transition: background-color .2s ease, color .2s ease;
}

.cart-top .cart-close::before {
    font-family: "FontAwesome";
    content: "\f00d";
    /* fa-times */
    font-size: 17px;
}

.cart-top .cart-close:hover,
.cart-top .cart-close:focus {
    background-color: var(--bs-primary-light);
    color: var(--bs-primary-dark);
}


/* =========================================
   1b. WIDGET — Remove a animação de "quadrados" no hover dos botões
   =========================================
   CAUSA: o JS do tema (custom.js) injeta em TODO `.btn` um overlay
   `<div class="hover"><span>×5</span></div>`. No :hover, o CSS do pai
   (main.css .btn .hover span) anima a largura desses spans/quadrados de
   10px, criando o efeito estranho de quadradinhos sobre o botão.
   Como os botões do widget usam `.btn`, herdam o efeito. Escondemos o
   overlay dentro do carrinho. */
.cart-wrapper .hover,
.cart-modal .hover {
    display: none !important;
}


/* Bônus: o pai também aplica `outline:1px dotted; outline-offset:-2px` em
   button:hover/:focus. Removemos no hover e mantemos foco limpo só por
   teclado (acessível). */
.cart-main .cart-trigger:hover,
.cart-main .cart-trigger:focus,
.cart-modal button:hover,
.cart-modal button:focus,
.cart-modal a:hover,
.cart-modal a:focus {
    outline: none !important;
    outline-offset: 0 !important;
}

.cart-main .cart-trigger:focus-visible,
.cart-modal button:focus-visible,
.cart-modal a:focus-visible {
    outline: 2px solid var(--bs-primary) !important;
    outline-offset: 2px !important;
}


/* =========================================
   2. WIDGET — Modal compacto (sem espaço em branco)
   =========================================
   O pai força min-height:450px na .cart-container, criando um vão vazio
   quando há poucos produtos. Deixamos o modal abraçar o conteúdo e limitamos
   a altura da lista — carrinhos longos rolam internamente em vez de esticar.
*/
.cart-modal .cart-container {
    min-height: 0;
}

.cart-modal .cart-data {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.cart-modal .cart-body {
    max-height: 320px;
    /* rola quando há muitos itens */
}


/* =========================================
   3. WIDGET — Alinhamento dos botões do rodapé
   =========================================
   O pai aplica padding:0 25px no container dos botões, deixando-os mais
   estreitos que o subtotal e quebrando o alinhamento vertical. Removemos o
   recuo lateral para os botões acompanharem a largura do rodapé.
*/
.cart-ft-buttons-cont {
    padding-left: 0;
    padding-right: 0;
}

.cart-ft-btn {
    padding: 13px 18px;
    font-weight: 600;
    border-radius: 8px;
}


/* =========================================
   3b. WIDGET — Polimento dos itens
   ========================================= */

/* Thumbnail: tamanho consistente, cantos arredondados e borda sutil */
.cart-modal .cart-img-col img {
    width: 56px;
    height: 56px;
    object-fit: contain;
    border: 1px solid #eee;
    border-radius: 8px;
    background: #fff;
    padding: 3px;
}

/* Hover sutil na linha do produto */
.cart-modal .cart-product {
    transition: background-color .15s ease;
}

.cart-modal .cart-product:hover {
    background-color: #fafafa;
}

/* Botão remover (×): círculo discreto em vez do "×" vermelho solto */
.cart-modal .cart-img-col .remove {
    color: #b0b0b0 !important;
    border-color: #d8d8d8;
    transition: color .2s ease, border-color .2s ease;
}

.cart-modal .cart-img-col .remove:hover {
    color: #e04848 !important;
    border-color: #e04848;
    background: transparent;
}

/* Barra de rolagem enxuta quando a lista rola */
.cart-modal .cart-body {
    scrollbar-width: thin;
    scrollbar-color: #ccc transparent;
}

.cart-modal .cart-body::-webkit-scrollbar {
    width: 6px;
}

.cart-modal .cart-body::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 3px;
}

/* Preço x quantidade na cor da marca */
.cart-modal .cart-qty-price {
    color: var(--bs-primary);
}

/* "Economize R$ X" por item em promoção */
.cart-item-savings {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
    color: #1a8a3c;
}


/* =========================================
   3c. WIDGET — Nota do subtotal
   =========================================
   Não há hook entre o subtotal e os botões, então a nota é injetada via
   pseudo-elemento (site é pt-BR único, sem necessidade de i18n aqui).
*/
.cart-ft-totals::after {
    content: "Frete calculado no checkout";
    display: block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 400;
    color: #8a8a8a;
}


/* =========================================
   3d. WIDGET — Estado vazio
   ========================================= */
.cart-modal .woocommerce-mini-cart__empty-message {
    text-align: center;
    padding: 32px 20px 8px !important;
    font-size: 16px;
    color: #555;
}

.cart-modal .woocommerce-mini-cart__empty-message::before {
    font-family: "FontAwesome";
    content: "\f07a";
    /* fa-shopping-cart */
    display: block;
    margin-bottom: 14px;
    font-size: 40px;
    color: #d8d8d8;
}

.cart-empty-actions {
    padding: 8px 20px 28px;
    text-align: center;
}

.cart-empty-actions .cart-empty-btn {
    display: inline-block;
    width: 100%;
    padding: 12px 18px;
    font-weight: 600;
    border-radius: 8px;
    text-decoration: none;
}


/* =========================================
   4. PÁGINA /carrinho — Cart Block (WooCommerce Blocks)
   =========================================
   A página /carrinho usa o BLOCO de carrinho do WooCommerce (classes
   .wc-block-*), não o carrinho clássico. Por isso estilizamos os blocos.
*/

/* 4.1 Remover o breadcrumb gigante na página do carrinho (igual à produção) */
.woocommerce-cart #breadcrumb-section {
    display: none;
}

/* 4.2 Largura e respiro do container do bloco */
.woocommerce-cart .wp-block-woocommerce-cart {
    max-width: 1200px;
    margin: 48px auto;
    padding: 0 15px;
}

/* 4.3 Coluna de itens — linhas respiráveis */
.wc-block-cart-items {
    border: 0;
}

.wc-block-cart-items__row {
    border-top: 1px solid #f0f0f0;
    padding: 18px 0;
}

.wc-block-cart-item__image img {
    border: 1px solid #eee;
    border-radius: 10px;
    background: #fff;
}

.wc-block-cart-item__product-name,
.wc-block-components-product-name {
    color: var(--bs-secondary);
    font-weight: 600;
    text-decoration: none;
}

/* Badge de promoção na cor da marca.
   Fonte menor que o total do produto: a economia é informação secundária,
   o total é que deve dominar a hierarquia visual. (!important por causa de
   CSS de maior especificidade fora do projeto.) */
.wc-block-components-sale-badge {
    background: var(--bs-primary-light);
    color: var(--bs-primary-dark);
    border-radius: 6px;
    font-weight: 600 !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    padding: 3px 8px !important;
}

/* Total da linha em destaque — deve dominar sobre o badge de economia */
.wc-block-cart-item__total .wc-block-components-product-price__value {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: var(--bs-secondary);
}

/* Evita o "SAVE" duplicado: quando a quantidade é > 1, o bloco mostra a
   economia da linha (multiplicada) na coluna TOTAL. Nesse caso escondemos o
   badge unitário da coluna do produto. Em itens com qtd 1 não existe badge
   no total, então o unitário permanece (é a economia real da linha). */
.wc-block-cart-items__row:has(.wc-block-cart-item__total .wc-block-components-sale-badge) .wc-block-cart-item__product .wc-block-components-sale-badge {
    display: none;
}

/* Stepper de quantidade arredondado */
.wc-block-components-quantity-selector {
    border-radius: 8px;
    overflow: hidden;
}

/* Coloca o botão remover (×) ao lado do seletor de quantidade, agrupando
   os controles do item numa linha só. */
.wc-block-cart-item__quantity {
    display: flex;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px;
}

.wc-block-cart-item__quantity .wc-block-components-quantity-selector {
    flex: 0 0 auto;
    margin-bottom: 0 !important;
    /* remove o espaço que empurrava o × pra baixo */
}

/* Remover item: vira um ícone "×" discreto no lugar do texto apagado */
.wc-block-cart-item__remove-link {
    font-size: 0 !important;
    color: transparent !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex: 0 0 auto;
    border: 1px solid #ddd;
    border-radius: 50%;
    text-decoration: none !important;
    cursor: pointer;
    transition: color .2s ease, border-color .2s ease, background-color .2s ease;
}

.wc-block-cart-item__remove-link::before {
    font-family: "FontAwesome";
    content: "\f00d";
    /* fa-times */
    font-size: 13px;
    color: #b0b0b0;
    transition: color .2s ease;
}

.wc-block-cart-item__remove-link:hover {
    border-color: #e04848;
    background-color: #fff5f5;
}

.wc-block-cart-item__remove-link:hover::before {
    color: #e04848;
}

/* 4.4 Sidebar de totais: não estica e acompanha o scroll (sticky)
   Sem isso, o card cresce até a altura da coluna de itens, deixando um vão
   vazio abaixo do botão quando há muitos produtos. align-self impede o
   esticamento; sticky mantém o card visível ao rolar a lista. O top folga
   o header sticky do tema. */
.wc-block-cart__sidebar {
    align-self: flex-start;
    position: sticky;
    top: 160px;
}

/* Bloco de totais como card */
.wp-block-woocommerce-cart-totals-block {
    border: 1px solid #ececec;
    border-radius: 14px;
    padding: 8px 24px 24px;
    background: #fff;
    box-shadow: 0 6px 24px rgb(0 0 0 / 5%);
}

.wc-block-cart__totals-title {
    text-align: left;
    padding: 18px 0 14px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .04em;
    border-bottom: 1px solid #f0f0f0;
}

/* Linha do total final em destaque com a cor da marca */
.wc-block-components-totals-footer-item .wc-block-components-totals-item__value {
    color: var(--bs-primary);
    font-weight: 700 !important;
}

/* 4.5 Botão "ir para o checkout" — corrige o botão invisível
   No bloco o botão é <a>/<button>.wc-block-cart__submit-button; o tema
   removia o fundo, deixando o texto sem destaque. Forçamos o estilo de
   botão da marca, ocupando a largura toda. */
.wc-block-cart__submit-container .wc-block-cart__submit-button,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button,
a.wc-block-cart__submit-button,
button.wc-block-cart__submit-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 50px;
    padding: 14px 18px;
    background-color: var(--bs-primary) !important;
    color: #fff !important;
    font-weight: 700;
    border: 0;
    border-radius: 8px;
    text-decoration: none;
    transition: background-color .2s ease;
}

.wc-block-cart__submit-container .wc-block-cart__submit-button:hover,
.wp-block-woocommerce-proceed-to-checkout-block .wc-block-components-button:hover,
a.wc-block-cart__submit-button:hover,
button.wc-block-cart__submit-button:hover {
    background-color: var(--bs-primary-dark) !important;
    color: #fff !important;
}

/* Botão "Continuar comprando" (injetado por JS) — abaixo do checkout.
   Padrão outline do widget: borda + texto escuro; hover inverte para fundo
   escuro + texto branco. (--bs-secondary herdado do pai = #303030.) */
.obavix-continue-shopping {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 50px;
    margin-top: 12px;
    padding: 13px 18px;
    background: transparent;
    color: var(--bs-secondary) !important;
    border: 2px solid var(--bs-secondary);
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none !important;
    transition: background-color .2s ease, color .2s ease;
}
.obavix-continue-shopping:hover,
.obavix-continue-shopping:focus {
    background-color: var(--bs-secondary);
    color: #fff !important;
}

/* Cupom: botão "aplicar" alinhado à marca */
.wc-block-components-totals-coupon__button {
    background-color: var(--bs-primary) !important;
    color: #fff !important;
    border-radius: 8px;
}

.woo-better-input-button-group-current-style {
    flex-wrap: unset !important;
}

.woo-better-input-button-group-current-style .woo-better-button-current-style {
    width: 100% !important;
}

.wc-block-components-product-metadata .wc-block-components-product-metadata__description>p {
    font-size: 12px !important;
}

.woo-better-parent-container {
    max-width: unset !important;
}

table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
    font-size: 16px !important;
}

.cart-product .cart-sum-col .cart-pname a{
    font-size: 14px !important;
}

.woocommerce-Price-amount bdi{
    font-weight: 700 !important;
}


/* =========================================
   4.5b PÁGINA /carrinho — Estado vazio (Cart Block)
   =========================================
   NÃO mexer na grade (.wc-block-grid__products) — gap/width quebram as
   4 colunas do tema. Só ícone, tipografia do título e o CTA (via JS). */

/* Troca a carinha triste por um ícone de carrinho da marca.
   O WooCommerce desenha o ícone com mask-image + background-color:currentColor;
   trocamos a máscara pelo carrinho e damos a cor da marca. */
.wc-block-cart__empty-cart__title.with-empty-cart-icon::before {
    background-color: var(--bs-primary) !important;
    -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTcgMThjLTEuMSAwLTEuOTkuOS0xLjk5IDJTNS45IDIyIDcgMjJzMi0uOSAyLTItLjktMi0yLTJ6TTEgMnYyaDJsMy42IDcuNTktMS4zNSAyLjQ1Yy0uMTYuMjgtLjI1LjYxLS4yNS45NiAwIDEuMS45IDIgMiAyaDEydi0ySDcuNDJjLS4xNCAwLS4yNS0uMTEtLjI1LS4yNWwuMDMtLjEyLjktMS42M2g3LjQ1Yy43NSAwIDEuNDEtLjQxIDEuNzUtMS4wM2wzLjU4LTYuNDljLjA4LS4xNC4xMi0uMzEuMTItLjQ4IDAtLjU1LS40NS0xLTEtMUg1LjIxbC0uOTQtMkgxem0xNiAxNmMtMS4xIDAtMS45OS45LTEuOTkgMnMuODkgMiAxLjk5IDIgMi0uOSAyLTItLjktMi0yLTJ6Ii8+PC9zdmc+") !important;
    mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTcgMThjLTEuMSAwLTEuOTkuOS0xLjk5IDJTNS45IDIyIDcgMjJzMi0uOSAyLTItLjktMi0yLTJ6TTEgMnYyaDJsMy42IDcuNTktMS4zNSAyLjQ1Yy0uMTYuMjgtLjI1LjYxLS4yNS45NiAwIDEuMS45IDIgMiAyaDEydi0ySDcuNDJjLS4xNCAwLS4yNS0uMTEtLjI1LS4yNWwuMDMtLjEyLjktMS42M2g3LjQ1Yy43NSAwIDEuNDEtLjQxIDEuNzUtMS4wM2wzLjU4LTYuNDljLjA4LS4xNC4xMi0uMzEuMTItLjQ4IDAtLjU1LS40NS0xLTEtMUg1LjIxbC0uOTQtMkgxem0xNiAxNmMtMS4xIDAtMS45OS45LTEuOTkgMnMuODkgMiAxLjk5IDIgMi0uOSAyLTItLjktMi0yLTJ6Ii8+PC9zdmc+") !important;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    height: 5em !important;
    margin-bottom: 1.1em !important;
}

/* Título "Seu carrinho está vazio" */
.wc-block-cart__empty-cart__title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--bs-secondary);
}

/* Botão CTA injetado por JS (assets/js/cart.js) */
.obavix-empty-cart-cta {
    display: inline-block;
    margin: 28px auto;
    padding: 13px 32px;
    background-color: var(--bs-primary);
    color: #fff !important;
    font-weight: 700;
    border-radius: 8px;
    text-decoration: none !important;
    transition: background-color .2s ease;
}
.obavix-empty-cart-cta:hover {
    background-color: var(--bs-primary-dark);
    color: #fff !important;
}

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

/* 4.6 Responsivo — empilhar colunas no mobile com bom espaçamento */
@media (max-width: 768px) {
    table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
        font-size: 14px !important;
    }

    .wc-block-components-product-metadata .wc-block-components-product-metadata__description>p {
        font-size: 10px !important;
    }

    .wc-block-components-sidebar-layout .wc-block-components-sidebar {
        padding: 0 20px !important;
    }

    .woocommerce-cart .wp-block-woocommerce-cart {
        margin: 28px auto;
    }

    .wc-block-cart__sidebar {
        position: static;
        /* sem sticky no mobile (colunas empilhadas) */
    }

    .wp-block-woocommerce-cart-totals-block {
        margin-top: 24px;
    }
    .wc-block-cart-item__total .wc-block-components-product-price__value{
        font-size: 14px !important;
    }
    table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name{
        max-width: 95% !important;
    }
}