/* ============================================================================= ORIII — WooCommerce (vitrine, produto, carrinho, checkout, conta) Design System v1.0 — linguagem editorial e premium. Nota: o Hello Elementor NÃO envolve o conteúdo da loja num nas páginas de arquivo/carrinho/checkout — a classe "woocommerce" fica só no . Por isso todos os seletores abaixo são ancorados apenas em ".oriii" (as classes-alvo já são exclusivas do WooCommerce). ========================================================================== */ .oriii.woocommerce, .oriii.woocommerce-page { font-family: var(--font-body); color: var(--color-text-primary); } /* Largura de leitura das páginas da loja */ .oriii.woocommerce-page .site-main, .oriii.archive .site-main, .oriii.single-product .site-main, .oriii.woocommerce-cart .site-main, .oriii.woocommerce-checkout .site-main, .oriii.woocommerce-account .site-main { max-width: var(--container-max); margin-inline: auto; padding: var(--space-8) var(--gutter) var(--space-9); } /* -------------------------------------------------------------------------- Breadcrumb + cabeçalho de arquivo ----------------------------------------------------------------------- */ .oriii .woocommerce-breadcrumb { font-size: var(--fs-caption); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-secondary); margin-bottom: var(--space-7); } .oriii .woocommerce-breadcrumb a { color: var(--color-text-secondary); } .oriii .woocommerce-breadcrumb a:hover { color: var(--color-accent); } .oriii .o-crumb-sep { color: var(--color-border-subtle); margin: 0 var(--space-1); } .oriii .woocommerce-products-header { text-align: center; max-width: 640px; margin: 0 auto var(--space-8); } /* Nosso banner (.o-shop-hero) substitui o cabeçalho padrão do WooCommerce */ .oriii .o-shop-hero ~ .woocommerce-products-header { display: none !important; } .oriii .woocommerce-products-header__title, .oriii .product_title, .oriii h1.entry-title { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.04em; font-size: clamp(2rem, 1.4rem + 2.4vw, var(--fs-heading-xl)); line-height: var(--lh-heading); } .oriii .woocommerce-products-header::after { content: "\2726"; display: block; margin-top: var(--space-4); color: var(--color-accent); font-size: var(--fs-body-sm); } .oriii .term-description { color: var(--color-text-secondary); font-family: var(--font-editorial); margin-top: var(--space-3); } /* Barra: contagem à esquerda, ordenação à direita, mesma linha */ .oriii .woocommerce-result-count { float: left; margin: 0; padding-top: var(--space-2); font-size: var(--fs-caption); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-secondary); } .oriii .woocommerce-ordering { float: right; margin: 0; } .oriii .woocommerce-ordering select { font-size: var(--fs-body-sm); max-width: 280px; min-height: 42px; background-color: transparent; } .oriii ul.products { clear: both; padding-top: var(--space-6) !important; border-top: 1px solid var(--color-border-subtle); margin-top: var(--space-5) !important; } /* -------------------------------------------------------------------------- Loja — banner, navegação por coleção, CTAs, garantias ----------------------------------------------------------------------- */ .oriii .o-shop-hero { background: var(--color-brand-navy); color: var(--color-text-inverse); border-radius: var(--radius-md); padding: clamp(var(--space-7), 5vw, var(--space-9)) clamp(var(--space-6), 5vw, var(--space-9)); margin-bottom: var(--space-7); text-align: center; position: relative; overflow: hidden; } .oriii .o-shop-hero::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(207, 194, 175, 0.5) 1px, transparent 0); background-size: 30px 30px; opacity: 0.07; pointer-events: none; } .oriii .o-shop-hero__inner { position: relative; max-width: 640px; margin-inline: auto; } .oriii .o-shop-hero .eyebrow { color: var(--color-accent); } .oriii .o-shop-hero__title { font-family: var(--font-display); font-weight: 600; color: var(--color-brand-ivory); font-size: clamp(1.9rem, 1.3rem + 2.4vw, var(--fs-heading-xl)); line-height: var(--lh-heading); margin: 0 0 var(--space-4); } .oriii .o-shop-hero__text { font-family: var(--font-editorial); font-size: var(--fs-body-lg); line-height: 1.6; color: var(--color-brand-sand); margin-bottom: var(--space-6); } .oriii .o-shop-hero__text p { margin: 0; } .oriii .o-shop-hero__cta { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; } /* Navegação por coleção */ .oriii .o-shop-cats { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-bottom: var(--space-5); margin-bottom: var(--space-2); } .oriii .o-shop-cats__pill { display: inline-flex; align-items: center; padding: var(--space-2) var(--space-5); min-height: 40px; border: 1px solid var(--color-border-subtle); border-radius: 999px; font-size: var(--fs-caption); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-secondary); background: var(--color-surface); transition: border-color var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease), background-color var(--duration-fast) var(--ease); } .oriii .o-shop-cats__pill:hover { border-color: var(--color-brand-navy); color: var(--color-text-primary); } .oriii .o-shop-cats__pill.is-active { background: var(--color-brand-navy); border-color: var(--color-brand-navy); color: var(--color-text-inverse); } /* Chamada para personalização */ .oriii .o-shop-cta { margin-top: var(--space-9); padding: clamp(var(--space-6), 4vw, var(--space-8)); background: var(--color-surface-muted); border: 1px solid var(--color-border-subtle); border-left: 3px solid var(--color-accent); border-radius: var(--radius-md); display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; } .oriii .o-shop-cta__body { max-width: 46ch; } .oriii .o-shop-cta .eyebrow { margin-bottom: var(--space-2); } .oriii .o-shop-cta h2 { font-size: var(--fs-heading-sm); margin: 0 0 var(--space-2); } .oriii .o-shop-cta p { margin: 0; color: var(--color-text-secondary); font-size: var(--fs-body-sm); } .oriii .o-shop-cta .o-btn { flex: 0 0 auto; } /* Faixa de garantias */ .oriii .o-shop-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); margin-top: var(--space-8); padding-top: var(--space-7); border-top: 1px solid var(--color-border-subtle); } .oriii .o-shop-trust__item { display: flex; gap: var(--space-4); align-items: flex-start; } .oriii .o-shop-trust__item svg { color: var(--color-accent); flex: 0 0 auto; margin-top: 2px; } .oriii .o-shop-trust__item strong { display: block; font-size: var(--fs-body-sm); letter-spacing: 0.04em; } .oriii .o-shop-trust__item span { font-size: var(--fs-caption); color: var(--color-text-secondary); } @media (max-width: 780px) { .oriii .o-shop-cta { flex-direction: column; align-items: flex-start; text-align: left; } .oriii .o-shop-trust { grid-template-columns: 1fr; gap: var(--space-4); } .oriii .woocommerce-ordering { text-align: left; margin-top: var(--space-3); } .oriii .woocommerce-result-count { display: block; } } /* -------------------------------------------------------------------------- Grade de produtos (vitrine, [products], relacionados, upsell) ----------------------------------------------------------------------- */ .oriii ul.products { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: var(--space-8) var(--space-5); margin: 0 !important; padding: 0 !important; list-style: none; } .oriii ul.products::before, .oriii ul.products::after { content: none !important; display: none !important; } .oriii ul.products.columns-1 { grid-template-columns: 1fr; } .oriii ul.products.columns-2 { grid-template-columns: repeat(2, 1fr); } .oriii ul.products.columns-4 { grid-template-columns: repeat(4, 1fr); } .oriii ul.products.columns-5 { grid-template-columns: repeat(5, 1fr); } .oriii ul.products.columns-6 { grid-template-columns: repeat(6, 1fr); } .oriii ul.products li.product, .oriii ul.products li.product-category { width: auto !important; margin: 0 !important; padding: 0 !important; float: none !important; clear: none !important; text-align: left; display: flex; flex-direction: column; position: relative; } .oriii ul.products li.product::before, .oriii ul.products li.product::after { content: none !important; } .oriii ul.products li.product a.woocommerce-LoopProduct-link { display: flex; flex-direction: column; flex: 1 1 auto; } .oriii ul.products li.product .o-card-media, .oriii ul.products li.product a.woocommerce-LoopProduct-link > img { position: relative; overflow: hidden; background: var(--color-surface-muted); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); margin: 0 0 var(--space-5); aspect-ratio: 1 / 1; object-fit: cover; width: 100%; transition: transform var(--duration-slow) var(--ease); } .oriii ul.products li.product:hover a.woocommerce-LoopProduct-link > img { transform: scale(1.03); } .oriii ul.products li.product .woocommerce-loop-product__title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-body-lg); letter-spacing: 0.02em; line-height: 1.3; color: var(--color-text-primary); margin: 0 0 var(--space-2); min-height: 2.6em; /* alinha preço/botão entre cards de 1 e 2 linhas */ } .oriii ul.products li.product .price { font-family: var(--font-body); font-size: var(--fs-body-sm); font-weight: 500; color: var(--color-text-secondary); margin: 0 0 var(--space-4); } .oriii ul.products li.product .price ins { text-decoration: none; color: var(--color-text-primary); font-weight: 600; } .oriii ul.products li.product .price del { color: var(--color-text-secondary); opacity: 0.55; margin-right: var(--space-2); } .oriii ul.products li.product .star-rating { margin: 0 0 var(--space-3); } /* Botão do loop — contorno, fixado na base do card */ .oriii ul.products li.product > a.button, .oriii ul.products li.product > .button, .oriii ul.products li.product .added_to_cart { margin-top: auto; align-self: flex-start; background: transparent !important; color: var(--color-brand-navy) !important; border: 1px solid var(--color-brand-navy) !important; font-size: var(--fs-caption); letter-spacing: var(--tracking-button); padding: var(--space-3) var(--space-5); min-height: 44px; border-radius: var(--radius-md); } .oriii ul.products li.product > a.button:hover, .oriii ul.products li.product > .button:hover, .oriii ul.products li.product .added_to_cart:hover { background: var(--color-brand-navy) !important; color: var(--color-text-inverse) !important; } /* Estrelas */ .oriii .star-rating { font-size: 0.9em; color: var(--color-accent); overflow: hidden; } .oriii .star-rating::before { color: var(--color-border-subtle); } .oriii .star-rating span::before { color: var(--color-accent); } /* Selo de promoção */ .oriii span.onsale { position: absolute; top: var(--space-3); left: var(--space-3); right: auto; z-index: 3; background: var(--color-brand-ivory) !important; color: var(--color-brand-navy) !important; border: 1px solid var(--color-accent); font-family: var(--font-body); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; padding: 4px 10px !important; border-radius: var(--radius-sm) !important; min-height: 0 !important; min-width: 0 !important; line-height: 1.6 !important; margin: 0 !important; } .oriii.single-product span.onsale { top: var(--space-4); left: var(--space-4); } /* Paginação */ .oriii nav.woocommerce-pagination { margin-top: var(--space-9); text-align: center; } .oriii nav.woocommerce-pagination ul { border: 0 !important; display: inline-flex; gap: var(--space-2); margin: 0; } .oriii nav.woocommerce-pagination ul li { border: 0 !important; margin: 0; overflow: visible; } .oriii nav.woocommerce-pagination ul li a, .oriii nav.woocommerce-pagination ul li span { min-width: 44px; height: 44px; line-height: 44px; padding: 0; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); font-size: var(--fs-body-sm); color: var(--color-text-primary); background: transparent; } .oriii nav.woocommerce-pagination ul li span.current { background: var(--color-brand-navy); color: var(--color-text-inverse); border-color: var(--color-brand-navy); } .oriii nav.woocommerce-pagination ul li a:hover { border-color: var(--color-brand-navy); color: var(--color-accent); } /* -------------------------------------------------------------------------- Botões (base WooCommerce) ----------------------------------------------------------------------- */ .oriii a.button, .oriii button.button, .oriii input.button, .oriii #respond input#submit, .oriii .wp-block-button__link { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-body); font-size: var(--fs-body-sm); font-weight: 600; letter-spacing: var(--tracking-button); text-transform: uppercase; line-height: 1; padding: var(--space-4) var(--space-6); min-height: 48px; border-radius: var(--radius-md); border: 1px solid var(--color-brand-navy); background: transparent; color: var(--color-brand-navy); transition: background-color var(--duration-normal) var(--ease), color var(--duration-normal) var(--ease), border-color var(--duration-normal) var(--ease); } .oriii a.button:hover, .oriii button.button:hover, .oriii input.button:hover, .oriii #respond input#submit:hover { background: var(--color-brand-navy); color: var(--color-text-inverse); } /* Ações primárias — navy sólido */ .oriii a.button.alt, .oriii button.button.alt, .oriii input.button.alt, .oriii button.single_add_to_cart_button, .oriii .wc-proceed-to-checkout a.checkout-button, .oriii #place_order, .oriii .wc-forward:not(.button--outline) { background: var(--color-brand-navy) !important; border-color: var(--color-brand-navy) !important; color: var(--color-text-inverse) !important; } .oriii a.button.alt:hover, .oriii button.button.alt:hover, .oriii input.button.alt:hover, .oriii button.single_add_to_cart_button:hover, .oriii .wc-proceed-to-checkout a.checkout-button:hover, .oriii #place_order:hover { background: #0F1922 !important; border-color: #0F1922 !important; } .oriii .button.disabled, .oriii button.button.disabled, .oriii button.button:disabled, .oriii button.button[disabled], .oriii.single-product form.cart button.single_add_to_cart_button.disabled { background: var(--color-surface-muted) !important; border-color: var(--color-border-subtle) !important; color: var(--color-text-secondary) !important; cursor: not-allowed; } .oriii .button.disabled:hover, .oriii button.button.disabled:hover { background: var(--color-surface-muted) !important; color: var(--color-text-secondary) !important; } /* -------------------------------------------------------------------------- Página de produto ----------------------------------------------------------------------- */ .oriii.single-product div.product { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--space-8); align-items: start; } .oriii.single-product div.product .woocommerce-product-gallery { width: 100% !important; margin: 0; float: none; } .oriii.single-product div.product .woocommerce-product-gallery__image { border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); overflow: hidden; } .oriii.single-product div.product .woocommerce-product-gallery__wrapper { margin: 0; } .oriii.single-product .flex-control-thumbs { margin: var(--space-3) 0 0; gap: var(--space-2); display: flex; padding: 0; list-style: none; } .oriii.single-product .flex-control-thumbs li { width: 84px; margin: 0; } .oriii.single-product .flex-control-thumbs img { border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); opacity: 0.6; transition: opacity var(--duration-fast) var(--ease); } .oriii.single-product .flex-control-thumbs img.flex-active, .oriii.single-product .flex-control-thumbs img:hover { opacity: 1; } .oriii.single-product div.product .summary { margin: 0 !important; width: auto !important; float: none !important; } .oriii.single-product div.product .product_title { margin-bottom: var(--space-4); } .oriii.single-product div.product p.price { font-family: var(--font-body); font-weight: 500; font-size: var(--fs-heading-sm); color: var(--color-text-primary); margin: 0 0 var(--space-5); padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-border-subtle); } .oriii.single-product div.product p.price del { opacity: 0.5; font-size: 0.7em; } .oriii.single-product div.product p.price ins { text-decoration: none; } .oriii.single-product .woocommerce-product-rating { margin-bottom: var(--space-5); } .oriii.single-product .woocommerce-product-rating a { font-size: var(--fs-caption); letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-secondary); } .oriii.single-product div.product .woocommerce-product-details__short-description { font-family: var(--font-editorial); font-size: var(--fs-body-lg); line-height: 1.6; color: var(--color-text-secondary); margin-bottom: var(--space-6); } .oriii.single-product form.cart { margin-bottom: var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: stretch; } .oriii.single-product form.cart .quantity { display: inline-flex; } .oriii.single-product form.cart .quantity input.qty { width: 84px; min-height: 52px; text-align: center; border-radius: var(--radius-md); font-weight: 600; } .oriii.single-product form.cart button.single_add_to_cart_button { flex: 1 1 240px; min-height: 52px; } .oriii.single-product form.cart.variations_form { flex-direction: column; align-items: stretch; } .oriii.single-product form.cart.variations_form .woocommerce-variation-add-to-cart { display: flex; gap: var(--space-3); align-items: stretch; flex-wrap: wrap; } .oriii.single-product table.variations { margin: 0 0 var(--space-4); border: 0; } .oriii.single-product table.variations td { padding: var(--space-2) 0; border: 0; } .oriii.single-product table.variations th { font-size: var(--fs-caption); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-secondary); } .oriii.single-product .reset_variations { font-size: var(--fs-caption); letter-spacing: 0.1em; text-transform: uppercase; } .oriii.single-product div.product .product_meta { font-size: var(--fs-caption); letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-secondary); padding-top: var(--space-5); border-top: 1px solid var(--color-border-subtle); } .oriii.single-product div.product .product_meta > span { display: block; margin-bottom: var(--space-2); } .oriii.single-product div.product .product_meta a { color: var(--color-text-primary); } /* Abas */ .oriii .woocommerce-tabs { grid-column: 1 / -1; margin-top: var(--space-9); } .oriii div.product .woocommerce-tabs ul.tabs { padding: 0; margin: 0 0 var(--space-6); border-bottom: 1px solid var(--color-border-subtle); display: flex; gap: var(--space-6); flex-wrap: wrap; } .oriii div.product .woocommerce-tabs ul.tabs::before { display: none; } .oriii div.product .woocommerce-tabs ul.tabs li { background: transparent; border: 0; border-radius: 0; padding: 0; margin: 0; } .oriii div.product .woocommerce-tabs ul.tabs li::before, .oriii div.product .woocommerce-tabs ul.tabs li::after { display: none; } .oriii div.product .woocommerce-tabs ul.tabs li a { display: inline-block; padding: var(--space-3) 0 var(--space-4); font-family: var(--font-body); font-size: var(--fs-caption); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-text-secondary); border-bottom: 2px solid transparent; } .oriii div.product .woocommerce-tabs ul.tabs li.active a, .oriii div.product .woocommerce-tabs ul.tabs li a:hover { color: var(--color-text-primary); } .oriii div.product .woocommerce-tabs ul.tabs li.active a { border-bottom-color: var(--color-accent); } .oriii .woocommerce-tabs .panel { font-size: var(--fs-body-md); line-height: var(--lh-body); } .oriii .woocommerce-tabs .panel > h2:first-child { font-size: var(--fs-heading-sm); margin-top: 0; } /* Relacionados / upsell */ .oriii .products.related > h2, .oriii .products.upsells > h2, .oriii .cross-sells > h2 { font-family: var(--font-display); font-size: var(--fs-heading-md); text-align: center; margin: var(--space-10) 0 var(--space-7); } .oriii section.related, .oriii section.upsells { grid-column: 1 / -1; margin-top: var(--space-6); } /* -------------------------------------------------------------------------- Avisos ----------------------------------------------------------------------- */ .oriii .woocommerce-message, .oriii .woocommerce-info, .oriii .woocommerce-error, .oriii .woocommerce-noreviews { border: 1px solid var(--color-border-subtle); border-left: 3px solid var(--color-accent); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text-primary); font-size: var(--fs-body-sm); padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-sm); display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; list-style: none; } .oriii .woocommerce-message::before, .oriii .woocommerce-info::before, .oriii .woocommerce-error::before { position: static; margin: 0; color: var(--color-accent); top: auto; left: auto; } .oriii .woocommerce-error { border-left-color: var(--color-error); } .oriii .woocommerce-error::before { color: var(--color-error); } .oriii .woocommerce-message .button, .oriii .woocommerce-info .button { margin-left: auto; min-height: 40px; padding: var(--space-2) var(--space-4); } /* -------------------------------------------------------------------------- Carrinho (shortcode clássico) ----------------------------------------------------------------------- */ .oriii table.shop_table { border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); border-collapse: separate; border-spacing: 0; } .oriii table.shop_table th { font-family: var(--font-body); font-size: var(--fs-caption); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-text-secondary); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border-subtle); } .oriii table.shop_table td { padding: var(--space-5); border-top: 1px solid var(--color-border-subtle); vertical-align: middle; } .oriii table.cart img { width: 72px; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); } .oriii table.cart .product-name a { font-family: var(--font-display); font-size: var(--fs-body-md); } .oriii a.remove { color: var(--color-text-secondary) !important; border: 1px solid var(--color-border-subtle); font-weight: 400; line-height: 26px; border-radius: var(--radius-sm); } .oriii a.remove:hover { background: var(--color-error) !important; color: #fff !important; border-color: var(--color-error); } .oriii .quantity input.qty { width: 72px; min-height: 44px; text-align: center; border-radius: var(--radius-md); } .oriii .cart_totals h2 { font-size: var(--fs-heading-sm); } .oriii .cart .actions .coupon input { max-width: 220px; } .oriii .woocommerce-cart-form .actions .button { min-height: 48px; } .oriii.woocommerce-cart .cart-collaterals { display: flow-root; } .oriii.woocommerce-cart .cart-collaterals .cart_totals { float: none; width: 100%; max-width: 420px; margin-left: auto; background: var(--color-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); padding: var(--space-6); box-shadow: var(--shadow-sm); } .oriii.woocommerce-cart .cart-collaterals .cross-sells { float: none; width: 100%; margin-top: var(--space-8); } .oriii .wc-proceed-to-checkout a.checkout-button { min-height: 52px; width: 100%; } /* -------------------------------------------------------------------------- Checkout (shortcode clássico) ----------------------------------------------------------------------- */ .oriii.woocommerce-checkout h3 { font-size: var(--fs-heading-sm); padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-border-subtle); } .oriii form.checkout_coupon { margin-bottom: var(--space-7); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); } .oriii form .form-row { padding: 0; margin-bottom: var(--space-4); } .oriii form .form-row label { margin-bottom: var(--space-2); display: block; } .oriii.woocommerce-checkout #order_review_heading { margin: 0; padding: var(--space-6) var(--space-6) 0; border: 1px solid var(--color-border-subtle); border-bottom: 0; border-radius: var(--radius-md) var(--radius-md) 0 0; background: var(--color-surface); } .oriii.woocommerce-checkout #order_review { background: var(--color-surface); border: 1px solid var(--color-border-subtle); border-radius: 0 0 var(--radius-md) var(--radius-md); padding: var(--space-6); box-shadow: var(--shadow-sm); } .oriii.woocommerce-checkout #payment { background: transparent; border-radius: 0; } .oriii.woocommerce-checkout #payment ul.payment_methods { border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); background: var(--color-brand-ivory); padding: var(--space-4) var(--space-5); } .oriii.woocommerce-checkout #payment ul.payment_methods li { list-style: none; } .oriii.woocommerce-checkout #payment div.payment_box { background: var(--color-surface); border: 1px solid var(--color-border-subtle); font-size: var(--fs-body-sm); color: var(--color-text-secondary); } .oriii.woocommerce-checkout #payment div.payment_box::before { display: none; } .oriii.woocommerce-checkout #payment #place_order { width: 100%; min-height: 56px; } @media (min-width: 993px) { .oriii.woocommerce-checkout form.checkout { display: grid; grid-template-columns: 1.25fr 0.85fr; grid-template-rows: auto 1fr; column-gap: var(--space-8); row-gap: 0; align-items: start; } .oriii.woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1 / span 2; } .oriii.woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 1; } .oriii.woocommerce-checkout #order_review { grid-column: 2; grid-row: 2; align-self: start; } } /* -------------------------------------------------------------------------- Minha conta ----------------------------------------------------------------------- */ .oriii .woocommerce-MyAccount-navigation { width: 24%; float: left; } .oriii .woocommerce-MyAccount-navigation ul { list-style: none; margin: 0; padding: 0; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); overflow: hidden; } .oriii .woocommerce-MyAccount-navigation li { border-bottom: 1px solid var(--color-border-subtle); } .oriii .woocommerce-MyAccount-navigation li:last-child { border-bottom: 0; } .oriii .woocommerce-MyAccount-navigation li a { display: block; padding: var(--space-4) var(--space-5); font-size: var(--fs-caption); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-secondary); } .oriii .woocommerce-MyAccount-navigation li.is-active a { background: var(--color-brand-navy); color: var(--color-text-inverse); } .oriii .woocommerce-MyAccount-navigation li a:hover { color: var(--color-accent); } .oriii .woocommerce-MyAccount-content { width: 72%; float: right; } .oriii .woocommerce-form-login, .oriii .woocommerce-form-register, .oriii .woocommerce-ResetPassword { border: 1px solid var(--color-border-subtle) !important; border-radius: var(--radius-md); background: var(--color-surface); padding: var(--space-7) !important; box-shadow: var(--shadow-sm); max-width: 460px; } .oriii.woocommerce-account.logged-in .woocommerce { display: flow-root; } /* -------------------------------------------------------------------------- WooCommerce Blocks — mini-carrinho e blocos avulsos ----------------------------------------------------------------------- */ .oriii .wc-block-components-button, .oriii .wc-block-cart__submit-button { background-color: var(--color-brand-navy) !important; color: var(--color-text-inverse) !important; border-radius: var(--radius-md) !important; font-family: var(--font-body) !important; font-weight: 600 !important; letter-spacing: var(--tracking-button); text-transform: uppercase; } .oriii .wc-block-grid__product-title, .oriii .wp-block-woocommerce-cart .wc-block-components-product-name { font-family: var(--font-display); font-weight: 600; } .oriii .wc-block-mini-cart__button { color: var(--color-text-primary); } /* -------------------------------------------------------------------------- Responsivo ----------------------------------------------------------------------- */ @media (max-width: 1024px) { .oriii.single-product div.product { grid-template-columns: 1fr; gap: var(--space-6); } .oriii ul.products { grid-template-columns: repeat(2, 1fr); gap: var(--space-7) var(--space-4); } .oriii ul.products.columns-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .oriii ul.products, .oriii ul.products.columns-3, .oriii ul.products.columns-4 { grid-template-columns: 1fr 1fr; gap: var(--space-6) var(--space-3); } .oriii ul.products li.product .woocommerce-loop-product__title { font-size: var(--fs-body-md); min-height: 2.4em; } .oriii ul.products li.product > a.button, .oriii ul.products li.product > .button, .oriii ul.products li.product .added_to_cart { align-self: stretch; text-align: center; letter-spacing: 0.08em; padding-inline: var(--space-3); } .oriii .woocommerce-MyAccount-navigation, .oriii .woocommerce-MyAccount-content { width: 100%; float: none; } .oriii.woocommerce-page .site-main, .oriii.single-product .site-main, .oriii.woocommerce-cart .site-main { padding-top: var(--space-6); } }