/** * Kitagrada Theme - WooCommerce Styles * Material Design styles for WooCommerce */ /* ========== PRODUCTS GRID ========== */ .woocommerce ul.products, .woocommerce-page ul.products { display: grid; /* auto-fit (não auto-fill) colapsa colunas vazias quando há menos produtos do que cabem na largura disponível, deixando os cards existentes esticarem para preencher a linha em vez de ficarem estreitos e "grudados" à esquerda — visível em seções com poucos itens, como Produtos relacionados. */ grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--md-spacing-lg); margin: 0; padding: 0; list-style: none; } .woocommerce ul.products li.product { background: white; border-radius: var(--md-radius-md); box-shadow: var(--md-elevation-1); transition: all var(--md-transition-normal); overflow: hidden; position: relative; margin: 0; } .woocommerce ul.products li.product:hover { box-shadow: var(--md-elevation-3); transform: translateY(-4px); } /* Product Image */ .woocommerce ul.products li.product img { width: 100%; height: auto; display: block; border-radius: 0; } .woocommerce ul.products li.product .woocommerce-loop-product__link { display: block; } /* Product Title */ .woocommerce ul.products li.product .woocommerce-loop-product__title { font: var(--md-font-subtitle1); color: var(--md-text-primary); margin: var(--md-spacing-md) var(--md-spacing-md) var(--md-spacing-sm); min-height: 48px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Product Price */ .woocommerce ul.products li.product .price { font: var(--md-font-h6); color: var(--md-primary); margin: 0 var(--md-spacing-md) var(--md-spacing-sm); display: block; } .woocommerce ul.products li.product .price del { color: var(--md-text-hint); font-size: 0.85em; margin-right: var(--md-spacing-xs); } .woocommerce ul.products li.product .price ins { text-decoration: none; font-weight: 500; } /* Add to Cart Button */ .woocommerce ul.products li.product .button { width: calc(100% - (var(--md-spacing-md) * 2)); margin: 0 var(--md-spacing-md) var(--md-spacing-md); background: var(--md-primary); color: white; border: none; border-radius: var(--md-radius-sm); padding: 10px var(--md-spacing-sm); font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.3px; text-align: center; cursor: pointer; transition: all var(--md-transition-normal); box-shadow: var(--md-elevation-2); display: inline-flex; align-items: center; justify-content: center; gap: 4px; } .woocommerce ul.products li.product .button:hover { background: var(--md-primary-dark); box-shadow: var(--md-elevation-3); transform: translateY(-2px); } .woocommerce ul.products li.product .button:before { content: 'add_shopping_cart'; font-family: 'Material Symbols Outlined'; font-size: 20px; } /* Sale Badge */ .woocommerce span.onsale { background: var(--md-secondary); color: white; border-radius: var(--md-radius-sm); padding: var(--md-spacing-xs) var(--md-spacing-sm); font: var(--md-font-caption); font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; position: absolute; top: var(--md-spacing-md); right: var(--md-spacing-md); z-index: 2; box-shadow: var(--md-elevation-2); } /* ========== SINGLE PRODUCT ========== */ .single-product .product { background: white; border-radius: var(--md-radius-md); box-shadow: var(--md-elevation-1); padding: var(--md-spacing-xl); margin-bottom: var(--md-spacing-xl); } /* Galeria + resumo lado a lado; abas/relacionados (single-product-extra) ficam fora desse grid — wrappers próprios definidos em woocommerce/content-single-product.php, então não há mais risco de vazar layout entre as seções. */ /* minmax(0, 1fr) em vez de 1fr: "1fr" não encolhe abaixo da largura mínima do conteúdo, e a imagem do produto (600px) esticava a coluna para além da tela no mobile. */ .single-product-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: var(--space-xl); } .single-product-top > * { min-width: 0; } .single-product-extra { margin-top: var(--space-xl); } .single-product .product .product_title { font: var(--md-font-h4); color: var(--md-text-primary); margin-bottom: var(--md-spacing-md); } .single-product .product .price { font: var(--md-font-h5); color: var(--md-primary); margin-bottom: var(--md-spacing-lg); } .single-product .product .woocommerce-product-details__short-description { font: var(--md-font-body1); color: var(--md-text-secondary); margin-bottom: var(--md-spacing-lg); } /* Quantity Selector Material Style */ .quantity { display: inline-flex; align-items: center; border-radius: var(--md-radius-sm); overflow: hidden; } .quantity input.qty { width: 60px; border: none; text-align: center; font: var(--md-font-body1); padding: var(--md-spacing-sm); } .quantity .minus, .quantity .plus { background: var(--md-surface); border: none; width: 36px; height: 36px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background-color var(--md-transition-fast); } .quantity .minus:hover, .quantity .plus:hover { background: var(--md-divider); } /* Super Frete */ button.button[name="calc_shipping"] { color: var(--primary-dark); background: none; border: none; outline: none; box-shadow: none; text-decoration: none; padding: var(--space-sm) var(--space-md); cursor: pointer; } button.button[name="calc_shipping"]:hover { background-color: var(--primary-lighter); } .select2-container--default .select2-selection--single .select2-selection__arrow { height: 36px; } .woocommerce-info.superfrete-number-notice { display: none; } /* Os três blocos abaixo são específicos do grid manual do checkout (.woocommerce-billing-fields__field-wrapper / .woocommerce-shipping-fields__field-wrapper, mais abaixo neste arquivo) — escopados a .woocommerce-checkout para não vazar pra outras telas que reaproveitam os mesmos IDs (ex.: o mesmo #billing_state existe em /my-account/edit-address/, que tinha o campo País invisível por causa do .select2-container{display:none} global daqui). */ .woocommerce-checkout #billing_state, .woocommerce-checkout #shipping_state { width: 100% !important; padding: var(--md-spacing-md) !important; border: 1px solid var(--md-divider) !important; border-radius: var(--md-radius-sm); font: var(--md-font-body1); transition: all var(--md-transition-fast); background: var(--md-surface); height: 70px !important; position: relative !important; } .woocommerce-checkout .select2-container { display: none !important; } .woocommerce-checkout #billing_address_2, .woocommerce-checkout #shipping_address_2 { margin-top: 33px; } /* Abas do Produto — nomes próprios (kitagrada-product-tabs-*), sem colidir com nada de terceiros que possa estar mexendo nos seletores padrão do WooCommerce. */ .kitagrada-product-tabs { margin-top: var(--md-spacing-xxl); } .kitagrada-product-tabs-nav { list-style: none; padding: 0; margin: 0 0 var(--md-spacing-lg); border-bottom: 2px solid var(--md-divider); display: flex; gap: var(--md-spacing-md); } .kitagrada-product-tabs-nav-item { margin: 0; } .kitagrada-product-tabs-nav-item button { display: block; width: 100%; background: none; border: none; border-bottom: 2px solid transparent; padding: var(--md-spacing-md) var(--md-spacing-lg); font: var(--md-font-subtitle2); text-transform: uppercase; color: var(--md-text-secondary); margin-bottom: -2px; cursor: pointer; transition: all var(--md-transition-fast); } .kitagrada-product-tabs-nav-item button:hover { color: var(--md-primary); } .kitagrada-product-tabs-nav-item.is-active button { color: var(--md-primary); border-bottom-color: var(--md-primary); } .kitagrada-product-tabs-panel { display: none; color: var(--text-secondary); line-height: 1.7; } .kitagrada-product-tabs-panel.is-active { display: block; } .kitagrada-product-tabs-panel h2 { font-size: 22px; color: var(--text-primary); margin-bottom: var(--space-md); } /* ---------- Galeria de Imagens ---------- */ .woocommerce-product-gallery { position: relative; } /* Botão de zoom/tela cheia nativo do WooCommerce — vira um ícone flutuante no canto */ .woocommerce-product-gallery__trigger { position: absolute; top: var(--space-sm); right: var(--space-sm); z-index: 2; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: white; border-radius: var(--radius-round); box-shadow: var(--shadow-soft); transition: background var(--transition-quick); } .woocommerce-product-gallery__trigger:hover { background: var(--primary-lighter); } /* O template nativo do WooCommerce usa o emoji 🔍 como conteúdo do botão, que o WordPress converte em (Twemoji, via CDN externo) — troca por um ícone Material Symbols consistente com o resto do tema. */ .woocommerce-product-gallery__trigger img.emoji { display: none !important; } .woocommerce-product-gallery__trigger::before { font-family: 'Material Symbols Outlined'; font-size: 26px; color: var(--primary); content: 'zoom_in'; } /* O border-radius/overflow precisa estar no .flex-viewport (a janela visível de tamanho fixo), não no .woocommerce-product-gallery__wrapper — esse é a faixa larga com todas as imagens lado a lado que o FlexSlider desliza por dentro da janela. Colocar no wrapper só arredonda as pontas da faixa inteira (extremo esquerdo da 1ª imagem, extremo direito da última), deixando a lateral direita da 1ª imagem, a transição entre imagens e as demais imagens com cantos quadrados. */ .flex-viewport { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-subtle); } .woocommerce-product-gallery__wrapper { margin: 0; padding: 0; } .woocommerce-product-gallery__image--placeholder { text-align: center; } .woocommerce-product-gallery__image img, .woocommerce-product-gallery__image--placeholder img { width: 100%; height: auto; display: block; } /* Nenhuma imagem da galeria passa da largura da coluna (o placeholder de produto sem foto não tem a classe __image, então não era coberto pela regra acima) */ .woocommerce-product-gallery img { max-width: 100%; height: auto; } .flex-control-thumbs { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: var(--space-md) 0 0; padding: 0; list-style: none; } .flex-control-thumbs li { width: 72px; } .flex-control-thumbs img { width: 100%; height: 72px; object-fit: cover; border-radius: var(--radius-sm); cursor: pointer; opacity: 0.6; border: 2px solid transparent; transition: opacity var(--transition-quick), border-color var(--transition-quick); } .flex-control-thumbs img.flex-active, .flex-control-thumbs img:hover { opacity: 1; border-color: var(--primary); } /* ---------- Avaliação em Estrelas ---------- */ /* Estrelas de nota (loop de produtos, resumo do produto e avaliações). O WooCommerce normalmente desenha as estrelas com a fonte de ícone própria dele (sprite/@font-face "star"), mas o tema remove todo o CSS padrão do plugin (woocommerce_enqueue_styles => __return_empty_array). Por isso as estrelas são recriadas aqui reaproveitando a fonte "Material Symbols Outlined" (já carregada em kitagrada_enqueue_assets) e a ligadura "star" repetida — mesma técnica de duas camadas (cinza + dourado recortado por largura %) que o WooCommerce usa internamente. */ .star-rating { position: relative; overflow: hidden; height: 1em; line-height: 1; width: 5.7em; font-family: 'Material Symbols Outlined'; font-size: 16px; font-weight: 400; word-spacing: 2px; } .star-rating::before { content: 'star star star star star'; display: block; float: left; top: 0; left: 0; position: absolute; white-space: nowrap; /* letter-spacing de propósito NÃO é usado aqui: em vários navegadores (Firefox, por spec) letter-spacing != 0 desativa a formação de ligaduras, e é a ligadura "star" que desenha o ícone; por isso o espaçamento entre estrelas usa word-spacing (só afeta os espaços literais entre as palavras "star", não as letras dentro de cada uma). */ color: var(--md-divider); } .star-rating span { overflow: hidden; float: left; top: 0; left: 0; position: absolute; padding-top: 1.5em; white-space: nowrap; } .star-rating span::before { content: 'star star star star star'; display: block; top: 0; position: absolute; left: 0; white-space: nowrap; color: var(--md-primary); } .woocommerce-product-rating { display: flex; align-items: center; gap: var(--md-spacing-xs); margin-bottom: var(--md-spacing-md); } .woocommerce-product-rating .woocommerce-review-link, .woocommerce-review-link { font: var(--md-font-caption); color: var(--md-text-secondary); } /* ---------- Formulário de Compra ---------- */ .single-product .cart { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-md); margin: var(--space-lg) 0; } /* Stepper de quantidade, mesmo padrão visual do carrinho */ .single-product .quantity { display: flex; align-items: center; gap: 4px; } .single-product .quantity .qty-btn { width: 28px; height: 28px; border: 1px solid var(--divider); background: var(--surface); border-radius: var(--radius-sm); color: var(--primary); font-size: 16px; line-height: 1; cursor: pointer; transition: background var(--transition-quick); } .single-product .quantity .qty-btn:hover { background: var(--primary-lighter); } .single-product .quantity input.qty { width: 44px; text-align: center; border: 1px solid var(--divider); border-radius: var(--radius-sm); padding: 6px 4px; font-size: 14px; color: var(--text-primary); } .single-product .single_add_to_cart_button { display: inline-flex; align-items: center; gap: var(--space-xs); padding: 14px 32px; border: none; border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: white; font-size: 15px; font-weight: 500; cursor: pointer; box-shadow: var(--shadow-soft); transition: all var(--transition-smooth); } .single-product .single_add_to_cart_button:hover { transform: translateY(-2px); box-shadow: var(--shadow-medium); color: white; } /* ---------- Metadados (SKU, categorias) ---------- */ .product_meta { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--divider); font-size: 13px; color: var(--text-light); } .product_meta > span { display: block; margin-bottom: 4px; } .product_meta a { color: var(--text-secondary); } /* ---------- Relacionados / Upsell ---------- */ .related.products, .upsells.products { margin-top: var(--space-xxl); } .related.products > h2, .upsells.products > h2 { font-size: 24px; color: var(--text-primary); margin-bottom: var(--space-lg); text-align: center; } @media (max-width: 767px) { .single-product-top { grid-template-columns: minmax(0, 1fr); } } /* ========== SHOP PAGE (REDESIGN) ========== */ .woocommerce-products-header__title.page-title { font: var(--md-font-h3); color: var(--text-primary); margin: 0; } .woocommerce-breadcrumb { display: block; font-size: 13px; color: var(--text-light); margin-bottom: var(--space-md); } .woocommerce-breadcrumb a { color: var(--text-secondary); } .shop-layout { display: grid; grid-template-columns: 260px 1fr; align-items: start; gap: var(--space-xl); } /* ---------- Sidebar de Filtros ---------- */ .shop-filters { display: flex; flex-direction: column; gap: var(--space-lg); position: sticky; top: var(--space-lg); } .shop-filter-group { background: white; border-radius: var(--radius-md); box-shadow: var(--shadow-subtle); padding: var(--space-lg); } .shop-filter-group h3 { font-size: 16px; color: var(--text-primary); margin-bottom: var(--space-md); } .shop-filter-categories { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .shop-filter-categories a { display: flex; align-items: center; justify-content: space-between; padding: 8px var(--space-sm); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: 14px; transition: all var(--transition-quick); } .shop-filter-categories a:hover { background: var(--primary-light); color: var(--primary-dark); } .shop-filter-categories li.is-active a { background: var(--primary); color: white; font-weight: 500; } .shop-filter-count { font-size: 12px; color: inherit; opacity: 0.7; } .shop-filter-price-inputs { display: flex; align-items: center; gap: var(--space-xs); margin-bottom: var(--space-md); } .shop-filter-price-inputs input { width: 100%; min-width: 0; padding: 8px var(--space-sm); border: 1px solid var(--divider); border-radius: var(--radius-sm); font-size: 14px; } .shop-filter-price-inputs span { color: var(--text-light); } .shop-filter-price .btn { width: 100%; padding: 10px; font-size: 14px; } .shop-filter-clear { display: inline-flex; align-items: center; gap: 4px; justify-content: center; font-size: 13px; color: var(--text-light); text-decoration: underline; } .shop-filter-clear .material-symbols-outlined { font-size: 16px; } @media (max-width: 959px) { .shop-layout { grid-template-columns: 1fr; } .shop-filters { position: static; } } /* ---------- Listagem ---------- */ .shop-main { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); } .shop-main .woocommerce-notices-wrapper, .shop-main > ul.products { width: 100%; } .shop-main .woocommerce-notices-wrapper .woocommerce-info { background: var(--secondary-light); color: var(--text-primary); border-radius: var(--radius-md); padding: var(--space-md) var(--space-lg); font-size: 14px; } .woocommerce-result-count { margin: 0; color: var(--text-light); font-size: 14px; } .woocommerce-ordering { margin: 0; } .woocommerce-ordering select { padding: 10px var(--space-sm); border: 1px solid var(--divider); border-radius: var(--radius-sm); background: var(--surface); font-size: 14px; color: var(--text-primary); } /* Paginação da listagem (o CSS padrão do WooCommerce é removido, então é recriada aqui) */ .woocommerce-pagination { width: 100%; margin-top: var(--space-lg); } .woocommerce-pagination ul.page-numbers { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--space-xs); list-style: none; margin: 0; padding: 0; border: none; } .woocommerce-pagination ul.page-numbers li { margin: 0; padding: 0; border: none; } .woocommerce-pagination .page-numbers a, .woocommerce-pagination .page-numbers span { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 var(--space-sm); border: 1px solid var(--divider); border-radius: var(--radius-round); background: var(--background); color: var(--text-secondary); font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none; transition: background var(--transition-quick), color var(--transition-quick), border-color var(--transition-quick), box-shadow var(--transition-quick); } .woocommerce-pagination .page-numbers a:hover, .woocommerce-pagination .page-numbers a:focus-visible { background: var(--primary-light); border-color: var(--primary-lighter); color: var(--primary-dark); box-shadow: var(--shadow-subtle); } .woocommerce-pagination .page-numbers span.current { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: var(--shadow-soft); } .woocommerce-pagination .page-numbers span.dots { border: none; background: transparent; min-width: auto; padding: 0 2px; color: var(--text-light); } .woocommerce-pagination .page-numbers a.prev, .woocommerce-pagination .page-numbers a.next { font-size: 18px; } /* Bloco "N avaliações para Produto" */ .woocommerce-Reviews { max-width: 760px; } .woocommerce-Reviews-title { font: var(--md-font-h5); color: var(--md-text-primary); margin-bottom: var(--md-spacing-lg); } .woocommerce-Reviews ol.commentlist { list-style: none; margin: 0; padding: 0; } .woocommerce-Reviews .comment_container { display: flex; gap: var(--md-spacing-md); padding: var(--md-spacing-lg) 0; border-bottom: 1px solid var(--md-divider); } .woocommerce-Reviews li.review:last-child .comment_container { border-bottom: none; } .woocommerce-Reviews .comment_container img.avatar { width: 48px; height: 48px; border-radius: var(--md-radius-round); flex-shrink: 0; } .woocommerce-Reviews .comment-text { flex: 1; } .woocommerce-Reviews .comment-text .star-rating { margin-bottom: var(--md-spacing-xs); } .woocommerce-Reviews .comment-text p.meta { font: var(--md-font-caption); color: var(--md-text-light); margin: 0 0 var(--md-spacing-xs) 0; } .woocommerce-Reviews .comment-text p.meta .woocommerce-review__author { color: var(--md-text-primary); font-weight: 500; } .woocommerce-Reviews .comment-text .description p { margin: 0; color: var(--md-text-secondary); } .woocommerce-Reviews .comment-text .description p:last-child { margin-bottom: 0; } .woocommerce-noreviews { color: var(--md-text-secondary); font: var(--md-font-body1); } /* Formulário "Avalie este produto" */ #review_form_wrapper { max-width: 760px; margin-top: var(--md-spacing-xxl); } #review_form #respond { background: white; border-radius: var(--md-radius-md); box-shadow: var(--md-elevation-1); padding: var(--md-spacing-xl); } #review_form #respond .comment-reply-title { display: block; font: var(--md-font-h6); color: var(--md-text-primary); margin-bottom: var(--md-spacing-md); } #review_form #respond .comment-notes, #review_form #respond .woocommerce-verification-required { font: var(--md-font-body2); color: var(--md-text-secondary); margin-bottom: var(--md-spacing-md); } #review_form #respond .comment-form-rating { margin-bottom: var(--md-spacing-md); } #review_form #respond .comment-form-rating label { display: block; font: var(--md-font-subtitle2); color: var(--md-text-secondary); margin-bottom: var(--md-spacing-xs); } /* Select nativo (fallback sem JS) */ #review_form #respond #rating { padding: var(--md-spacing-sm) var(--md-spacing-md); border: 1px solid var(--md-divider); border-radius: var(--md-radius-sm); font: var(--md-font-body1); background: var(--md-surface); } /* Seletor de estrelas clicável (gerado via JS do WooCommerce sobre o #rating) */ #review_form #respond p.stars a { display: inline-block; width: 24px; height: 24px; text-indent: -9999px; position: relative; font-family: 'Material Symbols Outlined'; color: var(--md-divider); } #review_form #respond p.stars a::before { content: 'star'; position: absolute; left: 0; top: 0; font-size: 22px; text-indent: 0; transition: color var(--md-transition-fast); } /* O JS do WooCommerce só marca a estrela CLICADA com .active (e o

