/* ---------------------------------------------------------------
   1. GRELHA DE PRODUTOS
   --------------------------------------------------------------- */

.woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    margin: 0 0 48px !important;
}
/* Geometria: TODOS os itens da grelha, inclusive os cartoes de categoria.
   O tema deixa-lhes a largura em percentagem e float do esquema antigo de
   6 colunas (16,66% => 58px no telemovel); dentro de uma grelha isso encolhe
   o cartao e parte o titulo letra a letra. O aspecto dos cartoes de produto
   continua em regras :not(.product-category) mais abaixo — aqui so se repoe
   a caixa. */
.woocommerce ul.products > li {
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
}
/* A largura precisa de especificidade maior do que a do tema.
   O OceanWP poe classes de coluna no <ul> (mobile-3-col, tablet-2-col, ...) e
   declara ".woocommerce .products.mobile-3-col .product{width:33.33%!important}"
   — 4 classes. Numa grelha, essa percentagem conta a partir da CELULA, nao da
   linha: 33,33% de 173px = 58px, e o titulo partia letra a letra.
   O seletor abaixo tem 4 classes/atributos + 2 elementos, por isso ganha. */
.woocommerce ul.products[class*="-col"] > li.product,
.woocommerce ul.products[class*="-col"] > li.product-category,
.woocommerce ul.products > li.product,
.woocommerce ul.products > li.product-category {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
}

/* o cartao */
.woocommerce ul.products li.product:not(.product-category) .product-inner {
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 12px;
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.woocommerce ul.products li.product:not(.product-category) .product-inner:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,.10);
    border-color: #d0d0d0;
}

/* IMAGEM — proporcao fixa 1:1. E isto que faz a grelha parecer profissional. */
.woocommerce ul.products li.product:not(.product-category) .woo-entry-image,
.woocommerce ul.products li.product:not(.product-category) .woo-entry-image-swap {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #f6f6f6;
}
.woocommerce ul.products li.product:not(.product-category) .woo-entry-image img,
.woocommerce ul.products li.product:not(.product-category) .woo-entry-image-swap img {
    width: 100%;
    height: 100%;
    object-fit: cover;          /* preenche sem distorcer */
    display: block;
    transition: transform .4s ease;
}
.woocommerce ul.products li.product:not(.product-category) .product-inner:hover img {
    transform: scale(1.05);     /* zoom subtil ao passar o rato */
}

/* texto do cartao */
.woocommerce ul.products li.product:not(.product-category) .content-wrap,
.woocommerce ul.products li.product:not(.product-category) .woo-entry-inner {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 16px 16px 18px;
    text-align: left;
}
.woocommerce ul.products li.product:not(.product-category) h2,
.woocommerce ul.products li.product:not(.product-category) .woocommerce-loop-product__title {
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: #1a1a1a;
    margin: 0 0 10px !important;
    padding: 0 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;      /* no maximo 2 linhas, alinhadas entre cartoes */
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 0;
    margin-bottom: 4px !important;
}

/* "Preço sob consulta" — discreto, e nao um preco */
.bb-sob-consulta {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #6a6a6a;
    margin-bottom: 12px;
}

/* o interior do cartao e uma lista de <li> do tema — zerar as margens
   que criavam faixas de vazio entre o titulo e o botao */
.woocommerce ul.products li.product:not(.product-category) .woo-entry-inner li {
    margin: 0 !important;
    padding: 0 !important;
}
.woocommerce ul.products li.product:not(.product-category) .woo-entry-inner li.rating:empty { display: none !important; }
.woocommerce ul.products li.product:not(.product-category) .woo-entry-inner li.category { margin-bottom: 4px !important; }
.woocommerce ul.products li.product:not(.product-category) .woo-entry-inner li.btn-wrap {
    margin-top: auto !important;
    padding-top: 14px !important;
}

/* botao */
.woocommerce ul.products li.product:not(.product-category) .button {
    margin-top: auto !important;
    width: 100%;
    text-align: center;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: .02em;
    padding: 11px 14px !important;
    text-transform: none !important;
}

