/* ============================================================================
   Estilos da página do carrinho (views/carrinho/carrinho-view.php)
   Carregado via $script_css no carrinho-controller (echoado pelo head.php).
   ============================================================================ */

/* ===== Título da página ===== */
.mc-cart-titulo { font-size: 18px; font-weight: 700; margin: 16px 0 20px !important; padding: 0 !important; border: 0 !important; line-height: 1.2; }
.mc-cart-titulo span { background: none !important; padding: 0 !important; }
.mc-cart-titulo i { margin-right: 8px; font-size: 16px; }
/* remove o respiro extra da .row do título e do breadcrumb */
.main-container.headerOffset .breadcrumbDiv { padding-bottom: 0; }
.main-container.headerOffset .breadcrumb { margin-bottom: 8px; }

/* respiro entre o carrinho e o rodapé do site */
.main-container.headerOffset { padding-bottom: 50px; }

/* mobile: título e breadcrumb mais compactos (no celular ocupavam altura demais) */
@media (max-width: 575px) {
	.mc-cart-titulo { font-size: 19px; margin: 8px 0 14px !important; }
	.mc-cart-titulo i { font-size: 17px; margin-right: 6px; }
	.main-container.headerOffset .breadcrumbDiv { padding-top: 0; }
	.main-container.headerOffset .breadcrumb { margin: 0 0 4px; padding: 8px 12px; font-size: 13px; }
}