com .selected) — as anteriores precisam ser pintadas via CSS, senão só uma estrela fica destacada. Selecionado: pinta todas e "apaga" as que vêm depois da .active. */ #review_form #respond p.stars.selected a::before { color: var(--md-primary); font-variation-settings: 'FILL' 1; } #review_form #respond p.stars.selected a.active ~ a::before { color: var(--md-divider); font-variation-settings: 'FILL' 0; } /* Hover (depois do .selected para ter prioridade): pré-visualiza a nota até a estrela sob o mouse */ #review_form #respond p.stars:hover a::before { color: var(--md-primary); font-variation-settings: 'FILL' 1; } #review_form #respond p.stars a:hover ~ a::before { color: var(--md-divider); font-variation-settings: 'FILL' 0; } #review_form #respond p.comment-form-comment label { display: block; font: var(--md-font-subtitle2); color: var(--md-text-secondary); margin-bottom: var(--md-spacing-xs); } #review_form #respond #comment { width: 100%; min-height: 140px; padding: var(--md-spacing-md); border: 1px solid var(--md-divider); border-radius: var(--md-radius-sm); font: var(--md-font-body1); background: var(--md-surface); resize: vertical; transition: all var(--md-transition-fast); } #review_form #respond #comment:focus, #review_form #respond #rating:focus { outline: none; border-color: var(--md-primary); background: white; box-shadow: 0 0 0 2px rgba(217, 125, 140, 0.1); } #review_form #respond .form-submit { margin: var(--md-spacing-md) 0 0 0; } #review_form #respond .form-submit .submit { font: var(--md-font-button); letter-spacing: 0.5px; padding: 14px 32px; border: none; border-radius: var(--md-radius-lg); cursor: pointer; transition: all var(--md-transition-normal); background: linear-gradient(135deg, var(--md-primary) 0%, var(--primary-dark) 100%); color: white; box-shadow: var(--md-elevation-2); font-weight: 500; } #review_form #respond .form-submit .submit:hover { transform: translateY(-2px); box-shadow: var(--md-elevation-3); } @media (max-width: 599px) { .woocommerce-Reviews .comment_container { flex-direction: column; } } /* ========== CART PAGE (REDESIGN EM CARDS) ========== */ .cart-page-title h1 { margin-bottom: var(--space-xs); } /* O aviso padrão do WooCommerce ("Carrinho atualizado.", etc.) vira snackbar via JS */ .cart-page .woocommerce-notices-wrapper { display: none; } .cart-page.is-updating { opacity: 0.6; pointer-events: none; transition: opacity var(--transition-quick); } .cart-page-layout { display: grid; grid-template-columns: 1fr 380px; gap: var(--space-lg); align-items: start; } /* ---------- Coluna de Itens ---------- */ .cart-items-list { display: flex; flex-direction: column; gap: var(--space-md); } .cart-item-card { display: grid; grid-template-columns: 96px 1fr auto auto auto; align-items: center; gap: var(--space-md); background: white; border-radius: var(--radius-md); box-shadow: var(--shadow-subtle); padding: var(--space-md); transition: box-shadow var(--transition-quick); } .cart-item-card:hover { box-shadow: var(--shadow-soft); } .cart-item-thumbnail img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--radius-sm); display: block; } .cart-item-info { min-width: 0; } .cart-item-name { font-size: 16px; color: var(--text-primary); margin-bottom: 4px; } .cart-item-name a { color: var(--text-primary); font-weight: 500; } .cart-item-price { font-size: 14px; color: var(--text-light); } .cart-item-quantity .quantity { display: flex; align-items: center; gap: 4px; } .cart-item-quantity .qty-btn { width: 28px; height: 28px; border: 1px solid var(--divider); background: var(--surface); border-radius: var(--radius-sm); color: var(--primary); font-size: 16px; line-height: 1; cursor: pointer; transition: background var(--transition-quick); } .cart-item-quantity .qty-btn:hover { background: var(--primary-lighter); } .cart-item-quantity input.qty { width: 44px; text-align: center; border: 1px solid var(--divider); border-radius: var(--radius-sm); padding: 6px 4px; font-size: 14px; color: var(--text-primary); } .cart-item-subtotal { font-weight: 500; color: var(--primary-dark); white-space: nowrap; } .cart-item-remove .remove { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-round); color: var(--text-light); transition: all var(--transition-quick); } .cart-item-remove .remove:hover { background: var(--primary-lighter); color: var(--primary-dark); } .cart-item-remove .material-symbols-outlined { font-size: 20px; } /* ---------- Barra de Ações ---------- */ .cart-actions-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-md); margin-top: var(--space-lg); } .cart-continue-shopping { margin-right: auto; display: inline-flex; align-items: center; gap: 4px; } .cart-actions-row .coupon { display: flex; gap: var(--space-xs); } .cart-actions-row .coupon .input-text { padding: 10px var(--space-sm); border: 1px solid var(--divider); border-radius: var(--radius-md); font-size: 14px; } .cart-update-btn .material-symbols-outlined { font-size: 18px; } /* ---------- Coluna de Resumo ---------- */ .cart-summary-column { position: sticky; top: var(--space-lg); } .cart-summary-card { background: white; border-radius: var(--radius-md); box-shadow: var(--shadow-soft); padding: var(--space-lg); } .cart-summary-card h2 { font-size: 22px; color: var(--primary); margin-bottom: var(--space-md); } .cart-totals-rows { display: flex; flex-direction: column; gap: var(--space-sm); } .cart-totals-row { display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: var(--space-sm); border-bottom: 1px solid var(--divider); font-size: 14px; color: var(--text-secondary); } .cart-totals-row.order-total { border-bottom: none; padding-top: var(--space-xs); font-size: 18px; font-weight: 500; color: var(--text-primary); } .cart-totals-row.order-total .cart-totals-value { color: var(--primary-dark); } .cart-totals-label { flex-shrink: 0; } .cart-totals-value { text-align: right; } /* Bloco de frete (inclui SuperFrete, via wc_cart_totals_shipping_html()) */ .cart-shipping-row { flex-direction: column; align-items: stretch; } .cart-shipping-block { display: flex; flex-direction: column; gap: var(--space-xs); width: 100%; } .cart-shipping-block .cart-totals-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-light); } .cart-shipping-block .cart-totals-value { width: 100%; text-align: left; } /* Uma opção de envio por linha */ .woocommerce-shipping-methods { display: flex; flex-direction: column; gap: var(--space-xs); list-style: none; margin: 0 0 var(--space-sm) 0; padding: 0; text-align: left; } .woocommerce-shipping-methods li { display: flex; align-items: flex-start; gap: 8px; padding: var(--space-sm); border: 1px solid var(--divider); border-radius: var(--radius-sm); transition: border-color var(--transition-quick); } .woocommerce-shipping-methods li:has(input:checked) { border-color: var(--primary); background: var(--primary-light); } .woocommerce-shipping-methods input[type="radio"] { margin-top: 3px; accent-color: var(--primary); flex-shrink: 0; } .woocommerce-shipping-methods label { font-size: 14px; line-height: 1.4; color: var(--text-primary); margin: 0; } /* Endereço e "Mudar endereço", cada um na sua própria linha */ .woocommerce-shipping-destination { display: block; font-size: 13px; color: var(--text-light); margin: 0 0 var(--space-xs) 0; text-align: left; } .shipping-calculator-button { display: inline-block; font-size: 13px; color: var(--primary); text-decoration: underline; margin-bottom: var(--space-xs); } .shipping-calculator-form { display: block; margin-top: var(--space-sm); text-align: left; } .shipping-calculator-form .form-row { margin-bottom: var(--space-sm); } .shipping-calculator-form label { display: block; font-size: 13px; color: var(--text-secondary); margin-bottom: 4px; } .shipping-calculator-form .input-text, .shipping-calculator-form select { width: 100%; padding: 8px var(--space-sm); border: 1px solid var(--divider); border-radius: var(--radius-sm); font-size: 14px; } .shipping-calculator-form .select2-container .select2-selection--single { height: 38px; border: 1px solid var(--divider); border-radius: var(--radius-sm); } .shipping-calculator-form .select2-container .select2-selection__rendered { line-height: 38px; } /* País/Estado bloqueados: só mudam automaticamente via CEP */ .shipping-calculator-form .select2-container--disabled .select2-selection--single { background: var(--surface); color: var(--text-light); cursor: not-allowed; } .shipping-calculator-form .button { margin-top: 4px; } .wc-proceed-to-checkout { margin-top: var(--space-md); } .wc-proceed-to-checkout .checkout-button { display: flex; align-items: center; justify-content: center; width: 100%; padding: 16px; font-size: 16px; background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%); color: white; border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); transition: all var(--transition-smooth); } .wc-proceed-to-checkout .checkout-button:hover { transform: translateY(-2px); box-shadow: var(--shadow-medium); } /* ---------- Cross-sell (largura total, abaixo do grid) ---------- */ .cross-sells { margin-top: var(--space-xxl); } .cross-sells h2 { font-size: 24px; color: var(--text-primary); margin-bottom: var(--space-md); } /* ---------- Carrinho Vazio ---------- */ .cart-empty-state { text-align: center; padding: var(--space-xxl) var(--space-lg); max-width: 500px; margin: 0 auto; } .cart-empty-icon { font-size: 64px; color: var(--text-lighter); margin-bottom: var(--space-md); } .cart-empty-message { color: var(--text-light); margin-bottom: var(--space-lg); } /* ---------- Responsivo ---------- */ @media (max-width: 959px) { .cart-page-layout { grid-template-columns: 1fr; } .cart-summary-column { position: static; } } @media (max-width: 599px) { .cart-item-card { grid-template-columns: 72px 1fr auto; grid-template-areas: "thumb info info" "thumb quantity quantity" "thumb subtotal remove"; row-gap: var(--space-xs); } .cart-item-thumbnail { grid-area: thumb; } .cart-item-info { grid-area: info; } .cart-item-quantity { grid-area: quantity; } .cart-item-subtotal { grid-area: subtotal; align-self: center; } .cart-item-remove { grid-area: remove; align-self: center; justify-self: end; } .cart-item-thumbnail img { width: 72px; height: 72px; } .cart-actions-row { flex-direction: column; align-items: stretch; } .cart-continue-shopping { margin-right: 0; order: 3; } } /* ========== CHECKOUT PAGE ========== */ .woocommerce-checkout #customer_details { background: white; border-radius: var(--md-radius-md); box-shadow: var(--md-elevation-1); padding: var(--md-spacing-xl); margin-bottom: var(--md-spacing-lg); } .checkout-review-card { background: white; border-radius: var(--md-radius-md); box-shadow: var(--md-elevation-1); padding: var(--md-spacing-xl); } .woocommerce-checkout h3 { font: var(--md-font-h6); color: var(--md-primary); margin-bottom: var(--md-spacing-md); padding-bottom: var(--md-spacing-sm); border-bottom: 2px solid var(--md-divider); } /* Form Fields Material Design */ .woocommerce-checkout .form-row input.input-text, .woocommerce-checkout .form-row select, .woocommerce-checkout .form-row textarea { width: 100%; padding: var(--md-spacing-md); border: 1px solid var(--md-divider); border-radius: var(--md-radius-sm); font: var(--md-font-body1); transition: all var(--md-transition-fast); background: var(--md-surface); } .woocommerce-checkout .form-row input.input-text:focus, .woocommerce-checkout .form-row select:focus, .woocommerce-checkout .form-row textarea:focus { outline: none; border-color: var(--md-primary); background: white; box-shadow: 0 0 0 2px rgba(217, 125, 140, 0.1); } .woocommerce-checkout .form-row label { font: var(--md-font-subtitle2); color: var(--md-text-secondary); margin-bottom: var(--md-spacing-xs); display: block; } /* Select2 (Estado) — mesmo visual dos demais campos */ .woocommerce-checkout .select2-container--default .select2-selection--single { height: auto; min-height: 48px; display: flex; align-items: center; padding: 0 var(--space-md); border: 1px solid var(--md-divider); border-radius: var(--md-radius-sm); background: var(--md-surface); transition: all var(--md-transition-fast); } .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered { padding: 0; line-height: normal; color: var(--text-primary); } .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; top: 0; right: var(--space-sm); } .woocommerce-checkout .select2-container--default.select2-container--focus .select2-selection--single, .woocommerce-checkout .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--md-primary); background: white; box-shadow: 0 0 0 2px rgba(217, 125, 140, 0.1); } /* País/Estado bloqueados — valor continua sendo enviado no submit, só a interação é bloqueada */ .woocommerce-checkout select[id$="_country"] { background: var(--md-surface); color: var(--md-text-hint); cursor: not-allowed; } .woocommerce-checkout .select2-container.is-locked .select2-selection--single { background: var(--md-surface); color: var(--md-text-hint); cursor: not-allowed; } /* Layout dos campos de cobrança: linhas fixas via CSS Grid (independe da ordem/prioridade original do plugin de campos) — 1ª linha com 3 campos, demais com 2 campos cada. */ .woocommerce-billing-fields__field-wrapper { display: grid; grid-template-columns: repeat(6, 1fr); grid-template-areas: "cpf cpf nome nome sobrenome sobrenome" "cep cep cep pais pais pais" "estado estado estado cidade cidade cidade" "endereco endereco endereco numero numero numero" "bairro bairro bairro complemento complemento complemento" "email email email telefone telefone telefone"; gap: 0 var(--space-md); } .woocommerce-checkout #billing_document_field { grid-area: cpf; } .woocommerce-checkout #billing_first_name_field { grid-area: nome; } .woocommerce-checkout #billing_last_name_field { grid-area: sobrenome; } .woocommerce-checkout #billing_postcode_field { grid-area: cep; } .woocommerce-checkout #billing_country_field { grid-area: pais; } .woocommerce-checkout #billing_state_field { grid-area: estado; } .woocommerce-checkout #billing_city_field { grid-area: cidade; } .woocommerce-checkout #billing_address_1_field { grid-area: endereco; } .woocommerce-checkout #billing_number_field { grid-area: numero; } .woocommerce-checkout #billing_neighborhood_field { grid-area: bairro; } .woocommerce-checkout #billing_address_2_field { grid-area: complemento; } .woocommerce-checkout #billing_email_field { grid-area: email; } .woocommerce-checkout #billing_phone_field { grid-area: telefone; } @media (max-width: 959px) { .woocommerce-billing-fields__field-wrapper { grid-template-columns: 1fr; grid-template-areas: "cpf" "nome" "sobrenome" "cep" "pais" "estado" "cidade" "endereco" "numero" "bairro" "complemento" "email" "telefone"; } } /* Checkout reorganizado pelo plugin Teamrity WooCommerce (módulo Endereços): "Seus dados" fica só com CPF, nome, sobrenome, e-mail e telefone; os campos de endereço de cobrança vão para .teamrity-billing-address-fields, na seção "Endereço de cobrança". */ #customer_details.teamrity-checkout-layout .woocommerce-billing-fields__field-wrapper { grid-template-areas: "cpf cpf nome nome sobrenome sobrenome" "email email email telefone telefone telefone"; } .teamrity-billing-address-fields { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-areas: "cep pais" "estado cidade" "endereco numero" "bairro complemento"; gap: 0 var(--space-md); } @media (max-width: 959px) { #customer_details.teamrity-checkout-layout .woocommerce-billing-fields__field-wrapper { grid-template-columns: 1fr; grid-template-areas: "cpf" "nome" "sobrenome" "email" "telefone"; } .teamrity-billing-address-fields { grid-template-columns: 1fr; grid-template-areas: "cep" "pais" "estado" "cidade" "endereco" "numero" "bairro" "complemento"; } } /* Layout dos campos de entrega: mesmo agrupamento em linhas da cobrança (sem CPF/Email, que só existem em cobrança) */ .woocommerce-shipping-fields__field-wrapper { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-areas: "nome sobrenome" "cep pais" "estado cidade" "endereco numero" "bairro complemento" "telefone telefone"; gap: 0 var(--space-md); } .woocommerce-checkout #shipping_first_name_field { grid-area: nome; } .woocommerce-checkout #shipping_last_name_field { grid-area: sobrenome; } .woocommerce-checkout #shipping_postcode_field { grid-area: cep; } .woocommerce-checkout #shipping_country_field { grid-area: pais; } .woocommerce-checkout #shipping_state_field { grid-area: estado; } .woocommerce-checkout #shipping_city_field { grid-area: cidade; } .woocommerce-checkout #shipping_address_1_field { grid-area: endereco; } .woocommerce-checkout #shipping_number_field { grid-area: numero; } .woocommerce-checkout #shipping_neighborhood_field { grid-area: bairro; } .woocommerce-checkout #shipping_address_2_field { grid-area: complemento; } .woocommerce-checkout #shipping_phone_field { grid-area: telefone; } @media (max-width: 959px) { .woocommerce-shipping-fields__field-wrapper { grid-template-columns: 1fr; grid-template-areas: "nome" "sobrenome" "cep" "pais" "estado" "cidade" "endereco" "numero" "bairro" "complemento" "telefone"; } } /* ---------- Loading de tela cheia (Kitagrada.loaderShow/loaderHide) ---------- */ .kg-loader { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: var(--space-md); background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity var(--transition-quick), visibility var(--transition-quick); } .kg-loader.is-visible { opacity: 1; visibility: visible; } /* Trava de segurança do loading do carregamento: se algum script falhar e ele nunca for escondido, some sozinho em 10s para não bloquear a compra */ .kg-loader.is-visible.is-initial { animation: kg-loader-failsafe 0.3s ease 10s forwards; } @keyframes kg-loader-failsafe { to { opacity: 0; visibility: hidden; } } .kg-loader-card { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); min-width: 240px; max-width: 320px; padding: var(--space-lg) var(--space-xl); background: white; border-radius: var(--radius-xl); box-shadow: var(--shadow-lifted); text-align: center; transform: translateY(8px); transition: transform var(--transition-smooth); } .kg-loader.is-visible .kg-loader-card { transform: translateY(0); } .kg-loader-logo { width: auto; max-width: 120px; max-height: 64px; object-fit: contain; } .kg-loader-spinner { width: 40px; height: 40px; border: 3px solid var(--primary-lighter); border-top-color: var(--primary); border-radius: 50%; animation: kg-spin 0.8s linear infinite; } @keyframes kg-spin { to { transform: rotate(360deg); } } .kg-loader-text { margin: 0; font-size: 14px; color: var(--text-secondary); } body.kg-loading { overflow: hidden; } /* ---------- Skeleton (opções de frete enquanto recalcula) ---------- */ .checkout-shipping-slot.is-loading > :not(.kg-skeleton-list) { display: none; } .kg-skeleton-list { display: flex; flex-direction: column; gap: var(--space-sm); } .kg-skeleton { border-radius: var(--radius-md); background: linear-gradient(90deg, var(--divider) 25%, var(--primary-lighter) 50%, var(--divider) 75%); background-size: 200% 100%; animation: kg-shimmer 1.2s ease-in-out infinite; } .kg-skeleton-title { width: 30%; height: 14px; } .kg-skeleton-row { height: 52px; } @keyframes kg-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } @media (prefers-reduced-motion: reduce) { .kg-loader-spinner, .kg-skeleton { animation-duration: 2.4s; } } /* ---------- Progresso do Wizard ---------- */ .checkout-page-title h1 { margin-bottom: var(--space-xs); } /* Avisos e erros de validação do WooCommerce viram snackbar via JS */ .checkout-page .woocommerce-notices-wrapper, .checkout-page .woocommerce-NoticeGroup-checkout, .checkout-page .woocommerce-NoticeGroup-updateOrderReview { display: none; } .checkout-progress { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); margin-bottom: var(--space-xl); } .checkout-progress-step { display: flex; flex-direction: column; align-items: center; gap: 6px; opacity: 0.5; transition: opacity var(--transition-quick); } .checkout-progress-step.is-active, .checkout-progress-step.is-complete { opacity: 1; } .checkout-progress-circle { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-round); background: var(--surface); border: 2px solid var(--divider); color: var(--text-secondary); font-weight: 500; transition: all var(--transition-quick); } .checkout-progress-step.is-active .checkout-progress-circle { background: var(--primary); border-color: var(--primary); color: white; } .checkout-progress-step.is-complete .checkout-progress-circle { background: var(--primary-lighter); border-color: var(--primary); color: var(--primary-dark); } .checkout-progress-label { font-size: 12px; color: var(--text-secondary); text-align: center; } .checkout-progress-connector { width: 48px; height: 2px; background: var(--divider); margin-top: -20px; } /* ---------- Etapas ---------- */ .checkout-step { display: none; } .checkout-step.is-active { display: block; } /* Só anima na troca de etapa (classe adicionada pelo JS) — não no carregamento da página */ .checkout-step.is-entering { animation: checkout-step-in var(--transition-smooth); } .checkout-step-actions .checkout-step-next:disabled { opacity: 0.6; cursor: wait; } /* Checkboxes do checkout: "Entregar em um endereço diferente?" (etapa 1) e aceite dos termos (etapa 3). Checkbox nativo redesenhado via appearance:none. */ .checkout-page .woocommerce-form__label-for-checkbox { display: flex; align-items: flex-start; gap: 10px; margin: 0; cursor: pointer; font-family: var(--font-body); font-size: 14px; font-weight: 400; line-height: 1.5; color: var(--text-secondary); } .checkout-page input.woocommerce-form__input-checkbox { -webkit-appearance: none; appearance: none; flex-shrink: 0; display: inline-grid; place-content: center; width: 20px; height: 20px; margin: 1px 0 0; border: 2px solid var(--text-lighter); border-radius: 6px; background: var(--background); cursor: pointer; transition: background var(--transition-quick), border-color var(--transition-quick), box-shadow var(--transition-quick); } /* Marca de "check" desenhada com bordas */ .checkout-page input.woocommerce-form__input-checkbox::before { content: ''; width: 5px; height: 10px; margin-top: -2px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform var(--transition-quick); } .checkout-page input.woocommerce-form__input-checkbox:hover { border-color: var(--primary); } .checkout-page input.woocommerce-form__input-checkbox:checked { background: var(--primary); border-color: var(--primary); } .checkout-page input.woocommerce-form__input-checkbox:checked::before { transform: rotate(45deg) scale(1); } .checkout-page input.woocommerce-form__input-checkbox:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--primary-lighter); } .checkout-page .woocommerce-invalid input.woocommerce-form__input-checkbox { border-color: var(--primary-dark); } /* O label da etapa 1 fica dentro de um

