/* Usa as variáveis globais definidas em assets/css/variables.css */ /* ── Page (versão específica destas páginas) ── Usa "main.page" para não afetar o . */ main.page { position: relative; z-index: 1; max-width: 1300px; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3.5rem); } /* ── Breadcrumb ── */ .breadcrumb { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-body); font-size: .7rem; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; color: black; background: #ffffff; border: 2px dashed #f180b4; border-radius: var(--radius-lg); padding: .75rem 1.25rem; margin-top: 2rem; margin-bottom: 2.5rem; width: fit-content; } .breadcrumb a { color: black; text-decoration: none; transition: color .2s; } .breadcrumb a:hover { color: #F180B4; } .breadcrumb span { color: var(--border-mid); } .breadcrumb span:last-child { color: var(--ink-mid); } /* ── Container geral ── */ .wc-page-wrap { background: #fff; border: 3px dashed #f180b4; border-radius: var(--radius-lg); padding: clamp(1.5rem, 4vw, 3rem); margin-bottom: 3rem; font-family: var(--font-body); color: black; } /* ── Títulos dentro do WooCommerce (ex: "Cupão", "Encomenda") ── */ .wc-page-wrap h2, .wc-page-wrap h3 { font-family: 'Caracolina', serif; font-weight: 400; color: black; margin-bottom: 1rem; } /* ── Tabela do carrinho ── */ .wc-page-wrap table.shop_table { width: 100%; border-collapse: collapse; margin-bottom: 2rem; } .wc-page-wrap table.shop_table th { font-family: var(--font-body); font-size: .7rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); text-align: left; padding: .75rem; border-bottom: 2px dashed var(--border-mid); } .wc-page-wrap table.shop_table td { padding: 1rem .75rem; border-bottom: 1px solid var(--border); vertical-align: middle; } .wc-page-wrap td.product-name a { font-family: 'Caracolina', serif; font-size: 1.2rem; color: black; text-decoration: none; } .wc-page-wrap td.product-thumbnail img { width: 70px; height: auto; border-radius: var(--radius-lg); border: 1px solid var(--border); } .wc-page-wrap td.product-remove a { color: #ED3244; font-size: 1.2rem; text-decoration: none; } /* ── Quantidade (mesmo estilo das páginas de produto) ── */ .wc-page-wrap .quantity { display: inline-flex; align-items: center; background: #fff; border: 2px dashed #f180b4; border-radius: 100px; padding: .2rem .4rem; } .wc-page-wrap .quantity .qty { width: 40px; text-align: center; border: none; background: transparent; font-family: 'Caracolina', serif; font-size: 1.1rem; color: black; } /* ── Cupão ── */ .wc-page-wrap .coupon { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.5rem; } .wc-page-wrap .coupon input#coupon_code { border: 1px solid var(--border-mid); border-radius: 100px; padding: .6rem 1.1rem; font-family: var(--font-body); font-size: .85rem; } /* ── Totais ── */ .wc-page-wrap .cart_totals, .wc-page-wrap .checkout-order-review, .wc-page-wrap #order_review { background: var(--surface); border: 2px dashed var(--border-mid); border-radius: var(--radius-lg); padding: 1.5rem; } .wc-page-wrap .cart_totals table, .wc-page-wrap #order_review table { width: 100%; } .wc-page-wrap .cart_totals table td, .wc-page-wrap .cart_totals table th, .wc-page-wrap #order_review table td, .wc-page-wrap #order_review table th { padding: .6rem 0; border-bottom: 1px solid var(--border); } .wc-page-wrap .order-total .amount, .wc-page-wrap .order-total th { font-family: 'Caracolina', serif; font-size: 1.3rem; color: black; } /* ── Botões (checkout, atualizar carrinho, etc.) ── */ .wc-page-wrap .button, .wc-page-wrap input[type="submit"], .wc-page-wrap #place_order { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: .78rem; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); background: transparent; border: 2px dashed #f180b4; border-radius: 100px; padding: 1rem 1.75rem; cursor: pointer; transition: background .2s ease, color .2s ease; text-decoration: none; } .wc-page-wrap .button:hover, .wc-page-wrap input[type="submit"]:hover, .wc-page-wrap #place_order:hover { background: rgba(241,128,180,.08); color: var(--ink); } .wc-page-wrap #place_order, .wc-page-wrap .checkout-button { background: #44C2CC; border-style: solid; color: var(--ink); width: 100%; margin-top: 1rem; } .wc-page-wrap #place_order:hover, .wc-page-wrap .checkout-button:hover { background: pink; } /* ── Formulário de checkout (morada, faturação, etc.) ── */ .wc-page-wrap .form-row label { font-family: var(--font-body); font-size: .72rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .3rem; display: block; } .wc-page-wrap .form-row input, .wc-page-wrap .form-row select, .wc-page-wrap .form-row textarea { width: 100%; border: 1px solid var(--border-mid); border-radius: var(--radius-lg); padding: .7rem .9rem; font-family: var(--font-body); font-size: .9rem; background: #fff; } .wc-page-wrap .form-row input:focus, .wc-page-wrap .form-row select:focus, .wc-page-wrap .form-row textarea:focus { outline: none; border-color: #f180b4; } /* ── Métodos de envio/pagamento ── */ .wc-page-wrap ul#shipping_method, .wc-page-wrap ul.wc_payment_methods { list-style: none; padding: 0; } .wc-page-wrap ul.wc_payment_methods li { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem; margin-bottom: .6rem; } .wc-page-wrap .payment_box { background: var(--surface); border-radius: var(--radius-lg); padding: 1rem; margin-top: .75rem; font-size: .85rem; } /* ── Mensagens (carrinho vazio, cupão inválido, etc.) ── */ .wc-page-wrap .woocommerce-info, .wc-page-wrap .woocommerce-message, .wc-page-wrap .woocommerce-error { background: var(--surface); border: 2px dashed var(--border-mid); border-radius: var(--radius-lg); padding: 1rem 1.5rem; list-style: none; font-family: var(--font-body); font-size: .9rem; color: black; } /* ══════════════════════════════════════════ Cart Block (bloco novo do WooCommerce) O carrinho pode estar a usar o bloco Gutenberg em vez do sistema clássico — estas regras cobrem esse caso. ══════════════════════════════════════════ */ /* Imagem do produto, maior */ .wc-block-cart-item__image img, .wc-block-components-product-image img { width: 110px !important; height: auto !important; border-radius: var(--radius-lg); border: 1px solid var(--border); } /* Nome do produto a rosa */ .wc-block-components-product-name, .wc-block-cart-item__product-name { font-family: 'Caracolina', serif; font-size: 1.3rem; color: #f180b4 !important; text-decoration: none; } a.wc-block-components-product-name:hover { color: #d4a5a0 !important; } /* Botão "Finalizar compra" / "Proceed to Checkout" */ .wc-block-cart__submit-button, .wp-block-woocommerce-proceed-to-checkout-block a, .wc-block-components-checkout-place-order-button { display: inline-flex !important; align-items: center; justify-content: center; width: 100%; font-family: var(--font-body) !important; font-size: .78rem !important; font-weight: 500 !important; letter-spacing: .14em !important; text-transform: uppercase !important; color: var(--ink) !important; background: transparent !important; border: 2px dashed #f180b4 !important; border-radius: 100px !important; padding: 1rem 1.75rem !important; transition: background .2s ease, color .2s ease; } .wc-block-cart__submit-button:hover, .wp-block-woocommerce-proceed-to-checkout-block a:hover { background: rgba(241,128,180,.08) !important; } /* Totais do bloco */ .wc-block-components-totals-wrapper, .wc-block-cart__totals-title { font-family: var(--font-body); } .wc-block-components-totals-footer-item .wc-block-components-formatted-money-amount { font-family: 'Caracolina', serif; font-size: 1.2rem; color: black; } /* ══════════════════════════════════════════ Responsivo (telemóvel) ══════════════════════════════════════════ */ @media (max-width: 760px) { .wc-page-wrap { padding: 1rem; } .wc-page-wrap table.shop_table thead { display: none; /* cabeçalhos escondidos, cada linha explica-se sozinha */ } .wc-page-wrap table.shop_table, .wc-page-wrap table.shop_table tbody, .wc-page-wrap table.shop_table tr, .wc-page-wrap table.shop_table td { display: block; width: 100%; } .wc-page-wrap table.shop_table tr { border-bottom: 2px dashed var(--border-mid); padding-bottom: 1rem; margin-bottom: 1rem; } .wc-page-wrap td.product-thumbnail img { width: 90px; } /* Cart Block: colunas empilham em vez de lado a lado */ .wp-block-woocommerce-cart-block, .wc-block-cart .wc-block-cart__totals-title { flex-direction: column; } .wc-block-cart-item__image img, .wc-block-components-product-image img { width: 90px !important; } /* Cada linha de produto (Cart Block): imagem à esquerda, nome/preço/descrição/quantidade à direita, lado a lado. */ tr[class*="wc-block-cart-items"] { display: grid !important; grid-template-columns: 90px 1fr !important; grid-template-rows: auto auto !important; column-gap: .85rem; row-gap: .25rem; padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 2px dashed var(--border-mid); } td.wc-block-cart-item__image { grid-column: 1 !important; grid-row: 1 / 3 !important; } td.wc-block-cart-item__product { grid-column: 2 !important; grid-row: 1 !important; padding: 0 !important; } td.wc-block-cart-item__total { grid-column: 2 !important; grid-row: 2 !important; padding: 0 !important; text-align: left !important; } .wc-block-cart-item__prices { display: none !important; } }