/* ---------------------------------------------------------------
   2. FILTROS (WOOF) — a barra lateral
   --------------------------------------------------------------- */

.woof {
    background: #fafafa;
    border: 1px solid #ebebeb;
    border-radius: 12px;
    padding: 20px;
}
.woof .woof_container {
    margin-bottom: 22px !important;
    padding-bottom: 18px;
    border-bottom: 1px solid #ebebeb;
}
.woof .woof_container:last-child { border-bottom: 0; margin-bottom: 0 !important; padding-bottom: 0; }
.woof .woof_container_inner > h4,
.woof .woof_block_html_items > h4 {
    font-size: 12px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: #333;
    margin: 0 0 12px !important;
}
.woof .woof_list li { line-height: 1.9; }
.woof .woof_list label { font-size: 14px; color: #444; cursor: pointer; }
.woof .woof_list label:hover { color: #000; }

/* barra lateral acompanha o scroll no desktop */
@media (min-width: 960px) {
    #right-sidebar, #left-sidebar { position: sticky; top: 24px; align-self: start; }
}

/* ---------------------------------------------------------------
   3. FICHA DE PRODUTO
   --------------------------------------------------------------- */

/* ---- FORMULÁRIO DE ORÇAMENTO na ficha: quantidade + botão alinhados ----
   O stepper só estava estilizado no carrinho; aqui ficava desalinhado. */
.single-product form.cart {
    display: flex !important;
    align-items: stretch !important;
    flex-wrap: wrap;
    gap: 12px;
    margin: 6px 0 18px !important;
}
.single-product form.cart div.quantity {
    display: inline-flex !important;
    align-items: stretch !important;
    border: 1px solid #e6e8eb !important;
    border-radius: 10px !important;
    background: #fff !important;
    overflow: hidden !important;
    height: 50px !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: 0 1px 2px rgba(16,24,40,.05) !important;
}
.single-product form.cart div.quantity .minus,
.single-product form.cart div.quantity .plus {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #f2f4f6 !important;
    color: #5c646e !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transform: none !important;
    filter: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.single-product form.cart div.quantity .minus:hover,
.single-product form.cart div.quantity .plus:hover { background: #e6e9ec !important; color: #16191d !important; }
.single-product form.cart div.quantity .minus { border-right: 1px solid #e6e8eb !important; }
.single-product form.cart div.quantity .plus  { border-left: 1px solid #e6e8eb !important; }
.single-product form.cart div.quantity input.qty {
    width: 58px !important;
    height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #fff !important;
    text-align: center !important;
    font-size: 15px !important;
    font-weight: 650 !important;
    box-shadow: none !important;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
}
.single-product form.cart div.quantity input.qty::-webkit-outer-spin-button,
.single-product form.cart div.quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none !important; appearance: none !important; margin: 0 !important; display: none !important;
}
.single-product form.cart .single_add_to_cart_button {
    height: 50px !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 30px !important;
    background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%) !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(29,78,216,.28) !important;
}
.single-product form.cart .single_add_to_cart_button:hover { filter: brightness(1.08) !important; }

/* "Quantidade em metros" ocupa a linha inteira, por cima */
.single-product .bb-unidade-ficha { width: 100%; margin-bottom: 2px; }

@media (max-width: 600px) {
    .single-product form.cart .single_add_to_cart_button { flex: 1; justify-content: center; }
}

/* barra de ferramentas da loja: toggle + ordenar lado a lado, alinhados */
.oceanwp-toolbar {
    display: flex !important;
    align-items: center;
    gap: 14px;
    margin: 0 0 22px !important;
}
.oceanwp-toolbar .woocommerce-ordering { margin: 0 !important; float: none !important; }
.oceanwp-toolbar .woocommerce-ordering select { height: 40px; margin: 0 !important; }

/* toggle grelha/lista reposto e estilizado */
.oceanwp-grid-list { display: flex !important; gap: 8px; margin: 0 !important; float: none !important; }
.oceanwp-grid-list a {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border: 1px solid #e2e5e9 !important; border-radius: 8px !important;
    background: #fff; color: #8a929b !important;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.oceanwp-grid-list a:hover { color: #1d4ed8 !important; border-color: #c7d2fe !important; }
.oceanwp-grid-list a.active { color: #1d4ed8 !important; border-color: #1d4ed8 !important; background: #eef2ff; }
.oceanwp-grid-list a .fa, .oceanwp-grid-list a .fas, .oceanwp-grid-list a svg { font-size: 15px; }


.single-product div.product .product_title {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 14px;
}
.single-product div.product .summary .bb-sob-consulta {
    font-size: 14px;
    padding: 8px 14px;
    background: #f2f2f2;
    border-radius: 6px;
}
.single-product div.product .single_add_to_cart_button {
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 14px 30px !important;
    text-transform: none !important;
}
/* galeria: as fotos dos materiais sao texturas altas — conter num quadrado
   estavel para a ficha ficar legivel, seja qual for o formato da foto */
.single-product .woocommerce-product-gallery { max-width: 560px; }
.single-product .woocommerce-product-gallery__wrapper { background: #f6f6f6; border-radius: 12px; overflow: hidden; }
.single-product .woocommerce-product-gallery__image { aspect-ratio: 1 / 1; overflow: hidden; }
.single-product .woocommerce-product-gallery__image img,
.single-product .woocommerce-product-gallery__image a img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 12px;
    display: block;
}

/* tabela de atributos (Veiculo, Espessura) */
.single-product .woocommerce-product-attributes {
    border: 1px solid #ebebeb;
    border-radius: 10px;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
}
.single-product .woocommerce-product-attributes th,
.single-product .woocommerce-product-attributes td {
    padding: 12px 16px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    font-size: 14px;
}
.single-product .woocommerce-product-attributes th { background: #fafafa; font-weight: 600; width: 34%; }
.single-product .woocommerce-product-attributes tr:last-child th,
.single-product .woocommerce-product-attributes tr:last-child td { border-bottom: 0 !important; }

/* descricao: texto legivel, nao apertado */
.single-product .woocommerce-Tabs-panel p,
.single-product #tab-description p { font-size: 16px; line-height: 1.75; color: #333; max-width: 68ch; }
.single-product #tab-description h3 { font-size: 18px; font-weight: 700; margin: 28px 0 12px; }

/* ---------------------------------------------------------------
   4. MOBILE — a maioria dos estofadores consulta na oficina
   --------------------------------------------------------------- */

@media (max-width: 959px) {
    .woocommerce ul.products { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .woocommerce ul.products li.product:not(.product-category) h2,
    .woocommerce ul.products li.product:not(.product-category) .woocommerce-loop-product__title {
        font-size: 14px !important;
        min-height: 40px;
    }
    .woocommerce ul.products li.product:not(.product-category) .content-wrap,
    .woocommerce ul.products li.product:not(.product-category) .woo-entry-inner { padding: 12px; }
    .woocommerce ul.products li.product:not(.product-category) .button { padding: 12px 10px !important; font-size: 12px !important; }
    .single-product div.product .product_title { font-size: 23px; }
}
@media (max-width: 480px) {
    .woocommerce ul.products { gap: 12px; }
}

/* ---- CONTRASTE (acessibilidade): os cinzas claros reprovavam no Lighthouse ---- */
.woocommerce ul.products li.product li.category,
.woocommerce ul.products li.product li.category a {
    color: #5a626c !important;          /* 4.6:1 sobre branco */
}
/* areas de toque: os links de categoria eram alvos minusculos no telemovel */
.woocommerce ul.products li.product li.category a {
    display: inline-block;
    padding: 5px 4px !important;
    margin: -2px 0;
}
.woocommerce ul.products li.product:not(.product-category) .button {
    color: #1a43bd !important;          /* azul com contraste AA */
    font-weight: 700 !important;
}
.woocommerce ul.products li.product:not(.product-category) .button:hover {
    color: #fff !important;
    background: #1d4ed8 !important;
}