do WooCommerce — tira o tamanho de título */ .checkout-page #ship-to-different-address { margin: var(--space-md) 0 0; font-size: 14px; font-weight: 400; } .checkout-page #ship-to-different-address .woocommerce-form__label-for-checkbox span { color: var(--text-primary); } .checkout-page .woocommerce-terms-and-conditions-wrapper .form-row { margin: var(--space-md) 0; } .checkout-page .woocommerce-terms-and-conditions-wrapper a { color: var(--primary); font-weight: 600; } @keyframes checkout-step-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .checkout-step-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-lg); } .checkout-step-actions .checkout-step-next { margin-left: auto; } .checkout-step-actions .material-symbols-outlined { font-size: 18px; } .form-row.checkout-field-error input.input-text, .form-row.checkout-field-error select, .form-row.checkout-field-error .select2-container--default .select2-selection--single { border-color: #e03131; } /* ---------- Etapa 2: Frete ---------- */ .checkout-shipping-card { background: white; border-radius: var(--radius-md); box-shadow: var(--shadow-subtle); padding: var(--space-lg); } .checkout-shipping-card h3 { margin-top: 0; } .checkout-shipping-loading { color: var(--text-light); text-align: center; margin: 0; } /* Containers das etapas do checkout — padding lateral grande demais no mobile espremia o conteúdo; mantém o padding top/bottom atual, só reduz esquerda/direita. */ @media (max-width: 959px) { .woocommerce-checkout #customer_details, .checkout-shipping-card, .checkout-review-card { padding-left: 15px; padding-right: 15px; } } /* ---------- Etapa 3: Tabela de Revisão ---------- */ .woocommerce-checkout-review-order-table { width: 100%; border-collapse: collapse; margin-bottom: var(--space-lg); } .woocommerce-checkout-review-order-table thead th { text-align: left; font-size: 13px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-light); padding-bottom: var(--space-sm); border-bottom: 1px solid var(--divider); } .woocommerce-checkout-review-order-table thead th.product-total { text-align: right; } .woocommerce-checkout-review-order-table tbody td { padding: var(--space-sm) 0; border-bottom: 1px solid var(--divider); font-size: 14px; color: var(--text-primary); } .woocommerce-checkout-review-order-table tbody td.product-total { text-align: right; white-space: nowrap; } .woocommerce-checkout-review-order-table tfoot th, .woocommerce-checkout-review-order-table tfoot td { padding: var(--space-sm) 0; font-size: 14px; } .woocommerce-checkout-review-order-table tfoot td { text-align: right; } .woocommerce-checkout-review-order-table tfoot tr.order-total th, .woocommerce-checkout-review-order-table tfoot tr.order-total td { padding-top: var(--space-sm); border-top: 1px solid var(--divider); font-size: 18px; font-weight: 500; color: var(--primary-dark); } /* ---------- Métodos de pagamento (só o wrapper — conteúdo interno é do Mercado Pago) ---------- */ .wc_payment_methods { list-style: none; margin: 0 0 var(--space-lg) 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-sm); } .wc_payment_method { border: 1px solid var(--divider); border-radius: var(--radius-md); padding: var(--space-md); transition: border-color var(--transition-quick); } .wc_payment_method:has(input:checked) { border-color: var(--primary); background: var(--primary-light); } .wc_payment_method > label { display: flex; align-items: center; gap: var(--space-sm); font-size: 15px; color: var(--text-primary); cursor: pointer; } .wc_payment_method > label img { height: 22px; width: auto; } .wc_payment_method .payment_box { margin-top: var(--space-md); } /* Place Order Button */ #place_order { width: 100%; background: var(--md-primary); color: white; border: none; border-radius: var(--md-radius-sm); padding: var(--md-spacing-md) var(--md-spacing-xl); font: var(--md-font-button); text-transform: uppercase; letter-spacing: 0.5px; cursor: pointer; transition: all var(--md-transition-normal); box-shadow: var(--md-elevation-2); } #place_order:hover { background: var(--md-primary-dark); box-shadow: var(--md-elevation-4); } /* ========== MY ACCOUNT (Login, Registro, Minha Conta) ========== */ /* A página "Minha Conta" é uma página comum do WP (usa page.php), com o shortcode/bloco [woocommerce_my_account] dentro de .page-entry-content. O WooCommerce envolve o shortcode em uma
, e é essa div — não .page-entry-content — que é a mãe direta da navegação e do conteúdo. O grid de duas colunas precisa ser aplicado nela, já que grid-column só tem efeito em filhos diretos do container com display:grid. */ /* :has() só ativa o grid quando o menu da conta existe de fato — a tela de login/registro (deslogado) usa a mesma página, mas sem esse menu, e deve continuar em coluna única. */ body.kitagrada-myaccount-page .page-entry-content .woocommerce:has(.woocommerce-MyAccount-navigation) { display: grid; grid-template-columns: 260px 1fr; gap: var(--md-spacing-xl); align-items: start; } body.kitagrada-myaccount-page .woocommerce-MyAccount-navigation { grid-column: 1; } body.kitagrada-myaccount-page .woocommerce-MyAccount-content { grid-column: 2; min-width: 0; } @media (max-width: 959px) { body.kitagrada-myaccount-page .page-entry-content .woocommerce { grid-template-columns: 1fr !important; } /* O container pai colapsa pra 1 coluna acima, mas nav/conteúdo ainda pediam grid-column 1/2 (sem media query) — isso criava uma coluna implícita extra e espremia tudo lado a lado em vez de empilhar. */ body.kitagrada-myaccount-page .woocommerce-MyAccount-navigation, body.kitagrada-myaccount-page .woocommerce-MyAccount-content { grid-column: 1; } /* Menu da conta vira uma barra horizontal só com ícones — o texto some visualmente mas continua acessível pra leitor de tela */ .kitagrada-account-navigation ul { display: flex; justify-content: space-between; } .kitagrada-account-navigation li { border-bottom: none; flex: 1; } .kitagrada-account-navigation li a { position: relative; flex-direction: column; justify-content: center; gap: 2px; padding: var(--md-spacing-sm) var(--md-spacing-xs); text-align: center; } .kitagrada-account-navigation li a span:not(.material-symbols-outlined) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } } /* Espaçamento do card em relação ao header — o wrapper .page-content (vindo de page.php) não tem nenhum respiro definido em outro lugar do tema. */ body.kitagrada-myaccount-page .page-content { padding-top: var(--md-spacing-xl); padding-bottom: var(--md-spacing-xl); } /* O card da conta não deve ter a sombra/hover "flutuante" genéricos de .md-card — aqui ele é só um container de layout, não um item clicável. */ body.kitagrada-myaccount-page .page-content .md-card, body.kitagrada-myaccount-page .page-content .md-card:hover { box-shadow: none; transform: none; } /* Login / Registro (woocommerce/myaccount/form-login.php) — sem card individual por coluna, só um divisor sutil entre "Entrar" e "Criar conta" */ .kitagrada-account-auth-card { padding: var(--md-spacing-xl); } @media (min-width: 768px) { .kitagrada-account-auth.grid-2 .kitagrada-account-auth-card:last-child { border-left: 1px solid var(--md-divider); } } .kitagrada-account-auth h2 { font: var(--md-font-h5); color: var(--md-text-primary); margin-bottom: var(--md-spacing-lg); } .kitagrada-lost-password-card { max-width: 480px; margin: 0 auto; } /* Campos reaproveitando o mesmo visual dos inputs do checkout */ .woocommerce-form-login .form-row input.input-text, .woocommerce-form-register .form-row input.input-text, .woocommerce-ResetPassword .form-row input.input-text, .woocommerce-EditAccountForm .form-row input.input-text, .woocommerce-address-fields .form-row input.input-text, .woocommerce-address-fields .form-row select { width: 100%; padding: var(--md-spacing-md); border: 1px solid var(--md-divider); border-radius: var(--md-radius-sm); font: var(--md-font-body1); background: var(--md-surface); transition: all var(--md-transition-fast); } .woocommerce-form-login .form-row input.input-text:focus, .woocommerce-form-register .form-row input.input-text:focus, .woocommerce-ResetPassword .form-row input.input-text:focus, .woocommerce-EditAccountForm .form-row input.input-text:focus, .woocommerce-address-fields .form-row input.input-text:focus, .woocommerce-address-fields .form-row select:focus { outline: none; border-color: var(--md-primary); background: white; box-shadow: 0 0 0 2px rgba(217, 125, 140, 0.1); } /* Select2 (País/Estado) fora do checkout — endereços, dados da conta */ .woocommerce-address-fields .select2-container--default .select2-selection--single, .woocommerce-EditAccountForm .select2-container--default .select2-selection--single { height: auto; min-height: 48px; display: flex; align-items: center; padding: 0 var(--md-spacing-md); border: 1px solid var(--md-divider); border-radius: var(--md-radius-sm); background: var(--md-surface); transition: all var(--md-transition-fast); } .woocommerce-address-fields .select2-container--default .select2-selection--single .select2-selection__rendered, .woocommerce-EditAccountForm .select2-container--default .select2-selection--single .select2-selection__rendered { padding: 0; line-height: normal; color: var(--md-text-primary); } .woocommerce-address-fields .select2-container--default .select2-selection--single .select2-selection__arrow, .woocommerce-EditAccountForm .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; top: 0; right: var(--md-spacing-sm); } .woocommerce-address-fields .select2-container--default.select2-container--focus .select2-selection--single, .woocommerce-address-fields .select2-container--default.select2-container--open .select2-selection--single, .woocommerce-EditAccountForm .select2-container--default.select2-container--focus .select2-selection--single, .woocommerce-EditAccountForm .select2-container--default.select2-container--open .select2-selection--single { border-color: var(--md-primary); background: white; box-shadow: 0 0 0 2px rgba(217, 125, 140, 0.1); } .woocommerce-form-login .form-row label, .woocommerce-form-register .form-row label, .woocommerce-ResetPassword .form-row label, .woocommerce-EditAccountForm .form-row label, .woocommerce-address-fields .form-row label { display: block; font: var(--md-font-subtitle2); color: var(--md-text-secondary); margin-bottom: var(--md-spacing-xs); } /* Botão nativo de mostrar/ocultar senha do WooCommerce (password-strength-meter.js) — escondido em favor do botão próprio do tema (kitagrada-password-toggle, abaixo), que fica posicionado dentro do campo. */ .woocommerce-form-login .show-password-input, .woocommerce-form-register .show-password-input, .woocommerce-ResetPassword .show-password-input, .woocommerce-EditAccountForm .show-password-input { display: none !important; } /* Botão de mostrar/ocultar senha (inserido via JS — kitagrada-main.js, passwordToggle) em volta do */ .kitagrada-password-field { position: relative; display: block; line-height: 0; } .kitagrada-password-field input.input-text { display: block; width: 100%; padding-right: 44px; } .kitagrada-password-toggle { position: absolute; top: 50%; right: var(--md-spacing-sm); transform: translateY(-50%); display: flex; align-items: center; justify-content: center; background: none; border: none; padding: 4px; color: var(--md-text-light); cursor: pointer; } .kitagrada-password-toggle:hover { color: var(--md-primary); } .woocommerce-form-login__rememberme { display: inline-flex; align-items: center; gap: 6px; font: var(--md-font-body2); color: var(--md-text-secondary); } .kitagrada-account-auth-actions { display: flex; align-items: center; justify-content: space-between; gap: var(--md-spacing-md); flex-wrap: wrap; } .woocommerce-LostPassword { margin-top: var(--md-spacing-sm); font: var(--md-font-body2); } /* Minha Conta (área logada) */ .kitagrada-myaccount-page .woocommerce-MyAccount-navigation { margin-bottom: var(--md-spacing-lg); } .kitagrada-account-navigation ul { list-style: none; margin: 0; padding: 0; background: white; border-radius: var(--md-radius-md); box-shadow: var(--md-elevation-1); overflow: hidden; } .kitagrada-account-navigation li { border-bottom: 1px solid var(--md-divider); } .kitagrada-account-navigation li:last-child { border-bottom: none; } .kitagrada-account-navigation li a { display: flex; align-items: center; gap: var(--md-spacing-sm); padding: var(--md-spacing-md) var(--md-spacing-lg); color: var(--md-text-secondary); font: var(--md-font-subtitle2); transition: all var(--md-transition-fast); } .kitagrada-account-navigation li a:hover { background: var(--primary-light); color: var(--md-primary); } .kitagrada-account-navigation li.is-active a { background: var(--primary-lighter); color: var(--md-primary-dark); font-weight: 500; } .kitagrada-myaccount-page .woocommerce-MyAccount-content > p:first-child { color: var(--md-text-secondary); } .kitagrada-account-card, .kitagrada-orders-card { padding: var(--md-spacing-xl); margin-bottom: var(--md-spacing-lg); } .kitagrada-account-card h3 { font: var(--md-font-h6); color: var(--md-primary); margin-bottom: var(--md-spacing-md); padding-bottom: var(--md-spacing-sm); border-bottom: 2px solid var(--md-divider); } .kitagrada-account-fields-grid, .kitagrada-address-fields-grid { gap: 0 var(--md-spacing-md); } .kitagrada-account-password-fieldset { border: none; padding: 0; margin: var(--md-spacing-md) 0 0 0; } .kitagrada-account-password-fieldset legend { font: var(--md-font-subtitle1); color: var(--md-text-primary); margin-bottom: var(--md-spacing-sm); padding: 0; } .kitagrada-field-hint { display: block; font: var(--md-font-caption); color: var(--md-text-light); margin-top: 4px; } .kitagrada-account-form-actions { margin-top: var(--md-spacing-lg); } .kitagrada-account-form-actions .btn { margin-right: var(--md-spacing-sm); } /* Endereços */ .kitagrada-address-card address { color: var(--md-text-secondary); line-height: 1.8; font-style: normal; } .woocommerce-Address-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--md-spacing-sm); } .woocommerce-Address-title h3 { font: var(--md-font-h6); color: var(--md-text-primary); margin: 0; border: none; padding: 0; } /* Pedidos — .woocommerce-orders-table é a classe que o WooCommerce sempre gera (com ou sem o template customizado myaccount/my-orders.php do tema), então o seletor usa ela em vez de depender só da classe kitagrada-*. */ .woocommerce-orders-table { width: 100%; border-collapse: separate; border-spacing: 0; background: white; border-radius: var(--md-radius-md); overflow: hidden; } .woocommerce-orders-table th, .woocommerce-orders-table td { padding: var(--md-spacing-md); text-align: left; border-bottom: 1px solid var(--md-divider); font: var(--md-font-body2); } .woocommerce-orders-table th { color: var(--md-text-light); font: var(--md-font-caption); text-transform: uppercase; letter-spacing: 0.5px; } .woocommerce-orders-table tr:last-child td { border-bottom: none; } .woocommerce-orders-table th.woocommerce-orders-table__header-order-total, .woocommerce-orders-table td.woocommerce-orders-table__cell-order-total, .woocommerce-orders-table th.woocommerce-orders-table__header-order-actions, .woocommerce-orders-table td.woocommerce-orders-table__cell-order-actions { text-align: right; } .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions a { display: inline-flex; align-items: center; padding: 6px var(--md-spacing-md); border: 1px solid var(--md-primary); border-radius: var(--md-radius-sm); font: var(--md-font-caption); text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; color: var(--md-primary); transition: all var(--md-transition-fast); } .woocommerce-orders-table .woocommerce-orders-table__cell-order-actions a:hover { background: var(--primary-lighter); } .kitagrada-order-status-badge { text-transform: capitalize; } .kitagrada-order-status--completed, .kitagrada-order-status--processing { background-color: var(--accent-mint); color: #2d7a5f; } .kitagrada-order-status--on-hold, .kitagrada-order-status--pending { background-color: var(--accent-peach); color: #a15c2a; } .kitagrada-order-status--cancelled, .kitagrada-order-status--refunded, .kitagrada-order-status--failed { background-color: var(--divider); color: var(--md-text-secondary); } /* Sem o template customizado (que embrulha o status num ), o WooCommerce imprime o status como texto puro — dá pra colorir mesmo assim via classe de status que já vem na . */ .woocommerce-orders-table__row--status-completed td.woocommerce-orders-table__cell-order-status, .woocommerce-orders-table__row--status-processing td.woocommerce-orders-table__cell-order-status { color: #2d7a5f; font-weight: 500; } .woocommerce-orders-table__row--status-on-hold td.woocommerce-orders-table__cell-order-status, .woocommerce-orders-table__row--status-pending td.woocommerce-orders-table__cell-order-status { color: #a15c2a; font-weight: 500; } .woocommerce-orders-table__row--status-cancelled td.woocommerce-orders-table__cell-order-status, .woocommerce-orders-table__row--status-refunded td.woocommerce-orders-table__cell-order-status, .woocommerce-orders-table__row--status-failed td.woocommerce-orders-table__cell-order-status { color: var(--md-text-secondary); } @media (max-width: 768px) { .woocommerce-orders-table thead { display: none; } .woocommerce-orders-table, .woocommerce-orders-table tbody, .woocommerce-orders-table tr, .woocommerce-orders-table td { display: block; width: 100%; } .woocommerce-orders-table tr { margin-bottom: var(--md-spacing-md); } .woocommerce-orders-table tr:last-child { margin-bottom: 0; } .woocommerce-orders-table td { display: flex; align-items: center; justify-content: space-between; gap: var(--md-spacing-md); text-align: right; border-bottom: 1px solid var(--md-divider); } .woocommerce-orders-table tr:last-child td:last-child { border-bottom: none; } .woocommerce-orders-table td::before { content: attr(data-title); font: var(--md-font-caption); color: var(--md-text-light); text-transform: uppercase; letter-spacing: 0.5px; text-align: left; } } .kitagrada-orders-pagination { display: flex; justify-content: center; gap: var(--md-spacing-sm); margin-top: var(--md-spacing-lg); } .kitagrada-empty-state { text-align: center; padding: var(--md-spacing-xxl) var(--md-spacing-xl); } .kitagrada-empty-state-icon { font-size: 48px; color: var(--md-divider); margin-bottom: var(--md-spacing-md); } .kitagrada-empty-state p { margin-bottom: var(--md-spacing-lg); } .kitagrada-order-summary-card, .kitagrada-order-notes-card, .kitagrada-order-details-card { margin-bottom: var(--md-spacing-lg); } .woocommerce-OrderUpdates { list-style: none; margin: 0; padding: 0; } .woocommerce-OrderUpdate { padding: var(--md-spacing-md) 0; border-bottom: 1px solid var(--md-divider); } .woocommerce-OrderUpdate:last-child { border-bottom: none; } .woocommerce-OrderUpdate-meta { font: var(--md-font-caption); color: var(--md-text-light); margin: 0 0 4px 0; } /* Títulos dentro dos cards de pedido (o h2 global do tema é um heading de página inteira, grande demais para um título de seção dentro de um card) */ .kitagrada-order-notes-card h2, .woocommerce-order-details__title, .woocommerce-order-downloads__title, .woocommerce-column__title { font: var(--md-font-h6); color: var(--md-primary); margin: 0 0 var(--md-spacing-md) 0; padding-bottom: var(--md-spacing-sm); border-bottom: 2px solid var(--md-divider); } /* Tabela de itens do pedido (detalhe do pedido / revisão), reaproveitando o mesmo visual da tabela de revisão do checkout */ .kitagrada-order-details-card table.shop_table { width: 100%; border-collapse: collapse; } .kitagrada-order-details-card table.shop_table th, .kitagrada-order-details-card table.shop_table td { padding: var(--md-spacing-md); text-align: left; border-bottom: 1px solid var(--md-divider); font: var(--md-font-body2); } .kitagrada-order-details-card table.shop_table tfoot tr:last-child th, .kitagrada-order-details-card table.shop_table tfoot tr:last-child td { font: var(--md-font-h6); color: var(--md-primary); border-bottom: none; } .kitagrada-order-details-card address { font-style: normal; color: var(--md-text-secondary); line-height: 1.8; } @media (max-width: 959px) { .kitagrada-account-fields-grid, .kitagrada-address-fields-grid, .kitagrada-addresses-grid { grid-template-columns: 1fr; } } @media (max-width: 599px) { .kitagrada-account-auth-actions { flex-direction: column; align-items: flex-start; } } /* ========== PEDIDO CONFIRMADO (checkout/order-received) ========== Usa o template padrão do WooCommerce (thankyou.php) — só CSS, sem override. .woocommerce-order só existe dentro de .checkout-page nessa tela. */ .checkout-page .woocommerce-order { max-width: 880px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-lg); } /* Cartão de sucesso */ .checkout-page .woocommerce-thankyou-order-received { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); margin: 0; padding: var(--space-xl) var(--space-lg); background: linear-gradient(135deg, var(--primary-light) 0%, var(--accent-cream) 100%); border: 1px solid var(--primary-lighter); border-radius: var(--radius-xl); text-align: center; font-size: 20px; font-weight: 600; color: var(--text-primary); } .checkout-page .woocommerce-thankyou-order-received::before { content: 'check_circle'; font-family: 'Material Symbols Outlined'; font-size: 56px; line-height: 1; font-weight: 300; color: var(--primary); font-variation-settings: 'FILL' 1; } .checkout-page .woocommerce-thankyou-order-received::after { content: 'Enviamos os detalhes do pedido para o seu e-mail.'; max-width: 480px; font-size: 14px; font-weight: 400; color: var(--text-secondary); } /* Pedido que falhou (pagamento recusado) */ .checkout-page .woocommerce-thankyou-order-failed { margin: 0; padding: var(--space-md) var(--space-lg); background: var(--primary-light); border-left: 4px solid var(--primary-dark); border-radius: var(--radius-md); color: var(--text-primary); } .checkout-page .woocommerce-thankyou-order-failed-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: 0; } /* Resumo: número, data, e-mail, total, pagamento */ .checkout-page .woocommerce-order-overview { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-flow: dense; gap: var(--space-sm); list-style: none; margin: 0; padding: 0; } .checkout-page .woocommerce-order-overview li { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: var(--space-md); background: var(--background); border: 1px solid var(--divider); border-radius: var(--radius-lg); box-shadow: var(--shadow-subtle); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-light); } .checkout-page .woocommerce-order-overview li strong { font-size: 15px; font-weight: 700; text-transform: none; letter-spacing: 0; color: var(--text-primary); overflow-wrap: anywhere; } /* E-mail ocupa 2 colunas para não quebrar no meio; dense puxa o "Total" para a 1ª linha */ .checkout-page .woocommerce-order-overview__email { grid-column: span 2; } .checkout-page .woocommerce-order-overview__total strong { color: var(--primary-dark); } /* Tabela de parcelamento que o Mercado Pago injeta (div sem classe) — aparece duas vezes: logo após o resumo e dentro de "Detalhes do pedido". A de cima é escondida (duplicada); a de dentro perde o margin-top:-24px inline que a fazia sobrepor a linha anterior. */ .checkout-page .woocommerce-order > div:not([class]) { display: none; } .checkout-page .woocommerce-order-details > div:not([class]) > table { margin: 0 !important; width: 100%; border-collapse: collapse; } .checkout-page .woocommerce-order-details > div:not([class]) th, .checkout-page .woocommerce-order-details > div:not([class]) td { padding: 6px 0; font-size: 13px; font-weight: 400; color: var(--text-secondary); text-align: left; } .checkout-page .woocommerce-order-details > div:not([class]) td { text-align: right; color: var(--text-primary); } /* Detalhes do pedido e endereços em cartões */ .checkout-page .woocommerce-order-details, .checkout-page .woocommerce-customer-details .woocommerce-column { margin: 0; padding: var(--space-lg); background: var(--background); border: 1px solid var(--divider); border-radius: var(--radius-lg); box-shadow: var(--shadow-subtle); } .checkout-page .woocommerce-order-details .order_details { width: 100%; border-collapse: collapse; font-size: 14px; } .checkout-page .woocommerce-order-details .order_details th, .checkout-page .woocommerce-order-details .order_details td { padding: var(--space-sm) 0; border-bottom: 1px solid var(--divider); text-align: left; vertical-align: top; color: var(--text-primary); } .checkout-page .woocommerce-order-details .order_details .product-total, .checkout-page .woocommerce-order-details .order_details tfoot td { text-align: right; } .checkout-page .woocommerce-order-details .order_details thead th { padding-top: 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-light); } .checkout-page .woocommerce-order-details .order_details .product-name a { color: var(--text-primary); font-weight: 600; text-decoration: none; } .checkout-page .woocommerce-order-details .order_details .product-name a:hover { color: var(--primary); } .checkout-page .woocommerce-order-details .order_details .product-quantity { margin-left: 4px; font-weight: 400; color: var(--text-light); } .checkout-page .woocommerce-order-details .order_details .wc-item-meta { list-style: none; margin: 4px 0 0; padding: 0; font-size: 12px; color: var(--text-secondary); } .checkout-page .woocommerce-order-details .order_details tfoot th { font-weight: 400; color: var(--text-secondary); } .checkout-page .woocommerce-order-details .order_details .shipped_via { display: block; font-size: 12px; color: var(--text-light); } /* Linha "Total" em destaque (penúltima; a última é "Método de pagamento") */ .checkout-page .woocommerce-order-details .order_details tfoot tr:nth-last-child(2) th, .checkout-page .woocommerce-order-details .order_details tfoot tr:nth-last-child(2) td { font-size: 16px; font-weight: 700; color: var(--text-primary); } .checkout-page .woocommerce-order-details .order_details tfoot tr:nth-last-child(2) td { color: var(--primary-dark); } .checkout-page .woocommerce-order-details .order_details tfoot tr:last-child th, .checkout-page .woocommerce-order-details .order_details tfoot tr:last-child td { border-bottom: none; } .checkout-page .woocommerce-order-details > div:not([class]) { margin-top: var(--space-sm); padding: var(--space-sm) var(--space-md); background: var(--surface); border-radius: var(--radius-md); } /* Endereços lado a lado */ .checkout-page .woocommerce-customer-details .addresses { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-md); } .checkout-page .woocommerce-customer-details .addresses::before, .checkout-page .woocommerce-customer-details .addresses::after { display: none; } .checkout-page .woocommerce-customer-details .woocommerce-column { width: auto; float: none; } .checkout-page .woocommerce-customer-details address { font-style: normal; font-size: 14px; line-height: 1.7; color: var(--text-secondary); } .checkout-page .woocommerce-customer-details address p { margin: var(--space-xs) 0 0; color: var(--text-secondary); } .checkout-page .woocommerce-customer-details > p { margin: var(--space-sm) 0 0; font-size: 13px; color: var(--text-secondary); } /* Botões no fim (kitagrada_thankyou_actions() em functions.php) */ .kitagrada-thankyou-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-sm); } .kitagrada-thankyou-actions .btn { display: inline-flex; align-items: center; gap: 8px; } .kitagrada-thankyou-actions .material-symbols-outlined { font-size: 20px; } @media (max-width: 599px) { .checkout-page .woocommerce-thankyou-order-received { padding: var(--space-lg) var(--space-md); font-size: 18px; } .checkout-page .woocommerce-order-details, .checkout-page .woocommerce-customer-details .woocommerce-column { padding: var(--space-md); } .checkout-page .woocommerce-customer-details .addresses { grid-template-columns: 1fr; } .checkout-page .woocommerce-order-overview { grid-template-columns: repeat(2, 1fr); } .kitagrada-thankyou-actions .btn { width: 100%; justify-content: center; } } /* ========== RESPONSIVE ========== */ @media (max-width: 959px) { .woocommerce .products { grid-template-columns: repeat(2, 1fr); gap: var(--md-spacing-md); } } @media (max-width: 599px) { .woocommerce .products { grid-template-columns: 1fr; } .single-product .product .summary { padding-left: 0; margin-top: var(--md-spacing-lg); } }