/* ===== Carrinho vazio — card centralizado no mesmo padrão dos demais ===== */
.mc-cart-vazio {
	background: #fff; border: 1px solid #ececec; border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0,0,0,.06);
	padding: 56px 24px 60px; text-align: center;
}
.mc-cart-vazio-icone {
	width: 84px; height: 84px; margin: 0 auto 18px; border-radius: 50%;
	background: #f0f1f3; display: flex; align-items: center; justify-content: center;
}
.mc-cart-vazio-icone i { font-size: 34px; color: #9aa0ab; }
.mc-cart-vazio h2 { font-size: 20px; font-weight: 700; color: #3a3f49; margin: 0 0 8px; }
.mc-cart-vazio p { font-size: 14px; color: #6b7180; margin: 0 0 24px; }
.mc-cart-vazio .mc-cart-vazio-btn { padding: 10px 28px; }
.mc-cart-vazio .mc-cart-vazio-btn i { margin-right: 6px; font-size: 12px; }

/* ===== Card que envolve a lista de itens — espelha o card do resumo ===== */
.col-lg-9 .row.userInfo {
	background: #fff; border: 1px solid #ececec; border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0,0,0,.06); margin: 0; overflow: hidden;
}
.col-lg-9 .row.userInfo .cartContent { padding: 0 16px; }
.col-lg-9 .row.userInfo > [class*="col-"] { padding-left: 0; padding-right: 0; }
.col-lg-9 .row.userInfo form { margin: 0; }

/* rodapé do card (Continuar comprando) — sobrescreve o .cartFooter global (#EBEDEF) */
.col-lg-9 .userInfo .cartFooter {
	background: #fff !important; padding: 0 !important;
	border-top: 1px solid #f0f1f3 !important;
}
.col-lg-9 .userInfo .cartFooter .box-footer { padding: 18px 16px; background: #fff; overflow: hidden; }

/* etiqueta "Personalizado" — badge verde suave (neutraliza .incaps legado) */
.col-lg-9 .userInfo .CartDescription .incaps,
.col-lg-9 .userInfo .CartDescription h3.incaps {
	margin: 8px 0 0 !important; padding: 0 !important; line-height: 1 !important; letter-spacing: 0 !important;
}
.col-lg-9 .userInfo .CartDescription .incaps a {
	display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
	background: #f0f1f3; color: #5a606b; font-weight: 600; font-size: 11.5px;
	text-transform: none; letter-spacing: 0; text-decoration: none;
	padding: 4px 11px; border-radius: 20px; line-height: 1;
}
.col-lg-9 .userInfo .CartDescription .incaps a:hover { background: #e6e8eb; color: #3a3f49; text-decoration: none; }
.col-lg-9 .userInfo .CartDescription .incaps .color-in {
	margin: 0 !important; font-size: 12px !important; color: #1e8e4f;
}

/* ===== Tabela de itens do carrinho — visual limpo (escopado) ===== */
/* .col-lg-9 .userInfo eleva a especificidade p/ vencer o global style-NN.css */
/* mata a moldura do .table-responsive do Bootstrap (border 1px + overflow) */
.col-lg-9 .userInfo .cartTable.table-responsive,
.col-lg-9 .userInfo .cartTable {
	border: 0 !important; border-collapse: collapse; width: 100%;
	overflow: visible; margin: 0;
}
/* Larguras híbridas (padrão ML/Amazon): foto, valores, qtd e lixeira travadas em px
   (conteúdo de tamanho constante → não dançam); a coluna DETALHES fica SEM largura
   e absorve todo o espaço restante automaticamente. Sem table-layout:fixed e sem
   percentuais manuais — nada redimensiona conforme o nome do produto. */
.col-lg-9 .userInfo .cartTable td.CartProductThumb { width: 90px; }
.col-lg-9 .userInfo .cartTable td.col-vunit { width: 120px; }
.col-lg-9 .userInfo .cartTable td.col-qtd   { width: 90px;  }
.col-lg-9 .userInfo .cartTable td.price     { width: 120px; }
.col-lg-9 .userInfo .cartTable td.delete    { width: 48px;  }

/* cabeçalho da tabela — neutraliza o fundo #EBEDEF global */
.col-lg-9 .userInfo .cartTable > tbody > tr.cartTableHeader { background: transparent !important; border: 0 !important; }
.col-lg-9 .userInfo .cartTable > tbody > tr.cartTableHeader > td {
	background: transparent !important; color: #8a8f99; font-size: 11px; font-weight: 700;
	text-transform: uppercase; letter-spacing: .04em; padding: 16px 12px 11px !important;
	border: 0 !important; border-bottom: 1px solid #ececec !important; text-align: left;
	white-space: nowrap;
}

/* linhas de produto — sem border-bottom (gerava traço recuado flutuante);
   o separador entre vários itens fica no topo de cada linha a partir da 2ª */
.col-lg-9 .userInfo .cartTable > tbody > tr.CartProduct:not(.cartTableHeader) { border: 0 !important; }
.col-lg-9 .userInfo .cartTable > tbody > tr.CartProduct:not(.cartTableHeader) > td {
	padding: 18px 12px !important; vertical-align: middle; border: 0 !important; text-align: left;
}
.col-lg-9 .userInfo .cartTable > tbody > tr.CartProduct:not(.cartTableHeader) ~ tr.CartProduct:not(.cartTableHeader) > td {
	border-top: 1px solid #f0f1f3 !important;
}
/* Valor Unitário e Total alinhados à ESQUERDA — valores ficam logo sob o rótulo do
   cabeçalho (que também é left), leitura coesa por coluna. */
.col-lg-9 .userInfo .cartTable td.col-vunit,
.col-lg-9 .userInfo .cartTable td.price,
.col-lg-9 .userInfo .cartTable td.col-vunit .price,
.col-lg-9 .userInfo .cartTable > tbody > tr.cartTableHeader > td.col-vunit,
.col-lg-9 .userInfo .cartTable > tbody > tr.cartTableHeader > td.price { text-align: left; }
/* Qtd à esquerda também — consistência com as demais colunas. */
.col-lg-9 .userInfo .cartTable td.col-qtd,
.col-lg-9 .userInfo .cartTable > tbody > tr.cartTableHeader > td.col-qtd { text-align: left; }
/* a .price global tem min-height:35px + line-height:16px → empurra o valor unit. p/ cima;
   zera isso p/ o vertical-align:middle do td centralizar com o select e o total */
.col-lg-9 .userInfo .cartTable td .price { min-height: 0; line-height: 1.2; margin: 0; }
.col-lg-9 .userInfo .cartTable td.delete { text-align: center; }

/* miniatura do produto — coluna estreita (a largura real vem do width:% no header,
   com table-layout:fixed); padding lateral mínimo p/ a foto colar à esquerda */
.col-lg-9 .userInfo .cartTable td.CartProductThumb { padding: 18px 8px 18px 4px !important; }
.col-lg-9 .userInfo .CartProductThumb > div { text-align: left; }
.col-lg-9 .userInfo .CartProductThumb a img {
	width: 74px !important; height: 74px; object-fit: contain;
	border: 1px solid #ececec; border-radius: 10px; padding: 4px; background: #fff;
}
.col-lg-9 .userInfo .CartProductThumb p { margin: 6px 0 0; color: #9aa0ab; font-size: 10px !important; line-height: 1.2; }

/* descrição: nome do produto */
/* o reset global (h1..h6 { padding-bottom: 15px }) deixava um vão grande entre o
   nome e os detalhes (grade/personalização) — zera o padding-bottom do h4 aqui */
.cartContent .CartDescription h4 { margin: 0; padding-bottom: 0; font-size: 15px; line-height: 1.35; }
.cartContent .CartDescription h4 > a { color: #3a3f49; font-weight: 600; text-decoration: none; }
.cartContent .CartDescription h4 > a:hover { text-decoration: underline; }
.cartContent .CartDescription h4 > hr { display: none; }            /* remove o traço poluído sob o nome */
.cartContent .CartDescription p,
.cartContent .CartDescription small { color: #6b7180; font-size: 12.5px; }
.cartContent .CartDescription p { margin: 6px 0 0; }

/* preços */
.cartContent .cartTable .price { font-size: 14px; color: #3a3f49; white-space: nowrap; }
.cartContent .cartTable td.price { font-weight: 700; }              /* total da linha (3ª col à dir.) */
.cartContent .cartTable .price span { font-weight: 500; white-space: nowrap; }

/* seletor de quantidade */
.col-lg-9 .userInfo .cartTable select.carrinhoQtd {
	height: 30px !important; width: auto !important; min-width: 56px; max-width: none; display: inline-block;
	border: 1px solid #d6dae0; border-radius: 8px; box-shadow: none;
	padding: 0 26px 0 10px; font-size: 14px; line-height: 28px; color: #3a3f49; background-color: #fff;
}
.col-lg-9 .userInfo .cartTable select.carrinhoQtd:focus { border-color: #b9c0c9; outline: 0; }

/* coluna de remover */
.cartContent .cartTable td.delete { text-align: center; }
.cartContent .cartTable td.delete a { color: #c0c4cc; transition: color .15s; display: inline-block; }
.cartContent .cartTable td.delete a:hover { color: #c0392b; }
.cartContent .cartTable td.delete .glyphicon,
.cartContent .cartTable td.delete .fa { font-size: 17px; }          /* reduz o fa-2x exagerado */

/* tag "Frete Grátis" — badge pill verde (benefício); vence o style inline com !important */
.col-lg-9 .userInfo .CartDescription .new-product {
	display: inline-flex !important; align-items: center;
	background: #e8f6ee !important; color: #1e8e4f !important;
	border-radius: 20px !important; font-weight: 600 !important;
	font-size: 11.5px !important; padding: 4px 11px !important; line-height: 1 !important;
	margin: 0 0 6px !important; float: none !important;
}

/* rodapé "Continuar comprando" — outline na cor do tema (mesmo padrão dos botões de
   voltar do checkout: .co-btn-voltar-tema). Secundário ao "Finalizar compra" sólido. */
.cartFooter .box-footer .btn-default {
	border-radius: 8px; border: 1px solid var(--mc-cor, #d6dae0); background: #fff;
	color: var(--mc-cor, #6b7180); font-weight: 600; padding: 10px 18px; box-shadow: none;
	display: inline-flex; align-items: center; gap: 8px; transition: background .15s ease, color .15s ease;
}
.cartFooter .box-footer .btn-default:hover { background: var(--mc-cor, #f7f8fa); color: #fff; }

/* ===== Responsivo: a tabela de itens vira cards empilhados em telas pequenas =====
   A <table> de 6 colunas fica intransitável no celular (colunas espremidas, nome
   quebrado, "R$" cortado). Aqui cada <tr> vira um card em CSS grid, mapeando cada
   <td> a uma área nomeada própria — sem mexer no HTML gerado pelo PHP:

       [ thumb ] [ nome / personalização .......... ] [ x ]
       [ thumb ] [ valor unit. ] [ qtd ] [ total ........ ]
*/
@media (min-width: 576px) and (max-width: 1199px) {
	/* destrava a semântica de tabela para o grid funcionar */
	.col-lg-9 .userInfo .cartTable,
	.col-lg-9 .userInfo .cartTable > tbody { display: block; width: 100%; }

	/* cabeçalho de colunas some — cada card é autoexplicativo (rótulos via ::before) */
	.col-lg-9 .userInfo .cartTable > tbody > tr.cartTableHeader { display: none !important; }

	.col-lg-9 .userInfo .cartTable > tbody > tr.CartProduct:not(.cartTableHeader) {
		display: grid;
		grid-template-columns: 74px 1fr 1fr 1fr;
		grid-template-areas:
			"thumb desc  desc  del"
			"thumb vunit qtd   total";
		column-gap: 10px; row-gap: 12px;
		align-items: start;
		padding: 16px 4px !important;
	}
	/* separador entre cards (sobrescreve o border-top por <td> do desktop) */
	.col-lg-9 .userInfo .cartTable > tbody > tr.CartProduct:not(.cartTableHeader) ~ tr.CartProduct:not(.cartTableHeader) {
		border-top: 1px solid #f0f1f3 !important;
	}
	.col-lg-9 .userInfo .cartTable > tbody > tr.CartProduct:not(.cartTableHeader) > td {
		padding: 0 !important; border: 0 !important; text-align: left !important;
		min-width: 0; vertical-align: top;
	}

	/* miniatura abrange a coluna esquerda nas duas linhas */
	.col-lg-9 .userInfo .cartTable td.CartProductThumb { grid-area: thumb; }
	.col-lg-9 .userInfo .CartProductThumb > div { text-align: left; }
	.col-lg-9 .userInfo .CartProductThumb a img { width: 74px !important; height: 74px; }

	/* descrição (nome + personalização) */
	.col-lg-9 .userInfo .cartTable > tbody > tr.CartProduct:not(.cartTableHeader) > td:nth-child(2) { grid-area: desc; }
	.col-lg-9 .userInfo .cartTable > tbody > tr.CartProduct:not(.cartTableHeader) > td:nth-child(2) .CartDescription { overflow-wrap: anywhere; }

	/* valor unitário · qtd · total — cada um na sua área da 2ª linha */
	.col-lg-9 .userInfo .cartTable > tbody > tr.CartProduct:not(.cartTableHeader) > td:nth-child(3) { grid-area: vunit; }
	.col-lg-9 .userInfo .cartTable > tbody > tr.CartProduct:not(.cartTableHeader) > td:nth-child(4) { grid-area: qtd;   }
	.col-lg-9 .userInfo .cartTable > tbody > tr.CartProduct:not(.cartTableHeader) > td:nth-child(5) { grid-area: total; }

	/* rótulos via ::before, já que o cabeçalho de colunas sumiu */
	.col-lg-9 .userInfo .cartTable > tbody > tr.CartProduct:not(.cartTableHeader) > td:nth-child(3)::before { content: "Valor unit."; }
	.col-lg-9 .userInfo .cartTable > tbody > tr.CartProduct:not(.cartTableHeader) > td:nth-child(4)::before { content: "Qtd"; }
	.col-lg-9 .userInfo .cartTable > tbody > tr.CartProduct:not(.cartTableHeader) > td:nth-child(5)::before { content: "Total"; }
	.col-lg-9 .userInfo .cartTable > tbody > tr.CartProduct:not(.cartTableHeader) > td:nth-child(3)::before,
	.col-lg-9 .userInfo .cartTable > tbody > tr.CartProduct:not(.cartTableHeader) > td:nth-child(4)::before,
	.col-lg-9 .userInfo .cartTable > tbody > tr.CartProduct:not(.cartTableHeader) > td:nth-child(5)::before {
		display: block; color: #8a8f99; font-size: 10px; font-weight: 700;
		text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px;
	}
	.col-lg-9 .userInfo .cartTable td.price { text-align: left; font-weight: 700; }
	.col-lg-9 .userInfo .cartTable select.carrinhoQtd { max-width: 80px; }

	/* botão remover no canto superior direito do card */
	.col-lg-9 .userInfo .cartTable td.delete { grid-area: del; justify-self: end; text-align: right; }
}

/* ===== Celular (≤575px): layout de app — atributos empilhados (rótulo ↔ valor) =====
       [img]  Nome do produto              🗑
              Descrição / personalização

       Valor unit. ................. R$ 69,90
       Qtd ......................... [ 1 ▾ ]
       ─────────────────────────────────────
       Total ....................... R$ 69,90
*/
@media (max-width: 575px) {
	.col-lg-9 .userInfo .cartTable,
	.col-lg-9 .userInfo .cartTable > tbody { display: block; width: 100%; }

	/* cabeçalho de colunas some — os rótulos voltam por ::before em cada linha */
	.col-lg-9 .userInfo .cartTable > tbody > tr.cartTableHeader { display: none !important; }

	/* cada item é um card empilhado: topo (thumb|desc|del) em grid, resto em bloco */
	.col-lg-9 .userInfo .cartTable > tbody > tr.CartProduct:not(.cartTableHeader) {
		display: grid;
		grid-template-columns: 64px 1fr auto;
		grid-template-areas:
			"thumb desc  del"
			"vunit vunit vunit"
			"qtd   qtd   qtd"
			"total total total";
		column-gap: 12px; row-gap: 0;
		padding: 16px 4px !important;
	}
	.col-lg-9 .userInfo .cartTable > tbody > tr.CartProduct:not(.cartTableHeader) ~ tr.CartProduct:not(.cartTableHeader) {
		border-top: 1px solid #f0f1f3 !important;
	}
	.col-lg-9 .userInfo .cartTable > tbody > tr.CartProduct:not(.cartTableHeader) > td {
		padding: 0 !important; border: 0 !important; text-align: left !important;
		min-width: 0; vertical-align: top;
	}

	/* topo: miniatura, descrição e lixeira lado a lado */
	.col-lg-9 .userInfo .cartTable td.CartProductThumb { grid-area: thumb; }
	.col-lg-9 .userInfo .CartProductThumb > div { text-align: left; }
	.col-lg-9 .userInfo .CartProductThumb a img { width: 64px !important; height: 64px; }
	.col-lg-9 .userInfo .cartTable > tbody > tr.CartProduct:not(.cartTableHeader) > td:nth-child(2) { grid-area: desc; align-self: start; }
	.col-lg-9 .userInfo .cartTable > tbody > tr.CartProduct:not(.cartTableHeader) > td:nth-child(2) .CartDescription { overflow-wrap: anywhere; }
	.col-lg-9 .userInfo .cartTable td.delete { grid-area: del; justify-self: end; text-align: right; }

	/* respiro entre o topo e a faixa de valores */
	.col-lg-9 .userInfo .cartTable > tbody > tr.CartProduct:not(.cartTableHeader) > td:nth-child(3) { margin-top: 14px; }

	/* linhas de atributo: rótulo (::before) à esquerda, valor à direita */
	.col-lg-9 .userInfo .cartTable > tbody > tr.CartProduct:not(.cartTableHeader) > td:nth-child(3),  /* valor unit. */
	.col-lg-9 .userInfo .cartTable > tbody > tr.CartProduct:not(.cartTableHeader) > td:nth-child(4),  /* qtd */
	.col-lg-9 .userInfo .cartTable > tbody > tr.CartProduct:not(.cartTableHeader) > td:nth-child(5) { /* total */
		display: flex; align-items: center; justify-content: space-between;
		gap: 12px; padding: 10px 2px !important; font-size: 14px;
	}
	.col-lg-9 .userInfo .cartTable > tbody > tr.CartProduct:not(.cartTableHeader) > td:nth-child(3) { grid-area: vunit; }
	.col-lg-9 .userInfo .cartTable > tbody > tr.CartProduct:not(.cartTableHeader) > td:nth-child(4) { grid-area: qtd; border-bottom: 1px solid #f0f1f3 !important; }
	.col-lg-9 .userInfo .cartTable > tbody > tr.CartProduct:not(.cartTableHeader) > td:nth-child(5) { grid-area: total; }

	/* rótulos */
	.col-lg-9 .userInfo .cartTable > tbody > tr.CartProduct:not(.cartTableHeader) > td:nth-child(3)::before { content: "Valor unitário"; }
	.col-lg-9 .userInfo .cartTable > tbody > tr.CartProduct:not(.cartTableHeader) > td:nth-child(4)::before { content: "Quantidade"; }
	.col-lg-9 .userInfo .cartTable > tbody > tr.CartProduct:not(.cartTableHeader) > td:nth-child(5)::before { content: "Total"; }
	.col-lg-9 .userInfo .cartTable > tbody > tr.CartProduct:not(.cartTableHeader) > td:nth-child(3)::before,
	.col-lg-9 .userInfo .cartTable > tbody > tr.CartProduct:not(.cartTableHeader) > td:nth-child(4)::before,
	.col-lg-9 .userInfo .cartTable > tbody > tr.CartProduct:not(.cartTableHeader) > td:nth-child(5)::before {
		color: #6b7180; font-size: 13px; font-weight: 500;
		text-transform: none; letter-spacing: 0; margin: 0;
	}

	/* total em destaque */
	.col-lg-9 .userInfo .cartTable > tbody > tr.CartProduct:not(.cartTableHeader) > td:nth-child(5) {
		padding-top: 12px !important; font-size: 16px; font-weight: 700; color: #3a3f49;
	}
	.col-lg-9 .userInfo .cartTable > tbody > tr.CartProduct:not(.cartTableHeader) > td:nth-child(5)::before { font-weight: 700; color: #3a3f49; font-size: 14px; }
	.col-lg-9 .userInfo .cartTable td.price { text-align: right; }

	.col-lg-9 .userInfo .cartTable select.carrinhoQtd { max-width: 90px; }
}

/* ===== Resumo do pedido (carrinho) — escopado em .mc-cart-resumo ===== */
.rightSidebar .mc-cart-resumo {
	background: #fff;
	border: 1px solid #ececec;
	border-radius: 12px;
	box-shadow: 0 1px 3px rgba(0,0,0,.06);
	padding: 18px 20px;
	position: sticky;
	top: 90px;
}
.mc-cart-resumo-tit {
	font-size: 16px; font-weight: 700; color: #3a3f49;
	margin: 0 0 14px; padding: 0 0 12px; border-bottom: 1px solid #ececec;
}
.mc-cart-resumo-tabela { width: 100%; margin: 0 0 16px; }
.mc-cart-resumo-tabela td { padding: 6px 0; font-size: 14px; color: #6b7180; border: 0; white-space: nowrap; }
.mc-cart-resumo-tabela td:first-child { white-space: nowrap; padding-right: 12px; width: 60%; }
.mc-cart-resumo-tabela td.mc-cart-resumo-valor { text-align: right; color: #3a3f49; font-weight: 600; }
.mc-cart-resumo-tabela .mc-cart-resumo-total td {
	border-top: 1px solid #ececec; padding-top: 12px; font-size: 16px; font-weight: 700; color: #3a3f49; vertical-align: middle;
}
.mc-cart-resumo-tabela .mc-cart-resumo-total td.site-color {
	text-align: right; white-space: nowrap; font-size: 16px !important; line-height: 1.1;
}
.mc-cart-resumo .mc-cart-finalizar {
	border-radius: 8px; font-weight: 700; padding: 13px; font-size: 15px;
	box-shadow: none; text-shadow: none; border: 0;
}
.mc-cart-resumo .mc-cart-finalizar i { margin-left: 6px; }
@media (max-width: 1199px) {
	.rightSidebar .mc-cart-resumo { position: static; margin-top: 20px; }
	/* a tabela é col-lg-9 col-md-9 col-sm-7 e o resumo col-*-3/5 — abaixo de 1200px
	   (inclui 1024px) isso os deixava LADO A LADO espremidos (resumo cobria a tabela).
	   Força ambos a largura total p/ empilharem: tabela/cards em cima, resumo abaixo.
	   Breakpoint do carrinho = 1199px (≥1200 mostra tabela+resumo lado a lado). */
	.row .col-lg-9.col-md-9.col-sm-7,
	.row .rightSidebar {
		width: 100% !important;
		float: none !important;
	}
}

/* ===== Modal "Dados personalizados" — lista label/valor limpa ===== */
.mc-pers-modal .modal-dialog { width: 540px !important; max-width: 94% !important; margin: 40px auto !important; }
.mc-pers-modal .modal-content { border: 0 !important; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 30px rgba(0,0,0,.18); }

/* header espelha o .mc-modal-head do modal de pedido (Minha conta) */
.mc-pers-header {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	background: #fafbfc; border-bottom: 1px solid #ececec; padding: 14px 24px !important;
	border-radius: 12px 12px 0 0; min-height: 0; margin-bottom: 0 !important;
}
.mc-pers-header .modal-title { font-size: 17px; font-weight: 700; color: #3a3f49; margin: 0 !important; padding: 0; line-height: 1.2; }
.mc-pers-header .mc-pers-subtit { margin: 2px 0 0 !important; padding: 0; font-size: 12px; color: #9aa0a8; line-height: 1.2; }
.mc-pers-head-texto { display: block; }
.mc-pers-header .close {
	border: 0; background: none; font-size: 24px; line-height: 1; color: #b0b4bc;
	cursor: pointer; padding: 0; margin: 0; opacity: 1; text-shadow: none; float: none;
}
.mc-pers-header .close:hover { color: #6b7180; }

.mc-pers-body { padding: 16px 20px 4px !important; max-height: 62vh; overflow-y: auto; }

/* texto explicativo no topo — caixa clean (well suave) */
.mc-pers-intro {
	margin: 0 0 4px; padding: 11px 14px; font-size: 13px; color: #6b7180; line-height: 1.45;
	background: #f7f8fa; border: 1px solid #eef0f2; border-radius: 8px;
}
.mc-pers-intro b { color: #3a3f49; font-weight: 600; }

.mc-pers-grupo { padding: 16px 0 4px; border-bottom: 1px solid #f0f1f3; }
.mc-pers-grupo:first-child { padding-top: 8px; }
.mc-pers-grupo:last-child { border-bottom: 0; }
/* cabeçalho de seção com barra na cor do tema */
.mc-pers-grupo-tit {
	display: flex; align-items: center; gap: 8px;
	font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
	color: #6b7180; margin: 0 0 10px;
}
.mc-pers-grupo-tit::before {
	content: ""; display: inline-block; width: 3px; height: 14px; border-radius: 2px;
	background: var(--mc-cor, #3a3f49);
}
.mc-pers-campos {
	display: block; border: 1px solid #eef0f2; border-radius: 8px; overflow: hidden; margin-bottom: 12px;
}
.mc-pers-campo {
	display: flex; gap: 16px; padding: 9px 12px; font-size: 14px; align-items: baseline;
	justify-content: space-between; border-bottom: 1px solid #f0f1f3;
}
.mc-pers-campo:nth-child(odd) { background: #fafbfc; }
.mc-pers-campo:last-child { border-bottom: 0; }
.mc-pers-campo .mc-pers-label { color: #6b7180; flex: 0 0 auto; }
.mc-pers-campo .mc-pers-valor { color: #3a3f49; font-weight: 600; text-align: right; word-break: break-word; }

/* campos de imagem ocupam linha inteira (label em cima) */
.mc-pers-campo-img { flex-direction: column; gap: 8px; align-items: stretch; }
.mc-pers-campo-img .mc-pers-label { flex: none; }
.mc-pers-campo-img .mc-pers-valor { text-align: left; }
.mc-pers-img {
	max-width: 100%; max-height: 180px; border: 1px solid #ececec;
	border-radius: 8px; padding: 4px; background: #fff;
}
.mc-pers-img-galeria { max-height: 220px; }

/* tabela dentro do campo */
.mc-pers-campo-tabela { flex-direction: column; gap: 8px; align-items: stretch; }
.mc-pers-campo-tabela .mc-pers-label { flex: none; }
.mc-pers-campo-tabela .mc-pers-valor { text-align: left; }
.mc-pers-tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.mc-pers-tabela td { border: 1px solid #ececec; padding: 6px 9px; color: #3a3f49; }

.mc-pers-footer {
	background: #fafbfc; border-top: 1px solid #ececec; padding: 12px 20px;
	display: flex; align-items: stretch; justify-content: center; gap: 0;
}
/* "Alterar" e "Fechar" com larguras proporcionais e pipe divisor entre eles */
.mc-pers-footer .mc-pers-alterar { flex: 1 1 50%; display: flex; }
.mc-pers-footer .mc-pers-alterar a {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px; width: 100%;
	color: #6b7180; font-size: 14px; font-weight: 600; letter-spacing: 0 !important; text-decoration: none;
	padding: 8px 16px;
}
.mc-pers-footer .mc-pers-alterar a:hover { color: var(--mc-cor, #3a3f49); }
.mc-pers-footer .mc-pers-alterar img { width: 16px !important; margin: 0 !important; }
/* pipe divisor */
.mc-pers-footer .btn-default {
	flex: 1 1 50%;
	border: 0; border-left: 1px solid #e1e4e8; border-radius: 0;
	background: transparent; color: #3a3f49; font-weight: 600; font-size: 14px;
	padding: 8px 16px; box-shadow: none;
}
.mc-pers-footer .btn-default:hover { background: #f0f1f3; color: #3a3f49; }

@media (max-width: 600px) {
	.mc-pers-campo { flex-direction: column; gap: 2px; }
	.mc-pers-campo .mc-pers-label { flex: none; }
}