/**
* ============================================================
* RAMY CHECKOUT — CARRINHO
* ============================================================
*
* Visual da página clássica do carrinho WooCommerce.
*
* Paleta alinhada ao checkout:
* Verde principal: #65775e
* Verde escuro: #52644c
* Verde suave: #f3f6f1
* Rosa suave: #f8f3f5
* Texto: #353535
* Cinza: #737373
* Borda: #e8e5e5
*
* ============================================================
*/
/* ============================================================
1. VARIÁVEIS
============================================================ */
html.ramy-cart-active {
--ramy-green: #65775e;
--ramy-green-dark: #52644c;
--ramy-green-soft: #f3f6f1;
--ramy-pink-soft: #f8f3f5;
--ramy-background: #faf9f8;
--ramy-card: #ffffff;
--ramy-text: #353535;
--ramy-text-light: #737373;
--ramy-border: #e8e5e5;
--ramy-border-dark: #d8d4d4;
--ramy-radius: 18px;
--ramy-radius-small: 12px;
--ramy-shadow:
0 8px 30px rgba(35, 35, 35, 0.045);
}
/* ============================================================
2. PÁGINA
============================================================ */
html.ramy-cart-active
body.ramy-cart {
background:
var(--ramy-background);
color:
var(--ramy-text);
font-family:
"Red Hat Display",
Arial,
sans-serif;
}
/* Container principal */
html.ramy-cart-active
body.ramy-cart
.woocommerce {
width: 100%;
max-width: 1180px;
margin-left: auto;
margin-right: auto;
padding-left: 24px;
padding-right: 24px;
box-sizing: border-box;
}
/* ============================================================
3. TÍTULO "CARRINHO"
============================================================ */
html.ramy-cart-active
body.ramy-cart .entry-title,
html.ramy-cart-active
body.ramy-cart .page-title,
html.ramy-cart-active
body.ramy-cart main h1,
html.ramy-cart-active
body.ramy-cart article h1 {
margin:
30px
0
30px !important;
padding: 0 !important;
font-family:
"Poiret One",
sans-serif !important;
font-size:
42px !important;
font-weight:
400 !important;
line-height:
1.15 !important;
letter-spacing:
0.01em !important;
text-transform:
none !important;
color:
var(--ramy-text) !important;
}
/* ============================================================
4. AVISO DO TIPO DE CARRINHO
============================================================ */
html.ramy-cart-active
body.ramy-cart
.ramy-cart-notice {
display: flex;
align-items: center;
gap: 14px;
margin:
0
0
28px;
padding:
16px
18px;
border:
1px
solid
var(--ramy-border);
border-radius:
14px;
background:
#ffffff;
box-sizing:
border-box;
}
/* Digital */
html.ramy-cart-active
body.ramy-cart
.ramy-cart-notice--digital {
border-color:
#dfe8db;
background:
var(--ramy-green-soft);
}
/* Misto */
html.ramy-cart-active
body.ramy-cart
.ramy-cart-notice--mixed {
background:
var(--ramy-pink-soft);
}
/* Ícone */
html.ramy-cart-active
body.ramy-cart
.ramy-cart-notice__icon {
display: flex;
align-items: center;
justify-content: center;
flex:
0 0 34px;
width: 34px;
height: 34px;
border-radius:
50%;
background:
#ffffff;
color:
var(--ramy-green-dark);
font-size:
17px;
}
/* Título */
html.ramy-cart-active
body.ramy-cart
.ramy-cart-notice__title {
display: block;
margin-bottom:
2px;
font-size:
14px;
font-weight:
700;
color:
var(--ramy-green-dark);
}
/* Texto */
html.ramy-cart-active
body.ramy-cart
.ramy-cart-notice__text {
margin: 0;
font-size:
13px;
line-height:
1.5;
color:
var(--ramy-text-light);
}
/* ============================================================
5. TABELA PRINCIPAL
============================================================ */
html.ramy-cart-active
body.ramy-cart
table.shop_table.cart {
width: 100%;
margin:
0
0
32px !important;
border:
1px
solid
var(--ramy-border) !important;
border-collapse:
separate !important;
border-spacing:
0 !important;
border-radius:
var(--ramy-radius) !important;
background:
#ffffff;
box-shadow:
var(--ramy-shadow);
overflow:
hidden;
}
/* Cabeçalho */
html.ramy-cart-active
body.ramy-cart
table.shop_table.cart
thead th {
padding:
15px
14px !important;
border:
0 !important;
border-bottom:
1px
solid
var(--ramy-border) !important;
background:
#ffffff !important;
color:
var(--ramy-text-light);
font-size:
11px;
font-weight:
700;
letter-spacing:
0.07em;
text-transform:
uppercase;
}
/* Células */
html.ramy-cart-active
body.ramy-cart
table.shop_table.cart
tbody td {
padding:
20px
14px !important;
border:
0 !important;
border-bottom:
1px
solid
var(--ramy-border) !important;
background:
#ffffff !important;
color:
var(--ramy-text);
vertical-align:
middle !important;
}
/* Última linha */
html.ramy-cart-active
body.ramy-cart
table.shop_table.cart
tbody tr:last-child td {
border-bottom:
0 !important;
}
/* ============================================================
6. IMAGEM DO PRODUTO
============================================================ */
html.ramy-cart-active
body.ramy-cart
.product-thumbnail {
width:
92px;
}
html.ramy-cart-active
body.ramy-cart
.product-thumbnail img {
display:
block;
width:
72px !important;
height:
72px !important;
margin:
0 !important;
border-radius:
12px;
object-fit:
cover;
}
/* ============================================================
7. NOME DO PRODUTO
============================================================ */
html.ramy-cart-active
body.ramy-cart
.ramy-cart-product {
display:
inline-block;
font-size:
15px;
font-weight:
700;
line-height:
1.45;
color:
var(--ramy-text);
}
html.ramy-cart-active
body.ramy-cart
.product-name > a {
color:
var(--ramy-text) !important;
text-decoration:
none !important;
}
html.ramy-cart-active
body.ramy-cart
.product-name > a:hover {
color:
var(--ramy-green-dark) !important;
}
/* ============================================================
8. VARIAÇÕES / ENTREGA
============================================================ */
html.ramy-cart-active
body.ramy-cart
.product-name dl.variation {
margin:
7px
0
0;
font-size:
12px;
line-height:
1.5;
color:
var(--ramy-text-light);
}
html.ramy-cart-active
body.ramy-cart
.product-name dl.variation dt {
float:
left;
clear:
left;
margin-right:
5px;
font-weight:
600;
color:
var(--ramy-text-light);
}
html.ramy-cart-active
body.ramy-cart
.product-name dl.variation dd {
margin:
0
0
3px;
color:
var(--ramy-text-light);
}
html.ramy-cart-active
body.ramy-cart
.product-name dl.variation dd p {
margin: 0;
}
/* ============================================================
9. PREÇOS
============================================================ */
html.ramy-cart-active
body.ramy-cart
.product-price,
html.ramy-cart-active
body.ramy-cart
.product-subtotal {
font-size:
14px;
font-weight:
600;
white-space:
nowrap;
}
html.ramy-cart-active
body.ramy-cart
.product-subtotal {
color:
var(--ramy-green-dark);
}
/* ============================================================
10. QUANTIDADE
============================================================ */
html.ramy-cart-active
body.ramy-cart
.quantity {
display:
inline-flex;
align-items:
center;
}
html.ramy-cart-active
body.ramy-cart
.quantity input.qty {
width:
68px !important;
height:
44px;
min-height:
44px;
padding:
6px
8px !important;
border:
1px
solid
var(--ramy-border-dark) !important;
border-radius:
10px !important;
background:
#ffffff !important;
color:
var(--ramy-text);
font-family:
"Red Hat Display",
Arial,
sans-serif;
font-size:
14px;
font-weight:
600;
text-align:
center;
box-shadow:
none !important;
}
/* ============================================================
11. REMOVER PRODUTO
============================================================ */
html.ramy-cart-active
body.ramy-cart
.product-remove a.remove {
display:
flex !important;
align-items:
center;
justify-content:
center;
width:
30px;
height:
30px;
border-radius:
50%;
background:
transparent;
color:
#999 !important;
font-family:
Arial,
sans-serif;
font-size:
20px;
font-weight:
400;
line-height:
30px;
text-decoration:
none !important;
transition:
background 0.2s ease,
color 0.2s ease;
}
html.ramy-cart-active
body.ramy-cart
.product-remove a.remove:hover {
background:
var(--ramy-pink-soft);
color:
#765e66 !important;
}
/* ============================================================
12. ÁREA DE AÇÕES
============================================================ */
html.ramy-cart-active
body.ramy-cart
table.shop_table.cart
td.actions {
padding:
18px !important;
background:
#fafafa !important;
}
/* ============================================================
13. CUPOM
============================================================ */
html.ramy-cart-active
body.ramy-cart
.cart
.coupon {
display:
flex;
align-items:
center;
gap:
10px;
}
/* Label acessível permanece escondida pelo WooCommerce */
html.ramy-cart-active
body.ramy-cart
.cart
.coupon
input.input-text {
width:
220px !important;
height:
46px;
margin:
0 !important;
padding:
10px
14px !important;
border:
1px
solid
var(--ramy-border-dark) !important;
border-radius:
var(--ramy-radius-small) !important;
background:
#ffffff !important;
color:
var(--ramy-text) !important;
font-family:
"Red Hat Display",
Arial,
sans-serif;
font-size:
14px;
box-shadow:
none !important;
}
html.ramy-cart-active
body.ramy-cart
.cart
.coupon
input.input-text:focus {
border-color:
var(--ramy-green) !important;
box-shadow:
0 0 0 3px
rgba(101, 119, 94, 0.10) !important;
outline:
none;
}
/* Botão aplicar */
html.ramy-cart-active
body.ramy-cart
.cart
.coupon
button {
height:
46px;
padding:
0
18px !important;
border:
0 !important;
border-radius:
var(--ramy-radius-small) !important;
background:
var(--ramy-green) !important;
color:
#ffffff !important;
font-family:
"Red Hat Display",
Arial,
sans-serif !important;
font-size:
13px !important;
font-weight:
700 !important;
text-transform:
none !important;
box-shadow:
none !important;
}
html.ramy-cart-active
body.ramy-cart
.cart
.coupon
button:hover {
background:
var(--ramy-green-dark) !important;
}
/* ============================================================
14. ATUALIZAR CARRINHO
============================================================ */
html.ramy-cart-active
body.ramy-cart
button[name="update_cart"] {
min-height:
46px;
padding:
0
18px !important;
border:
1px
solid
var(--ramy-border-dark) !important;
border-radius:
var(--ramy-radius-small) !important;
background:
#ffffff !important;
color:
var(--ramy-text) !important;
font-family:
"Red Hat Display",
Arial,
sans-serif !important;
font-size:
13px !important;
font-weight:
600 !important;
text-transform:
none !important;
box-shadow:
none !important;
}
html.ramy-cart-active
body.ramy-cart
button[name="update_cart"]:not(:disabled):hover {
border-color:
var(--ramy-green) !important;
color:
var(--ramy-green-dark) !important;
}
/* Botão desativado */
html.ramy-cart-active
body.ramy-cart
button[name="update_cart"]:disabled {
opacity:
0.45;
cursor:
not-allowed;
}
/* ============================================================
15. LAYOUT DOS TOTAIS
============================================================ */
html.ramy-cart-active
body.ramy-cart
.cart-collaterals {
display:
flex;
justify-content:
flex-end;
width:
100%;
margin-top:
10px;
}
html.ramy-cart-active
body.ramy-cart
.cart-collaterals
.cart_totals {
float:
none !important;
width:
100% !important;
max-width:
470px;
margin:
0 !important;
padding:
28px;
border:
1px
solid
var(--ramy-border);
border-radius:
var(--ramy-radius);
background:
#ffffff;
box-shadow:
var(--ramy-shadow);
box-sizing:
border-box;
}
/* ============================================================
16. ESCONDE O TÍTULO NATIVO "TOTAL NO CARRINHO"
============================================================ */
html.ramy-cart-active
body.ramy-cart
.cart_totals > h2 {
display:
none !important;
}
/* ============================================================
17. NOSSO TÍTULO DO RESUMO
============================================================ */
html.ramy-cart-active
body.ramy-cart
.ramy-cart-summary-heading {
margin-bottom:
20px;
padding-bottom:
18px;
border-bottom:
1px
solid
var(--ramy-border);
}
html.ramy-cart-active
body.ramy-cart
.ramy-cart-summary-heading__eyebrow {
display:
block;
margin-bottom:
4px;
color:
var(--ramy-green);
font-size:
10px;
font-weight:
700;
letter-spacing:
0.12em;
text-transform:
uppercase;
}
html.ramy-cart-active
body.ramy-cart
.ramy-cart-summary-heading__title {
margin:
0 !important;
padding:
0 !important;
font-family:
"Poiret One",
sans-serif !important;
font-size:
30px !important;
font-weight:
400 !important;
line-height:
1.2 !important;
color:
var(--ramy-text) !important;
}
/* ============================================================
18. TABELA DOS TOTAIS
============================================================ */
html.ramy-cart-active
body.ramy-cart
.cart_totals
table.shop_table {
width:
100%;
margin:
0 !important;
border:
0 !important;
border-collapse:
collapse !important;
background:
transparent;
}
html.ramy-cart-active
body.ramy-cart
.cart_totals
table.shop_table th,
html.ramy-cart-active
body.ramy-cart
.cart_totals
table.shop_table td {
padding:
13px
0 !important;
border:
0 !important;
border-bottom:
1px
solid
var(--ramy-border) !important;
background:
transparent !important;
font-size:
14px;
vertical-align:
top;
}
html.ramy-cart-active
body.ramy-cart
.cart_totals
table.shop_table th {
font-weight:
500;
color:
var(--ramy-text-light);
}
html.ramy-cart-active
body.ramy-cart
.cart_totals
table.shop_table td {
text-align:
right;
color:
var(--ramy-text);
}
/* ============================================================
19. TOTAL FINAL
============================================================ */
html.ramy-cart-active
body.ramy-cart
.cart_totals
.order-total th,
html.ramy-cart-active
body.ramy-cart
.cart_totals
.order-total td {
padding-top:
18px !important;
padding-bottom:
18px !important;
border-bottom:
0 !important;
font-size:
17px;
font-weight:
700;
color:
var(--ramy-text);
}
html.ramy-cart-active
body.ramy-cart
.cart_totals
.order-total
.woocommerce-Price-amount {
font-size:
21px;
font-weight:
700;
color:
var(--ramy-green-dark);
}
/* ============================================================
20. FRETE
============================================================ */
html.ramy-cart-active
body.ramy-cart
#shipping_method {
margin:
0;
padding:
0;
list-style:
none;
}
html.ramy-cart-active
body.ramy-cart
#shipping_method li {
margin-bottom:
7px;
font-size:
13px;
line-height:
1.45;
}
/* ============================================================
21. MENSAGEM ANTES DO CHECKOUT
============================================================ */
html.ramy-cart-active
body.ramy-cart
.ramy-cart-checkout-message {
display:
flex;
align-items:
flex-start;
gap:
9px;
margin:
18px
0
12px;
padding:
12px
14px;
border-radius:
12px;
background:
var(--ramy-green-soft);
color:
var(--ramy-text-light);
}
html.ramy-cart-active
body.ramy-cart
.ramy-cart-checkout-message > span {
flex:
0 0 auto;
color:
var(--ramy-green-dark);
font-size:
15px;
line-height:
1.4;
}
html.ramy-cart-active
body.ramy-cart
.ramy-cart-checkout-message p {
margin:
0;
font-size:
12px;
line-height:
1.5;
}
/* ============================================================
22. BOTÃO FINALIZAR COMPRA
============================================================ */
html.ramy-cart-active
body.ramy-cart
.wc-proceed-to-checkout {
padding:
0 !important;
}
html.ramy-cart-active
body.ramy-cart
.wc-proceed-to-checkout
.checkout-button {
display:
block !important;
width:
100% !important;
min-height:
54px;
margin:
0 !important;
padding:
15px
24px !important;
border:
0 !important;
border-radius:
999px !important;
background:
var(--ramy-green) !important;
color:
#ffffff !important;
font-family:
"Red Hat Display",
Arial,
sans-serif !important;
font-size:
15px !important;
font-weight:
700 !important;
line-height:
1.4 !important;
letter-spacing:
0.02em;
text-align:
center;
text-decoration:
none !important;
text-transform:
none !important;
box-shadow:
none !important;
box-sizing:
border-box;
transition:
background 0.2s ease,
transform 0.2s ease,
box-shadow 0.2s ease;
}
html.ramy-cart-active
body.ramy-cart
.wc-proceed-to-checkout
.checkout-button:hover {
background:
var(--ramy-green-dark) !important;
transform:
translateY(-1px);
box-shadow:
0 8px 18px
rgba(82, 100, 76, 0.15) !important;
}
/* ============================================================
23. MENSAGENS DO WOOCOMMERCE
============================================================ */
html.ramy-cart-active
body.ramy-cart
.woocommerce-message,
html.ramy-cart-active
body.ramy-cart
.woocommerce-info,
html.ramy-cart-active
body.ramy-cart
.woocommerce-error {
margin-bottom:
24px;
padding:
15px
18px
15px
46px;
border:
1px
solid
var(--ramy-border);
border-top:
1px
solid
var(--ramy-border);
border-radius:
12px;
background:
#ffffff;
color:
var(--ramy-text);
}
/* ============================================================
24. CARRINHO VAZIO
============================================================ */
html.ramy-cart-active
body.ramy-cart
.cart-empty {
margin:
30px
0
16px;
padding:
30px;
border:
1px
solid
var(--ramy-border);
border-radius:
var(--ramy-radius);
background:
#ffffff;
text-align:
center;
}
html.ramy-cart-active
body.ramy-cart
.return-to-shop {
text-align:
center;
}
html.ramy-cart-active
body.ramy-cart
.return-to-shop
.button {
padding:
13px
22px !important;
border-radius:
999px !important;
background:
var(--ramy-green) !important;
color:
#ffffff !important;
font-family:
"Red Hat Display",
Arial,
sans-serif !important;
font-weight:
700 !important;
text-transform:
none !important;
}
/* ============================================================
25. CHECKOUT DIGITAL
============================================================ */
/*
* Carrinho digital não precisa exibir elementos de frete
* caso algum plugin tente adicioná-los.
*/
html.ramy-cart-active
body.ramy-cart-digital
.cart_totals
.woocommerce-shipping-totals {
display:
none !important;
}
/* ============================================================
26. TABLET
============================================================ */
@media (max-width: 900px) {
html.ramy-cart-active
body.ramy-cart
.woocommerce {
padding-left:
18px;
padding-right:
18px;
}
html.ramy-cart-active
body.ramy-cart
.cart-collaterals
.cart_totals {
max-width:
100%;
}
html.ramy-cart-active
body.ramy-cart
.entry-title,
html.ramy-cart-active
body.ramy-cart
.page-title,
html.ramy-cart-active
body.ramy-cart
main h1,
html.ramy-cart-active
body.ramy-cart
article h1 {
font-size:
36px !important;
}
}
/* ============================================================
27. MOBILE — TABELA DO WOOCOMMERCE
============================================================ */
@media (max-width: 768px) {
html.ramy-cart-active
body.ramy-cart
.woocommerce {
padding-left:
14px;
padding-right:
14px;
}
html.ramy-cart-active
body.ramy-cart
.entry-title,
html.ramy-cart-active
body.ramy-cart
.page-title,
html.ramy-cart-active
body.ramy-cart
main h1,
html.ramy-cart-active
body.ramy-cart
article h1 {
font-size:
32px !important;
margin-bottom:
24px !important;
}
/*
* O WooCommerce transforma a tabela em blocos no mobile.
*/
html.ramy-cart-active
body.ramy-cart
table.shop_table.cart {
border-radius:
15px !important;
}
html.ramy-cart-active
body.ramy-cart
table.shop_table.cart
tbody td {
padding:
13px
16px !important;
}
/* Imagem */
html.ramy-cart-active
body.ramy-cart
.product-thumbnail {
width:
auto;
}
html.ramy-cart-active
body.ramy-cart
.product-thumbnail img {
width:
64px !important;
height:
64px !important;
margin-left:
auto !important;
}
/*
* Área do cupom.
*/
html.ramy-cart-active
body.ramy-cart
table.shop_table.cart
td.actions {
padding:
16px !important;
}
html.ramy-cart-active
body.ramy-cart
.cart
.coupon {
display:
grid;
grid-template-columns:
1fr
auto;
width:
100%;
margin-bottom:
12px;
}
html.ramy-cart-active
body.ramy-cart
.cart
.coupon
input.input-text {
width:
100% !important;
}
html.ramy-cart-active
body.ramy-cart
button[name="update_cart"] {
width:
100%;
}
/* Totais */
html.ramy-cart-active
body.ramy-cart
.cart-collaterals
.cart_totals {
padding:
22px;
}
}
/* ============================================================
28. MOBILE PEQUENO
============================================================ */
@media (max-width: 480px) {
html.ramy-cart-active
body.ramy-cart
.ramy-cart-notice {
padding:
14px;
}
html.ramy-cart-active
body.ramy-cart
.cart
.coupon {
display:
block;
}
html.ramy-cart-active
body.ramy-cart
.cart
.coupon
input.input-text {
display:
block;
margin-bottom:
10px !important;
}
html.ramy-cart-active
body.ramy-cart
.cart
.coupon
button {
width:
100%;
}
html.ramy-cart-active
body.ramy-cart
.cart-collaterals
.cart_totals {
padding:
18px;
}
html.ramy-cart-active
body.ramy-cart
.ramy-cart-summary-heading__title {
font-size:
27px !important;
}
}
/* ============================================================
29. ACESSIBILIDADE
============================================================ */
@media (prefers-reduced-motion: reduce) {
html.ramy-cart-active *,
html.ramy-cart-active *::before,
html.ramy-cart-active *::after {
scroll-behavior:
auto !important;
transition-duration:
0.01ms !important;
animation-duration:
0.01ms !important;
animation-iteration-count:
1 !important;
}
}
/* ============================================================
30. AJUSTES FINAIS — CARRINHO DIGITAL
============================================================ */
/*
* No carrinho exclusivamente digital não precisamos
* exibir a coluna de quantidade.
*/
html.ramy-cart-active
body.ramy-cart-digital
table.shop_table.cart
.product-quantity {
display: none !important;
}
/*
* Com a quantidade removida, damos um pouco mais
* de espaço para o nome do produto.
*/
html.ramy-cart-active
body.ramy-cart-digital
table.shop_table.cart
.product-name {
width: 55%;
}
/*
* Preço e subtotal ficam mais compactos.
*/
html.ramy-cart-active
body.ramy-cart-digital
table.shop_table.cart
.product-price {
width: 16%;
}
html.ramy-cart-active
body.ramy-cart-digital
table.shop_table.cart
.product-subtotal {
width: 16%;
}
/* ============================================================
31. CROSS-SELLS / RECOMENDAÇÕES
============================================================ */
/*
* Remove "Você pode se interessar por..."
* da página do carrinho.
*
* Isso deixa o fluxo muito mais limpo e mantém o foco
* em revisar o pedido e seguir para a finalização.
*/
html.ramy-cart-active
body.ramy-cart
.cart-collaterals
.cross-sells {
display: none !important;
}
/* ============================================================
32. RESUMO DO PEDIDO
============================================================ */
/*
* Como removemos os cross-sells, o resumo não precisa
* mais dividir espaço com eles.
*
* Mantemos o card alinhado à direita no desktop.
*/
html.ramy-cart-active
body.ramy-cart
.cart-collaterals {
display: flex;
justify-content: flex-end;
align-items: flex-start;
gap: 0;
}
html.ramy-cart-active
body.ramy-cart
.cart-collaterals
.cart_totals {
width: 100% !important;
max-width: 470px;
}
/* ============================================================
33. ESPAÇO INFERIOR
============================================================ */
html.ramy-cart-active
body.ramy-cart
.cart-collaterals {
margin-bottom: 60px;
}
/* ============================================================
34. MOBILE
============================================================ */
@media (max-width: 768px) {
html.ramy-cart-active
body.ramy-cart
.cart-collaterals {
display: block;
}
html.ramy-cart-active
body.ramy-cart
.cart-collaterals
.cart_totals {
width: 100% !important;
max-width: none;
}
html.ramy-cart-active
body.ramy-cart-digital
table.shop_table.cart
.product-name,
html.ramy-cart-active
body.ramy-cart-digital
table.shop_table.cart
.product-price,
html.ramy-cart-active
body.ramy-cart-digital
table.shop_table.cart
.product-subtotal {
width: auto;
}
}
/* ============================================================
35. CORREÇÃO — MENSAGENS DO WOOCOMMERCE
============================================================ */
/*
* Mensagens de sucesso, aviso e erro.
*/
html.ramy-cart-active
body.ramy-cart
.woocommerce-message,
html.ramy-cart-active
body.ramy-cart
.woocommerce-info,
html.ramy-cart-active
body.ramy-cart
.woocommerce-error {
position: relative;
display: flex;
align-items: center;
min-height: 68px;
margin:
0
0
24px !important;
padding:
16px
20px
16px
66px !important;
border:
1px
solid
var(--ramy-border) !important;
border-radius:
14px !important;
background:
#ffffff !important;
color:
var(--ramy-text) !important;
font-family:
"Red Hat Display",
Arial,
sans-serif !important;
font-size:
15px !important;
font-weight:
500;
line-height:
1.5;
box-shadow:
none !important;
box-sizing:
border-box;
}
/*
* Posiciona corretamente o ícone padrão
* do WooCommerce.
*/
html.ramy-cart-active
body.ramy-cart
.woocommerce-message::before,
html.ramy-cart-active
body.ramy-cart
.woocommerce-info::before,
html.ramy-cart-active
body.ramy-cart
.woocommerce-error::before {
position:
absolute !important;
top:
50% !important;
left:
20px !important;
transform:
translateY(-50%) !important;
margin:
0 !important;
padding:
0 !important;
line-height:
1 !important;
}
/*
* Sucesso.
*/
html.ramy-cart-active
body.ramy-cart
.woocommerce-message {
border-color:
#dfe8db !important;
background:
var(--ramy-green-soft) !important;
}
html.ramy-cart-active
body.ramy-cart
.woocommerce-message::before {
color:
var(--ramy-green-dark) !important;
}
/*
* Informação.
*/
html.ramy-cart-active
body.ramy-cart
.woocommerce-info {
background:
#ffffff !important;
}
/*
* Erros.
*/
html.ramy-cart-active
body.ramy-cart
.woocommerce-error {
display:
block;
border-color:
#eadede !important;
background:
#fbf6f6 !important;
}
/* ============================================================
36. MOBILE — MENSAGENS
============================================================ */
@media (max-width: 600px) {
html.ramy-cart-active
body.ramy-cart
.woocommerce-message,
html.ramy-cart-active
body.ramy-cart
.woocommerce-info,
html.ramy-cart-active
body.ramy-cart
.woocommerce-error {
min-height:
60px;
padding:
14px
16px
14px
54px !important;
font-size:
14px !important;
}
html.ramy-cart-active
body.ramy-cart
.woocommerce-message::before,
html.ramy-cart-active
body.ramy-cart
.woocommerce-info::before,
html.ramy-cart-active
body.ramy-cart
.woocommerce-error::before {
left:
17px !important;
}
}
/* ============================================================
37. FRETE — CARRINHO FÍSICO E MISTO
============================================================ */
/*
* A linha de frete precisa funcionar como um bloco.
* O WooCommerce normalmente divide essa linha entre
* | Envio | e conteúdo | , o que deixa o
* calculador espremido no card lateral.
*/
html.ramy-cart-active
body.ramy-cart-physical
.cart_totals
tr.woocommerce-shipping-totals,
html.ramy-cart-active
body.ramy-cart-mixed
.cart_totals
tr.woocommerce-shipping-totals {
display: block !important;
width: 100% !important;
}
/* Título "Envio" */
html.ramy-cart-active
body.ramy-cart-physical
.cart_totals
tr.woocommerce-shipping-totals > th,
html.ramy-cart-active
body.ramy-cart-mixed
.cart_totals
tr.woocommerce-shipping-totals > th {
display: block !important;
width: 100% !important;
padding:
16px
0
8px !important;
border:
0 !important;
text-align:
left !important;
box-sizing:
border-box;
}
/* Conteúdo do frete */
html.ramy-cart-active
body.ramy-cart-physical
.cart_totals
tr.woocommerce-shipping-totals > td,
html.ramy-cart-active
body.ramy-cart-mixed
.cart_totals
tr.woocommerce-shipping-totals > td {
display: block !important;
width: 100% !important;
padding:
0
0
18px !important;
border-bottom:
1px solid var(--ramy-border) !important;
text-align:
left !important;
box-sizing:
border-box;
}
/* ============================================================
38. TEXTO / MÉTODOS DE ENTREGA
============================================================ */
html.ramy-cart-active
body.ramy-cart-physical
.cart_totals
.woocommerce-shipping-totals td,
html.ramy-cart-active
body.ramy-cart-mixed
.cart_totals
.woocommerce-shipping-totals td {
font-size:
13px !important;
line-height:
1.55 !important;
color:
var(--ramy-text-light) !important;
}
html.ramy-cart-active
body.ramy-cart-physical
.cart_totals
.woocommerce-shipping-totals p,
html.ramy-cart-active
body.ramy-cart-mixed
.cart_totals
.woocommerce-shipping-totals p {
margin:
0
0
10px !important;
text-align:
left !important;
}
/* ============================================================
39. LINK "DIGITE UM ENDEREÇO DIFERENTE"
============================================================ */
html.ramy-cart-active
body.ramy-cart-physical
.shipping-calculator-button,
html.ramy-cart-active
body.ramy-cart-mixed
.shipping-calculator-button {
display:
inline-block !important;
margin:
8px
0
4px !important;
color:
var(--ramy-green) !important;
font-size:
12px !important;
font-weight:
700 !important;
letter-spacing:
0.05em;
text-decoration:
none !important;
text-transform:
uppercase;
}
html.ramy-cart-active
body.ramy-cart-physical
.shipping-calculator-button:hover,
html.ramy-cart-active
body.ramy-cart-mixed
.shipping-calculator-button:hover {
color:
var(--ramy-green-dark) !important;
}
/* ============================================================
40. CALCULADOR DE FRETE
============================================================ */
html.ramy-cart-active
body.ramy-cart-physical
.shipping-calculator-form,
html.ramy-cart-active
body.ramy-cart-mixed
.shipping-calculator-form {
width:
100% !important;
margin:
16px
0
0 !important;
padding:
18px !important;
border:
1px solid var(--ramy-border);
border-radius:
14px;
background:
var(--ramy-green-soft);
box-sizing:
border-box;
}
/* Cada campo */
html.ramy-cart-active
body.ramy-cart-physical
.shipping-calculator-form
.form-row,
html.ramy-cart-active
body.ramy-cart-mixed
.shipping-calculator-form
.form-row {
display:
block !important;
float:
none !important;
width:
100% !important;
margin:
0
0
13px !important;
padding:
0 !important;
text-align:
left !important;
box-sizing:
border-box;
}
/* Labels */
html.ramy-cart-active
body.ramy-cart-physical
.shipping-calculator-form
label,
html.ramy-cart-active
body.ramy-cart-mixed
.shipping-calculator-form
label {
display:
block !important;
width:
100% !important;
margin:
0
0
6px !important;
padding:
0 !important;
color:
var(--ramy-text) !important;
font-size:
12px !important;
font-weight:
600 !important;
line-height:
1.4 !important;
text-align:
left !important;
}
/* ============================================================
41. INPUTS E SELECTS DO FRETE
============================================================ */
html.ramy-cart-active
body.ramy-cart-physical
.shipping-calculator-form input,
html.ramy-cart-active
body.ramy-cart-physical
.shipping-calculator-form select,
html.ramy-cart-active
body.ramy-cart-mixed
.shipping-calculator-form input,
html.ramy-cart-active
body.ramy-cart-mixed
.shipping-calculator-form select {
display:
block !important;
width:
100% !important;
max-width:
none !important;
height:
44px !important;
margin:
0 !important;
padding:
9px
12px !important;
border:
1px solid var(--ramy-border-dark) !important;
border-radius:
10px !important;
background:
#ffffff !important;
color:
var(--ramy-text) !important;
font-family:
"Red Hat Display",
Arial,
sans-serif !important;
font-size:
13px !important;
text-align:
left !important;
box-shadow:
none !important;
box-sizing:
border-box !important;
}
/* Focus */
html.ramy-cart-active
body.ramy-cart-physical
.shipping-calculator-form input:focus,
html.ramy-cart-active
body.ramy-cart-physical
.shipping-calculator-form select:focus,
html.ramy-cart-active
body.ramy-cart-mixed
.shipping-calculator-form input:focus,
html.ramy-cart-active
body.ramy-cart-mixed
.shipping-calculator-form select:focus {
border-color:
var(--ramy-green) !important;
outline:
none !important;
box-shadow:
0 0 0 3px
rgba(101, 119, 94, 0.10) !important;
}
/* ============================================================
42. SELECT2 — PAÍS / ESTADO
============================================================ */
/*
* Dependendo da configuração do WooCommerce,
* País e Estado podem usar Select2.
*/
html.ramy-cart-active
body.ramy-cart-physical
.shipping-calculator-form
.select2-container,
html.ramy-cart-active
body.ramy-cart-mixed
.shipping-calculator-form
.select2-container {
width:
100% !important;
max-width:
100% !important;
}
html.ramy-cart-active
body.ramy-cart-physical
.shipping-calculator-form
.select2-selection,
html.ramy-cart-active
body.ramy-cart-mixed
.shipping-calculator-form
.select2-selection {
min-height:
44px !important;
border:
1px solid var(--ramy-border-dark) !important;
border-radius:
10px !important;
background:
#ffffff !important;
box-shadow:
none !important;
}
html.ramy-cart-active
body.ramy-cart-physical
.shipping-calculator-form
.select2-selection__rendered,
html.ramy-cart-active
body.ramy-cart-mixed
.shipping-calculator-form
.select2-selection__rendered {
padding:
7px
36px
7px
12px !important;
color:
var(--ramy-text) !important;
font-size:
13px !important;
line-height:
28px !important;
text-align:
left !important;
}
/* ============================================================
43. BOTÃO ATUALIZAR FRETE
============================================================ */
html.ramy-cart-active
body.ramy-cart-physical
.shipping-calculator-form
button,
html.ramy-cart-active
body.ramy-cart-mixed
.shipping-calculator-form
button {
display:
block !important;
width:
100% !important;
min-height:
44px;
margin:
4px
0
0 !important;
padding:
10px
18px !important;
border:
0 !important;
border-radius:
999px !important;
background:
var(--ramy-green) !important;
color:
#ffffff !important;
font-family:
"Red Hat Display",
Arial,
sans-serif !important;
font-size:
13px !important;
font-weight:
700 !important;
text-transform:
none !important;
box-shadow:
none !important;
}
html.ramy-cart-active
body.ramy-cart-physical
.shipping-calculator-form
button:hover,
html.ramy-cart-active
body.ramy-cart-mixed
.shipping-calculator-form
button:hover {
background:
var(--ramy-green-dark) !important;
}
/* ============================================================
44. CORREÇÃO DEFINITIVA — LAYOUT DO FRETE
Carrinho físico / misto
============================================================ */
/*
* A linha de envio deixa de funcionar como uma linha
* tradicional de tabela.
*/
html.ramy-cart-active
body.ramy-cart-physical
.cart_totals
table.shop_table
tbody
tr.woocommerce-shipping-totals.shipping,
html.ramy-cart-active
body.ramy-cart-mixed
.cart_totals
table.shop_table
tbody
tr.woocommerce-shipping-totals.shipping {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
padding:
16px
0 !important;
border-bottom:
1px solid var(--ramy-border) !important;
box-sizing:
border-box !important;
}
/*
* "Envio"
*/
html.ramy-cart-active
body.ramy-cart-physical
.cart_totals
table.shop_table
tbody
tr.woocommerce-shipping-totals.shipping
> th,
html.ramy-cart-active
body.ramy-cart-mixed
.cart_totals
table.shop_table
tbody
tr.woocommerce-shipping-totals.shipping
> th {
display: block !important;
width: 100% !important;
max-width: none !important;
padding:
0
0
12px !important;
border:
0 !important;
background:
transparent !important;
color:
var(--ramy-text-light) !important;
font-size:
14px !important;
font-weight:
500 !important;
text-align:
left !important;
box-sizing:
border-box !important;
}
/*
* Toda a área que contém:
*
* métodos de frete
* endereço
* mudar endereço
* calculadora
*/
html.ramy-cart-active
body.ramy-cart-physical
.cart_totals
table.shop_table
tbody
tr.woocommerce-shipping-totals.shipping
> td,
html.ramy-cart-active
body.ramy-cart-mixed
.cart_totals
table.shop_table
tbody
tr.woocommerce-shipping-totals.shipping
> td {
display: block !important;
width: 100% !important;
max-width: none !important;
padding:
0 !important;
border:
0 !important;
background:
transparent !important;
text-align:
left !important;
box-sizing:
border-box !important;
}
/* ============================================================
45. MÉTODOS DE FRETE
============================================================ */
html.ramy-cart-active
body.ramy-cart-physical
.cart_totals
#shipping_method,
html.ramy-cart-active
body.ramy-cart-mixed
.cart_totals
#shipping_method {
display: block !important;
width: 100% !important;
margin:
0
0
12px !important;
padding:
0 !important;
list-style:
none !important;
}
html.ramy-cart-active
body.ramy-cart-physical
.cart_totals
#shipping_method li,
html.ramy-cart-active
body.ramy-cart-mixed
.cart_totals
#shipping_method li {
display: flex !important;
align-items: flex-start !important;
width: 100% !important;
margin:
0
0
9px !important;
padding:
0 !important;
text-align:
left !important;
line-height:
1.45 !important;
box-sizing:
border-box !important;
}
/*
* Radio.
*/
html.ramy-cart-active
body.ramy-cart-physical
.cart_totals
#shipping_method
input[type="radio"],
html.ramy-cart-active
body.ramy-cart-mixed
.cart_totals
#shipping_method
input[type="radio"] {
flex:
0 0 auto;
width:
auto !important;
height:
auto !important;
margin:
4px
9px
0
0 !important;
}
/*
* Nome da transportadora.
*/
html.ramy-cart-active
body.ramy-cart-physical
.cart_totals
#shipping_method label,
html.ramy-cart-active
body.ramy-cart-mixed
.cart_totals
#shipping_method label {
display: block !important;
flex:
1 1 auto;
width:
auto !important;
margin:
0 !important;
padding:
0 !important;
color:
var(--ramy-text) !important;
font-size:
14px !important;
font-weight:
400 !important;
line-height:
1.45 !important;
text-align:
left !important;
}
/*
* Valor do frete.
*/
html.ramy-cart-active
body.ramy-cart-physical
.cart_totals
#shipping_method
.woocommerce-Price-amount,
html.ramy-cart-active
body.ramy-cart-mixed
.cart_totals
#shipping_method
.woocommerce-Price-amount {
font-weight:
700 !important;
color:
var(--ramy-text) !important;
}
/* ============================================================
46. ENDEREÇO ATUAL
============================================================ */
html.ramy-cart-active
body.ramy-cart-physical
.cart_totals
.woocommerce-shipping-destination,
html.ramy-cart-active
body.ramy-cart-mixed
.cart_totals
.woocommerce-shipping-destination {
margin:
12px
0
6px !important;
color:
var(--ramy-text-light) !important;
font-size:
12px !important;
line-height:
1.5 !important;
text-align:
left !important;
}
/* ============================================================
47. LINK MUDAR ENDEREÇO
============================================================ */
html.ramy-cart-active
body.ramy-cart-physical
.cart_totals
.shipping-calculator-button,
html.ramy-cart-active
body.ramy-cart-mixed
.cart_totals
.shipping-calculator-button {
display:
inline-flex !important;
align-items:
center;
margin:
4px
0
8px !important;
padding:
0 !important;
color:
var(--ramy-green) !important;
font-size:
11px !important;
font-weight:
700 !important;
letter-spacing:
0.06em !important;
text-align:
left !important;
text-decoration:
none !important;
text-transform:
uppercase;
}
/* ============================================================
48. FORMULÁRIO DO ENDEREÇO
============================================================ */
html.ramy-cart-active
body.ramy-cart-physical
.cart_totals
.shipping-calculator-form,
html.ramy-cart-active
body.ramy-cart-mixed
.cart_totals
.shipping-calculator-form {
display:
block !important;
width:
100% !important;
max-width:
none !important;
margin:
12px
0
0 !important;
padding:
16px !important;
border:
1px solid var(--ramy-border) !important;
border-radius:
12px !important;
background:
var(--ramy-green-soft) !important;
text-align:
left !important;
box-sizing:
border-box !important;
}
/*
* Campos.
*/
html.ramy-cart-active
body.ramy-cart-physical
.cart_totals
.shipping-calculator-form
.form-row,
html.ramy-cart-active
body.ramy-cart-mixed
.cart_totals
.shipping-calculator-form
.form-row {
display:
block !important;
float:
none !important;
clear:
both !important;
width:
100% !important;
max-width:
none !important;
margin:
0
0
12px !important;
padding:
0 !important;
text-align:
left !important;
box-sizing:
border-box !important;
}
/*
* Labels.
*/
html.ramy-cart-active
body.ramy-cart-physical
.cart_totals
.shipping-calculator-form
label,
html.ramy-cart-active
body.ramy-cart-mixed
.cart_totals
.shipping-calculator-form
label {
display:
block !important;
width:
100% !important;
margin:
0
0
5px !important;
padding:
0 !important;
color:
var(--ramy-text) !important;
font-size:
12px !important;
font-weight:
600 !important;
line-height:
1.4 !important;
text-align:
left !important;
}
/*
* Inputs e selects.
*/
html.ramy-cart-active
body.ramy-cart-physical
.cart_totals
.shipping-calculator-form
input,
html.ramy-cart-active
body.ramy-cart-physical
.cart_totals
.shipping-calculator-form
select,
html.ramy-cart-active
body.ramy-cart-mixed
.cart_totals
.shipping-calculator-form
input,
html.ramy-cart-active
body.ramy-cart-mixed
.cart_totals
.shipping-calculator-form
select {
display:
block !important;
width:
100% !important;
max-width:
none !important;
height:
44px !important;
margin:
0 !important;
padding:
9px
12px !important;
border:
1px solid var(--ramy-border-dark) !important;
border-radius:
10px !important;
background:
#ffffff !important;
color:
var(--ramy-text) !important;
font-family:
"Red Hat Display",
Arial,
sans-serif !important;
font-size:
13px !important;
text-align:
left !important;
box-sizing:
border-box !important;
box-shadow:
none !important;
}
/*
* Select2.
*/
html.ramy-cart-active
body.ramy-cart-physical
.cart_totals
.shipping-calculator-form
.select2-container,
html.ramy-cart-active
body.ramy-cart-mixed
.cart_totals
.shipping-calculator-form
.select2-container {
display:
block !important;
width:
100% !important;
max-width:
none !important;
}
/* ============================================================
49. BOTÃO ATUALIZAR
============================================================ */
html.ramy-cart-active
body.ramy-cart-physical
.cart_totals
.shipping-calculator-form
button,
html.ramy-cart-active
body.ramy-cart-mixed
.cart_totals
.shipping-calculator-form
button {
display:
block !important;
width:
100% !important;
min-height:
44px;
margin:
4px
0
0 !important;
padding:
10px
18px !important;
border:
0 !important;
border-radius:
999px !important;
background:
var(--ramy-green) !important;
color:
#ffffff !important;
font-family:
"Red Hat Display",
Arial,
sans-serif !important;
font-size:
13px !important;
font-weight:
700 !important;
text-align:
center !important;
text-transform:
none !important;
box-shadow:
none !important;
}
/* ============================================================
50. LARGURA DO RESUMO — CARRINHO FÍSICO / MISTO
============================================================ */
/*
* Produtos físicos precisam de um resumo mais largo
* para acomodar métodos de envio e calculadora de frete.
*
* NÃO afeta o carrinho exclusivamente digital.
*/
html.ramy-cart-active
body.ramy-cart-physical
.cart-collaterals
.cart_totals,
html.ramy-cart-active
body.ramy-cart-mixed
.cart-collaterals
.cart_totals {
width: 100% !important;
max-width: 620px !important;
}
/* ============================================================
51. TABELA DO RESUMO
============================================================ */
html.ramy-cart-active
body.ramy-cart-physical
.cart_totals
table.shop_table,
html.ramy-cart-active
body.ramy-cart-mixed
.cart_totals
table.shop_table {
display: block !important;
width: 100% !important;
max-width: none !important;
table-layout: auto !important;
box-sizing: border-box !important;
}
html.ramy-cart-active
body.ramy-cart-physical
.cart_totals
table.shop_table
tbody,
html.ramy-cart-active
body.ramy-cart-mixed
.cart_totals
table.shop_table
tbody {
display: block !important;
width: 100% !important;
max-width: none !important;
}
/* ============================================================
52. SUBTOTAL E TOTAL
============================================================ */
/*
* Como a tabela virou block, recriamos as linhas normais
* de subtotal e total com flex.
*/
html.ramy-cart-active
body.ramy-cart-physical
.cart_totals
tr.cart-subtotal,
html.ramy-cart-active
body.ramy-cart-physical
.cart_totals
tr.order-total,
html.ramy-cart-active
body.ramy-cart-mixed
.cart_totals
tr.cart-subtotal,
html.ramy-cart-active
body.ramy-cart-mixed
.cart_totals
tr.order-total {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
box-sizing: border-box !important;
}
html.ramy-cart-active
body.ramy-cart-physical
.cart_totals
tr.cart-subtotal > th,
html.ramy-cart-active
body.ramy-cart-physical
.cart_totals
tr.cart-subtotal > td,
html.ramy-cart-active
body.ramy-cart-physical
.cart_totals
tr.order-total > th,
html.ramy-cart-active
body.ramy-cart-physical
.cart_totals
tr.order-total > td,
html.ramy-cart-active
body.ramy-cart-mixed
.cart_totals
tr.cart-subtotal > th,
html.ramy-cart-active
body.ramy-cart-mixed
.cart_totals
tr.cart-subtotal > td,
html.ramy-cart-active
body.ramy-cart-mixed
.cart_totals
tr.order-total > th,
html.ramy-cart-active
body.ramy-cart-mixed
.cart_totals
tr.order-total > td {
display: block !important;
width: auto !important;
max-width: none !important;
flex: 0 0 auto !important;
}
/* ============================================================
53. FRETE — OCUPAR TODA A LARGURA
============================================================ */
html.ramy-cart-active
body.ramy-cart-physical
.cart_totals
tr.woocommerce-shipping-totals.shipping,
html.ramy-cart-active
body.ramy-cart-mixed
.cart_totals
tr.woocommerce-shipping-totals.shipping {
display: block !important;
width: 100% !important;
max-width: none !important;
box-sizing: border-box !important;
}
html.ramy-cart-active
body.ramy-cart-physical
.cart_totals
tr.woocommerce-shipping-totals.shipping > th,
html.ramy-cart-active
body.ramy-cart-physical
.cart_totals
tr.woocommerce-shipping-totals.shipping > td,
html.ramy-cart-active
body.ramy-cart-mixed
.cart_totals
tr.woocommerce-shipping-totals.shipping > th,
html.ramy-cart-active
body.ramy-cart-mixed
.cart_totals
tr.woocommerce-shipping-totals.shipping > td {
display: block !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
box-sizing: border-box !important;
}
/* ============================================================
54. MÉTODOS DE ENTREGA — LARGURA COMPLETA
============================================================ */
html.ramy-cart-active
body.ramy-cart-physical
.cart_totals
ul#shipping_method,
html.ramy-cart-active
body.ramy-cart-mixed
.cart_totals
ul#shipping_method {
display: block !important;
width: 100% !important;
max-width: none !important;
}
html.ramy-cart-active
body.ramy-cart-physical
.cart_totals
ul#shipping_method li,
html.ramy-cart-active
body.ramy-cart-mixed
.cart_totals
ul#shipping_method li {
display: flex !important;
align-items: flex-start !important;
width: 100% !important;
max-width: none !important;
}
/*
* Impede o texto da transportadora de ficar
* preso naquela coluninha minúscula.
*/
html.ramy-cart-active
body.ramy-cart-physical
.cart_totals
ul#shipping_method li label,
html.ramy-cart-active
body.ramy-cart-mixed
.cart_totals
ul#shipping_method li label {
display: block !important;
flex: 1 1 auto !important;
width: auto !important;
max-width: none !important;
white-space: normal !important;
}
/* ============================================================
55. CALCULADORA — LARGURA COMPLETA
============================================================ */
html.ramy-cart-active
body.ramy-cart-physical
.cart_totals
.shipping-calculator-form,
html.ramy-cart-active
body.ramy-cart-mixed
.cart_totals
.shipping-calculator-form {
display: block !important;
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
box-sizing: border-box !important;
}
html.ramy-cart-active
body.ramy-cart-physical
.cart_totals
.shipping-calculator-form
.form-row,
html.ramy-cart-active
body.ramy-cart-mixed
.cart_totals
.shipping-calculator-form
.form-row {
width: 100% !important;
max-width: none !important;
}
/* Inputs */
html.ramy-cart-active
body.ramy-cart-physical
.cart_totals
.shipping-calculator-form
input,
html.ramy-cart-active
body.ramy-cart-physical
.cart_totals
.shipping-calculator-form
select,
html.ramy-cart-active
body.ramy-cart-mixed
.cart_totals
.shipping-calculator-form
input,
html.ramy-cart-active
body.ramy-cart-mixed
.cart_totals
.shipping-calculator-form
select {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
box-sizing: border-box !important;
}
/* Select2 */
html.ramy-cart-active
body.ramy-cart-physical
.cart_totals
.shipping-calculator-form
.select2-container,
html.ramy-cart-active
body.ramy-cart-mixed
.cart_totals
.shipping-calculator-form
.select2-container {
width: 100% !important;
min-width: 0 !important;
max-width: none !important;
}
/* ============================================================
56. BOTÃO DE FINALIZAÇÃO
============================================================ */
html.ramy-cart-active
body.ramy-cart-physical
.cart_totals
.wc-proceed-to-checkout,
html.ramy-cart-active
body.ramy-cart-mixed
.cart_totals
.wc-proceed-to-checkout {
width: 100% !important;
box-sizing: border-box !important;
}
/* ============================================================
57. MOBILE
============================================================ */
@media (max-width: 768px) {
html.ramy-cart-active
body.ramy-cart-physical
.cart-collaterals
.cart_totals,
html.ramy-cart-active
body.ramy-cart-mixed
.cart-collaterals
.cart_totals {
width: 100% !important;
max-width: none !important;
}
}
/* ============================================================
58. CORREÇÃO — ABRIR / FECHAR CALCULADORA DE FRETE
============================================================ */
/*
* Respeita o comportamento padrão do WooCommerce:
* o formulário fica escondido e aparece somente
* ao clicar em "Mudar endereço".
*/
html.ramy-cart-active
body.ramy-cart-physical
.cart_totals
.shipping-calculator-form,
html.ramy-cart-active
body.ramy-cart-mixed
.cart_totals
.shipping-calculator-form {
display: none !important;
}
/*
* O WooCommerce adiciona o estilo inline display:block
* quando o usuário abre a calculadora.
*/
html.ramy-cart-active
body.ramy-cart-physical
.cart_totals
.shipping-calculator-form[style*="display: block"],
html.ramy-cart-active
body.ramy-cart-mixed
.cart_totals
.shipping-calculator-form[style*="display: block"] {
display: block !important;
}
/* ============================================================
CARRINHO — SELECT2 / OPÇÕES DOS CAMPOS DE SELEÇÃO
============================================================ */
/* Campo de busca que aparece dentro da lista */
body.ramy-cart .select2-container--open .select2-search__field,
html.ramy-cart-active .select2-container--open .select2-search__field {
font-family: "Red Hat Display", sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
letter-spacing: 0.02em !important;
color: var(--ramy-text) !important;
}
/* Cada opção da lista */
body.ramy-cart .select2-container--open .select2-results__option,
html.ramy-cart-active .select2-container--open .select2-results__option {
font-family: "Red Hat Display", sans-serif !important;
font-size: 14px !important;
font-weight: 400 !important;
line-height: 1.4 !important;
letter-spacing: 0.02em !important;
padding: 9px 12px !important;
min-height: auto !important;
}
/* Impede estilos gigantes herdados de outros plugins/tema */
body.ramy-cart .select2-container--open .select2-results,
body.ramy-cart .select2-container--open .select2-results__options,
html.ramy-cart-active .select2-container--open .select2-results,
html.ramy-cart-active .select2-container--open .select2-results__options {
font-size: 14px !important;
line-height: 1.4 !important;
}